@human-kit/svelte-components 1.0.0-alpha.4 → 1.0.0-alpha.5

package/dist/checkbox/README.md

@@ -0,0 +1,53 @@
+# Checkbox
+
+## Description
+
+`Checkbox` is a composable tri-state checkbox with separate checked and indeterminate bindings, hidden input form support, and headless indicator rendering.
+
+## Anatomy
+
+- `Checkbox.Root`
+- `Checkbox.Indicator`
+
+```svelte
+<Checkbox.Root aria-label="Accept terms">
+	<Checkbox.Indicator>
+		<CheckIcon />
+	</Checkbox.Indicator>
+</Checkbox.Root>
+```
+
+## Usage guidelines
+
+- Use `isChecked` / `defaultChecked` for the checked state and `isIndeterminate` / `defaultIndeterminate` for the mixed state.
+- `isIndeterminate` takes precedence over `isChecked`. When both are `true`, the checkbox is exposed as indeterminate.
+- Use `value` only for form submission through the hidden native input; it does not represent the visual state.
+- Wrap the checkbox in a native `<label>` for the simplest accessible labeling pattern.
+
+## API reference
+
+- `Checkbox.Root`
+  - `isChecked?: boolean`
+  - `defaultChecked?: boolean`
+  - `isIndeterminate?: boolean`
+  - `defaultIndeterminate?: boolean`
+  - `onCheckedChange?: (checked: boolean) => void`
+  - `onIndeterminateChange?: (indeterminate: boolean) => void`
+  - `isDisabled?: boolean`
+  - `isReadOnly?: boolean`
+  - `name?: string`
+  - `value?: string`
+  - `required?: boolean`
+- `Checkbox.Indicator`
+  - `keepMounted?: boolean`
+
+## Accessibility
+
+- `Checkbox.Root` exposes `role="checkbox"` with `aria-checked="true" | "false" | "mixed"`.
+- Press `Space` to toggle the checkbox.
+- `isReadOnly` keeps the checkbox focusable while preventing state changes.
+
+## Notes
+
+- The first user toggle from the indeterminate state resolves to checked.
+- A hidden checkbox input is kept in sync for form integration and `label[for]` support.

package/dist/checkbox/TODO.md

@@ -0,0 +1,16 @@
+# Checkbox TODO
+
+## Goal
+
+Track Checkbox work with a single mandatory TODO format.
+
+## Backlog
+
+- [x] [S][P0][Area: Architecture][Owner: Unassigned][Target: Done] Create base `root` and `indicator` parts with namespace exports.
+- [x] [S][P0][Area: State][Owner: Unassigned][Target: Done] Implement checked, unchecked, and indeterminate state transitions.
+- [x] [S][P0][Area: Accessibility][Owner: Unassigned][Target: Done] Add checkbox semantics, keyboard toggle, and readonly behavior.
+- [x] [S][P0][Area: Forms][Owner: Unassigned][Target: Done] Sync a hidden native input for form submission and label targeting.
+- [x] [S][P0][Area: Testing][Owner: Unassigned][Target: Done] Add baseline tests for root and indicator behavior.
+- [ ] [S][P1][Area: API][Owner: Unassigned][Target: TBD] Add optional `nativeButton` rendering mode for sibling-label patterns.
+- [ ] [S][P1][Area: Forms][Owner: Unassigned][Target: TBD] Support unchecked submission values and form reset synchronization.
+- [ ] [C][P2][Area: Animation][Owner: Unassigned][Target: TBD] Add indicator presence data for enter and exit animations.

package/dist/checkbox/index.d.ts

@@ -0,0 +1,6 @@
+export * as Checkbox from './index.parts.ts';
+export { default as CheckboxRoot } from './root/checkbox-root.svelte';
+export { default as CheckboxIndicator } from './indicator/checkbox-indicator.svelte';
+export { getCheckboxContext, setCheckboxContext, useCheckboxContext, type CheckboxContext, type CheckboxState } from './root/context.ts';
+import * as CheckboxParts from './index.parts.ts';
+export default CheckboxParts;

