ui-ingredients 0.0.36 → 0.0.38

package/dist/color-picker/root.svelte

@@ -14,60 +14,45 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {colorPickerContext} from './context.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {setColorPickerContext} from './context.svelte.js';
   import {createColorPicker} from './create-color-picker.svelte.js';
 
-  let {
-    id,
-    ids,
-    open,
-    name,
-    value,
-    format,
-    disabled,
-    required,
-    readOnly,
-    defaultOpen,
-    positioning,
-    onOpenChange,
-    closeOnSelect,
-    initialFocusEl,
-    onValueChange,
-    onValueChangeEnd,
-    onFocusOutside,
-    onFormatChange,
-    onInteractOutside,
-    onPointerDownOutside,
-    children,
-    ...props
-  }: ColorPickerProps = $props();
+  let {children, ...props}: ColorPickerProps = $props();
 
-  let colorPicker = createColorPicker({
-    id,
-    ids,
-    open,
-    name,
-    value,
-    format,
-    disabled,
-    required,
-    readOnly,
-    defaultOpen,
-    positioning,
-    onOpenChange,
-    closeOnSelect,
-    initialFocusEl,
-    onValueChange,
-    onValueChangeEnd,
-    onFocusOutside,
-    onFormatChange,
-    onInteractOutside,
-    onPointerDownOutside,
-  });
+  let [colorPickerProps, otherProps] = $derived(
+    createSplitProps<CreateColorPickerProps>([
+      'id',
+      'ids',
+      'open',
+      'name',
+      'value',
+      'format',
+      'disabled',
+      'required',
+      'readOnly',
+      'defaultOpen',
+      'positioning',
+      'onOpenChange',
+      'closeOnSelect',
+      'initialFocusEl',
+      'onValueChange',
+      'onValueChangeEnd',
+      'onFocusOutside',
+      'onFormatChange',
+      'onInteractOutside',
+      'onPointerDownOutside',
+    ])(props),
+  );
 
-  let mergedProps = $derived(mergeProps(props, colorPicker.getRootProps()));
+  let colorPicker = createColorPicker(reflect(() => colorPickerProps));
 
-  colorPickerContext.set(colorPicker);
+  let mergedProps = $derived(
+    mergeProps(otherProps, colorPicker.getRootProps()),
+  );
+
+  setColorPickerContext(colorPicker);
 </script>
 
 <div {...mergedProps}>

package/dist/color-picker/swatch-group.svelte

@@ -6,11 +6,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {colorPickerContext} from './context.svelte.js';
+  import {getColorPickerContext} from './context.svelte.js';
 
   let {children, ...props}: ColorPickerSwatchGroupProps = $props();
 
-  let colorPicker = colorPickerContext.get();
+  let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(
     mergeProps(props, colorPicker.getSwatchGroupProps()),

package/dist/color-picker/swatch-indicator.svelte

@@ -7,14 +7,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    colorPickerContext,
-    colorPickerSwatchPropsContext,
+    getColorPickerContext,
+    getColorPickerSwatchPropsContext,
   } from './context.svelte.js';
 
   let {children, ...props}: ColorPickerSwatchIndicatorProps = $props();
 
-  let colorPicker = colorPickerContext.get();
-  let swatchProps = colorPickerSwatchPropsContext.get();
+  let colorPicker = getColorPickerContext();
+  let swatchProps = getColorPickerSwatchPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, colorPicker.getSwatchIndicatorProps(swatchProps)),

package/dist/color-picker/swatch-trigger.svelte

@@ -9,14 +9,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    colorPickerContext,
-    colorPickerSwatchPropsContext,
+    getColorPickerContext,
+    getColorPickerSwatchPropsContext,
   } from './context.svelte.js';
 
   let {disabled, children, ...props}: ColorPickerSwatchTriggerProps = $props();
 
