@destyler-ui/svelte 0.0.1-beta.17

package/dist/components/carousel/components/RootProvider.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../../types'
+  import type { UseCarouselReturn } from '../hooks/use-carousel.svelte'
+
+  export interface CarouselRootProviderBaseProps extends PolymorphicProps<'div'> {
+    value: UseCarouselReturn
+  }
+  export interface CarouselRootProviderProps extends Assign<HTMLProps<'div'>, CarouselRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@destyler/svelte'
+  import { UI } from '../../factory'
+  import { CarouselProvider } from '../hooks/use-carousel-context'
+
+  let { value, ...props }: CarouselRootProviderProps = $props()
+  const mergedProps = $derived(mergeProps(value().getRootProps(), props))
+
+  CarouselProvider(() => value())
+</script>
+
+<UI as="div" {...mergedProps} />

package/dist/components/carousel/components/RootProvider.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../../types.js';
+import type { UseCarouselReturn } from '../hooks/use-carousel.svelte.js';
+export interface CarouselRootProviderBaseProps extends PolymorphicProps<'div'> {
+    value: UseCarouselReturn;
+}
+export interface CarouselRootProviderProps extends Assign<HTMLProps<'div'>, CarouselRootProviderBaseProps> {
+}
+declare const RootProvider: import("svelte").Component<CarouselRootProviderProps, {}, "">;
+type RootProvider = ReturnType<typeof RootProvider>;
+export default RootProvider;

package/dist/components/carousel/hooks/use-carousel-context.d.ts

@@ -0,0 +1,4 @@
+import type { UseCarouselReturn } from './use-carousel.svelte.js';
+export interface UseCarouselContext extends UseCarouselReturn {
+}
+export declare const CarouselProvider: (value: UseCarouselContext) => void, useCarouselContext: import("../../../utils/create-context.js").RequiredContextConsumer<UseCarouselContext>;

package/dist/components/carousel/hooks/use-carousel-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '../../../utils/create-context.js';
+export const [CarouselProvider, useCarouselContext] = createContext({
+    name: 'CarouselContext',
+    hookName: 'useCarouselContext',
+    providerName: '<CarouselProvider />',
+});

package/dist/components/carousel/hooks/use-carousel.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Accessor } from '../../../types.js';
+import type { PropTypes } from '@destyler/svelte';
+import type { MaybeFunction } from '@destyler/utils';
+import * as carousel from '@destyler/carousel';
+export interface UseCarouselProps extends Omit<carousel.Context, 'dir' | 'getRootNode' | 'id'> {
+    id: string;
+    defaultPage?: carousel.Context['page'];
+}
+export interface UseCarouselReturn extends Accessor<carousel.Api<PropTypes>> {
+}
+export declare function useCarousel(props: MaybeFunction<UseCarouselProps>): () => carousel.Api<import("../../../utils/normalize-props.js").PropTypes>;

package/dist/components/carousel/hooks/use-carousel.svelte.js

@@ -0,0 +1,26 @@
+import { useMachine } from '../../../hooks/use-destyler-machine.svelte.js';
+import { useEnvironmentContext } from '../../../providers/environment/index.js';
+import { useLocaleContext } from '../../../providers/locale/index.js';
+import { createMachineProps } from '../../../utils/create-machine-props.js';
+import { normalizeProps } from '../../../utils/normalize-props.js';
+import * as carousel from '@destyler/carousel';
+import { runIfFn } from '@destyler/utils';
+export function useCarousel(props) {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        return createMachineProps({
+            dir: locale().dir,
+            getRootNode: env().getRootNode,
+            ...resolvedProps,
+        }, { page: 'defaultPage' });
+    });
+    const [state, send] = useMachine(() => carousel.machine(machineProps.initial), {
+        get context() {
+            return machineProps.context;
+        },
+    });
+    const api = $derived(carousel.connect(state, send, normalizeProps));
+    return () => api;
+}

package/dist/components/carousel/index.d.ts

