ui-ingredients 0.0.28 → 0.0.30

package/dist/clipboard/root.svelte

@@ -1,49 +1,48 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {CreateClipboardProps, CreateClipboardReturn} from './create-clipboard.svelte.js';
-
-  export interface ClipboardProps
-    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateClipboardProps> {
-    asChild?: AsChild<GenericHtmlProps, CreateClipboardReturn>;
-    children?: Snippet<[clipboard: CreateClipboardReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {clipboardContext} from './context.svelte.js';
-  import {createClipboard} from './create-clipboard.svelte.js';
-
-  let {
-    /**/
-    id,
-    ids,
-    value,
-    timeout,
-    onStatusChange,
-    asChild,
-    children,
-    ...props
-  }: ClipboardProps = $props();
-
-  let clipboard = createClipboard({
-    id,
-    ids,
-    value: $state.snapshot(value),
-    timeout,
-    onStatusChange,
-  });
-
-  let attrs = $derived(mergeProps(props, clipboard.getRootProps()));
-
-  clipboardContext.set(clipboard);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs, clipboard)}
-{:else}
-  <div {...attrs}>
-    {@render children?.(clipboard)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateClipboardProps,
+    CreateClipboardReturn,
+  } from './create-clipboard.svelte.js';
+
+  export interface ClipboardProps
+    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateClipboardProps> {
+    asChild?: AsChild<CreateClipboardReturn>;
+    children?: Snippet<[CreateClipboardReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {clipboardContext} from './context.svelte.js';
+  import {createClipboard} from './create-clipboard.svelte.js';
+
+  let {asChild, children, ...props}: ClipboardProps = $props();
+
+  let [clipboardProps, otherProps] = $derived(
+    createSplitProps<CreateClipboardProps>([
+      'id',
+      'ids',
+      'value',
+      'timeout',
+      'onStatusChange',
+    ])(props),
+  );
+
+  let clipboard = createClipboard(reflect(() => clipboardProps));
+
+  let mergedProps = $derived(mergeProps(otherProps, clipboard.getRootProps()));
+
+  clipboardContext.set(clipboard);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, clipboard)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(clipboard)}
+  </div>
+{/if}

package/dist/clipboard/trigger.svelte

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

package/dist/collapsible/content.svelte

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

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

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

package/dist/collapsible/context.svelte.js

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

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

package/dist/collapsible/root.svelte

@@ -1,55 +1,52 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {
-    CreateCollapsibleProps,
-    CreateCollapsibleReturn,
-  } from './create-collapsible.svelte.js';
-
-  export interface CollapsibleProps
-    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateCollapsibleProps> {
-    asChild?: AsChild<GenericHtmlProps, CreateCollapsibleReturn>;
-    children?: Snippet<[collapsible: CreateCollapsibleReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {collapsibleContext} from './context.svelte.js';
-  import {createCollapsible} from './create-collapsible.svelte.js';
-
-  let {
-    id,
-    ids,
-    open,
-    disabled,
-    defaultOpen,
-    onOpenChange,
-    onExitComplete,
-    asChild,
-    children,
-    ...props
-  }: CollapsibleProps = $props();
-
-  let collapsible = createCollapsible({
-    id,
-    ids,
-    open,
-    disabled,
-    defaultOpen,
-    onOpenChange,
-    onExitComplete,
-  });
-
-  let attrs = $derived(mergeProps(props, collapsible.getRootProps()));
-
-  collapsibleContext.set(collapsible);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs, collapsible)}
-{:else}
-  <div {...attrs}>
-    {@render children?.(collapsible)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateCollapsibleProps,
+    CreateCollapsibleReturn,
+  } from './create-collapsible.svelte.js';
+
+  export interface CollapsibleProps
+    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateCollapsibleProps> {
+    asChild?: AsChild<CreateCollapsibleReturn>;
+    children?: Snippet<[CreateCollapsibleReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {collapsibleContext} from './context.svelte.js';
+  import {createCollapsible} from './create-collapsible.svelte.js';
+
+  let {asChild, children, ...props}: CollapsibleProps = $props();
+
+  let [collapsibleProps, otherProps] = $derived(
+    createSplitProps<CreateCollapsibleProps>([
+      'id',
+      'ids',
+      'open',
+      'disabled',
+      'defaultOpen',
+      'onOpenChange',
+      'onExitComplete',
+    ])(props),
+  );
+
+  let collapsible = createCollapsible(reflect(() => collapsibleProps));
+
+  let mergedProps = $derived(
+    mergeProps(otherProps, collapsible.getRootProps()),
+  );
+
+  collapsibleContext.set(collapsible);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, collapsible)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(collapsible)}
+  </div>
+{/if}

package/dist/collapsible/trigger.svelte

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

package/dist/color-picker/area-background.svelte

