@ark-ui/react 4.5.0 → 4.6.0

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

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const useCarouselContext = require('./use-carousel-context.cjs');
+
+const CarouselAutoplayTrigger = react.forwardRef(
+  (props, ref) => {
+    const carousel = useCarouselContext.useCarouselContext();
+    const mergedProps = react$1.mergeProps(carousel.getAutoplayTriggerProps(), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+  }
+);
+CarouselAutoplayTrigger.displayName = "CarouselAutoplayTrigger";
+
+exports.CarouselAutoplayTrigger = CarouselAutoplayTrigger;

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

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface CarouselAutoplayTriggerBaseProps extends PolymorphicProps {
+}
+export interface CarouselAutoplayTriggerProps extends HTMLProps<'button'>, CarouselAutoplayTriggerBaseProps {
+}
+export declare const CarouselAutoplayTrigger: ForwardRefExoticComponent<CarouselAutoplayTriggerProps & RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface CarouselAutoplayTriggerBaseProps extends PolymorphicProps {
+}
+export interface CarouselAutoplayTriggerProps extends HTMLProps<'button'>, CarouselAutoplayTriggerBaseProps {
+}
+export declare const CarouselAutoplayTrigger: ForwardRefExoticComponent<CarouselAutoplayTriggerProps & RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useCarouselContext } from './use-carousel-context.js';
+
+const CarouselAutoplayTrigger = forwardRef(
+  (props, ref) => {
+    const carousel = useCarouselContext();
+    const mergedProps = mergeProps(carousel.getAutoplayTriggerProps(), props);
+    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+  }
+);
+CarouselAutoplayTrigger.displayName = "CarouselAutoplayTrigger";
+
+export { CarouselAutoplayTrigger };

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

@@ -4,11 +4,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-const carousel_anatomy = require('./carousel.anatomy.cjs');
+const useCarouselContext = require('./use-carousel-context.cjs');
 
-const CarouselControl = react.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...carousel_anatomy.carouselAnatomy.build().control.attrs, ...props, ref }));
+const CarouselControl = react.forwardRef((props, ref) => {
+  const carousel = useCarouselContext.useCarouselContext();
+  const mergedProps = react$1.mergeProps(carousel.getControlProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ...props, ref });
+});
 CarouselControl.displayName = "CarouselControl";
 
 exports.CarouselControl = CarouselControl;

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

@@ -1,10 +1,15 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
-import { carouselAnatomy } from './carousel.anatomy.js';
+import { useCarouselContext } from './use-carousel-context.js';
 
-const CarouselControl = forwardRef((props, ref) => /* @__PURE__ */ jsx(ark.div, { ...carouselAnatomy.build().control.attrs, ...props, ref }));
+const CarouselControl = forwardRef((props, ref) => {
+  const carousel = useCarouselContext();
+  const mergedProps = mergeProps(carousel.getControlProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ...props, ref });
+});
 CarouselControl.displayName = "CarouselControl";
 
 export { CarouselControl };

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

@@ -11,7 +11,7 @@ const factory = require('../factory.cjs');
 const useCarouselContext = require('./use-carousel-context.cjs');
 
 const CarouselItem = react.forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ["index"]);