@@ -0,0 +1,16 @@
+export { carouselAnatomy } from './anatomy.js';
+export { default as CarouselAutoplayTrigger, type CarouselAutoplayTriggerBaseProps, type CarouselAutoplayTriggerProps, } from './components/AutoplayTrigger.svelte';
+export { default as CarouselContext, type CarouselContextProps } from './components/Context.svelte';
+export { default as CarouselControl, type CarouselControlBaseProps, type CarouselControlProps, } from './components/Control.svelte';
+export { default as CarouselIndicator, type CarouselIndicatorBaseProps, type CarouselIndicatorProps, } from './components/Indicator.svelte';
+export { default as CarouselIndicatorGroup, type CarouselIndicatorGroupBaseProps, type CarouselIndicatorGroupProps, } from './components/IndicatorGroup.svelte';
+export { default as CarouselItem, type CarouselItemBaseProps, type CarouselItemProps } from './components/Item.svelte';
+export { default as CarouselItemGroup, type CarouselItemGroupBaseProps, type CarouselItemGroupProps, } from './components/ItemGroup.svelte';
+export { default as CarouselNextTrigger, type CarouselNextTriggerBaseProps, type CarouselNextTriggerProps, } from './components/NextTrigger.svelte';
+export { default as CarouselPrevTrigger, type CarouselPrevTriggerBaseProps, type CarouselPrevTriggerProps, } from './components/PrevTrigger.svelte';
+export { default as CarouselRoot, type CarouselRootBaseProps, type CarouselRootProps } from './components/Root.svelte';
+export { default as CarouselRootProvider, type CarouselRootProviderBaseProps, type CarouselRootProviderProps, } from './components/RootProvider.svelte';
+export { useCarouselContext, type UseCarouselContext } from './hooks/use-carousel-context.js';
+export { useCarousel, type UseCarouselProps, type UseCarouselReturn } from './hooks/use-carousel.svelte.js';
+export * as Carousel from './namespace.js';
+export type { AutoplayStatusDetails as CarouselAutoplayStatusDetails, DragStatusDetails as CarouselDragStatusDetails, PageChangeDetails as CarouselPageChangeDetails, } from '@destyler/carousel';

package/dist/components/carousel/index.js

@@ -0,0 +1,15 @@
+export { carouselAnatomy } from './anatomy.js';
+export { default as CarouselAutoplayTrigger, } from './components/AutoplayTrigger.svelte';
+export { default as CarouselContext } from './components/Context.svelte';
+export { default as CarouselControl, } from './components/Control.svelte';
+export { default as CarouselIndicator, } from './components/Indicator.svelte';
+export { default as CarouselIndicatorGroup, } from './components/IndicatorGroup.svelte';
+export { default as CarouselItem } from './components/Item.svelte';
+export { default as CarouselItemGroup, } from './components/ItemGroup.svelte';
+export { default as CarouselNextTrigger, } from './components/NextTrigger.svelte';
+export { default as CarouselPrevTrigger, } from './components/PrevTrigger.svelte';
+export { default as CarouselRoot } from './components/Root.svelte';
+export { default as CarouselRootProvider, } from './components/RootProvider.svelte';
+export { useCarouselContext } from './hooks/use-carousel-context.js';
+export { useCarousel } from './hooks/use-carousel.svelte.js';
+export * as Carousel from './namespace.js';

package/dist/components/carousel/namespace.d.ts

@@ -0,0 +1,12 @@
+export { default as AutoplayTrigger, type CarouselAutoplayTriggerBaseProps as AutoplayTriggerBaseProps, type CarouselAutoplayTriggerProps as AutoplayTriggerProps, } from './components/AutoplayTrigger.svelte';
+export { default as Context, type CarouselContextProps as ContextProps } from './components/Context.svelte';
+export { default as Control, type CarouselControlBaseProps as ControlBaseProps, type CarouselControlProps as ControlProps, } from './components/Control.svelte';
+export { default as Indicator, type CarouselIndicatorBaseProps as IndicatorBaseProps, type CarouselIndicatorProps as IndicatorProps, } from './components/Indicator.svelte';
+export { default as IndicatorGroup, type CarouselIndicatorGroupBaseProps as IndicatorGroupBaseProps, type CarouselIndicatorGroupProps as IndicatorGroupProps, } from './components/IndicatorGroup.svelte';
+export { default as Item, type CarouselItemBaseProps as ItemBaseProps, type CarouselItemProps as ItemProps, } from './components/Item.svelte';
+export { default as ItemGroup, type CarouselItemGroupBaseProps as ItemGroupBaseProps, type CarouselItemGroupProps as ItemGroupProps, } from './components/ItemGroup.svelte';
+export { default as NextTrigger, type CarouselNextTriggerBaseProps as NextTriggerBaseProps, type CarouselNextTriggerProps as NextTriggerProps, } from './components/NextTrigger.svelte';
+export { default as PrevTrigger, type CarouselPrevTriggerBaseProps as PrevTriggerBaseProps, type CarouselPrevTriggerProps as PrevTriggerProps, } from './components/PrevTrigger.svelte';
+export { default as Root, type CarouselRootBaseProps as RootBaseProps, type CarouselRootProps as RootProps, } from './components/Root.svelte';
+export { default as RootProvider, type CarouselRootProviderBaseProps as RootProviderBaseProps, type CarouselRootProviderProps as RootProviderProps, } from './components/RootProvider.svelte';
+export type { AutoplayStatusDetails, DragStatusDetails, PageChangeDetails } from '@destyler/carousel';

