@ark-ui/svelte 0.4.0 → 5.0.0-0

package/dist/components/color-picker/index.d.ts

@@ -0,0 +1,41 @@
+export { parse as parseColor } from '@zag-js/color-picker';
+export type { Color as ColorPickerColor, ColorFormat as ColorPickerColorFormat, FormatChangeDetails as ColorPickerFormatChangeDetails, OpenChangeDetails as ColorPickerOpenChangeDetails, ValueChangeDetails as ColorPickerValueChangeDetails, } from '@zag-js/color-picker';
+export { default as ColorPickerArea, type ColorPickerAreaBaseProps, type ColorPickerAreaProps, } from './color-picker-area.svelte';
+export { default as ColorPickerAreaBackground, type ColorPickerAreaBackgroundBaseProps, type ColorPickerAreaBackgroundProps, } from './color-picker-area-background.svelte';
+export { default as ColorPickerAreaThumb, type ColorPickerAreaThumbBaseProps, type ColorPickerAreaThumbProps, } from './color-picker-area-thumb.svelte';
+export { default as ColorPickerChannelInput, type ColorPickerChannelInputBaseProps, type ColorPickerChannelInputProps, } from './color-picker-channel-input.svelte';
+export { default as ColorPickerChannelSlider, type ColorPickerChannelSliderBaseProps, type ColorPickerChannelSliderProps, } from './color-picker-channel-slider.svelte';
+export { default as ColorPickerChannelSliderLabel, type ColorPickerChannelSliderLabelBaseProps, type ColorPickerChannelSliderLabelProps, } from './color-picker-channel-slider-label.svelte';
+export { default as ColorPickerChannelSliderThumb, type ColorPickerChannelSliderThumbBaseProps, type ColorPickerChannelSliderThumbProps, } from './color-picker-channel-slider-thumb.svelte';
+export { default as ColorPickerChannelSliderTrack, type ColorPickerChannelSliderTrackBaseProps, type ColorPickerChannelSliderTrackProps, } from './color-picker-channel-slider-track.svelte';
+export { default as ColorPickerChannelSliderValueText, type ColorPickerChannelSliderValueTextBaseProps, type ColorPickerChannelSliderValueTextProps, } from './color-picker-channel-slider-value-text.svelte';
+export { default as ColorPickerContext, type ColorPickerContextProps } from './color-picker-context.svelte';
+export { default as ColorPickerContent, type ColorPickerContentBaseProps, type ColorPickerContentProps, } from './color-picker-content.svelte';
+export { default as ColorPickerControl, type ColorPickerControlBaseProps, type ColorPickerControlProps, } from './color-picker-control.svelte';
+export { default as ColorPickerEyeDropperTrigger, type ColorPickerEyeDropperTriggerBaseProps, type ColorPickerEyeDropperTriggerProps, } from './color-picker-eye-dropper-trigger.svelte';
+export { default as ColorPickerFormatSelect, type ColorPickerFormatSelectBaseProps, type ColorPickerFormatSelectProps, } from './color-picker-format-select.svelte';
+export { default as ColorPickerFormatTrigger, type ColorPickerFormatTriggerBaseProps, type ColorPickerFormatTriggerProps, } from './color-picker-format-trigger.svelte';
+export { default as ColorPickerHiddenInput, type ColorPickerHiddenInputBaseProps, type ColorPickerHiddenInputProps, } from './color-picker-hidden-input.svelte';
+export { default as ColorPickerLabel, type ColorPickerLabelBaseProps, type ColorPickerLabelProps, } from './color-picker-label.svelte';
+export { default as ColorPickerPositioner, type ColorPickerPositionerBaseProps, type ColorPickerPositionerProps, } from './color-picker-positioner.svelte';
+export { default as ColorPickerRoot, type ColorPickerRootBaseProps, type ColorPickerRootProps, } from './color-picker-root.svelte';
+export { default as ColorPickerRootProvider, type ColorPickerRootProviderBaseProps, type ColorPickerRootProviderProps, } from './color-picker-root-provider.svelte';
+export { default as ColorPickerSwatch, type ColorPickerSwatchBaseProps, type ColorPickerSwatchProps, } from './color-picker-swatch.svelte';
+export { default as ColorPickerSwatchGroup, type ColorPickerSwatchGroupBaseProps, type ColorPickerSwatchGroupProps, } from './color-picker-swatch-group.svelte';
+export { default as ColorPickerSwatchIndicator, type ColorPickerSwatchIndicatorBaseProps, type ColorPickerSwatchIndicatorProps, } from './color-picker-swatch-indicator.svelte';
+export { default as ColorPickerSwatchTrigger, type ColorPickerSwatchTriggerBaseProps, type ColorPickerSwatchTriggerProps, } from './color-picker-swatch-trigger.svelte';
+export { default as ColorPickerTransparencyGrid, type ColorPickerTransparencyGridBaseProps, type ColorPickerTransparencyGridProps, } from './color-picker-transparency-grid.svelte';
+export { default as ColorPickerTrigger, type ColorPickerTriggerBaseProps, type ColorPickerTriggerProps, } from './color-picker-trigger.svelte';
+export { default as ColorPickerValueSwatch, type ColorPickerValueSwatchBaseProps, type ColorPickerValueSwatchProps, } from './color-picker-value-swatch.svelte';
+export { default as ColorPickerValueText, type ColorPickerValueTextBaseProps, type ColorPickerValueTextProps, } from './color-picker-value-text.svelte';
+export { default as ColorPickerView, type ColorPickerViewBaseProps, type ColorPickerViewProps, } from './color-picker-view.svelte';
+export { colorPickerAnatomy } from './color-picker.anatomy';
+export { ColorPickerProvider, useColorPickerContext } from './use-color-picker-context';
+export type { UseColorPickerContext } from './use-color-picker-context';
+export { ColorPickerChannelPropsProvider, useColorPickerChannelPropsContext, } from './use-color-picker-channel-props-context';
+export type { UseColorPickerChannelPropsContext } from './use-color-picker-channel-props-context';
+export { ColorPickerSwatchPropsProvider, useColorPickerSwatchPropsContext, } from './use-color-picker-swatch-props-context';
+export type { UseColorPickerSwatchPropsContext } from './use-color-picker-swatch-props-context';
+export { useColorPicker } from './use-color-picker.svelte';
+export type { UseColorPickerProps, UseColorPickerReturn } from './use-color-picker.svelte';
+export * as ColorPicker from './color-picker';

