ui-ingredients 0.0.65 → 0.0.67

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

@@ -23,18 +23,18 @@
 
   let mergedProps = $derived(
     mergeProps(
-      props,
       colorPicker.getContentProps(),
       presence.getPresenceProps(),
+      props,
     ),
   );
 </script>
 
 {#if presence.mounted}
   {#if asChild}
-    {@render asChild(presence.ref, mergedProps)}
+    {@render asChild(presence.setReference, mergedProps)}
   {:else}
-    <div bind:this={ref} use:presence.ref {...mergedProps}>
+    <div bind:this={ref} use:presence.setReference {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

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

@@ -1,15 +1,13 @@
 import type { AreaProps, ChannelProps, ColorFormat, SwatchProps } from '@zag-js/color-picker';
 import type { CreateColorPickerReturn } from './create-color-picker.svelte.js';
-export declare const getColorPickerContext: () => CreateColorPickerReturn, setColorPickerContext: (context: CreateColorPickerReturn | (() => CreateColorPickerReturn)) => CreateColorPickerReturn;
-export declare const getColorPickerAreaPropsContext: () => AreaProps, setColorPickerAreaPropsContext: (context: AreaProps | (() => AreaProps)) => AreaProps;
-export declare const getColorPickerSwatchPropsContext: () => SwatchProps, setColorPickerSwatchPropsContext: (context: SwatchProps | (() => SwatchProps)) => SwatchProps;
+export declare const getColorPickerContext: () => CreateColorPickerReturn, setColorPickerContext: (context: CreateColorPickerReturn | (() => CreateColorPickerReturn)) => void;
+export declare const getColorPickerAreaPropsContext: () => AreaProps, setColorPickerAreaPropsContext: (context: AreaProps | (() => AreaProps)) => void;
+export declare const getColorPickerSwatchPropsContext: () => SwatchProps, setColorPickerSwatchPropsContext: (context: SwatchProps | (() => SwatchProps)) => void;
 export declare const getColorPickerFormatPropsContext: () => {
     format: ColorFormat;
-}, setColorPickerFormatPropsContext: (context: {
+} | undefined, setColorPickerFormatPropsContext: (context: {
     format: ColorFormat;
 } | (() => {
     format: ColorFormat;
-})) => {
-    format: ColorFormat;
-};
-export declare const getColorPickerChannelPropsContext: () => ChannelProps, setColorPickerChannelPropsContext: (context: ChannelProps | (() => ChannelProps)) => ChannelProps;
+})) => void;
+export declare const getColorPickerChannelPropsContext: () => ChannelProps, setColorPickerChannelPropsContext: (context: ChannelProps | (() => ChannelProps)) => void;

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

@@ -18,7 +18,7 @@
 
   let colorPicker = getColorPickerContext();
 
-  let mergedProps = $derived(mergeProps(props, colorPicker.getControlProps()));
+  let mergedProps = $derived(mergeProps(colorPicker.getControlProps(), props));
 </script>
 
 {#if asChild}

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

@@ -19,7 +19,7 @@
   let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getEyeDropperTriggerProps()),
+    mergeProps(colorPicker.getEyeDropperTriggerProps(), props),
   );
 </script>
 

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

@@ -19,7 +19,7 @@
   let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getFormatSelectProps()),
+    mergeProps(colorPicker.getFormatSelectProps(), props),
   );
 </script>
 

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

@@ -19,7 +19,7 @@
   let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getFormatTriggerProps()),
+    mergeProps(colorPicker.getFormatTriggerProps(), props),
   );
 </script>
 

package/dist/color-picker/color-picker-hidden-input.svelte

@@ -18,7 +18,7 @@
   let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getHiddenInputProps()),
+    mergeProps(colorPicker.getHiddenInputProps(), props),
   );
 </script>
 

package/dist/color-picker/color-picker-label.svelte

@@ -18,7 +18,7 @@
 
   let colorPicker = getColorPickerContext();
 
-  let mergedProps = $derived(mergeProps(props, colorPicker.getLabelProps()));
+  let mergedProps = $derived(mergeProps(colorPicker.getLabelProps(), props));
 </script>
 
 {#if asChild}

package/dist/color-picker/color-picker-positioner.svelte

@@ -22,9 +22,9 @@
 
   let mergedProps = $derived(
     mergeProps(
-      props,
       colorPicker.getPositionerProps(),
       presence.getPresenceProps(),
+      props,
     ),
   );
 </script>

package/dist/color-picker/color-picker-root.svelte

@@ -71,7 +71,7 @@
   );
 
   let mergedProps = $derived(
-    mergeProps(localProps, colorPicker.getRootProps()),
+    mergeProps(colorPicker.getRootProps(), localProps),
   );
 
   setColorPickerContext(colorPicker);

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

