ui-ingredients 0.20.0 → 0.21.1

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

@@ -1,55 +1,55 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-  import type {Action} from 'svelte/action';
-
-  export interface AccordionItemContentProps
-    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {createPresence} from '../presence/create-presence.svelte.js';
-  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
-  import {reflect} from '@zag-js/svelte';
-  import {
-    getAccordionContext,
-    getAccordionItemPropsContext,
-  } from './accordion-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AccordionItemContentProps = $props();
-
-  let accordion = getAccordionContext();
-  let itemProps = getAccordionItemPropsContext();
-  let itemsState = $derived(accordion.getItemState(itemProps));
-
-  let presenceStrategyProps = getPresenceStrategyPropsContext();
-  let presence = createPresence(
-    reflect(() => ({
-      ...presenceStrategyProps,
-      present: itemsState.expanded,
-    })),
-  );
-
-  let mergedProps = $derived(
-    mergeProps(
-      accordion.getItemContentProps(itemProps),
-      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 {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
+
+  export interface AccordionItemContentProps
+    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {
+    getAccordionContext,
+    getAccordionItemPropsContext,
+  } from './accordion-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AccordionItemContentProps = $props();
+
+  let accordion = getAccordionContext();
+  let itemProps = getAccordionItemPropsContext();
+  let itemsState = $derived(accordion.getItemState(itemProps));
+
+  let presenceStrategyProps = getPresenceStrategyPropsContext();
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: itemsState.expanded,
+    })),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(
+      accordion.getItemContentProps(itemProps),
+      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/accordion/accordion-root.svelte

@@ -1,66 +1,66 @@
-<script lang="ts" module>
-  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
-  import type {Assign, HtmlIngredientProps} from '../types.js';
-  import type {
-    CreateAccordionProps,
-    CreateAccordionReturn,
-  } from './create-accordion.svelte.js';
-
-  export interface AccordionProps
-    extends Assign<
-        HtmlIngredientProps<'div', HTMLDivElement, CreateAccordionReturn>,
-        CreateAccordionProps
-      >,
-      PresenceStrategyProps {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {setPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
-  import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
-  import {setAccordionContext} from './accordion-context.svelte.js';
-  import {createAccordion} from './create-accordion.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AccordionProps = $props();
-
-  let [presenceStrategyProps, rest] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      props,
-    ),
-  );
-
-  let [createAccordionProps, localProps] = $derived(
-    createSplitProps<CreateAccordionProps>([
-      'id',
-      'ids',
-      'value',
-      'disabled',
-      'multiple',
-      'orientation',
-      'collapsible',
-      'onFocusChange',
-      'onValueChange',
-    ])(rest),
-  );
-
-  let accordion = createAccordion(reflect(() => createAccordionProps));
-
-  let mergedProps = $derived(mergeProps(accordion.getRootProps(), localProps));
-
-  setAccordionContext(accordion);
-  setPresenceStrategyPropsContext(() => presenceStrategyProps);
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps, accordion)}
-{:else}
-  <div bind:this={ref} {...mergedProps}>
-    {@render children?.(accordion)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {
+    CreateAccordionProps,
+    CreateAccordionReturn,
+  } from './create-accordion.svelte.js';
+
+  export interface AccordionProps
+    extends Assign<
+        HtmlIngredientProps<'div', HTMLDivElement, CreateAccordionReturn>,
+        CreateAccordionProps
+      >,
+      PresenceStrategyProps {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {setPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {setAccordionContext} from './accordion-context.svelte.js';
+  import {createAccordion} from './create-accordion.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AccordionProps = $props();
+
+  let [presenceStrategyProps, rest] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      props,
+    ),
+  );
+
+  let [createAccordionProps, localProps] = $derived(
+    createSplitProps<CreateAccordionProps>([
+      'id',
+      'ids',
+      'value',
+      'disabled',
+      'multiple',
+      'orientation',
+      'collapsible',
+      'onFocusChange',
+      'onValueChange',
+    ])(rest),
+  );
+
+  let accordion = createAccordion(reflect(() => createAccordionProps));
+
+  let mergedProps = $derived(mergeProps(accordion.getRootProps(), localProps));
+
+  setAccordionContext(accordion);
+  setPresenceStrategyPropsContext(() => presenceStrategyProps);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, accordion)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.(accordion)}
+  </div>
+{/if}

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