package/dist/checkbox/index.js

@@ -0,0 +1,6 @@
+export * as Checkbox from './index.parts.ts';
+export { default as CheckboxRoot } from './root/checkbox-root.svelte';
+export { default as CheckboxIndicator } from './indicator/checkbox-indicator.svelte';
+export { getCheckboxContext, setCheckboxContext, useCheckboxContext } from './root/context.ts';
+import * as CheckboxParts from './index.parts.ts';
+export default CheckboxParts;

package/dist/checkbox/index.parts.d.ts

@@ -0,0 +1,2 @@
+export { default as Root } from './root/checkbox-root.svelte';
+export { default as Indicator } from './indicator/checkbox-indicator.svelte';

package/dist/checkbox/index.parts.js

@@ -0,0 +1,2 @@
+export { default as Root } from './root/checkbox-root.svelte';
+export { default as Indicator } from './indicator/checkbox-indicator.svelte';

package/dist/checkbox/indicator/README.md

@@ -0,0 +1,23 @@
+# Checkbox Indicator
+
+## API reference
+
+### Checkbox.Indicator
+
+Name: `Checkbox.Indicator`  
+Description: Headless presence wrapper for checkbox indicator content. It renders when the checkbox is checked or indeterminate.
+
+| Prop           | Type                              | Default     | Description                                                              |
+| -------------- | --------------------------------- | ----------- | ------------------------------------------------------------------------ |
+| `keepMounted`  | `boolean`                         | `false`     | Keeps the indicator mounted while hidden when the checkbox is unchecked. |
+| `children`     | `Snippet`                         | `undefined` | Rendered indicator content, such as a check or dash icon.                |
+| `class`        | `string`                          | `''`        | CSS class names for the indicator wrapper.                               |
+| `...restProps` | `HTMLAttributes<HTMLSpanElement>` | `-`         | Additional attributes forwarded to the indicator span.                   |
+
+```svelte
+<Checkbox.Root aria-label="Select row">
+	<Checkbox.Indicator>
+		<CheckIcon />
+	</Checkbox.Indicator>
+</Checkbox.Root>
+```

package/dist/checkbox/indicator/checkbox-indicator.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils/cn';
+	import { useCheckboxContext } from '../root/context';
+
+	type CheckboxIndicatorProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class'> & {
+		keepMounted?: boolean;
+		children?: Snippet;
+		class?: string;
+	};
+
+	let {
+		keepMounted = false,
+		children,
+		class: className = '',
+		...restProps
+	}: CheckboxIndicatorProps = $props();
+
+	const checkbox = useCheckboxContext();
+	const visible = $derived(checkbox.state !== 'unchecked');
+</script>
+
+{#if keepMounted || visible}
+	<span
+		{...restProps}
+		data-checkbox-indicator="true"
+		data-checked={checkbox.isChecked || undefined}
+		data-unchecked={checkbox.state === 'unchecked' || undefined}
+		data-indeterminate={checkbox.isIndeterminate || undefined}
+		data-pressed={checkbox.pressed || undefined}
+		data-disabled={checkbox.isDisabled || undefined}
+		data-readonly={checkbox.isReadOnly || undefined}
+		data-required={checkbox.required || undefined}
+		data-focused={checkbox.focused || undefined}
+		data-focus-visible={checkbox.focusVisible || undefined}
+		hidden={keepMounted && !visible}
+		aria-hidden={keepMounted && !visible ? 'true' : undefined}
+		class={cn('contents', className)}
+	>
+		{@render children?.()}
+	</span>
+{/if}

package/dist/checkbox/indicator/checkbox-indicator.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type CheckboxIndicatorProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class'> & {
+    keepMounted?: boolean;
+    children?: Snippet;
+    class?: string;
+};
+declare const CheckboxIndicator: import("svelte").Component<CheckboxIndicatorProps, {}, "">;
+type CheckboxIndicator = ReturnType<typeof CheckboxIndicator>;
+export default CheckboxIndicator;