package/dist/components/carousel/namespace.js

@@ -0,0 +1,11 @@
+export { default as AutoplayTrigger, } from './components/AutoplayTrigger.svelte';
+export { default as Context } from './components/Context.svelte';
+export { default as Control, } from './components/Control.svelte';
+export { default as Indicator, } from './components/Indicator.svelte';
+export { default as IndicatorGroup, } from './components/IndicatorGroup.svelte';
+export { default as Item, } from './components/Item.svelte';
+export { default as ItemGroup, } from './components/ItemGroup.svelte';
+export { default as NextTrigger, } from './components/NextTrigger.svelte';
+export { default as PrevTrigger, } from './components/PrevTrigger.svelte';
+export { default as Root, } from './components/Root.svelte';
+export { default as RootProvider, } from './components/RootProvider.svelte';

package/dist/components/checkbox/anatomy.d.ts

@@ -0,0 +1 @@
+export declare const checkboxAnatomy: import("@destyler/anatomy").AnatomyInstance<"label" | "root" | "group" | "control" | "indicator">;

package/dist/components/checkbox/anatomy.js

@@ -0,0 +1,2 @@
+import { anatomy } from '@destyler/checkbox';
+export const checkboxAnatomy = anatomy.extendWith('group');

package/dist/components/checkbox/components/Context.d.svelte.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseCheckboxContext } from '../hooks/use-checkbox-context.js';
+export interface CheckboxContextProps {
+    render?: Snippet<[UseCheckboxContext]>;
+}
+declare const Context: import("svelte").Component<CheckboxContextProps, {}, "">;
+type Context = ReturnType<typeof Context>;
+export default Context;

package/dist/components/checkbox/components/Context.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseCheckboxContext } from '../hooks/use-checkbox-context'
+
+  export interface CheckboxContextProps {
+    render?: Snippet<[UseCheckboxContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useCheckboxContext } from '../hooks/use-checkbox-context'
+
+  const { render }: CheckboxContextProps = $props()
+
+  const context = useCheckboxContext()
+</script>
+
+{@render render?.(context)}

package/dist/components/checkbox/components/Context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseCheckboxContext } from '../hooks/use-checkbox-context.js';
+export interface CheckboxContextProps {
+    render?: Snippet<[UseCheckboxContext]>;
+}
+declare const Context: import("svelte").Component<CheckboxContextProps, {}, "">;
+type Context = ReturnType<typeof Context>;
+export default Context;

package/dist/components/checkbox/components/Control.d.svelte.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../../types.js';
+export interface CheckboxControlBaseProps extends PolymorphicProps<'div'> {
+}
+export interface CheckboxControlProps extends Assign<HTMLProps<'div'>, CheckboxControlBaseProps> {
+}
+declare const Control: import("svelte").Component<CheckboxControlProps, {}, "">;
+type Control = ReturnType<typeof Control>;
+export default Control;

package/dist/components/checkbox/components/Control.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../../types'
+
+  export interface CheckboxControlBaseProps extends PolymorphicProps<'div'> {}
+  export interface CheckboxControlProps extends Assign<HTMLProps<'div'>, CheckboxControlBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@destyler/svelte'
+  import { UI } from '../../factory'
+  import { useCheckboxContext } from '../hooks/use-checkbox-context'
+
+  const props: CheckboxControlProps = $props()
+
+  const checkbox = useCheckboxContext()
+  const mergedProps = $derived(mergeProps(checkbox().getControlProps(), props))
+</script>
+
+<UI as="div" {...mergedProps} />

