ui-ingredients 0.0.27 → 0.0.29

package/dist/select/hidden-select.svelte

@@ -1,20 +1,20 @@
-<script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-
-  export interface SelectHiddenSelectProps extends HtmlProps<'select'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {selectContext} from './context.svelte.js';
-
-  let {children, ...props}: SelectHiddenSelectProps = $props();
-
-  let select = selectContext.get();
-
-  let attrs = $derived(mergeProps(props, select.getHiddenSelectProps()));
-</script>
-
-<select {...attrs}>
-  {@render children?.()}
-</select>
+<script lang="ts" module>
+  import type {HTMLProps} from '../types.js';
+
+  export interface SelectHiddenSelectProps extends HTMLProps<'select'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {selectContext} from './context.svelte.js';
+
+  let {children, ...props}: SelectHiddenSelectProps = $props();
+
+  let select = selectContext.get();
+
+  let mergedProps = $derived(mergeProps(props, select.getHiddenSelectProps()));
+</script>
+
+<select {...mergedProps}>
+  {@render children?.()}
+</select>

package/dist/select/indicator.svelte

@@ -1,26 +1,26 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface SelectIndicatorProps extends HtmlProps<'span'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {selectContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: SelectIndicatorProps = $props();
-
-  let select = selectContext.get();
-
-  let attrs = $derived(mergeProps(props, select.getIndicatorProps()));
-</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 SelectIndicatorProps extends HTMLProps<'span'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {selectContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: SelectIndicatorProps = $props();
+
+  let select = selectContext.get();
+
+  let mergedProps = $derived(mergeProps(props, select.getIndicatorProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

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

@@ -1,29 +1,35 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface SelectItemGroupLabelProps extends HtmlProps<'span'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {selectContext, selectItemGroupPropsContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: SelectItemGroupLabelProps = $props();
-
-  let select = selectContext.get();
-  let itemGroupProps = selectItemGroupPropsContext.get();
-
-  let attrs = $derived(
-    mergeProps(props, select.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 SelectItemGroupLabelProps extends HTMLProps<'span'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    selectContext,
+    selectItemGroupPropsContext,
+  } from './context.svelte.js';
+
+  let {asChild, children, ...props}: SelectItemGroupLabelProps = $props();
+
+  let select = selectContext.get();
+  let itemGroupProps = selectItemGroupPropsContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      select.getItemGroupLabelProps({htmlFor: itemGroupProps.id}),
+    ),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/select/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/select';
-
-  export interface SelectItemGroupProps
-    extends Assign<HtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {createUniqueId, mergeProps} from '../utils.svelte.js';
-  import {selectContext, selectItemGroupPropsContext} from './context.svelte.js';
-
-  let {id, asChild, children, ...props}: SelectItemGroupProps = $props();
-
-  let select = selectContext.get();
-
-  let uid = createUniqueId();
-
-  let itemGroupProps = $derived({
-    id: id ?? uid,
-  });
-
-  let attrs = $derived(mergeProps(props, select.getItemGroupProps(itemGroupProps)));
-
-  selectItemGroupPropsContext.set(() => itemGroupProps);
-</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 SelectItemGroupProps extends HTMLProps<'div'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {createUniqueId} from '../create-unique-id.js';
+  import {mergeProps} from '../merge-props.js';
+  import {
+    selectContext,
+    selectItemGroupPropsContext,
+  } from './context.svelte.js';
+
+  let {id, asChild, children, ...props}: SelectItemGroupProps = $props();
+
+  let select = selectContext.get();
+
+  let uid = createUniqueId();
+
+  let itemGroupProps = $derived({
+    id: id ?? uid,
+  });
+
+  let mergedProps = $derived(
+    mergeProps(props, select.getItemGroupProps(itemGroupProps)),
+  );
+
+  selectItemGroupPropsContext.set(() => itemGroupProps);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/select/item-indicator.svelte

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

package/dist/select/item-text.svelte

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

package/dist/select/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/select';
-  import type {Snippet} from 'svelte';
-
-  export interface SelectItemProps 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 {selectContext, selectItemPropsContext} from './context.svelte.js';
-
-  let {item, persistFocus, asChild, children, ...props}: SelectItemProps = $props();
-
-  let select = selectContext.get();
-  let itemProps = $derived({
-    item,
-    persistFocus,
-  });
-
-  let state = $derived(select.getItemState(itemProps));
-  let attrs = $derived(mergeProps(props, select.getItemProps(itemProps)));
-
-  selectItemPropsContext.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/select';
+  import type {Snippet} from 'svelte';
+
+  export interface SelectItemProps
+    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 {selectContext, selectItemPropsContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: SelectItemProps = $props();
+
+  let select = selectContext.get();
+
+  let [itemProps, otherProps] = $derived(
+    createSplitProps<ItemProps>(['item', 'persistFocus'])(props),
+  );
+
+  let itemState = $derived(select.getItemState(itemProps));
+  let mergedProps = $derived(
+    mergeProps(otherProps, select.getItemProps(itemProps)),
+  );
+
+  selectItemPropsContext.set(() => itemProps);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, itemState)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(itemState)}
+  </div>
+{/if}

package/dist/select/label.svelte

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

package/dist/select/list.svelte

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

package/dist/select/positioner.svelte

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