package/dist/checkbox/root/README.md

@@ -0,0 +1,47 @@
+# Checkbox Root
+
+## API reference
+
+### Checkbox.Root
+
+Name: `Checkbox.Root`  
+Description: Interactive tri-state checkbox root that owns checked, indeterminate, focus, and hidden input synchronization.
+
+| Prop                    | Type                               | Default       | Description                                                      |
+| ----------------------- | ---------------------------------- | ------------- | ---------------------------------------------------------------- |
+| `id`                    | `string`                           | `$props.id()` | Stable id used for the hidden input and derived root id.         |
+| `name`                  | `string`                           | `undefined`   | Form field name forwarded to the hidden native input.            |
+| `value`                 | `string`                           | `'on'`        | Submitted value when the checkbox is checked.                    |
+| `isChecked`             | `boolean`                          | `undefined`   | Controlled checked state. Supports `bind:isChecked`.             |
+| `defaultChecked`        | `boolean`                          | `false`       | Initial checked state in uncontrolled mode.                      |
+| `isIndeterminate`       | `boolean`                          | `undefined`   | Controlled indeterminate state. Supports `bind:isIndeterminate`. |
+| `defaultIndeterminate`  | `boolean`                          | `false`       | Initial indeterminate state in uncontrolled mode.                |
+| `onCheckedChange`       | `(checked: boolean) => void`       | `undefined`   | Called when the effective checked state changes.                 |
+| `onIndeterminateChange` | `(indeterminate: boolean) => void` | `undefined`   | Called when the effective indeterminate state changes.           |
+| `isDisabled`            | `boolean`                          | `false`       | Prevents focus and state changes.                                |
+| `isReadOnly`            | `boolean`                          | `false`       | Allows focus but blocks user-driven state changes.               |
+| `required`              | `boolean`                          | `false`       | Marks the hidden input as required and exposes `data-required`.  |
+| `children`              | `Snippet`                          | `undefined`   | Composed checkbox parts such as `Checkbox.Indicator`.            |
+| `class`                 | `string`                           | `''`          | CSS class names for the root element.                            |
+| `...restProps`          | `HTMLAttributes<HTMLSpanElement>`  | `-`           | Additional attributes forwarded to the checkbox root span.       |
+
+### Context utilities
+
+Name: `context.ts` helpers  
+Description: Internal APIs for publishing and consuming checkbox state.
+
+| Prop                 | Type                                 | Default | Description                                        |
+| -------------------- | ------------------------------------ | ------- | -------------------------------------------------- |
+| `setCheckboxContext` | `(ctx: CheckboxContext) => void`     | `-`     | Registers the checkbox context in root.            |
+| `getCheckboxContext` | `() => CheckboxContext \| undefined` | `-`     | Returns the context when available.                |
+| `useCheckboxContext` | `() => CheckboxContext`              | `-`     | Returns the context and throws outside root usage. |
+
+`CheckboxState` is the internal state union used by the root context: `'checked' | 'unchecked' | 'indeterminate'`.
+
+```svelte
+<Checkbox.Root bind:isChecked bind:isIndeterminate aria-label="Notifications">
+	<Checkbox.Indicator>
+		<CheckIcon />
+	</Checkbox.Indicator>
+</Checkbox.Root>
+```

package/dist/checkbox/root/checkbox-label-test.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { Checkbox } from '../index.ts';
+</script>
+
+<label for="notifications">Enable notifications</label>
+<Checkbox.Root id="notifications" aria-label="Notifications">
+	<Checkbox.Indicator>
+		<span data-checkbox-icon="true">icon</span>
+	</Checkbox.Indicator>
+</Checkbox.Root>

package/dist/checkbox/root/checkbox-label-test.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CheckboxLabelTest: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CheckboxLabelTest = InstanceType<typeof CheckboxLabelTest>;
+export default CheckboxLabelTest;

