refactor radio group

apps/www/src/lib/components/docs/examples/radio-group/RadioGroupDemo.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
 	import { Label } from "$components/ui/label";
-	import { RadioGroup, RadioGroupItem } from "$components/ui/radio-group";
+	import { RadioGroup } from "$components/ui/radio-group";
 </script>
 
-<RadioGroup value="comfortable">
+<RadioGroup defaultValue="comfortable">
 	<div class="flex items-center space-x-2">
-		<RadioGroupItem value="default" id="r1" />
+		<RadioGroup.Item value="default" id="r1" />
 		<Label for="r1">Default</Label>
 	</div>
 	<div class="flex items-center space-x-2">
-		<RadioGroupItem value="comfortable" id="r2" />
+		<RadioGroup.Item value="comfortable" id="r2" />
 		<Label for="r2">Comfortable</Label>
 	</div>
 	<div class="flex items-center space-x-2">
-		<RadioGroupItem value="compact" id="r3" />
+		<RadioGroup.Item value="compact" id="r3" />
 		<Label for="r3">Compact</Label>
 	</div>
 </RadioGroup>

apps/www/src/lib/components/ui/radio-group/RadioGroup.svelte

@@ -1,17 +1,28 @@
 <script lang="ts">
-	import type { RadioGroupRootProps } from "radix-svelte";
-	import { RadioGroup as RadioGroupPrimitive } from "radix-svelte";
 	import { cn } from "$lib/utils";
-
+	import { melt, ctx, type RadioGroupProps } from ".";
 	let className: string | undefined | null = undefined;
 	export { className as class };
-	export let value: RadioGroupRootProps["value"] = undefined;
+
+	export let required: RadioGroupProps["required"] = undefined;
+	export let disabled: RadioGroupProps["disabled"] = undefined;
+	export let defaultValue: RadioGroupProps["defaultValue"] = undefined;
+	export let value: RadioGroupProps["value"] = undefined;
+	export let onValueChange: RadioGroupProps["onValueChange"] = undefined;
+	export let loop: RadioGroupProps["loop"] = undefined;
+	export let orientation: RadioGroupProps["orientation"] = undefined;
+
+	const root = ctx.set({
+		required,
+		disabled,
+		defaultValue,
+		value,
+		onValueChange,
+		loop,
+		orientation
+	});
 </script>
 
-<RadioGroupPrimitive.Root
-	bind:value
-	class={cn("grid gap-2", className)}
-	{...$$restProps}
->
+<div use:melt={$root} class={cn("grid gap-2", className)} {...$$restProps}>
 	<slot />
-</RadioGroupPrimitive.Root>
+</div>

apps/www/src/lib/components/ui/radio-group/RadioGroupItem.svelte

@@ -1,23 +1,27 @@
 <script lang="ts">
-	import type { RadioGroupItemProps } from "radix-svelte";
 	import { Circle } from "lucide-svelte";
-	import { RadioGroup as RadioGroupPrimitive } from "radix-svelte";
 	import { cn } from "$lib/utils";
+	import { ctx, melt, type RadioGroupItemProps } from ".";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
-	export let value: RadioGroupItemProps["value"] = "";
+	export let value: RadioGroupItemProps["value"];
+	export let disabled: RadioGroupItemProps["disabled"] = undefined;
+
+	const { item, isChecked } = ctx.getItem();
 </script>
 
-<RadioGroupPrimitive.Item
-	{value}
+<button
+	use:melt={$item({ value, disabled })}
 	class={cn(
 		"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	{...$$restProps}
 >
-	<RadioGroupPrimitive.Indicator class="flex items-center justify-center">
-		<Circle class="h-2.5 w-2.5 fill-current text-current" />
-	</RadioGroupPrimitive.Indicator>
-</RadioGroupPrimitive.Item>
+	<div class="flex items-center justify-center">
+		{#if $isChecked(value)}
+			<Circle class="h-2.5 w-2.5 fill-current text-current" />
+		{/if}
+	</div>
+</button>

apps/www/src/lib/components/ui/radio-group/index.ts

@@ -1,2 +1,54 @@
-export { default as RadioGroup } from "./RadioGroup.svelte";
-export { default as RadioGroupItem } from "./RadioGroupItem.svelte";
+import {
+	createRadioGroup,
+	melt,
+	type RadioGroupItemProps as ItemProps,
+	type CreateRadioGroupProps as RadioGroupProps,
+	type RadioGroup as RadioGroupReturn
+} from "@melt-ui/svelte";
+import { getContext, setContext } from "svelte";
+import Root from "./RadioGroup.svelte";
+import Item from "./RadioGroupItem.svelte";
+import Input from "./RadioGroupInput.svelte";
+
+type ObjectVariation<T> = T extends object ? T : never;
+export type RadioGroupItemProps = ObjectVariation<ItemProps>;
+const NAME = "radiogroup";
+
+export const ctx = {
+	set,
+	get,
+	getItem
+};
+
+function set(props: RadioGroupProps) {
+	const radioGroup = createRadioGroup(props);
+	setContext(NAME, radioGroup);
+	const {
+		elements: { root }
+	} = radioGroup;
+	return root;
+}
+
+function get() {
+	return getContext<RadioGroupReturn>(NAME);
+}
+
+function getItem() {
+	const {
+		elements: { item },
+		helpers: { isChecked }
+	} = get();
+	return { item, isChecked };
+}
+
+export { melt, RadioGroupProps };
+export const RadioGroup = Object.assign(Root, {
+	Item,
+	Input
+});
+
+export {
+	Root as RadioGroupRoot,
+	Item as RadioGroupItem,
+	Input as RadioGroupInput
+};