@ark-ui/svelte 0.4.0 → 5.0.0-0

package/dist/components/collection/tree-collection.js

@@ -0,0 +1,3 @@
+import { TreeCollection, filePathToTree, } from '@zag-js/collection';
+export const createTreeCollection = (options) => new TreeCollection(options);
+export const createFileTreeCollection = (paths) => filePathToTree(paths);

package/dist/components/collection/use-list-collection.svelte.d.ts

@@ -0,0 +1,34 @@
+import { type MaybeFunction } from '@zag-js/utils';
+import { type CollectionOptions, type ListCollection } from './list-collection';
+export interface UseListCollectionProps<T> extends Omit<CollectionOptions<T>, 'items'> {
+    /**
+     * The initial items to display in the collection.
+     */
+    initialItems: T[];
+    /**
+     * The filter function to use to filter the items.
+     */
+    filter?: (itemText: string, filterText: string) => boolean;
+    /**
+     * The maximum number of items to display in the collection.
+     * Useful for performance when you have a large number of items.
+     */
+    limit?: number;
+}
+export declare function useListCollection<T>(inProps: MaybeFunction<UseListCollectionProps<T>>): {
+    collection(): ListCollection<T>;
+    filter: (inputValue: string) => void;
+    set: (items: T[]) => void;
+    reset: () => void;
+    clear: () => void;
+    insert: (index: number, ...items: T[]) => void;
+    insertBefore: (value: string, ...items: T[]) => void;
+    insertAfter: (value: string, ...items: T[]) => void;
+    remove: (...itemOrValues: T[]) => void;
+    move: (value: string, to: number) => void;
+    moveBefore: (value: string, ...values: string[]) => void;
+    moveAfter: (value: string, ...values: string[]) => void;
+    reorder: (from: number, to: number) => void;
+    prepend: (...items: T[]) => void;
+    update: (value: string, item: T) => void;
+};

package/dist/components/collection/use-list-collection.svelte.js

@@ -0,0 +1,67 @@
+import { runIfFn } from '@zag-js/utils';
+import { flushSync, untrack } from 'svelte';
+import { createListCollection } from './list-collection';
+export function useListCollection(inProps) {
+    const [props, collectionOptions] = $derived.by(() => {
+        const { initialItems = [], filter, limit, ...collectionOptions } = runIfFn(inProps);
+        return [{ initialItems, filter, limit }, collectionOptions];
+    });
+    const create = (items) => {
+        return createListCollection({ ...collectionOptions, items });
+    };
+    let collection = $state(untrack(() => create(props.limit != null ? props.initialItems.slice(0, props.limit) : props.initialItems)));
+    const setCollection = (v) => {
+        collection = props.limit == null ? v : v.copy(v.items.slice(0, props.limit));
+    };
+    return {
+        collection() {
+            return collection;
+        },
+        filter: (inputValue) => {
+            const filterFn = props.filter;
+            if (!filterFn)
+                return;
+            const filtered = create(props.initialItems).filter((itemString) => filterFn(itemString, inputValue));
+            setCollection(filtered);
+        },
+        set: (items) => {
+            setCollection(create(items));
+        },
+        reset: () => {
+            setCollection(create(props.initialItems));
+        },
+        clear: () => {
+            setCollection(create([]));
+        },
+        insert: (index, ...items) => {
+            setCollection(collection.insert(index, ...items));
+        },
+        insertBefore: (value, ...items) => {
+            setCollection(collection.insertBefore(value, ...items));
+        },
+        insertAfter: (value, ...items) => {
+            setCollection(collection.insertAfter(value, ...items));
+        },
+        remove: (...itemOrValues) => {
+            setCollection(collection.remove(...itemOrValues));
+        },
+        move: (value, to) => {
+            setCollection(collection.move(value, to));
+        },
+        moveBefore: (value, ...values) => {
+            setCollection(collection.moveBefore(value, ...values));
+        },
+        moveAfter: (value, ...values) => {
+            setCollection(collection.moveAfter(value, ...values));
+        },
+        reorder: (from, to) => {
+            setCollection(collection.reorder(from, to));
+        },
+        prepend: (...items) => {
+            setCollection(collection.prepend(...items));
+        },
+        update: (value, item) => {
+            setCollection(collection.update(value, item));
+        },
+    };
+}

