@ark-ui/react 5.27.1 → 5.29.0

package/dist/components/accordion/accordion-item.cjs

@@ -11,12 +11,14 @@ const useAccordionItemContext = require('./use-accordion-item-context.cjs');
 const collapsibleRoot = require('../collapsible/collapsible-root.cjs');
 require('@zag-js/color-picker');
 require('@zag-js/date-picker');
+require('@zag-js/splitter');
 const createSplitProps = require('../../utils/create-split-props.cjs');
 const renderStrategy = require('../../utils/render-strategy.cjs');
 const useAccordionItemPropsContext = require('./use-accordion-item-props-context.cjs');
 
+const splitItemProps = createSplitProps.createSplitProps();
 const AccordionItem = react.forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ["value", "disabled"]);
+  const [itemProps, localProps] = splitItemProps(props, ["value", "disabled"]);
   const accordion = useAccordionContext.useAccordionContext();
   const renderStrategy$1 = renderStrategy.useRenderStrategyPropsContext();
   const mergedProps = react$1.mergeProps(accordion.getItemProps(itemProps), localProps);

package/dist/components/accordion/accordion-item.js

@@ -7,12 +7,14 @@ import { AccordionItemProvider } from './use-accordion-item-context.js';
 import { CollapsibleRoot } from '../collapsible/collapsible-root.js';
 import '@zag-js/color-picker';
 import '@zag-js/date-picker';
+import '@zag-js/splitter';
 import { createSplitProps } from '../../utils/create-split-props.js';
 import { useRenderStrategyPropsContext } from '../../utils/render-strategy.js';
 import { AccordionItemPropsProvider } from './use-accordion-item-props-context.js';
 
+const splitItemProps = createSplitProps();
 const AccordionItem = forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps()(props, ["value", "disabled"]);
+  const [itemProps, localProps] = splitItemProps(props, ["value", "disabled"]);
   const accordion = useAccordionContext();
   const renderStrategy = useRenderStrategyPropsContext();
   const mergedProps = mergeProps(accordion.getItemProps(itemProps), localProps);

package/dist/components/accordion/accordion-root-provider.cjs

@@ -11,9 +11,10 @@ const renderStrategy = require('../../utils/render-strategy.cjs');
 const factory = require('../factory.cjs');
 const useAccordionContext = require('./use-accordion-context.cjs');
 
