@ark-ui/react 5.27.0 → 5.28.0

package/dist/components/anatomy.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const anatomy = require('@zag-js/anatomy');
+const carousel_anatomy = require('./carousel/carousel.anatomy.cjs');
 const checkbox_anatomy = require('./checkbox/checkbox.anatomy.cjs');
 const colorPicker_anatomy = require('./color-picker/color-picker.anatomy.cjs');
 const combobox_anatomy = require('./combobox/combobox.anatomy.cjs');
@@ -17,7 +18,6 @@ const accordion = require('@zag-js/accordion');
 const angleSlider = require('@zag-js/angle-slider');
 const avatar = require('@zag-js/avatar');
 const bottomSheet = require('@zag-js/bottom-sheet');
-const carousel = require('@zag-js/carousel');
 const clipboard = require('@zag-js/clipboard');
 const collapsible = require('@zag-js/collapsible');
 const dialog = require('@zag-js/dialog');
@@ -25,6 +25,7 @@ const editable = require('@zag-js/editable');
 const fileUpload = require('@zag-js/file-upload');
 const floatingPanel = require('@zag-js/floating-panel');
 const hoverCard = require('@zag-js/hover-card');
+const imageCropper = require('@zag-js/image-cropper');
 const marquee = require('@zag-js/marquee');
 const menu = require('@zag-js/menu');
 const numberInput = require('@zag-js/number-input');
@@ -53,6 +54,7 @@ const treeView = require('@zag-js/tree-view');
 
 
 
+exports.carouselAnatomy = carousel_anatomy.carouselAnatomy;
 exports.checkboxAnatomy = checkbox_anatomy.checkboxAnatomy;
 exports.colorPickerAnatomy = colorPicker_anatomy.colorPickerAnatomy;
 exports.comboboxAnatomy = combobox_anatomy.comboboxAnatomy;
@@ -79,10 +81,6 @@ Object.defineProperty(exports, "bottomSheetAnatomy", {
 	enumerable: true,
 	get: () => bottomSheet.anatomy
 });
