@ark-ui/svelte 0.4.0 → 5.0.0-0

package/dist/components/carousel/carousel-control.svelte.d.ts

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

package/dist/components/carousel/carousel-indicator-group.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface CarouselIndicatorGroupBaseProps extends PolymorphicProps<'div'> {}
+  export interface CarouselIndicatorGroupProps extends Assign<HTMLProps<'div'>, CarouselIndicatorGroupBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useCarouselContext } from './use-carousel-context'
+
+  const props: CarouselIndicatorGroupProps = $props()
+
+  const carousel = useCarouselContext()
+  const mergedProps = $derived(mergeProps(carousel().getIndicatorGroupProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/carousel/carousel-indicator-group.svelte.d.ts

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

package/dist/components/carousel/carousel-indicator.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { IndicatorProps } from '@zag-js/carousel'
+
+  export interface CarouselIndicatorBaseProps extends IndicatorProps, PolymorphicProps<'button'> {}
+  export interface CarouselIndicatorProps extends Assign<HTMLProps<'button'>, CarouselIndicatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useCarouselContext } from './use-carousel-context'
+
+  const props: CarouselIndicatorProps = $props()
+  const [indicatorProps, localProps] = $derived(createSplitProps<IndicatorProps>()(props, ['index', 'readOnly']))
+
+  const carousel = useCarouselContext()
+  const mergedProps = $derived(mergeProps(carousel().getIndicatorProps(indicatorProps), localProps))
+</script>
+
+<Ark as="button" {...mergedProps} />

package/dist/components/carousel/carousel-indicator.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { IndicatorProps } from '@zag-js/carousel';
+export interface CarouselIndicatorBaseProps extends IndicatorProps, PolymorphicProps<'button'> {
+}
+export interface CarouselIndicatorProps extends Assign<HTMLProps<'button'>, CarouselIndicatorBaseProps> {
+}
+declare const CarouselIndicator: import("svelte").Component<CarouselIndicatorProps, {}, "">;
+type CarouselIndicator = ReturnType<typeof CarouselIndicator>;
+export default CarouselIndicator;

package/dist/components/carousel/carousel-item-group.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface CarouselItemGroupBaseProps extends PolymorphicProps<'div'> {}
+  export interface CarouselItemGroupProps extends Assign<HTMLProps<'div'>, CarouselItemGroupBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useCarouselContext } from './use-carousel-context'
+
+  const props: CarouselItemGroupProps = $props()
+
+  const carousel = useCarouselContext()
+  const mergedProps = $derived(mergeProps(carousel().getItemGroupProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/carousel/carousel-item-group.svelte.d.ts

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

package/dist/components/carousel/carousel-item.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { ItemProps } from '@zag-js/carousel'
+
+  export interface CarouselItemBaseProps extends ItemProps, PolymorphicProps<'div'> {}
+  export interface CarouselItemProps extends Assign<HTMLProps<'div'>, CarouselItemBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useCarouselContext } from './use-carousel-context'
+
+  const props: CarouselItemProps = $props()
+
+  const [itemProps, localProps] = $derived(createSplitProps<ItemProps>()(props, ['index', 'snapAlign']))
+
+  const carousel = useCarouselContext()
+  const mergedProps = $derived(mergeProps(carousel().getItemProps(itemProps), localProps))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/carousel/carousel-item.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { ItemProps } from '@zag-js/carousel';
+export interface CarouselItemBaseProps extends ItemProps, PolymorphicProps<'div'> {
+}
+export interface CarouselItemProps extends Assign<HTMLProps<'div'>, CarouselItemBaseProps> {
+}
+declare const CarouselItem: import("svelte").Component<CarouselItemProps, {}, "">;
+type CarouselItem = ReturnType<typeof CarouselItem>;
+export default CarouselItem;

package/dist/components/carousel/carousel-next-trigger.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface CarouselNextTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface CarouselNextTriggerProps extends Assign<HTMLProps<'button'>, CarouselNextTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useCarouselContext } from './use-carousel-context'
+
+  const props: CarouselNextTriggerProps = $props()
+
+  const carousel = useCarouselContext()
+  const mergedProps = $derived(mergeProps(carousel().getNextTriggerProps(), props))
+</script>
+
+<Ark as="button" {...mergedProps} />