+const splitRootProviderProps = createSplitProps.createSplitProps();
 const AccordionRootProvider = react.forwardRef((props, ref) => {
   const [renderStrategyProps, accordionProps] = renderStrategy.splitRenderStrategyProps(props);
-  const [{ value: accordion }, localProps] = createSplitProps.createSplitProps()(accordionProps, ["value"]);
+  const [{ value: accordion }, localProps] = splitRootProviderProps(accordionProps, ["value"]);
   const mergedProps = react$1.mergeProps(accordion.getRootProps(), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useAccordionContext.AccordionProvider, { value: accordion, children: /* @__PURE__ */ jsxRuntime.jsx(renderStrategy.RenderStrategyPropsProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
 });

package/dist/components/accordion/accordion-root-provider.js

@@ -7,9 +7,10 @@ import { splitRenderStrategyProps, RenderStrategyPropsProvider } from '../../uti
 import { ark } from '../factory.js';
 import { AccordionProvider } from './use-accordion-context.js';
 
+const splitRootProviderProps = createSplitProps();
 const AccordionRootProvider = forwardRef((props, ref) => {
   const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props);
-  const [{ value: accordion }, localProps] = createSplitProps()(accordionProps, ["value"]);
+  const [{ value: accordion }, localProps] = splitRootProviderProps(accordionProps, ["value"]);
   const mergedProps = mergeProps(accordion.getRootProps(), localProps);
   return /* @__PURE__ */ jsx(AccordionProvider, { value: accordion, children: /* @__PURE__ */ jsx(RenderStrategyPropsProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
 });

package/dist/components/accordion/accordion-root.cjs

@@ -12,9 +12,10 @@ const factory = require('../factory.cjs');
 const useAccordion = require('./use-accordion.cjs');
 const useAccordionContext = require('./use-accordion-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const AccordionRoot = react.forwardRef((props, ref) => {
   const [renderStrategyProps, accordionProps] = renderStrategy.splitRenderStrategyProps(props);
-  const [useAccordionProps, localProps] = createSplitProps.createSplitProps()(accordionProps, [
+  const [useAccordionProps, localProps] = splitRootProps(accordionProps, [
     "collapsible",
     "defaultValue",
     "disabled",

package/dist/components/accordion/accordion-root.js

@@ -8,9 +8,10 @@ import { ark } from '../factory.js';
 import { useAccordion } from './use-accordion.js';
 import { AccordionProvider } from './use-accordion-context.js';
 
+const splitRootProps = createSplitProps();
 const AccordionRoot = forwardRef((props, ref) => {
   const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props);
-  const [useAccordionProps, localProps] = createSplitProps()(accordionProps, [
+  const [useAccordionProps, localProps] = splitRootProps(accordionProps, [
     "collapsible",
     "defaultValue",
     "disabled",

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/angle-slider/angle-slider-marker.cjs

@@ -10,10 +10,11 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useAngleSliderContext = require('./use-angle-slider-context.cjs');
 
+const splitMarkerProps = createSplitProps.createSplitProps();
 const AngleSliderMarker = react.forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const [markerProps, localProps] = splitMarkerProps(props, ["value"]);
   const angleSlider = useAngleSliderContext.useAngleSliderContext();
-  const mergedProps = react$1.mergeProps(angleSlider.getMarkerProps(itemProps), localProps);
+  const mergedProps = react$1.mergeProps(angleSlider.getMarkerProps(markerProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 AngleSliderMarker.displayName = "AngleSliderMarker";

package/dist/components/angle-slider/angle-slider-marker.js

@@ -6,10 +6,11 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useAngleSliderContext } from './use-angle-slider-context.js';
 
+const splitMarkerProps = createSplitProps();
 const AngleSliderMarker = forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps()(props, ["value"]);
+  const [markerProps, localProps] = splitMarkerProps(props, ["value"]);
   const angleSlider = useAngleSliderContext();
-  const mergedProps = mergeProps(angleSlider.getMarkerProps(itemProps), localProps);
+  const mergedProps = mergeProps(angleSlider.getMarkerProps(markerProps), localProps);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 AngleSliderMarker.displayName = "AngleSliderMarker";

package/dist/components/angle-slider/angle-slider-root-provider.cjs

@@ -10,8 +10,9 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useAngleSliderContext = require('./use-angle-slider-context.cjs');
 
+const splitRootProviderProps = createSplitProps.createSplitProps();
 const AngleSliderRootProvider = react.forwardRef((props, ref) => {
-  const [{ value: angleSlider }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const [{ value: angleSlider }, localProps] = splitRootProviderProps(props, ["value"]);
   const mergedProps = react$1.mergeProps(angleSlider.getRootProps(), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useAngleSliderContext.AngleSliderProvider, { value: angleSlider, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });

package/dist/components/angle-slider/angle-slider-root-provider.js

@@ -6,8 +6,9 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { AngleSliderProvider } from './use-angle-slider-context.js';
 
+const splitRootProviderProps = createSplitProps();
 const AngleSliderRootProvider = forwardRef((props, ref) => {
-  const [{ value: angleSlider }, localProps] = createSplitProps()(props, ["value"]);
+  const [{ value: angleSlider }, localProps] = splitRootProviderProps(props, ["value"]);
   const mergedProps = mergeProps(angleSlider.getRootProps(), localProps);
   return /* @__PURE__ */ jsx(AngleSliderProvider, { value: angleSlider, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });

package/dist/components/angle-slider/angle-slider-root.cjs

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useAngleSlider = require('./use-angle-slider.cjs');
 const useAngleSliderContext = require('./use-angle-slider-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const AngleSliderRoot = react.forwardRef((props, ref) => {
-  const [useAngleSliderProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [useAngleSliderProps, localProps] = splitRootProps(props, [
     "id",
     "ids",
     "name",

package/dist/components/angle-slider/angle-slider-root.js

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { useAngleSlider } from './use-angle-slider.js';
 import { AngleSliderProvider } from './use-angle-slider-context.js';
 
+const splitRootProps = createSplitProps();
 const AngleSliderRoot = forwardRef((props, ref) => {
-  const [useAngleSliderProps, localProps] = createSplitProps()(props, [
+  const [useAngleSliderProps, localProps] = splitRootProps(props, [
     "id",
     "ids",
     "name",

package/dist/components/avatar/avatar-root-provider.cjs

@@ -10,8 +10,9 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useAvatarContext = require('./use-avatar-context.cjs');
 
+const splitRootProviderProps = createSplitProps.createSplitProps();
 const AvatarRootProvider = react.forwardRef((props, ref) => {
-  const [{ value: avatar }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const [{ value: avatar }, localProps] = splitRootProviderProps(props, ["value"]);
   const mergedProps = react$1.mergeProps(avatar.getRootProps(), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useAvatarContext.AvatarProvider, { value: avatar, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });

package/dist/components/avatar/avatar-root-provider.js

@@ -6,8 +6,9 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { AvatarProvider } from './use-avatar-context.js';
 
+const splitRootProviderProps = createSplitProps();
 const AvatarRootProvider = forwardRef((props, ref) => {
-  const [{ value: avatar }, localProps] = createSplitProps()(props, ["value"]);
+  const [{ value: avatar }, localProps] = splitRootProviderProps(props, ["value"]);
   const mergedProps = mergeProps(avatar.getRootProps(), localProps);
   return /* @__PURE__ */ jsx(AvatarProvider, { value: avatar, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });

package/dist/components/avatar/avatar-root.cjs

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useAvatar = require('./use-avatar.cjs');
 const useAvatarContext = require('./use-avatar-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const AvatarRoot = react.forwardRef((props, ref) => {
-  const [useAvatarProps, localProps] = createSplitProps.createSplitProps()(props, ["id", "ids", "onStatusChange"]);
+  const [useAvatarProps, localProps] = splitRootProps(props, ["id", "ids", "onStatusChange"]);
   const avatar = useAvatar.useAvatar(useAvatarProps);
   const mergedProps = react$1.mergeProps(avatar.getRootProps(), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useAvatarContext.AvatarProvider, { value: avatar, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });

package/dist/components/avatar/avatar-root.js

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { useAvatar } from './use-avatar.js';
 import { AvatarProvider } from './use-avatar-context.js';
 
+const splitRootProps = createSplitProps();
 const AvatarRoot = forwardRef((props, ref) => {
-  const [useAvatarProps, localProps] = createSplitProps()(props, ["id", "ids", "onStatusChange"]);
+  const [useAvatarProps, localProps] = splitRootProps(props, ["id", "ids", "onStatusChange"]);
   const avatar = useAvatar(useAvatarProps);
   const mergedProps = mergeProps(avatar.getRootProps(), localProps);
   return /* @__PURE__ */ jsx(AvatarProvider, { value: avatar, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });

package/dist/components/bottom-sheet/bottom-sheet-content.cjs

@@ -12,8 +12,9 @@ const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useBottomSheetContext = require('./use-bottom-sheet-context.cjs');
 const createSplitProps = require('../../utils/create-split-props.cjs');
 
+const splitContentProps = createSplitProps.createSplitProps();
 const BottomSheetContent = react.forwardRef((props, ref) => {
-  const [contentProps, localProps] = createSplitProps.createSplitProps()(props, ["draggable"]);
+  const [contentProps, localProps] = splitContentProps(props, ["draggable"]);
   const bottomSheet = useBottomSheetContext.useBottomSheetContext();
   const presence = usePresenceContext.usePresenceContext();
   const mergedProps = react$1.mergeProps(

package/dist/components/bottom-sheet/bottom-sheet-content.js

@@ -8,8 +8,9 @@ import { usePresenceContext } from '../presence/use-presence-context.js';
 import { useBottomSheetContext } from './use-bottom-sheet-context.js';
 import { createSplitProps } from '../../utils/create-split-props.js';
 
+const splitContentProps = createSplitProps();
 const BottomSheetContent = forwardRef((props, ref) => {
-  const [contentProps, localProps] = createSplitProps()(props, ["draggable"]);
+  const [contentProps, localProps] = splitContentProps(props, ["draggable"]);
   const bottomSheet = useBottomSheetContext();
   const presence = usePresenceContext();
   const mergedProps = mergeProps(

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-indicator.cjs

@@ -10,8 +10,9 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useCarouselContext = require('./use-carousel-context.cjs');
 
+const splitIndicatorProps = createSplitProps.createSplitProps();
 const CarouselIndicator = react.forwardRef((props, ref) => {
-  const [indicatorProps, localProps] = createSplitProps.createSplitProps()(props, ["readOnly", "index"]);
+  const [indicatorProps, localProps] = splitIndicatorProps(props, ["readOnly", "index"]);
   const carousel = useCarouselContext.useCarouselContext();
   const mergedProps = react$1.mergeProps(carousel.getIndicatorProps(indicatorProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });

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

@@ -6,8 +6,9 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useCarouselContext } from './use-carousel-context.js';
 
+const splitIndicatorProps = createSplitProps();
 const CarouselIndicator = forwardRef((props, ref) => {
-  const [indicatorProps, localProps] = createSplitProps()(props, ["readOnly", "index"]);
+  const [indicatorProps, localProps] = splitIndicatorProps(props, ["readOnly", "index"]);
   const carousel = useCarouselContext();
   const mergedProps = mergeProps(carousel.getIndicatorProps(indicatorProps), localProps);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });

package/dist/components/carousel/carousel-item.cjs

@@ -10,8 +10,9 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useCarouselContext = require('./use-carousel-context.cjs');
 
+const splitItemProps = createSplitProps.createSplitProps();
 const CarouselItem = react.forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ["index", "snapAlign"]);
+  const [itemProps, localProps] = splitItemProps(props, ["index", "snapAlign"]);
   const carousel = useCarouselContext.useCarouselContext();
   const mergedProps = react$1.mergeProps(carousel.getItemProps(itemProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });

package/dist/components/carousel/carousel-item.js

@@ -6,8 +6,9 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useCarouselContext } from './use-carousel-context.js';
 
+const splitItemProps = createSplitProps();
 const CarouselItem = forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps()(props, ["index", "snapAlign"]);
+  const [itemProps, localProps] = splitItemProps(props, ["index", "snapAlign"]);
   const carousel = useCarouselContext();
   const mergedProps = mergeProps(carousel.getItemProps(itemProps), localProps);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });

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-root-provider.cjs

@@ -10,8 +10,9 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useCarouselContext = require('./use-carousel-context.cjs');
 
+const splitRootProviderProps = createSplitProps.createSplitProps();
 const CarouselRootProvider = react.forwardRef((props, ref) => {
-  const [{ value: carousel }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const [{ value: carousel }, localProps] = splitRootProviderProps(props, ["value"]);
   const mergedProps = react$1.mergeProps(carousel.getRootProps(), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useCarouselContext.CarouselProvider, { value: carousel, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });

package/dist/components/carousel/carousel-root-provider.js

@@ -6,8 +6,9 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { CarouselProvider } from './use-carousel-context.js';
 
+const splitRootProviderProps = createSplitProps();
 const CarouselRootProvider = forwardRef((props, ref) => {
-  const [{ value: carousel }, localProps] = createSplitProps()(props, ["value"]);
+  const [{ value: carousel }, localProps] = splitRootProviderProps(props, ["value"]);
   const mergedProps = mergeProps(carousel.getRootProps(), localProps);
   return /* @__PURE__ */ jsx(CarouselProvider, { value: carousel, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });

package/dist/components/carousel/carousel-root.cjs

@@ -11,10 +11,12 @@ const factory = require('../factory.cjs');
 const useCarousel = require('./use-carousel.cjs');
 const useCarouselContext = require('./use-carousel-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const CarouselRoot = react.forwardRef((props, ref) => {
-  const [useCarouselProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [useCarouselProps, localProps] = splitRootProps(props, [
     "allowMouseDrag",
     "autoplay",
+    "autoSize",
     "defaultPage",
     "id",
     "ids",

package/dist/components/carousel/carousel-root.js

@@ -7,10 +7,12 @@ import { ark } from '../factory.js';
 import { useCarousel } from './use-carousel.js';
 import { CarouselProvider } from './use-carousel-context.js';
 
+const splitRootProps = createSplitProps();
 const CarouselRoot = forwardRef((props, ref) => {
-  const [useCarouselProps, localProps] = createSplitProps()(props, [
+  const [useCarouselProps, localProps] = splitRootProps(props, [
     "allowMouseDrag",
     "autoplay",
+    "autoSize",
     "defaultPage",
     "id",
     "ids",

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;