@ark-ui/react 3.1.0 → 3.2.0

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

@@ -0,0 +1,27 @@
+'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 createSplitProps = require('../../utils/create-split-props.cjs');
+const renderStrategy = require('../../utils/render-strategy.cjs');
+const factory = require('../factory.cjs');
+const useAccordionContext = require('./use-accordion-context.cjs');
+
+const AccordionRootProvider = react.forwardRef(
+  (props, ref) => {
+    const [renderStrategyProps, accordionProps] = renderStrategy.splitRenderStrategyProps(props);
+    const [{ value: accordion }, localProps] = createSplitProps.createSplitProps()(
+      accordionProps,
+      ["value"]
+    );
+    const mergedProps = react$1.mergeProps(accordion.getRootProps(), localProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(useAccordionContext.AccordionProvider, { value: accordion, children: /* @__PURE__ */ jsxRuntime.jsx(renderStrategy.RenderStrategyPropsProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
+  }
+);
+AccordionRootProvider.displayName = "AccordionRootProvider";
+
+exports.AccordionRootProvider = AccordionRootProvider;

package/dist/components/accordion/accordion-root-provider.d.cts

@@ -0,0 +1,12 @@
+import { RenderStrategyProps } from '../../utils/render-strategy';
+import { HTMLArkProps } from '../factory';
+import { UseAccordionReturn } from './use-accordion';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+interface RootProviderProps {
+    value: UseAccordionReturn;
+}
+export interface AccordionRootProviderProps extends HTMLArkProps<'div'>, RootProviderProps, RenderStrategyProps {
+}
+export declare const AccordionRootProvider: ForwardRefExoticComponent<AccordionRootProviderProps & RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/accordion/accordion-root-provider.d.ts

@@ -0,0 +1,12 @@
+import { RenderStrategyProps } from '../../utils/render-strategy';
+import { HTMLArkProps } from '../factory';
+import { UseAccordionReturn } from './use-accordion';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+interface RootProviderProps {
+    value: UseAccordionReturn;
+}
+export interface AccordionRootProviderProps extends HTMLArkProps<'div'>, RootProviderProps, RenderStrategyProps {
+}
+export declare const AccordionRootProvider: ForwardRefExoticComponent<AccordionRootProviderProps & RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { splitRenderStrategyProps, RenderStrategyPropsProvider } from '../../utils/render-strategy.js';
+import { ark } from '../factory.js';
+import { AccordionProvider } from './use-accordion-context.js';
+
+const AccordionRootProvider = forwardRef(
+  (props, ref) => {
+    const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props);
+    const [{ value: accordion }, localProps] = createSplitProps()(
+      accordionProps,
+      ["value"]
+    );
+    const mergedProps = mergeProps(accordion.getRootProps(), localProps);
+    return /* @__PURE__ */ jsx(AccordionProvider, { value: accordion, children: /* @__PURE__ */ jsx(RenderStrategyPropsProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
+  }
+);
+AccordionRootProvider.displayName = "AccordionRootProvider";
+
+export { AccordionRootProvider };

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

@@ -27,7 +27,7 @@ const AccordionRoot = react.forwardRef((props, ref) => {
     "value"
   ]);
   const accordion = useAccordion.useAccordion(useAccordionProps);
-  const mergedProps = react$1.mergeProps(accordion.rootProps, localProps);
+  const mergedProps = react$1.mergeProps(accordion.getRootProps(), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useAccordionContext.AccordionProvider, { value: accordion, children: /* @__PURE__ */ jsxRuntime.jsx(renderStrategy.RenderStrategyPropsProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
 });
 AccordionRoot.displayName = "AccordionRoot";

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

@@ -23,7 +23,7 @@ const AccordionRoot = forwardRef((props, ref) => {
     "value"
   ]);
   const accordion = useAccordion(useAccordionProps);
-  const mergedProps = mergeProps(accordion.rootProps, localProps);
+  const mergedProps = mergeProps(accordion.getRootProps(), localProps);
   return /* @__PURE__ */ jsx(AccordionProvider, { value: accordion, children: /* @__PURE__ */ jsx(RenderStrategyPropsProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
 });
 AccordionRoot.displayName = "AccordionRoot";

package/dist/components/accordion/accordion.cjs

@@ -9,6 +9,7 @@ const accordionItemContext = require('./accordion-item-context.cjs');
 const accordionItemIndicator = require('./accordion-item-indicator.cjs');
 const accordionItemTrigger = require('./accordion-item-trigger.cjs');
 const accordionRoot = require('./accordion-root.cjs');
+const accordionRootProvider = require('./accordion-root-provider.cjs');
 
 
 
@@ -19,3 +20,4 @@ exports.ItemContext = accordionItemContext.AccordionItemContext;
 exports.ItemIndicator = accordionItemIndicator.AccordionItemIndicator;
 exports.ItemTrigger = accordionItemTrigger.AccordionItemTrigger;
 exports.Root = accordionRoot.AccordionRoot;
+exports.RootProvider = accordionRootProvider.AccordionRootProvider;

package/dist/components/accordion/accordion.d.cts

@@ -6,3 +6,4 @@ export { AccordionItemContext as ItemContext, type AccordionItemContextProps as
 export { AccordionItemIndicator as ItemIndicator, type AccordionItemIndicatorProps as ItemIndicatorProps, } from './accordion-item-indicator';
 export { AccordionItemTrigger as ItemTrigger, type AccordionItemTriggerProps as ItemTriggerProps, } from './accordion-item-trigger';
 export { AccordionRoot as Root, type AccordionRootProps as RootProps } from './accordion-root';
+export { AccordionRootProvider as RootProvider, type AccordionRootProviderProps as RootProviderProps, } from './accordion-root-provider';

package/dist/components/accordion/accordion.d.ts

@@ -6,3 +6,4 @@ export { AccordionItemContext as ItemContext, type AccordionItemContextProps as
 export { AccordionItemIndicator as ItemIndicator, type AccordionItemIndicatorProps as ItemIndicatorProps, } from './accordion-item-indicator';
 export { AccordionItemTrigger as ItemTrigger, type AccordionItemTriggerProps as ItemTriggerProps, } from './accordion-item-trigger';
 export { AccordionRoot as Root, type AccordionRootProps as RootProps } from './accordion-root';
+export { AccordionRootProvider as RootProvider, type AccordionRootProviderProps as RootProviderProps, } from './accordion-root-provider';

package/dist/components/accordion/accordion.js

@@ -5,3 +5,4 @@ export { AccordionItemContext as ItemContext } from './accordion-item-context.js
 export { AccordionItemIndicator as ItemIndicator } from './accordion-item-indicator.js';
 export { AccordionItemTrigger as ItemTrigger } from './accordion-item-trigger.js';
 export { AccordionRoot as Root } from './accordion-root.js';
+export { AccordionRootProvider as RootProvider } from './accordion-root-provider.js';

package/dist/components/accordion/index.cjs

@@ -9,6 +9,8 @@ const accordionItemContext = require('./accordion-item-context.cjs');
 const accordionItemIndicator = require('./accordion-item-indicator.cjs');
 const accordionItemTrigger = require('./accordion-item-trigger.cjs');
 const accordionRoot = require('./accordion-root.cjs');
+const accordionRootProvider = require('./accordion-root-provider.cjs');
+const useAccordion = require('./use-accordion.cjs');
 const useAccordionContext = require('./use-accordion-context.cjs');
 const useAccordionItemContext = require('./use-accordion-item-context.cjs');
 const accordion = require('./accordion.cjs');
@@ -22,6 +24,8 @@ exports.AccordionItemContext = accordionItemContext.AccordionItemContext;
 exports.AccordionItemIndicator = accordionItemIndicator.AccordionItemIndicator;
 exports.AccordionItemTrigger = accordionItemTrigger.AccordionItemTrigger;
 exports.AccordionRoot = accordionRoot.AccordionRoot;
+exports.AccordionRootProvider = accordionRootProvider.AccordionRootProvider;
+exports.useAccordion = useAccordion.useAccordion;
 exports.useAccordionContext = useAccordionContext.useAccordionContext;
 exports.useAccordionItemContext = useAccordionItemContext.useAccordionItemContext;
 exports.Accordion = accordion;

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

@@ -6,6 +6,8 @@ export { AccordionItemContext, type AccordionItemContextProps } from './accordio
 export { AccordionItemIndicator, type AccordionItemIndicatorProps, } from './accordion-item-indicator';
 export { AccordionItemTrigger, type AccordionItemTriggerProps } from './accordion-item-trigger';
 export { AccordionRoot, type AccordionRootProps } from './accordion-root';
+export { AccordionRootProvider, type AccordionRootProviderProps } from './accordion-root-provider';
+export { useAccordion, type UseAccordionProps, type UseAccordionReturn } from './use-accordion';
 export { useAccordionContext, type UseAccordionContext } from './use-accordion-context';
 export { useAccordionItemContext, type UseAccordionItemContext } from './use-accordion-item-context';
 export * as Accordion from './accordion';

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

@@ -6,6 +6,8 @@ export { AccordionItemContext, type AccordionItemContextProps } from './accordio
 export { AccordionItemIndicator, type AccordionItemIndicatorProps, } from './accordion-item-indicator';
 export { AccordionItemTrigger, type AccordionItemTriggerProps } from './accordion-item-trigger';
 export { AccordionRoot, type AccordionRootProps } from './accordion-root';
+export { AccordionRootProvider, type AccordionRootProviderProps } from './accordion-root-provider';
+export { useAccordion, type UseAccordionProps, type UseAccordionReturn } from './use-accordion';
 export { useAccordionContext, type UseAccordionContext } from './use-accordion-context';
 export { useAccordionItemContext, type UseAccordionItemContext } from './use-accordion-item-context';
 export * as Accordion from './accordion';

package/dist/components/accordion/index.js

@@ -5,6 +5,8 @@ export { AccordionItemContext } from './accordion-item-context.js';
 export { AccordionItemIndicator } from './accordion-item-indicator.js';
 export { AccordionItemTrigger } from './accordion-item-trigger.js';
 export { AccordionRoot } from './accordion-root.js';
+export { AccordionRootProvider } from './accordion-root-provider.js';
+export { useAccordion } from './use-accordion.js';
 export { useAccordionContext } from './use-accordion-context.js';
 export { useAccordionItemContext } from './use-accordion-item-context.js';
 import * as accordion from './accordion.js';

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

@@ -11,7 +11,7 @@ const useAvatarContext = require('./use-avatar-context.cjs');
 
 const AvatarFallback = react.forwardRef((props, ref) => {
   const avatar = useAvatarContext.useAvatarContext();
-  const mergedProps = react$1.mergeProps(avatar.fallbackProps, props);
+  const mergedProps = react$1.mergeProps(avatar.getFallbackProps(), props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
 });
 AvatarFallback.displayName = "AvatarFallback";

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

@@ -7,7 +7,7 @@ import { useAvatarContext } from './use-avatar-context.js';
 
 const AvatarFallback = forwardRef((props, ref) => {
   const avatar = useAvatarContext();
-  const mergedProps = mergeProps(avatar.fallbackProps, props);
+  const mergedProps = mergeProps(avatar.getFallbackProps(), props);
   return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
 });
 AvatarFallback.displayName = "AvatarFallback";

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

@@ -11,7 +11,7 @@ const useAvatarContext = require('./use-avatar-context.cjs');
 
 const AvatarImage = react.forwardRef((props, ref) => {
   const avatar = useAvatarContext.useAvatarContext();
-  const mergedProps = react$1.mergeProps(avatar.imageProps, props);
+  const mergedProps = react$1.mergeProps(avatar.getImageProps(), props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.img, { ...mergedProps, ref });
 });
 AvatarImage.displayName = "AvatarImage";

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

@@ -7,7 +7,7 @@ import { useAvatarContext } from './use-avatar-context.js';
 
 const AvatarImage = forwardRef((props, ref) => {
   const avatar = useAvatarContext();
-  const mergedProps = mergeProps(avatar.imageProps, props);
+  const mergedProps = mergeProps(avatar.getImageProps(), props);
   return /* @__PURE__ */ jsx(ark.img, { ...mergedProps, ref });
 });
 AvatarImage.displayName = "AvatarImage";

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

@@ -0,0 +1,22 @@
+'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 createSplitProps = require('../../utils/create-split-props.cjs');
+const factory = require('../factory.cjs');
+const useAvatarContext = require('./use-avatar-context.cjs');
+
+const AvatarRootProvider = react.forwardRef(
+  (props, ref) => {
+    const [{ value: avatar }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+    const mergedProps = react$1.mergeProps(avatar.getRootProps(), localProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(useAvatarContext.AvatarProvider, { value: avatar, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+  }
+);
+AvatarRootProvider.displayName = "AvatarRootProvider";
+
+exports.AvatarRootProvider = AvatarRootProvider;

package/dist/components/avatar/avatar-root-provider.d.cts

@@ -0,0 +1,11 @@
+import { HTMLArkProps } from '../factory';
+import { UseAvatarReturn } from './use-avatar';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+interface RootProviderProps {
+    value: UseAvatarReturn;
+}
+export interface AvatarRootProviderProps extends HTMLArkProps<'div'>, RootProviderProps {
+}
+export declare const AvatarRootProvider: ForwardRefExoticComponent<AvatarRootProviderProps & RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/avatar/avatar-root-provider.d.ts

@@ -0,0 +1,11 @@
+import { HTMLArkProps } from '../factory';
+import { UseAvatarReturn } from './use-avatar';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+interface RootProviderProps {
+    value: UseAvatarReturn;
+}
+export interface AvatarRootProviderProps extends HTMLArkProps<'div'>, RootProviderProps {
+}
+export declare const AvatarRootProvider: ForwardRefExoticComponent<AvatarRootProviderProps & RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { ark } from '../factory.js';
+import { AvatarProvider } from './use-avatar-context.js';
+
+const AvatarRootProvider = forwardRef(
+  (props, ref) => {
+    const [{ value: avatar }, localProps] = createSplitProps()(props, ["value"]);
+    const mergedProps = mergeProps(avatar.getRootProps(), localProps);
+    return /* @__PURE__ */ jsx(AvatarProvider, { value: avatar, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+  }
+);
+AvatarRootProvider.displayName = "AvatarRootProvider";
+
+export { AvatarRootProvider };

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

@@ -18,7 +18,7 @@ const AvatarRoot = react.forwardRef((props, ref) => {
     "onStatusChange"
   ]);
   const avatar = useAvatar.useAvatar(useAvatarProps);
-  const mergedProps = react$1.mergeProps(avatar.rootProps, localProps);
+  const mergedProps = react$1.mergeProps(avatar.getRootProps(), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useAvatarContext.AvatarProvider, { value: avatar, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
 AvatarRoot.displayName = "AvatarRoot";

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

@@ -14,7 +14,7 @@ const AvatarRoot = forwardRef((props, ref) => {
     "onStatusChange"
   ]);
   const avatar = useAvatar(useAvatarProps);
-  const mergedProps = mergeProps(avatar.rootProps, localProps);
+  const mergedProps = mergeProps(avatar.getRootProps(), localProps);
   return /* @__PURE__ */ jsx(AvatarProvider, { value: avatar, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
 AvatarRoot.displayName = "AvatarRoot";

package/dist/components/avatar/avatar.cjs

@@ -6,6 +6,7 @@ const avatarContext = require('./avatar-context.cjs');
 const avatarFallback = require('./avatar-fallback.cjs');
 const avatarImage = require('./avatar-image.cjs');
 const avatarRoot = require('./avatar-root.cjs');
+const avatarRootProvider = require('./avatar-root-provider.cjs');
 
 
 
@@ -13,3 +14,4 @@ exports.Context = avatarContext.AvatarContext;
 exports.Fallback = avatarFallback.AvatarFallback;
 exports.Image = avatarImage.AvatarImage;
 exports.Root = avatarRoot.AvatarRoot;
+exports.RootProvider = avatarRootProvider.AvatarRootProvider;

package/dist/components/avatar/avatar.d.cts

@@ -3,3 +3,4 @@ export { AvatarContext as Context, type AvatarContextProps as ContextProps } fro
 export { AvatarFallback as Fallback, type AvatarFallbackProps as FallbackProps, } from './avatar-fallback';
 export { AvatarImage as Image, type AvatarImageProps as ImageProps } from './avatar-image';
 export { AvatarRoot as Root, type AvatarRootProps as RootProps } from './avatar-root';
+export { AvatarRootProvider as RootProvider, type AvatarRootProviderProps as RootProviderProps, } from './avatar-root-provider';

package/dist/components/avatar/avatar.d.ts

@@ -3,3 +3,4 @@ export { AvatarContext as Context, type AvatarContextProps as ContextProps } fro
 export { AvatarFallback as Fallback, type AvatarFallbackProps as FallbackProps, } from './avatar-fallback';
 export { AvatarImage as Image, type AvatarImageProps as ImageProps } from './avatar-image';
 export { AvatarRoot as Root, type AvatarRootProps as RootProps } from './avatar-root';
+export { AvatarRootProvider as RootProvider, type AvatarRootProviderProps as RootProviderProps, } from './avatar-root-provider';

package/dist/components/avatar/avatar.js

@@ -2,3 +2,4 @@ export { AvatarContext as Context } from './avatar-context.js';
 export { AvatarFallback as Fallback } from './avatar-fallback.js';
 export { AvatarImage as Image } from './avatar-image.js';
 export { AvatarRoot as Root } from './avatar-root.js';
+export { AvatarRootProvider as RootProvider } from './avatar-root-provider.js';

package/dist/components/avatar/index.cjs

@@ -6,6 +6,8 @@ const avatarContext = require('./avatar-context.cjs');
 const avatarFallback = require('./avatar-fallback.cjs');
 const avatarImage = require('./avatar-image.cjs');
 const avatarRoot = require('./avatar-root.cjs');
+const avatarRootProvider = require('./avatar-root-provider.cjs');
+const useAvatar = require('./use-avatar.cjs');
 const useAvatarContext = require('./use-avatar-context.cjs');
 const avatar = require('./avatar.cjs');
 
@@ -15,5 +17,7 @@ exports.AvatarContext = avatarContext.AvatarContext;
 exports.AvatarFallback = avatarFallback.AvatarFallback;
 exports.AvatarImage = avatarImage.AvatarImage;
 exports.AvatarRoot = avatarRoot.AvatarRoot;
+exports.AvatarRootProvider = avatarRootProvider.AvatarRootProvider;
+exports.useAvatar = useAvatar.useAvatar;
 exports.useAvatarContext = useAvatarContext.useAvatarContext;
 exports.Avatar = avatar;

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

@@ -3,5 +3,7 @@ export { AvatarContext, type AvatarContextProps } from './avatar-context';
 export { AvatarFallback, type AvatarFallbackProps } from './avatar-fallback';
 export { AvatarImage, type AvatarImageProps } from './avatar-image';
 export { AvatarRoot, type AvatarRootProps } from './avatar-root';
-export { type UseAvatarContext, useAvatarContext } from './use-avatar-context';
+export { AvatarRootProvider, type AvatarRootProviderProps } from './avatar-root-provider';
+export { useAvatar, type UseAvatarProps, type UseAvatarReturn } from './use-avatar';
+export { useAvatarContext, type UseAvatarContext } from './use-avatar-context';
 export * as Avatar from './avatar';

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

@@ -3,5 +3,7 @@ export { AvatarContext, type AvatarContextProps } from './avatar-context';
 export { AvatarFallback, type AvatarFallbackProps } from './avatar-fallback';
 export { AvatarImage, type AvatarImageProps } from './avatar-image';
 export { AvatarRoot, type AvatarRootProps } from './avatar-root';
-export { type UseAvatarContext, useAvatarContext } from './use-avatar-context';
+export { AvatarRootProvider, type AvatarRootProviderProps } from './avatar-root-provider';
+export { useAvatar, type UseAvatarProps, type UseAvatarReturn } from './use-avatar';
+export { useAvatarContext, type UseAvatarContext } from './use-avatar-context';
 export * as Avatar from './avatar';

package/dist/components/avatar/index.js

@@ -2,6 +2,8 @@ export { AvatarContext } from './avatar-context.js';
 export { AvatarFallback } from './avatar-fallback.js';
 export { AvatarImage } from './avatar-image.js';
 export { AvatarRoot } from './avatar-root.js';
+export { AvatarRootProvider } from './avatar-root-provider.js';
+export { useAvatar } from './use-avatar.js';
 export { useAvatarContext } from './use-avatar-context.js';
 import * as avatar from './avatar.js';
 export { avatar as Avatar };

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

@@ -12,7 +12,7 @@ const useCarouselContext = require('./use-carousel-context.cjs');
 const CarouselIndicatorGroup = react.forwardRef(
   (props, ref) => {
     const carousel = useCarouselContext.useCarouselContext();
-    const mergedProps = react$1.mergeProps(carousel.indicatorGroupProps, props);
+    const mergedProps = react$1.mergeProps(carousel.getIndicatorGroupProps(), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

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

@@ -8,7 +8,7 @@ import { useCarouselContext } from './use-carousel-context.js';
 const CarouselIndicatorGroup = forwardRef(
   (props, ref) => {
     const carousel = useCarouselContext();
-    const mergedProps = mergeProps(carousel.indicatorGroupProps, props);
+    const mergedProps = mergeProps(carousel.getIndicatorGroupProps(), props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

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

@@ -12,7 +12,7 @@ const useCarouselContext = require('./use-carousel-context.cjs');
 const CarouselItemGroup = react.forwardRef(
   (props, ref) => {
     const carousel = useCarouselContext.useCarouselContext();
-    const mergedProps = react$1.mergeProps(carousel.itemGroupProps, props);
+    const mergedProps = react$1.mergeProps(carousel.getItemGroupProps(), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

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

@@ -8,7 +8,7 @@ import { useCarouselContext } from './use-carousel-context.js';
 const CarouselItemGroup = forwardRef(
   (props, ref) => {
     const carousel = useCarouselContext();
-    const mergedProps = mergeProps(carousel.itemGroupProps, props);
+    const mergedProps = mergeProps(carousel.getItemGroupProps(), props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

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

@@ -12,7 +12,7 @@ const useCarouselContext = require('./use-carousel-context.cjs');
 const CarouselNextTrigger = react.forwardRef(
   (props, ref) => {
     const carousel = useCarouselContext.useCarouselContext();
-    const mergedProps = react$1.mergeProps(carousel.nextTriggerProps, props);
+    const mergedProps = react$1.mergeProps(carousel.getNextTriggerProps(), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
   }
 );

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

@@ -8,7 +8,7 @@ import { useCarouselContext } from './use-carousel-context.js';
 const CarouselNextTrigger = forwardRef(
   (props, ref) => {
     const carousel = useCarouselContext();
-    const mergedProps = mergeProps(carousel.nextTriggerProps, props);
+    const mergedProps = mergeProps(carousel.getNextTriggerProps(), props);
     return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
   }
 );

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

@@ -12,7 +12,7 @@ const useCarouselContext = require('./use-carousel-context.cjs');
 const CarouselPrevTrigger = react.forwardRef(
   (props, ref) => {
     const carousel = useCarouselContext.useCarouselContext();
-    const mergedProps = react$1.mergeProps(carousel.prevTriggerProps, props);
+    const mergedProps = react$1.mergeProps(carousel.getPrevTriggerProps(), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
   }
 );

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

@@ -8,7 +8,7 @@ import { useCarouselContext } from './use-carousel-context.js';
 const CarouselPrevTrigger = forwardRef(
   (props, ref) => {
     const carousel = useCarouselContext();
-    const mergedProps = mergeProps(carousel.prevTriggerProps, props);
+    const mergedProps = mergeProps(carousel.getPrevTriggerProps(), props);
     return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
   }
 );

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

@@ -0,0 +1,24 @@
+'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 createSplitProps = require('../../utils/create-split-props.cjs');
+const factory = require('../factory.cjs');
+const useCarouselContext = require('./use-carousel-context.cjs');
+
+const CarouselRootProvider = react.forwardRef(
+  (props, ref) => {
+    const [{ value: carousel }, localProps] = createSplitProps.createSplitProps()(props, [
+      "value"
+    ]);
+    const mergedProps = react$1.mergeProps(carousel.getRootProps(), localProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(useCarouselContext.CarouselProvider, { value: carousel, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+  }
+);
+CarouselRootProvider.displayName = "CarouselRootProvider";
+
+exports.CarouselRootProvider = CarouselRootProvider;

package/dist/components/carousel/carousel-root-provider.d.cts

@@ -0,0 +1,11 @@
+import { HTMLArkProps } from '../factory';
+import { UseCarouselReturn } from './use-carousel';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+interface RootProviderProps {
+    value: UseCarouselReturn;
+}
+export interface CarouselRootProviderProps extends HTMLArkProps<'div'>, RootProviderProps {
+}
+export declare const CarouselRootProvider: ForwardRefExoticComponent<CarouselRootProviderProps & RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/carousel/carousel-root-provider.d.ts

@@ -0,0 +1,11 @@
+import { HTMLArkProps } from '../factory';
+import { UseCarouselReturn } from './use-carousel';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+interface RootProviderProps {
+    value: UseCarouselReturn;
+}
+export interface CarouselRootProviderProps extends HTMLArkProps<'div'>, RootProviderProps {
+}
+export declare const CarouselRootProvider: ForwardRefExoticComponent<CarouselRootProviderProps & RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { ark } from '../factory.js';
+import { CarouselProvider } from './use-carousel-context.js';
+
+const CarouselRootProvider = forwardRef(
+  (props, ref) => {
+    const [{ value: carousel }, localProps] = createSplitProps()(props, [
+      "value"
+    ]);
+    const mergedProps = mergeProps(carousel.getRootProps(), localProps);
+    return /* @__PURE__ */ jsx(CarouselProvider, { value: carousel, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+  }
+);
+CarouselRootProvider.displayName = "CarouselRootProvider";
+
+export { CarouselRootProvider };

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

@@ -25,7 +25,7 @@ const CarouselRoot = react.forwardRef((props, ref) => {
     "spacing"
   ]);
   const carousel = useCarousel.useCarousel(useCarouselProps);
-  const mergedProps = react$1.mergeProps(carousel.rootProps, localProps);
+  const mergedProps = react$1.mergeProps(carousel.getRootProps(), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useCarouselContext.CarouselProvider, { value: carousel, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
 CarouselRoot.displayName = "CarouselRoot";

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

@@ -21,7 +21,7 @@ const CarouselRoot = forwardRef((props, ref) => {
     "spacing"
   ]);
   const carousel = useCarousel(useCarouselProps);
-  const mergedProps = mergeProps(carousel.rootProps, localProps);
+  const mergedProps = mergeProps(carousel.getRootProps(), localProps);
   return /* @__PURE__ */ jsx(CarouselProvider, { value: carousel, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
 CarouselRoot.displayName = "CarouselRoot";

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

@@ -11,7 +11,7 @@ const useCarouselContext = require('./use-carousel-context.cjs');
 
 const CarouselViewport = react.forwardRef((props, ref) => {
   const carousel = useCarouselContext.useCarouselContext();
-  const mergedProps = react$1.mergeProps(carousel.viewportProps, props);
+  const mergedProps = react$1.mergeProps(carousel.getViewportProps(), props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 CarouselViewport.displayName = "CarouselViewport";

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

@@ -7,7 +7,7 @@ import { useCarouselContext } from './use-carousel-context.js';
 
 const CarouselViewport = forwardRef((props, ref) => {
   const carousel = useCarouselContext();
-  const mergedProps = mergeProps(carousel.viewportProps, props);
+  const mergedProps = mergeProps(carousel.getViewportProps(), props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 CarouselViewport.displayName = "CarouselViewport";

package/dist/components/carousel/carousel.cjs

@@ -11,6 +11,7 @@ const carouselItemGroup = require('./carousel-item-group.cjs');
 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');
 
 
@@ -24,4 +25,5 @@ exports.ItemGroup = carouselItemGroup.CarouselItemGroup;
 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

@@ -8,4 +8,5 @@ export { CarouselItemGroup as ItemGroup, type CarouselItemGroupProps as ItemGrou
 export { CarouselNextTrigger as NextTrigger, type CarouselNextTriggerProps as NextTriggerProps, } from './carousel-next-trigger';
 export { CarouselPrevTrigger as PrevTrigger, type CarouselPrevTriggerProps as PrevTriggerProps, } from './carousel-prev-trigger';
 export { CarouselRoot as Root, type CarouselRootProps as RootProps } from './carousel-root';
+export { CarouselRootProvider as RootProvider, type CarouselRootProviderProps as RootProviderProps, } from './carousel-root-provider';
 export { CarouselViewport as Viewport, type CarouselViewportProps as ViewportProps, } from './carousel-viewport';