@@ -1,49 +1,49 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-  import type {Action} from 'svelte/action';
-
-  export interface AlertDialogBackdropProps
-    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {createPresence} from '../presence/create-presence.svelte.js';
-  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
-  import {reflect} from '@zag-js/svelte';
-  import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AlertDialogBackdropProps = $props();
-
-  let alertDialog = getAlertDialogContext();
-  let presenceStrategyProps = getPresenceStrategyPropsContext();
-  let presence = createPresence(
-    reflect(() => ({
-      ...presenceStrategyProps,
-      present: alertDialog.open,
-    })),
-  );
-
-  let mergedProps = $derived(
-    mergeProps(
-      alertDialog.getBackdropProps(),
-      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 {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
+
+  export interface AlertDialogBackdropProps
+    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AlertDialogBackdropProps = $props();
+
+  let alertDialog = getAlertDialogContext();
+  let presenceStrategyProps = getPresenceStrategyPropsContext();
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: alertDialog.open,
+    })),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(
+      alertDialog.getBackdropProps(),
+      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-root.svelte

@@ -1,48 +1,48 @@
-<script lang="ts" module>
-  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
-  import type {Snippet} from 'svelte';
-  import type {
-    CreateAlertDialogProps,
-    CreateAlertDialogReturn,
-  } from './create-alert-dialog.svelte.js';
-
-  export interface AlertDialogProps
-    extends CreateAlertDialogProps,
-      PresenceStrategyProps {
-    children?: Snippet<[CreateAlertDialogReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {createPresence} from '../presence/create-presence.svelte.js';
-  import {
-    setPresenceContext,
-    setPresenceStrategyPropsContext,
-  } from '../presence/presence-context.svelte.js';
-  import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
-  import {setAlertDialogContext} from './alert-dialog-context.svelte.js';
-  import {createAlertDialog} from './create-alert-dialog.svelte.js';
-
-  let {children, ...props}: AlertDialogProps = $props();
-
-  let [presenceStrategyProps, createDialogProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      props,
-    ),
-  );
-
-  let alertDialog = createAlertDialog(reflect(() => createDialogProps));
-  let presence = createPresence(
-    reflect(() => ({
-      ...presenceStrategyProps,
-      present: alertDialog.open,
-    })),
-  );
-
-  setAlertDialogContext(alertDialog);
-  setPresenceContext(presence);
-  setPresenceStrategyPropsContext(() => presenceStrategyProps);
-</script>
-
-{@render children?.(alertDialog)}
+<script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateAlertDialogProps,
+    CreateAlertDialogReturn,
+  } from './create-alert-dialog.svelte.js';
+
+  export interface AlertDialogProps
+    extends CreateAlertDialogProps,
+      PresenceStrategyProps {
+    children?: Snippet<[CreateAlertDialogReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {
+    setPresenceContext,
+    setPresenceStrategyPropsContext,
+  } from '../presence/presence-context.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {setAlertDialogContext} from './alert-dialog-context.svelte.js';
+  import {createAlertDialog} from './create-alert-dialog.svelte.js';
+
+  let {children, ...props}: AlertDialogProps = $props();
+
+  let [presenceStrategyProps, createDialogProps] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      props,
+    ),
+  );
+
+  let alertDialog = createAlertDialog(reflect(() => createDialogProps));
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: alertDialog.open,
+    })),
+  );
+
+  setAlertDialogContext(alertDialog);
+  setPresenceContext(presence);
+  setPresenceStrategyPropsContext(() => presenceStrategyProps);
+</script>
+
+{@render children?.(alertDialog)}

package/dist/avatar/avatar-root.svelte