@@ -19,7 +19,7 @@
   let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getSwatchGroupProps()),
+    mergeProps(colorPicker.getSwatchGroupProps(), props),
   );
 </script>
 

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

@@ -23,7 +23,7 @@
   let swatchProps = getColorPickerSwatchPropsContext();
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getSwatchIndicatorProps(swatchProps)),
+    mergeProps(colorPicker.getSwatchIndicatorProps(swatchProps), props),
   );
 </script>
 

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

@@ -26,11 +26,11 @@
 
   let mergedProps = $derived(
     mergeProps(
-      props,
       colorPicker.getSwatchTriggerProps({
         value,
         disabled,
       }),
+      props,
     ),
   );
 </script>

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

@@ -29,7 +29,7 @@
   });
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getSwatchProps(swatchProps)),
+    mergeProps(colorPicker.getSwatchProps(swatchProps), props),
   );
 
   setColorPickerSwatchPropsContext(() => swatchProps);

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

@@ -24,7 +24,7 @@
   let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getTransparencyGridProps({size})),
+    mergeProps(colorPicker.getTransparencyGridProps({size}), props),
   );
 </script>
 

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

@@ -18,7 +18,7 @@
 
   let colorPicker = getColorPickerContext();
 
-  let mergedProps = $derived(mergeProps(props, colorPicker.getTriggerProps()));
+  let mergedProps = $derived(mergeProps(colorPicker.getTriggerProps(), props));
 </script>
 
 {#if asChild}

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

@@ -28,7 +28,7 @@
   });
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getSwatchProps(swatchProps)),
+    mergeProps(colorPicker.getSwatchProps(swatchProps), props),
   );
 </script>
 

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

@@ -19,7 +19,7 @@
   let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getValueTextProps()),
+    mergeProps(colorPicker.getValueTextProps(), props),
   );
 </script>
 

package/dist/color-picker/color-picker-view.svelte

@@ -26,7 +26,7 @@
   let colorPicker = getColorPickerContext();
   let formatProps = $derived({format});
   let mergedProps = $derived(
-    mergeProps(props, colorPicker.getViewProps(formatProps)),
+    mergeProps(colorPicker.getViewProps(formatProps), props),
   );
 
   setColorPickerFormatPropsContext(() => formatProps);

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

@@ -19,7 +19,7 @@
   let combobox = getComboboxContext();
 
   let mergedProps = $derived(
-    mergeProps(props, combobox.getClearTriggerProps()),
+    mergeProps(combobox.getClearTriggerProps(), props),
   );
 </script>
 

package/dist/combobox/combobox-content.svelte

