ui-ingredients 0.0.17 → 0.0.18

package/dist/clipboard/root.svelte

@@ -1,17 +1,15 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateClipboardProps, CreateClipboardReturn} from './create-clipboard.svelte.js';
 
   export interface ClipboardProps
-    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateClipboardProps, 'id'>> {
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateClipboardProps> {
     children?: Snippet<[api: CreateClipboardReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {clipboardContext} from './context.svelte.js';
   import {createClipboard} from './create-clipboard.svelte.js';
@@ -23,22 +21,16 @@
     value,
     timeout,
     onStatusChange,
-    getRootNode,
     children,
     ...props
   }: ClipboardProps = $props();
 
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
   let context = createClipboard({
-    id: id ?? uid,
+    id,
     ids,
     value: $state.snapshot(value),
     timeout,
     onStatusChange,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));

package/dist/clipboard/trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ClipboardTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface ClipboardTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/collapsible/content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface CollapsibleContentProps extends HtmlIngredientProps<'div'> {}
+  export interface CollapsibleContentProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

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

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

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

@@ -1,7 +1,18 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import * as collapsible from '@zag-js/collapsible';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createCollapsible(props) {
-    const [state, send] = useMachine(collapsible.machine(props));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(collapsible.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+        'open.controlled': props.open != null,
+    }));
     const api = $derived(reflect(() => collapsible.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/collapsible/root.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {
     CreateCollapsibleProps,
@@ -7,18 +7,12 @@
   } from './create-collapsible.svelte.js';
 
   export interface CollapsibleProps
-    extends Assign<
-      Omit<HtmlIngredientProps<'div'>, 'children'>,
-      Omit<CreateCollapsibleProps, 'id'>
-    > {
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateCollapsibleProps> {
     children?: Snippet<[api: CreateCollapsibleReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {collapsibleContext} from './context.svelte.js';
   import {createCollapsible} from './create-collapsible.svelte.js';
@@ -26,32 +20,21 @@
   let {
     id,
     ids,
-    dir,
     open,
-    'open.controlled': openControlled,
     disabled,
     onOpenChange,
     onExitComplete,
-    getRootNode,
     children,
     ...props
   }: CollapsibleProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
   let context = createCollapsible({
-    id: id ?? uid,
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     open,
-    'open.controlled': openControlled,
     disabled,
     onOpenChange,
     onExitComplete,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let mergedProps = $derived(mergeProps(props, context.getRootProps()));

package/dist/collapsible/trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface CollapsibleTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface CollapsibleTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/combobox/clear-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ComboboxClearTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface ComboboxClearTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/combobox/content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ComboboxContentProps extends HtmlIngredientProps<'div'> {}
+  export interface ComboboxContentProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/combobox/control.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ComboboxControlProps extends HtmlIngredientProps<'div'> {}
+  export interface ComboboxControlProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,5 +1,6 @@
 import * as combobox from '@zag-js/combobox';
-export interface CreateComboboxProps<T> extends Omit<combobox.Context, 'collection'> {
+export interface CreateComboboxProps<T> extends Omit<combobox.Context, 'id' | 'dir' | 'collection' | 'getRootNode' | 'open.controlled'> {
+    id?: string | null;
     items: T[];
     itemToString?: (item: T) => string;
     itemToValue?: (item: T) => string;

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

@@ -1,3 +1,6 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import * as combobox from '@zag-js/combobox';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createCombobox(props) {
@@ -7,8 +10,14 @@ export function createCombobox(props) {
         itemToString: (item) => (props.itemToString ? props.itemToString(item) : String(item)),
         isItemDisabled: (item) => (props.isItemDisabled ? props.isItemDisabled(item) : false),
     }));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
     const [state, send] = useMachine(combobox.machine({
         ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+        'open.controlled': props.open != null,
         collection,
     }));
     const api = $derived(reflect(() => ({

package/dist/combobox/input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ComboboxInputProps extends HtmlIngredientProps<'input'> {}
+  export interface ComboboxInputProps extends HtmlProps<'input'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ComboboxItemGroupLabelProps extends HtmlIngredientProps<'span'> {}
+  export interface ComboboxItemGroupLabelProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/combobox/item-group.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {ItemGroupProps} from '@zag-js/combobox';
 
   export interface ComboboxItemGroupProps
-    extends Assign<HtmlIngredientProps<'div'>, Omit<ItemGroupProps, 'id'>> {}
+    extends Assign<HtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {}
 </script>
 
 <script lang="ts">

package/dist/combobox/item-indicator.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ComboboxItemIndicatorProps extends HtmlIngredientProps<'span'> {}
+  export interface ComboboxItemIndicatorProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/combobox/item-text.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ComboboxItemTextProps extends HtmlIngredientProps<'span'> {}
+  export interface ComboboxItemTextProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/combobox/item.svelte

@@ -1,10 +1,9 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/combobox';
   import type {Snippet} from 'svelte';
 
-  export interface ComboboxItemProps
-    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, ItemProps> {
+  export interface ComboboxItemProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
     children?: Snippet<[state: ItemState]>;
   }
 </script>

package/dist/combobox/label.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ComboboxLabelProps extends HtmlIngredientProps<'label'> {}
+  export interface ComboboxLabelProps extends HtmlProps<'label'> {}
 </script>
 
 <script lang="ts">

package/dist/combobox/list.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ComboboxListProps extends HtmlIngredientProps<'div'> {}
+  export interface ComboboxListProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/combobox/positioner.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ComboboxPositionerProps extends HtmlIngredientProps<'div'> {}
+  export interface ComboboxPositionerProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/combobox/root.svelte

@@ -1,21 +1,15 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateComboboxProps, CreateComboboxReturn} from './create-combobox.svelte.js';
 
   export interface ComboboxProps<T>
-    extends Assign<
-      Omit<HtmlIngredientProps<'div'>, 'children'>,
-      Omit<CreateComboboxProps<T>, 'id'>
-    > {
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateComboboxProps<T>> {
     children?: Snippet<[api: CreateComboboxReturn]>;
   }
 </script>
 
 <script lang="ts" generics="T">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {comboboxContext} from './context.svelte.js';
   import {createCombobox} from './create-combobox.svelte.js';
@@ -23,11 +17,9 @@
   let {
     id,
     ids,
-    dir,
     name,
     form,
     open,
-    'open.controlled': openControlled,
     items,
     value,
     invalid,
@@ -63,24 +55,16 @@
     onPointerDownOutside,
     getSelectionValue,
     scrollToIndexFn,
-    getRootNode,
     children,
     ...props
   }: ComboboxProps<T> = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
   let context = createCombobox({
-    id: id ?? uid,
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     name,
     form,
     open,
-    'open.controlled': openControlled,
     items,
     value: $state.snapshot(value),
     invalid,
@@ -116,7 +100,6 @@
     onPointerDownOutside,
     getSelectionValue,
     scrollToIndexFn,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));

package/dist/combobox/trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ComboboxTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface ComboboxTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/dialog/backdrop.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface DialogBackdropProps extends HtmlIngredientProps<'div'> {}
+  export interface DialogBackdropProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/dialog/close-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface DialogCloseTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface DialogCloseTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/dialog/content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface DialogContentProps extends HtmlIngredientProps<'div'> {}
+  export interface DialogContentProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

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

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

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

@@ -1,7 +1,18 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import * as dialog from '@zag-js/dialog';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createDialog(props) {
-    const [state, send] = useMachine(dialog.machine(props));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(dialog.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+        'open.controlled': props.open != null,
+    }));
     const api = $derived(reflect(() => dialog.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/dialog/description.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface DialogDescriptionProps extends HtmlIngredientProps<'div'> {}
+  export interface DialogDescriptionProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/dialog/positioner.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface DialogPositionerProps extends HtmlIngredientProps<'div'> {}
+  export interface DialogPositionerProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/dialog/root.svelte

@@ -2,32 +2,18 @@
   import type {Snippet} from 'svelte';
   import type {CreateDialogProps, CreateDialogReturn} from './create-dialog.svelte.js';
 
-  export interface DialogProps extends Omit<CreateDialogProps, 'id'> {
-    id?: string | null;
+  export interface DialogProps extends CreateDialogProps {
     children?: Snippet<[api: CreateDialogReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {dialogContext} from './context.svelte.js';
   import {createDialog} from './create-dialog.svelte.js';
 
-  let {id, dir, getRootNode, children, ...props}: DialogProps = $props();
+  let {children, ...props}: DialogProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
-  let context = createDialog({
-    id: id ?? uid,
-    dir: dir ?? localeContext?.dir,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
-    ...props,
-  });
+  let context = createDialog(props);
 
   dialogContext.set(context);
 </script>

package/dist/dialog/title.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface DialogTitleProps extends HtmlIngredientProps<'div'> {}
+  export interface DialogTitleProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/dialog/trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface DialogTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface DialogTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/editable/area.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface EditableAreaProps extends HtmlIngredientProps<'div'> {}
+  export interface EditableAreaProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/editable/cancel-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface EditableCancelTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface EditableCancelTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/editable/control.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface EditableControlProps extends HtmlIngredientProps<'div'> {}
+  export interface EditableControlProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

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

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

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

@@ -1,7 +1,18 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import * as editable from '@zag-js/editable';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createEditable(props) {
-    const [state, send] = useMachine(editable.machine(props));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(editable.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+        'edit.controlled': props.edit != null,
+    }));
     const api = $derived(reflect(() => editable.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/editable/edit-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface EditableEditTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface EditableEditTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">