@ark-ui/react 4.5.0 → 4.7.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/clipboard/clipboard-value-text.cjs

@@ -0,0 +1,19 @@
+'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 useClipboardContext = require('./use-clipboard-context.cjs');
+
+const ClipboardValueText = react.forwardRef(
+  (props, ref) => {
+    const clipboard = useClipboardContext.useClipboardContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...props, ref, children: props.children || clipboard.value });
+  }
+);
+ClipboardValueText.displayName = "ClipboardValueText";
+
+exports.ClipboardValueText = ClipboardValueText;

package/dist/components/clipboard/clipboard-value-text.d.cts

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ClipboardValueTextBaseProps extends PolymorphicProps {
+}
+export interface ClipboardValueTextProps extends HTMLProps<'span'>, ClipboardValueTextBaseProps {
+}
+export declare const ClipboardValueText: ForwardRefExoticComponent<ClipboardValueTextProps & RefAttributes<HTMLDivElement>>;

package/dist/components/clipboard/clipboard-value-text.d.ts

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ClipboardValueTextBaseProps extends PolymorphicProps {
+}
+export interface ClipboardValueTextProps extends HTMLProps<'span'>, ClipboardValueTextBaseProps {
+}
+export declare const ClipboardValueText: ForwardRefExoticComponent<ClipboardValueTextProps & RefAttributes<HTMLDivElement>>;

package/dist/components/clipboard/clipboard-value-text.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useClipboardContext } from './use-clipboard-context.js';
+
+const ClipboardValueText = forwardRef(
+  (props, ref) => {
+    const clipboard = useClipboardContext();
+    return /* @__PURE__ */ jsx(ark.span, { ...props, ref, children: props.children || clipboard.value });
+  }
+);
+ClipboardValueText.displayName = "ClipboardValueText";
+
+export { ClipboardValueText };

package/dist/components/clipboard/clipboard.cjs

@@ -10,6 +10,7 @@ const clipboardLabel = require('./clipboard-label.cjs');
 const clipboardRoot = require('./clipboard-root.cjs');
 const clipboardRootProvider = require('./clipboard-root-provider.cjs');
 const clipboardTrigger = require('./clipboard-trigger.cjs');
+const clipboardValueText = require('./clipboard-value-text.cjs');
 
 
 
@@ -21,3 +22,4 @@ exports.Label = clipboardLabel.ClipboardLabel;
 exports.Root = clipboardRoot.ClipboardRoot;
 exports.RootProvider = clipboardRootProvider.ClipboardRootProvider;
 exports.Trigger = clipboardTrigger.ClipboardTrigger;
+exports.ValueText = clipboardValueText.ClipboardValueText;

package/dist/components/clipboard/clipboard.d.cts

@@ -7,3 +7,4 @@ export { ClipboardLabel as Label, type ClipboardLabelProps as LabelProps, type C
 export { ClipboardRoot as Root, type ClipboardRootProps as RootProps, type ClipboardRootBaseProps as RootBaseProps, } from './clipboard-root';
 export { ClipboardRootProvider as RootProvider, type ClipboardRootProviderProps as RootProviderProps, type ClipboardRootProviderBaseProps as RootProviderBaseProps, } from './clipboard-root-provider';
 export { ClipboardTrigger as Trigger, type ClipboardTriggerProps as TriggerProps, type ClipboardTriggerBaseProps as TriggerBaseProps, } from './clipboard-trigger';
+export { ClipboardValueText as ValueText, type ClipboardValueTextProps as ValueTextProps, type ClipboardValueTextBaseProps as ValueTextBaseProps, } from './clipboard-value-text';

package/dist/components/clipboard/clipboard.d.ts

@@ -7,3 +7,4 @@ export { ClipboardLabel as Label, type ClipboardLabelProps as LabelProps, type C
 export { ClipboardRoot as Root, type ClipboardRootProps as RootProps, type ClipboardRootBaseProps as RootBaseProps, } from './clipboard-root';
 export { ClipboardRootProvider as RootProvider, type ClipboardRootProviderProps as RootProviderProps, type ClipboardRootProviderBaseProps as RootProviderBaseProps, } from './clipboard-root-provider';
 export { ClipboardTrigger as Trigger, type ClipboardTriggerProps as TriggerProps, type ClipboardTriggerBaseProps as TriggerBaseProps, } from './clipboard-trigger';
+export { ClipboardValueText as ValueText, type ClipboardValueTextProps as ValueTextProps, type ClipboardValueTextBaseProps as ValueTextBaseProps, } from './clipboard-value-text';

package/dist/components/clipboard/clipboard.js

@@ -6,3 +6,4 @@ export { ClipboardLabel as Label } from './clipboard-label.js';
 export { ClipboardRoot as Root } from './clipboard-root.js';
 export { ClipboardRootProvider as RootProvider } from './clipboard-root-provider.js';
 export { ClipboardTrigger as Trigger } from './clipboard-trigger.js';
+export { ClipboardValueText as ValueText } from './clipboard-value-text.js';

package/dist/components/clipboard/index.cjs

@@ -10,6 +10,7 @@ const clipboardLabel = require('./clipboard-label.cjs');
 const clipboardRoot = require('./clipboard-root.cjs');
 const clipboardRootProvider = require('./clipboard-root-provider.cjs');
 const clipboardTrigger = require('./clipboard-trigger.cjs');
+const clipboardValueText = require('./clipboard-value-text.cjs');
 const useClipboard = require('./use-clipboard.cjs');
 const useClipboardContext = require('./use-clipboard-context.cjs');
 const clipboard$1 = require('./clipboard.cjs');
@@ -25,6 +26,7 @@ exports.ClipboardLabel = clipboardLabel.ClipboardLabel;
 exports.ClipboardRoot = clipboardRoot.ClipboardRoot;
 exports.ClipboardRootProvider = clipboardRootProvider.ClipboardRootProvider;
 exports.ClipboardTrigger = clipboardTrigger.ClipboardTrigger;
+exports.ClipboardValueText = clipboardValueText.ClipboardValueText;
 exports.useClipboard = useClipboard.useClipboard;
 exports.useClipboardContext = useClipboardContext.useClipboardContext;
 exports.Clipboard = clipboard$1;