package/dist/components/color-picker/color-picker-area-background.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ColorPickerAreaBackgroundBaseProps extends PolymorphicProps<'div'> {}
+  export interface ColorPickerAreaBackgroundProps
+    extends Assign<HTMLProps<'div'>, ColorPickerAreaBackgroundBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+  import { useColorPickerAreaPropsContext } from './use-color-picker-area-props-context'
+
+  const props: ColorPickerAreaBackgroundProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const areaProps = useColorPickerAreaPropsContext()
+
+  const mergedProps = $derived(mergeProps(colorPicker().getAreaBackgroundProps(areaProps()), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/color-picker/color-picker-area-background.svelte.d.ts

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

package/dist/components/color-picker/color-picker-area-thumb.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ColorPickerAreaThumbBaseProps extends PolymorphicProps<'div'> {}
+  export interface ColorPickerAreaThumbProps extends Assign<HTMLProps<'div'>, ColorPickerAreaThumbBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+  import { useColorPickerAreaPropsContext } from './use-color-picker-area-props-context'
+
+  const props: ColorPickerAreaThumbProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const areaProps = useColorPickerAreaPropsContext()
+
+  const mergedProps = $derived(mergeProps(colorPicker().getAreaThumbProps(areaProps()), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/color-picker/color-picker-area-thumb.svelte.d.ts

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

package/dist/components/color-picker/color-picker-area.svelte

@@ -0,0 +1,26 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { AreaProps } from '@zag-js/color-picker'
+
+  export interface ColorPickerAreaBaseProps extends AreaProps, PolymorphicProps<'div'> {}
+  export interface ColorPickerAreaProps extends Assign<HTMLProps<'div'>, ColorPickerAreaBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+  import { ColorPickerAreaPropsProvider } from './use-color-picker-area-props-context'
+
+  const props: ColorPickerAreaProps = $props()
+
+  const [areaProps, localProps] = $derived(createSplitProps<AreaProps>()(props, ['xChannel', 'yChannel']))
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getAreaProps(areaProps), localProps))
+
+  ColorPickerAreaPropsProvider(() => areaProps)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/color-picker/color-picker-area.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { AreaProps } from '@zag-js/color-picker';
+export interface ColorPickerAreaBaseProps extends AreaProps, PolymorphicProps<'div'> {
+}
+export interface ColorPickerAreaProps extends Assign<HTMLProps<'div'>, ColorPickerAreaBaseProps> {
+}
+declare const ColorPickerArea: import("svelte").Component<ColorPickerAreaProps, {}, "">;
+type ColorPickerArea = ReturnType<typeof ColorPickerArea>;
+export default ColorPickerArea;

package/dist/components/color-picker/color-picker-channel-input.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { ChannelInputProps } from '@zag-js/color-picker'
+
+  export interface ColorPickerChannelInputBaseProps extends ChannelInputProps, PolymorphicProps<'input'> {}
+  export interface ColorPickerChannelInputProps extends Assign<HTMLProps<'input'>, ColorPickerChannelInputBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+
+  const props: ColorPickerChannelInputProps = $props()
+
+  const [channelProps, localProps] = $derived(createSplitProps<ChannelInputProps>()(props, ['channel', 'orientation']))
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getChannelInputProps(channelProps), localProps))
+</script>
+
+<Ark as="input" {...mergedProps} />

package/dist/components/color-picker/color-picker-channel-input.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { ChannelInputProps } from '@zag-js/color-picker';
+export interface ColorPickerChannelInputBaseProps extends ChannelInputProps, PolymorphicProps<'input'> {
+}
+export interface ColorPickerChannelInputProps extends Assign<HTMLProps<'input'>, ColorPickerChannelInputBaseProps> {
+}
+declare const ColorPickerChannelInput: import("svelte").Component<ColorPickerChannelInputProps, {}, "">;
+type ColorPickerChannelInput = ReturnType<typeof ColorPickerChannelInput>;
+export default ColorPickerChannelInput;

package/dist/components/color-picker/color-picker-channel-slider-label.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ColorPickerChannelSliderLabelBaseProps extends PolymorphicProps<'label'> {}
+  export interface ColorPickerChannelSliderLabelProps
+    extends Assign<HTMLProps<'label'>, ColorPickerChannelSliderLabelBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerChannelPropsContext } from './use-color-picker-channel-props-context'
+  import { useColorPickerContext } from './use-color-picker-context'
+
+  const props: ColorPickerChannelSliderLabelProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const channelProps = useColorPickerChannelPropsContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getChannelSliderLabelProps(channelProps()), props))
+</script>
+
+<Ark as="label" {...mergedProps} />