package/dist/components/checkbox/components/Control.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../../types.js';
+export interface CheckboxControlBaseProps extends PolymorphicProps<'div'> {
+}
+export interface CheckboxControlProps extends Assign<HTMLProps<'div'>, CheckboxControlBaseProps> {
+}
+declare const Control: import("svelte").Component<CheckboxControlProps, {}, "">;
+type Control = ReturnType<typeof Control>;
+export default Control;

package/dist/components/checkbox/components/Group.d.svelte.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../../types.js';
+import type { UseCheckboxGroupProps } from '../hooks/use-checkbox-group.svelte.js';
+export interface CheckboxGroupBaseProps extends UseCheckboxGroupProps, PolymorphicProps<'div'> {
+}
+export interface CheckboxGroupProps extends Assign<HTMLProps<'div'>, CheckboxGroupBaseProps> {
+}
+declare const Group: import("svelte").Component<CheckboxGroupProps, {}, "value">;
+type Group = ReturnType<typeof Group>;
+export default Group;

package/dist/components/checkbox/components/Group.svelte

@@ -0,0 +1,34 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../../types'
+  import type { UseCheckboxGroupProps } from '../hooks/use-checkbox-group.svelte'
+
+  export interface CheckboxGroupBaseProps extends UseCheckboxGroupProps, PolymorphicProps<'div'> {}
+  export interface CheckboxGroupProps extends Assign<HTMLProps<'div'>, CheckboxGroupBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { UI } from '../../factory'
+  import { checkboxAnatomy } from '../anatomy'
+  import { CheckboxGroupProvider } from '../hooks/use-checkbox-group-context'
+  import { splitCheckboxGroupProps } from '../hooks/split-checkbox-group-props.svelte'
+  import { useCheckboxGroup } from '../hooks/use-checkbox-group.svelte'
+
+  let { value = $bindable(), ...props }: CheckboxGroupProps = $props()
+
+  const [checkboxGroupProps, localProps] = $derived(splitCheckboxGroupProps(props))
+
+  const resolvedProps = $derived<UseCheckboxGroupProps>({
+    ...checkboxGroupProps,
+    value,
+    onValueChange(newValue) {
+      checkboxGroupProps.onValueChange?.(newValue)
+      value = newValue
+    },
+  })
+
+  const checkboxGroup = useCheckboxGroup(() => resolvedProps)
+
+  CheckboxGroupProvider(checkboxGroup)
+</script>
+
+<UI as="div" role="group" {...checkboxAnatomy.build().group.attrs} {...localProps} />

package/dist/components/checkbox/components/Group.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../../types.js';
+import type { UseCheckboxGroupProps } from '../hooks/use-checkbox-group.svelte.js';
+export interface CheckboxGroupBaseProps extends UseCheckboxGroupProps, PolymorphicProps<'div'> {
+}
+export interface CheckboxGroupProps extends Assign<HTMLProps<'div'>, CheckboxGroupBaseProps> {
+}
+declare const Group: import("svelte").Component<CheckboxGroupProps, {}, "value">;
+type Group = ReturnType<typeof Group>;
+export default Group;

package/dist/components/checkbox/components/HiddenInput.d.svelte.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../../types.js';
+export interface CheckboxHiddenInputBaseProps extends PolymorphicProps<'input'> {
+}
+export interface CheckboxHiddenInputProps extends Assign<HTMLProps<'input'>, CheckboxHiddenInputBaseProps> {
+}
+declare const HiddenInput: import("svelte").Component<CheckboxHiddenInputProps, {}, "">;
+type HiddenInput = ReturnType<typeof HiddenInput>;
+export default HiddenInput;

