@ark-ui/react 4.9.2 → 5.0.0

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

@@ -4,23 +4,19 @@ import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
-import { useEvent } from '../../utils/use-event.js';
 
 const useAvatar = (props = {}) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
-  const initialContext = {
-    id: useId(),
+  const context = {
+    id,
     dir,
     getRootNode,
     ...props
   };
-  const context = {
-    ...initialContext,
-    onStatusChange: useEvent(props.onStatusChange)
-  };
-  const [state, send] = useMachine(avatar.machine(initialContext), { context });
-  return avatar.connect(state, send, normalizeProps);
+  const service = useMachine(avatar.machine, context);
+  return avatar.connect(service, normalizeProps);
 };
 
 export { useAvatar };

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

@@ -9,13 +9,11 @@ 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 });
-  }
-);
+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.js

@@ -5,13 +5,11 @@ 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 });
-  }
-);
+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-indicator-group.cjs

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

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

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useCarouselContext } from './use-carousel-context.js';
 
-const CarouselIndicatorGroup = forwardRef(
-  (props, ref) => {
-    const carousel = useCarouselContext();
-    const mergedProps = mergeProps(carousel.getIndicatorGroupProps(), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const CarouselIndicatorGroup = forwardRef((props, ref) => {
+  const carousel = useCarouselContext();
+  const mergedProps = mergeProps(carousel.getIndicatorGroupProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 CarouselIndicatorGroup.displayName = "CarouselIndicatorGroup";
 
 export { CarouselIndicatorGroup };

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

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

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

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

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

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

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

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useCarouselContext } from './use-carousel-context.js';
 
-const CarouselItemGroup = forwardRef(
-  (props, ref) => {
-    const carousel = useCarouselContext();
-    const mergedProps = mergeProps(carousel.getItemGroupProps(), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const CarouselItemGroup = forwardRef((props, ref) => {
+  const carousel = useCarouselContext();
+  const mergedProps = mergeProps(carousel.getItemGroupProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 CarouselItemGroup.displayName = "CarouselItemGroup";
 
 export { CarouselItemGroup };

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

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

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

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useCarouselContext } from './use-carousel-context.js';
 
-const CarouselNextTrigger = forwardRef(
-  (props, ref) => {
-    const carousel = useCarouselContext();
-    const mergedProps = mergeProps(carousel.getNextTriggerProps(), props);
-    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
-  }
-);
+const CarouselNextTrigger = forwardRef((props, ref) => {
+  const carousel = useCarouselContext();
+  const mergedProps = mergeProps(carousel.getNextTriggerProps(), props);
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
 CarouselNextTrigger.displayName = "CarouselNextTrigger";
 
 export { CarouselNextTrigger };

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

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

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

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useCarouselContext } from './use-carousel-context.js';
 
-const CarouselPrevTrigger = forwardRef(
-  (props, ref) => {
-    const carousel = useCarouselContext();
-    const mergedProps = mergeProps(carousel.getPrevTriggerProps(), props);
-    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
-  }
-);
+const CarouselPrevTrigger = forwardRef((props, ref) => {
+  const carousel = useCarouselContext();
+  const mergedProps = mergeProps(carousel.getPrevTriggerProps(), props);
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
 CarouselPrevTrigger.displayName = "CarouselPrevTrigger";
 
 export { CarouselPrevTrigger };

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

@@ -10,15 +10,11 @@ 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 }) });
-  }
-);
+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.js

@@ -6,15 +6,11 @@ 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 }) });
-  }
-);
+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.d.cts

@@ -1,6 +1,6 @@
 export type { AutoplayStatusDetails, DragStatusDetails, PageChangeDetails } 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 { CarouselContext as Context, type CarouselContextProps as ContextProps } from './carousel-context';
 export { CarouselControl as Control, type CarouselControlBaseProps as ControlBaseProps, type CarouselControlProps as ControlProps, } from './carousel-control';
 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';

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

@@ -1,6 +1,6 @@
 export type { AutoplayStatusDetails, DragStatusDetails, PageChangeDetails } 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 { CarouselContext as Context, type CarouselContextProps as ContextProps } from './carousel-context';
 export { CarouselControl as Control, type CarouselControlBaseProps as ControlBaseProps, type CarouselControlProps as ControlProps, } from './carousel-control';
 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';

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

@@ -1,11 +1,11 @@
 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';
+export { CarouselControl, type CarouselControlBaseProps, type CarouselControlProps } from './carousel-control';
+export { CarouselIndicator, type CarouselIndicatorBaseProps, type CarouselIndicatorProps } from './carousel-indicator';
 export { CarouselIndicatorGroup, type CarouselIndicatorGroupBaseProps, type CarouselIndicatorGroupProps, } from './carousel-indicator-group';
 export { CarouselItem, type CarouselItemBaseProps, type CarouselItemProps } from './carousel-item';
-export { CarouselItemGroup, type CarouselItemGroupBaseProps, type CarouselItemGroupProps, } from './carousel-item-group';
+export { CarouselItemGroup, type CarouselItemGroupBaseProps, type CarouselItemGroupProps } from './carousel-item-group';
 export { CarouselNextTrigger, type CarouselNextTriggerBaseProps, type CarouselNextTriggerProps, } from './carousel-next-trigger';
 export { CarouselPrevTrigger, type CarouselPrevTriggerBaseProps, type CarouselPrevTriggerProps, } from './carousel-prev-trigger';
 export { CarouselRoot, type CarouselRootBaseProps, type CarouselRootProps } from './carousel-root';

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

@@ -1,11 +1,11 @@
 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';
+export { CarouselControl, type CarouselControlBaseProps, type CarouselControlProps } from './carousel-control';
+export { CarouselIndicator, type CarouselIndicatorBaseProps, type CarouselIndicatorProps } from './carousel-indicator';
 export { CarouselIndicatorGroup, type CarouselIndicatorGroupBaseProps, type CarouselIndicatorGroupProps, } from './carousel-indicator-group';
 export { CarouselItem, type CarouselItemBaseProps, type CarouselItemProps } from './carousel-item';
-export { CarouselItemGroup, type CarouselItemGroupBaseProps, type CarouselItemGroupProps, } from './carousel-item-group';
+export { CarouselItemGroup, type CarouselItemGroupBaseProps, type CarouselItemGroupProps } from './carousel-item-group';
 export { CarouselNextTrigger, type CarouselNextTriggerBaseProps, type CarouselNextTriggerProps, } from './carousel-next-trigger';
 export { CarouselPrevTrigger, type CarouselPrevTriggerBaseProps, type CarouselPrevTriggerProps, } from './carousel-prev-trigger';
 export { CarouselRoot, type CarouselRootBaseProps, type CarouselRootProps } from './carousel-root';

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

@@ -8,7 +8,6 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
-const useEvent = require('../../utils/use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -29,23 +28,18 @@ function _interopNamespaceDefault(e) {
 
 const carousel__namespace = /*#__PURE__*/_interopNamespaceDefault(carousel);
 
-const useCarousel = (props = {}) => {
+const useCarousel = (props) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    page: props.defaultPage,
     ...props
   };
-  const context = {
-    ...initialContext,
-    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);
+  const service = react$1.useMachine(carousel__namespace.machine, machineProps);
+  return carousel__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useCarousel = useCarousel;

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

@@ -1,13 +1,8 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as carousel from '@zag-js/carousel';
-export interface UseCarouselProps extends Optional<Omit<carousel.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * 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.
-     */
-    defaultPage?: carousel.Context['page'];
+export interface UseCarouselProps extends Optional<Omit<carousel.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseCarouselReturn extends carousel.Api<PropTypes> {
 }
-export declare const useCarousel: (props?: UseCarouselProps) => UseCarouselReturn;
+export declare const useCarousel: (props: UseCarouselProps) => UseCarouselReturn;

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

@@ -1,13 +1,8 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as carousel from '@zag-js/carousel';
-export interface UseCarouselProps extends Optional<Omit<carousel.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * 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.
-     */
-    defaultPage?: carousel.Context['page'];
+export interface UseCarouselProps extends Optional<Omit<carousel.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseCarouselReturn extends carousel.Api<PropTypes> {
 }
-export declare const useCarousel: (props?: UseCarouselProps) => UseCarouselReturn;
+export declare const useCarousel: (props: UseCarouselProps) => UseCarouselReturn;

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

@@ -4,25 +4,19 @@ import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
-import { useEvent } from '../../utils/use-event.js';
 
-const useCarousel = (props = {}) => {
+const useCarousel = (props) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    page: props.defaultPage,
     ...props
   };
-  const context = {
-    ...initialContext,
-    page: props.page,
-    onPageChange: useEvent(props.onPageChange, { sync: true })
-  };
-  const [state, send] = useMachine(carousel.machine(initialContext), { context });
-  return carousel.connect(state, send, normalizeProps);
+  const service = useMachine(carousel.machine, machineProps);
+  return carousel.connect(service, normalizeProps);
 };
 
 export { useCarousel };

package/dist/components/checkbox/checkbox-hidden-input.cjs

@@ -10,14 +10,12 @@ const factory = require('../factory.cjs');
 const useFieldContext = require('../field/use-field-context.cjs');
 const useCheckboxContext = require('./use-checkbox-context.cjs');
 
-const CheckboxHiddenInput = react.forwardRef(
-  (props, ref) => {
-    const checkbox = useCheckboxContext.useCheckboxContext();
-    const mergedProps = react$1.mergeProps(checkbox.getHiddenInputProps(), props);
-    const field = useFieldContext.useFieldContext();
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
-  }
-);
+const CheckboxHiddenInput = react.forwardRef((props, ref) => {
+  const checkbox = useCheckboxContext.useCheckboxContext();
+  const mergedProps = react$1.mergeProps(checkbox.getHiddenInputProps(), props);
+  const field = useFieldContext.useFieldContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
+});
 CheckboxHiddenInput.displayName = "CheckboxHiddenInput";
 
 exports.CheckboxHiddenInput = CheckboxHiddenInput;

package/dist/components/checkbox/checkbox-hidden-input.js

@@ -6,14 +6,12 @@ import { ark } from '../factory.js';
 import { useFieldContext } from '../field/use-field-context.js';
 import { useCheckboxContext } from './use-checkbox-context.js';
 
-const CheckboxHiddenInput = forwardRef(
-  (props, ref) => {
-    const checkbox = useCheckboxContext();
-    const mergedProps = mergeProps(checkbox.getHiddenInputProps(), props);
-    const field = useFieldContext();
-    return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
-  }
-);
+const CheckboxHiddenInput = forwardRef((props, ref) => {
+  const checkbox = useCheckboxContext();
+  const mergedProps = mergeProps(checkbox.getHiddenInputProps(), props);
+  const field = useFieldContext();
+  return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
+});
 CheckboxHiddenInput.displayName = "CheckboxHiddenInput";
 
 export { CheckboxHiddenInput };

package/dist/components/checkbox/checkbox-indicator.cjs

@@ -9,15 +9,13 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useCheckboxContext = require('./use-checkbox-context.cjs');
 
-const CheckboxIndicator = react.forwardRef(
-  (props, ref) => {
-    const { indeterminate, ...rest } = props;
-    const checkbox = useCheckboxContext.useCheckboxContext();
-    const mergedProps = react$1.mergeProps(checkbox.getIndicatorProps(), rest);
-    const isVisible = indeterminate ? checkbox.indeterminate : checkbox.checked;
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, hidden: !isVisible, ref });
-  }
-);
+const CheckboxIndicator = react.forwardRef((props, ref) => {
+  const { indeterminate, ...rest } = props;
+  const checkbox = useCheckboxContext.useCheckboxContext();
+  const mergedProps = react$1.mergeProps(checkbox.getIndicatorProps(), rest);
+  const isVisible = indeterminate ? checkbox.indeterminate : checkbox.checked;
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, hidden: !isVisible, ref });
+});
 CheckboxIndicator.displayName = "CheckboxIndicator";
 
 exports.CheckboxIndicator = CheckboxIndicator;

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

