ui-ingredients 0.26.0 → 0.28.0

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

@@ -21,7 +21,6 @@
 
   let accordion = getAccordionContext();
   let itemProps = getAccordionItemPropsContext();
-
   let mergedProps = $derived(
     mergeProps(accordion.getItemIndicatorProps(itemProps), props),
   );

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

@@ -21,7 +21,6 @@
 
   let accordion = getAccordionContext();
   let itemProps = getAccordionItemPropsContext();
-
   let mergedProps = $derived(
     mergeProps(accordion.getItemTriggerProps(itemProps), props),
   );

package/dist/accordion/accordion-root.svelte

@@ -36,20 +36,19 @@
 
   let [createAccordionProps, localProps] = $derived(
     createSplitProps<CreateAccordionProps>([
+      'collapsible',
+      'disabled',
       'id',
       'ids',
-      'value',
-      'disabled',
       'multiple',
-      'orientation',
-      'collapsible',
       'onFocusChange',
       'onValueChange',
+      'orientation',
+      'value',
     ])(rest),
   );
 
   let accordion = createAccordion(reflect(() => createAccordionProps));
-
   let mergedProps = $derived(mergeProps(accordion.getRootProps(), localProps));
 
   setAccordionContext(accordion);

package/dist/alert/alert-description.svelte

@@ -17,14 +17,13 @@
   }: AlertDescriptionProps = $props();
 
   let alert = getAlertContext();
-
-  let attrs = $derived(mergeProps(alert.getDescriptionProps(), props));
+  let mergedProps = $derived(mergeProps(alert.getDescriptionProps(), props));
 </script>
 
 {#if asChild}
-  {@render asChild(attrs)}
+  {@render asChild(mergedProps)}
 {:else}
-  <p bind:this={ref} {...attrs}>
+  <p bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </p>
 {/if}

package/dist/alert/alert-indicator.svelte

@@ -17,14 +17,13 @@
   }: AlertIndicatorProps = $props();
 
   let alert = getAlertContext();
-
-  let attrs = $derived(mergeProps(alert.getIndicatorProps(), props));
+  let mergedProps = $derived(mergeProps(alert.getIndicatorProps(), props));
 </script>
 
 {#if asChild}
-  {@render asChild(attrs)}
+  {@render asChild(mergedProps)}
 {:else}
-  <span bind:this={ref} {...attrs}>
+  <span bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/alert/alert-root.svelte

@@ -19,16 +19,15 @@
   }: AlertProps = $props();
 
   let alert = createAlert();
-
-  let attrs = $derived(mergeProps(alert.getRootProps(), props));
+  let mergedProps = $derived(mergeProps(alert.getRootProps(), props));
 
   setAlertContext(alert);
 </script>
 
 {#if asChild}
-  {@render asChild(attrs, alert)}
+  {@render asChild(mergedProps, alert)}
 {:else}
-  <div bind:this={ref} {...attrs}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(alert)}
   </div>
 {/if}

package/dist/alert/alert-title.svelte

@@ -17,14 +17,13 @@
   }: AlertTitleProps = $props();
 
   let alert = getAlertContext();
-
-  let attrs = $derived(mergeProps(alert.getTitleProps(), props));
+  let mergedProps = $derived(mergeProps(alert.getTitleProps(), props));
 </script>
 
 {#if asChild}
-  {@render asChild(attrs)}
+  {@render asChild(mergedProps)}
 {:else}
-  <h2 bind:this={ref} {...attrs}>
+  <h2 bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </h2>
 {/if}

package/dist/alert-dialog/alert-dialog-anatomy.d.ts

@@ -1,2 +1,2 @@
-export declare const anatomy: import("@zag-js/anatomy").Anatomy<"title" | "content" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger">;
-export declare const parts: Record<"title" | "content" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger", import("@zag-js/anatomy").AnatomyPart>;
+export declare const anatomy: import("@zag-js/anatomy").Anatomy<"content" | "title" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger">;
+export declare const parts: Record<"content" | "title" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger", import("@zag-js/anatomy").AnatomyPart>;

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

@@ -17,7 +17,6 @@
   }: AlertDialogDescriptionProps = $props();
 
   let alertDialog = getAlertDialogContext();