package/dist/components/checkbox/components/HiddenInput.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../../types'
+
+  export interface CheckboxHiddenInputBaseProps extends PolymorphicProps<'input'> {}
+  export interface CheckboxHiddenInputProps extends Assign<HTMLProps<'input'>, CheckboxHiddenInputBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@destyler/svelte'
+  import { UI } from '../../factory'
+  import { useFieldContext } from '../../field'
+  import { useCheckboxContext } from '../hooks/use-checkbox-context'
+
+  const props: CheckboxHiddenInputProps = $props()
+
+  const checkbox = useCheckboxContext()
+  const field = useFieldContext()
+  const mergedProps = $derived(mergeProps(checkbox().getHiddenInputProps(), props))
+</script>
+
+<UI as="input" aria-describedby={field?.()?.ariaDescribedby} {...mergedProps} />

package/dist/components/checkbox/components/HiddenInput.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../../types.js';
+export interface CheckboxHiddenInputBaseProps extends PolymorphicProps<'input'> {
+}
+export interface CheckboxHiddenInputProps extends Assign<HTMLProps<'input'>, CheckboxHiddenInputBaseProps> {
+}
+declare const HiddenInput: import("svelte").Component<CheckboxHiddenInputProps, {}, "">;
+type HiddenInput = ReturnType<typeof HiddenInput>;
+export default HiddenInput;

package/dist/components/checkbox/components/Indicator.d.svelte.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../../types.js';
+export interface CheckboxIndicatorBaseProps extends PolymorphicProps<'div'> {
+    indeterminate?: boolean;
+}
+export interface CheckboxIndicatorProps extends Assign<HTMLProps<'div'>, CheckboxIndicatorBaseProps> {
+}
+declare const Indicator: import("svelte").Component<CheckboxIndicatorProps, {}, "">;
+type Indicator = ReturnType<typeof Indicator>;
+export default Indicator;

package/dist/components/checkbox/components/Indicator.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../../types'
+
+  export interface CheckboxIndicatorBaseProps extends PolymorphicProps<'div'> {
+    indeterminate?: boolean
+  }
+  export interface CheckboxIndicatorProps extends Assign<HTMLProps<'div'>, CheckboxIndicatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@destyler/svelte'
+  import { UI } from '../../factory'
+  import { useCheckboxContext } from '../hooks/use-checkbox-context'
+
+  const { indeterminate, ...rest }: CheckboxIndicatorProps = $props()
+
+  const checkbox = useCheckboxContext()
+  const mergedProps = $derived(mergeProps(checkbox().getIndicatorProps(), rest))
+  const isVisible = $derived(indeterminate ? checkbox().indeterminate : checkbox().checked)
+</script>
+
+<UI as="div" {...mergedProps} hidden={!isVisible} />

package/dist/components/checkbox/components/Indicator.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../../types.js';
+export interface CheckboxIndicatorBaseProps extends PolymorphicProps<'div'> {
+    indeterminate?: boolean;
+}
+export interface CheckboxIndicatorProps extends Assign<HTMLProps<'div'>, CheckboxIndicatorBaseProps> {
+}
+declare const Indicator: import("svelte").Component<CheckboxIndicatorProps, {}, "">;
+type Indicator = ReturnType<typeof Indicator>;
+export default Indicator;

package/dist/components/checkbox/components/Label.d.svelte.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../../types.js';
+export interface CheckboxLabelBaseProps extends PolymorphicProps<'span'> {
+}
+export interface CheckboxLabelProps extends Assign<HTMLProps<'span'>, CheckboxLabelBaseProps> {
+}
+declare const Label: import("svelte").Component<CheckboxLabelProps, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/components/checkbox/components/Label.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../../types'
+
+  export interface CheckboxLabelBaseProps extends PolymorphicProps<'span'> {}
+  export interface CheckboxLabelProps extends Assign<HTMLProps<'span'>, CheckboxLabelBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@destyler/svelte'
+  import { UI } from '../../factory'
+  import { useCheckboxContext } from '../hooks/use-checkbox-context'
+
+  const props: CheckboxLabelProps = $props()
+
+  const checkbox = useCheckboxContext()
+  const mergedProps = $derived(mergeProps(checkbox().getLabelProps(), props))
+</script>
+
+<UI as="span" {...mergedProps} />