@@ -1,46 +1,46 @@
-<script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
-  import {
-    type CreateAvatarProps,
-    type CreateAvatarReturn,
-  } from './create-avatar.svelte.js';
-
-  export interface AvatarProps
-    extends Assign<
-      HtmlIngredientProps<'div', HTMLDivElement, CreateAvatarReturn>,
-      CreateAvatarProps
-    > {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
-  import {setAvatarContext} from './avatar-context.svelte.js';
-  import {createAvatar} from './create-avatar.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AvatarProps = $props();
-
-  let [createAvatarProps, localProps] = $derived(
-    createSplitProps<CreateAvatarProps>(['id', 'ids', 'onStatusChange'])(props),
-  );
-
-  let avatar = createAvatar(reflect(() => createAvatarProps));
-
-  let mergedProps = $derived(mergeProps(avatar.getRootProps(), localProps));
-
-  setAvatarContext(avatar);
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps, avatar)}
-{:else}
-  <div bind:this={ref} {...mergedProps}>
-    {@render children?.(avatar)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import {
+    type CreateAvatarProps,
+    type CreateAvatarReturn,
+  } from './create-avatar.svelte.js';
+
+  export interface AvatarProps
+    extends Assign<
+      HtmlIngredientProps<'div', HTMLDivElement, CreateAvatarReturn>,
+      CreateAvatarProps
+    > {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {setAvatarContext} from './avatar-context.svelte.js';
+  import {createAvatar} from './create-avatar.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AvatarProps = $props();
+
+  let [createAvatarProps, localProps] = $derived(
+    createSplitProps<CreateAvatarProps>(['id', 'ids', 'onStatusChange'])(props),
+  );
+
+  let avatar = createAvatar(reflect(() => createAvatarProps));
+
+  let mergedProps = $derived(mergeProps(avatar.getRootProps(), localProps));
+
+  setAvatarContext(avatar);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, avatar)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.(avatar)}
+  </div>
+{/if}

package/dist/carousel/carousel-root.svelte

@@ -1,56 +1,56 @@
-<script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
-  import type {
-    CreateCarouselProps,
-    CreateCarouselReturn,
-  } from './create-carousel.svelte.js';
-
-  export interface CarouselProps
-    extends Assign<
-      HtmlIngredientProps<'div', HTMLDivElement, CreateCarouselReturn>,
-      CreateCarouselProps
-    > {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
-  import {setCarouselContext} from './carousel-context.svelte.js';
-  import {createCarousel} from './create-carousel.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: CarouselProps = $props();
-
-  let [createCarouselProps, localProps] = $derived(
-    createSplitProps<CreateCarouselProps>([
-      'id',
-      'ids',
-      'loop',
-      'align',
-      'index',
-      'spacing',
-      'orientation',
-      'slidesPerView',
-      'onIndexChange',
-    ])(props),
-  );
-
-  let carousel = createCarousel(reflect(() => createCarouselProps));
-
-  let mergedProps = $derived(mergeProps(carousel.getRootProps(), localProps));
-
-  setCarouselContext(carousel);
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps, carousel)}
-{:else}
-  <div bind:this={ref} {...mergedProps}>
-    {@render children?.(carousel)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {
+    CreateCarouselProps,
+    CreateCarouselReturn,
+  } from './create-carousel.svelte.js';
+
+  export interface CarouselProps
+    extends Assign<
+      HtmlIngredientProps<'div', HTMLDivElement, CreateCarouselReturn>,
+      CreateCarouselProps
+    > {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {setCarouselContext} from './carousel-context.svelte.js';
+  import {createCarousel} from './create-carousel.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: CarouselProps = $props();
+
+  let [createCarouselProps, localProps] = $derived(
+    createSplitProps<CreateCarouselProps>([
+      'id',
+      'ids',
+      'loop',
+      'align',
+      'index',
+      'spacing',
+      'orientation',
+      'slidesPerView',
+      'onIndexChange',
+    ])(props),
+  );
+
+  let carousel = createCarousel(reflect(() => createCarouselProps));
+
+  let mergedProps = $derived(mergeProps(carousel.getRootProps(), localProps));
+
+  setCarouselContext(carousel);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, carousel)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.(carousel)}
+  </div>
+{/if}