package/dist/components/color-picker/color-picker-channel-slider-label.svelte.d.ts

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

package/dist/components/color-picker/color-picker-channel-slider-thumb.svelte

@@ -0,0 +1,27 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ColorPickerChannelSliderThumbBaseProps extends PolymorphicProps<'div'> {}
+  export interface ColorPickerChannelSliderThumbProps
+    extends Assign<HTMLProps<'div'>, ColorPickerChannelSliderThumbBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerChannelPropsContext } from './use-color-picker-channel-props-context'
+  import { useColorPickerContext } from './use-color-picker-context'
+  import { useColorPickerFormatPropsContext } from './use-color-picker-format-context'
+
+  const props: ColorPickerChannelSliderThumbProps = $props()
+
+  const colorPicker = useColorPickerContext()
+
+  const channelProps = useColorPickerChannelPropsContext()
+  const formatProps = useColorPickerFormatPropsContext()
+  const channelSliderProps = $derived({ ...channelProps(), ...formatProps() })
+
+  const mergedProps = $derived(mergeProps(colorPicker().getChannelSliderThumbProps(channelSliderProps), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/color-picker/color-picker-channel-slider-thumb.svelte.d.ts

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

package/dist/components/color-picker/color-picker-channel-slider-track.svelte

@@ -0,0 +1,27 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ColorPickerChannelSliderTrackBaseProps extends PolymorphicProps<'div'> {}
+  export interface ColorPickerChannelSliderTrackProps
+    extends Assign<HTMLProps<'div'>, ColorPickerChannelSliderTrackBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerChannelPropsContext } from './use-color-picker-channel-props-context'
+  import { useColorPickerContext } from './use-color-picker-context'
+  import { useColorPickerFormatPropsContext } from './use-color-picker-format-context'
+
+  const props: ColorPickerChannelSliderTrackProps = $props()
+
+  const colorPicker = useColorPickerContext()
+
+  const channelProps = useColorPickerChannelPropsContext()
+  const formatProps = useColorPickerFormatPropsContext()
+  const channelSliderProps = $derived({ ...channelProps(), ...formatProps() })
+
+  const mergedProps = $derived(mergeProps(colorPicker().getChannelSliderTrackProps(channelSliderProps), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/color-picker/color-picker-channel-slider-track.svelte.d.ts

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

package/dist/components/color-picker/color-picker-channel-slider-value-text.svelte

@@ -0,0 +1,31 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ColorPickerChannelSliderValueTextBaseProps extends PolymorphicProps<'span'> {}
+  export interface ColorPickerChannelSliderValueTextProps
+    extends Assign<HTMLProps<'span'>, ColorPickerChannelSliderValueTextBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerChannelPropsContext } from './use-color-picker-channel-props-context'
+  import { useColorPickerContext } from './use-color-picker-context'
+  import { useLocaleContext } from '../../providers'
+
+  const props: ColorPickerChannelSliderValueTextProps = $props()
+
+  const locale = useLocaleContext()
+
+  const colorPicker = useColorPickerContext()
+  const channelProps = useColorPickerChannelPropsContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getChannelSliderValueTextProps(channelProps()), props))
+</script>
+
+<Ark as="span" {...mergedProps}>
+  {#if props.children}
+    {@render props.children()}
+  {:else}
+    {colorPicker().getChannelValueText(channelProps().channel, locale().locale)}
+  {/if}
+</Ark>

package/dist/components/color-picker/color-picker-channel-slider-value-text.svelte.d.ts

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

package/dist/components/color-picker/color-picker-channel-slider.svelte

@@ -0,0 +1,31 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { ChannelProps } from '@zag-js/color-picker'
+
+  export interface ColorPickerChannelSliderBaseProps extends ChannelProps, PolymorphicProps<'div'> {}
+  export interface ColorPickerChannelSliderProps extends Assign<HTMLProps<'div'>, ColorPickerChannelSliderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { ColorPickerChannelPropsProvider } from './use-color-picker-channel-props-context'
+  import { useColorPickerContext } from './use-color-picker-context'
+  import { useColorPickerFormatPropsContext } from './use-color-picker-format-context'
+
+  const props: ColorPickerChannelSliderProps = $props()
+
+  const [channelProps, localProps] = $derived(createSplitProps<ChannelProps>()(props, ['channel', 'orientation']))
+
+  const colorPicker = useColorPickerContext()
+
+  const formatProps = useColorPickerFormatPropsContext()
+  const channelSliderProps = $derived({ ...channelProps, ...formatProps() })
+
+  const mergedProps = $derived(mergeProps(colorPicker().getChannelSliderProps(channelSliderProps), localProps))
+
+  ColorPickerChannelPropsProvider(() => channelProps)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/color-picker/color-picker-channel-slider.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { ChannelProps } from '@zag-js/color-picker';
+export interface ColorPickerChannelSliderBaseProps extends ChannelProps, PolymorphicProps<'div'> {
+}
+export interface ColorPickerChannelSliderProps extends Assign<HTMLProps<'div'>, ColorPickerChannelSliderBaseProps> {
+}
+declare const ColorPickerChannelSlider: import("svelte").Component<ColorPickerChannelSliderProps, {}, "">;
+type ColorPickerChannelSlider = ReturnType<typeof ColorPickerChannelSlider>;
+export default ColorPickerChannelSlider;

package/dist/components/color-picker/color-picker-content.svelte

@@ -0,0 +1,28 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface ColorPickerContentBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface ColorPickerContentProps extends Assign<HTMLProps<'div'>, ColorPickerContentBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePresenceContext } from '../presence'
+  import { useColorPickerContext } from './use-color-picker-context'
+
+  let { ref = $bindable<Element | null>(), ...props }: ColorPickerContentProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const presence = usePresenceContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getContentProps(), presence().getPresenceProps(), props))
+
+  function setNode(node: Element | null) {
+    presence().setNode(node)
+    ref = node
+  }
+</script>
+
+{#if !presence().unmounted}
+  <Ark as="div" {...mergedProps} {@attach setNode} />
+{/if}

package/dist/components/color-picker/color-picker-content.svelte.d.ts

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

package/dist/components/color-picker/color-picker-context.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseColorPickerContext } from './use-color-picker-context'
+
+  export interface ColorPickerContextProps {
+    render: Snippet<[UseColorPickerContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useColorPickerContext } from './use-color-picker-context'
+
+  const { render }: ColorPickerContextProps = $props()
+
+  const context = useColorPickerContext()
+</script>
+
+{@render render(context)}

package/dist/components/color-picker/color-picker-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseColorPickerContext } from './use-color-picker-context';
+export interface ColorPickerContextProps {
+    render: Snippet<[UseColorPickerContext]>;
+}
+declare const ColorPickerContext: import("svelte").Component<ColorPickerContextProps, {}, "">;
+type ColorPickerContext = ReturnType<typeof ColorPickerContext>;
+export default ColorPickerContext;