package/dist/components/checkbox/components/Label.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../../types.js';
+export interface CheckboxLabelBaseProps extends PolymorphicProps<'span'> {
+}
+export interface CheckboxLabelProps extends Assign<HTMLProps<'span'>, CheckboxLabelBaseProps> {
+}
+declare const Label: import("svelte").Component<CheckboxLabelProps, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/components/checkbox/components/Root.d.svelte.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../../types.js';
+import type { UseCheckboxProps } from '../hooks/use-checkbox.svelte.js';
+export interface CheckboxRootBaseProps extends Optional<UseCheckboxProps, 'id'>, PolymorphicProps<'label'> {
+}
+export interface CheckboxRootProps extends Assign<HTMLProps<'label'>, CheckboxRootBaseProps> {
+}
+declare const Root: import("svelte").Component<CheckboxRootProps, {}, "checked">;
+type Root = ReturnType<typeof Root>;
+export default Root;

package/dist/components/checkbox/components/Root.svelte

@@ -0,0 +1,37 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../../types'
+  import type { UseCheckboxProps } from '../hooks/use-checkbox.svelte'
+
+  export interface CheckboxRootBaseProps extends Optional<UseCheckboxProps, 'id'>, PolymorphicProps<'label'> {}
+  export interface CheckboxRootProps extends Assign<HTMLProps<'label'>, CheckboxRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@destyler/svelte'
+  import { UI } from '../../factory'
+  import { CheckboxProvider } from '../hooks/use-checkbox-context'
+  import { splitCheckboxProps } from '../hooks/split-checkbox-props.svelte'
+  import { useCheckbox } from '../hooks/use-checkbox.svelte'
+
+  let { checked = $bindable(), ...props }: CheckboxRootProps = $props()
+  const providedId = $props.id()
+
+  const [useCheckboxProps, localProps] = $derived(splitCheckboxProps(props))
+
+  const resolvedProps = $derived<UseCheckboxProps>({
+    ...useCheckboxProps,
+    id: useCheckboxProps.id ?? providedId,
+    checked,
+    onCheckedChange(details) {
+      useCheckboxProps.onCheckedChange?.(details)
+      checked = details.checked
+    },
+  })
+
+  const checkbox = useCheckbox(() => resolvedProps)
+  const mergedProps = $derived(mergeProps(checkbox().getRootProps(), localProps))
+
+  CheckboxProvider(() => checkbox())
+</script>
+
+<UI as="label" {...mergedProps} />

package/dist/components/checkbox/components/Root.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../../types.js';
+import type { UseCheckboxProps } from '../hooks/use-checkbox.svelte.js';
+export interface CheckboxRootBaseProps extends Optional<UseCheckboxProps, 'id'>, PolymorphicProps<'label'> {
+}
+export interface CheckboxRootProps extends Assign<HTMLProps<'label'>, CheckboxRootBaseProps> {
+}
+declare const Root: import("svelte").Component<CheckboxRootProps, {}, "checked">;
+type Root = ReturnType<typeof Root>;
+export default Root;

package/dist/components/checkbox/components/RootProvider.d.svelte.ts

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../../types.js';
+import type { UseCheckboxReturn } from '../hooks/use-checkbox.svelte.js';
+export interface CheckboxRootProviderBaseProps extends PolymorphicProps<'label'> {
+    value: UseCheckboxReturn;
+}
+export interface CheckboxRootProviderProps extends Assign<HTMLProps<'label'>, CheckboxRootProviderBaseProps> {
+}
+declare const RootProvider: import("svelte").Component<CheckboxRootProviderProps, {}, "">;
+type RootProvider = ReturnType<typeof RootProvider>;
+export default RootProvider;

package/dist/components/checkbox/components/RootProvider.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../../types'
+  import type { UseCheckboxReturn } from '../hooks/use-checkbox.svelte'
+
+  export interface CheckboxRootProviderBaseProps extends PolymorphicProps<'label'> {
+    value: UseCheckboxReturn
+  }
+  export interface CheckboxRootProviderProps extends Assign<HTMLProps<'label'>, CheckboxRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@destyler/svelte'
+  import { UI } from '../../factory'
+  import { CheckboxProvider } from '../hooks/use-checkbox-context'
+
+  const { value, ...props }: CheckboxRootProviderProps = $props()
+
+  const mergedProps = $derived(mergeProps(value().getRootProps(), props))
+
+  CheckboxProvider(() => value())
+</script>
+
+<UI as="label" {...mergedProps} />