-
   let mergedProps = $derived(
     mergeProps(alertDialog.getDescriptionProps(), props),
   );

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

@@ -19,7 +19,6 @@
 
   let alertDialog = getAlertDialogContext();
   let presence = getPresenceContext();
-
   let mergedProps = $derived(
     mergeProps(
       alertDialog.getPositionerProps(),

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

@@ -17,7 +17,6 @@
   }: AlertDialogTitleProps = $props();
 
   let alertDialog = getAlertDialogContext();
-
   let mergedProps = $derived(mergeProps(alertDialog.getTitleProps(), props));
 </script>
 

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

@@ -17,7 +17,6 @@
   }: AlertDialogTriggerProps = $props();
 
   let alertDialog = getAlertDialogContext();
-
   let mergedProps = $derived(mergeProps(alertDialog.getTriggerProps(), props));
 </script>
 

package/dist/angle-slider/angle-slider-marker.svelte

@@ -23,7 +23,6 @@
   );
 
   let angleSlider = getAngleSliderContext();
-
   let mergedProps = $derived(
     mergeProps(angleSlider.getMarkerProps(markerProps), localProps),
   );

package/dist/angle-slider/angle-slider-root.svelte

@@ -27,21 +27,20 @@
 
   let [createAngleSliderProps, localProps] = $derived(
     createSplitProps<CreateAngleSliderProps>([
+      'disabled',
       'id',
       'ids',
-      'name',
-      'step',
-      'value',
       'invalid',
-      'disabled',
-      'readOnly',
+      'name',
       'onValueChange',
       'onValueChangeEnd',
+      'readOnly',
+      'step',
+      'value',
     ])(props),
   );
 
   let angleSlider = createAngleSlider(reflect(() => createAngleSliderProps));
-
   let mergedProps = $derived(
     mergeProps(angleSlider.getRootProps(), localProps),
   );

package/dist/avatar/avatar-fallback.svelte

@@ -17,7 +17,6 @@
   }: AvatarFallbackProps = $props();
 
   let avatar = getAvatarContext();
-
   let mergedProps = $derived(mergeProps(avatar.getFallbackProps(), props));
 </script>
 

package/dist/avatar/avatar-image.svelte

@@ -12,7 +12,6 @@
   let {ref = $bindable(null), asChild, ...props}: AvatarImageProps = $props();
 
   let avatar = getAvatarContext();
-
   let mergedProps = $derived(mergeProps(avatar.getImageProps(), props));
 </script>
 

package/dist/avatar/avatar-root.svelte

@@ -30,7 +30,6 @@
   );
 
   let avatar = createAvatar(reflect(() => createAvatarProps));
-
   let mergedProps = $derived(mergeProps(avatar.getRootProps(), localProps));
 
   setAvatarContext(avatar);

package/dist/breadcrumbs/breadcrumbs-item.svelte

@@ -17,14 +17,13 @@
   }: BreadcrumbsItemProps = $props();
 
   let breadcrumbs = createBreadcrumbs();
-
-  let attrs = $derived(mergeProps(breadcrumbs.getItemProps(), props));
+  let mergedProps = $derived(mergeProps(breadcrumbs.getItemProps(), props));
 </script>
 
 {#if asChild}
-  {@render asChild(attrs)}
+  {@render asChild(mergedProps)}
 {:else}
-  <li bind:this={ref} {...attrs}>
+  <li bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </li>
 {/if}

package/dist/breadcrumbs/breadcrumbs-link.svelte

@@ -23,16 +23,15 @@
   );
 
   let breadcrumbs = getBreadcrumbsContext();
