ui-ingredients 0.0.27 → 0.0.29

package/dist/menu/trigger-item.svelte

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

package/dist/menu/trigger.svelte

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

package/dist/merge-props.d.ts

@@ -0,0 +1,2 @@
+import type { GenericObject } from './types.js';
+export declare function mergeProps<T extends GenericObject>(...args: T[]): T;

package/dist/merge-props.js

@@ -0,0 +1,18 @@
+import { mergeProps as fn } from '@zag-js/svelte';
+function isObject(value) {
+    return (Object.prototype.toString.call(value) === '[object Object]' &&
+        value === Object(value));
+}
+export function mergeProps(...args) {
+    const r = fn(...args);
+    const i = 'style';
+    if (r[i] && isObject(r[i])) {
+        let s = '';
+        for (const k in r[i]) {
+            const v = r[i][k];
+            s += `${k}:${v};`;
+        }
+        r[i] = s;
+    }
+    return r;
+}

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

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

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

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

package/dist/number-input/control.svelte

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

package/dist/number-input/create-number-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 numberInput from '@zag-js/number-input';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createNumberInput(props) {

package/dist/number-input/decrement-trigger.svelte

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

package/dist/number-input/increment-trigger.svelte

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

package/dist/number-input/input.svelte

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

package/dist/number-input/label.svelte

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

package/dist/number-input/root.svelte

@@ -1,91 +1,69 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {
-    CreateNumberInputProps,
-    CreateNumberInputReturn,
-  } from './create-number-input.svelte.js';
-
-  export interface NumberInputProps
-    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateNumberInputProps> {
-    asChild?: AsChild<GenericHtmlProps, CreateNumberInputReturn>;
-    children?: Snippet<[numberInput: CreateNumberInputReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {numberInputContext} from './context.svelte.js';
-  import {createNumberInput} from './create-number-input.svelte.js';
-
-  let {
-    id,
-    ids,
-    max,
-    min,
-    step,
-    name,
-    form,
-    value,
-    locale,
-    pattern,
-    invalid,
-    disabled,
-    readOnly,
-    required,
-    inputMode,
-    spinOnPress,
-    translations,
-    formatOptions,
-    allowOverflow,
-    allowMouseWheel,
-    clampValueOnBlur,
-    focusInputOnChange,
-    onFocusChange,
-    onValueChange,
-    onValueInvalid,
-    asChild,
-    children,
-    ...props
-  }: NumberInputProps = $props();
-
-  let numberInput = createNumberInput({
-    id,
-    ids,
-    max,
-    min,
-    step,
-    name,
-    form,
-    value: $state.snapshot(value),
-    locale,
-    pattern,
-    invalid,
-    disabled,
-    readOnly,
-    required,
-    inputMode,
-    spinOnPress,
-    translations,
-    formatOptions,
-    allowOverflow,
-    allowMouseWheel,
-    clampValueOnBlur,
-    focusInputOnChange,
-    onFocusChange,
-    onValueChange,
-    onValueInvalid,
-  });
-
-  let attrs = $derived(mergeProps(props, numberInput.getRootProps()));
-
-  numberInputContext.set(numberInput);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs, numberInput)}
-{:else}
-  <div {...attrs}>
-    {@render children?.(numberInput)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateNumberInputProps,
+    CreateNumberInputReturn,
+  } from './create-number-input.svelte.js';
+
+  export interface NumberInputProps
+    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateNumberInputProps> {
+    asChild?: AsChild<CreateNumberInputReturn>;
+    children?: Snippet<[CreateNumberInputReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {numberInputContext} from './context.svelte.js';
+  import {createNumberInput} from './create-number-input.svelte.js';
+
+  let {asChild, children, ...props}: NumberInputProps = $props();
+
+  let [numberInputProps, otherProps] = $derived(
+    createSplitProps<CreateNumberInputProps>([
+      'id',
+      'ids',
+      'max',
+      'min',
+      'step',
+      'name',
+      'form',
+      'value',
+      'locale',
+      'pattern',
+      'invalid',
+      'disabled',
+      'readOnly',
+      'required',
+      'inputMode',
+      'spinOnPress',
+      'translations',
+      'formatOptions',
+      'allowOverflow',
+      'allowMouseWheel',
+      'clampValueOnBlur',
+      'focusInputOnChange',
+      'onFocusChange',
+      'onValueChange',
+      'onValueInvalid',
+    ])(props),
+  );
+
+  let numberInput = createNumberInput(numberInputProps);
+
+  let mergedProps = $derived(
+    mergeProps(otherProps, numberInput.getRootProps()),
+  );
+
+  numberInputContext.set(numberInput);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, numberInput)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(numberInput)}
+  </div>
+{/if}

package/dist/number-input/scrubber.svelte

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

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

@@ -1,3 +1,3 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 import type { CreatePaginationReturn } from './create-pagination.svelte.js';
 export declare const paginationContext: Context<CreatePaginationReturn>;

package/dist/pagination/context.svelte.js

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

package/dist/pagination/create-pagination.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 pagination from '@zag-js/pagination';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createPagination(props) {