ui-ingredients 0.0.28 → 0.0.29

package/dist/combobox/positioner.svelte

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

package/dist/combobox/root.svelte

@@ -1,120 +1,83 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {CreateComboboxProps, CreateComboboxReturn} from './create-combobox.svelte.js';
-
-  export interface ComboboxProps<T>
-    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateComboboxProps<T>> {
-    asChild?: AsChild<GenericHtmlProps, CreateComboboxReturn>;
-    children?: Snippet<[combobox: CreateComboboxReturn]>;
-  }
-</script>
-
-<script lang="ts" generics="T">
-  import {mergeProps} from '../utils.svelte.js';
-  import {comboboxContext} from './context.svelte.js';
-  import {createCombobox} from './create-combobox.svelte.js';
-
-  let {
-    id,
-    ids,
-    name,
-    form,
-    open,
-    defaultOpen,
-    items,
-    value,
-    invalid,
-    disabled,
-    multiple,
-    readOnly,
-    required,
-    autoFocus,
-    composite,
-    loopFocus,
-    inputValue,
-    placeholder,
-    positioning,
-    translations,
-    disableLayer,
-    closeOnSelect,
-    inputBehavior,
-    openOnChange,
-    openOnClick,
-    openOnKeyPress,
-    allowCustomValue,
-    highlightedValue,
-    selectionBehavior,
-    itemToString,
-    itemToValue,
-    isItemDisabled,
-    onOpenChange,
-    onValueChange,
-    onFocusOutside,
-    onHighlightChange,
-    onInteractOutside,
-    onInputValueChange,
-    onPointerDownOutside,
-    getSelectionValue,
-    scrollToIndexFn,
-    asChild,
-    children,
-    ...props
-  }: ComboboxProps<T> = $props();
-
-  let combobox = createCombobox({
-    id,
-    ids,
-    name,
-    form,
-    open,
-    defaultOpen,
-    items,
-    value: $state.snapshot(value),
-    invalid,
-    disabled,
-    multiple,
-    readOnly,
-    required,
-    autoFocus,
-    composite,
-    loopFocus,
-    inputValue,
-    placeholder,
-    positioning,
-    translations,
-    disableLayer,
-    closeOnSelect,
-    inputBehavior,
-    openOnChange,
-    openOnClick,
-    openOnKeyPress,
-    allowCustomValue,
-    highlightedValue,
-    selectionBehavior,
-    itemToString,
-    itemToValue,
-    isItemDisabled,
-    onOpenChange,
-    onValueChange,
-    onFocusOutside,
-    onHighlightChange,
-    onInteractOutside,
-    onInputValueChange,
-    onPointerDownOutside,
-    getSelectionValue,
-    scrollToIndexFn,
-  });
-
-  let attrs = $derived(mergeProps(props, combobox.getRootProps()));
-
-  comboboxContext.set(combobox);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs, combobox)}
-{:else}
-  <div {...attrs}>
-    {@render children?.(combobox)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateComboboxProps,
+    CreateComboboxReturn,
+  } from './create-combobox.svelte.js';
+
+  export interface ComboboxProps<T>
+    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateComboboxProps<T>> {
+    asChild?: AsChild<CreateComboboxReturn>;
+    children?: Snippet<[CreateComboboxReturn]>;
+  }
+</script>
+
+<script lang="ts" generics="T">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {comboboxContext} from './context.svelte.js';
+  import {createCombobox} from './create-combobox.svelte.js';
+
+  let {asChild, children, ...props}: ComboboxProps<T> = $props();
+
+  let [comboboxProps, otherProps] = $derived(
+    createSplitProps<CreateComboboxProps<T>>([
+      'id',
+      'ids',
+      'name',
+      'form',
+      'open',
+      'defaultOpen',
+      'items',
+      'value',
+      'invalid',
+      'disabled',
+      'multiple',
+      'readOnly',
+      'required',
+      'autoFocus',
+      'composite',
+      'loopFocus',
+      'inputValue',
+      'placeholder',
+      'positioning',
+      'translations',
+      'disableLayer',
+      'closeOnSelect',
+      'inputBehavior',
+      'openOnChange',
+      'openOnClick',
+      'openOnKeyPress',
+      'allowCustomValue',
+      'highlightedValue',
+      'selectionBehavior',
+      'itemToString',
+      'itemToValue',
+      'isItemDisabled',
+      'onOpenChange',
+      'onValueChange',
+      'onFocusOutside',
+      'onHighlightChange',
+      'onInteractOutside',
+      'onInputValueChange',
+      'onPointerDownOutside',
+      'getSelectionValue',
+      'scrollToIndexFn',
+    ])(props),
+  );
+
+  let combobox = createCombobox(comboboxProps);
+
+  let mergedProps = $derived(mergeProps(otherProps, combobox.getRootProps()));
+
+  comboboxContext.set(combobox);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, combobox)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(combobox)}
+  </div>
+{/if}

