ui-ingredients 0.0.27 → 0.0.29

package/dist/time-picker/minute-cell.svelte

@@ -1,27 +1,31 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, HtmlProps} from '../types.js';
-  import type {CellProps} from '@zag-js/time-picker';
-
-  export interface TimePickerMinuteCellProps extends Assign<HtmlProps<'div'>, CellProps> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {timePickerContext} from './context.svelte.js';
-
-  let {value, asChild, children, ...props}: TimePickerMinuteCellProps = $props();
-
-  let timePicker = timePickerContext.get();
-
-  let attrs = $derived(mergeProps(props, timePicker.getMinuteCellProps({value})));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <div {...attrs}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {CellProps} from '@zag-js/time-picker';
+
+  export interface TimePickerMinuteCellProps
+    extends Assign<HTMLProps<'div'>, CellProps> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {timePickerContext} from './context.svelte.js';
+
+  let {value, asChild, children, ...props}: TimePickerMinuteCellProps =
+    $props();
+
+  let timePicker = timePickerContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, timePicker.getMinuteCellProps({value})),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/time-picker/period-cell.svelte

@@ -1,34 +1,36 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, HtmlProps} from '../types.js';
-  import type {PeriodCellProps} from '@zag-js/time-picker';
-
-  export interface TimePickerPeriodCellProps extends Assign<HtmlProps<'div'>, PeriodCellProps> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {timePickerContext} from './context.svelte.js';
-
-  let {value, asChild, children, ...props}: TimePickerPeriodCellProps = $props();
-
-  let timePicker = timePickerContext.get();
-
-  let attrs = $derived(
-    mergeProps(
-      props,
-      timePicker.getPeriodCellProps({
-        value,
-      }),
-    ),
-  );
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <div {...attrs}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {PeriodCellProps} from '@zag-js/time-picker';
+
+  export interface TimePickerPeriodCellProps
+    extends Assign<HTMLProps<'div'>, PeriodCellProps> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {timePickerContext} from './context.svelte.js';
+
+  let {value, asChild, children, ...props}: TimePickerPeriodCellProps =
+    $props();
+
+  let timePicker = timePickerContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      timePicker.getPeriodCellProps({
+        value,
+      }),
+    ),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/time-picker/positioner.svelte

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

package/dist/time-picker/root.svelte

@@ -1,76 +1,61 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {CreateTimePickerProps, CreateTimePickerReturn} from './create-time-picker.svelte.js';
-
-  export interface TimePickerProps
-    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTimePickerProps> {
-    asChild?: AsChild<GenericHtmlProps, CreateTimePickerReturn>;
-    children?: Snippet<[timePicker: CreateTimePickerReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {timePickerContext} from './context.svelte.js';
-  import {createTimePicker} from './create-time-picker.svelte.js';
-
-  let {
-    id,
-    ids,
-    min,
-    max,
-    name,
-    open,
-    steps,
-    value,
-    locale,
-    readOnly,
-    disabled,
-    defaultOpen,
-    placeholder,
-    positioning,
-    allowSeconds,
-    disableLayer,
-    onOpenChange,
-    onValueChange,
-    onFocusChange,
-    asChild,
-    children,
-    ...props
-  }: TimePickerProps = $props();
-
-  let timePicker = createTimePicker({
-    id,
-    ids,
-    min,
-    max,
-    name,
-    open,
-    steps,
-    value,
-    locale,
-    readOnly,
-    disabled,
-    defaultOpen,
-    placeholder,
-    positioning,
-    allowSeconds,
-    disableLayer,
-    onOpenChange,
-    onValueChange,
-    onFocusChange,
-  });
-
-  let attrs = $derived(mergeProps(props, timePicker.getRootProps()));
-
-  timePickerContext.set(timePicker);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs, timePicker)}
-{:else}
-  <div {...attrs}>
-    {@render children?.(timePicker)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateTimePickerProps,
+    CreateTimePickerReturn,
+  } from './create-time-picker.svelte.js';
+
+  export interface TimePickerProps
+    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateTimePickerProps> {
+    asChild?: AsChild<CreateTimePickerReturn>;
+    children?: Snippet<[CreateTimePickerReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {timePickerContext} from './context.svelte.js';
+  import {createTimePicker} from './create-time-picker.svelte.js';
+
+  let {asChild, children, ...props}: TimePickerProps = $props();
+
+  let [timePickerProps, otherProps] = $derived(
+    createSplitProps<CreateTimePickerProps>([
+      'id',
+      'ids',
+      'min',
+      'max',
+      'name',
+      'open',
+      'steps',
+      'value',
+      'locale',
+      'readOnly',
+      'disabled',
+      'defaultOpen',
+      'placeholder',
+      'positioning',
+      'allowSeconds',
+      'disableLayer',
+      'onOpenChange',
+      'onValueChange',
+      'onFocusChange',
+    ])(props),
+  );
+
+  let timePicker = createTimePicker(timePickerProps);
+
+  let mergedProps = $derived(mergeProps(otherProps, timePicker.getRootProps()));
+
+  timePickerContext.set(timePicker);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, timePicker)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(timePicker)}
+  </div>
+{/if}

package/dist/time-picker/second-cell.svelte

@@ -1,27 +1,31 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, HtmlProps} from '../types.js';
-  import type {CellProps} from '@zag-js/time-picker';
-
-  export interface TimePickerSecondCellProps extends Assign<HtmlProps<'div'>, CellProps> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {timePickerContext} from './context.svelte.js';
-
-  let {value, asChild, children, ...props}: TimePickerSecondCellProps = $props();
-
-  let timePicker = timePickerContext.get();
-
-  let attrs = $derived(mergeProps(props, timePicker.getSecondCellProps({value})));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <div {...attrs}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {CellProps} from '@zag-js/time-picker';
+
+  export interface TimePickerSecondCellProps
+    extends Assign<HTMLProps<'div'>, CellProps> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {timePickerContext} from './context.svelte.js';
+
+  let {value, asChild, children, ...props}: TimePickerSecondCellProps =
+    $props();
+
+  let timePicker = timePickerContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, timePicker.getSecondCellProps({value})),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/time-picker/spacer.svelte

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

package/dist/time-picker/trigger.svelte

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

package/dist/timer/action-trigger.svelte

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

package/dist/timer/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/timer';
 import type { CreateTimerReturn } from './create-timer.svelte.js';
 export declare const timerContext: Context<CreateTimerReturn>;

package/dist/timer/context.svelte.js

@@ -1,3 +1,3 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 export const timerContext = new Context('Timer');
 export const timerItemPropsContext = new Context('TimerItem');

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

@@ -1,5 +1,5 @@
+import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
-import { createUniqueId } from '../utils.svelte.js';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as timer from '@zag-js/timer';
 export function createTimer(props) {

package/dist/timer/item-label.svelte

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