ui-ingredients 0.0.28 → 0.0.30

package/dist/date-picker/view-control.svelte

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

package/dist/date-picker/view-trigger.svelte

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

package/dist/date-picker/view.svelte

@@ -1,36 +1,42 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, HtmlProps} from '../types.js';
-  import type {ViewProps} from '@zag-js/date-picker';
-
-  export interface DatePickerViewProps extends Assign<HtmlProps<'div'>, ViewProps> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {parts} from './anatomy.js';
-  import {datePickerContext, datePickerViewPropsContext} from './context.svelte.js';
-
-  let {view, asChild, children, ...props}: DatePickerViewProps = $props();
-
-  let datePicker = datePickerContext.get();
-
-  let viewProps: ViewProps = $derived({
-    view: view ?? 'day',
-  });
-
-  let attrs = $derived(
-    mergeProps(props, datePicker.getViewProps(viewProps), parts.view.attrs as Record<string, any>),
-  );
-
-  datePickerViewPropsContext.set(() => viewProps);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <div hidden={datePicker.view !== view} {...attrs}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {ViewProps} from '@zag-js/date-picker';
+
+  export interface DatePickerViewProps
+    extends Assign<HTMLProps<'div'>, ViewProps> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    datePickerContext,
+    datePickerViewPropsContext,
+  } from './context.svelte.js';
+
+  let {
+    view = 'day',
+    asChild,
+    children,
+    ...props
+  }: DatePickerViewProps = $props();
+
+  let datePicker = datePickerContext.get();
+
+  let viewProps: ViewProps = $derived({view});
+
+  let mergedProps = $derived(
+    mergeProps(props, datePicker.getViewProps(viewProps)),
+  );
+
+  datePickerViewPropsContext.set(() => viewProps);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/date-picker/year-select.svelte

@@ -1,47 +1,49 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface DatePickerYearSelectProps extends HtmlProps<'select'> {
-    asChild?: AsChild<HtmlProps<'select'>>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {datePickerContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: DatePickerYearSelectProps = $props();
-
-  let datePicker = datePickerContext.get();
-
-  let attrs = $derived(mergeProps(props, datePicker.getYearSelectProps()));
-
-  function getYears() {
-    const currentYear = new Date().getFullYear();
-
-    const start = currentYear - 1000;
-    const until = currentYear + 1000;
-
-    const years = [];
-
-    for (let i = start; i <= until; i++) {
-      years.unshift(i);
-    }
-
-    return years;
-  }
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <select {...attrs}>
-    {#if children}
-      {@render children()}
-    {:else}
-      {#each getYears() as year}
-        <option value={year}>{year}</option>
-      {/each}
-    {/if}
-  </select>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface DatePickerYearSelectProps extends HTMLProps<'select'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {datePickerContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: DatePickerYearSelectProps = $props();
+
+  let datePicker = datePickerContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, datePicker.getYearSelectProps()),
+  );
+
+  function getYears() {
+    const currentYear = new Date().getFullYear();
+
+    const start = currentYear - 1000;
+    const until = currentYear + 1000;
+
+    const years = [];
+
+    for (let i = start; i <= until; i++) {
+      years.unshift(i);
+    }
+
+    return years;
+  }
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <select {...mergedProps}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {#each getYears() as year}
+        <option value={year}>{year}</option>
+      {/each}
+    {/if}
+  </select>
+{/if}

package/dist/date-picker/year-table-cell-trigger.svelte

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

package/dist/date-picker/year-table-cell.svelte

@@ -1,39 +1,46 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {TableCellProps, TableCellState} from '@zag-js/date-picker';
-  import type {Snippet} from 'svelte';
-
-  export interface DatePickerYearTableCellProps
-    extends Assign<Omit<HtmlProps<'td'>, 'children'>, TableCellProps> {
-    asChild?: AsChild<GenericHtmlProps, TableCellState>;
-    children?: Snippet<[state: TableCellState]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {datePickerContext, datePickerTableCellPropsContext} from './context.svelte.js';
-
-  let {value, disabled, columns, asChild, children, ...props}: DatePickerYearTableCellProps =
-    $props();
-
-  let datePicker = datePickerContext.get();
-  let tableCellProps: TableCellProps = $derived({
-    value,
-    disabled,
-    columns,
-  });
-
-  let state = $derived(datePicker.getYearTableCellState(tableCellProps));
-  let attrs = $derived(mergeProps(props, datePicker.getYearTableCellProps(tableCellProps)));
-
-  datePickerTableCellPropsContext.set(() => tableCellProps);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs, state)}
-{:else}
-  <td {...attrs}>
-    {@render children?.(state)}
-  </td>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {TableCellProps, TableCellState} from '@zag-js/date-picker';
+  import type {Snippet} from 'svelte';
+
+  export interface DatePickerYearTableCellProps
+    extends Assign<Omit<HTMLProps<'td'>, 'children'>, TableCellProps> {
+    asChild?: AsChild<TableCellState>;
+    children?: Snippet<[TableCellState]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {
+    datePickerContext,
+    datePickerTableCellPropsContext,
+  } from './context.svelte.js';
+
+  let {asChild, children, ...props}: DatePickerYearTableCellProps = $props();
+
+  let datePicker = datePickerContext.get();
+
+  let [tableCellProps, otherProps] = $derived(
+    createSplitProps<TableCellProps>(['value', 'disabled', 'columns'])(props),
+  );
+
+  let tableCellState = $derived(
+    datePicker.getYearTableCellState(tableCellProps),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(otherProps, datePicker.getYearTableCellProps(tableCellProps)),
+  );
+
+  datePickerTableCellPropsContext.set(() => tableCellProps);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, tableCellState)}
+{:else}
+  <td {...mergedProps}>
+    {@render children?.(tableCellState)}
+  </td>
+{/if}

package/dist/dialog/backdrop.svelte

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

package/dist/dialog/close-trigger.svelte

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

package/dist/dialog/content.svelte

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

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

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

package/dist/dialog/context.svelte.js

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

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