package/dist/combobox/trigger.svelte

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

package/dist/context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { GenericObject } from './types.js';
+export declare class Context<T extends GenericObject> {
+    private key;
+    private strict;
+    constructor(key: string, strict?: boolean);
+    get(): T;
+    set(context: T | (() => T)): any;
+}

package/dist/{utils.svelte.js → context.svelte.js}

@@ -1,21 +1,5 @@
-import { mergeProps as originalMergeProps, reflect } from '@zag-js/svelte';
+import { reflect } from '@zag-js/svelte';
 import { getContext, hasContext, setContext } from 'svelte';
-import { uid } from 'uid';
-export const createUniqueId = () => uid();
-export function isObject(value) {
-    return Object.prototype.toString.call(value) === '[object Object]' && value === Object(value);
-}
-export function mergeProps(...args) {
-    const r = originalMergeProps(...args);
-    if (r.style && isObject(r.style)) {
-        let s = '';
-        for (const k in r.style) {
-            s += `${k}:${r.style[k]};`;
-        }
-        r.style = s;
-    }
-    return r;
-}
 export class Context {
     key;
     strict;

package/dist/create-unique-id.d.ts

@@ -0,0 +1 @@
+export declare function createUniqueId(): string;

package/dist/create-unique-id.js

@@ -0,0 +1,4 @@
+import { uid } from 'uid';
+export function createUniqueId() {
+    return uid(16);
+}

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

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

package/dist/date-picker/content.svelte

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

package/dist/date-picker/context.svelte.d.ts

@@ -1,4 +1,4 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 import type { DayTableCellProps, TableCellProps, TableProps, ViewProps } from '@zag-js/date-picker';
 import type { CreateDatePickerReturn } from './create-date-picker.svelte.js';
 export declare const datePickerContext: Context<CreateDatePickerReturn>;

package/dist/date-picker/context.svelte.js

@@ -1,4 +1,4 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 export const datePickerContext = new Context('DatePicker');
 export const datePickerViewPropsContext = new Context('DatePickerView');
 export const datePickerTablePropsContext = new Context('DatePickerTable');

package/dist/date-picker/control.svelte

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

package/dist/date-picker/create-date-picker.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { GenericHtmlProps } from '../types.js';
+import type { GenericObject } from '../types.js';
 import * as datePicker from '@zag-js/date-picker';
 type Omitted = 'id' | 'dir' | 'min' | 'max' | 'value' | 'focusedValue' | 'getRootNode' | 'open.controlled';
 export interface CreateDatePickerProps extends Omit<datePicker.Context, Omitted> {
@@ -10,7 +10,7 @@ export interface CreateDatePickerProps extends Omit<datePicker.Context, Omitted>
     defaultOpen?: boolean;
 }
 export interface CreateDatePickerReturn extends datePicker.Api {
-    getViewProps(props: datePicker.ViewProps): GenericHtmlProps;
+    getViewProps(props: datePicker.ViewProps): GenericObject;
 }
 export declare function createDatePicker(props: CreateDatePickerProps): CreateDatePickerReturn;
 export {};

package/dist/date-picker/create-date-picker.svelte.js

@@ -1,8 +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 * as datePicker from '@zag-js/date-picker';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { parts } from './anatomy.js';
 export function createDatePicker(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
@@ -13,7 +14,9 @@ export function createDatePicker(props) {
         min: props.min ? datePicker.parse(props.min) : undefined,
         max: props.max ? datePicker.parse(props.max) : undefined,
         value: props.value ? datePicker.parse(props.value) : undefined,
-        focusedValue: props.focusedValue ? datePicker.parse(props.focusedValue) : undefined,
+        focusedValue: props.focusedValue
+            ? datePicker.parse(props.focusedValue)
+            : undefined,
         open: props.defaultOpen ?? props.open,
         'open.controlled': props.open != null,
         locale: props.locale ?? locale?.locale,
@@ -25,6 +28,7 @@ export function createDatePicker(props) {
             ...o,
             getViewProps(props) {
                 return {
+                    ...parts.view.attrs,
                     hidden: o.view !== props.view,
                 };
             },

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

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