+  const [itemProps, localProps] = createSplitProps.createSplitProps()(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

@@ -7,7 +7,7 @@ import { ark } from '../factory.js';
 import { useCarouselContext } from './use-carousel-context.js';
 
 const CarouselItem = forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps()(props, ["index"]);
+  const [itemProps, localProps] = createSplitProps()(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-root.cjs

@@ -13,16 +13,25 @@ const useCarouselContext = require('./use-carousel-context.cjs');
 
 const CarouselRoot = react.forwardRef((props, ref) => {
   const [useCarouselProps, localProps] = createSplitProps.createSplitProps()(props, [
-    "align",
-    "defaultIndex",
+    "allowMouseDrag",
+    "autoplay",
+    "defaultPage",
     "id",
     "ids",
-    "index",
+    "inViewThreshold",
     "loop",
-    "onIndexChange",
+    "onAutoplayStatusChange",
+    "onDragStatusChange",
+    "onPageChange",
     "orientation",
-    "slidesPerView",
-    "spacing"
+    "padding",
+    "page",
+    "slideCount",
+    "slidesPerMove",
+    "slidesPerPage",
+    "snapType",
+    "spacing",
+    "translations"
   ]);
   const carousel = useCarousel.useCarousel(useCarouselProps);
   const mergedProps = react$1.mergeProps(carousel.getRootProps(), localProps);

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

@@ -9,16 +9,25 @@ import { CarouselProvider } from './use-carousel-context.js';
 
 const CarouselRoot = forwardRef((props, ref) => {
   const [useCarouselProps, localProps] = createSplitProps()(props, [
-    "align",
-    "defaultIndex",
+    "allowMouseDrag",
+    "autoplay",
+    "defaultPage",
     "id",
     "ids",
-    "index",
+    "inViewThreshold",
     "loop",
-    "onIndexChange",
+    "onAutoplayStatusChange",
+    "onDragStatusChange",
+    "onPageChange",
     "orientation",
-    "slidesPerView",
-    "spacing"
+    "padding",
+    "page",
+    "slideCount",
+    "slidesPerMove",
+    "slidesPerPage",
+    "snapType",
+    "spacing",
+    "translations"
   ]);
   const carousel = useCarousel(useCarouselProps);
   const mergedProps = mergeProps(carousel.getRootProps(), localProps);

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

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

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

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

package/dist/components/carousel/carousel.cjs

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const carouselAutoplayTrigger = require('./carousel-autoplay-trigger.cjs');
 const carouselContext = require('./carousel-context.cjs');
 const carouselControl = require('./carousel-control.cjs');
 const carouselIndicator = require('./carousel-indicator.cjs');
@@ -12,10 +13,10 @@ 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 carouselViewport = require('./carousel-viewport.cjs');
 
 
 
+exports.AutoplayTrigger = carouselAutoplayTrigger.CarouselAutoplayTrigger;
 exports.Context = carouselContext.CarouselContext;
 exports.Control = carouselControl.CarouselControl;
 exports.Indicator = carouselIndicator.CarouselIndicator;
@@ -26,4 +27,3 @@ exports.NextTrigger = carouselNextTrigger.CarouselNextTrigger;
 exports.PrevTrigger = carouselPrevTrigger.CarouselPrevTrigger;
 exports.Root = carouselRoot.CarouselRoot;
 exports.RootProvider = carouselRootProvider.CarouselRootProvider;
-exports.Viewport = carouselViewport.CarouselViewport;

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

@@ -1,12 +1,12 @@
-export type { SlideChangeDetails } from '@zag-js/carousel';
+export type { PageChangeDetails, AutoplayStatusDetails, DragStatusDetails } from '@zag-js/carousel';
+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 CarouselControlProps as ControlProps, type CarouselControlBaseProps as ControlBaseProps, } from './carousel-control';
-export { CarouselIndicator as Indicator, type CarouselIndicatorProps as IndicatorProps, type CarouselIndicatorBaseProps as IndicatorBaseProps, } from './carousel-indicator';
-export { CarouselIndicatorGroup as IndicatorGroup, type CarouselIndicatorGroupProps as IndicatorGroupProps, type CarouselIndicatorGroupBaseProps as IndicatorGroupBaseProps, } from './carousel-indicator-group';
-export { CarouselItem as Item, type CarouselItemProps as ItemProps, type CarouselItemBaseProps as ItemBaseProps, } from './carousel-item';
-export { CarouselItemGroup as ItemGroup, type CarouselItemGroupProps as ItemGroupProps, type CarouselItemGroupBaseProps as ItemGroupBaseProps, } from './carousel-item-group';
-export { CarouselNextTrigger as NextTrigger, type CarouselNextTriggerProps as NextTriggerProps, type CarouselNextTriggerBaseProps as NextTriggerBaseProps, } from './carousel-next-trigger';
-export { CarouselPrevTrigger as PrevTrigger, type CarouselPrevTriggerProps as PrevTriggerProps, type CarouselPrevTriggerBaseProps as PrevTriggerBaseProps, } from './carousel-prev-trigger';
-export { CarouselRoot as Root, type CarouselRootProps as RootProps, type CarouselRootBaseProps as RootBaseProps, } from './carousel-root';
-export { CarouselRootProvider as RootProvider, type CarouselRootProviderProps as RootProviderProps, type CarouselRootProviderBaseProps as RootProviderBaseProps, } from './carousel-root-provider';
-export { CarouselViewport as Viewport, type CarouselViewportProps as ViewportProps, type CarouselViewportBaseProps as ViewportBaseProps, } from './carousel-viewport';
+export { CarouselControl as Control, type CarouselControlBaseProps as ControlBaseProps, type CarouselControlProps as ControlProps, } from './carousel-control';
+export { CarouselIndicator as Indicator, type CarouselIndicatorBaseProps as IndicatorBaseProps, type CarouselIndicatorProps as IndicatorProps, } from './carousel-indicator';
+export { CarouselIndicatorGroup as IndicatorGroup, type CarouselIndicatorGroupBaseProps as IndicatorGroupBaseProps, type CarouselIndicatorGroupProps as IndicatorGroupProps, } from './carousel-indicator-group';
+export { CarouselItem as Item, type CarouselItemBaseProps as ItemBaseProps, type CarouselItemProps as ItemProps, } from './carousel-item';
+export { CarouselItemGroup as ItemGroup, type CarouselItemGroupBaseProps as ItemGroupBaseProps, type CarouselItemGroupProps as ItemGroupProps, } from './carousel-item-group';
+export { CarouselNextTrigger as NextTrigger, type CarouselNextTriggerBaseProps as NextTriggerBaseProps, type CarouselNextTriggerProps as NextTriggerProps, } from './carousel-next-trigger';
+export { CarouselPrevTrigger as PrevTrigger, type CarouselPrevTriggerBaseProps as PrevTriggerBaseProps, type CarouselPrevTriggerProps as PrevTriggerProps, } from './carousel-prev-trigger';
+export { CarouselRoot as Root, type CarouselRootBaseProps as RootBaseProps, type CarouselRootProps as RootProps, } from './carousel-root';
+export { CarouselRootProvider as RootProvider, type CarouselRootProviderBaseProps as RootProviderBaseProps, type CarouselRootProviderProps as RootProviderProps, } from './carousel-root-provider';

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

@@ -1,12 +1,12 @@
-export type { SlideChangeDetails } from '@zag-js/carousel';
+export type { PageChangeDetails, AutoplayStatusDetails, DragStatusDetails } from '@zag-js/carousel';
+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 CarouselControlProps as ControlProps, type CarouselControlBaseProps as ControlBaseProps, } from './carousel-control';
-export { CarouselIndicator as Indicator, type CarouselIndicatorProps as IndicatorProps, type CarouselIndicatorBaseProps as IndicatorBaseProps, } from './carousel-indicator';
-export { CarouselIndicatorGroup as IndicatorGroup, type CarouselIndicatorGroupProps as IndicatorGroupProps, type CarouselIndicatorGroupBaseProps as IndicatorGroupBaseProps, } from './carousel-indicator-group';
-export { CarouselItem as Item, type CarouselItemProps as ItemProps, type CarouselItemBaseProps as ItemBaseProps, } from './carousel-item';
-export { CarouselItemGroup as ItemGroup, type CarouselItemGroupProps as ItemGroupProps, type CarouselItemGroupBaseProps as ItemGroupBaseProps, } from './carousel-item-group';
-export { CarouselNextTrigger as NextTrigger, type CarouselNextTriggerProps as NextTriggerProps, type CarouselNextTriggerBaseProps as NextTriggerBaseProps, } from './carousel-next-trigger';
-export { CarouselPrevTrigger as PrevTrigger, type CarouselPrevTriggerProps as PrevTriggerProps, type CarouselPrevTriggerBaseProps as PrevTriggerBaseProps, } from './carousel-prev-trigger';
-export { CarouselRoot as Root, type CarouselRootProps as RootProps, type CarouselRootBaseProps as RootBaseProps, } from './carousel-root';
-export { CarouselRootProvider as RootProvider, type CarouselRootProviderProps as RootProviderProps, type CarouselRootProviderBaseProps as RootProviderBaseProps, } from './carousel-root-provider';
-export { CarouselViewport as Viewport, type CarouselViewportProps as ViewportProps, type CarouselViewportBaseProps as ViewportBaseProps, } from './carousel-viewport';
+export { CarouselControl as Control, type CarouselControlBaseProps as ControlBaseProps, type CarouselControlProps as ControlProps, } from './carousel-control';
+export { CarouselIndicator as Indicator, type CarouselIndicatorBaseProps as IndicatorBaseProps, type CarouselIndicatorProps as IndicatorProps, } from './carousel-indicator';
+export { CarouselIndicatorGroup as IndicatorGroup, type CarouselIndicatorGroupBaseProps as IndicatorGroupBaseProps, type CarouselIndicatorGroupProps as IndicatorGroupProps, } from './carousel-indicator-group';
+export { CarouselItem as Item, type CarouselItemBaseProps as ItemBaseProps, type CarouselItemProps as ItemProps, } from './carousel-item';
+export { CarouselItemGroup as ItemGroup, type CarouselItemGroupBaseProps as ItemGroupBaseProps, type CarouselItemGroupProps as ItemGroupProps, } from './carousel-item-group';
+export { CarouselNextTrigger as NextTrigger, type CarouselNextTriggerBaseProps as NextTriggerBaseProps, type CarouselNextTriggerProps as NextTriggerProps, } from './carousel-next-trigger';
+export { CarouselPrevTrigger as PrevTrigger, type CarouselPrevTriggerBaseProps as PrevTriggerBaseProps, type CarouselPrevTriggerProps as PrevTriggerProps, } from './carousel-prev-trigger';
+export { CarouselRoot as Root, type CarouselRootBaseProps as RootBaseProps, type CarouselRootProps as RootProps, } from './carousel-root';
+export { CarouselRootProvider as RootProvider, type CarouselRootProviderBaseProps as RootProviderBaseProps, type CarouselRootProviderProps as RootProviderProps, } from './carousel-root-provider';

package/dist/components/carousel/carousel.js

@@ -1,3 +1,4 @@
+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';
 export { CarouselIndicator as Indicator } from './carousel-indicator.js';
@@ -8,4 +9,3 @@ export { CarouselNextTrigger as NextTrigger } from './carousel-next-trigger.js';
 export { CarouselPrevTrigger as PrevTrigger } from './carousel-prev-trigger.js';
 export { CarouselRoot as Root } from './carousel-root.js';
 export { CarouselRootProvider as RootProvider } from './carousel-root-provider.js';
-export { CarouselViewport as Viewport } from './carousel-viewport.js';

package/dist/components/carousel/index.cjs

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const carouselAutoplayTrigger = require('./carousel-autoplay-trigger.cjs');
 const carouselContext = require('./carousel-context.cjs');
 const carouselControl = require('./carousel-control.cjs');
 const carouselIndicator = require('./carousel-indicator.cjs');
@@ -12,14 +13,14 @@ 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 carouselViewport = require('./carousel-viewport.cjs');
-const carousel_anatomy = require('./carousel.anatomy.cjs');
 const useCarousel = require('./use-carousel.cjs');
 const useCarouselContext = require('./use-carousel-context.cjs');
-const carousel = require('./carousel.cjs');
+const carousel$1 = require('./carousel.cjs');
+const carousel = require('@zag-js/carousel');
 
 
 
+exports.CarouselAutoplayTrigger = carouselAutoplayTrigger.CarouselAutoplayTrigger;
 exports.CarouselContext = carouselContext.CarouselContext;
 exports.CarouselControl = carouselControl.CarouselControl;
 exports.CarouselIndicator = carouselIndicator.CarouselIndicator;
@@ -30,8 +31,10 @@ exports.CarouselNextTrigger = carouselNextTrigger.CarouselNextTrigger;
 exports.CarouselPrevTrigger = carouselPrevTrigger.CarouselPrevTrigger;
 exports.CarouselRoot = carouselRoot.CarouselRoot;
 exports.CarouselRootProvider = carouselRootProvider.CarouselRootProvider;
-exports.CarouselViewport = carouselViewport.CarouselViewport;
-exports.carouselAnatomy = carousel_anatomy.carouselAnatomy;
 exports.useCarousel = useCarousel.useCarousel;
 exports.useCarouselContext = useCarouselContext.useCarouselContext;
-exports.Carousel = carousel;
+exports.Carousel = carousel$1;
+Object.defineProperty(exports, "carouselAnatomy", {
+  enumerable: true,
+  get: () => carousel.anatomy
+});

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

@@ -1,4 +1,5 @@
-export type { SlideChangeDetails as CarouselSlideChangeDetails } from '@zag-js/carousel';
+export type { AutoplayStatusDetails as CarouselAutoplayStatusDetails, DragStatusDetails as CarouselDragStatusDetails, PageChangeDetails as CarouselPageChangeDetails, } from '@zag-js/carousel';
+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';
 export { CarouselIndicator, type CarouselIndicatorBaseProps, type CarouselIndicatorProps, } from './carousel-indicator';
@@ -9,7 +10,6 @@ export { CarouselNextTrigger, type CarouselNextTriggerBaseProps, type CarouselNe
 export { CarouselPrevTrigger, type CarouselPrevTriggerBaseProps, type CarouselPrevTriggerProps, } from './carousel-prev-trigger';
 export { CarouselRoot, type CarouselRootBaseProps, type CarouselRootProps, } from './carousel-root';
 export { CarouselRootProvider, type CarouselRootProviderBaseProps, type CarouselRootProviderProps, } from './carousel-root-provider';
-export { CarouselViewport, type CarouselViewportBaseProps, type CarouselViewportProps, } from './carousel-viewport';
 export { carouselAnatomy } from './carousel.anatomy';
 export { useCarousel, type UseCarouselProps, type UseCarouselReturn } from './use-carousel';
 export { useCarouselContext, type UseCarouselContext } from './use-carousel-context';

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

@@ -1,4 +1,5 @@
-export type { SlideChangeDetails as CarouselSlideChangeDetails } from '@zag-js/carousel';
+export type { AutoplayStatusDetails as CarouselAutoplayStatusDetails, DragStatusDetails as CarouselDragStatusDetails, PageChangeDetails as CarouselPageChangeDetails, } from '@zag-js/carousel';
+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';
 export { CarouselIndicator, type CarouselIndicatorBaseProps, type CarouselIndicatorProps, } from './carousel-indicator';
@@ -9,7 +10,6 @@ export { CarouselNextTrigger, type CarouselNextTriggerBaseProps, type CarouselNe
 export { CarouselPrevTrigger, type CarouselPrevTriggerBaseProps, type CarouselPrevTriggerProps, } from './carousel-prev-trigger';
 export { CarouselRoot, type CarouselRootBaseProps, type CarouselRootProps, } from './carousel-root';
 export { CarouselRootProvider, type CarouselRootProviderBaseProps, type CarouselRootProviderProps, } from './carousel-root-provider';
-export { CarouselViewport, type CarouselViewportBaseProps, type CarouselViewportProps, } from './carousel-viewport';
 export { carouselAnatomy } from './carousel.anatomy';
 export { useCarousel, type UseCarouselProps, type UseCarouselReturn } from './use-carousel';
 export { useCarouselContext, type UseCarouselContext } from './use-carousel-context';

package/dist/components/carousel/index.js

@@ -1,3 +1,4 @@
+export { CarouselAutoplayTrigger } from './carousel-autoplay-trigger.js';
 export { CarouselContext } from './carousel-context.js';
 export { CarouselControl } from './carousel-control.js';
 export { CarouselIndicator } from './carousel-indicator.js';
@@ -8,9 +9,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 { CarouselViewport } from './carousel-viewport.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/carousel/use-carousel.cjs

@@ -36,13 +36,13 @@ const useCarousel = (props = {}) => {
     id: react.useId(),
     dir,
     getRootNode,
-    index: props.defaultIndex,
+    page: props.defaultPage,
     ...props
   };
   const context = {
     ...initialContext,
-    index: props.index,
-    onIndexChange: useEvent.useEvent(props.onIndexChange, { sync: true })
+    page: props.page,
+    onPageChange: useEvent.useEvent(props.onPageChange, { sync: true })
   };
   const [state, send] = react$1.useMachine(carousel__namespace.machine(initialContext), { context });
   return carousel__namespace.connect(state, send, react$1.normalizeProps);

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

@@ -3,10 +3,10 @@ import { Optional } from '../../types';
 import * as carousel from '@zag-js/carousel';
 export interface UseCarouselProps extends Optional<Omit<carousel.Context, 'dir' | 'getRootNode'>, 'id'> {
     /**
-     * The initial index of the carousel when it is first rendered.
+     * The initial page of the carousel when it is first rendered.
      * Use this when you do not need to control the state of the carousel.
      */
-    defaultIndex?: carousel.Context['index'];
+    defaultPage?: carousel.Context['page'];
 }
 export interface UseCarouselReturn extends carousel.Api<PropTypes> {
 }

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

@@ -3,10 +3,10 @@ import { Optional } from '../../types';
 import * as carousel from '@zag-js/carousel';
 export interface UseCarouselProps extends Optional<Omit<carousel.Context, 'dir' | 'getRootNode'>, 'id'> {
     /**
-     * The initial index of the carousel when it is first rendered.
+     * The initial page of the carousel when it is first rendered.
      * Use this when you do not need to control the state of the carousel.
      */
-    defaultIndex?: carousel.Context['index'];
+    defaultPage?: carousel.Context['page'];
 }
 export interface UseCarouselReturn extends carousel.Api<PropTypes> {
 }

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

@@ -13,13 +13,13 @@ const useCarousel = (props = {}) => {
     id: useId(),
     dir,
     getRootNode,
-    index: props.defaultIndex,
+    page: props.defaultPage,
     ...props
   };
   const context = {
     ...initialContext,
-    index: props.index,
-    onIndexChange: useEvent(props.onIndexChange, { sync: true })
+    page: props.page,
+    onPageChange: useEvent(props.onPageChange, { sync: true })
   };
   const [state, send] = useMachine(carousel.machine(initialContext), { context });
   return carousel.connect(state, send, normalizeProps);

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

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

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

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

package/dist/components/checkbox/use-checkbox-group.cjs

@@ -16,7 +16,7 @@ function useCheckboxGroup(props = {}) {
     name,
     invalid
   } = props;
-  const interative = !(disabled || readOnly);
+  const interactive = !(disabled || readOnly);
   const onChangeProp = useEvent.useEvent(onValueChange, { sync: true });
   const [value, setValue] = useControllableState.useControllableState({
     value: controlledValue,
@@ -30,12 +30,12 @@ function useCheckboxGroup(props = {}) {
     isChecked(val) ? removeValue(val) : addValue(val);
   };
   const addValue = (val) => {
-    if (!interative) return;
+    if (!interactive) return;
     if (isChecked(val)) return;
     setValue(value.concat(val));
   };
   const removeValue = (val) => {
-    if (!interative) return;
+    if (!interactive) return;
     setValue(value.filter((v) => String(v) !== String(val)));
   };
   const getItemProps = (props2) => {

package/dist/components/checkbox/use-checkbox-group.js

@@ -12,7 +12,7 @@ function useCheckboxGroup(props = {}) {
     name,
     invalid
   } = props;
-  const interative = !(disabled || readOnly);
+  const interactive = !(disabled || readOnly);
   const onChangeProp = useEvent(onValueChange, { sync: true });
   const [value, setValue] = useControllableState({
     value: controlledValue,
@@ -26,12 +26,12 @@ function useCheckboxGroup(props = {}) {
     isChecked(val) ? removeValue(val) : addValue(val);
   };
   const addValue = (val) => {
-    if (!interative) return;
+    if (!interactive) return;
     if (isChecked(val)) return;
     setValue(value.concat(val));
   };
   const removeValue = (val) => {
-    if (!interative) return;
+    if (!interactive) return;
     setValue(value.filter((v) => String(v) !== String(val)));
   };
   const getItemProps = (props2) => {

package/dist/components/collection.d.cts

@@ -1,4 +1,4 @@
-import { CollectionOptions, FilePathTreeNode, ListCollection, TreeCollection, TreeCollectionOptions } from '@zag-js/collection';
+import { CollectionItem, CollectionOptions, FilePathTreeNode, ListCollection, TreeCollection, TreeCollectionOptions, TreeNode } from '@zag-js/collection';
 export type { CollectionItem, ListCollection } from '@zag-js/collection';
 export declare const createListCollection: <T extends unknown>(options: CollectionOptions<T>) => ListCollection<T>;
 export type { TreeCollection, TreeNode } from '@zag-js/collection';

package/dist/components/collection.d.ts

@@ -1,4 +1,4 @@
-import { CollectionOptions, FilePathTreeNode, ListCollection, TreeCollection, TreeCollectionOptions } from '@zag-js/collection';
+import { CollectionItem, CollectionOptions, FilePathTreeNode, ListCollection, TreeCollection, TreeCollectionOptions, TreeNode } from '@zag-js/collection';
 export type { CollectionItem, ListCollection } from '@zag-js/collection';
 export declare const createListCollection: <T extends unknown>(options: CollectionOptions<T>) => ListCollection<T>;
 export type { TreeCollection, TreeNode } from '@zag-js/collection';

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<"input" | "label" | "table" | "view" | "content" | "root" | "trigger" | "nextTrigger" | "prevTrigger" | "control" | "positioner" | "clearTrigger" | "monthSelect" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger">;
+export declare const datePickerAnatomy: AnatomyInstance<"input" | "label" | "table" | "view" | "content" | "root" | "trigger" | "control" | "positioner" | "clearTrigger" | "monthSelect" | "nextTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger">;

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<"input" | "label" | "table" | "view" | "content" | "root" | "trigger" | "nextTrigger" | "prevTrigger" | "control" | "positioner" | "clearTrigger" | "monthSelect" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger">;
+export declare const datePickerAnatomy: AnatomyInstance<"input" | "label" | "table" | "view" | "content" | "root" | "trigger" | "control" | "positioner" | "clearTrigger" | "monthSelect" | "nextTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger">;

package/dist/components/index.cjs

@@ -22,6 +22,7 @@ const avatarRootProvider = require('./avatar/avatar-root-provider.cjs');
 const useAvatar = require('./avatar/use-avatar.cjs');
 const useAvatarContext = require('./avatar/use-avatar-context.cjs');
 const avatar$1 = require('./avatar/avatar.cjs');
+const carouselAutoplayTrigger = require('./carousel/carousel-autoplay-trigger.cjs');
 const carouselContext = require('./carousel/carousel-context.cjs');
 const carouselControl = require('./carousel/carousel-control.cjs');
 const carouselIndicator = require('./carousel/carousel-indicator.cjs');
@@ -32,11 +33,9 @@ const carouselNextTrigger = require('./carousel/carousel-next-trigger.cjs');
 const carouselPrevTrigger = require('./carousel/carousel-prev-trigger.cjs');
 const carouselRoot = require('./carousel/carousel-root.cjs');
 const carouselRootProvider = require('./carousel/carousel-root-provider.cjs');
-const carouselViewport = require('./carousel/carousel-viewport.cjs');
-const carousel_anatomy = require('./carousel/carousel.anatomy.cjs');
 const useCarousel = require('./carousel/use-carousel.cjs');
 const useCarouselContext = require('./carousel/use-carousel-context.cjs');
-const carousel = require('./carousel/carousel.cjs');
+const carousel$1 = require('./carousel/carousel.cjs');
 const checkboxContext = require('./checkbox/checkbox-context.cjs');
 const checkboxControl = require('./checkbox/checkbox-control.cjs');
 const checkboxGroup = require('./checkbox/checkbox-group.cjs');
@@ -519,10 +518,10 @@ const useTimePicker = require('./time-picker/use-time-picker.cjs');
 const useTimePickerContext = require('./time-picker/use-time-picker-context.cjs');
 const timePicker$1 = require('./time-picker/time-picker.cjs');
 const timerActionTrigger = require('./timer/timer-action-trigger.cjs');
+const timerArea = require('./timer/timer-area.cjs');
 const timerContext = require('./timer/timer-context.cjs');
-const timerItem = require('./timer/timer-item.cjs');
 const timerControl = require('./timer/timer-control.cjs');
-const timerArea = require('./timer/timer-area.cjs');
+const timerItem = require('./timer/timer-item.cjs');
 const timerRoot = require('./timer/timer-root.cjs');
 const timerRootProvider = require('./timer/timer-root-provider.cjs');
 const timerSeparator = require('./timer/timer-separator.cjs');
@@ -585,6 +584,7 @@ const useTreeView = require('./tree-view/use-tree-view.cjs');
 const treeView$1 = require('./tree-view/tree-view.cjs');
 const accordion = require('@zag-js/accordion');
 const avatar = require('@zag-js/avatar');
+const carousel = require('@zag-js/carousel');
 const clipboard = require('@zag-js/clipboard');
 const collapsible = require('@zag-js/collapsible');
 const combobox = require('@zag-js/combobox');
@@ -638,6 +638,7 @@ exports.AvatarRootProvider = avatarRootProvider.AvatarRootProvider;
 exports.useAvatar = useAvatar.useAvatar;
 exports.useAvatarContext = useAvatarContext.useAvatarContext;
 exports.Avatar = avatar$1;
+exports.CarouselAutoplayTrigger = carouselAutoplayTrigger.CarouselAutoplayTrigger;
 exports.CarouselContext = carouselContext.CarouselContext;
 exports.CarouselControl = carouselControl.CarouselControl;
 exports.CarouselIndicator = carouselIndicator.CarouselIndicator;
@@ -648,11 +649,9 @@ exports.CarouselNextTrigger = carouselNextTrigger.CarouselNextTrigger;
 exports.CarouselPrevTrigger = carouselPrevTrigger.CarouselPrevTrigger;
 exports.CarouselRoot = carouselRoot.CarouselRoot;
 exports.CarouselRootProvider = carouselRootProvider.CarouselRootProvider;
-exports.CarouselViewport = carouselViewport.CarouselViewport;
-exports.carouselAnatomy = carousel_anatomy.carouselAnatomy;
 exports.useCarousel = useCarousel.useCarousel;
 exports.useCarouselContext = useCarouselContext.useCarouselContext;
-exports.Carousel = carousel;
+exports.Carousel = carousel$1;
 exports.CheckboxContext = checkboxContext.CheckboxContext;
 exports.CheckboxControl = checkboxControl.CheckboxControl;
 exports.CheckboxGroup = checkboxGroup.CheckboxGroup;
@@ -1148,10 +1147,10 @@ exports.useTimePicker = useTimePicker.useTimePicker;
 exports.useTimePickerContext = useTimePickerContext.useTimePickerContext;
 exports.TimePicker = timePicker$1;
 exports.TimerActionTrigger = timerActionTrigger.TimerActionTrigger;
+exports.TimerArea = timerArea.TimerArea;
 exports.TimerContext = timerContext.TimerContext;
-exports.TimerItem = timerItem.TimerItem;
 exports.TimerControl = timerControl.TimerControl;
-exports.TimerArea = timerArea.TimerArea;
+exports.TimerItem = timerItem.TimerItem;
 exports.TimerRoot = timerRoot.TimerRoot;
 exports.TimerRootProvider = timerRootProvider.TimerRootProvider;
 exports.TimerSeparator = timerSeparator.TimerSeparator;
@@ -1220,6 +1219,10 @@ Object.defineProperty(exports, "avatarAnatomy", {
 	enumerable: true,
 	get: () => avatar.anatomy
 });
+Object.defineProperty(exports, "carouselAnatomy", {
+	enumerable: true,
+	get: () => carousel.anatomy
+});
 Object.defineProperty(exports, "clipboardAnatomy", {
 	enumerable: true,
 	get: () => clipboard.anatomy

package/dist/components/index.js

@@ -20,6 +20,7 @@ export { useAvatar } from './avatar/use-avatar.js';
 export { useAvatarContext } from './avatar/use-avatar-context.js';
 import * as avatar from './avatar/avatar.js';
 export { avatar as Avatar };
+export { CarouselAutoplayTrigger } from './carousel/carousel-autoplay-trigger.js';
 export { CarouselContext } from './carousel/carousel-context.js';
 export { CarouselControl } from './carousel/carousel-control.js';
 export { CarouselIndicator } from './carousel/carousel-indicator.js';
@@ -30,8 +31,6 @@ export { CarouselNextTrigger } from './carousel/carousel-next-trigger.js';
 export { CarouselPrevTrigger } from './carousel/carousel-prev-trigger.js';
 export { CarouselRoot } from './carousel/carousel-root.js';
 export { CarouselRootProvider } from './carousel/carousel-root-provider.js';
-export { CarouselViewport } from './carousel/carousel-viewport.js';
-export { carouselAnatomy } from './carousel/carousel.anatomy.js';
 export { useCarousel } from './carousel/use-carousel.js';
 export { useCarouselContext } from './carousel/use-carousel-context.js';
 import * as carousel from './carousel/carousel.js';
@@ -550,10 +549,10 @@ export { useTimePickerContext } from './time-picker/use-time-picker-context.js';
 import * as timePicker from './time-picker/time-picker.js';
 export { timePicker as TimePicker };
 export { TimerActionTrigger } from './timer/timer-action-trigger.js';
+export { TimerArea } from './timer/timer-area.js';
 export { TimerContext } from './timer/timer-context.js';
-export { TimerItem } from './timer/timer-item.js';
 export { TimerControl } from './timer/timer-control.js';
-export { TimerArea } from './timer/timer-area.js';
+export { TimerItem } from './timer/timer-item.js';
 export { TimerRoot } from './timer/timer-root.js';
 export { TimerRootProvider } from './timer/timer-root-provider.js';
 export { TimerSeparator } from './timer/timer-separator.js';
@@ -622,6 +621,7 @@ import * as treeView from './tree-view/tree-view.js';
 export { treeView as TreeView };
 export { anatomy as accordionAnatomy } from '@zag-js/accordion';
 export { anatomy as avatarAnatomy } from '@zag-js/avatar';
+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 comboboxAnatomy } from '@zag-js/combobox';

package/dist/components/presence/use-presence.cjs

@@ -6,7 +6,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const presence = require('@zag-js/presence');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-const useDebounce = require('../../utils/use-debounce.cjs');
 const useEvent = require('../../utils/use-event.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -29,9 +28,8 @@ function _interopNamespaceDefault(e) {
 const presence__namespace = /*#__PURE__*/_interopNamespaceDefault(presence);
 
 const usePresence = (props) => {
-  const { lazyMount, unmountOnExit, ...rest } = props;
+  const { lazyMount, unmountOnExit, present, ...rest } = props;
   const wasEverPresent = react.useRef(false);
-  const present = useDebounce.useDebounce(props.present, 0);
   const context = {
     ...rest,
     present,

package/dist/components/presence/use-presence.js

@@ -2,13 +2,11 @@
 import * as presence from '@zag-js/presence';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useRef } from 'react';
-import { useDebounce } from '../../utils/use-debounce.js';
 import { useEvent } from '../../utils/use-event.js';
 
 const usePresence = (props) => {
-  const { lazyMount, unmountOnExit, ...rest } = props;
+  const { lazyMount, unmountOnExit, present, ...rest } = props;
   const wasEverPresent = useRef(false);
-  const present = useDebounce(props.present, 0);
   const context = {
     ...rest,
     present,

package/dist/components/segment-group/segment-group.anatomy.d.cts

@@ -1,3 +1,3 @@
 import { Anatomy, AnatomyPart } from '@zag-js/anatomy';
-export declare const segmentGroupAnatomy: Anatomy<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl">;
-export declare const parts: Record<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl", AnatomyPart>;
+export declare const segmentGroupAnatomy: Anatomy<"label" | "root" | "indicator" | "item" | "itemText" | "itemControl">;
+export declare const parts: Record<"label" | "root" | "indicator" | "item" | "itemText" | "itemControl", AnatomyPart>;

package/dist/components/segment-group/segment-group.anatomy.d.ts

@@ -1,3 +1,3 @@
 import { Anatomy, AnatomyPart } from '@zag-js/anatomy';
-export declare const segmentGroupAnatomy: Anatomy<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl">;
-export declare const parts: Record<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl", AnatomyPart>;
+export declare const segmentGroupAnatomy: Anatomy<"label" | "root" | "indicator" | "item" | "itemText" | "itemControl">;
+export declare const parts: Record<"label" | "root" | "indicator" | "item" | "itemText" | "itemControl", AnatomyPart>;

package/dist/components/tabs/tab-content.cjs

@@ -9,6 +9,7 @@ const react = require('react');
 const composeRefs = require('../../utils/compose-refs.cjs');
 const createSplitProps = require('../../utils/create-split-props.cjs');
 const renderStrategy = require('../../utils/render-strategy.cjs');
+const useDebounce = require('../../utils/use-debounce.cjs');
 const factory = require('../factory.cjs');
 const usePresence = require('../presence/use-presence.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
@@ -20,7 +21,7 @@ const TabContent = react.forwardRef((props, ref) => {
   const renderStrategyProps = renderStrategy.useRenderStrategyPropsContext();
   const presence = usePresence.usePresence({
     ...renderStrategyProps,
-    present: tabs.value === props.value,
+    present: useDebounce.useDebounce(tabs.value === props.value, 0),
     immediate: true
   });
   const mergedProps = react$1.mergeProps(

package/dist/components/tabs/tab-content.js

@@ -5,6 +5,7 @@ import { forwardRef } from 'react';
 import { composeRefs } from '../../utils/compose-refs.js';
 import { createSplitProps } from '../../utils/create-split-props.js';
 import { useRenderStrategyPropsContext } from '../../utils/render-strategy.js';
+import { useDebounce } from '../../utils/use-debounce.js';
 import { ark } from '../factory.js';
 import { usePresence } from '../presence/use-presence.js';
 import { PresenceProvider } from '../presence/use-presence-context.js';
@@ -16,7 +17,7 @@ const TabContent = forwardRef((props, ref) => {
   const renderStrategyProps = useRenderStrategyPropsContext();
   const presence = usePresence({
     ...renderStrategyProps,
-    present: tabs.value === props.value,
+    present: useDebounce(tabs.value === props.value, 0),
     immediate: true
   });
   const mergedProps = mergeProps(

package/dist/components/timer/index.cjs

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const timerActionTrigger = require('./timer-action-trigger.cjs');
+const timerArea = require('./timer-area.cjs');
 const timerContext = require('./timer-context.cjs');
-const timerItem = require('./timer-item.cjs');
 const timerControl = require('./timer-control.cjs');
-const timerArea = require('./timer-area.cjs');
+const timerItem = require('./timer-item.cjs');
 const timerRoot = require('./timer-root.cjs');
 const timerRootProvider = require('./timer-root-provider.cjs');
 const timerSeparator = require('./timer-separator.cjs');
@@ -18,10 +18,10 @@ const timer = require('@zag-js/timer');
 
 
 exports.TimerActionTrigger = timerActionTrigger.TimerActionTrigger;
+exports.TimerArea = timerArea.TimerArea;
 exports.TimerContext = timerContext.TimerContext;
-exports.TimerItem = timerItem.TimerItem;
 exports.TimerControl = timerControl.TimerControl;
-exports.TimerArea = timerArea.TimerArea;
+exports.TimerItem = timerItem.TimerItem;
 exports.TimerRoot = timerRoot.TimerRoot;
 exports.TimerRootProvider = timerRootProvider.TimerRootProvider;
 exports.TimerSeparator = timerSeparator.TimerSeparator;

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

@@ -1,8 +1,8 @@
 export { TimerActionTrigger, type TimerActionTriggerBaseProps, type TimerActionTriggerProps, } from './timer-action-trigger';
+export { TimerArea, type TimerAreaBaseProps, type TimerAreaProps } from './timer-area';
 export { TimerContext, type TimerContextProps } from './timer-context';
-export { TimerItem, type TimerItemBaseProps, type TimerItemProps } from './timer-item';
 export { TimerControl, type TimerControlBaseProps, type TimerControlProps } from './timer-control';
-export { TimerArea, type TimerAreaBaseProps, type TimerAreaProps } from './timer-area';
+export { TimerItem, type TimerItemBaseProps, type TimerItemProps } from './timer-item';
 export { TimerRoot, type TimerRootBaseProps, type TimerRootProps } from './timer-root';
 export { TimerRootProvider, type TimerRootProviderBaseProps, type TimerRootProviderProps, } from './timer-root-provider';
 export { TimerSeparator, type TimerSeparatorBaseProps, type TimerSeparatorProps, } from './timer-separator';

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

@@ -1,8 +1,8 @@
 export { TimerActionTrigger, type TimerActionTriggerBaseProps, type TimerActionTriggerProps, } from './timer-action-trigger';
+export { TimerArea, type TimerAreaBaseProps, type TimerAreaProps } from './timer-area';
 export { TimerContext, type TimerContextProps } from './timer-context';
-export { TimerItem, type TimerItemBaseProps, type TimerItemProps } from './timer-item';
 export { TimerControl, type TimerControlBaseProps, type TimerControlProps } from './timer-control';
-export { TimerArea, type TimerAreaBaseProps, type TimerAreaProps } from './timer-area';
+export { TimerItem, type TimerItemBaseProps, type TimerItemProps } from './timer-item';
 export { TimerRoot, type TimerRootBaseProps, type TimerRootProps } from './timer-root';
 export { TimerRootProvider, type TimerRootProviderBaseProps, type TimerRootProviderProps, } from './timer-root-provider';
 export { TimerSeparator, type TimerSeparatorBaseProps, type TimerSeparatorProps, } from './timer-separator';

package/dist/components/timer/index.js

@@ -1,8 +1,8 @@
 export { TimerActionTrigger } from './timer-action-trigger.js';
+export { TimerArea } from './timer-area.js';
 export { TimerContext } from './timer-context.js';
-export { TimerItem } from './timer-item.js';
 export { TimerControl } from './timer-control.js';
-export { TimerArea } from './timer-area.js';
+export { TimerItem } from './timer-item.js';
 export { TimerRoot } from './timer-root.js';
 export { TimerRootProvider } from './timer-root-provider.js';
 export { TimerSeparator } from './timer-separator.js';

package/dist/index.cjs

@@ -22,6 +22,7 @@ const avatarRootProvider = require('./components/avatar/avatar-root-provider.cjs
 const useAvatar = require('./components/avatar/use-avatar.cjs');
 const useAvatarContext = require('./components/avatar/use-avatar-context.cjs');
 const avatar$1 = require('./components/avatar/avatar.cjs');
+const carouselAutoplayTrigger = require('./components/carousel/carousel-autoplay-trigger.cjs');
 const carouselContext = require('./components/carousel/carousel-context.cjs');
 const carouselControl = require('./components/carousel/carousel-control.cjs');
 const carouselIndicator = require('./components/carousel/carousel-indicator.cjs');
@@ -32,11 +33,9 @@ const carouselNextTrigger = require('./components/carousel/carousel-next-trigger
 const carouselPrevTrigger = require('./components/carousel/carousel-prev-trigger.cjs');
 const carouselRoot = require('./components/carousel/carousel-root.cjs');
 const carouselRootProvider = require('./components/carousel/carousel-root-provider.cjs');
-const carouselViewport = require('./components/carousel/carousel-viewport.cjs');
-const carousel_anatomy = require('./components/carousel/carousel.anatomy.cjs');
 const useCarousel = require('./components/carousel/use-carousel.cjs');
 const useCarouselContext = require('./components/carousel/use-carousel-context.cjs');
-const carousel = require('./components/carousel/carousel.cjs');
+const carousel$1 = require('./components/carousel/carousel.cjs');
 const checkboxContext = require('./components/checkbox/checkbox-context.cjs');
 const checkboxControl = require('./components/checkbox/checkbox-control.cjs');
 const checkboxGroup = require('./components/checkbox/checkbox-group.cjs');
@@ -519,10 +518,10 @@ const useTimePicker = require('./components/time-picker/use-time-picker.cjs');
 const useTimePickerContext = require('./components/time-picker/use-time-picker-context.cjs');
 const timePicker$1 = require('./components/time-picker/time-picker.cjs');
 const timerActionTrigger = require('./components/timer/timer-action-trigger.cjs');
+const timerArea = require('./components/timer/timer-area.cjs');
 const timerContext = require('./components/timer/timer-context.cjs');
-const timerItem = require('./components/timer/timer-item.cjs');
 const timerControl = require('./components/timer/timer-control.cjs');
-const timerArea = require('./components/timer/timer-area.cjs');
+const timerItem = require('./components/timer/timer-item.cjs');
 const timerRoot = require('./components/timer/timer-root.cjs');
 const timerRootProvider = require('./components/timer/timer-root-provider.cjs');
 const timerSeparator = require('./components/timer/timer-separator.cjs');
@@ -589,6 +588,7 @@ const localeProvider = require('./providers/locale/locale-provider.cjs');
 const useLocaleContext = require('./providers/locale/use-locale-context.cjs');
 const accordion = require('@zag-js/accordion');
 const avatar = require('@zag-js/avatar');
+const carousel = require('@zag-js/carousel');
 const clipboard = require('@zag-js/clipboard');
 const collapsible = require('@zag-js/collapsible');
 const combobox = require('@zag-js/combobox');
@@ -642,6 +642,7 @@ exports.AvatarRootProvider = avatarRootProvider.AvatarRootProvider;
 exports.useAvatar = useAvatar.useAvatar;
 exports.useAvatarContext = useAvatarContext.useAvatarContext;
 exports.Avatar = avatar$1;
+exports.CarouselAutoplayTrigger = carouselAutoplayTrigger.CarouselAutoplayTrigger;
 exports.CarouselContext = carouselContext.CarouselContext;
 exports.CarouselControl = carouselControl.CarouselControl;
 exports.CarouselIndicator = carouselIndicator.CarouselIndicator;
@@ -652,11 +653,9 @@ exports.CarouselNextTrigger = carouselNextTrigger.CarouselNextTrigger;
 exports.CarouselPrevTrigger = carouselPrevTrigger.CarouselPrevTrigger;
 exports.CarouselRoot = carouselRoot.CarouselRoot;
 exports.CarouselRootProvider = carouselRootProvider.CarouselRootProvider;
-exports.CarouselViewport = carouselViewport.CarouselViewport;
-exports.carouselAnatomy = carousel_anatomy.carouselAnatomy;
 exports.useCarousel = useCarousel.useCarousel;
 exports.useCarouselContext = useCarouselContext.useCarouselContext;
-exports.Carousel = carousel;
+exports.Carousel = carousel$1;
 exports.CheckboxContext = checkboxContext.CheckboxContext;
 exports.CheckboxControl = checkboxControl.CheckboxControl;
 exports.CheckboxGroup = checkboxGroup.CheckboxGroup;
@@ -1152,10 +1151,10 @@ exports.useTimePicker = useTimePicker.useTimePicker;
 exports.useTimePickerContext = useTimePickerContext.useTimePickerContext;
 exports.TimePicker = timePicker$1;
 exports.TimerActionTrigger = timerActionTrigger.TimerActionTrigger;
+exports.TimerArea = timerArea.TimerArea;
 exports.TimerContext = timerContext.TimerContext;
-exports.TimerItem = timerItem.TimerItem;
 exports.TimerControl = timerControl.TimerControl;
-exports.TimerArea = timerArea.TimerArea;
+exports.TimerItem = timerItem.TimerItem;
 exports.TimerRoot = timerRoot.TimerRoot;
 exports.TimerRootProvider = timerRootProvider.TimerRootProvider;
 exports.TimerSeparator = timerSeparator.TimerSeparator;
@@ -1228,6 +1227,10 @@ Object.defineProperty(exports, "avatarAnatomy", {
 	enumerable: true,
 	get: () => avatar.anatomy
 });
+Object.defineProperty(exports, "carouselAnatomy", {
+	enumerable: true,
+	get: () => carousel.anatomy
+});
 Object.defineProperty(exports, "clipboardAnatomy", {
 	enumerable: true,
 	get: () => clipboard.anatomy

package/dist/index.js

@@ -20,6 +20,7 @@ export { useAvatar } from './components/avatar/use-avatar.js';
 export { useAvatarContext } from './components/avatar/use-avatar-context.js';
 import * as avatar from './components/avatar/avatar.js';
 export { avatar as Avatar };
+export { CarouselAutoplayTrigger } from './components/carousel/carousel-autoplay-trigger.js';
 export { CarouselContext } from './components/carousel/carousel-context.js';
 export { CarouselControl } from './components/carousel/carousel-control.js';
 export { CarouselIndicator } from './components/carousel/carousel-indicator.js';
@@ -30,8 +31,6 @@ export { CarouselNextTrigger } from './components/carousel/carousel-next-trigger
 export { CarouselPrevTrigger } from './components/carousel/carousel-prev-trigger.js';
 export { CarouselRoot } from './components/carousel/carousel-root.js';
 export { CarouselRootProvider } from './components/carousel/carousel-root-provider.js';
-export { CarouselViewport } from './components/carousel/carousel-viewport.js';
-export { carouselAnatomy } from './components/carousel/carousel.anatomy.js';
 export { useCarousel } from './components/carousel/use-carousel.js';
 export { useCarouselContext } from './components/carousel/use-carousel-context.js';
 import * as carousel from './components/carousel/carousel.js';
@@ -550,10 +549,10 @@ export { useTimePickerContext } from './components/time-picker/use-time-picker-c
 import * as timePicker from './components/time-picker/time-picker.js';
 export { timePicker as TimePicker };
 export { TimerActionTrigger } from './components/timer/timer-action-trigger.js';
+export { TimerArea } from './components/timer/timer-area.js';
 export { TimerContext } from './components/timer/timer-context.js';
-export { TimerItem } from './components/timer/timer-item.js';
 export { TimerControl } from './components/timer/timer-control.js';
-export { TimerArea } from './components/timer/timer-area.js';
+export { TimerItem } from './components/timer/timer-item.js';
 export { TimerRoot } from './components/timer/timer-root.js';
 export { TimerRootProvider } from './components/timer/timer-root-provider.js';
 export { TimerSeparator } from './components/timer/timer-separator.js';
@@ -626,6 +625,7 @@ export { LocaleProvider } from './providers/locale/locale-provider.js';
 export { useLocaleContext } from './providers/locale/use-locale-context.js';
 export { anatomy as accordionAnatomy } from '@zag-js/accordion';
 export { anatomy as avatarAnatomy } from '@zag-js/avatar';
+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 comboboxAnatomy } from '@zag-js/combobox';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -161,55 +161,55 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.6.0",
-    "@zag-js/accordion": "0.78.2",
-    "@zag-js/anatomy": "0.78.2",
-    "@zag-js/auto-resize": "0.78.2",
-    "@zag-js/avatar": "0.78.2",
-    "@zag-js/carousel": "0.78.2",
-    "@zag-js/checkbox": "0.78.2",
-    "@zag-js/clipboard": "0.78.2",
-    "@zag-js/collapsible": "0.78.2",
-    "@zag-js/collection": "0.78.2",
-    "@zag-js/color-picker": "0.78.2",
-    "@zag-js/color-utils": "0.78.2",
-    "@zag-js/combobox": "0.78.2",
-    "@zag-js/core": "0.78.2",
-    "@zag-js/date-picker": "0.78.2",
-    "@zag-js/date-utils": "0.78.2",
-    "@zag-js/dialog": "0.78.2",
-    "@zag-js/dom-query": "0.78.2",
-    "@zag-js/editable": "0.78.2",
-    "@zag-js/file-upload": "0.78.2",
-    "@zag-js/file-utils": "0.78.2",
-    "@zag-js/highlight-word": "0.78.2",
-    "@zag-js/hover-card": "0.78.2",
-    "@zag-js/i18n-utils": "0.78.2",
-    "@zag-js/menu": "0.78.2",
-    "@zag-js/number-input": "0.78.2",
-    "@zag-js/pagination": "0.78.2",
-    "@zag-js/pin-input": "0.78.2",
-    "@zag-js/popover": "0.78.2",
-    "@zag-js/presence": "0.78.2",
-    "@zag-js/progress": "0.78.2",
-    "@zag-js/qr-code": "0.78.2",
-    "@zag-js/radio-group": "0.78.2",
-    "@zag-js/rating-group": "0.78.2",
-    "@zag-js/react": "0.78.2",
-    "@zag-js/select": "0.78.2",
-    "@zag-js/signature-pad": "0.78.2",
-    "@zag-js/slider": "0.78.2",
-    "@zag-js/splitter": "0.78.2",
-    "@zag-js/steps": "0.78.2",
-    "@zag-js/switch": "0.78.2",
-    "@zag-js/tabs": "0.78.2",
-    "@zag-js/tags-input": "0.78.2",
-    "@zag-js/time-picker": "0.78.2",
-    "@zag-js/timer": "0.78.2",
-    "@zag-js/toast": "0.78.2",
-    "@zag-js/toggle-group": "0.78.2",
-    "@zag-js/tooltip": "0.78.2",
-    "@zag-js/tree-view": "0.78.2",
-    "@zag-js/types": "0.78.2"
+    "@zag-js/accordion": "0.79.1",
+    "@zag-js/anatomy": "0.79.1",
+    "@zag-js/auto-resize": "0.79.1",
+    "@zag-js/avatar": "0.79.1",
+    "@zag-js/carousel": "0.79.1",
+    "@zag-js/checkbox": "0.79.1",
+    "@zag-js/clipboard": "0.79.1",
+    "@zag-js/collapsible": "0.79.1",
+    "@zag-js/collection": "0.79.1",
+    "@zag-js/color-picker": "0.79.1",
+    "@zag-js/color-utils": "0.79.1",
+    "@zag-js/combobox": "0.79.1",
+    "@zag-js/core": "0.79.1",
+    "@zag-js/date-picker": "0.79.1",
+    "@zag-js/date-utils": "0.79.1",
+    "@zag-js/dialog": "0.79.1",
+    "@zag-js/dom-query": "0.79.1",
+    "@zag-js/editable": "0.79.1",
+    "@zag-js/file-upload": "0.79.1",
+    "@zag-js/file-utils": "0.79.1",
+    "@zag-js/highlight-word": "0.79.1",
+    "@zag-js/hover-card": "0.79.1",
+    "@zag-js/i18n-utils": "0.79.1",
+    "@zag-js/menu": "0.79.1",
+    "@zag-js/number-input": "0.79.1",
+    "@zag-js/pagination": "0.79.1",
+    "@zag-js/pin-input": "0.79.1",
+    "@zag-js/popover": "0.79.1",
+    "@zag-js/presence": "0.79.1",
+    "@zag-js/progress": "0.79.1",
+    "@zag-js/qr-code": "0.79.1",
+    "@zag-js/radio-group": "0.79.1",
+    "@zag-js/rating-group": "0.79.1",
+    "@zag-js/react": "0.79.1",
+    "@zag-js/select": "0.79.1",
+    "@zag-js/signature-pad": "0.79.1",
+    "@zag-js/slider": "0.79.1",
+    "@zag-js/splitter": "0.79.1",
+    "@zag-js/steps": "0.79.1",
+    "@zag-js/switch": "0.79.1",
+    "@zag-js/tabs": "0.79.1",
+    "@zag-js/tags-input": "0.79.1",
+    "@zag-js/time-picker": "0.79.1",
+    "@zag-js/timer": "0.79.1",
+    "@zag-js/toast": "0.79.1",
+    "@zag-js/toggle-group": "0.79.1",
+    "@zag-js/tooltip": "0.79.1",
+    "@zag-js/tree-view": "0.79.1",
+    "@zag-js/types": "0.79.1"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
@@ -223,24 +223,24 @@
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.7",
-    "@types/react": "18.3.16",
+    "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
     "@vitejs/plugin-react": "4.3.4",
-    "@zag-js/stringify-state": "0.78.2",
+    "@zag-js/stringify-state": "0.79.1",
     "clean-package": "2.2.0",
     "globby": "14.0.2",
     "jsdom": "25.0.1",
-    "lucide-react": "0.462.0",
+    "lucide-react": "0.469.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-frame-component": "5.2.7",
-    "react-hook-form": "7.54.0",
-    "release-it": "17.10.0",
+    "react-hook-form": "7.54.2",
+    "release-it": "17.11.0",
     "resize-observer-polyfill": "1.5.1",
     "storybook": "8.4.7",
-    "typescript": "5.6.3",
+    "typescript": "5.7.2",
     "vite": "5.4.11",
-    "vite-plugin-dts": "4.3.0",
+    "vite-plugin-dts": "4.4.0",
     "vitest": "2.1.8",
     "vitest-axe": "1.0.0-pre.3"
   },

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

@@ -1,19 +0,0 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const react$1 = require('@zag-js/react');
-const react = require('react');
-const factory = require('../factory.cjs');
-const useCarouselContext = require('./use-carousel-context.cjs');
-
-const CarouselViewport = react.forwardRef((props, ref) => {
-  const carousel = useCarouselContext.useCarouselContext();
-  const mergedProps = react$1.mergeProps(carousel.getViewportProps(), props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-});
-CarouselViewport.displayName = "CarouselViewport";
-
-exports.CarouselViewport = CarouselViewport;

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

@@ -1,7 +0,0 @@
-import { HTMLProps, PolymorphicProps } from '../factory';
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface CarouselViewportBaseProps extends PolymorphicProps {
-}
-export interface CarouselViewportProps extends HTMLProps<'div'>, CarouselViewportBaseProps {
-}
-export declare const CarouselViewport: ForwardRefExoticComponent<CarouselViewportProps & RefAttributes<HTMLDivElement>>;

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

@@ -1,7 +0,0 @@
-import { HTMLProps, PolymorphicProps } from '../factory';
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface CarouselViewportBaseProps extends PolymorphicProps {
-}
-export interface CarouselViewportProps extends HTMLProps<'div'>, CarouselViewportBaseProps {
-}
-export declare const CarouselViewport: ForwardRefExoticComponent<CarouselViewportProps & RefAttributes<HTMLDivElement>>;

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

@@ -1,15 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { mergeProps } from '@zag-js/react';
-import { forwardRef } from 'react';
-import { ark } from '../factory.js';
-import { useCarouselContext } from './use-carousel-context.js';
-
-const CarouselViewport = forwardRef((props, ref) => {
-  const carousel = useCarouselContext();
-  const mergedProps = mergeProps(carousel.getViewportProps(), props);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-});
-CarouselViewport.displayName = "CarouselViewport";
-
-export { CarouselViewport };

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

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

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

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