package/dist/components/carousel/carousel-next-trigger.svelte.d.ts

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

package/dist/components/carousel/carousel-prev-trigger.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface CarouselPrevTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface CarouselPrevTriggerProps extends Assign<HTMLProps<'button'>, CarouselPrevTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useCarouselContext } from './use-carousel-context'
+
+  const props: CarouselPrevTriggerProps = $props()
+
+  const carousel = useCarouselContext()
+  const mergedProps = $derived(mergeProps(carousel().getPrevTriggerProps(), props))
+</script>
+
+<Ark as="button" {...mergedProps} />

package/dist/components/carousel/carousel-prev-trigger.svelte.d.ts

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

package/dist/components/carousel/carousel-root-provider.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseCarouselReturn } from './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 '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { CarouselProvider } from './use-carousel-context'
+
+  let { value, ...props }: CarouselRootProviderProps = $props()
+  const mergedProps = $derived(mergeProps(value().getRootProps(), props))
+
+  CarouselProvider(value)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/carousel/carousel-root-provider.svelte.d.ts

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

package/dist/components/carousel/carousel-root.svelte

@@ -0,0 +1,59 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseCarouselProps } from './use-carousel.svelte'
+
+  export interface CarouselRootBaseProps extends UseCarouselProps, PolymorphicProps<'div'> {}
+  export interface CarouselRootProps extends Assign<HTMLProps<'div'>, CarouselRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useCarousel } from './use-carousel.svelte'
+  import { CarouselProvider } from './use-carousel-context'
+  import { createSplitProps } from '../../utils/create-split-props'
+
+  let { page = $bindable(), ...props }: CarouselRootProps = $props()
+  const providedId = $props.id()
+
+  const [useCarouselProps, localProps] = $derived(
+    createSplitProps<UseCarouselProps>()(props, [
+      'allowMouseDrag',
+      'autoplay',
+      'defaultPage',
+      'id',
+      'ids',
+      'inViewThreshold',
+      'loop',
+      'onAutoplayStatusChange',
+      'onDragStatusChange',
+      'onPageChange',
+      'orientation',
+      'padding',
+      'page',
+      'slideCount',
+      'slidesPerMove',
+      'slidesPerPage',
+      'snapType',
+      'spacing',
+      'translations',
+    ]),
+  )
+
+  const resolvedProps = $derived<UseCarouselProps>({
+    ...useCarouselProps,
+    id: useCarouselProps.id ?? providedId,
+    page,
+    onPageChange(details) {
+      useCarouselProps.onPageChange?.(details)
+      if (page !== undefined) page = details.page
+    },
+  })
+
+  const carousel = useCarousel(() => resolvedProps)
+  const mergedProps = $derived(mergeProps(carousel().getRootProps(), localProps))
+
+  CarouselProvider(carousel)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/carousel/carousel-root.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseCarouselProps } from './use-carousel.svelte';
+export interface CarouselRootBaseProps extends UseCarouselProps, PolymorphicProps<'div'> {
+}
+export interface CarouselRootProps extends Assign<HTMLProps<'div'>, CarouselRootBaseProps> {
+}
+declare const CarouselRoot: import("svelte").Component<CarouselRootProps, {}, "page">;
+type CarouselRoot = ReturnType<typeof CarouselRoot>;
+export default CarouselRoot;

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

@@ -0,0 +1 @@
+export { anatomy as carouselAnatomy } from '@zag-js/carousel';

package/dist/components/carousel/carousel.anatomy.js

@@ -0,0 +1 @@
+export { anatomy as carouselAnatomy } from '@zag-js/carousel';

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

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

package/dist/components/carousel/carousel.js