@@ -22,15 +22,15 @@
   let presence = getPresenceContext();
 
   let mergedProps = $derived(
-    mergeProps(props, combobox.getContentProps(), presence.getPresenceProps()),
+    mergeProps(combobox.getContentProps(), presence.getPresenceProps(), props),
   );
 </script>
 
 {#if presence.mounted}
   {#if asChild}
-    {@render asChild(presence.ref, mergedProps)}
+    {@render asChild(presence.setReference, mergedProps)}
   {:else}
-    <div bind:this={ref} use:presence.ref {...mergedProps}>
+    <div bind:this={ref} use:presence.setReference {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

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

@@ -1,5 +1,5 @@
 import type { ItemGroupProps, ItemProps } from '@zag-js/combobox';
 import type { CreateComboboxReturn } from './create-combobox.svelte.js';
-export declare const getComboboxContext: () => CreateComboboxReturn, setComboboxContext: (context: CreateComboboxReturn | (() => CreateComboboxReturn)) => CreateComboboxReturn;
-export declare const getComboboxItemPropsContext: () => ItemProps, setComboboxItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;
-export declare const getComboboxItemGroupPropsContext: () => ItemGroupProps, setComboboxItemGroupPropsContext: (context: ItemGroupProps | (() => ItemGroupProps)) => 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/combobox-control.svelte

@@ -18,7 +18,7 @@
 
   let combobox = getComboboxContext();
 
-  let mergedProps = $derived(mergeProps(props, combobox.getControlProps()));
+  let mergedProps = $derived(mergeProps(combobox.getControlProps(), props));
 </script>
 
 {#if asChild}

package/dist/combobox/combobox-input.svelte

@@ -13,9 +13,7 @@
 
   let combobox = getComboboxContext();
 
-  let mergedProps = $derived(
-    mergeProps({...props, 'aria-expanded': false}, combobox.getInputProps()),
-  );
+  let mergedProps = $derived(mergeProps(combobox.getInputProps(), props));
 </script>
 
 {#if asChild}

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

@@ -24,10 +24,10 @@
 
   let mergedProps = $derived(
     mergeProps(
-      props,
       combobox.getItemGroupLabelProps({
         htmlFor: itemGroupProps.id,
       }),
+      props,
     ),
   );
 </script>

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

@@ -30,7 +30,7 @@
   });
 
   let mergedProps = $derived(
-    mergeProps(props, combobox.getItemGroupProps(comboboxItemGroupProps)),
+    mergeProps(combobox.getItemGroupProps(comboboxItemGroupProps), props),
   );
 
   setComboboxItemGroupPropsContext(() => comboboxItemGroupProps);

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

@@ -23,7 +23,7 @@
   let itemProps = getComboboxItemPropsContext();
 
   let mergedProps = $derived(
-    mergeProps(props, combobox.getItemIndicatorProps(itemProps)),
+    mergeProps(combobox.getItemIndicatorProps(itemProps), props),
   );
 </script>
 

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

@@ -23,7 +23,7 @@
   let itemProps = getComboboxItemPropsContext();
 
   let mergedProps = $derived(
-    mergeProps(props, combobox.getItemTextProps(itemProps)),
+    mergeProps(combobox.getItemTextProps(itemProps), props),
   );
 </script>
 

package/dist/combobox/combobox-item.svelte

@@ -32,7 +32,7 @@
 
   let itemState = $derived(combobox.getItemState(itemProps));
   let mergedProps = $derived(
-    mergeProps(localProps, combobox.getItemProps(itemProps)),
+    mergeProps(combobox.getItemProps(itemProps), localProps),
   );
 
   setComboboxItemPropsContext(() => itemProps);

package/dist/combobox/combobox-label.svelte

@@ -18,7 +18,7 @@
 
   let combobox = getComboboxContext();
 
-  let mergedProps = $derived(mergeProps(props, combobox.getLabelProps()));
+  let mergedProps = $derived(mergeProps(combobox.getLabelProps(), props));
 </script>
 
 {#if asChild}

package/dist/combobox/combobox-list.svelte

@@ -18,7 +18,7 @@
 
   let combobox = getComboboxContext();
 
-  let mergedProps = $derived(mergeProps(props, combobox.getListProps()));
+  let mergedProps = $derived(mergeProps(combobox.getListProps(), props));
 </script>
 
 {#if asChild}

package/dist/combobox/combobox-positioner.svelte

@@ -22,9 +22,9 @@
 
   let mergedProps = $derived(
     mergeProps(
-      props,
       combobox.getPositionerProps(),
       presence.getPresenceProps(),
+      props,
     ),
   );
 </script>

package/dist/combobox/combobox-root.svelte

@@ -90,7 +90,7 @@
     })),
   );
 
-  let mergedProps = $derived(mergeProps(localProps, combobox.getRootProps()));
+  let mergedProps = $derived(mergeProps(combobox.getRootProps(), localProps));
 
   setComboboxContext(combobox);
   setPresenceContext(presence);

package/dist/combobox/combobox-trigger.svelte

@@ -18,7 +18,7 @@
 
   let combobox = getComboboxContext();
 
-  let mergedProps = $derived(mergeProps(props, combobox.getTriggerProps()));
+  let mergedProps = $derived(mergeProps(combobox.getTriggerProps(), props));
 </script>
 
 {#if asChild}

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

@@ -1,10 +1,13 @@
 import type { GenericObject } from './types.js';
-type GetContext<T extends GenericObject> = () => T;
-type SetContext<T extends GenericObject> = (context: T | (() => T)) => T;
 type HasContext = () => boolean;
-export declare function createContext<T extends GenericObject>(key: string, strict?: boolean): [
-    getContext: GetContext<T>,
+type SetContext<T> = (context: T | (() => T)) => void;
+type GetContext<T, Strict extends boolean> = () => [Strict] extends [true] ? T : T | undefined;
+type CreateContextReturn<T, Strict extends boolean> = [
+    getContext: GetContext<T, Strict>,
     setContext: SetContext<T>,
     hasContext: HasContext
 ];
+export declare function createContext<T extends GenericObject>(key: string): CreateContextReturn<T, true>;
+export declare function createContext<T extends GenericObject>(key: string, strict: true): CreateContextReturn<T, true>;
+export declare function createContext<T extends GenericObject>(key: string, strict: false): CreateContextReturn<T, false>;
 export {};

package/dist/create-context.svelte.js

@@ -1,20 +1,31 @@
 import { reflect } from '@zag-js/svelte';
 import { getContext, hasContext, setContext } from 'svelte';
-export function createContext(key, strict = true) {
-    const has = () => hasContext(key);
-    const set = (context) => {
-        return setContext(key, typeof context === 'function' ? reflect(context) : context);
-    };
-    const get = () => {
-        if (strict && !has())
-            throw err(key);
-        return getContext(key);
-    };
+export function createContext(...args) {
+    const k = args[0];
+    const s = args[1] ?? true;
+    if (k.trim().length < 1) {
+        const e = new Error();
+        e.name = 'ContextError';
+        e.message = 'Context key cannot be empty';
+        throw e;
+    }
+    function has() {
+        return hasContext(k);
+    }
+    function set(v) {
+        setContext(k, isFn(v) ? reflect(v) : v);
+    }
+    function get() {
+        if (s && !has()) {
+            const e = new Error();
+            e.name = 'ContextError';
+            e.message = "No context found for '%s'".replace('%s', k);
+            throw e;
+        }
+        return getContext(k);
+    }
     return [get, set, has];
 }
-function err(k) {
-    const e = new Error();
-    e.name = 'ContextError';
-    e.message = "No context found for '%s'".replace('%s', k);
-    throw e;
+function isFn(v) {
+    return typeof v === 'function';
 }

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

@@ -19,7 +19,7 @@
   let datePicker = getDatePickerContext();
 
   let mergedProps = $derived(
-    mergeProps(props, datePicker.getClearTriggerProps()),
+    mergeProps(datePicker.getClearTriggerProps(), props),
   );
 </script>
 

package/dist/date-picker/date-picker-content.svelte

@@ -23,18 +23,18 @@
 
   let mergedProps = $derived(
     mergeProps(
-      props,
       datePicker.getContentProps(),
       presence.getPresenceProps(),
+      props,
     ),
   );
 </script>
 
 {#if presence.mounted}
   {#if asChild}
-    {@render asChild(presence.ref, mergedProps)}
+    {@render asChild(presence.setReference, mergedProps)}
   {:else}
-    <div bind:this={ref} use:presence.ref {...mergedProps}>
+    <div bind:this={ref} use:presence.setReference {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

package/dist/date-picker/date-picker-context.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { DayTableCellProps, TableCellProps, TableProps, ViewProps } from '@zag-js/date-picker';
 import type { CreateDatePickerReturn } from './create-date-picker.svelte.js';
-export declare const getDatePickerContext: () => CreateDatePickerReturn, setDatePickerContext: (context: CreateDatePickerReturn | (() => CreateDatePickerReturn)) => CreateDatePickerReturn;
-export declare const getDatePickerViewPropsContext: () => ViewProps, setDatePickerViewPropsContext: (context: ViewProps | (() => ViewProps)) => ViewProps;
-export declare const getDatePickerTablePropsContext: () => TableProps, setDatePickerTablePropsContext: (context: TableProps | (() => TableProps)) => TableProps;
-export declare const getDatePickerTableCellPropsContext: () => TableCellProps, setDatePickerTableCellPropsContext: (context: TableCellProps | (() => TableCellProps)) => TableCellProps;
-export declare const getDatePickerDayTableCellPropsContext: () => DayTableCellProps, setDatePickerDayTableCellPropsContext: (context: DayTableCellProps | (() => DayTableCellProps)) => DayTableCellProps;
+export declare const getDatePickerContext: () => CreateDatePickerReturn, setDatePickerContext: (context: CreateDatePickerReturn | (() => CreateDatePickerReturn)) => void;
+export declare const getDatePickerViewPropsContext: () => ViewProps, setDatePickerViewPropsContext: (context: ViewProps | (() => ViewProps)) => void;
+export declare const getDatePickerTablePropsContext: () => TableProps, setDatePickerTablePropsContext: (context: TableProps | (() => TableProps)) => void;
+export declare const getDatePickerTableCellPropsContext: () => TableCellProps, setDatePickerTableCellPropsContext: (context: TableCellProps | (() => TableCellProps)) => void;
+export declare const getDatePickerDayTableCellPropsContext: () => DayTableCellProps, setDatePickerDayTableCellPropsContext: (context: DayTableCellProps | (() => DayTableCellProps)) => void;

package/dist/date-picker/date-picker-control.svelte

@@ -18,7 +18,7 @@
 
   let datePicker = getDatePickerContext();
 
-  let mergedProps = $derived(mergeProps(props, datePicker.getControlProps()));
+  let mergedProps = $derived(mergeProps(datePicker.getControlProps(), props));
 </script>
 
 {#if asChild}

package/dist/date-picker/date-picker-day-table-cell-trigger.svelte

@@ -23,7 +23,7 @@
   let tableCellProps = getDatePickerDayTableCellPropsContext();
 
   let mergedProps = $derived(
-    mergeProps(props, datePicker.getDayTableCellTriggerProps(tableCellProps)),
+    mergeProps(datePicker.getDayTableCellTriggerProps(tableCellProps), props),
   );
 </script>
 

package/dist/date-picker/date-picker-day-table-cell.svelte

@@ -37,7 +37,7 @@
   );
 
   let mergedProps = $derived(
-    mergeProps(localProps, datePicker.getDayTableCellProps(tableCellProps)),
+    mergeProps(datePicker.getDayTableCellProps(tableCellProps), localProps),
   );
 
   setDatePickerDayTableCellPropsContext(() => tableCellProps);

package/dist/date-picker/date-picker-input.svelte

@@ -23,7 +23,7 @@
   let datePicker = getDatePickerContext();
 
   let mergedProps = $derived(
-    mergeProps(props, datePicker.getInputProps({index})),
+    mergeProps(datePicker.getInputProps({index}), props),
   );
 </script>
 

package/dist/date-picker/date-picker-label.svelte

@@ -24,7 +24,7 @@
   let datePicker = getDatePickerContext();
 
   let mergedProps = $derived(
-    mergeProps(props, datePicker.getLabelProps({index})),
+    mergeProps(datePicker.getLabelProps({index}), props),
   );
 </script>
 

package/dist/date-picker/date-picker-month-select.svelte

@@ -22,7 +22,7 @@
   let datePicker = getDatePickerContext();
 
   let mergedProps = $derived(
-    mergeProps(props, datePicker.getMonthSelectProps()),
+    mergeProps(datePicker.getMonthSelectProps(), props),
   );
 </script>
 

package/dist/date-picker/date-picker-month-table-cell-trigger.svelte

@@ -23,7 +23,7 @@
   let tableCellProps = getDatePickerTableCellPropsContext();
 
   let mergedProps = $derived(
-    mergeProps(props, datePicker.getMonthTableCellTriggerProps(tableCellProps)),
+    mergeProps(datePicker.getMonthTableCellTriggerProps(tableCellProps), props),
   );
 </script>
 

package/dist/date-picker/date-picker-month-table-cell.svelte

@@ -35,7 +35,7 @@
   );
 
   let mergedProps = $derived(
-    mergeProps(localProps, datePicker.getMonthTableCellProps(tableCellProps)),
+    mergeProps(datePicker.getMonthTableCellProps(tableCellProps), localProps),
   );
 
   setDatePickerTableCellPropsContext(() => tableCellProps);

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

@@ -23,7 +23,7 @@
   let viewProps = getDatePickerViewPropsContext();
 
   let mergedProps = $derived(
-    mergeProps(props, datePicker.getNextTriggerProps(viewProps)),
+    mergeProps(datePicker.getNextTriggerProps(viewProps), props),
   );
 </script>
 

package/dist/date-picker/date-picker-positioner.svelte

@@ -22,9 +22,9 @@
 
   let mergedProps = $derived(
     mergeProps(
-      props,
       datePicker.getPositionerProps(),
       presence.getPresenceProps(),
+      props,
     ),
   );
 </script>

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

@@ -24,7 +24,7 @@
   let datePicker = getDatePickerContext();
 
   let mergedProps = $derived(
-    mergeProps(props, datePicker.getPresetTriggerProps({value})),
+    mergeProps(datePicker.getPresetTriggerProps({value}), props),
   );
 </script>
 

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

@@ -23,7 +23,7 @@
   let viewProps = getDatePickerViewPropsContext();
 
   let mergedProps = $derived(
-    mergeProps(props, datePicker.getPrevTriggerProps(viewProps)),
+    mergeProps(datePicker.getPrevTriggerProps(viewProps), props),
   );
 </script>