package/dist/checkbox/root/checkbox-root.svelte

@@ -0,0 +1,361 @@
+<script lang="ts">
+	import { untrack, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import {
+		shouldShowFocusVisible,
+		trackInteractionModality
+	} from '../../primitives/input-modality';
+	import { cn } from '../../utils/cn';
+	import { setCheckboxContext, type CheckboxContext, type CheckboxState } from './context';
+
+	type CheckboxRootProps = Omit<
+		HTMLAttributes<HTMLSpanElement>,
+		| 'children'
+		| 'class'
+		| 'id'
+		| 'role'
+		| 'tabindex'
+		| 'aria-checked'
+		| 'aria-disabled'
+		| 'aria-readonly'
+		| 'aria-required'
+		| 'onclick'
+		| 'onkeydown'
+		| 'value'
+	> & {
+		id?: string;
+		name?: string;
+		value?: string;
+		isChecked?: boolean;
+		defaultChecked?: boolean;
+		isIndeterminate?: boolean;
+		defaultIndeterminate?: boolean;
+		onCheckedChange?: (checked: boolean) => void;
+		onIndeterminateChange?: (indeterminate: boolean) => void;
+		isDisabled?: boolean;
+		isReadOnly?: boolean;
+		required?: boolean;
+		children?: Snippet;
+		class?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+	};
+
+	function resolveState(isChecked: boolean, isIndeterminate: boolean): CheckboxState {
+		if (isIndeterminate) return 'indeterminate';
+		return isChecked ? 'checked' : 'unchecked';
+	}
+
+	function getNextState(currentState: CheckboxState): CheckboxState {
+		if (currentState === 'indeterminate') return 'checked';
+		if (currentState === 'checked') return 'unchecked';
+		return 'checked';
+	}
+
+	const generatedId = $props.id();
+
+	let {
+		id,
+		name,
+		value = 'on',
+		isChecked = $bindable(),
+		defaultChecked = false,
+		isIndeterminate = $bindable(),
+		defaultIndeterminate = false,
+		onCheckedChange,
+		onIndeterminateChange,
+		isDisabled = false,
+		isReadOnly = false,
+		required = false,
+		children,
+		class: className = '',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		...restProps
+	}: CheckboxRootProps = $props();
+
+	const instanceId = untrack(() => id) ?? generatedId;
+	const inputId = instanceId;
+	const rootId = `${instanceId}-root`;
+
+	const initialChecked = untrack(() => isChecked ?? defaultChecked);
+	const initialIndeterminate = untrack(() => isIndeterminate ?? defaultIndeterminate);
+	const initialState = resolveState(initialChecked, initialIndeterminate);
+
+	let checkedInternal = $state(initialState === 'checked');
+	let indeterminateInternal = $state(initialState === 'indeterminate');
+	let pressed = $state(false);
+	let pressedKey: 'Enter' | 'Space' | null = $state(null);
+	let focused = $state(false);
+	let focusVisible = $state(false);
+	let rootRef: HTMLSpanElement | null = $state(null);
+	let inputRef: HTMLInputElement | null = $state(null);
+
+	if (untrack(() => isChecked) === undefined) {
+		isChecked = initialState === 'checked';
+	}
+
+	if (untrack(() => isIndeterminate) === undefined) {
+		isIndeterminate = initialState === 'indeterminate';
+	}
+
+	const isCheckedControlled = $derived(isChecked !== undefined);
+	const isIndeterminateControlled = $derived(isIndeterminate !== undefined);
+
+	const currentState = $derived.by(() =>
+		resolveState(
+			isCheckedControlled ? Boolean(isChecked) : checkedInternal,
+			isIndeterminateControlled ? Boolean(isIndeterminate) : indeterminateInternal
+		)
+	);
+
+	const currentChecked = $derived(currentState === 'checked');
+	const currentIndeterminate = $derived(currentState === 'indeterminate');
+	const currentUnchecked = $derived(currentState === 'unchecked');
+
+	function publishState(nextState: CheckboxState, event?: Event) {
+		const nextChecked = nextState === 'checked';
+		const nextIndeterminate = nextState === 'indeterminate';
+		const previousChecked = currentChecked;
+		const previousIndeterminate = currentIndeterminate;
+
+		if (!isCheckedControlled) {
+			checkedInternal = nextChecked;
+		}
+
+		if (!isIndeterminateControlled) {
+			indeterminateInternal = nextIndeterminate;
+		}
+
+		isChecked = nextChecked;
+		isIndeterminate = nextIndeterminate;
+
+		if (nextChecked !== previousChecked) {
+			onCheckedChange?.(nextChecked);
+		}
+
+		if (nextIndeterminate !== previousIndeterminate) {
+			onIndeterminateChange?.(nextIndeterminate);
+		}
+
+		if (event && rootRef && document.activeElement !== rootRef) {
+			rootRef.focus();
+		}
+	}
+
+	function setState(nextState: CheckboxState, event?: Event) {
+		if (isDisabled || isReadOnly) return;
+		publishState(nextState, event);
+	}
+
+	function toggle(event?: Event) {
+		setState(getNextState(currentState), event);
+	}
+
+	function requestNativeToggle(event?: Event) {
+		if (isDisabled || isReadOnly) return;
+		if (!inputRef) {
+			toggle(event);
+			return;
+		}
+
+		inputRef.click();
+	}
+
+	function handleClick(event: MouseEvent) {
+		trackInteractionModality(event, rootRef);
+
+		if (event.defaultPrevented) return;
+		if (isDisabled || isReadOnly) {
+			event.preventDefault();
+			return;
+		}
+
+		event.preventDefault();
+		requestNativeToggle(event);
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.defaultPrevented) return;
+		if (event.key !== ' ' && event.key !== 'Spacebar' && event.key !== 'Enter') return;
+
+		trackInteractionModality(event, rootRef);
+		if (focused) {
+			focusVisible = true;
+		} else {
+			focusVisible = shouldShowFocusVisible(rootRef);
+		}
+		event.preventDefault();
+
+		if (event.repeat && pressed) return;
+
+		pressed = true;
+		pressedKey = event.key === 'Enter' ? 'Enter' : 'Space';
+	}
+
+	function handleKeyUp(event: KeyboardEvent) {
+		if (event.defaultPrevented) return;
+
+		const releasedKey =
+			event.key === 'Enter'
+				? 'Enter'
+				: event.key === ' ' || event.key === 'Spacebar'
+					? 'Space'
+					: null;
+		if (!releasedKey) return;
+
+		trackInteractionModality(event, rootRef);
+		if (focused) {
+			focusVisible = true;
+		} else {
+			focusVisible = shouldShowFocusVisible(rootRef);
+		}
+		event.preventDefault();
+
+		const shouldToggle = pressed && pressedKey === releasedKey;
+		pressed = false;
+		pressedKey = null;
+
+		if (!shouldToggle) return;
+		requestNativeToggle(event);
+	}
+
+	function handlePointerDown(event: PointerEvent | MouseEvent) {
+		trackInteractionModality(event, rootRef);
+		focusVisible = false;
+	}
+
+	function handleFocus() {
+		focused = true;
+		focusVisible = shouldShowFocusVisible(rootRef);
+	}
+
+	function handleBlur() {
+		focused = false;
+		focusVisible = false;
+		pressed = false;
+		pressedKey = null;
+	}
+
+	function handleInputChange(event: Event) {
+		const target = event.currentTarget;
+		if (!(target instanceof HTMLInputElement)) return;
+
+		const nextState = resolveState(target.checked, target.indeterminate);
+		publishState(nextState, event);
+	}
+
+	function handleInputFocus() {
+		rootRef?.focus();
+	}
+
+	function handleInputClick(event: MouseEvent) {
+		event.stopPropagation();
+	}
+
+	$effect(() => {
+		if (!inputRef) return;
+		inputRef.checked = currentChecked;
+		inputRef.indeterminate = currentIndeterminate;
+	});
+
+	setCheckboxContext({
+		get id() {
+			return rootId;
+		},
+		get inputId() {
+			return inputId;
+		},
+		get inputRef() {
+			return inputRef;
+		},
+		setInputRef(element) {
+			inputRef = element;
+		},
+		get state() {
+			return currentState;
+		},
+		get pressed() {
+			return pressed;
+		},
+		get isChecked() {
+			return currentChecked;
+		},
+		get isIndeterminate() {
+			return currentIndeterminate;
+		},
+		get isDisabled() {
+			return isDisabled;
+		},
+		get isReadOnly() {
+			return isReadOnly;
+		},
+		get required() {
+			return required;
+		},
+		get focused() {
+			return focused;
+		},
+		get focusVisible() {
+			return focusVisible;
+		},
+		toggle,
+		setState
+	} satisfies CheckboxContext);
+</script>
+
+<span
+	{...restProps}
+	bind:this={rootRef}
+	id={rootId}
+	role="checkbox"
+	tabindex={isDisabled ? undefined : 0}
+	aria-checked={currentIndeterminate ? 'mixed' : currentChecked ? 'true' : 'false'}
+	aria-disabled={isDisabled || undefined}
+	aria-readonly={isReadOnly || undefined}
+	aria-required={required || undefined}
+	aria-label={ariaLabel}
+	aria-labelledby={ariaLabelledby}
+	data-checkbox-root="true"
+	data-checked={currentChecked || undefined}
+	data-unchecked={currentUnchecked || undefined}
+	data-indeterminate={currentIndeterminate || undefined}
+	data-pressed={pressed || undefined}
+	data-disabled={isDisabled || undefined}
+	data-readonly={isReadOnly || undefined}
+	data-required={required || undefined}
+	data-focused={focused || undefined}
+	data-focus-visible={focusVisible || undefined}
+	onclick={handleClick}
+	onkeydown={handleKeyDown}
+	onkeyup={handleKeyUp}
+	onpointerdown={handlePointerDown}
+	onmousedown={handlePointerDown}
+	onfocus={handleFocus}
+	onblur={handleBlur}
+	class={cn(
+		'relative inline-flex shrink-0 items-center justify-center align-middle outline-none',
+		className
+	)}
+>
+	<input
+		bind:this={inputRef}
+		id={inputId}
+		tabindex={-1}
+		type="checkbox"
+		{name}
+		{value}
+		checked={currentChecked}
+		disabled={isDisabled}
+		{required}
+		readonly={isReadOnly}
+		aria-hidden="true"
+		data-checkbox-input="true"
+		onclick={handleInputClick}
+		onchange={handleInputChange}
+		onfocus={handleInputFocus}
+		style="position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:inherit;pointer-events:none;"
+	/>
+
+	{@render children?.()}
+</span>

package/dist/checkbox/root/checkbox-root.svelte.d.ts

@@ -0,0 +1,23 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type CheckboxRootProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class' | 'id' | 'role' | 'tabindex' | 'aria-checked' | 'aria-disabled' | 'aria-readonly' | 'aria-required' | 'onclick' | 'onkeydown' | 'value'> & {
+    id?: string;
+    name?: string;
+    value?: string;
+    isChecked?: boolean;
+    defaultChecked?: boolean;
+    isIndeterminate?: boolean;
+    defaultIndeterminate?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    onIndeterminateChange?: (indeterminate: boolean) => void;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    required?: boolean;
+    children?: Snippet;
+    class?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+};
+declare const CheckboxRoot: import("svelte").Component<CheckboxRootProps, {}, "isChecked" | "isIndeterminate">;
+type CheckboxRoot = ReturnType<typeof CheckboxRoot>;
+export default CheckboxRoot;