-Object.defineProperty(exports, "carouselAnatomy", {
-	enumerable: true,
-	get: () => carousel.anatomy
-});
 Object.defineProperty(exports, "clipboardAnatomy", {
 	enumerable: true,
 	get: () => clipboard.anatomy
@@ -111,6 +109,10 @@ Object.defineProperty(exports, "hoverCardAnatomy", {
 	enumerable: true,
 	get: () => hoverCard.anatomy
 });
+Object.defineProperty(exports, "imageCropperAnatomy", {
+	enumerable: true,
+	get: () => imageCropper.anatomy
+});
 Object.defineProperty(exports, "marqueeAnatomy", {
 	enumerable: true,
 	get: () => marquee.anatomy

package/dist/components/anatomy.d.cts

@@ -17,6 +17,7 @@ export { fieldsetAnatomy } from './fieldset/fieldset.anatomy';
 export { fileUploadAnatomy } from './file-upload/file-upload.anatomy';
 export { floatingPanelAnatomy } from './floating-panel/floating-panel.anatomy';
 export { hoverCardAnatomy } from './hover-card/hover-card.anatomy';
+export { imageCropperAnatomy } from './image-cropper/image-cropper.anatomy';
 export { listboxAnatomy } from './listbox/listbox.anatomy';
 export { marqueeAnatomy } from './marquee/marquee.anatomy';
 export { menuAnatomy } from './menu/menu.anatomy';

package/dist/components/anatomy.d.ts

@@ -17,6 +17,7 @@ export { fieldsetAnatomy } from './fieldset/fieldset.anatomy';
 export { fileUploadAnatomy } from './file-upload/file-upload.anatomy';
 export { floatingPanelAnatomy } from './floating-panel/floating-panel.anatomy';
 export { hoverCardAnatomy } from './hover-card/hover-card.anatomy';
+export { imageCropperAnatomy } from './image-cropper/image-cropper.anatomy';
 export { listboxAnatomy } from './listbox/listbox.anatomy';
 export { marqueeAnatomy } from './marquee/marquee.anatomy';
 export { menuAnatomy } from './menu/menu.anatomy';

package/dist/components/anatomy.js

@@ -1,4 +1,5 @@
 export * from '@zag-js/anatomy';
+export { carouselAnatomy } from './carousel/carousel.anatomy.js';
 export { checkboxAnatomy } from './checkbox/checkbox.anatomy.js';
 export { colorPickerAnatomy } from './color-picker/color-picker.anatomy.js';
 export { comboboxAnatomy } from './combobox/combobox.anatomy.js';
@@ -13,7 +14,6 @@ export { anatomy as accordionAnatomy } from '@zag-js/accordion';
 export { anatomy as angleSliderAnatomy } from '@zag-js/angle-slider';
 export { anatomy as avatarAnatomy } from '@zag-js/avatar';
 export { anatomy as bottomSheetAnatomy } from '@zag-js/bottom-sheet';
-export { anatomy as carouselAnatomy } from '@zag-js/carousel';
 export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';
 export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';
 export { anatomy as dialogAnatomy } from '@zag-js/dialog';
@@ -21,6 +21,7 @@ export { anatomy as editableAnatomy } from '@zag-js/editable';
 export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
 export { anatomy as floatingPanelAnatomy } from '@zag-js/floating-panel';
 export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
+export { anatomy as imageCropperAnatomy } from '@zag-js/image-cropper';
 export { anatomy as marqueeAnatomy } from '@zag-js/marquee';
 export { anatomy as menuAnatomy } from '@zag-js/menu';
 export { anatomy as numberInputAnatomy } from '@zag-js/number-input';

package/dist/components/carousel/carousel-autoplay-indicator.cjs

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const factory = require('../factory.cjs');
+const carousel_anatomy = require('./carousel.anatomy.cjs');
+const useCarouselContext = require('./use-carousel-context.cjs');
+
+const parts = carousel_anatomy.carouselAnatomy.build();
+const CarouselAutoplayIndicator = react.forwardRef((props, ref) => {
+  const { children, fallback, ...restProps } = props;
+  const carousel = useCarouselContext.useCarouselContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ref, ...parts.autoplayIndicator.attrs, ...restProps, children: carousel.isPlaying ? children : fallback });
+});
+CarouselAutoplayIndicator.displayName = "CarouselAutoplayIndicator";
+
+exports.CarouselAutoplayIndicator = CarouselAutoplayIndicator;

package/dist/components/carousel/carousel-autoplay-indicator.d.cts

@@ -0,0 +1,11 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface CarouselAutoplayIndicatorBaseProps extends PolymorphicProps {
+    /**
+     * The fallback content to render when autoplay is paused.
+     */
+    fallback?: React.ReactNode;
+}
+export interface CarouselAutoplayIndicatorProps extends HTMLProps<'span'>, CarouselAutoplayIndicatorBaseProps {
+}
+export declare const CarouselAutoplayIndicator: ForwardRefExoticComponent<CarouselAutoplayIndicatorProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/carousel/carousel-autoplay-indicator.d.ts

@@ -0,0 +1,11 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface CarouselAutoplayIndicatorBaseProps extends PolymorphicProps {
+    /**
+     * The fallback content to render when autoplay is paused.
+     */
+    fallback?: React.ReactNode;
+}
+export interface CarouselAutoplayIndicatorProps extends HTMLProps<'span'>, CarouselAutoplayIndicatorBaseProps {
+}
+export declare const CarouselAutoplayIndicator: ForwardRefExoticComponent<CarouselAutoplayIndicatorProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/carousel/carousel-autoplay-indicator.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { carouselAnatomy } from './carousel.anatomy.js';
+import { useCarouselContext } from './use-carousel-context.js';
+
+const parts = carouselAnatomy.build();
+const CarouselAutoplayIndicator = forwardRef((props, ref) => {
+  const { children, fallback, ...restProps } = props;
+  const carousel = useCarouselContext();
+  return /* @__PURE__ */ jsx(ark.span, { ref, ...parts.autoplayIndicator.attrs, ...restProps, children: carousel.isPlaying ? children : fallback });
+});
+CarouselAutoplayIndicator.displayName = "CarouselAutoplayIndicator";
+
+export { CarouselAutoplayIndicator };

package/dist/components/carousel/carousel-progress-text.cjs

@@ -0,0 +1,24 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const factory = require('../factory.cjs');
+const carousel_anatomy = require('./carousel.anatomy.cjs');
+const useCarouselContext = require('./use-carousel-context.cjs');
+
+const parts = carousel_anatomy.carouselAnatomy.build();
+const CarouselProgressText = react.forwardRef((props, ref) => {
+  const carousel = useCarouselContext.useCarouselContext();
+  const progressText = react.useMemo(() => {
+    const currentPage = carousel.page + 1;
+    const totalPages = carousel.pageSnapPoints.length;
+    return `${currentPage} / ${totalPages}`;
+  }, [carousel.page, carousel.pageSnapPoints.length]);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ref, ...parts.progressText.attrs, ...props, children: props.children || progressText });
+});
+CarouselProgressText.displayName = "CarouselProgressText";
+
+exports.CarouselProgressText = CarouselProgressText;

package/dist/components/carousel/carousel-progress-text.d.cts

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface CarouselProgressTextBaseProps extends PolymorphicProps {
+}
+export interface CarouselProgressTextProps extends HTMLProps<'span'>, CarouselProgressTextBaseProps {
+}
+export declare const CarouselProgressText: ForwardRefExoticComponent<CarouselProgressTextProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/carousel/carousel-progress-text.d.ts

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface CarouselProgressTextBaseProps extends PolymorphicProps {
+}
+export interface CarouselProgressTextProps extends HTMLProps<'span'>, CarouselProgressTextBaseProps {
+}
+export declare const CarouselProgressText: ForwardRefExoticComponent<CarouselProgressTextProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/carousel/carousel-progress-text.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useMemo } from 'react';
+import { ark } from '../factory.js';
+import { carouselAnatomy } from './carousel.anatomy.js';
+import { useCarouselContext } from './use-carousel-context.js';
+
+const parts = carouselAnatomy.build();
+const CarouselProgressText = forwardRef((props, ref) => {
+  const carousel = useCarouselContext();
+  const progressText = useMemo(() => {
+    const currentPage = carousel.page + 1;
+    const totalPages = carousel.pageSnapPoints.length;
+    return `${currentPage} / ${totalPages}`;
+  }, [carousel.page, carousel.pageSnapPoints.length]);
+  return /* @__PURE__ */ jsx(ark.span, { ref, ...parts.progressText.attrs, ...props, children: props.children || progressText });
+});
+CarouselProgressText.displayName = "CarouselProgressText";
+
+export { CarouselProgressText };

package/dist/components/carousel/carousel.anatomy.cjs

