radio item styles

package.json

@@ -56,6 +56,7 @@
 		"esm-env": "^1.0.0",
 		"hast-util-to-html": "^9.0.0",
 		"lucide-svelte": "^0.268.0",
+		"phosphor-svelte": "^1.3.0",
 		"postcss": "^8.4.31",
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.8.8",

src/components/component-preview.svelte

@@ -26,7 +26,7 @@
 					</div>
 				</div>
 			{:else}
-				<div class="relative rounded-md bg-accent border border-border">
+				<div class="relative rounded-md bg-secondary border border-border">
 					<div
 						class={cn(
 							"preview flex min-h-[350px] w-full justify-center p-12",

src/components/demos/radio-group-demo.svelte

@@ -1,20 +1,36 @@
 <script lang="ts">
-	import * as RadioGroup from "@/components/ui/radio-group";
-	import * as Label from "@/components/ui/label";
+	import { RadioGroup, Label } from "$lib";
 </script>
 
-<RadioGroup.Root value="comfortable">
-	<div class="flex items-center space-x-2">
-		<RadioGroup.Item value="default" id="r1" />
-		<Label.Root for="r1">Default</Label.Root>
+<RadioGroup.Root class="flex flex-col gap-3">
+	<div
+		class="group select-none cursor-pointer flex items-center gap-3 text-primary/50 [&:has([data-state=checked])]:text-primary transition-colors"
+	>
+		<RadioGroup.Item
+			id="amazing"
+			value="amazing"
+			class="shrink-0 sq-5 rounded-full border-2 border-primary/40 transition-all data-[state=checked]:group-hover:border-primary data-[state=checked]:border-6 data-[state=checked]:border-primary duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 ring-offset-1"
+		/>
+		<Label.Root for="amazing" class="font-medium text-sm">Amazing</Label.Root>
 	</div>
-	<div class="flex items-center space-x-2">
-		<RadioGroup.Item value="comfortable" id="r2" />
-		<Label.Root for="r2">Comfortable</Label.Root>
+	<div
+		class="group select-none cursor-pointer flex items-center gap-3 text-primary/50 [&:has([data-state=checked])]:text-primary transition-colors"
+	>
+		<RadioGroup.Item
+			id="average"
+			value="average"
+			class="shrink-0 sq-5 rounded-full border-2 border-primary/40 transition-all data-[state=checked]:group-hover:border-primary data-[state=checked]:border-6 data-[state=checked]:border-primary duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 ring-offset-1 "
+		/>
+		<Label.Root for="average" class="font-medium text-sm">Average</Label.Root>
 	</div>
-	<div class="flex items-center space-x-2">
-		<RadioGroup.Item value="compact" id="r3" />
-		<Label.Root for="r3">Compact</Label.Root>
+	<div
+		class="group select-none cursor-pointer flex items-center gap-3 text-primary/50 [&:has([data-state=checked])]:text-primary transition-colors"
+	>
+		<RadioGroup.Item
+			id="terrible"
+			value="terrible"
+			class="shrink-0 sq-5 rounded-full border-2 border-primary/40 transition-all data-[state=checked]:group-hover:border-primary data-[state=checked]:border-6 data-[state=checked]:border-primary duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 ring-offset-1"
+		/>
+		<Label.Root for="terrible" class="font-medium text-sm">Terrible</Label.Root>
 	</div>
-	<RadioGroup.Input name="spacing" />
 </RadioGroup.Root>

src/lib/bits/radio-group/attrs.ts

@@ -0,0 +1,8 @@
+export const ATTRS = {
+	root: {
+		"data-bits-radio-group-root": ""
+	},
+	item: {
+		"data-bits-radio-group-item": ""
+	}
+};

src/lib/bits/radio-group/components/RadioGroup.svelte

@@ -2,6 +2,7 @@
 	import { melt } from "@melt-ui/svelte";
 	import { ctx } from "../ctx.js";
 	import type { Props } from "../types.js";
+	import { ATTRS } from "../attrs.js";
 
 	type $$Props = Props;
 	export let required: $$Props["required"] = undefined;
@@ -39,10 +40,10 @@
 </script>
 
 {#if asChild}
-	<slot builder={$root} />
+	<slot builder={$root} attrs={ATTRS.root} />
 {:else}
 	{@const builder = $root}
-	<div use:melt={builder} {...$$restProps}>
+	<div use:melt={builder} {...$$restProps} {...ATTRS.root}>
 		<slot {builder} />
 	</div>
 {/if}

src/lib/bits/radio-group/components/RadioGroupItem.svelte

@@ -3,6 +3,7 @@
 	import { ctx } from "../ctx.js";
 	import type { ItemEvents, ItemProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
+	import { ATTRS } from "../attrs.js";
 
 	type $$Props = ItemProps;
 	type $$Events = ItemEvents;
@@ -16,12 +17,13 @@
 </script>
 
 {#if asChild}
-	<slot builder={$item} />
+	<slot builder={$item} attrs={ATTRS.item} />
 {:else}
 	{@const builder = $item({ value, disabled })}
 	<button
 		use:melt={builder}
 		{...$$restProps}
+		{...ATTRS.item}
 		on:m-click={dispatch}
 		on:m-focus={dispatch}
 		on:m-keydown={dispatch}

tailwind.config.ts

@@ -53,6 +53,9 @@ export default {
 			},
 			fontFamily: {
 				sans: ["Inter", ...fontFamily.sans]
+			},
+			borderWidth: {
+				6: "6px"
 			}
 		}
 	},