ui-ingredients 0.0.28 → 0.0.30

package/dist/pagination/ellipsis.svelte

@@ -1,27 +1,30 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, HtmlProps} from '../types.js';
-  import type {EllipsisProps} from '@zag-js/pagination';
-
-  export interface PaginationEllipsisProps extends Assign<HtmlProps<'span'>, EllipsisProps> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {paginationContext} from './context.svelte.js';
-
-  let {index, asChild, children, ...props}: PaginationEllipsisProps = $props();
-
-  let pagination = paginationContext.get();
-
-  let attrs = $derived(mergeProps(props, pagination.getEllipsisProps({index})));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <span {...attrs}>
-    {@render children?.()}
-  </span>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {EllipsisProps} from '@zag-js/pagination';
+
+  export interface PaginationEllipsisProps
+    extends Assign<HTMLProps<'span'>, EllipsisProps> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {paginationContext} from './context.svelte.js';
+
+  let {index, asChild, children, ...props}: PaginationEllipsisProps = $props();
+
+  let pagination = paginationContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, pagination.getEllipsisProps({index})),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/pagination/item.svelte

@@ -1,36 +1,36 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, HtmlProps} from '../types.js';
-  import type {ItemProps} from '@zag-js/pagination';
-
-  export interface PaginationItemProps
-    extends Assign<HtmlProps<'button'>, Omit<ItemProps, 'type'>> {
-    asChild?: AsChild<HtmlProps<'button'>>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {paginationContext} from './context.svelte.js';
-
-  let {value, asChild, children, ...props}: PaginationItemProps = $props();
-
-  let pagination = paginationContext.get();
-
-  let attrs = $derived(
-    mergeProps(
-      props,
-      pagination.getItemProps({
-        type: 'page',
-        value,
-      }),
-    ),
-  );
-</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 {ItemProps} from '@zag-js/pagination';
+
+  export interface PaginationItemProps
+    extends Assign<HTMLProps<'button'>, Omit<ItemProps, 'type'>> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {paginationContext} from './context.svelte.js';
+
+  let {value, asChild, children, ...props}: PaginationItemProps = $props();
+
+  let pagination = paginationContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      pagination.getItemProps({
+        type: 'page',
+        value,
+      }),
+    ),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/pagination/next-trigger.svelte

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

package/dist/pagination/prev-trigger.svelte

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

package/dist/pagination/root.svelte

@@ -1,58 +1,53 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {CreatePaginationProps, CreatePaginationReturn} from './create-pagination.svelte.js';
-
-  export interface PaginationProps
-    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreatePaginationProps> {
-    asChild?: AsChild<GenericHtmlProps, CreatePaginationReturn>;
-    children?: Snippet<[pagination: CreatePaginationReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {paginationContext} from './context.svelte.js';
-  import {createPagination} from './create-pagination.svelte.js';
-
-  let {
-    id,
-    ids,
-    type,
-    page,
-    pageSize,
-    count,
-    siblingCount,
-    translations,
-    onPageChange,
-    onPageSizeChange,
-    asChild,
-    children,
-    ...props
-  }: PaginationProps = $props();
-
-  let pagination = createPagination({
-    id,
-    ids,
-    type,
-    page,
-    pageSize,
-    count,
-    siblingCount,
-    translations,
-    onPageChange,
-    onPageSizeChange,
-  });
-
-  let attrs = $derived(mergeProps(props, pagination.getRootProps()));
-
-  paginationContext.set(pagination);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs, pagination)}
-{:else}
-  <div {...attrs}>
-    {@render children?.(pagination)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreatePaginationProps,
+    CreatePaginationReturn,
+  } from './create-pagination.svelte.js';
+
+  export interface PaginationProps
+    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreatePaginationProps> {
+    asChild?: AsChild<CreatePaginationReturn>;
+    children?: Snippet<[CreatePaginationReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {paginationContext} from './context.svelte.js';
+  import {createPagination} from './create-pagination.svelte.js';
+
+  let {asChild, children, ...props}: PaginationProps = $props();
+
+  let [paginationProps, otherProps] = $derived(
+    createSplitProps<CreatePaginationProps>([
+      'id',
+      'ids',
+      'type',
+      'page',
+      'pageSize',
+      'count',
+      'siblingCount',
+      'translations',
+      'onPageChange',
+      'onPageSizeChange',
+    ])(props),
+  );
+
+  let pagination = createPagination(reflect(() => paginationProps));
+
+  let mergedProps = $derived(mergeProps(otherProps, pagination.getRootProps()));
+
+  paginationContext.set(pagination);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, pagination)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(pagination)}
+  </div>
+{/if}

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

@@ -1,29 +1,33 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface PinInputClearTriggerProps extends HtmlProps<'button'> {
-    asChild?: AsChild<HtmlProps<'button'>>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {parts} from './anatomy.js';
-  import {pinInputContext} from './context.svelte.js';
-
-  let {asChild, children, onclick, ...props}: PinInputClearTriggerProps = $props();
-
-  let pinInput = pinInputContext.get();
-
-  let attrs = $derived(
-    mergeProps(props, parts.clearTrigger.attrs, pinInput.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 PinInputClearTriggerProps extends HTMLProps<'button'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {parts} from './anatomy.js';
+  import {pinInputContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: PinInputClearTriggerProps = $props();
+
+  let pinInput = pinInputContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      parts.clearTrigger.attrs,
+      pinInput.getClearTriggerProps(),
+    ),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

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

@@ -1,3 +1,3 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 import type { CreatePinInputReturn } from './create-pin-input.svelte.js';
 export declare const pinInputContext: Context<CreatePinInputReturn>;

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

@@ -1,2 +1,2 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 export const pinInputContext = new Context('PinInput');

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

@@ -1,9 +1,9 @@
-import type { HtmlProps } from '../types.js';
+import type { HTMLProps } from '../types.js';
 import * as pinInput from '@zag-js/pin-input';
 export interface CreatePinInputProps extends Omit<pinInput.Context, 'id' | 'dir' | 'getRootNode'> {
     id?: string | null;
 }
 export interface CreatePinInputReturn extends pinInput.Api {
-    getClearTriggerProps(): HtmlProps<'button'>;
+    getClearTriggerProps(): HTMLProps<'button'>;
 }
 export declare function createPinInputContext(props: CreatePinInputProps): CreatePinInputReturn;

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

@@ -1,6 +1,6 @@
+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 pinInput from '@zag-js/pin-input';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createPinInputContext(props) {

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

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

package/dist/pin-input/input.svelte

@@ -1,25 +1,28 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, HtmlProps} from '../types.js';
-  import type {InputProps} from '@zag-js/pin-input';
-
-  export interface PinInputInputProps extends Assign<HtmlProps<'input'>, InputProps> {
-    asChild?: AsChild<HtmlProps<'input'>>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {pinInputContext} from './context.svelte.js';
-
-  let {index, asChild, ...props}: PinInputInputProps = $props();
-
-  let pinInput = pinInputContext.get();
-
-  let attrs = $derived(mergeProps(props, pinInput.getInputProps({index})));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <input {...attrs} />
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {InputProps} from '@zag-js/pin-input';
+
+  export interface PinInputInputProps
+    extends Assign<HTMLProps<'input'>, InputProps> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {pinInputContext} from './context.svelte.js';
+
+  let {index, asChild, ...props}: PinInputInputProps = $props();
+
+  let pinInput = pinInputContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, pinInput.getInputProps({index})),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <input {...mergedProps} />
+{/if}

package/dist/pin-input/label.svelte

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