@@ -0,0 +1,11 @@
+export { default as AutoplayTrigger, } from './carousel-autoplay-trigger.svelte';
+export { default as Context } from './carousel-context.svelte';
+export { default as Control, } from './carousel-control.svelte';
+export { default as Indicator, } from './carousel-indicator.svelte';
+export { default as IndicatorGroup, } from './carousel-indicator-group.svelte';
+export { default as Item, } from './carousel-item.svelte';
+export { default as ItemGroup, } from './carousel-item-group.svelte';
+export { default as NextTrigger, } from './carousel-next-trigger.svelte';
+export { default as PrevTrigger, } from './carousel-prev-trigger.svelte';
+export { default as Root, } from './carousel-root.svelte';
+export { default as RootProvider, } from './carousel-root-provider.svelte';

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

@@ -0,0 +1,16 @@
+export type { AutoplayStatusDetails as CarouselAutoplayStatusDetails, DragStatusDetails as CarouselDragStatusDetails, PageChangeDetails as CarouselPageChangeDetails, } from '@zag-js/carousel';
+export { default as CarouselAutoplayTrigger, type CarouselAutoplayTriggerBaseProps, type CarouselAutoplayTriggerProps, } from './carousel-autoplay-trigger.svelte';
+export { default as CarouselContext, type CarouselContextProps } from './carousel-context.svelte';
+export { default as CarouselControl, type CarouselControlBaseProps, type CarouselControlProps, } from './carousel-control.svelte';
+export { default as CarouselIndicator, type CarouselIndicatorBaseProps, type CarouselIndicatorProps, } from './carousel-indicator.svelte';
+export { default as CarouselIndicatorGroup, type CarouselIndicatorGroupBaseProps, type CarouselIndicatorGroupProps, } from './carousel-indicator-group.svelte';
+export { default as CarouselItem, type CarouselItemBaseProps, type CarouselItemProps } from './carousel-item.svelte';
+export { default as CarouselItemGroup, type CarouselItemGroupBaseProps, type CarouselItemGroupProps, } from './carousel-item-group.svelte';
+export { default as CarouselNextTrigger, type CarouselNextTriggerBaseProps, type CarouselNextTriggerProps, } from './carousel-next-trigger.svelte';
+export { default as CarouselPrevTrigger, type CarouselPrevTriggerBaseProps, type CarouselPrevTriggerProps, } from './carousel-prev-trigger.svelte';
+export { default as CarouselRoot, type CarouselRootBaseProps, type CarouselRootProps } from './carousel-root.svelte';
+export { default as CarouselRootProvider, type CarouselRootProviderBaseProps, type CarouselRootProviderProps, } from './carousel-root-provider.svelte';
+export { carouselAnatomy } from './carousel.anatomy';
+export { useCarousel, type UseCarouselProps, type UseCarouselReturn } from './use-carousel.svelte';
+export { useCarouselContext, type UseCarouselContext } from './use-carousel-context';
+export * as Carousel from './carousel';

package/dist/components/carousel/index.js

@@ -0,0 +1,15 @@
+export { default as CarouselAutoplayTrigger, } from './carousel-autoplay-trigger.svelte';
+export { default as CarouselContext } from './carousel-context.svelte';
+export { default as CarouselControl, } from './carousel-control.svelte';
+export { default as CarouselIndicator, } from './carousel-indicator.svelte';
+export { default as CarouselIndicatorGroup, } from './carousel-indicator-group.svelte';
+export { default as CarouselItem } from './carousel-item.svelte';
+export { default as CarouselItemGroup, } from './carousel-item-group.svelte';
+export { default as CarouselNextTrigger, } from './carousel-next-trigger.svelte';
+export { default as CarouselPrevTrigger, } from './carousel-prev-trigger.svelte';
+export { default as CarouselRoot } from './carousel-root.svelte';
+export { default as CarouselRootProvider, } from './carousel-root-provider.svelte';
+export { carouselAnatomy } from './carousel.anatomy';
+export { useCarousel } from './use-carousel.svelte';
+export { useCarouselContext } from './use-carousel-context';
+export * as Carousel from './carousel';

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