@@ -0,0 +1,10 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const carousel = require('@zag-js/carousel');
+
+const carouselAnatomy = carousel.anatomy.extendWith("progressText", "autoplayIndicator");
+
+exports.carouselAnatomy = carouselAnatomy;

package/dist/components/carousel/carousel.anatomy.d.cts

@@ -1 +1,2 @@
-export { anatomy as carouselAnatomy } from '@zag-js/carousel';
+import { AnatomyInstance } from '@zag-js/anatomy';
+export declare const carouselAnatomy: AnatomyInstance<"root" | "itemGroup" | "item" | "control" | "nextTrigger" | "prevTrigger" | "indicatorGroup" | "indicator" | "autoplayTrigger" | "progressText" | "autoplayIndicator">;

package/dist/components/carousel/carousel.anatomy.d.ts

@@ -1 +1,2 @@
-export { anatomy as carouselAnatomy } from '@zag-js/carousel';
+import { AnatomyInstance } from '@zag-js/anatomy';
+export declare const carouselAnatomy: AnatomyInstance<"root" | "itemGroup" | "item" | "control" | "nextTrigger" | "prevTrigger" | "indicatorGroup" | "indicator" | "autoplayTrigger" | "progressText" | "autoplayIndicator">;

package/dist/components/carousel/carousel.anatomy.js

@@ -0,0 +1,6 @@
+'use client';
+import { anatomy } from '@zag-js/carousel';
+
+const carouselAnatomy = anatomy.extendWith("progressText", "autoplayIndicator");
+
+export { carouselAnatomy };

package/dist/components/carousel/carousel.cjs

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const carouselAutoplayIndicator = require('./carousel-autoplay-indicator.cjs');
+const carouselProgressText = require('./carousel-progress-text.cjs');
 const carouselAutoplayTrigger = require('./carousel-autoplay-trigger.cjs');
 const carouselContext = require('./carousel-context.cjs');
 const carouselControl = require('./carousel-control.cjs');
@@ -16,6 +18,8 @@ const carouselRootProvider = require('./carousel-root-provider.cjs');
 
 
 
+exports.AutoplayIndicator = carouselAutoplayIndicator.CarouselAutoplayIndicator;
+exports.ProgressText = carouselProgressText.CarouselProgressText;
 exports.AutoplayTrigger = carouselAutoplayTrigger.CarouselAutoplayTrigger;
 exports.Context = carouselContext.CarouselContext;
 exports.Control = carouselControl.CarouselControl;

package/dist/components/carousel/carousel.d.cts

@@ -1,4 +1,6 @@
 export type { AutoplayStatusDetails, DragStatusDetails, PageChangeDetails } from '@zag-js/carousel';
+export { CarouselAutoplayIndicator as AutoplayIndicator, type CarouselAutoplayIndicatorBaseProps as AutoplayIndicatorBaseProps, type CarouselAutoplayIndicatorProps as AutoplayIndicatorProps, } from './carousel-autoplay-indicator';
+export { CarouselProgressText as ProgressText, type CarouselProgressTextBaseProps as ProgressTextBaseProps, type CarouselProgressTextProps as ProgressTextProps, } from './carousel-progress-text';
 export { CarouselAutoplayTrigger as AutoplayTrigger, type CarouselAutoplayTriggerBaseProps as AutoplayTriggerBaseProps, type CarouselAutoplayTriggerProps as AutoplayTriggerProps, } from './carousel-autoplay-trigger';
 export { CarouselContext as Context, type CarouselContextProps as ContextProps } from './carousel-context';
 export { CarouselControl as Control, type CarouselControlBaseProps as ControlBaseProps, type CarouselControlProps as ControlProps, } from './carousel-control';

package/dist/components/carousel/carousel.d.ts

@@ -1,4 +1,6 @@
 export type { AutoplayStatusDetails, DragStatusDetails, PageChangeDetails } from '@zag-js/carousel';
+export { CarouselAutoplayIndicator as AutoplayIndicator, type CarouselAutoplayIndicatorBaseProps as AutoplayIndicatorBaseProps, type CarouselAutoplayIndicatorProps as AutoplayIndicatorProps, } from './carousel-autoplay-indicator';
+export { CarouselProgressText as ProgressText, type CarouselProgressTextBaseProps as ProgressTextBaseProps, type CarouselProgressTextProps as ProgressTextProps, } from './carousel-progress-text';
 export { CarouselAutoplayTrigger as AutoplayTrigger, type CarouselAutoplayTriggerBaseProps as AutoplayTriggerBaseProps, type CarouselAutoplayTriggerProps as AutoplayTriggerProps, } from './carousel-autoplay-trigger';
 export { CarouselContext as Context, type CarouselContextProps as ContextProps } from './carousel-context';
 export { CarouselControl as Control, type CarouselControlBaseProps as ControlBaseProps, type CarouselControlProps as ControlProps, } from './carousel-control';

package/dist/components/carousel/carousel.js

@@ -1,3 +1,5 @@
+export { CarouselAutoplayIndicator as AutoplayIndicator } from './carousel-autoplay-indicator.js';
+export { CarouselProgressText as ProgressText } from './carousel-progress-text.js';
 export { CarouselAutoplayTrigger as AutoplayTrigger } from './carousel-autoplay-trigger.js';
 export { CarouselContext as Context } from './carousel-context.js';
 export { CarouselControl as Control } from './carousel-control.js';