package/dist/components/checkbox/components/RootProvider.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../../types.js';
+import type { UseCheckboxReturn } from '../hooks/use-checkbox.svelte.js';
+export interface CheckboxRootProviderBaseProps extends PolymorphicProps<'label'> {
+    value: UseCheckboxReturn;
+}
+export interface CheckboxRootProviderProps extends Assign<HTMLProps<'label'>, CheckboxRootProviderBaseProps> {
+}
+declare const RootProvider: import("svelte").Component<CheckboxRootProviderProps, {}, "">;
+type RootProvider = ReturnType<typeof RootProvider>;
+export default RootProvider;

package/dist/components/checkbox/hooks/split-checkbox-group-props.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { UseCheckboxGroupProps } from './use-checkbox-group.svelte.js';
+export declare function splitCheckboxGroupProps<T extends UseCheckboxGroupProps>(props: T): [UseCheckboxGroupProps, Omit<T, "value" | "defaultValue" | "name" | "disabled" | "readOnly" | "onValueChange" | "invalid">];

package/dist/components/checkbox/hooks/split-checkbox-group-props.svelte.js

@@ -0,0 +1,5 @@
+import { createSplitProps } from '../../../utils/create-split-props.js';
+const splitFn = createSplitProps();
+export function splitCheckboxGroupProps(props) {
+    return splitFn(props, ['defaultValue', 'value', 'onValueChange', 'disabled', 'invalid', 'readOnly', 'name']);
+}

package/dist/components/checkbox/hooks/split-checkbox-props.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Optional } from '../../../types.js';
+import type { UseCheckboxProps } from './use-checkbox.svelte.js';
+type CheckboxMachineProps = Optional<UseCheckboxProps, 'id'>;
+export declare function splitCheckboxProps<T extends CheckboxMachineProps>(props: T): [CheckboxMachineProps, Omit<T, "form" | "value" | "name" | "checked" | "defaultChecked" | "id" | "ids" | "disabled" | "required" | "readOnly" | "invalid" | "onCheckedChange">];
+export {};

package/dist/components/checkbox/hooks/split-checkbox-props.svelte.js

@@ -0,0 +1,18 @@
+import { createSplitProps } from '../../../utils/create-split-props.js';
+const splitFn = createSplitProps();
+export function splitCheckboxProps(props) {
+    return splitFn(props, [
+        'checked',
+        'defaultChecked',
+        'disabled',
+        'form',
+        'id',
+        'ids',
+        'invalid',
+        'name',
+        'onCheckedChange',
+        'readOnly',
+        'required',
+        'value',
+    ]);
+}

package/dist/components/checkbox/hooks/use-checkbox-context.d.ts

@@ -0,0 +1,3 @@
+import type { UseCheckboxReturn } from './use-checkbox.svelte.js';
+export type UseCheckboxContext = UseCheckboxReturn;
+export declare const CheckboxProvider: (value: UseCheckboxReturn) => void, useCheckboxContext: import("../../../utils/create-context.js").RequiredContextConsumer<UseCheckboxReturn>;

package/dist/components/checkbox/hooks/use-checkbox-context.js

@@ -0,0 +1,7 @@
+import { createContext } from '../../../utils/create-context.js';
+export const [CheckboxProvider, useCheckboxContext] = createContext({
+    name: 'CheckboxContext',
+    hookName: 'useCheckboxContext',
+    providerName: '<CheckboxProvider />',
+    errorMessage: 'useCheckboxContext must be used within a CheckboxProvider',
+});

package/dist/components/checkbox/hooks/use-checkbox-group-context.d.ts

@@ -0,0 +1,4 @@
+import type { UseCheckboxGroupReturn } from './use-checkbox-group.svelte.js';
+export interface UseCheckboxGroupContext extends UseCheckboxGroupReturn {
+}
+export declare const CheckboxGroupProvider: (value: UseCheckboxGroupContext) => void, useCheckboxGroupContext: import("../../../utils/create-context.js").OptionalContextConsumer<UseCheckboxGroupContext>;

package/dist/components/checkbox/hooks/use-checkbox-group-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../../../utils/create-context.js';
+export const [CheckboxGroupProvider, useCheckboxGroupContext] = createContext({
+    name: 'CheckboxGroupContext',
+    strict: false,
+});