@@ -0,0 +1,4 @@
+import type { UseCarouselReturn } from './use-carousel.svelte';
+export interface UseCarouselContext extends UseCarouselReturn {
+}
+export declare const CarouselProvider: (opts: UseCarouselContext) => void, useCarouselContext: (fallback?: UseCarouselContext | undefined) => UseCarouselContext;

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

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

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

@@ -0,0 +1,9 @@
+import type { Accessor, Optional } from '../../types';
+import * as carousel from '@zag-js/carousel';
+import { type PropTypes } from '@zag-js/svelte';
+import { type MaybeFunction } from '@zag-js/utils';
+export interface UseCarouselProps extends Optional<Omit<carousel.Props, 'dir' | 'getRootNode'>, 'id'> {
+}
+export interface UseCarouselReturn extends Accessor<carousel.Api<PropTypes>> {
+}
+export declare const useCarousel: (props?: MaybeFunction<UseCarouselProps>) => () => carousel.Api<import("@zag-js/types").PropTypes>;

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

@@ -0,0 +1,20 @@
+import { useEnvironmentContext } from '../../providers/environment';
+import { useLocaleContext } from '../../providers/locale';
+import * as carousel from '@zag-js/carousel';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { runIfFn } from '@zag-js/utils';
+export const useCarousel = (props) => {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        return {
+            dir: locale().dir,
+            getRootNode: env().getRootNode,
+            ...resolvedProps,
+        };
+    });
+    const service = useMachine(carousel.machine, () => machineProps);
+    const api = $derived(carousel.connect(service, normalizeProps));
+    return () => api;
+};

package/dist/components/checkbox/checkbox-context.svelte

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

package/dist/components/checkbox/checkbox-context.svelte.d.ts

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

package/dist/components/checkbox/checkbox-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 '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useCheckboxContext } from './use-checkbox-context'
+
+  const props: CheckboxControlProps = $props()
+
+  const checkbox = useCheckboxContext()
+  const mergedProps = $derived(mergeProps(checkbox().getControlProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/checkbox/checkbox-control.svelte.d.ts

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

package/dist/components/checkbox/checkbox-group.svelte

@@ -0,0 +1,34 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseCheckboxGroupProps } from './use-checkbox-group.svelte'
+
+  export interface CheckboxGroupBaseProps extends UseCheckboxGroupProps, PolymorphicProps<'div'> {}
+  export interface CheckboxGroupProps extends Assign<HTMLProps<'div'>, CheckboxGroupBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { Ark } from '../factory'
+  import { checkboxAnatomy } from './checkbox.anatomy'
+  import { CheckboxGroupProvider } from './use-checkbox-group-context'
+  import { splitCheckboxGroupProps } from './split-checkbox-group-props.svelte'
+  import { useCheckboxGroup } from './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>
+
+<Ark as="div" role="group" {...checkboxAnatomy.build().group.attrs} {...localProps} />

package/dist/components/checkbox/checkbox-group.svelte.d.ts

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

package/dist/components/checkbox/checkbox-hidden-input.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 '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useFieldContext } from '../field'
+  import { useCheckboxContext } from './use-checkbox-context'
+
+  const props: CheckboxHiddenInputProps = $props()
+
+  const checkbox = useCheckboxContext()
+  const field = useFieldContext()
+  const mergedProps = $derived(mergeProps(checkbox().getHiddenInputProps(), props))
+</script>
+
+<Ark as="input" aria-describedby={field?.()?.ariaDescribedby} {...mergedProps} />

package/dist/components/checkbox/checkbox-hidden-input.svelte.d.ts

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

package/dist/components/checkbox/checkbox-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 '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useCheckboxContext } from './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>
+
+<Ark as="div" {...mergedProps} hidden={!isVisible} />

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

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

package/dist/components/checkbox/checkbox-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 '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useCheckboxContext } from './use-checkbox-context'
+
+  const props: CheckboxLabelProps = $props()
+
+  const checkbox = useCheckboxContext()
+  const mergedProps = $derived(mergeProps(checkbox().getLabelProps(), props))
+</script>
+
+<Ark as="span" {...mergedProps} />

package/dist/components/checkbox/checkbox-label.svelte.d.ts

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