package/dist/components/carousel/index.cjs

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const carouselAutoplayIndicator = require('./carousel-autoplay-indicator.cjs');
+const carouselProgressText = require('./carousel-progress-text.cjs');
 const carouselAutoplayTrigger = require('./carousel-autoplay-trigger.cjs');
 const carouselContext = require('./carousel-context.cjs');
 const carouselControl = require('./carousel-control.cjs');
@@ -13,13 +15,15 @@ const carouselNextTrigger = require('./carousel-next-trigger.cjs');
 const carouselPrevTrigger = require('./carousel-prev-trigger.cjs');
 const carouselRoot = require('./carousel-root.cjs');
 const carouselRootProvider = require('./carousel-root-provider.cjs');
+const carousel_anatomy = require('./carousel.anatomy.cjs');
 const useCarousel = require('./use-carousel.cjs');
 const useCarouselContext = require('./use-carousel-context.cjs');
-const carousel$1 = require('./carousel.cjs');
-const carousel = require('@zag-js/carousel');
+const carousel = require('./carousel.cjs');
 
 
 
+exports.CarouselAutoplayIndicator = carouselAutoplayIndicator.CarouselAutoplayIndicator;
+exports.CarouselProgressText = carouselProgressText.CarouselProgressText;
 exports.CarouselAutoplayTrigger = carouselAutoplayTrigger.CarouselAutoplayTrigger;
 exports.CarouselContext = carouselContext.CarouselContext;
 exports.CarouselControl = carouselControl.CarouselControl;
@@ -31,10 +35,7 @@ exports.CarouselNextTrigger = carouselNextTrigger.CarouselNextTrigger;
 exports.CarouselPrevTrigger = carouselPrevTrigger.CarouselPrevTrigger;
 exports.CarouselRoot = carouselRoot.CarouselRoot;
 exports.CarouselRootProvider = carouselRootProvider.CarouselRootProvider;
+exports.carouselAnatomy = carousel_anatomy.carouselAnatomy;
 exports.useCarousel = useCarousel.useCarousel;
 exports.useCarouselContext = useCarouselContext.useCarouselContext;
-exports.Carousel = carousel$1;
-Object.defineProperty(exports, "carouselAnatomy", {
-  enumerable: true,
-  get: () => carousel.anatomy
-});
+exports.Carousel = carousel;

package/dist/components/carousel/index.d.cts

@@ -1,4 +1,6 @@
 export type { AutoplayStatusDetails as CarouselAutoplayStatusDetails, DragStatusDetails as CarouselDragStatusDetails, PageChangeDetails as CarouselPageChangeDetails, } from '@zag-js/carousel';
+export { CarouselAutoplayIndicator, type CarouselAutoplayIndicatorBaseProps, type CarouselAutoplayIndicatorProps, } from './carousel-autoplay-indicator';
+export { CarouselProgressText, type CarouselProgressTextBaseProps, type CarouselProgressTextProps, } from './carousel-progress-text';
 export { CarouselAutoplayTrigger, type CarouselAutoplayTriggerBaseProps, type CarouselAutoplayTriggerProps, } from './carousel-autoplay-trigger';
 export { CarouselContext, type CarouselContextProps } from './carousel-context';
 export { CarouselControl, type CarouselControlBaseProps, type CarouselControlProps } from './carousel-control';

package/dist/components/carousel/index.d.ts

@@ -1,4 +1,6 @@
 export type { AutoplayStatusDetails as CarouselAutoplayStatusDetails, DragStatusDetails as CarouselDragStatusDetails, PageChangeDetails as CarouselPageChangeDetails, } from '@zag-js/carousel';
+export { CarouselAutoplayIndicator, type CarouselAutoplayIndicatorBaseProps, type CarouselAutoplayIndicatorProps, } from './carousel-autoplay-indicator';
+export { CarouselProgressText, type CarouselProgressTextBaseProps, type CarouselProgressTextProps, } from './carousel-progress-text';
 export { CarouselAutoplayTrigger, type CarouselAutoplayTriggerBaseProps, type CarouselAutoplayTriggerProps, } from './carousel-autoplay-trigger';
 export { CarouselContext, type CarouselContextProps } from './carousel-context';
 export { CarouselControl, type CarouselControlBaseProps, type CarouselControlProps } from './carousel-control';

package/dist/components/carousel/index.js

@@ -1,3 +1,5 @@
+export { CarouselAutoplayIndicator } from './carousel-autoplay-indicator.js';
+export { CarouselProgressText } from './carousel-progress-text.js';
 export { CarouselAutoplayTrigger } from './carousel-autoplay-trigger.js';
 export { CarouselContext } from './carousel-context.js';
 export { CarouselControl } from './carousel-control.js';
@@ -9,8 +11,8 @@ export { CarouselNextTrigger } from './carousel-next-trigger.js';
 export { CarouselPrevTrigger } from './carousel-prev-trigger.js';
 export { CarouselRoot } from './carousel-root.js';
 export { CarouselRootProvider } from './carousel-root-provider.js';
+export { carouselAnatomy } from './carousel.anatomy.js';
 export { useCarousel } from './use-carousel.js';
 export { useCarouselContext } from './use-carousel-context.js';
 import * as carousel from './carousel.js';
 export { carousel as Carousel };
-export { anatomy as carouselAnatomy } from '@zag-js/carousel';

