@ark-ui/react 4.9.1 → 5.0.0

package/README.md

@@ -6,9 +6,8 @@
 
 # Welcome to Ark UI
 
-Ark UI is a headless, open-source UI library with over 45+ components designed for building
-reusable, scalable Design Systems. It supports a wide range of JavaScript frameworks, offering
-dedciated packages for each supported framework.
+Ark UI is a headless, open-source UI library with over 45+ components designed for building reusable, scalable Design
+Systems. It supports a wide range of JavaScript frameworks, offering dedciated packages for each supported framework.
 
 ## Supported Frameworks
 
@@ -102,8 +101,7 @@ export const MySlider = () => {
 
 ## Documentation
 
-For more detailed documentation and examples, please visit the
-[official documentation](https://ark-ui.com/).
+For more detailed documentation and examples, please visit the [official documentation](https://ark-ui.com/).
 
 ## Roadmap
 
@@ -112,10 +110,9 @@ You can request, vote for, and check upcoming features on our [roadmap](https://
 ## Contribution
 
 We welcome contributions to Ark UI. Please read our
-[contributing guidelines](https://github.com/chakra-ui/ark/blob/main/CONTRIBUTING.md) for more
-information on how to contribute.
+[contributing guidelines](https://github.com/chakra-ui/ark/blob/main/CONTRIBUTING.md) for more information on how to
+contribute.
 
 ## License
 
-This project is licensed under the terms of the
-[MIT license](https://github.com/chakra-ui/ark/blob/main/LICENSE).
+This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ark/blob/main/LICENSE).

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

@@ -12,16 +12,14 @@ const useAccordionContext = require('./use-accordion-context.cjs');
 const useAccordionItemPropsContext = require('./use-accordion-item-props-context.cjs');
 
 const splitVisibilityProps = createSplitProps.createSplitProps();
-const AccordionItemContent = react.forwardRef(
-  (props, ref) => {
-    const accordion = useAccordionContext.useAccordionContext();
-    const itemProps = useAccordionItemPropsContext.useAccordionItemPropsContext();
-    const contentProps = accordion.getItemContentProps(itemProps);
-    const [, itemContentProps] = splitVisibilityProps(contentProps, ["hidden", "data-state"]);
-    const mergedProps = react$1.mergeProps(itemContentProps, props);
-    return /* @__PURE__ */ jsxRuntime.jsx(collapsibleContent.CollapsibleContent, { ref, ...mergedProps });
-  }
-);
+const AccordionItemContent = react.forwardRef((props, ref) => {
+  const accordion = useAccordionContext.useAccordionContext();
+  const itemProps = useAccordionItemPropsContext.useAccordionItemPropsContext();
+  const contentProps = accordion.getItemContentProps(itemProps);
+  const [, itemContentProps] = splitVisibilityProps(contentProps, ["hidden", "data-state"]);
+  const mergedProps = react$1.mergeProps(itemContentProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(collapsibleContent.CollapsibleContent, { ref, ...mergedProps });
+});
 AccordionItemContent.displayName = "AccordionItemContent";
 
 exports.AccordionItemContent = AccordionItemContent;

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

@@ -8,16 +8,14 @@ import { useAccordionContext } from './use-accordion-context.js';
 import { useAccordionItemPropsContext } from './use-accordion-item-props-context.js';
 
 const splitVisibilityProps = createSplitProps();
-const AccordionItemContent = forwardRef(
-  (props, ref) => {
-    const accordion = useAccordionContext();
-    const itemProps = useAccordionItemPropsContext();
-    const contentProps = accordion.getItemContentProps(itemProps);
-    const [, itemContentProps] = splitVisibilityProps(contentProps, ["hidden", "data-state"]);
-    const mergedProps = mergeProps(itemContentProps, props);
-    return /* @__PURE__ */ jsx(CollapsibleContent, { ref, ...mergedProps });
-  }
-);
+const AccordionItemContent = forwardRef((props, ref) => {
+  const accordion = useAccordionContext();
+  const itemProps = useAccordionItemPropsContext();
+  const contentProps = accordion.getItemContentProps(itemProps);
+  const [, itemContentProps] = splitVisibilityProps(contentProps, ["hidden", "data-state"]);
+  const mergedProps = mergeProps(itemContentProps, props);
+  return /* @__PURE__ */ jsx(CollapsibleContent, { ref, ...mergedProps });
+});
 AccordionItemContent.displayName = "AccordionItemContent";
 
 export { AccordionItemContent };

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

@@ -10,14 +10,12 @@ const factory = require('../factory.cjs');
 const useAccordionContext = require('./use-accordion-context.cjs');
 const useAccordionItemPropsContext = require('./use-accordion-item-props-context.cjs');
 
-const AccordionItemIndicator = react.forwardRef(
-  (props, ref) => {
-    const accordion = useAccordionContext.useAccordionContext();
-    const itemProps = useAccordionItemPropsContext.useAccordionItemPropsContext();
-    const mergedProps = react$1.mergeProps(accordion.getItemIndicatorProps(itemProps), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const AccordionItemIndicator = react.forwardRef((props, ref) => {
+  const accordion = useAccordionContext.useAccordionContext();
+  const itemProps = useAccordionItemPropsContext.useAccordionItemPropsContext();
+  const mergedProps = react$1.mergeProps(accordion.getItemIndicatorProps(itemProps), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 AccordionItemIndicator.displayName = "AccordionItemIndicator";
 
 exports.AccordionItemIndicator = AccordionItemIndicator;

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

@@ -6,14 +6,12 @@ import { ark } from '../factory.js';
 import { useAccordionContext } from './use-accordion-context.js';
 import { useAccordionItemPropsContext } from './use-accordion-item-props-context.js';
 
-const AccordionItemIndicator = forwardRef(
-  (props, ref) => {
-    const accordion = useAccordionContext();
-    const itemProps = useAccordionItemPropsContext();
-    const mergedProps = mergeProps(accordion.getItemIndicatorProps(itemProps), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const AccordionItemIndicator = forwardRef((props, ref) => {
+  const accordion = useAccordionContext();
+  const itemProps = useAccordionItemPropsContext();
+  const mergedProps = mergeProps(accordion.getItemIndicatorProps(itemProps), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 AccordionItemIndicator.displayName = "AccordionItemIndicator";
 
 export { AccordionItemIndicator };

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

@@ -11,22 +11,20 @@ const factory = require('../factory.cjs');
 const useAccordionContext = require('./use-accordion-context.cjs');
 const useAccordionItemPropsContext = require('./use-accordion-item-props-context.cjs');
 
-const AccordionItemTrigger = react.forwardRef(
-  (props, ref) => {
-    const accordion = useAccordionContext.useAccordionContext();
-    const itemProps = useAccordionItemPropsContext.useAccordionItemPropsContext();
-    const collapsible = useCollapsibleContext.useCollapsibleContext();
-    const triggerProps = accordion.getItemTriggerProps(itemProps);
-    const mergedProps = react$1.mergeProps(
-      {
-        ...triggerProps,
-        "aria-controls": collapsible.isUnmounted ? void 0 : triggerProps["aria-controls"]
-      },
-      props
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
-  }
-);
+const AccordionItemTrigger = react.forwardRef((props, ref) => {
+  const accordion = useAccordionContext.useAccordionContext();
+  const itemProps = useAccordionItemPropsContext.useAccordionItemPropsContext();
+  const collapsible = useCollapsibleContext.useCollapsibleContext();
+  const triggerProps = accordion.getItemTriggerProps(itemProps);
+  const mergedProps = react$1.mergeProps(
+    {
+      ...triggerProps,
+      "aria-controls": collapsible.isUnmounted ? void 0 : triggerProps["aria-controls"]
+    },
+    props
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+});
 AccordionItemTrigger.displayName = "AccordionItemTrigger";
 
 exports.AccordionItemTrigger = AccordionItemTrigger;

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

@@ -7,22 +7,20 @@ import { ark } from '../factory.js';
 import { useAccordionContext } from './use-accordion-context.js';
 import { useAccordionItemPropsContext } from './use-accordion-item-props-context.js';
 
-const AccordionItemTrigger = forwardRef(
-  (props, ref) => {
-    const accordion = useAccordionContext();
-    const itemProps = useAccordionItemPropsContext();
-    const collapsible = useCollapsibleContext();
-    const triggerProps = accordion.getItemTriggerProps(itemProps);
-    const mergedProps = mergeProps(
-      {
-        ...triggerProps,
-        "aria-controls": collapsible.isUnmounted ? void 0 : triggerProps["aria-controls"]
-      },
-      props
-    );
-    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
-  }
-);
+const AccordionItemTrigger = forwardRef((props, ref) => {
+  const accordion = useAccordionContext();
+  const itemProps = useAccordionItemPropsContext();
+  const collapsible = useCollapsibleContext();
+  const triggerProps = accordion.getItemTriggerProps(itemProps);
+  const mergedProps = mergeProps(
+    {
+      ...triggerProps,
+      "aria-controls": collapsible.isUnmounted ? void 0 : triggerProps["aria-controls"]
+    },
+    props
+  );
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
 AccordionItemTrigger.displayName = "AccordionItemTrigger";
 
 export { AccordionItemTrigger };

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

@@ -4,7 +4,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const accordion = require('@zag-js/accordion');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const useAccordionContext = require('./use-accordion-context.cjs');
@@ -13,16 +12,17 @@ const collapsibleRoot = require('../collapsible/collapsible-root.cjs');
 require('@zag-js/color-picker');
 require('@zag-js/date-picker');
 require('@internationalized/date');
+const createSplitProps = require('../../utils/create-split-props.cjs');
 const renderStrategy = require('../../utils/render-strategy.cjs');
 const useAccordionItemPropsContext = require('./use-accordion-item-props-context.cjs');
 
 const AccordionItem = react.forwardRef((props, ref) => {
-  const [itemProps, localProps] = accordion.splitItemProps(props);
-  const accordion$1 = useAccordionContext.useAccordionContext();
+  const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ["value", "disabled"]);
+  const accordion = useAccordionContext.useAccordionContext();
   const renderStrategy$1 = renderStrategy.useRenderStrategyPropsContext();
-  const mergedProps = react$1.mergeProps(accordion$1.getItemProps(itemProps), localProps);
-  const item = accordion$1.getItemState(itemProps);
-  const itemContentProps = accordion$1.getItemContentProps(itemProps);
+  const mergedProps = react$1.mergeProps(accordion.getItemProps(itemProps), localProps);
+  const item = accordion.getItemState(itemProps);
+  const itemContentProps = accordion.getItemContentProps(itemProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useAccordionItemPropsContext.AccordionItemPropsProvider, { value: itemProps, children: /* @__PURE__ */ jsxRuntime.jsx(useAccordionItemContext.AccordionItemProvider, { value: item, children: /* @__PURE__ */ jsxRuntime.jsx(
     collapsibleRoot.CollapsibleRoot,
     {

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

@@ -1,6 +1,5 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { splitItemProps } from '@zag-js/accordion';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { useAccordionContext } from './use-accordion-context.js';
@@ -9,11 +8,12 @@ import { CollapsibleRoot } from '../collapsible/collapsible-root.js';
 import '@zag-js/color-picker';
 import '@zag-js/date-picker';
 import '@internationalized/date';
+import { createSplitProps } from '../../utils/create-split-props.js';
 import { useRenderStrategyPropsContext } from '../../utils/render-strategy.js';
 import { AccordionItemPropsProvider } from './use-accordion-item-props-context.js';
 
 const AccordionItem = forwardRef((props, ref) => {
-  const [itemProps, localProps] = splitItemProps(props);
+  const [itemProps, localProps] = createSplitProps()(props, ["value", "disabled"]);
   const accordion = useAccordionContext();
   const renderStrategy = useRenderStrategyPropsContext();
   const mergedProps = mergeProps(accordion.getItemProps(itemProps), localProps);

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

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

@@ -7,17 +7,12 @@ import { splitRenderStrategyProps, RenderStrategyPropsProvider } from '../../uti
 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 }) }) });
-  }
-);
+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.d.cts

@@ -1,5 +1,5 @@
 export type { FocusChangeDetails, ValueChangeDetails } from '@zag-js/accordion';
-export { AccordionContext as Context, type AccordionContextProps as ContextProps, } from './accordion-context';
+export { AccordionContext as Context, type AccordionContextProps as ContextProps } from './accordion-context';
 export { AccordionItem as Item, type AccordionItemBaseProps as ItemBaseProps, type AccordionItemProps as ItemProps, } from './accordion-item';
 export { AccordionItemContent as ItemContent, type AccordionItemContentBaseProps as ItemContentBaseProps, type AccordionItemContentProps as ItemContentProps, } from './accordion-item-content';
 export { AccordionItemContext as ItemContext, type AccordionItemContextProps as ItemContextProps, } from './accordion-item-context';

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

@@ -1,5 +1,5 @@
 export type { FocusChangeDetails, ValueChangeDetails } from '@zag-js/accordion';
-export { AccordionContext as Context, type AccordionContextProps as ContextProps, } from './accordion-context';
+export { AccordionContext as Context, type AccordionContextProps as ContextProps } from './accordion-context';
 export { AccordionItem as Item, type AccordionItemBaseProps as ItemBaseProps, type AccordionItemProps as ItemProps, } from './accordion-item';
 export { AccordionItemContent as ItemContent, type AccordionItemContentBaseProps as ItemContentBaseProps, type AccordionItemContentProps as ItemContentProps, } from './accordion-item-content';
 export { AccordionItemContext as ItemContext, type AccordionItemContextProps as ItemContextProps, } from './accordion-item-context';

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

@@ -1,11 +1,11 @@
 export type { FocusChangeDetails as AccordionFocusChangeDetails, ValueChangeDetails as AccordionValueChangeDetails, } from '@zag-js/accordion';
 export { AccordionContext, type AccordionContextProps } from './accordion-context';
-export { AccordionItem, type AccordionItemBaseProps, type AccordionItemProps, } from './accordion-item';
+export { AccordionItem, type AccordionItemBaseProps, type AccordionItemProps } from './accordion-item';
 export { AccordionItemContent, type AccordionItemContentBaseProps, type AccordionItemContentProps, } from './accordion-item-content';
 export { AccordionItemContext, type AccordionItemContextProps } from './accordion-item-context';
 export { AccordionItemIndicator, type AccordionItemIndicatorBaseProps, type AccordionItemIndicatorProps, } from './accordion-item-indicator';
 export { AccordionItemTrigger, type AccordionItemTriggerBaseProps, type AccordionItemTriggerProps, } from './accordion-item-trigger';
-export { AccordionRoot, type AccordionRootBaseProps, type AccordionRootProps, } from './accordion-root';
+export { AccordionRoot, type AccordionRootBaseProps, type AccordionRootProps } from './accordion-root';
 export { AccordionRootProvider, type AccordionRootProviderBaseProps, type AccordionRootProviderProps, } from './accordion-root-provider';
 export { accordionAnatomy } from './accordion.anatomy';
 export { useAccordion, type UseAccordionProps, type UseAccordionReturn } from './use-accordion';

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

@@ -1,11 +1,11 @@
 export type { FocusChangeDetails as AccordionFocusChangeDetails, ValueChangeDetails as AccordionValueChangeDetails, } from '@zag-js/accordion';
 export { AccordionContext, type AccordionContextProps } from './accordion-context';
-export { AccordionItem, type AccordionItemBaseProps, type AccordionItemProps, } from './accordion-item';
+export { AccordionItem, type AccordionItemBaseProps, type AccordionItemProps } from './accordion-item';
 export { AccordionItemContent, type AccordionItemContentBaseProps, type AccordionItemContentProps, } from './accordion-item-content';
 export { AccordionItemContext, type AccordionItemContextProps } from './accordion-item-context';
 export { AccordionItemIndicator, type AccordionItemIndicatorBaseProps, type AccordionItemIndicatorProps, } from './accordion-item-indicator';
 export { AccordionItemTrigger, type AccordionItemTriggerBaseProps, type AccordionItemTriggerProps, } from './accordion-item-trigger';
-export { AccordionRoot, type AccordionRootBaseProps, type AccordionRootProps, } from './accordion-root';
+export { AccordionRoot, type AccordionRootBaseProps, type AccordionRootProps } from './accordion-root';
 export { AccordionRootProvider, type AccordionRootProviderBaseProps, type AccordionRootProviderProps, } from './accordion-root-provider';
 export { accordionAnatomy } from './accordion.anatomy';
 export { useAccordion, type UseAccordionProps, type UseAccordionReturn } from './use-accordion';

package/dist/components/accordion/use-accordion.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' } });
@@ -30,23 +29,17 @@ function _interopNamespaceDefault(e) {
 const accordion__namespace = /*#__PURE__*/_interopNamespaceDefault(accordion);
 
 const useAccordion = (props = {}) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onFocusChange: useEvent.useEvent(props.onFocusChange),
-    onValueChange: useEvent.useEvent(props.onValueChange)
-  };
-  const [state, send] = react$1.useMachine(accordion__namespace.machine(initialContext), { context });
-  return accordion__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(accordion__namespace.machine, machineProps);
+  return accordion__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useAccordion = useAccordion;

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

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as accordion from '@zag-js/accordion';
-export interface UseAccordionProps extends Optional<Omit<accordion.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial value of the accordion when it is first rendered.
-     * Use when you do not need to control the state of the accordion.
-     */
-    defaultValue?: accordion.Context['value'];
+export interface UseAccordionProps extends Optional<Omit<accordion.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseAccordionReturn extends accordion.Api<PropTypes> {
 }

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

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as accordion from '@zag-js/accordion';
-export interface UseAccordionProps extends Optional<Omit<accordion.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial value of the accordion when it is first rendered.
-     * Use when you do not need to control the state of the accordion.
-     */
-    defaultValue?: accordion.Context['value'];
+export interface UseAccordionProps extends Optional<Omit<accordion.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseAccordionReturn extends accordion.Api<PropTypes> {
 }

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

@@ -4,26 +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 useAccordion = (props = {}) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onFocusChange: useEvent(props.onFocusChange),
-    onValueChange: useEvent(props.onValueChange)
-  };
-  const [state, send] = useMachine(accordion.machine(initialContext), { context });
-  return accordion.connect(state, send, normalizeProps);
+  const service = useMachine(accordion.machine, machineProps);
+  return accordion.connect(service, normalizeProps);
 };
 
 export { useAccordion };

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 export type { StatusChangeDetails as AvatarStatusChangeDetails } from '@zag-js/avatar';
 export { AvatarContext, type AvatarContextProps } from './avatar-context';
-export { AvatarFallback, type AvatarFallbackBaseProps, type AvatarFallbackProps, } from './avatar-fallback';
+export { AvatarFallback, type AvatarFallbackBaseProps, type AvatarFallbackProps } from './avatar-fallback';
 export { AvatarImage, type AvatarImageBaseProps, type AvatarImageProps } from './avatar-image';
 export { AvatarRoot, type AvatarRootBaseProps, type AvatarRootProps } from './avatar-root';
 export { AvatarRootProvider, type AvatarRootProviderBaseProps, type AvatarRootProviderProps, } from './avatar-root-provider';

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

@@ -1,6 +1,6 @@
 export type { StatusChangeDetails as AvatarStatusChangeDetails } from '@zag-js/avatar';
 export { AvatarContext, type AvatarContextProps } from './avatar-context';
-export { AvatarFallback, type AvatarFallbackBaseProps, type AvatarFallbackProps, } from './avatar-fallback';
+export { AvatarFallback, type AvatarFallbackBaseProps, type AvatarFallbackProps } from './avatar-fallback';
 export { AvatarImage, type AvatarImageBaseProps, type AvatarImageProps } from './avatar-image';
 export { AvatarRoot, type AvatarRootBaseProps, type AvatarRootProps } from './avatar-root';
 export { AvatarRootProvider, type AvatarRootProviderBaseProps, type AvatarRootProviderProps, } from './avatar-root-provider';

package/dist/components/avatar/use-avatar.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' } });
@@ -30,20 +29,17 @@ function _interopNamespaceDefault(e) {
 const avatar__namespace = /*#__PURE__*/_interopNamespaceDefault(avatar);
 
 const useAvatar = (props = {}) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
-  const initialContext = {
-    id: react.useId(),
+  const context = {
+    id,
     dir,
     getRootNode,
     ...props
   };
-  const context = {
-    ...initialContext,
-    onStatusChange: useEvent.useEvent(props.onStatusChange)
-  };
-  const [state, send] = react$1.useMachine(avatar__namespace.machine(initialContext), { context });
-  return avatar__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(avatar__namespace.machine, context);
+  return avatar__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useAvatar = useAvatar;

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

@@ -1,7 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as avatar from '@zag-js/avatar';
-export interface UseAvatarProps extends Optional<Omit<avatar.Context, 'dir' | 'getRootNode'>, 'id'> {
+export interface UseAvatarProps extends Optional<Omit<avatar.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseAvatarReturn extends avatar.Api<PropTypes> {
 }

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

@@ -1,7 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as avatar from '@zag-js/avatar';
-export interface UseAvatarProps extends Optional<Omit<avatar.Context, 'dir' | 'getRootNode'>, 'id'> {
+export interface UseAvatarProps extends Optional<Omit<avatar.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseAvatarReturn extends avatar.Api<PropTypes> {
 }