ui-ingredients 0.30.1 → 0.31.0

package/dist/accordion/accordion-item-content.svelte

@@ -7,8 +7,9 @@
 </script>
 
 <script lang="ts">
-  import {mergeProps, reflect} from '@zag-js/svelte';
+  import {reflect} from '@zag-js/svelte';
   import {getCollapsibleContext} from '../collapsible/collapsible-context.svelte.js';
+  import {mergeProps} from '../merge-props.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
   import {

package/dist/accordion/accordion-item-indicator.svelte

@@ -1,35 +1,35 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface AccordionIndicatorProps
-    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {
-    getAccordionContext,
-    getAccordionItemPropsContext,
-  } from './accordion-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AccordionIndicatorProps = $props();
-
-  let accordion = getAccordionContext();
-  let itemProps = getAccordionItemPropsContext();
-  let mergedProps = $derived(
-    mergeProps(accordion.getItemIndicatorProps(itemProps), props),
-  );
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <span bind:this={ref} {...mergedProps}>
-    {@render children?.()}
-  </span>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface AccordionIndicatorProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    getAccordionContext,
+    getAccordionItemPropsContext,
+  } from './accordion-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AccordionIndicatorProps = $props();
+
+  let accordion = getAccordionContext();
+  let itemProps = getAccordionItemPropsContext();
+  let mergedProps = $derived(
+    mergeProps(accordion.getItemIndicatorProps(itemProps), props),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/accordion/accordion-item-trigger.svelte

@@ -1,35 +1,35 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface AccordionItemTriggerProps
-    extends HtmlIngredientProps<'button', HTMLButtonElement> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {
-    getAccordionContext,
-    getAccordionItemPropsContext,
-  } from './accordion-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AccordionItemTriggerProps = $props();
-
-  let accordion = getAccordionContext();
-  let itemProps = getAccordionItemPropsContext();
-  let mergedProps = $derived(
-    mergeProps(accordion.getItemTriggerProps(itemProps), props),
-  );
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <button bind:this={ref} {...mergedProps}>
-    {@render children?.()}
-  </button>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface AccordionItemTriggerProps
+    extends HtmlIngredientProps<'button', HTMLButtonElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    getAccordionContext,
+    getAccordionItemPropsContext,
+  } from './accordion-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AccordionItemTriggerProps = $props();
+
+  let accordion = getAccordionContext();
+  let itemProps = getAccordionItemPropsContext();
+  let mergedProps = $derived(
+    mergeProps(accordion.getItemTriggerProps(itemProps), props),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/accordion/accordion-item.svelte

@@ -10,10 +10,11 @@
 </script>
 
 <script lang="ts">
-  import {mergeProps, reflect} from '@zag-js/svelte';
+  import {reflect} from '@zag-js/svelte';
   import {setCollapsibleContext} from '../collapsible/collapsible-context.svelte.js';
   import {createCollapsible} from '../collapsible/create-collapsible.svelte.js';
   import {createSplitProps} from '../create-split-props.js';
+  import {mergeProps} from '../merge-props.js';
   import {
     getAccordionContext,
     setAccordionItemPropsContext,

package/dist/accordion/accordion-root.svelte

@@ -15,8 +15,9 @@
 </script>
 
 <script lang="ts">
-  import {mergeProps, reflect} from '@zag-js/svelte';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '../create-split-props.js';
+  import {mergeProps} from '../merge-props.js';
   import {setPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
   import {setAccordionContext} from './accordion-context.svelte.js';
   import {createAccordion} from './create-accordion.svelte.js';

package/dist/alert/alert-description.svelte

@@ -1,29 +1,29 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface AlertDescriptionProps
-    extends HtmlIngredientProps<'p', HTMLParagraphElement> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {getAlertContext} from './alert-context.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AlertDescriptionProps = $props();
-
-  let alert = getAlertContext();
-  let mergedProps = $derived(mergeProps(alert.getDescriptionProps(), props));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <p bind:this={ref} {...mergedProps}>
-    {@render children?.()}
-  </p>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface AlertDescriptionProps
+    extends HtmlIngredientProps<'p', HTMLParagraphElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getAlertContext} from './alert-context.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AlertDescriptionProps = $props();
+
+  let alert = getAlertContext();
+  let mergedProps = $derived(mergeProps(alert.getDescriptionProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <p bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </p>
+{/if}

package/dist/alert/alert-indicator.svelte

@@ -1,29 +1,29 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface AlertIndicatorProps
-    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {getAlertContext} from './alert-context.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AlertIndicatorProps = $props();
-
-  let alert = getAlertContext();
-  let mergedProps = $derived(mergeProps(alert.getIndicatorProps(), props));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <span bind:this={ref} {...mergedProps}>
-    {@render children?.()}
-  </span>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface AlertIndicatorProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getAlertContext} from './alert-context.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AlertIndicatorProps = $props();
+
+  let alert = getAlertContext();
+  let mergedProps = $derived(mergeProps(alert.getIndicatorProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/alert/alert-root.svelte

@@ -14,7 +14,8 @@
 
 <script lang="ts">
   import {createSplitProps} from '../create-split-props.js';
-  import {mergeProps, reflect} from '@zag-js/svelte';
+  import {reflect} from '@zag-js/svelte';
+  import {mergeProps} from '../merge-props.js';
   import {setAlertContext} from './alert-context.js';
   import {createAlert} from './create-alert.svelte.js';
 

package/dist/alert/alert-title.svelte

@@ -1,29 +1,29 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface AlertTitleProps
-    extends HtmlIngredientProps<'h2', HTMLHeadingElement> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {getAlertContext} from './alert-context.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AlertTitleProps = $props();
-
-  let alert = getAlertContext();
-  let mergedProps = $derived(mergeProps(alert.getTitleProps(), props));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <h2 bind:this={ref} {...mergedProps}>
-    {@render children?.()}
-  </h2>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface AlertTitleProps
+    extends HtmlIngredientProps<'h2', HTMLHeadingElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getAlertContext} from './alert-context.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AlertTitleProps = $props();
+
+  let alert = getAlertContext();
+  let mergedProps = $derived(mergeProps(alert.getTitleProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <h2 bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </h2>
+{/if}

package/dist/alert-dialog/alert-dialog-backdrop.svelte

@@ -7,7 +7,8 @@
 </script>
 
 <script lang="ts">
-  import {mergeProps, reflect} from '@zag-js/svelte';
+  import {reflect} from '@zag-js/svelte';
+  import {mergeProps} from '../merge-props.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
   import {getAlertDialogContext} from './alert-dialog-context.svelte.js';

package/dist/alert-dialog/alert-dialog-close-trigger.svelte

@@ -1,32 +1,32 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface AlertDialogCloseTriggerProps
-    extends HtmlIngredientProps<'button', HTMLButtonElement> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AlertDialogCloseTriggerProps = $props();
-
-  let alertDialog = getAlertDialogContext();
-
-  let mergedProps = $derived(
-    mergeProps(alertDialog.getCloseTriggerProps(), props),
-  );
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <button bind:this={ref} {...mergedProps}>
-    {@render children?.()}
-  </button>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface AlertDialogCloseTriggerProps
+    extends HtmlIngredientProps<'button', HTMLButtonElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AlertDialogCloseTriggerProps = $props();
+
+  let alertDialog = getAlertDialogContext();
+
+  let mergedProps = $derived(
+    mergeProps(alertDialog.getCloseTriggerProps(), props),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/alert-dialog/alert-dialog-content.svelte

@@ -1,41 +1,41 @@
-<script lang="ts" module>
-  import type {Action} from 'svelte/action';
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface AlertDialogContentProps
-    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {getPresenceContext} from '../presence/presence-context.svelte.js';
-  import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AlertDialogContentProps = $props();
-
-  let alertDialog = getAlertDialogContext();
-  let presence = getPresenceContext();
-
-  let mergedProps = $derived(
-    mergeProps(
-      alertDialog.getContentProps(),
-      presence.getPresenceProps(),
-      props,
-    ),
-  );
-</script>
-
-{#if presence.mounted}
-  {#if asChild}
-    {@render asChild(presence.setReference, mergedProps)}
-  {:else}
-    <div bind:this={ref} use:presence.setReference {...mergedProps}>
-      {@render children?.()}
-    </div>
-  {/if}
-{/if}
+<script lang="ts" module>
+  import type {Action} from 'svelte/action';
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface AlertDialogContentProps
+    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getPresenceContext} from '../presence/presence-context.svelte.js';
+  import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AlertDialogContentProps = $props();
+
+  let alertDialog = getAlertDialogContext();
+  let presence = getPresenceContext();
+
+  let mergedProps = $derived(
+    mergeProps(
+      alertDialog.getContentProps(),
+      presence.getPresenceProps(),
+      props,
+    ),
+  );
+</script>
+
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.setReference, mergedProps)}
+  {:else}
+    <div bind:this={ref} use:presence.setReference {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
+{/if}

package/dist/alert-dialog/alert-dialog-description.svelte

@@ -1,31 +1,31 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface AlertDialogDescriptionProps
-    extends HtmlIngredientProps<'p', HTMLParagraphElement> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AlertDialogDescriptionProps = $props();
-
-  let alertDialog = getAlertDialogContext();
-  let mergedProps = $derived(
-    mergeProps(alertDialog.getDescriptionProps(), props),
-  );
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <p bind:this={ref} {...mergedProps}>
-    {@render children?.()}
-  </p>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface AlertDialogDescriptionProps
+    extends HtmlIngredientProps<'p', HTMLParagraphElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AlertDialogDescriptionProps = $props();
+
+  let alertDialog = getAlertDialogContext();
+  let mergedProps = $derived(
+    mergeProps(alertDialog.getDescriptionProps(), props),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <p bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </p>
+{/if}