ui-ingredients 0.0.27 → 0.0.29

package/dist/pin-input/root.svelte

@@ -1,80 +1,63 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {CreatePinInputProps, CreatePinInputReturn} from './create-pin-input.svelte.js';
-
-  export interface PinInputProps
-    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreatePinInputProps> {
-    asChild?: AsChild<GenericHtmlProps, CreatePinInputReturn>;
-    children?: Snippet<[pinInput: CreatePinInputReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {pinInputContext} from './context.svelte.js';
-  import {createPinInputContext} from './create-pin-input.svelte.js';
-
-  let {
-    id,
-    ids,
-    otp,
-    form,
-    mask,
-    name,
-    type,
-    value,
-    pattern,
-    invalid,
-    disabled,
-    readOnly,
-    required,
-    autoFocus,
-    placeholder,
-    translations,
-    selectOnFocus,
-    blurOnComplete,
-    onValueChange,
-    onValueInvalid,
-    onValueComplete,
-    asChild,
-    children,
-    ...props
-  }: PinInputProps = $props();
-
-  let pinInput = createPinInputContext({
-    id,
-    ids,
-    otp,
-    form,
-    mask,
-    name,
-    type,
-    value: $state.snapshot(value),
-    pattern,
-    invalid,
-    disabled,
-    readOnly,
-    required,
-    autoFocus,
-    placeholder,
-    translations,
-    selectOnFocus,
-    blurOnComplete,
-    onValueChange,
-    onValueInvalid,
-    onValueComplete,
-  });
-
-  let attrs = $derived(mergeProps(props, pinInput.getRootProps()));
-
-  pinInputContext.set(pinInput);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs, pinInput)}
-{:else}
-  <div {...attrs}>
-    {@render children?.(pinInput)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreatePinInputProps,
+    CreatePinInputReturn,
+  } from './create-pin-input.svelte.js';
+
+  export interface PinInputProps
+    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreatePinInputProps> {
+    asChild?: AsChild<CreatePinInputReturn>;
+    children?: Snippet<[CreatePinInputReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {pinInputContext} from './context.svelte.js';
+  import {createPinInputContext} from './create-pin-input.svelte.js';
+
+  let {asChild, children, ...props}: PinInputProps = $props();
+
+  let [pinInputProps, otherProps] = $derived(
+    createSplitProps<CreatePinInputProps>([
+      'id',
+      'ids',
+      'otp',
+      'form',
+      'mask',
+      'name',
+      'type',
+      'value',
+      'pattern',
+      'invalid',
+      'disabled',
+      'readOnly',
+      'required',
+      'autoFocus',
+      'placeholder',
+      'translations',
+      'selectOnFocus',
+      'blurOnComplete',
+      'onValueChange',
+      'onValueInvalid',
+      'onValueComplete',
+    ])(props),
+  );
+
+  let pinInput = createPinInputContext(pinInputProps);
+
+  let mergedProps = $derived(mergeProps(otherProps, pinInput.getRootProps()));
+
+  pinInputContext.set(pinInput);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, pinInput)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(pinInput)}
+  </div>
+{/if}

package/dist/popover/arrow-tip.svelte

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

package/dist/popover/arrow.svelte

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

package/dist/popover/close-trigger.svelte

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

package/dist/popover/content.svelte

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

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

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

package/dist/popover/context.svelte.js

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

package/dist/popover/create-popover.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 popover from '@zag-js/popover';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createPopover(props) {
@@ -10,7 +10,7 @@ export function createPopover(props) {
         ...props,
         id: props.id ?? createUniqueId(),
         dir: locale?.dir,
-        open: props.defaultOpen,
+        open: props.defaultOpen ?? props.open,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
     }));

package/dist/popover/description.svelte

@@ -1,26 +1,26 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface PopoverDescriptionProps extends HtmlProps<'p'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {popoverContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: PopoverDescriptionProps = $props();
-
-  let popover = popoverContext.get();
-
-  let attrs = $derived(mergeProps(props, popover.getDescriptionProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <p {...attrs}>
-    {@render children?.()}
-  </p>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface PopoverDescriptionProps extends HTMLProps<'p'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {popoverContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: PopoverDescriptionProps = $props();
+
+  let popover = popoverContext.get();
+
+  let mergedProps = $derived(mergeProps(props, popover.getDescriptionProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <p {...mergedProps}>
+    {@render children?.()}
+  </p>
+{/if}

package/dist/popover/positioner.svelte

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

package/dist/popover/root.svelte

@@ -1,21 +1,24 @@
-<script lang="ts" module>
-  import type {Snippet} from 'svelte';
-  import type {CreatePopoverProps, CreatePopoverReturn} from './create-popover.svelte.js';
-
-  export interface PopoverProps extends CreatePopoverProps {
-    children?: Snippet<[popover: CreatePopoverReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {popoverContext} from './context.svelte.js';
-  import {createPopover} from './create-popover.svelte.js';
-
-  let {children, ...props}: PopoverProps = $props();
-
-  let popover = createPopover(props);
-
-  popoverContext.set(popover);
-</script>
-
-{@render children?.(popover)}
+<script lang="ts" module>
+  import type {Snippet} from 'svelte';
+  import type {
+    CreatePopoverProps,
+    CreatePopoverReturn,
+  } from './create-popover.svelte.js';
+
+  export interface PopoverProps extends CreatePopoverProps {
+    children?: Snippet<[popover: CreatePopoverReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {popoverContext} from './context.svelte.js';
+  import {createPopover} from './create-popover.svelte.js';
+
+  let {children, ...props}: PopoverProps = $props();
+
+  let popover = createPopover(props);
+
+  popoverContext.set(popover);
+</script>
+
+{@render children?.(popover)}

package/dist/popover/title.svelte

@@ -1,26 +1,26 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface PopoverTitleProps extends HtmlProps<'h2'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {popoverContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: PopoverTitleProps = $props();
-
-  let popover = popoverContext.get();
-
-  let attrs = $derived(mergeProps(props, popover.getTitleProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <h2 {...attrs}>
-    {@render children?.()}
-  </h2>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface PopoverTitleProps extends HTMLProps<'h2'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {popoverContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: PopoverTitleProps = $props();
+
+  let popover = popoverContext.get();
+
+  let mergedProps = $derived(mergeProps(props, popover.getTitleProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <h2 {...mergedProps}>
+    {@render children?.()}
+  </h2>
+{/if}

package/dist/popover/trigger.svelte

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