package/dist/components/checkbox/checkbox.anatomy.d.cts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const checkboxAnatomy: AnatomyInstance<"root" | "label" | "control" | "indicator" | "group">;
+export declare const checkboxAnatomy: AnatomyInstance<"root" | "control" | "indicator" | "label" | "group">;

package/dist/components/checkbox/checkbox.anatomy.d.ts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const checkboxAnatomy: AnatomyInstance<"root" | "label" | "control" | "indicator" | "group">;
+export declare const checkboxAnatomy: AnatomyInstance<"root" | "control" | "indicator" | "label" | "group">;

package/dist/components/collection/use-list-collection.d.cts

@@ -3,7 +3,7 @@ export interface UseListCollectionProps<T> extends Omit<CollectionOptions<T>, 'i
     /**
      * The initial items to display in the collection.
      */
-    initialItems: T[];
+    initialItems: T[] | readonly T[];
     /**
      * The filter function to use to filter the items.
      */

package/dist/components/collection/use-list-collection.d.ts

@@ -3,7 +3,7 @@ export interface UseListCollectionProps<T> extends Omit<CollectionOptions<T>, 'i
     /**
      * The initial items to display in the collection.
      */
-    initialItems: T[];
+    initialItems: T[] | readonly T[];
     /**
      * The filter function to use to filter the items.
      */

package/dist/components/color-picker/color-picker.anatomy.d.cts

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

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

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

package/dist/components/color-picker/color-picker.d.cts

@@ -1,4 +1,4 @@
-export type { Color, ColorFormat, FormatChangeDetails, OpenChangeDetails, ValueChangeDetails, } from '@zag-js/color-picker';
+export type { Color, ColorFormat, FocusOutsideEvent, FormatChangeDetails, InteractOutsideEvent, OpenChangeDetails, PointerDownOutsideEvent, ValueChangeDetails, } from '@zag-js/color-picker';
 export { ColorPickerArea as Area, type ColorPickerAreaBaseProps as AreaBaseProps, type ColorPickerAreaProps as AreaProps, } from './color-picker-area';
 export { ColorPickerAreaBackground as AreaBackground, type ColorPickerAreaBackgroundBaseProps as AreaBackgroundBaseProps, type ColorPickerAreaBackgroundProps as AreaBackgroundProps, } from './color-picker-area-background';
 export { ColorPickerAreaThumb as AreaThumb, type ColorPickerAreaThumbBaseProps as AreaThumbBaseProps, type ColorPickerAreaThumbProps as AreaThumbProps, } from './color-picker-area-thumb';

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

@@ -1,4 +1,4 @@
-export type { Color, ColorFormat, FormatChangeDetails, OpenChangeDetails, ValueChangeDetails, } from '@zag-js/color-picker';
+export type { Color, ColorFormat, FocusOutsideEvent, FormatChangeDetails, InteractOutsideEvent, OpenChangeDetails, PointerDownOutsideEvent, ValueChangeDetails, } from '@zag-js/color-picker';
 export { ColorPickerArea as Area, type ColorPickerAreaBaseProps as AreaBaseProps, type ColorPickerAreaProps as AreaProps, } from './color-picker-area';
 export { ColorPickerAreaBackground as AreaBackground, type ColorPickerAreaBackgroundBaseProps as AreaBackgroundBaseProps, type ColorPickerAreaBackgroundProps as AreaBackgroundProps, } from './color-picker-area-background';
 export { ColorPickerAreaThumb as AreaThumb, type ColorPickerAreaThumbBaseProps as AreaThumbBaseProps, type ColorPickerAreaThumbProps as AreaThumbProps, } from './color-picker-area-thumb';

package/dist/components/color-picker/index.d.cts

@@ -1,5 +1,5 @@
 export { parse as parseColor } from '@zag-js/color-picker';
-export type { Color, ColorFormat as ColorPickerColorFormat, FormatChangeDetails as ColorPickerFormatChangeDetails, OpenChangeDetails as ColorPickerOpenChangeDetails, ValueChangeDetails as ColorPickerValueChangeDetails, } from '@zag-js/color-picker';
+export type { Color, ColorFormat as ColorPickerColorFormat, FocusOutsideEvent as ColorPickerFocusOutsideEvent, FormatChangeDetails as ColorPickerFormatChangeDetails, InteractOutsideEvent as ColorPickerInteractOutsideEvent, OpenChangeDetails as ColorPickerOpenChangeDetails, PointerDownOutsideEvent as ColorPickerPointerDownOutsideEvent, ValueChangeDetails as ColorPickerValueChangeDetails, } from '@zag-js/color-picker';
 export { ColorPickerArea, type ColorPickerAreaBaseProps, type ColorPickerAreaProps } from './color-picker-area';
 export { ColorPickerAreaBackground, type ColorPickerAreaBackgroundBaseProps, type ColorPickerAreaBackgroundProps, } from './color-picker-area-background';
 export { ColorPickerAreaThumb, type ColorPickerAreaThumbBaseProps, type ColorPickerAreaThumbProps, } from './color-picker-area-thumb';

package/dist/components/color-picker/index.d.ts

@@ -1,5 +1,5 @@
 export { parse as parseColor } from '@zag-js/color-picker';