package/dist/components/color-picker/index.js

@@ -0,0 +1,36 @@
+export { parse as parseColor } from '@zag-js/color-picker';
+export { default as ColorPickerArea, } from './color-picker-area.svelte';
+export { default as ColorPickerAreaBackground, } from './color-picker-area-background.svelte';
+export { default as ColorPickerAreaThumb, } from './color-picker-area-thumb.svelte';
+export { default as ColorPickerChannelInput, } from './color-picker-channel-input.svelte';
+export { default as ColorPickerChannelSlider, } from './color-picker-channel-slider.svelte';
+export { default as ColorPickerChannelSliderLabel, } from './color-picker-channel-slider-label.svelte';
+export { default as ColorPickerChannelSliderThumb, } from './color-picker-channel-slider-thumb.svelte';
+export { default as ColorPickerChannelSliderTrack, } from './color-picker-channel-slider-track.svelte';
+export { default as ColorPickerChannelSliderValueText, } from './color-picker-channel-slider-value-text.svelte';
+export { default as ColorPickerContext } from './color-picker-context.svelte';
+export { default as ColorPickerContent, } from './color-picker-content.svelte';
+export { default as ColorPickerControl, } from './color-picker-control.svelte';
+export { default as ColorPickerEyeDropperTrigger, } from './color-picker-eye-dropper-trigger.svelte';
+export { default as ColorPickerFormatSelect, } from './color-picker-format-select.svelte';
+export { default as ColorPickerFormatTrigger, } from './color-picker-format-trigger.svelte';
+export { default as ColorPickerHiddenInput, } from './color-picker-hidden-input.svelte';
+export { default as ColorPickerLabel, } from './color-picker-label.svelte';
+export { default as ColorPickerPositioner, } from './color-picker-positioner.svelte';
+export { default as ColorPickerRoot, } from './color-picker-root.svelte';
+export { default as ColorPickerRootProvider, } from './color-picker-root-provider.svelte';
+export { default as ColorPickerSwatch, } from './color-picker-swatch.svelte';
+export { default as ColorPickerSwatchGroup, } from './color-picker-swatch-group.svelte';
+export { default as ColorPickerSwatchIndicator, } from './color-picker-swatch-indicator.svelte';
+export { default as ColorPickerSwatchTrigger, } from './color-picker-swatch-trigger.svelte';
+export { default as ColorPickerTransparencyGrid, } from './color-picker-transparency-grid.svelte';
+export { default as ColorPickerTrigger, } from './color-picker-trigger.svelte';
+export { default as ColorPickerValueSwatch, } from './color-picker-value-swatch.svelte';
+export { default as ColorPickerValueText, } from './color-picker-value-text.svelte';
+export { default as ColorPickerView, } from './color-picker-view.svelte';
+export { colorPickerAnatomy } from './color-picker.anatomy';
+export { ColorPickerProvider, useColorPickerContext } from './use-color-picker-context';
+export { ColorPickerChannelPropsProvider, useColorPickerChannelPropsContext, } from './use-color-picker-channel-props-context';
+export { ColorPickerSwatchPropsProvider, useColorPickerSwatchPropsContext, } from './use-color-picker-swatch-props-context';
+export { useColorPicker } from './use-color-picker.svelte';
+export * as ColorPicker from './color-picker';