@@ -1,21 +1,26 @@
-<script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-
-  export interface ColorPickerAreaBackgroundProps extends HtmlProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {colorPickerAreaPropsContext, colorPickerContext} from './context.svelte.js';
-
-  let {children, ...props}: ColorPickerAreaBackgroundProps = $props();
-
-  let colorPicker = colorPickerContext.get();
-  let areaProps = colorPickerAreaPropsContext.get();
-
-  let attrs = $derived(mergeProps(props, colorPicker.getAreaBackgroundProps(areaProps)));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" module>
+  import type {HTMLProps} from '../types.js';
+
+  export interface ColorPickerAreaBackgroundProps extends HTMLProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    colorPickerAreaPropsContext,
+    colorPickerContext,
+  } from './context.svelte.js';
+
+  let {children, ...props}: ColorPickerAreaBackgroundProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+  let areaProps = colorPickerAreaPropsContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, colorPicker.getAreaBackgroundProps(areaProps)),
+  );
+</script>
+
+<div {...mergedProps}>
+  {@render children?.()}
+</div>

package/dist/color-picker/area-thumb.svelte

@@ -1,21 +1,26 @@
-<script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-
-  export interface ColorPickerAreaThumbProps extends HtmlProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {colorPickerAreaPropsContext, colorPickerContext} from './context.svelte.js';
-
-  let {children, ...props}: ColorPickerAreaThumbProps = $props();
-
-  let colorPicker = colorPickerContext.get();
-  let areaProps = colorPickerAreaPropsContext.get();
-
-  let attrs = $derived(mergeProps(props, colorPicker.getAreaThumbProps(areaProps)));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" module>
+  import type {HTMLProps} from '../types.js';
+
+  export interface ColorPickerAreaThumbProps extends HTMLProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    colorPickerAreaPropsContext,
+    colorPickerContext,
+  } from './context.svelte.js';
+
+  let {children, ...props}: ColorPickerAreaThumbProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+  let areaProps = colorPickerAreaPropsContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, colorPicker.getAreaThumbProps(areaProps)),
+  );
+</script>
+
+<div {...mergedProps}>
+  {@render children?.()}
+</div>

package/dist/color-picker/area.svelte

@@ -1,27 +1,33 @@
-<script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
-  import type {AreaProps} from '@zag-js/color-picker';
-
-  export interface ColorPickerAreaProps extends Assign<HtmlProps<'div'>, AreaProps> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {colorPickerAreaPropsContext, colorPickerContext} from './context.svelte.js';
-
-  let {xChannel, yChannel, children, ...props}: ColorPickerAreaProps = $props();
-
-  let colorPicker = colorPickerContext.get();
-  let areaProps: AreaProps = $derived({
-    xChannel,
-    yChannel,
-  });
-
-  let attrs = $derived(mergeProps(props, colorPicker.getAreaProps(areaProps)));
-
-  colorPickerAreaPropsContext.set(() => areaProps);
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" module>
+  import type {Assign, HTMLProps} from '../types.js';
+  import type {AreaProps} from '@zag-js/color-picker';
+
+  export interface ColorPickerAreaProps
+    extends Assign<HTMLProps<'div'>, AreaProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    colorPickerAreaPropsContext,
+    colorPickerContext,
+  } from './context.svelte.js';
+
+  let {xChannel, yChannel, children, ...props}: ColorPickerAreaProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+  let areaProps: AreaProps = $derived({
+    xChannel,
+    yChannel,
+  });
+
+  let mergedProps = $derived(
+    mergeProps(props, colorPicker.getAreaProps(areaProps)),
+  );
+
+  colorPickerAreaPropsContext.set(() => areaProps);
+</script>
+
+<div {...mergedProps}>
+  {@render children?.()}
+</div>

package/dist/color-picker/channel-input.svelte

@@ -1,28 +1,28 @@
-<script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
-  import type {ChannelInputProps} from '@zag-js/color-picker';
-
-  export interface ColorPickerChannelInputProps
-    extends Assign<HtmlProps<'input'>, ChannelInputProps> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {colorPickerContext} from './context.svelte.js';
-
-  let {channel, orientation, ...props}: ColorPickerChannelInputProps = $props();
-
-  let colorPicker = colorPickerContext.get();
-
-  let attrs = $derived(
-    mergeProps(
-      props,
-      colorPicker.getChannelInputProps({
-        channel,
-        orientation,
-      }),
-    ),
-  );
-</script>
-
-<input {...attrs} />
+<script lang="ts" module>
+  import type {Assign, HTMLProps} from '../types.js';
+  import type {ChannelInputProps} from '@zag-js/color-picker';
+
+  export interface ColorPickerChannelInputProps
+    extends Assign<HTMLProps<'input'>, ChannelInputProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {colorPickerContext} from './context.svelte.js';
+
+  let {channel, orientation, ...props}: ColorPickerChannelInputProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      colorPicker.getChannelInputProps({
+        channel,
+        orientation,
+      }),
+    ),
+  );
+</script>
+
+<input {...mergedProps} />