ui-ingredients 0.0.28 → 0.0.30

package/dist/avatar/image.svelte

@@ -1,24 +1,24 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface AvatarImageProps extends HtmlProps<'img'> {
-    asChild?: AsChild<HtmlProps<'img'>>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {avatarContext} from './context.svelte.js';
-
-  let {asChild, ...props}: AvatarImageProps = $props();
-
-  let avatar = avatarContext.get();
-
-  let attrs = $derived(mergeProps(props, avatar.getImageProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <img {...attrs} />
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface AvatarImageProps extends HTMLProps<'img'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {avatarContext} from './context.svelte.js';
+
+  let {asChild, ...props}: AvatarImageProps = $props();
+
+  let avatar = avatarContext.get();
+
+  let mergedProps = $derived(mergeProps(props, avatar.getImageProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <img {...mergedProps} />
+{/if}

package/dist/avatar/root.svelte

@@ -1,37 +1,42 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import {type CreateAvatarProps, type CreateAvatarReturn} from './create-avatar.svelte.js';
-
-  export interface AvatarProps
-    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateAvatarProps> {
-    asChild?: AsChild<GenericHtmlProps, CreateAvatarReturn>;
-    children?: Snippet<[avatar: CreateAvatarReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {avatarContext} from './context.svelte.js';
-  import {createAvatar} from './create-avatar.svelte.js';
-
-  let {id, ids, onStatusChange, asChild, children, ...props}: AvatarProps = $props();
-
-  let avatar = createAvatar({
-    id,
-    ids,
-    onStatusChange,
-  });
-
-  let attrs = $derived(mergeProps(props, avatar.getRootProps()));
-
-  avatarContext.set(avatar);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs, avatar)}
-{:else}
-  <div {...attrs}>
-    {@render children?.(avatar)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import {
+    type CreateAvatarProps,
+    type CreateAvatarReturn,
+  } from './create-avatar.svelte.js';
+
+  export interface AvatarProps
+    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateAvatarProps> {
+    asChild?: AsChild<CreateAvatarReturn>;
+    children?: Snippet<[CreateAvatarReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {avatarContext} from './context.svelte.js';
+  import {createAvatar} from './create-avatar.svelte.js';
+
+  let {asChild, children, ...props}: AvatarProps = $props();
+
+  let [avatarProps, otherProps] = $derived(
+    createSplitProps<CreateAvatarProps>(['id', 'ids', 'onStatusChange'])(props),
+  );
+
+  let avatar = createAvatar(reflect(() => avatarProps));
+
+  let mergedProps = $derived(mergeProps(otherProps, avatar.getRootProps()));
+
+  avatarContext.set(avatar);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, avatar)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(avatar)}
+  </div>
+{/if}

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

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

package/dist/carousel/context.svelte.js

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

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

package/dist/carousel/indicator-group.svelte

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

package/dist/carousel/indicator.svelte

@@ -1,35 +1,35 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, HtmlProps} from '../types.js';
-  import type {IndicatorProps} from '@zag-js/carousel';
-
-  export interface CarouselIndicatorProps extends Assign<HtmlProps<'button'>, IndicatorProps> {
-    asChild?: AsChild<HtmlProps<'button'>>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {carouselContext} from './context.svelte.js';
-
-  let {index, readOnly, asChild, children, ...props}: CarouselIndicatorProps = $props();
-
-  let carousel = carouselContext.get();
-
-  let attrs = $derived(
-    mergeProps(
-      props,
-      carousel.getIndicatorProps({
-        index,
-        readOnly,
-      }),
-    ),
-  );
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <button type="button" {...attrs}>
-    {@render children?.()}
-  </button>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {IndicatorProps} from '@zag-js/carousel';
+
+  export interface CarouselIndicatorProps
+    extends Assign<HTMLProps<'button'>, IndicatorProps> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {carouselContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: CarouselIndicatorProps = $props();
+
+  let carousel = carouselContext.get();
+
+  let [indicatorProps, otherProps] = $derived(
+    createSplitProps<IndicatorProps>(['index', 'readOnly'])(props),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(otherProps, carousel.getIndicatorProps(indicatorProps)),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/carousel/item-group.svelte

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

package/dist/carousel/item.svelte

@@ -1,30 +1,38 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {ItemProps, ItemState} from '@zag-js/carousel';
-  import type {Snippet} from 'svelte';
-
-  export interface CarouselItemProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
-    asChild?: AsChild<GenericHtmlProps, ItemState>;
-    children?: Snippet<[state: ItemState]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {carouselContext} from './context.svelte.js';
-
-  let {index, asChild, children, ...props}: CarouselItemProps = $props();
-
-  let carousel = carouselContext.get();
-
-  let state = $derived(carousel.getItemState({index}));
-  let attrs = $derived(mergeProps(props, carousel.getItemProps({index})));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs, state)}
-{:else}
-  <div {...attrs}>
-    {@render children?.(state)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/carousel';
+  import type {Snippet} from 'svelte';
+
+  export interface CarouselItemProps
+    extends Assign<Omit<HTMLProps<'div'>, 'children'>, ItemProps> {
+    asChild?: AsChild<ItemState>;
+    children?: Snippet<[ItemState]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {carouselContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: CarouselItemProps = $props();
+
+  let carousel = carouselContext.get();
+
+  let [itemProps, otherProps] = $derived(
+    createSplitProps<ItemProps>(['index'])(props),
+  );
+
+  let itemState = $derived(carousel.getItemState(itemProps));
+  let mergedProps = $derived(
+    mergeProps(otherProps, carousel.getItemProps(itemProps)),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, itemState)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(itemState)}
+  </div>
+{/if}

package/dist/carousel/next-trigger.svelte

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

package/dist/carousel/prev-trigger.svelte

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

package/dist/carousel/root.svelte

@@ -1,56 +1,52 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {CreateCarouselProps, CreateCarouselReturn} from './create-carousel.svelte.js';
-
-  export interface CarouselProps
-    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateCarouselProps> {
-    asChild?: AsChild<GenericHtmlProps, CreateCarouselReturn>;
-    children?: Snippet<[carousel: CreateCarouselReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {carouselContext} from './context.svelte.js';
-  import {createCarousel} from './create-carousel.svelte.js';
-
-  let {
-    id,
-    ids,
-    loop,
-    align,
-    index,
-    spacing,
-    orientation,
-    slidesPerView,
-    onIndexChange,
-    asChild,
-    children,
-    ...props
-  }: CarouselProps = $props();
-
-  let carousel = createCarousel({
-    id,
-    ids,
-    loop,
-    align,
-    index: $state.snapshot(index),
-    spacing,
-    orientation,
-    slidesPerView,
-    onIndexChange,
-  });
-
-  let attrs = $derived(mergeProps(props, carousel.getRootProps()));
-
-  carouselContext.set(carousel);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs, carousel)}
-{:else}
-  <div {...attrs}>
-    {@render children?.(carousel)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateCarouselProps,
+    CreateCarouselReturn,
+  } from './create-carousel.svelte.js';
+
+  export interface CarouselProps
+    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateCarouselProps> {
+    asChild?: AsChild<CreateCarouselReturn>;
+    children?: Snippet<[CreateCarouselReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {carouselContext} from './context.svelte.js';
+  import {createCarousel} from './create-carousel.svelte.js';
+
+  let {asChild, children, ...props}: CarouselProps = $props();
+
+  let [carouselProps, otherProps] = $derived(
+    createSplitProps<CreateCarouselProps>([
+      'id',
+      'ids',
+      'loop',
+      'align',
+      'index',
+      'spacing',
+      'orientation',
+      'slidesPerView',
+      'onIndexChange',
+    ])(props),
+  );
+
+  let carousel = createCarousel(reflect(() => carouselProps));
+
+  let mergedProps = $derived(mergeProps(otherProps, carousel.getRootProps()));
+
+  carouselContext.set(carousel);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, carousel)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(carousel)}
+  </div>
+{/if}