ui-ingredients 0.0.27 → 0.0.29

package/dist/tabs/trigger.svelte

@@ -1,35 +1,35 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, HtmlProps} from '../types.js';
-  import type {TriggerProps} from '@zag-js/tabs';
-
-  export interface TabsTriggerProps extends Assign<HtmlProps<'button'>, TriggerProps> {
-    asChild?: AsChild<HtmlProps<'button'>>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {tabsContext} from './context.svelte.js';
-
-  let {value, disabled, asChild, children, ...props}: TabsTriggerProps = $props();
-
-  let tabs = tabsContext.get();
-
-  let attrs = $derived(
-    mergeProps(
-      props,
-      tabs.getTriggerProps({
-        value,
-        disabled,
-      }),
-    ),
-  );
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <button type="button" {...attrs}>
-    {@render children?.()}
-  </button>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {TriggerProps} from '@zag-js/tabs';
+
+  export interface TabsTriggerProps
+    extends Assign<HTMLProps<'button'>, TriggerProps> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {tabsContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: TabsTriggerProps = $props();
+
+  let tabs = tabsContext.get();
+
+  let [triggerProps, otherProps] = $derived(
+    createSplitProps<TriggerProps>(['value', 'disabled'])(props),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(otherProps, tabs.getTriggerProps(triggerProps)),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/tags-input/clear-trigger.svelte

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

package/dist/tags-input/context.svelte.d.ts

@@ -1,4 +1,4 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 import type { ItemProps } from '@zag-js/tags-input';
 import type { CreateTagsInputReturn } from './create-tags-input.svelte.js';
 export declare const tagsInputContext: Context<CreateTagsInputReturn>;

package/dist/tags-input/context.svelte.js

@@ -1,3 +1,3 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 export const tagsInputContext = new Context('TagsInput');
 export const tagsInputItemPropsContext = new Context('TagsInputItem');

package/dist/tags-input/control.svelte

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

package/dist/tags-input/create-tags-input.svelte.d.ts

@@ -4,4 +4,4 @@ export interface CreateTagsInputProps extends Omit<tagsInput.Context, 'id' | 'di
 }
 export interface CreateTagsInputReturn extends tagsInput.Api {
 }
-export declare function createTagsInputt(props: CreateTagsInputProps): any;
+export declare function createTagsInput(props: CreateTagsInputProps): any;

package/dist/tags-input/create-tags-input.svelte.js

@@ -1,9 +1,9 @@
+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 { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as tagsInput from '@zag-js/tags-input';
-export function createTagsInputt(props) {
+export function createTagsInput(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(tagsInput.machine({

package/dist/tags-input/hidden-input.svelte

@@ -1,18 +1,20 @@
-<script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-
-  export interface TagsInputHiddenInputProps extends HtmlProps<'input'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {tagsInputContext} from './context.svelte.js';
-
-  let {...props}: TagsInputHiddenInputProps = $props();
-
-  let tagsInput = tagsInputContext.get();
-
-  let attrs = $derived(mergeProps(props, tagsInput.getHiddenInputProps()));
-</script>
-
-<input {...attrs} />
+<script lang="ts" module>
+  import type {HTMLProps} from '../types.js';
+
+  export interface TagsInputHiddenInputProps extends HTMLProps<'input'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {tagsInputContext} from './context.svelte.js';
+
+  let {...props}: TagsInputHiddenInputProps = $props();
+
+  let tagsInput = tagsInputContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, tagsInput.getHiddenInputProps()),
+  );
+</script>
+
+<input {...mergedProps} />

package/dist/tags-input/input.svelte

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

package/dist/tags-input/item-delete-trigger.svelte

@@ -1,27 +1,32 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface TagsInputItemDeleteTriggerProps extends HtmlProps<'button'> {
-    asChild?: AsChild<HtmlProps<'button'>>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {tagsInputContext, tagsInputItemPropsContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: TagsInputItemDeleteTriggerProps = $props();
-
-  let tagsInput = tagsInputContext.get();
-  let itemProps = tagsInputItemPropsContext.get();
-
-  let attrs = $derived(mergeProps(props, tagsInput.getItemDeleteTriggerProps(itemProps)));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <button type="button" {...attrs}>
-    {@render children?.()}
-  </button>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface TagsInputItemDeleteTriggerProps extends HTMLProps<'button'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    tagsInputContext,
+    tagsInputItemPropsContext,
+  } from './context.svelte.js';
+
+  let {asChild, children, ...props}: TagsInputItemDeleteTriggerProps = $props();
+
+  let tagsInput = tagsInputContext.get();
+  let itemProps = tagsInputItemPropsContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, tagsInput.getItemDeleteTriggerProps(itemProps)),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/tags-input/item-input.svelte

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

package/dist/tags-input/item-preview.svelte

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

package/dist/tags-input/item-text.svelte

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

package/dist/tags-input/item.svelte

@@ -1,38 +1,44 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {ItemProps, ItemState} from '@zag-js/tags-input';
-  import type {Snippet} from 'svelte';
-
-  export interface TagsInputItemProps
-    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 {tagsInputContext, tagsInputItemPropsContext} from './context.svelte.js';
-
-  let {index, value, disabled, asChild, children, ...props}: TagsInputItemProps = $props();
-
-  let tagsInput = tagsInputContext.get();
-  let itemProps = $derived({
-    index,
-    value,
-    disabled,
-  });
-
-  let state = $derived(tagsInput.getItemState(itemProps));
-  let attrs = $derived(mergeProps(props, tagsInput.getItemProps(itemProps)));
-
-  tagsInputItemPropsContext.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/tags-input';
+  import type {Snippet} from 'svelte';
+
+  export interface TagsInputItemProps
+    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 {
+    tagsInputContext,
+    tagsInputItemPropsContext,
+  } from './context.svelte.js';
+
+  let {asChild, children, ...props}: TagsInputItemProps = $props();
+
+  let tagsInput = tagsInputContext.get();
+
+  let [itemProps, otherProps] = $derived(
+    createSplitProps<ItemProps>(['index', 'value', 'disabled'])(props),
+  );
+
+  let itemState = $derived(tagsInput.getItemState(itemProps));
+
+  let mergedProps = $derived(
+    mergeProps(otherProps, tagsInput.getItemProps(itemProps)),
+  );
+
+  tagsInputItemPropsContext.set(() => itemProps);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, itemState)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(itemState)}
+  </div>
+{/if}