@@ -5,15 +5,13 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useCheckboxContext } from './use-checkbox-context.js';
 
-const CheckboxIndicator = forwardRef(
-  (props, ref) => {
-    const { indeterminate, ...rest } = props;
-    const checkbox = useCheckboxContext();
-    const mergedProps = mergeProps(checkbox.getIndicatorProps(), rest);
-    const isVisible = indeterminate ? checkbox.indeterminate : checkbox.checked;
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, hidden: !isVisible, ref });
-  }
-);
+const CheckboxIndicator = forwardRef((props, ref) => {
+  const { indeterminate, ...rest } = props;
+  const checkbox = useCheckboxContext();
+  const mergedProps = mergeProps(checkbox.getIndicatorProps(), rest);
+  const isVisible = indeterminate ? checkbox.indeterminate : checkbox.checked;
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, hidden: !isVisible, ref });
+});
 CheckboxIndicator.displayName = "CheckboxIndicator";
 
 export { CheckboxIndicator };

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

@@ -10,15 +10,11 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useCheckboxContext = require('./use-checkbox-context.cjs');
 
-const CheckboxRootProvider = react.forwardRef(
-  (props, ref) => {
-    const [{ value: checkbox }, localProps] = createSplitProps.createSplitProps()(props, [
-      "value"
-    ]);
-    const mergedProps = react$1.mergeProps(checkbox.getRootProps(), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(useCheckboxContext.CheckboxProvider, { value: checkbox, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref }) });
-  }
-);
+const CheckboxRootProvider = react.forwardRef((props, ref) => {
+  const [{ value: checkbox }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const mergedProps = react$1.mergeProps(checkbox.getRootProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useCheckboxContext.CheckboxProvider, { value: checkbox, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref }) });
+});
 CheckboxRootProvider.displayName = "CheckboxRootProvider";
 
 exports.CheckboxRootProvider = CheckboxRootProvider;