ui-ingredients 0.0.64 → 0.0.65

package/dist/collapsible/collapsible-root.svelte

@@ -31,8 +31,8 @@
       'id',
       'ids',
       'open',
+      'openControlled',
       'disabled',
-      'defaultOpen',
       'onOpenChange',
       'onExitComplete',
     ])(props),

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

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

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

@@ -8,12 +8,11 @@ export function createCollapsible(props) {
     const environment = getEnvironmentContext();
     const id = uid();
     const context = reflect(() => ({
-        ...props,
-        id: props.id ?? id,
+        id,
         dir: locale?.dir,
-        open: props.defaultOpen ?? props.open,
+        ...props,
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.open != null,
+        'open.controlled': props.openControlled,
     }));
     const [state, send] = useMachine(collapsible.machine(context), { context });
     return reflect(() => collapsible.connect(state, send, normalizeProps));

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

@@ -41,13 +41,13 @@
       'id',
       'ids',
       'open',
+      'openControlled',
       'name',
       'value',
       'format',
       'disabled',
       'required',
       'readOnly',
-      'defaultOpen',
       'positioning',
       'onOpenChange',
       'closeOnSelect',

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-root.svelte

@@ -43,7 +43,7 @@
       'name',
       'form',
       'open',
-      'defaultOpen',
+      'openControlled',
       'items',
       'value',
       'invalid',

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-root.svelte

@@ -42,6 +42,7 @@
       'max',
       'name',
       'open',
+      'openControlled',
       'view',
       'value',
       'modal',
@@ -52,7 +53,6 @@
       'timeZone',
       'fixedWeeks',
       'startOfWeek',
-      'defaultOpen',
       'positioning',
       'numOfMonths',
       'translations',

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 {
 }

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

@@ -8,12 +8,11 @@ export function createDialog(props) {
     const environment = getEnvironmentContext();
     const id = uid();
     const context = reflect(() => ({
-        ...props,
-        id: props.id ?? id,
+        id,
         dir: locale?.dir,
-        open: props.defaultOpen ?? props.open,
+        ...props,
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.open != null,
+        'open.controlled': props.openControlled,
     }));
     const [state, send] = useMachine(dialog.machine(context), { context });
     return reflect(() => dialog.connect(state, send, normalizeProps));

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

@@ -1,7 +1,7 @@
 import * as editable from '@zag-js/editable';
 export interface CreateEditableProps extends Omit<editable.Context, 'id' | 'dir' | 'getRootNode' | 'edit.controlled'> {
-    id?: string | null;
-    defaultEdit?: boolean;
+    id?: string;
+    editControlled?: boolean;
 }
 export interface CreateEditableReturn extends editable.Api {
 }

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

@@ -10,20 +10,19 @@ export function createEditable(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,
         ...props,
-        id: props.id ?? id,
-        dir: locale?.dir,
-        edit: props.defaultEdit ?? props.edit,
         getRootNode: environment?.getRootNode,
-        'edit.controlled': props.edit != null,
+        'edit.controlled': props.editControlled,
     }));
     const [state, send] = useMachine(editable.machine(context), { context });
     return reflect(() => {

package/dist/editable/editable-root.svelte

@@ -33,6 +33,7 @@
       'name',
       'form',
       'edit',
+      'editControlled',
       'value',
       'invalid',
       'readOnly',
@@ -41,7 +42,6 @@
       'maxLength',
       'submitMode',
       'autoResize',
-      'defaultEdit',
       'placeholder',
       'finalFocusEl',
       'translations',

package/dist/hover-card/create-hover-card.svelte.d.ts

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

package/dist/hover-card/create-hover-card.svelte.js

@@ -8,12 +8,11 @@ export function createHoverCard(props) {
     const environment = getEnvironmentContext();
     const id = uid();
     const context = reflect(() => ({
-        ...props,
-        id: props.id ?? id,
+        id,
         dir: locale?.dir,
-        open: props.defaultOpen ?? props.open,
+        ...props,
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.open != null,
+        'open.controlled': props.openControlled,
     }));
     const [state, send] = useMachine(hoverCard.machine(context), { context });
     return reflect(() => hoverCard.connect(state, send, normalizeProps));

package/dist/hover-card/hover-card-root.svelte

@@ -28,9 +28,9 @@
       'id',
       'ids',
       'open',
+      'openControlled',
       'openDelay',
       'closeDelay',
-      'defaultOpen',
       'positioning',
       'onOpenChange',
     ])(props),

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

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

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

@@ -8,12 +8,11 @@ export function createMenu(props) {
     const environment = getEnvironmentContext();
     const id = uid();
     const context = reflect(() => ({
-        ...props,
-        id: props.id ?? id,
+        id,
         dir: locale?.dir,
-        open: props.defaultOpen ?? props.open,
+        ...props,
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.open != null,
+        'open.controlled': props.openControlled,
     }));
     const [state, send, machine] = useMachine(menu.machine(context), { context });
     return reflect(() => ({

package/dist/menu/menu-root.svelte

@@ -29,25 +29,25 @@
 
   let [createMenuProps, presenceStrategyProps] = $derived(
     createSplitProps<CreateMenuProps>([
-      'anchorPoint',
-      'aria-label',
-      'closeOnSelect',
-      'composite',
-      'defaultOpen',
-      'highlightedValue',
       'id',
       'ids',
+      'open',
+      'openControlled',
       'loopFocus',
-      'onEscapeKeyDown',
+      'composite',
+      'typeahead',
+      'positioning',
+      'anchorPoint',
+      'closeOnSelect',
+      'highlightedValue',
+      'aria-label',
+      'onSelect',
+      'onOpenChange',
       'onFocusOutside',
+      'onEscapeKeyDown',
       'onHighlightChange',
       'onInteractOutside',
-      'onOpenChange',
       'onPointerDownOutside',
-      'onSelect',
-      'open',
-      'positioning',
-      'typeahead',
     ])(props),
   );
 

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

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

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

@@ -8,12 +8,11 @@ export function createPopover(props) {
     const environment = getEnvironmentContext();
     const id = uid();
     const context = reflect(() => ({
-        ...props,
-        id: props.id ?? id,
+        id,
         dir: locale?.dir,
-        open: props.defaultOpen ?? props.open,
+        ...props,
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.open != null,
+        'open.controlled': props.openControlled,
     }));
     const [state, send] = useMachine(popover.machine(context), { context });
     return reflect(() => popover.connect(state, send, normalizeProps));

package/dist/popover/popover-root.svelte

@@ -25,23 +25,23 @@
 
   let [createPopoverProps, presenceStrategyProps] = $derived(
     createSplitProps<CreatePopoverProps>([
-      'autoFocus',
-      'closeOnEscape',
-      'closeOnInteractOutside',
-      'defaultOpen',
       'id',
       'ids',
-      'initialFocusEl',
+      'open',
+      'openControlled',
       'modal',
-      'onEscapeKeyDown',
+      'autoFocus',
+      'portalled',
+      'positioning',
+      'closeOnEscape',
+      'initialFocusEl',
+      'persistentElements',
+      'closeOnInteractOutside',
+      'onOpenChange',
       'onFocusOutside',
+      'onEscapeKeyDown',
       'onInteractOutside',
-      'onOpenChange',
       'onPointerDownOutside',
-      'open',
-      'persistentElements',
-      'portalled',
-      'positioning',
     ])(props),
   );
 

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

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

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

@@ -18,20 +18,19 @@ export function createSelect(props) {
     const environment = getEnvironmentContext();
     const id = uid();
     const context = reflect(() => ({
+        id,
         ids: {
             label: field?.ids.label,
             hiddenSelect: field?.ids.control,
         },
+        dir: locale?.dir,
         invalid: field?.invalid,
         disabled: field?.disabled,
         readOnly: field?.readOnly,
         required: field?.required,
         ...selectProps,
-        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,
     }));
     const [state, send] = useMachine(select.machine(context), { context });

package/dist/select/select-root.svelte

@@ -37,7 +37,7 @@
       'form',
       'name',
       'open',
-      'defaultOpen',
+      'openControlled',
       'value',
       'items',
       'invalid',

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

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

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

@@ -8,13 +8,12 @@ export function createTimePicker(props) {
     const environment = getEnvironmentContext();
     const id = uid();
     const context = reflect(() => ({
-        ...props,
-        id: props.id ?? id,
+        id,
         dir: locale?.dir,
-        open: props.defaultOpen ?? props.open,
-        locale: props.locale ?? locale?.locale,
+        locale: locale?.locale,
+        ...props,
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.defaultOpen != null,
+        'open.controlled': props.openControlled,
     }));
     const [state, send] = useMachine(timePicker.machine(context), { context });
     return reflect(() => timePicker.connect(state, send, normalizeProps));

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

@@ -38,12 +38,12 @@
       'max',
       'name',
       'open',
+      'openControlled',
       'steps',
       'value',
       'locale',
       'readOnly',
       'disabled',
-      'defaultOpen',
       'placeholder',
       'positioning',
       'allowSeconds',

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

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

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

@@ -8,12 +8,11 @@ export function createTooltip(props) {
     const environment = getEnvironmentContext();
     const id = uid();
     const context = reflect(() => ({
-        ...props,
-        id: props.id ?? id,
+        id,
         dir: locale?.dir,
-        open: props.defaultOpen ?? props.open,
+        ...props,
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.open != null,
+        'open.controlled': props.openControlled,
     }));
     const [state, send] = useMachine(tooltip.machine(context), { context });
     return reflect(() => tooltip.connect(state, send, normalizeProps));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.64",
+  "version": "0.0.65",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",