cleanup radio and checkbox snippets

packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte

@@ -19,7 +19,6 @@
 		style,
 		asChild,
 		child,
-		indicator,
 		...restProps
 	}: RootProps = $props();
 
@@ -58,11 +57,9 @@
 	{@render child?.({ props: mergedProps, checked: checkboxState.checked.value })}
 {:else}
 	<button bind:this={el} {...mergedProps}>
-		{@render indicator?.({
+		{@render children?.({
 			checked: checkboxState.checked.value,
-			props: checkboxState.indicatorProps,
 		})}
-		{@render children?.()}
 	</button>
 {/if}
 

packages/bits-ui/src/lib/bits/checkbox/types.ts

@@ -6,58 +6,59 @@ import type {
 	WithAsChild,
 } from "$lib/internal/index.js";
 
-export type CheckboxRootPropsWithoutHTML = WithAsChild<
-	{
-		/**
-		 * Whether the checkbox is disabled.
-		 *
-		 * @defaultValue false
-		 */
-		disabled?: boolean;
+export type CheckboxRootPropsWithoutHTML = Omit<
+	WithAsChild<
+		{
+			/**
+			 * Whether the checkbox is disabled.
+			 *
+			 * @defaultValue false
+			 */
+			disabled?: boolean;
 
-		/**
-		 * Whether the checkbox is required (for form validation).
-		 *
-		 * @defaultValue false
-		 */
-		required?: boolean;
+			/**
+			 * Whether the checkbox is required (for form validation).
+			 *
+			 * @defaultValue false
+			 */
+			required?: boolean;
 
-		/**
-		 * The name of the checkbox used in form submission.
-		 * If not provided, the hidden input will not be rendered.
-		 *
-		 * @defaultValue undefined
-		 */
-		name?: string;
+			/**
+			 * The name of the checkbox used in form submission.
+			 * If not provided, the hidden input will not be rendered.
+			 *
+			 * @defaultValue undefined
+			 */
+			name?: string;
 
-		/**
-		 * The value of the checkbox used in form submission.
-		 *
-		 * @defaultValue undefined
-		 */
-		value?: string;
+			/**
+			 * The value of the checkbox used in form submission.
+			 *
+			 * @defaultValue undefined
+			 */
+			value?: string;
 
-		/**
-		 * The checked state of the checkbox. It can be one of:
-		 * - `true` for checked
-		 * - `false` for unchecked
-		 * - `"indeterminate"` for indeterminate
-		 *
-		 * @defaultValue false
-		 */
-		checked?: boolean | "indeterminate";
+			/**
+			 * The checked state of the checkbox. It can be one of:
+			 * - `true` for checked
+			 * - `false` for unchecked
+			 * - `"indeterminate"` for indeterminate
+			 *
+			 * @defaultValue false
+			 */
+			checked?: boolean | "indeterminate";
 
-		/**
-		 * A callback function called when the checked state changes.
-		 */
-		onCheckedChange?: OnChangeFn<boolean | "indeterminate">;
-
-		indicator?: Snippet<
-			[{ checked: boolean | "indeterminate"; props: Record<string, unknown> }]
-		>;
-	},
-	{ checked: boolean | "indeterminate" }
->;
+			/**
+			 * A callback function called when the checked state changes.
+			 */
+			onCheckedChange?: OnChangeFn<boolean | "indeterminate">;
+		},
+		{ checked: boolean | "indeterminate" }
+	>,
+	"children"
+> & {
+	children?: Snippet<[{ checked: boolean | "indeterminate" }]>;
+};
 
 export type CheckboxRootProps = CheckboxRootPropsWithoutHTML &
 	Omit<PrimitiveButtonAttributes, "value" | "disabled" | "name" | "onclick" | "onkeydown"> & {

packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item.svelte

@@ -9,7 +9,6 @@
 		id = generateId(),
 		asChild,
 		children,
-		indicator,
 		child,
 		value,
 		disabled = false,
@@ -39,10 +38,6 @@
 	{@render child?.({ props: mergedProps, checked: item.checked })}
 {:else}
 	<button bind:this={el} {...mergedProps}>
-		{#if indicator}
-			{@render indicator({ checked: item.checked, props: item.indicatorProps })}
-		{:else}
-			{@render children?.()}
-		{/if}
+		{@render children?.({ checked: item.checked })}
 	</button>
 {/if}

packages/bits-ui/src/lib/bits/radio-group/types.ts

@@ -63,33 +63,36 @@ export type RadioGroupRootPropsWithoutHTML = WithAsChild<{
 
 export type RadioGroupRootProps = RadioGroupRootPropsWithoutHTML & PrimitiveDivAttributes;
 
-export type RadioGroupItemPropsWithoutHTML = WithAsChild<
-	{
-		/**
-		 * The value of the radio item.
-		 */
-		value: string;
+export type RadioGroupItemPropsWithoutHTML = Omit<
+	WithAsChild<
+		{
+			/**
+			 * The value of the radio item.
+			 */
+			value: string;
 
-		/**
-		 * Whether the radio item is disabled.
-		 *
-		 * @defaultValue false
-		 */
-		disabled?: boolean;
+			/**
+			 * Whether the radio item is disabled.
+			 *
+			 * @defaultValue false
+			 */
+			disabled?: boolean;
 
-		onclick?: EventCallback<MouseEvent>;
+			onclick?: EventCallback<MouseEvent>;
 
-		onkeydown?: EventCallback<KeyboardEvent>;
-
-		/**
-		 * A snippet to render the radio item's indicator.
-		 * It receives the item's `checked` state as a prop
-		 * for conditional styling.
-		 */
-		indicator?: Snippet<[{ checked: boolean; props: Record<string, unknown> }]>;
-	},
-	{ checked: boolean }
->;
+			onkeydown?: EventCallback<KeyboardEvent>;
+		},
+		{ checked: boolean }
+	>,
+	"children"
+> & {
+	/**
+	 * The children snippet to render inside the radio item.
+	 * It provides the `checked` state of the item for conditionally
+	 * rendering/styling the indicator.
+	 */
+	children?: Snippet<[{ checked: boolean }]>;
+};
 
 export type RadioGroupItemProps = RadioGroupItemPropsWithoutHTML &
 	Omit<PrimitiveButtonAttributes, "value" | "disabled" | "onclick" | "onkeydown">;

sites/docs/src/lib/components/demos/checkbox-demo.svelte

@@ -10,7 +10,7 @@
 		class="peer inline-flex size-[25px] items-center justify-center rounded-md border border-muted bg-foreground transition-all duration-150 ease-in-out active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background data-[state=unchecked]:hover:border-dark-40"
 		name="hello"
 	>
-		{#snippet indicator({ checked })}
+		{#snippet children({ checked })}
 			<div class="inline-flex items-center justify-center text-background">
 				{#if checked === true}
 					<Check class="size-[15px]" weight="bold" />