-export type { Color, ColorFormat as ColorPickerColorFormat, FormatChangeDetails as ColorPickerFormatChangeDetails, OpenChangeDetails as ColorPickerOpenChangeDetails, ValueChangeDetails as ColorPickerValueChangeDetails, } from '@zag-js/color-picker';
+export type { Color, ColorFormat as ColorPickerColorFormat, FocusOutsideEvent as ColorPickerFocusOutsideEvent, FormatChangeDetails as ColorPickerFormatChangeDetails, InteractOutsideEvent as ColorPickerInteractOutsideEvent, OpenChangeDetails as ColorPickerOpenChangeDetails, PointerDownOutsideEvent as ColorPickerPointerDownOutsideEvent, ValueChangeDetails as ColorPickerValueChangeDetails, } from '@zag-js/color-picker';
 export { ColorPickerArea, type ColorPickerAreaBaseProps, type ColorPickerAreaProps } from './color-picker-area';
 export { ColorPickerAreaBackground, type ColorPickerAreaBackgroundBaseProps, type ColorPickerAreaBackgroundProps, } from './color-picker-area-background';
 export { ColorPickerAreaThumb, type ColorPickerAreaThumbBaseProps, type ColorPickerAreaThumbProps, } from './color-picker-area-thumb';

package/dist/components/combobox/combobox.anatomy.d.cts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const comboboxAnatomy: AnatomyInstance<"root" | "label" | "control" | "content" | "trigger" | "positioner" | "list" | "input" | "item" | "clearTrigger" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "empty">;
+export declare const comboboxAnatomy: AnatomyInstance<"root" | "itemGroup" | "item" | "control" | "label" | "content" | "trigger" | "positioner" | "list" | "input" | "clearTrigger" | "itemGroupLabel" | "itemIndicator" | "itemText" | "empty">;

package/dist/components/combobox/combobox.anatomy.d.ts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const comboboxAnatomy: AnatomyInstance<"root" | "label" | "control" | "content" | "trigger" | "positioner" | "list" | "input" | "item" | "clearTrigger" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "empty">;
+export declare const comboboxAnatomy: AnatomyInstance<"root" | "itemGroup" | "item" | "control" | "label" | "content" | "trigger" | "positioner" | "list" | "input" | "clearTrigger" | "itemGroupLabel" | "itemIndicator" | "itemText" | "empty">;

package/dist/components/combobox/combobox.d.cts

@@ -1,4 +1,4 @@
-export type { HighlightChangeDetails, InputValueChangeDetails, OpenChangeDetails, SelectionDetails, ValueChangeDetails, } from '@zag-js/combobox';
+export type { FocusOutsideEvent, HighlightChangeDetails, InputValueChangeDetails, InteractOutsideEvent, OpenChangeDetails, PointerDownOutsideEvent, SelectionDetails, ValueChangeDetails, } from '@zag-js/combobox';
 export type { CollectionItem } from '../collection';
 export { ComboboxClearTrigger as ClearTrigger, type ComboboxClearTriggerBaseProps as ClearTriggerBaseProps, type ComboboxClearTriggerProps as ClearTriggerProps, } from './combobox-clear-trigger';
 export { ComboboxContent as Content, type ComboboxContentBaseProps as ContentBaseProps, type ComboboxContentProps as ContentProps, } from './combobox-content';

package/dist/components/combobox/combobox.d.ts

@@ -1,4 +1,4 @@
-export type { HighlightChangeDetails, InputValueChangeDetails, OpenChangeDetails, SelectionDetails, ValueChangeDetails, } from '@zag-js/combobox';
+export type { FocusOutsideEvent, HighlightChangeDetails, InputValueChangeDetails, InteractOutsideEvent, OpenChangeDetails, PointerDownOutsideEvent, SelectionDetails, ValueChangeDetails, } from '@zag-js/combobox';
 export type { CollectionItem } from '../collection';
 export { ComboboxClearTrigger as ClearTrigger, type ComboboxClearTriggerBaseProps as ClearTriggerBaseProps, type ComboboxClearTriggerProps as ClearTriggerProps, } from './combobox-clear-trigger';
 export { ComboboxContent as Content, type ComboboxContentBaseProps as ContentBaseProps, type ComboboxContentProps as ContentProps, } from './combobox-content';

package/dist/components/combobox/index.d.cts

@@ -1,4 +1,4 @@
-export type { HighlightChangeDetails as ComboboxHighlightChangeDetails, InputValueChangeDetails as ComboboxInputValueChangeDetails, OpenChangeDetails as ComboboxOpenChangeDetails, SelectionDetails as ComboboxSelectionDetails, ValueChangeDetails as ComboboxValueChangeDetails, } from '@zag-js/combobox';
+export type { FocusOutsideEvent as ComboboxFocusOutsideEvent, HighlightChangeDetails as ComboboxHighlightChangeDetails, InputValueChangeDetails as ComboboxInputValueChangeDetails, InteractOutsideEvent as ComboboxInteractOutsideEvent, OpenChangeDetails as ComboboxOpenChangeDetails, PointerDownOutsideEvent as ComboboxPointerDownOutsideEvent, SelectionDetails as ComboboxSelectionDetails, ValueChangeDetails as ComboboxValueChangeDetails, } from '@zag-js/combobox';
 export { createListCollection, useListCollection, type CollectionItem, type ListCollection, type UseListCollectionProps, } from '../collection';
 export { ComboboxClearTrigger, type ComboboxClearTriggerBaseProps, type ComboboxClearTriggerProps, } from './combobox-clear-trigger';
 export { ComboboxContent, type ComboboxContentBaseProps, type ComboboxContentProps } from './combobox-content';

package/dist/components/combobox/index.d.ts

