ui-ingredients 0.0.64 → 0.0.66

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/color-picker/create-color-picker.svelte.d.ts

@@ -2,9 +2,9 @@ import type { GenericObject } from '../types.js';
 import * as colorPicker from '@zag-js/color-picker';
 type Omitted = 'id' | 'dir' | 'value' | 'getRootNode' | 'open.controlled';
 export interface CreateColorPickerProps extends Omit<colorPicker.Context, Omitted> {
-    id?: string | null;
+    id?: string;
     value?: string;
-    defaultOpen?: boolean;
+    openControlled?: boolean;
 }
 export interface CreateColorPickerReturn extends colorPicker.Api {
     getViewProps(props: {

package/dist/color-picker/create-color-picker.svelte.js

@@ -9,13 +9,12 @@ export function createColorPicker(props) {
     const environment = getEnvironmentContext();
     const id = uid();
     const context = $derived.by(() => ({
-        ...props,
-        id: props.id ?? id,
+        id,
         dir: locale?.dir,
-        open: props.defaultOpen ?? props.open,
+        ...props,
         value: props.value ? colorPicker.parse(props.value) : undefined,
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.open != null,
+        'open.controlled': props.openControlled,
     }));
     const [state, send] = useMachine(colorPicker.machine(context), { context });
     return reflect(() => {

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,7 +22,7 @@
   let presence = getPresenceContext();
 
   let mergedProps = $derived(
-    mergeProps(props, combobox.getContentProps(), presence.getPresenceProps()),
+    mergeProps(combobox.getContentProps(), presence.getPresenceProps(), props),
   );
 </script>
 

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

@@ -43,7 +43,7 @@
       'name',
       'form',
       'open',
-      'defaultOpen',
+      'openControlled',
       'items',
       'value',
       'invalid',
@@ -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/combobox/create-combobox.svelte.d.ts

@@ -1,8 +1,8 @@
 import * as combobox from '@zag-js/combobox';
 type Omitted = 'id' | 'dir' | 'collection' | 'getRootNode' | 'open.controlled';
 export interface CreateComboboxProps<T> extends combobox.CollectionOptions<T>, Omit<combobox.Context, Omitted> {
-    id?: string | null;
-    defaultOpen?: boolean;
+    id?: string;
+    openControlled?: boolean;
 }
 export interface CreateComboboxReturn extends combobox.Api {
 }

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

@@ -18,22 +18,22 @@ export function createCombobox(props) {
     const environment = getEnvironmentContext();
     const id = uid();
     const context = reflect(() => ({
+        id,
         ids: {
             label: field?.ids.label,
             input: field?.ids.control,
         },
+        dir: locale?.dir,
         invalid: field?.invalid,
         disabled: field?.disabled,
         readOnly: field?.readOnly,
         required: field?.required,
         ...comboboxProps,
-        id: props.id ?? id,
-        dir: locale?.dir,
-        open: props.defaultOpen ?? props.open,
-        'open.controlled': props.open != null,
         getRootNode: environment?.getRootNode,
+        'open.controlled': props.openControlled,
         collection,
     }));
+    /* FIXME: pass controlled context */
     const [state, send] = useMachine(combobox.machine(context));
     return reflect(() => {
         const o = combobox.connect(state, send, normalizeProps);

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

@@ -2,12 +2,12 @@ import type { GenericObject } from '../types.js';
 import * as datePicker from '@zag-js/date-picker';
 type Omitted = 'id' | 'dir' | 'min' | 'max' | 'value' | 'focusedValue' | 'getRootNode' | 'open.controlled';
 export interface CreateDatePickerProps extends Omit<datePicker.Context, Omitted> {
-    id?: string | null;
+    id?: string;
     min?: string | Date;
     max?: string | Date;
     value?: string[] | Date[];
     focusedValue?: string | Date;
-    defaultOpen?: boolean;
+    openControlled?: boolean;
 }
 export interface CreateDatePickerReturn extends datePicker.Api {
     getViewProps(props: datePicker.ViewProps): GenericObject;

package/dist/date-picker/create-date-picker.svelte.js

@@ -10,19 +10,18 @@ export function createDatePicker(props) {
     const id = uid();
     /* FIXME: use reflect */
     const context = $derived.by(() => ({
-        ...props,
-        id: props.id ?? id,
+        id,
         dir: locale?.dir,
+        locale: locale?.locale,
+        ...props,
         min: props.min ? datePicker.parse(props.min) : undefined,
         max: props.max ? datePicker.parse(props.max) : undefined,
         value: props.value ? datePicker.parse(props.value) : undefined,
         focusedValue: props.focusedValue
             ? datePicker.parse(props.focusedValue)
             : undefined,
-        open: props.defaultOpen ?? props.open,
-        'open.controlled': props.open != null,
-        locale: props.locale ?? locale?.locale,
         getRootNode: environment?.getRootNode,
+        'open.controlled': props.openControlled,
     }));
     const [state, send] = useMachine(datePicker.machine(context), { context });
     return reflect(() => {

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,9 +23,9 @@
 
   let mergedProps = $derived(
     mergeProps(
-      props,
       datePicker.getContentProps(),
       presence.getPresenceProps(),
+      props,
     ),
   );
 </script>

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>
 

package/dist/date-picker/date-picker-range-text.svelte

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

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

@@ -42,6 +42,7 @@
       'max',
       'name',
       'open',
+      'openControlled',
       'view',
       'value',
       'modal',
@@ -52,7 +53,6 @@
       'timeZone',
       'fixedWeeks',
       'startOfWeek',
-      'defaultOpen',
       'positioning',
       'numOfMonths',
       'translations',
@@ -75,7 +75,7 @@
     })),
   );
 
-  let mergedProps = $derived(mergeProps(localProps, datePicker.getRootProps()));
+  let mergedProps = $derived(mergeProps(datePicker.getRootProps(), localProps));
 
   setDatePickerContext(datePicker);
   setPresenceContext(presence);

package/dist/date-picker/date-picker-table-body.svelte

@@ -23,7 +23,7 @@
   let tableProps = getDatePickerTablePropsContext();
 
   let mergedProps = $derived(
-    mergeProps(props, datePicker.getTableBodyProps(tableProps)),
+    mergeProps(datePicker.getTableBodyProps(tableProps), props),
   );
 </script>
 

package/dist/date-picker/date-picker-table-head.svelte

@@ -23,7 +23,7 @@
   let tableProps = getDatePickerTablePropsContext();
 
   let mergedProps = $derived(
-    mergeProps(props, datePicker.getTableHeadProps(tableProps)),
+    mergeProps(datePicker.getTableHeadProps(tableProps), props),
   );
 </script>
 

package/dist/date-picker/date-picker-table-header.svelte

@@ -23,7 +23,7 @@
   let tableProps = getDatePickerTablePropsContext();
 
   let mergedProps = $derived(
-    mergeProps(props, datePicker.getTableHeaderProps(tableProps)),
+    mergeProps(datePicker.getTableHeaderProps(tableProps), props),
   );
 </script>
 

package/dist/date-picker/date-picker-table-row.svelte

@@ -23,7 +23,7 @@
   let tableProps = getDatePickerTablePropsContext();
 
   let mergedProps = $derived(
-    mergeProps(props, datePicker.getTableRowProps(tableProps)),
+    mergeProps(datePicker.getTableRowProps(tableProps), props),
   );
 </script>
 

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

@@ -31,7 +31,7 @@
   let tableProps: TableProps = $derived({...viewProps, id, columns});
 
   let mergedProps = $derived(
-    mergeProps(props, datePicker.getTableProps(tableProps)),
+    mergeProps(datePicker.getTableProps(tableProps), props),
   );
 
   setDatePickerTablePropsContext(() => tableProps);

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

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

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

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

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

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

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

@@ -26,7 +26,7 @@
   let viewProps: ViewProps = $derived({view});
 
   let mergedProps = $derived(
-    mergeProps(props, datePicker.getViewProps(viewProps)),
+    mergeProps(datePicker.getViewProps(viewProps), props),
   );
 
   setDatePickerViewPropsContext(() => viewProps);

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 import * as dialog from '@zag-js/dialog';
 export interface CreateDialogProps extends Omit<dialog.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
-    id?: string | null;
-    defaultOpen?: boolean;
+    id?: string;
+    openControlled?: boolean;
 }
 export interface CreateDialogReturn extends dialog.Api {
 }