-
-  let attrs = $derived(
+  let mergedProps = $derived(
     mergeProps(breadcrumbs.getLinkProps(linkProps), localProps),
   );
 </script>
 
 {#if asChild}
-  {@render asChild(attrs)}
+  {@render asChild(mergedProps)}
 {:else}
-  <a bind:this={ref} {...attrs}>
+  <a bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </a>
 {/if}

package/dist/breadcrumbs/breadcrumbs-list.svelte

@@ -17,14 +17,13 @@
   }: BreadcrumbsListProps = $props();
 
   let breadcrumbs = getBreadcrumbsContext();
-
-  let attrs = $derived(mergeProps(breadcrumbs.getListProps(), props));
+  let mergedProps = $derived(mergeProps(breadcrumbs.getListProps(), props));
 </script>
 
 {#if asChild}
-  {@render asChild(attrs)}
+  {@render asChild(mergedProps)}
 {:else}
-  <ol bind:this={ref} {...attrs}>
+  <ol bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </ol>
 {/if}

package/dist/breadcrumbs/breadcrumbs-root.svelte

@@ -19,16 +19,15 @@
   }: BreadcrumbsProps = $props();
 
   let breadcrumbs = createBreadcrumbs();
-
-  let attrs = $derived(mergeProps(breadcrumbs.getRootProps(), props));
+  let mergedProps = $derived(mergeProps(breadcrumbs.getRootProps(), props));
 
   setBreadcrumbsContext(breadcrumbs);
 </script>
 
 {#if asChild}
-  {@render asChild(attrs, breadcrumbs)}
+  {@render asChild(mergedProps, breadcrumbs)}
 {:else}
-  <nav bind:this={ref} {...attrs}>
+  <nav bind:this={ref} {...mergedProps}>
     {@render children?.(breadcrumbs)}
   </nav>
 {/if}

package/dist/breadcrumbs/breadcrumbs-separator.svelte

@@ -17,14 +17,15 @@
   }: BreadcrumbsSeparatorProps = $props();
 
   let breadcrumbs = getBreadcrumbsContext();
-
-  let attrs = $derived(mergeProps(breadcrumbs.getSeparatorProps(), props));
+  let mergedProps = $derived(
+    mergeProps(breadcrumbs.getSeparatorProps(), props),
+  );
 </script>
 
 {#if asChild}
-  {@render asChild(attrs)}
+  {@render asChild(mergedProps)}
 {:else}
-  <span bind:this={ref} {...attrs}>
+  <span bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/carousel/carousel-autoplay-trigger.svelte

@@ -17,7 +17,6 @@
   }: CarouselAutoplayTriggerProps = $props();
 
   let carousel = getCarouselContext();
-
   let mergedProps = $derived(
     mergeProps(carousel.getAutoplayTriggerProps(), props),
   );

package/dist/carousel/carousel-control.svelte

@@ -17,7 +17,6 @@
   }: CarouselControlProps = $props();
 
   let carousel = getCarouselContext();
-
   let mergedProps = $derived(mergeProps(carousel.getControlProps(), props));
 </script>
 

package/dist/carousel/carousel-indicator-group.svelte

@@ -17,7 +17,6 @@
   }: CarouselIndicatorGroupProps = $props();
 
   let carousel = getCarouselContext();
-
   let mergedProps = $derived(
     mergeProps(carousel.getIndicatorGroupProps(), props),
   );

package/dist/carousel/carousel-indicator.svelte

@@ -21,12 +21,11 @@
     ...props
   }: CarouselIndicatorProps = $props();
 
-  let carousel = getCarouselContext();
-
   let [indicatorProps, localProps] = $derived(
     createSplitProps<IndicatorProps>(['index', 'readOnly'])(props),
   );
 
+  let carousel = getCarouselContext();
   let mergedProps = $derived(
     mergeProps(carousel.getIndicatorProps(indicatorProps), localProps),
   );

package/dist/carousel/carousel-item-group.svelte

@@ -17,7 +17,6 @@
   }: CarouselItemGroupProps = $props();
 
   let carousel = getCarouselContext();
-
   let mergedProps = $derived(mergeProps(carousel.getItemGroupProps(), props));
 </script>
 

package/dist/carousel/carousel-item.svelte

@@ -18,12 +18,11 @@
     ...props
   }: CarouselItemProps = $props();
 
-  let carousel = getCarouselContext();
-
   let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>(['index'])(props),
   );
 
+  let carousel = getCarouselContext();
   let mergedProps = $derived(
     mergeProps(carousel.getItemProps(itemProps), localProps),
   );

