[PATCH v1 11/13] feat(ui): add radio-group ui

[Muhammad Rizki <kiizuha@gnuweeb.org>]

Signed-off-by: Muhammad Rizki <kiizuha@gnuweeb.org>
---
 src/lib/components/ui/radio-group/index.ts    | 10 +++++++
 .../ui/radio-group/radio-group-item.svelte    | 30 +++++++++++++++++++
 .../ui/radio-group/radio-group.svelte         | 13 ++++++++
 3 files changed, 53 insertions(+)
 create mode 100644 src/lib/components/ui/radio-group/index.ts
 create mode 100644 src/lib/components/ui/radio-group/radio-group-item.svelte
 create mode 100644 src/lib/components/ui/radio-group/radio-group.svelte

diff --git a/src/lib/components/ui/radio-group/index.ts b/src/lib/components/ui/radio-group/index.ts
new file mode 100644
index 0000000..86c6131
--- /dev/null
+++ b/src/lib/components/ui/radio-group/index.ts
@@ -0,0 +1,10 @@
+import Root from "./radio-group.svelte";
+import Item from "./radio-group-item.svelte";
+
+export {
+  Root,
+  Item,
+  //
+  Root as RadioGroup,
+  Item as RadioGroupItem
+};
diff --git a/src/lib/components/ui/radio-group/radio-group-item.svelte b/src/lib/components/ui/radio-group/radio-group-item.svelte
new file mode 100644
index 0000000..646ab35
--- /dev/null
+++ b/src/lib/components/ui/radio-group/radio-group-item.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { RadioGroup as RadioGroupPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+  import Circle from "lucide-svelte/icons/circle";
+  import { cn } from "$utils";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<RadioGroupPrimitive.ItemProps> & {
+    value: string;
+  } = $props();
+</script>
+
+<RadioGroupPrimitive.Item
+  bind:ref
+  class={cn(
+    "aspect-square size-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+    className
+  )}
+  {...restProps}
+>
+  {#snippet children({ checked })}
+    <div class="flex items-center justify-center">
+      {#if checked}
+        <Circle class="size-3.5 fill-primary" />
+      {/if}
+    </div>
+  {/snippet}
+</RadioGroupPrimitive.Item>
diff --git a/src/lib/components/ui/radio-group/radio-group.svelte b/src/lib/components/ui/radio-group/radio-group.svelte
new file mode 100644
index 0000000..e2b0147
--- /dev/null
+++ b/src/lib/components/ui/radio-group/radio-group.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+  import { cn } from "$utils";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    value = $bindable(),
+    ...restProps
+  }: RadioGroupPrimitive.RootProps = $props();
+</script>
+
+<RadioGroupPrimitive.Root bind:value class={cn("grid gap-2", className)} {...restProps} bind:ref />
-- 
Muhammad Rizki