package/dist/components/color-picker/split-color-picker-props.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { UseColorPickerProps } from './use-color-picker.svelte';
+export declare const splitColorPickerProps: <T extends UseColorPickerProps>(props: T) => [UseColorPickerProps, Omit<T, "name" | "defaultValue" | "value" | "open" | "ids" | "defaultOpen" | "onOpenChange" | "disabled" | "id" | "onValueChange" | "readOnly" | "invalid" | "required" | "onValueChangeEnd" | "positioning" | "initialFocusEl" | "format" | "defaultFormat" | "onFormatChange" | "closeOnSelect" | "openAutoFocus" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside">];

package/dist/components/color-picker/split-color-picker-props.svelte.js

@@ -0,0 +1,28 @@
+import { createSplitProps } from '../../utils/create-split-props';
+const splitFn = createSplitProps();
+export const splitColorPickerProps = (props) => splitFn(props, [
+    'closeOnSelect',
+    'defaultOpen',
+    'defaultValue',
+    'defaultFormat',
+    'disabled',
+    'format',
+    'id',
+    'ids',
+    'initialFocusEl',
+    'invalid',
+    'name',
+    'onFocusOutside',
+    'onFormatChange',
+    'onInteractOutside',
+    'onOpenChange',
+    'onPointerDownOutside',
+    'onValueChange',
+    'onValueChangeEnd',
+    'open',
+    'openAutoFocus',
+    'positioning',
+    'readOnly',
+    'required',
+    'value',
+]);

package/dist/components/color-picker/use-color-picker-area-props-context.d.ts

@@ -0,0 +1,5 @@
+import type { Accessor } from '../../types';
+import type { AreaProps } from '@zag-js/color-picker';
+export interface UseColorPickerAreaPropsContext extends Accessor<AreaProps> {
+}
+export declare const ColorPickerAreaPropsProvider: (opts: UseColorPickerAreaPropsContext) => void, useColorPickerAreaPropsContext: (fallback?: UseColorPickerAreaPropsContext | undefined) => UseColorPickerAreaPropsContext;

package/dist/components/color-picker/use-color-picker-area-props-context.js

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

package/dist/components/color-picker/use-color-picker-channel-props-context.d.ts

@@ -0,0 +1,5 @@
+import type { Accessor } from '../../types';
+import type { ChannelProps } from '@zag-js/color-picker';
+export interface UseColorPickerChannelPropsContext extends Accessor<ChannelProps> {
+}
+export declare const ColorPickerChannelPropsProvider: (opts: UseColorPickerChannelPropsContext) => void, useColorPickerChannelPropsContext: (fallback?: UseColorPickerChannelPropsContext | undefined) => UseColorPickerChannelPropsContext;

package/dist/components/color-picker/use-color-picker-channel-props-context.js

@@ -0,0 +1,7 @@
+import { createContext } from '../../utils/create-context';
+export const [ColorPickerChannelPropsProvider, useColorPickerChannelPropsContext] = createContext({
+    name: 'ColorPickerChannelPropsContext',
+    hookName: 'useColorPickerChannelPropsContext',
+    providerName: '<ColorPickerChannelPropsProvider />',
+    strict: false,
+});

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

@@ -0,0 +1,4 @@
+import type { UseColorPickerReturn } from './use-color-picker.svelte';
+export interface UseColorPickerContext extends UseColorPickerReturn {
+}
+export declare const ColorPickerProvider: (opts: UseColorPickerContext) => void, useColorPickerContext: (fallback?: UseColorPickerContext | undefined) => UseColorPickerContext;

package/dist/components/color-picker/use-color-picker-context.js

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

package/dist/components/color-picker/use-color-picker-format-context.d.ts

@@ -0,0 +1,7 @@
+import type { Accessor } from '../../types';
+import type { ColorFormat } from '@zag-js/color-picker';
+export interface UseColorPickerFormatPropsContext extends Accessor<{
+    format?: ColorFormat;
+}> {
+}
+export declare const ColorPickerFormatPropsProvider: (opts: UseColorPickerFormatPropsContext) => void, useColorPickerFormatPropsContext: (fallback?: UseColorPickerFormatPropsContext | undefined) => UseColorPickerFormatPropsContext;

package/dist/components/color-picker/use-color-picker-format-context.js

@@ -0,0 +1,9 @@
+import { createContext } from '../../utils/create-context';
+const EMPTY_OBJ = {};
+export const [ColorPickerFormatPropsProvider, useColorPickerFormatPropsContext] = createContext({
+    name: 'ColorPickerFormatContext',
+    hookName: 'useColorPickerFormatPropsContext',
+    providerName: '<ColorPickerFormatPropsProvider />',
+    strict: false,
+    defaultValue: () => EMPTY_OBJ,
+});

package/dist/components/color-picker/use-color-picker-swatch-props-context.d.ts

@@ -0,0 +1,5 @@
+import type { Accessor } from '../../types';
+import type { SwatchProps } from '@zag-js/color-picker';
+export interface UseColorPickerSwatchPropsContext extends Accessor<SwatchProps> {
+}
+export declare const ColorPickerSwatchPropsProvider: (opts: UseColorPickerSwatchPropsContext) => void, useColorPickerSwatchPropsContext: (fallback?: UseColorPickerSwatchPropsContext | undefined) => UseColorPickerSwatchPropsContext;

package/dist/components/color-picker/use-color-picker-swatch-props-context.js

@@ -0,0 +1,7 @@
+import { createContext } from '../../utils/create-context';
+export const [ColorPickerSwatchPropsProvider, useColorPickerSwatchPropsContext] = createContext({
+    name: 'ColorPickerSwatchPropsContext',
+    hookName: 'useColorPickerSwatchPropsContext',
+    providerName: '<ColorPickerSwatchPropsProvider />',
+    strict: false,
+});

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

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

package/dist/components/color-picker/use-color-picker.svelte.js

@@ -0,0 +1,30 @@
+import { useEnvironmentContext } from '../../providers/environment';
+import { useLocaleContext } from '../../providers/locale';
+import * as colorPicker from '@zag-js/color-picker';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { runIfFn } from '@zag-js/utils';
+import { useFieldContext } from '../field';
+export const useColorPicker = (props = {}) => {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const field = useFieldContext();
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        return {
+            ids: {
+                label: field?.()?.ids.label,
+                hiddenInput: field?.()?.ids.control,
+            },
+            dir: locale().dir,
+            disabled: field?.()?.disabled,
+            readOnly: field?.()?.readOnly,
+            invalid: field?.()?.invalid,
+            required: field?.()?.required,
+            getRootNode: env().getRootNode,
+            ...resolvedProps,
+        };
+    });
+    const service = useMachine(colorPicker.machine, () => machineProps);
+    const api = $derived(colorPicker.connect(service, normalizeProps));
+    return () => api;
+};