package/dist/carousel/carousel-next-trigger.svelte

@@ -17,7 +17,6 @@
   }: CarouselNextTriggerProps = $props();
 
   let carousel = getCarouselContext();
-
   let mergedProps = $derived(mergeProps(carousel.getNextTriggerProps(), props));
 </script>
 

package/dist/carousel/carousel-prev-trigger.svelte

@@ -17,7 +17,6 @@
   }: CarouselPrevTriggerProps = $props();
 
   let carousel = getCarouselContext();
-
   let mergedProps = $derived(mergeProps(carousel.getPrevTriggerProps(), props));
 </script>
 

package/dist/carousel/carousel-root.svelte

@@ -49,7 +49,6 @@
   );
 
   let carousel = createCarousel(reflect(() => createCarouselProps));
-
   let mergedProps = $derived(mergeProps(carousel.getRootProps(), localProps));
 
   setCarouselContext(carousel);

package/dist/checkbox/checkbox-control.svelte

@@ -17,7 +17,6 @@
   }: CheckboxControlProps = $props();
 
   let checkbox = getCheckboxContext();
-
   let mergedProps = $derived(mergeProps(checkbox.getControlProps(), props));
 </script>
 

package/dist/checkbox/checkbox-hidden-input.svelte

@@ -16,7 +16,6 @@
   }: CheckboxHiddenInputProps = $props();
 
   let checkbox = getCheckboxContext();
-
   let mergedProps = $derived(mergeProps(checkbox.getHiddenInputProps(), props));
 </script>
 

package/dist/checkbox/checkbox-indicator.svelte

@@ -17,7 +17,6 @@
   }: CheckboxIndicatorProps = $props();
 
   let checkbox = getCheckboxContext();
-
   let mergedProps = $derived(mergeProps(checkbox.getIndicatorProps(), props));
 </script>
 

package/dist/checkbox/checkbox-label.svelte

@@ -17,7 +17,6 @@
   }: CheckboxLabelProps = $props();
 
   let checkbox = getCheckboxContext();
-
   let mergedProps = $derived(mergeProps(checkbox.getLabelProps(), props));
 </script>
 

package/dist/checkbox/checkbox-root.svelte

@@ -29,17 +29,17 @@
 
   let [createCheckboxProps, localProps] = $derived(
     createSplitProps<CreateCheckboxProps>([
+      'checked',
+      'disabled',
+      'form',
       'id',
       'ids',
-      'form',
-      'name',
-      'value',
-      'checked',
       'invalid',
-      'disabled',
+      'name',
+      'onCheckedChange',
       'readOnly',
       'required',
-      'onCheckedChange',
+      'value',
     ])(props),
   );
 

package/dist/clipboard/clipboard-control.svelte

@@ -17,7 +17,6 @@
   }: ClipboardControlProps = $props();
 
   let clipboard = getClipboardContext();
-
   let mergedProps = $derived(mergeProps(clipboard.getControlProps(), props));
 </script>
 

package/dist/clipboard/clipboard-indicator.svelte

@@ -21,20 +21,16 @@
   }: ClipboardIndicatorProps = $props();
 
   let clipboard = getClipboardContext();
-
-  let state = $derived({
-    copied: clipboard.copied,
-  });
-
+  let indicatorState: IndicatorState = $derived({copied: clipboard.copied});
   let mergedProps = $derived(
-    mergeProps(clipboard.getIndicatorProps(state), props),
+    mergeProps(clipboard.getIndicatorProps(indicatorState), props),
   );
 </script>
 
 {#if asChild}
-  {@render asChild(mergedProps, state)}
+  {@render asChild(mergedProps, indicatorState)}
 {:else}
   <span bind:this={ref} {...mergedProps}>
-    {@render children?.(state)}
+    {@render children?.(indicatorState)}
   </span>
 {/if}

package/dist/clipboard/clipboard-input.svelte

@@ -16,7 +16,6 @@
   }: ClipboardInputProps = $props();
 
   let clipboard = getClipboardContext();
-
   let mergedProps = $derived(mergeProps(clipboard.getInputProps(), props));
 </script>
 