@@ -1,4 +1,4 @@
-export type { HighlightChangeDetails as ComboboxHighlightChangeDetails, InputValueChangeDetails as ComboboxInputValueChangeDetails, OpenChangeDetails as ComboboxOpenChangeDetails, SelectionDetails as ComboboxSelectionDetails, ValueChangeDetails as ComboboxValueChangeDetails, } from '@zag-js/combobox';
+export type { FocusOutsideEvent as ComboboxFocusOutsideEvent, HighlightChangeDetails as ComboboxHighlightChangeDetails, InputValueChangeDetails as ComboboxInputValueChangeDetails, InteractOutsideEvent as ComboboxInteractOutsideEvent, OpenChangeDetails as ComboboxOpenChangeDetails, PointerDownOutsideEvent as ComboboxPointerDownOutsideEvent, SelectionDetails as ComboboxSelectionDetails, ValueChangeDetails as ComboboxValueChangeDetails, } from '@zag-js/combobox';
 export { createListCollection, useListCollection, type CollectionItem, type ListCollection, type UseListCollectionProps, } from '../collection';
 export { ComboboxClearTrigger, type ComboboxClearTriggerBaseProps, type ComboboxClearTriggerProps, } from './combobox-clear-trigger';
 export { ComboboxContent, type ComboboxContentBaseProps, type ComboboxContentProps } from './combobox-content';

package/dist/components/date-picker/date-picker.anatomy.d.cts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const datePickerAnatomy: AnatomyInstance<"root" | "label" | "control" | "content" | "trigger" | "positioner" | "view" | "input" | "clearTrigger" | "table" | "monthSelect" | "nextTrigger" | "presetTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect">;
+export declare const datePickerAnatomy: AnatomyInstance<"root" | "control" | "nextTrigger" | "prevTrigger" | "label" | "content" | "trigger" | "positioner" | "view" | "input" | "clearTrigger" | "table" | "monthSelect" | "presetTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect">;

package/dist/components/date-picker/date-picker.anatomy.d.ts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const datePickerAnatomy: AnatomyInstance<"root" | "label" | "control" | "content" | "trigger" | "positioner" | "view" | "input" | "clearTrigger" | "table" | "monthSelect" | "nextTrigger" | "presetTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect">;
+export declare const datePickerAnatomy: AnatomyInstance<"root" | "control" | "nextTrigger" | "prevTrigger" | "label" | "content" | "trigger" | "positioner" | "view" | "input" | "clearTrigger" | "table" | "monthSelect" | "presetTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect">;

package/dist/components/dialog/dialog.d.cts

@@ -1,4 +1,4 @@
-export type { OpenChangeDetails } from '@zag-js/dialog';
+export type { FocusOutsideEvent, InteractOutsideEvent, OpenChangeDetails, PointerDownOutsideEvent, } from '@zag-js/dialog';
 export { DialogBackdrop as Backdrop, type DialogBackdropBaseProps as BackdropBaseProps, type DialogBackdropProps as BackdropProps, } from './dialog-backdrop';
 export { DialogCloseTrigger as CloseTrigger, type DialogCloseTriggerBaseProps as CloseTriggerBaseProps, type DialogCloseTriggerProps as CloseTriggerProps, } from './dialog-close-trigger';
 export { DialogContent as Content, type DialogContentBaseProps as ContentBaseProps, type DialogContentProps as ContentProps, } from './dialog-content';

package/dist/components/dialog/dialog.d.ts

@@ -1,4 +1,4 @@
-export type { OpenChangeDetails } from '@zag-js/dialog';
+export type { FocusOutsideEvent, InteractOutsideEvent, OpenChangeDetails, PointerDownOutsideEvent, } from '@zag-js/dialog';
 export { DialogBackdrop as Backdrop, type DialogBackdropBaseProps as BackdropBaseProps, type DialogBackdropProps as BackdropProps, } from './dialog-backdrop';
 export { DialogCloseTrigger as CloseTrigger, type DialogCloseTriggerBaseProps as CloseTriggerBaseProps, type DialogCloseTriggerProps as CloseTriggerProps, } from './dialog-close-trigger';
 export { DialogContent as Content, type DialogContentBaseProps as ContentBaseProps, type DialogContentProps as ContentProps, } from './dialog-content';

package/dist/components/dialog/index.d.cts

@@ -1,4 +1,4 @@
-export type { OpenChangeDetails as DialogOpenChangeDetails } from '@zag-js/dialog';
+export type { FocusOutsideEvent as DialogFocusOutsideEvent, InteractOutsideEvent as DialogInteractOutsideEvent, OpenChangeDetails as DialogOpenChangeDetails, PointerDownOutsideEvent as DialogPointerDownOutsideEvent, } from '@zag-js/dialog';
 export { DialogBackdrop, type DialogBackdropBaseProps, type DialogBackdropProps } from './dialog-backdrop';
 export { DialogCloseTrigger, type DialogCloseTriggerBaseProps, type DialogCloseTriggerProps, } from './dialog-close-trigger';
 export { DialogContent, type DialogContentBaseProps, type DialogContentProps } from './dialog-content';

package/dist/components/dialog/index.d.ts