package/dist/components/combobox/combobox-clear-trigger.svelte

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

package/dist/components/combobox/combobox-clear-trigger.svelte.d.ts

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

package/dist/components/combobox/combobox-content.svelte

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

package/dist/components/combobox/combobox-content.svelte.d.ts

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

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

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { CollectionItem } from '../collection'
+  import type { UseComboboxContext } from './use-combobox-context'
+
+  export interface ComboboxContextProps<T extends CollectionItem> {
+    render: Snippet<[UseComboboxContext<T>]>
+  }
+</script>
+
+<script lang="ts" generics="T extends CollectionItem">
+  import { useComboboxContext } from './use-combobox-context'
+
+  const { render }: ComboboxContextProps<T> = $props()
+
+  const context = useComboboxContext()
+</script>
+
+{@render render(context)}

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

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { CollectionItem } from '../collection';
+import type { UseComboboxContext } from './use-combobox-context';
+export interface ComboboxContextProps<T extends CollectionItem> {
+    render: Snippet<[UseComboboxContext<T>]>;
+}
+declare class __sveltets_Render<T extends CollectionItem> {
+    props(): ComboboxContextProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends CollectionItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends CollectionItem>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ComboboxContext: $$IsomorphicComponent;
+type ComboboxContext<T extends CollectionItem> = InstanceType<typeof ComboboxContext<T>>;
+export default ComboboxContext;

package/dist/components/combobox/combobox-control.svelte

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

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

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

package/dist/components/combobox/combobox-input.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ComboboxInputBaseProps extends PolymorphicProps<'input'> {}
+  export interface ComboboxInputProps extends Assign<HTMLProps<'input'>, ComboboxInputBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useComboboxContext } from './use-combobox-context'
+
+  const props: ComboboxInputProps = $props()
+
+  const combobox = useComboboxContext()
+  const mergedProps = $derived(mergeProps(combobox().getInputProps(), props))
+</script>
+
+<Ark as="input" {...mergedProps} />