package/dist/clipboard/clipboard-label.svelte

@@ -17,7 +17,6 @@
   }: ClipboardLabelProps = $props();
 
   let clipboard = getClipboardContext();
-
   let mergedProps = $derived(mergeProps(clipboard.getLabelProps(), props));
 </script>
 

package/dist/clipboard/clipboard-root.svelte

@@ -29,9 +29,9 @@
     createSplitProps<CreateClipboardProps>([
       'id',
       'ids',
-      'value',
-      'timeout',
       'onStatusChange',
+      'timeout',
+      'value',
     ])(props),
   );
 

package/dist/clipboard/clipboard-trigger.svelte

@@ -17,7 +17,6 @@
   }: ClipboardTriggerProps = $props();
 
   let clipboard = getClipboardContext();
-
   let mergedProps = $derived(mergeProps(clipboard.getTriggerProps(), props));
 </script>
 

package/dist/collapsible/collapsible-content.svelte

@@ -20,7 +20,6 @@
 
   let collapsible = getCollapsibleContext();
   let presence = getPresenceContext();
-
   let mergedProps = $derived(
     mergeProps(
       collapsible.getContentProps(),

package/dist/collapsible/collapsible-root.svelte

@@ -37,13 +37,13 @@
 
   let [createCollapsibleProps, localProps] = $derived(
     createSplitProps<CreateCollapsibleProps>([
+      'disabled',
       'id',
       'ids',
+      'onExitComplete',
+      'onOpenChange',
       'open',
       'openControlled',
-      'disabled',
-      'onOpenChange',
-      'onExitComplete',
     ])(rest),
   );
 

package/dist/color-picker/color-picker-anatomy.d.ts

@@ -1,2 +1,2 @@
-export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"content" | "trigger" | "positioner" | "root" | "area" | "label" | "control" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect" | "view">;
-export declare const parts: Record<"content" | "trigger" | "positioner" | "root" | "area" | "label" | "control" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect" | "view", import("@zag-js/anatomy").AnatomyPart>;
+export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"content" | "trigger" | "positioner" | "root" | "label" | "area" | "control" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect" | "view">;
+export declare const parts: Record<"content" | "trigger" | "positioner" | "root" | "label" | "area" | "control" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect" | "view", import("@zag-js/anatomy").AnatomyPart>;

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

@@ -21,7 +21,6 @@
 
   let colorPicker = getColorPickerContext();
   let areaProps = getColorPickerAreaPropsContext();
-
   let mergedProps = $derived(
     mergeProps(colorPicker.getAreaBackgroundProps(areaProps), props),
   );

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

@@ -21,7 +21,6 @@
 
   let colorPicker = getColorPickerContext();
   let areaProps = getColorPickerAreaPropsContext();
-
   let mergedProps = $derived(
     mergeProps(colorPicker.getAreaThumbProps(areaProps), props),
   );

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

@@ -22,7 +22,6 @@
   }: ColorPickerChannelInputProps = $props();
 
   let colorPicker = getColorPickerContext();
-
   let mergedProps = $derived(
     mergeProps(
       colorPicker.getChannelInputProps({

package/dist/color-picker/color-picker-channel-slider-label.svelte

@@ -21,7 +21,6 @@
 
   let colorPicker = getColorPickerContext();
   let channelProps = getColorPickerChannelPropsContext();
-
   let mergedProps = $derived(
     mergeProps(colorPicker.getChannelSliderLabelProps(channelProps), props),
   );

package/dist/color-picker/color-picker-channel-slider-value-text.svelte

@@ -23,7 +23,6 @@
   let locale = getLocaleContext();
   let colorPicker = getColorPickerContext();
   let channelProps = getColorPickerChannelPropsContext();
-
   let mergedProps = $derived(
     mergeProps(colorPicker.getChannelSliderValueTextProps(channelProps), props),
   );

package/dist/color-picker/color-picker-content.svelte

@@ -20,7 +20,6 @@
 
   let colorPicker = getColorPickerContext();
   let presence = getPresenceContext();
-
   let mergedProps = $derived(
     mergeProps(
       colorPicker.getContentProps(),