-  let colorPicker = colorPickerContext.get();
-  let swatchProps = colorPickerSwatchPropsContext.get();
+  let colorPicker = getColorPickerContext();
+  let swatchProps = getColorPickerSwatchPropsContext();
 
   let mergedProps = $derived(
     mergeProps(

package/dist/color-picker/swatch.svelte

@@ -9,14 +9,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    colorPickerContext,
-    colorPickerSwatchPropsContext,
+    getColorPickerContext,
+    setColorPickerSwatchPropsContext,
   } from './context.svelte.js';
 
   let {value, respectAlpha, children, ...props}: ColorPickerSwatchProps =
     $props();
 
-  let colorPicker = colorPickerContext.get();
+  let colorPicker = getColorPickerContext();
   let swatchProps: SwatchProps = $derived({
     value,
     respectAlpha,
@@ -26,7 +26,7 @@
     mergeProps(props, colorPicker.getSwatchProps(swatchProps)),
   );
 
-  colorPickerSwatchPropsContext.set(() => swatchProps);
+  setColorPickerSwatchPropsContext(() => swatchProps);
 </script>
 
 <div {...mergedProps}>

package/dist/color-picker/transparency-grid.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {colorPickerContext} from './context.svelte.js';
+  import {getColorPickerContext} from './context.svelte.js';
 
   let {size, children, ...props}: ColorPickerTransparencyGridProps = $props();
 
-  let colorPicker = colorPickerContext.get();
+  let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(
     mergeProps(

package/dist/color-picker/trigger.svelte

@@ -6,11 +6,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {colorPickerContext} from './context.svelte.js';
+  import {getColorPickerContext} from './context.svelte.js';
 
   let {children, ...props}: ColorPickerTriggerProps = $props();
 
-  let colorPicker = colorPickerContext.get();
+  let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(mergeProps(props, colorPicker.getTriggerProps()));
 </script>

package/dist/color-picker/value-text.svelte

@@ -6,11 +6,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {colorPickerContext} from './context.svelte.js';
+  import {getColorPickerContext} from './context.svelte.js';
 
   let {children, ...props}: ColorPickerValueTextProps = $props();
 
-  let colorPicker = colorPickerContext.get();
+  let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(
     mergeProps(props, colorPicker.getValueTextProps()),

package/dist/combobox/clear-trigger.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {comboboxContext} from './context.svelte.js';
+  import {getComboboxContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: ComboboxClearTriggerProps = $props();
 
-  let combobox = comboboxContext.get();
+  let combobox = getComboboxContext();
 
   let mergedProps = $derived(
     mergeProps(props, combobox.getClearTriggerProps()),

package/dist/combobox/content.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {comboboxContext} from './context.svelte.js';
+  import {getComboboxContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: ComboboxContentProps = $props();
 
-  let combobox = comboboxContext.get();
+  let combobox = getComboboxContext();
 
   let mergedProps = $derived(mergeProps(props, combobox.getContentProps()));
 </script>

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

@@ -1,6 +1,5 @@
-import { Context } from '../context.svelte.js';
 import type { ItemGroupProps, ItemProps } from '@zag-js/combobox';
 import type { CreateComboboxReturn } from './create-combobox.svelte.js';
-export declare const comboboxContext: Context<CreateComboboxReturn>;
-export declare const comboboxItemPropsContext: Context<ItemProps>;
-export declare const comboboxItemGroupPropsContext: Context<ItemGroupProps>;
+export declare const getComboboxContext: () => CreateComboboxReturn, setComboboxContext: (context: CreateComboboxReturn | (() => CreateComboboxReturn)) => void;
+export declare const getComboboxItemPropsContext: () => ItemProps, setComboboxItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
+export declare const getComboboxItemGroupPropsContext: () => ItemGroupProps, setComboboxItemGroupPropsContext: (context: ItemGroupProps | (() => ItemGroupProps)) => void;

package/dist/combobox/context.svelte.js

@@ -1,4 +1,4 @@
-import { Context } from '../context.svelte.js';
-export const comboboxContext = new Context('Combobox');
-export const comboboxItemPropsContext = new Context('ComboboxItem');
-export const comboboxItemGroupPropsContext = new Context('ComboboxItemGroup');
+import { createContext } from '../create-context.svelte.js';
+export const [getComboboxContext, setComboboxContext] = createContext('Combobox');
+export const [getComboboxItemPropsContext, setComboboxItemPropsContext] = createContext('ComboboxItem');
+export const [getComboboxItemGroupPropsContext, setComboboxItemGroupPropsContext,] = createContext('ComboboxItemGroup');

package/dist/combobox/control.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {comboboxContext} from './context.svelte.js';
+  import {getComboboxContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: ComboboxControlProps = $props();
 
-  let combobox = comboboxContext.get();
+  let combobox = getComboboxContext();
 
   let mergedProps = $derived(mergeProps(props, combobox.getControlProps()));
 </script>

package/dist/combobox/create-combobox.svelte.d.ts

@@ -1,12 +1,10 @@
 import * as combobox from '@zag-js/combobox';
-export interface CreateComboboxProps<T> extends Omit<combobox.Context, 'id' | 'dir' | 'collection' | 'getRootNode' | 'open.controlled'> {
+type Omitted = 'id' | 'dir' | 'collection' | 'getRootNode' | 'open.controlled';
+export interface CreateComboboxProps<T> extends combobox.CollectionOptions<T>, Omit<combobox.Context, Omitted> {
     id?: string | null;
-    items: T[];
-    itemToString?: (item: T) => string;
-    itemToValue?: (item: T) => string;
-    isItemDisabled?: (item: T) => boolean;
     defaultOpen?: boolean;
 }
 export interface CreateComboboxReturn extends combobox.Api {
 }
 export declare function createCombobox<T>(props: CreateComboboxProps<T>): CreateComboboxReturn;
+export {};

package/dist/combobox/create-combobox.svelte.js

@@ -3,37 +3,50 @@ import { getFieldContext } from '../field/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as combobox from '@zag-js/combobox';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { createSplitProps } from '@zag-js/utils';
 import { uid } from 'uid';
 export function createCombobox(props) {
-    const collection = $derived(combobox.collection({
-        items: props.items,
-        itemToValue: (item) => props.itemToValue ? props.itemToValue(item) : String(item),
-        itemToString: (item) => props.itemToString ? props.itemToString(item) : String(item),
-        isItemDisabled: (item) => props.isItemDisabled ? props.isItemDisabled(item) : false,
-    }));
+    const [collectionProps, comboboxProps] = $derived(createSplitProps([
+        'items',
+        'itemToValue',
+        'itemToString',
+        'isItemDisabled',
+    ])(props));
+    const collection = $derived(combobox.collection(collectionProps));
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(combobox.machine({
+    const id = uid();
+    const context = $derived({
         ids: {
             label: field?.ids.label,
             input: field?.ids.control,
         },
         invalid: field?.invalid,
-        required: field?.required,
         disabled: field?.disabled,
         readOnly: field?.readOnly,
-        ...props,
-        id: props.id ?? uid(),
+        required: field?.required,
+        ...comboboxProps,
+        id: props.id ?? id,
         dir: locale?.dir,
         open: props.defaultOpen ?? props.open,
-        getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
+        getRootNode: environment?.getRootNode,
         collection,
+    });
+    const [state, send] = useMachine(combobox.machine(context));
+    const api = $derived(reflect(() => {
+        const o = combobox.connect(state, send, normalizeProps);
+        return {
+            ...o,
+            collection,
+            getInputProps() {
+                return {
+                    'aria-describedby': field?.['aria-describedby'],
+                    ...o.getInputProps(),
+                };
+            },
+        };
     }));
-    const api = $derived(reflect(() => ({
-        ...combobox.connect(state, send, normalizeProps),
-        collection,
-    })));
     return api;
 }

package/dist/combobox/input.svelte

@@ -7,14 +7,12 @@
 </script>
 
 <script lang="ts">
-  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
-  import {comboboxContext} from './context.svelte.js';
+  import {getComboboxContext} from './context.svelte.js';
 
   let {asChild, ...props}: ComboboxInputProps = $props();
 
-  let field = getFieldContext();
-  let combobox = comboboxContext.get();
+  let combobox = getComboboxContext();
 
   let mergedProps = $derived(mergeProps(props, combobox.getInputProps()));
 </script>
@@ -22,5 +20,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input aria-describedby={field?.['aria-describedby']} {...mergedProps} />
+  <input {...mergedProps} />
 {/if}

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

@@ -9,14 +9,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    comboboxContext,
-    comboboxItemGroupPropsContext,
+    getComboboxContext,
+    getComboboxItemGroupPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: ComboboxItemGroupLabelProps = $props();
 
-  let combobox = comboboxContext.get();
-  let itemGroupProps = comboboxItemGroupPropsContext.get();
+  let combobox = getComboboxContext();
+  let itemGroupProps = getComboboxItemGroupPropsContext();
 
   let mergedProps = $derived(
     mergeProps(

package/dist/combobox/item-group.svelte

@@ -10,13 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {uid} from 'uid';
   import {
-    comboboxContext,
-    comboboxItemGroupPropsContext,
+    getComboboxContext,
+    setComboboxItemGroupPropsContext,
   } from './context.svelte.js';
 
   let {id, asChild, children, ...props}: ComboboxItemGroupProps = $props();
 
-  let combobox = comboboxContext.get();
+  let combobox = getComboboxContext();
 
   let id_ = uid();
 
@@ -28,7 +28,7 @@
     mergeProps(props, combobox.getItemGroupProps(comboboxItemGroupProps)),
   );
 
-  comboboxItemGroupPropsContext.set(() => comboboxItemGroupProps);
+  setComboboxItemGroupPropsContext(() => comboboxItemGroupProps);
 </script>
 
 {#if asChild}

package/dist/combobox/item-indicator.svelte

@@ -8,12 +8,15 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {comboboxContext, comboboxItemPropsContext} from './context.svelte.js';
+  import {
+    getComboboxContext,
+    getComboboxItemPropsContext,
+  } from './context.svelte.js';
 
   let {asChild, children, ...props}: ComboboxItemIndicatorProps = $props();
 
-  let combobox = comboboxContext.get();
-  let itemProps = comboboxItemPropsContext.get();
+  let combobox = getComboboxContext();
+  let itemProps = getComboboxItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, combobox.getItemIndicatorProps(itemProps)),

package/dist/combobox/item-text.svelte

@@ -8,12 +8,15 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {comboboxContext, comboboxItemPropsContext} from './context.svelte.js';
+  import {
+    getComboboxContext,
+    getComboboxItemPropsContext,
+  } from './context.svelte.js';
 
   let {asChild, children, ...props}: ComboboxItemTextProps = $props();
 
-  let combobox = comboboxContext.get();
-  let itemProps = comboboxItemPropsContext.get();
+  let combobox = getComboboxContext();
+  let itemProps = getComboboxItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, combobox.getItemTextProps(itemProps)),

package/dist/combobox/item.svelte

@@ -13,11 +13,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
-  import {comboboxContext, comboboxItemPropsContext} from './context.svelte.js';
+  import {
+    getComboboxContext,
+    setComboboxItemPropsContext,
+  } from './context.svelte.js';
 
   let {asChild, children, ...props}: ComboboxItemProps = $props();
 
-  let combobox = comboboxContext.get();
+  let combobox = getComboboxContext();
 
   let [itemProps, otherProps] = $derived(
     createSplitProps<ItemProps>(['item', 'persistFocus'])(props),
@@ -28,7 +31,7 @@
     mergeProps(otherProps, combobox.getItemProps(itemProps)),
   );
 
-  comboboxItemPropsContext.set(() => itemProps);
+  setComboboxItemPropsContext(() => itemProps);
 </script>
 
 {#if asChild}

package/dist/combobox/label.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {comboboxContext} from './context.svelte.js';
+  import {getComboboxContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: ComboboxLabelProps = $props();
 
-  let combobox = comboboxContext.get();
+  let combobox = getComboboxContext();
 
   let mergedProps = $derived(mergeProps(props, combobox.getLabelProps()));
 </script>

package/dist/combobox/list.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {comboboxContext} from './context.svelte.js';
+  import {getComboboxContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: ComboboxListProps = $props();
 
-  let combobox = comboboxContext.get();
+  let combobox = getComboboxContext();
 
   let mergedProps = $derived(mergeProps(props, combobox.getListProps()));
 </script>

package/dist/combobox/positioner.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {comboboxContext} from './context.svelte.js';
+  import {getComboboxContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: ComboboxPositionerProps = $props();
 
-  let combobox = comboboxContext.get();
+  let combobox = getComboboxContext();
 
   let mergedProps = $derived(mergeProps(props, combobox.getPositionerProps()));
 </script>

package/dist/combobox/root.svelte

@@ -17,7 +17,7 @@
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
-  import {comboboxContext} from './context.svelte.js';
+  import {setComboboxContext} from './context.svelte.js';
   import {createCombobox} from './create-combobox.svelte.js';
 
   let {asChild, children, ...props}: ComboboxProps<T> = $props();
@@ -72,7 +72,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, combobox.getRootProps()));
 
-  comboboxContext.set(combobox);
+  setComboboxContext(combobox);
 </script>
 
 {#if asChild}

package/dist/combobox/trigger.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {comboboxContext} from './context.svelte.js';
+  import {getComboboxContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: ComboboxTriggerProps = $props();
 
-  let combobox = comboboxContext.get();
+  let combobox = getComboboxContext();
 
   let mergedProps = $derived(mergeProps(props, combobox.getTriggerProps()));
 </script>

package/dist/create-context.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { GenericObject } from './types.js';
+type ContextGetter<T extends GenericObject> = () => T;
+type ContextSetter<T extends GenericObject> = (context: T | (() => T)) => void;
+export declare function createContext<T extends GenericObject>(key: string, strict?: boolean): [getContext: ContextGetter<T>, setContext: ContextSetter<T>];
+export {};

package/dist/{context.svelte.js → create-context.svelte.js}

@@ -1,22 +1,16 @@
 import { reflect } from '@zag-js/svelte';
 import { getContext, hasContext, setContext } from 'svelte';
-export class Context {
-    key;
-    strict;
-    constructor(key, strict = true) {
-        this.key = key;
-        this.strict = strict;
-    }
-    get() {
-        if (this.strict && !hasContext(this.key)) {
+export function createContext(key, strict = true) {
+    function g() {
+        if (strict && !hasContext(key)) {
             const e = new Error();
             e.name = 'ContextError';
-            e.message = `No context found for '${this.key}'`;
+            e.message = `No context found for '${key}'`;
             throw e;
         }
-        return getContext(this.key);
+        return getContext(key);
     }
-    set(context) {
+    function s(context) {
         const v = $derived.by(() => {
             if (typeof context === 'function') {
                 return reflect(context);
@@ -25,6 +19,7 @@ export class Context {
                 return context;
             }
         });
-        return setContext(this.key, v);
+        setContext(key, v);
     }
+    return [g, s];
 }

package/dist/date-picker/clear-trigger.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {datePickerContext} from './context.svelte.js';
+  import {getDatePickerContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: DatePickerClearTriggerProps = $props();
 
-  let datePicker = datePickerContext.get();
+  let datePicker = getDatePickerContext();
 
   let mergedProps = $derived(
     mergeProps(props, datePicker.getClearTriggerProps()),