package/dist/components/combobox/combobox-input.svelte.d.ts

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

package/dist/components/combobox/combobox-item-context.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseComboboxItemContext } from './use-combobox-item-context'
+
+  export interface ComboboxItemContextProps {
+    render: Snippet<[UseComboboxItemContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useComboboxItemContext } from './use-combobox-item-context'
+
+  const { render }: ComboboxItemContextProps = $props()
+
+  const context = useComboboxItemContext()
+</script>
+
+{@render render(context)}

package/dist/components/combobox/combobox-item-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseComboboxItemContext } from './use-combobox-item-context';
+export interface ComboboxItemContextProps {
+    render: Snippet<[UseComboboxItemContext]>;
+}
+declare const ComboboxItemContext: import("svelte").Component<ComboboxItemContextProps, {}, "">;
+type ComboboxItemContext = ReturnType<typeof ComboboxItemContext>;
+export default ComboboxItemContext;

package/dist/components/combobox/combobox-item-group-label.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ComboboxItemGroupLabelBaseProps extends PolymorphicProps<'div'> {}
+  export interface ComboboxItemGroupLabelProps extends Assign<HTMLProps<'div'>, ComboboxItemGroupLabelBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useComboboxContext } from './use-combobox-context'
+  import { useComboboxItemGroupPropsContext } from './use-combobox-item-group-props-context'
+
+  const props: ComboboxItemGroupLabelProps = $props()
+
+  const combobox = useComboboxContext()
+  const groupProps = useComboboxItemGroupPropsContext()
+
+  const mergedProps = $derived(mergeProps(combobox().getItemGroupLabelProps({ htmlFor: groupProps().id }), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/combobox/combobox-item-group-label.svelte.d.ts

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

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

@@ -0,0 +1,29 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { ItemGroupProps } from '@zag-js/combobox'
+
+  export interface ComboboxItemGroupBaseProps extends Partial<ItemGroupProps>, PolymorphicProps<'div'> {}
+  export interface ComboboxItemGroupProps extends Assign<HTMLProps<'div'>, ComboboxItemGroupBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useComboboxContext } from './use-combobox-context'
+  import { ComboboxItemGroupPropsProvider } from './use-combobox-item-group-props-context'
+
+  const props: ComboboxItemGroupProps = $props()
+  const providedId = $props.id()
+
+  const [itemGroupProps, localProps] = $derived(createSplitProps<Partial<ItemGroupProps>>()(props, ['id']))
+
+  const groupProps = $derived({ ...itemGroupProps, id: itemGroupProps.id ?? providedId })
+
+  const combobox = useComboboxContext()
+  const mergedProps = $derived(mergeProps(combobox().getItemGroupProps(groupProps), localProps))
+
+  ComboboxItemGroupPropsProvider(() => groupProps)
+</script>
+
+<Ark as="div" {...mergedProps} />

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

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { ItemGroupProps } from '@zag-js/combobox';
+export interface ComboboxItemGroupBaseProps extends Partial<ItemGroupProps>, PolymorphicProps<'div'> {
+}
+export interface ComboboxItemGroupProps extends Assign<HTMLProps<'div'>, ComboboxItemGroupBaseProps> {
+}
+declare const ComboboxItemGroup: import("svelte").Component<ComboboxItemGroupProps, {}, "">;
+type ComboboxItemGroup = ReturnType<typeof ComboboxItemGroup>;
+export default ComboboxItemGroup;

package/dist/components/combobox/combobox-item-indicator.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ComboboxItemIndicatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface ComboboxItemIndicatorProps extends Assign<HTMLProps<'div'>, ComboboxItemIndicatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useComboboxContext } from './use-combobox-context'
+  import { useComboboxItemPropsContext } from './use-combobox-item-props-context'
+
+  const props: ComboboxItemIndicatorProps = $props()
+
+  const combobox = useComboboxContext()
+  const itemProps = useComboboxItemPropsContext()
+  const mergedProps = $derived(mergeProps(combobox().getItemIndicatorProps(itemProps()), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/combobox/combobox-item-indicator.svelte.d.ts

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

package/dist/components/combobox/combobox-item-text.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ComboboxItemTextBaseProps extends PolymorphicProps<'span'> {}
+  export interface ComboboxItemTextProps extends Assign<HTMLProps<'span'>, ComboboxItemTextBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useComboboxContext } from './use-combobox-context'
+  import { useComboboxItemPropsContext } from './use-combobox-item-props-context'
+
+  const props: ComboboxItemTextProps = $props()
+
+  const combobox = useComboboxContext()
+  const itemProps = useComboboxItemPropsContext()
+  const mergedProps = $derived(mergeProps(combobox().getItemTextProps(itemProps()), props))
+</script>
+
+<Ark as="span" {...mergedProps} />

package/dist/components/combobox/combobox-item-text.svelte.d.ts

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

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

@@ -0,0 +1,33 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ComboboxItemBaseProps extends PolymorphicProps<'div'> {
+    item: unknown
+    persistFocus?: boolean
+  }
+  export interface ComboboxItemProps extends Assign<HTMLProps<'div'>, ComboboxItemBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Ark } from '../factory'
+  import { useComboboxContext } from './use-combobox-context'
+  import { ComboboxItemProvider } from './use-combobox-item-context'
+  import { ComboboxItemPropsProvider } from './use-combobox-item-props-context'
+
+  const props: ComboboxItemProps = $props()
+
+  const [itemProps, localProps] = $derived(
+    createSplitProps<{ item: any; persistFocus?: boolean }>()(props, ['item', 'persistFocus']),
+  )
+
+  const combobox = useComboboxContext()
+  const itemState = $derived(combobox().getItemState(itemProps))
+  const mergedProps = $derived(mergeProps(combobox().getItemProps(itemProps), localProps))
+
+  ComboboxItemProvider(() => itemState)
+  ComboboxItemPropsProvider(() => itemProps)
+</script>
+
+<Ark as="div" {...mergedProps} />