@@ -1,4 +1,4 @@
-export type { OpenChangeDetails as DialogOpenChangeDetails } from '@zag-js/dialog';
+export type { FocusOutsideEvent as DialogFocusOutsideEvent, InteractOutsideEvent as DialogInteractOutsideEvent, OpenChangeDetails as DialogOpenChangeDetails, PointerDownOutsideEvent as DialogPointerDownOutsideEvent, } from '@zag-js/dialog';
 export { DialogBackdrop, type DialogBackdropBaseProps, type DialogBackdropProps } from './dialog-backdrop';
 export { DialogCloseTrigger, type DialogCloseTriggerBaseProps, type DialogCloseTriggerProps, } from './dialog-close-trigger';
 export { DialogContent, type DialogContentBaseProps, type DialogContentProps } from './dialog-content';

package/dist/components/editable/editable.d.cts

@@ -1,4 +1,4 @@
-export type { ValueChangeDetails } from '@zag-js/editable';
+export type { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent, ValueChangeDetails, } from '@zag-js/editable';
 export { EditableArea as Area, type EditableAreaBaseProps as AreaBaseProps, type EditableAreaProps as AreaProps, } from './editable-area';
 export { EditableCancelTrigger as CancelTrigger, type EditableCancelTriggerBaseProps as CancelTriggerBaseProps, type EditableCancelTriggerProps as CancelTriggerProps, } from './editable-cancel-trigger';
 export { EditableContext as Context, type EditableContextProps as ContextProps } from './editable-context';

package/dist/components/editable/editable.d.ts

@@ -1,4 +1,4 @@
-export type { ValueChangeDetails } from '@zag-js/editable';
+export type { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent, ValueChangeDetails, } from '@zag-js/editable';
 export { EditableArea as Area, type EditableAreaBaseProps as AreaBaseProps, type EditableAreaProps as AreaProps, } from './editable-area';
 export { EditableCancelTrigger as CancelTrigger, type EditableCancelTriggerBaseProps as CancelTriggerBaseProps, type EditableCancelTriggerProps as CancelTriggerProps, } from './editable-cancel-trigger';
 export { EditableContext as Context, type EditableContextProps as ContextProps } from './editable-context';

package/dist/components/editable/index.d.cts

@@ -1,4 +1,4 @@
-export type { EditChangeDetails as EditableEditChangeDetails, ValueChangeDetails as EditableValueChangeDetails, } from '@zag-js/editable';
+export type { EditChangeDetails as EditableEditChangeDetails, FocusOutsideEvent as EditableFocusOutsideEvent, InteractOutsideEvent as EditableInteractOutsideEvent, PointerDownOutsideEvent as EditablePointerDownOutsideEvent, ValueChangeDetails as EditableValueChangeDetails, } from '@zag-js/editable';
 export { EditableArea, type EditableAreaBaseProps, type EditableAreaProps } from './editable-area';
 export { EditableCancelTrigger, type EditableCancelTriggerBaseProps, type EditableCancelTriggerProps, } from './editable-cancel-trigger';
 export { EditableContext, type EditableContextProps } from './editable-context';

package/dist/components/editable/index.d.ts

@@ -1,4 +1,4 @@
-export type { EditChangeDetails as EditableEditChangeDetails, ValueChangeDetails as EditableValueChangeDetails, } from '@zag-js/editable';
+export type { EditChangeDetails as EditableEditChangeDetails, FocusOutsideEvent as EditableFocusOutsideEvent, InteractOutsideEvent as EditableInteractOutsideEvent, PointerDownOutsideEvent as EditablePointerDownOutsideEvent, ValueChangeDetails as EditableValueChangeDetails, } from '@zag-js/editable';
 export { EditableArea, type EditableAreaBaseProps, type EditableAreaProps } from './editable-area';
 export { EditableCancelTrigger, type EditableCancelTriggerBaseProps, type EditableCancelTriggerProps, } from './editable-cancel-trigger';
 export { EditableContext, type EditableContextProps } from './editable-context';

package/dist/components/hover-card/hover-card.d.cts

@@ -1,4 +1,4 @@
-export type { OpenChangeDetails } from '@zag-js/hover-card';
+export type { FocusOutsideEvent, InteractOutsideEvent, OpenChangeDetails, PointerDownOutsideEvent, } from '@zag-js/hover-card';
 export { HoverCardArrow as Arrow, type HoverCardArrowBaseProps as ArrowBaseProps, type HoverCardArrowProps as ArrowProps, } from './hover-card-arrow';
 export { HoverCardArrowTip as ArrowTip, type HoverCardArrowTipBaseProps as ArrowTipBaseProps, type HoverCardArrowTipProps as ArrowTipProps, } from './hover-card-arrow-tip';
 export { HoverCardContent as Content, type HoverCardContentBaseProps as ContentBaseProps, type HoverCardContentProps as ContentProps, } from './hover-card-content';

package/dist/components/hover-card/hover-card.d.ts

@@ -1,4 +1,4 @@
-export type { OpenChangeDetails } from '@zag-js/hover-card';
+export type { FocusOutsideEvent, InteractOutsideEvent, OpenChangeDetails, PointerDownOutsideEvent, } from '@zag-js/hover-card';
 export { HoverCardArrow as Arrow, type HoverCardArrowBaseProps as ArrowBaseProps, type HoverCardArrowProps as ArrowProps, } from './hover-card-arrow';
 export { HoverCardArrowTip as ArrowTip, type HoverCardArrowTipBaseProps as ArrowTipBaseProps, type HoverCardArrowTipProps as ArrowTipProps, } from './hover-card-arrow-tip';
 export { HoverCardContent as Content, type HoverCardContentBaseProps as ContentBaseProps, type HoverCardContentProps as ContentProps, } from './hover-card-content';