From 80cd1f4b49595ee4f17d869a85cf020a7a793fbd Mon Sep 17 00:00:00 2001 From: Hunter Johnston Date: Sun, 21 Apr 2024 17:26:32 -0400 Subject: [PATCH] cleanup radio and checkbox snippets --- .../bits/checkbox/components/checkbox.svelte | 5 +- .../bits-ui/src/lib/bits/checkbox/types.ts | 95 ++++++++++--------- .../components/radio-group-item.svelte | 7 +- .../bits-ui/src/lib/bits/radio-group/types.ts | 51 +++++----- .../lib/components/demos/checkbox-demo.svelte | 2 +- 5 files changed, 78 insertions(+), 82 deletions(-) diff --git a/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte b/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte index 17b64173a..c8f490cb4 100644 --- a/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte +++ b/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} {/if} diff --git a/packages/bits-ui/src/lib/bits/checkbox/types.ts b/packages/bits-ui/src/lib/bits/checkbox/types.ts index 2a8f51d85..ab1dee1a2 100644 --- a/packages/bits-ui/src/lib/bits/checkbox/types.ts +++ b/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; - - indicator?: Snippet< - [{ checked: boolean | "indeterminate"; props: Record }] - >; - }, - { checked: boolean | "indeterminate" } ->; + /** + * A callback function called when the checked state changes. + */ + onCheckedChange?: OnChangeFn; + }, + { checked: boolean | "indeterminate" } + >, + "children" +> & { + children?: Snippet<[{ checked: boolean | "indeterminate" }]>; +}; export type CheckboxRootProps = CheckboxRootPropsWithoutHTML & Omit & { diff --git a/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item.svelte b/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item.svelte index 96fa9901a..d0955d75d 100644 --- a/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item.svelte +++ b/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} {/if} diff --git a/packages/bits-ui/src/lib/bits/radio-group/types.ts b/packages/bits-ui/src/lib/bits/radio-group/types.ts index 3dc5fed0a..c7e3275bf 100644 --- a/packages/bits-ui/src/lib/bits/radio-group/types.ts +++ b/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; + onclick?: EventCallback; - onkeydown?: EventCallback; - - /** - * 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 }]>; - }, - { checked: boolean } ->; + onkeydown?: EventCallback; + }, + { 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; diff --git a/sites/docs/src/lib/components/demos/checkbox-demo.svelte b/sites/docs/src/lib/components/demos/checkbox-demo.svelte index be9924563..f810df7bd 100644 --- a/sites/docs/src/lib/components/demos/checkbox-demo.svelte +++ b/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 })}
{#if checked === true}