package/dist/components/color-picker/color-picker-control.svelte

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

package/dist/components/color-picker/color-picker-control.svelte.d.ts

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

package/dist/components/color-picker/color-picker-eye-dropper-trigger.svelte

@@ -0,0 +1,20 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ColorPickerEyeDropperTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface ColorPickerEyeDropperTriggerProps
+    extends Assign<HTMLProps<'button'>, ColorPickerEyeDropperTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+
+  const props: ColorPickerEyeDropperTriggerProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getEyeDropperTriggerProps(), props))
+</script>
+
+<Ark as="button" {...mergedProps} />

package/dist/components/color-picker/color-picker-eye-dropper-trigger.svelte.d.ts

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

package/dist/components/color-picker/color-picker-format-select.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ColorPickerFormatSelectBaseProps extends PolymorphicProps<'select'> {}
+  export interface ColorPickerFormatSelectProps extends Assign<HTMLProps<'select'>, ColorPickerFormatSelectBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+
+  const props: ColorPickerFormatSelectProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getFormatSelectProps(), props))
+</script>
+
+<Ark as="select" {...mergedProps} value={colorPicker().format}>
+  {#each ['rgba', 'hsla', 'hsba'] as format}
+    <option value={format}>{format}</option>
+  {/each}
+</Ark>

package/dist/components/color-picker/color-picker-format-select.svelte.d.ts

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

package/dist/components/color-picker/color-picker-format-trigger.svelte

@@ -0,0 +1,20 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ColorPickerFormatTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface ColorPickerFormatTriggerProps
+    extends Assign<HTMLProps<'button'>, ColorPickerFormatTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+
+  const props: ColorPickerFormatTriggerProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getFormatTriggerProps(), props))
+</script>
+
+<Ark as="button" {...mergedProps} />

package/dist/components/color-picker/color-picker-format-trigger.svelte.d.ts

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