ui-ingredients 0.0.27 → 0.0.29

package/dist/combobox/content.svelte

@@ -1,26 +1,26 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface ComboboxContentProps extends HtmlProps<'div'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {comboboxContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: ComboboxContentProps = $props();
-
-  let combobox = comboboxContext.get();
-
-  let attrs = $derived(mergeProps(props, combobox.getContentProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <div {...attrs}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface ComboboxContentProps extends HTMLProps<'div'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {comboboxContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: ComboboxContentProps = $props();
+
+  let combobox = comboboxContext.get();
+
+  let mergedProps = $derived(mergeProps(props, combobox.getContentProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -1,4 +1,4 @@
-import { Context } from '../utils.svelte.js';
+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>;

package/dist/combobox/context.svelte.js

@@ -1,4 +1,4 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 export const comboboxContext = new Context('Combobox');
 export const comboboxItemPropsContext = new Context('ComboboxItem');
 export const comboboxItemGroupPropsContext = new Context('ComboboxItemGroup');

package/dist/combobox/control.svelte

@@ -1,26 +1,26 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface ComboboxControlProps extends HtmlProps<'div'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {comboboxContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: ComboboxControlProps = $props();
-
-  let combobox = comboboxContext.get();
-
-  let attrs = $derived(mergeProps(props, combobox.getControlProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <div {...attrs}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface ComboboxControlProps extends HTMLProps<'div'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {comboboxContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: ComboboxControlProps = $props();
+
+  let combobox = comboboxContext.get();
+
+  let mergedProps = $derived(mergeProps(props, combobox.getControlProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -1,14 +1,14 @@
+import { createUniqueId } from '../create-unique-id.js';
 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) {
     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),
+        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 locale = getLocaleContext();
     const environment = getEnvironmentContext();
@@ -16,7 +16,7 @@ export function createCombobox(props) {
         ...props,
         id: props.id ?? createUniqueId(),
         dir: locale?.dir,
-        open: props.defaultOpen,
+        open: props.defaultOpen ?? props.open,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
         collection,

package/dist/combobox/input.svelte

@@ -1,24 +1,24 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface ComboboxInputProps extends HtmlProps<'input'> {
-    asChild?: AsChild<HtmlProps<'input'>>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {comboboxContext} from './context.svelte.js';
-
-  let {asChild, ...props}: ComboboxInputProps = $props();
-
-  let combobox = comboboxContext.get();
-
-  let attrs = $derived(mergeProps(props, combobox.getInputProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <input {...attrs} />
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface ComboboxInputProps extends HTMLProps<'input'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {comboboxContext} from './context.svelte.js';
+
+  let {asChild, ...props}: ComboboxInputProps = $props();
+
+  let combobox = comboboxContext.get();
+
+  let mergedProps = $derived(mergeProps(props, combobox.getInputProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <input {...mergedProps} />
+{/if}

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

@@ -1,34 +1,37 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface ComboboxItemGroupLabelProps extends HtmlProps<'span'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {comboboxContext, comboboxItemGroupPropsContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: ComboboxItemGroupLabelProps = $props();
-
-  let combobox = comboboxContext.get();
-  let itemGroupProps = comboboxItemGroupPropsContext.get();
-
-  let attrs = $derived(
-    mergeProps(
-      props,
-      combobox.getItemGroupLabelProps({
-        htmlFor: itemGroupProps.id,
-      }),
-    ),
-  );
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <span {...attrs}>
-    {@render children?.()}
-  </span>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface ComboboxItemGroupLabelProps extends HTMLProps<'span'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    comboboxContext,
+    comboboxItemGroupPropsContext,
+  } from './context.svelte.js';
+
+  let {asChild, children, ...props}: ComboboxItemGroupLabelProps = $props();
+
+  let combobox = comboboxContext.get();
+  let itemGroupProps = comboboxItemGroupPropsContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      combobox.getItemGroupLabelProps({
+        htmlFor: itemGroupProps.id,
+      }),
+    ),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/combobox/item-group.svelte

@@ -1,36 +1,40 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, HtmlProps} from '../types.js';
-  import type {ItemGroupProps} from '@zag-js/combobox';
-
-  export interface ComboboxItemGroupProps
-    extends Assign<HtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {createUniqueId, mergeProps} from '../utils.svelte.js';
-  import {comboboxContext, comboboxItemGroupPropsContext} from './context.svelte.js';
-
-  let {id, asChild, children, ...props}: ComboboxItemGroupProps = $props();
-
-  let combobox = comboboxContext.get();
-
-  let uid = createUniqueId();
-
-  let comboboxItemGroupProps = $derived({
-    id: id ?? uid,
-  });
-
-  let attrs = $derived(mergeProps(props, combobox.getItemGroupProps(comboboxItemGroupProps)));
-
-  comboboxItemGroupPropsContext.set(() => comboboxItemGroupProps);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <div {...attrs}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface ComboboxItemGroupProps extends HTMLProps<'div'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {createUniqueId} from '../create-unique-id.js';
+  import {mergeProps} from '../merge-props.js';
+  import {
+    comboboxContext,
+    comboboxItemGroupPropsContext,
+  } from './context.svelte.js';
+
+  let {id, asChild, children, ...props}: ComboboxItemGroupProps = $props();
+
+  let combobox = comboboxContext.get();
+
+  let uid = createUniqueId();
+
+  let comboboxItemGroupProps = $derived({
+    id: id ?? uid,
+  });
+
+  let mergedProps = $derived(
+    mergeProps(props, combobox.getItemGroupProps(comboboxItemGroupProps)),
+  );
+
+  comboboxItemGroupPropsContext.set(() => comboboxItemGroupProps);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/combobox/item-indicator.svelte

@@ -1,27 +1,29 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface ComboboxItemIndicatorProps extends HtmlProps<'span'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {comboboxContext, comboboxItemPropsContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: ComboboxItemIndicatorProps = $props();
-
-  let combobox = comboboxContext.get();
-  let itemProps = comboboxItemPropsContext.get();
-
-  let attrs = $derived(mergeProps(props, combobox.getItemIndicatorProps(itemProps)));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <span {...attrs}>
-    {@render children?.()}
-  </span>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface ComboboxItemIndicatorProps extends HTMLProps<'span'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {comboboxContext, comboboxItemPropsContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: ComboboxItemIndicatorProps = $props();
+
+  let combobox = comboboxContext.get();
+  let itemProps = comboboxItemPropsContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, combobox.getItemIndicatorProps(itemProps)),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/combobox/item-text.svelte

@@ -1,31 +1,33 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface ComboboxItemTextProps extends HtmlProps<'span'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {comboboxContext, comboboxItemPropsContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: ComboboxItemTextProps = $props();
-
-  let combobox = comboboxContext.get();
-  let itemProps = comboboxItemPropsContext.get();
-
-  let attrs = $derived(mergeProps(props, combobox.getItemTextProps(itemProps)));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <span {...attrs}>
-    {#if children}
-      {@render children?.()}
-    {:else}
-      {combobox.collection.stringifyItem(itemProps.item)}
-    {/if}
-  </span>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface ComboboxItemTextProps extends HTMLProps<'span'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {comboboxContext, comboboxItemPropsContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: ComboboxItemTextProps = $props();
+
+  let combobox = comboboxContext.get();
+  let itemProps = comboboxItemPropsContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, combobox.getItemTextProps(itemProps)),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span {...mergedProps}>
+    {#if children}
+      {@render children?.()}
+    {:else}
+      {combobox.collection.stringifyItem(itemProps.item)}
+    {/if}
+  </span>
+{/if}

package/dist/combobox/item.svelte

@@ -1,36 +1,40 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {ItemProps, ItemState} from '@zag-js/combobox';
-  import type {Snippet} from 'svelte';
-
-  export interface ComboboxItemProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
-    asChild?: AsChild<GenericHtmlProps, ItemState>;
-    children?: Snippet<[state: ItemState]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {comboboxContext, comboboxItemPropsContext} from './context.svelte.js';
-
-  let {item, persistFocus, asChild, children, ...props}: ComboboxItemProps = $props();
-
-  let combobox = comboboxContext.get();
-  let itemProps = $derived({
-    item,
-    persistFocus,
-  });
-
-  let state = $derived(combobox.getItemState(itemProps));
-  let attrs = $derived(mergeProps(props, combobox.getItemProps(itemProps)));
-
-  comboboxItemPropsContext.set(() => itemProps);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs, state)}
-{:else}
-  <div {...attrs}>
-    {@render children?.(state)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/combobox';
+  import type {Snippet} from 'svelte';
+
+  export interface ComboboxItemProps
+    extends Assign<Omit<HTMLProps<'div'>, 'children'>, ItemProps> {
+    asChild?: AsChild<ItemState>;
+    children?: Snippet<[ItemState]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {comboboxContext, comboboxItemPropsContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: ComboboxItemProps = $props();
+
+  let combobox = comboboxContext.get();
+
+  let [itemProps, otherProps] = $derived(
+    createSplitProps<ItemProps>(['item', 'persistFocus'])(props),
+  );
+
+  let itemState = $derived(combobox.getItemState(itemProps));
+  let mergedProps = $derived(
+    mergeProps(otherProps, combobox.getItemProps(itemProps)),
+  );
+
+  comboboxItemPropsContext.set(() => itemProps);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, itemState)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(itemState)}
+  </div>
+{/if}

package/dist/combobox/label.svelte

@@ -1,26 +1,26 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface ComboboxLabelProps extends HtmlProps<'label'> {
-    asChild?: AsChild<HtmlProps<'label'>>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {comboboxContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: ComboboxLabelProps = $props();
-
-  let combobox = comboboxContext.get();
-
-  let attrs = $derived(mergeProps(props, combobox.getLabelProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <label {...attrs}>
-    {@render children?.()}
-  </label>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface ComboboxLabelProps extends HTMLProps<'label'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {comboboxContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: ComboboxLabelProps = $props();
+
+  let combobox = comboboxContext.get();
+
+  let mergedProps = $derived(mergeProps(props, combobox.getLabelProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <label {...mergedProps}>
+    {@render children?.()}
+  </label>
+{/if}

package/dist/combobox/list.svelte

@@ -1,26 +1,26 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface ComboboxListProps extends HtmlProps<'div'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {comboboxContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: ComboboxListProps = $props();
-
-  let combobox = comboboxContext.get();
-
-  let attrs = $derived(mergeProps(props, combobox.getListProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <div {...attrs}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface ComboboxListProps extends HTMLProps<'div'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {comboboxContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: ComboboxListProps = $props();
+
+  let combobox = comboboxContext.get();
+
+  let mergedProps = $derived(mergeProps(props, combobox.getListProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}