refactor radio group

huntabyte · Aug 3, 2023 · 8a5cba7 · 8a5cba7
1 parent caa517e
commit 8a5cba7
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/apps/www/src/lib/components/docs/examples/radio-group/RadioGroupDemo.svelte b/apps/www/src/lib/components/docs/examples/radio-group/RadioGroupDemo.svelte
@@ -16,4 +16,5 @@
 		<RadioGroup.Item value="compact" id="r3" />
 		<Label for="r3">Compact</Label>
 	</div>
+	<RadioGroup.Input name="spacing" />
 </RadioGroup>
diff --git a/apps/www/src/lib/components/ui/radio-group/RadioGroupInput.svelte b/apps/www/src/lib/components/ui/radio-group/RadioGroupInput.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import { ctx, melt } from ".";
+
+	const input = ctx.getInput();
+
+	type $$Props = HTMLInputAttributes;
+</script>
+
+<input use:melt={$input} hidden {...$$restProps} />
diff --git a/apps/www/src/lib/components/ui/radio-group/index.ts b/apps/www/src/lib/components/ui/radio-group/index.ts
@@ -11,13 +11,13 @@ 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
+	getItem,
+	getInput: () => get().elements.itemInput
 };
 
 function set(props: RadioGroupProps) {
@@ -42,6 +42,7 @@ function getItem() {
 }
 
 export { melt, RadioGroupProps };
+export type RadioGroupItemProps = ObjectVariation<ItemProps>;
 export const RadioGroup = Object.assign(Root, {
 	Item,
 	Input