@ark-ui/react 0.15.0 → 1.0.0-beta.1

package/CHANGELOG.md

@@ -6,24 +6,40 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
-## [0.15.0] - 2023-09-14
+## [1.0.0-beta.1] - 2023-10-20
 
 ### Added
 
-- Added `ToggleGroup` component
-- Added `type HTMLArkProps` that can be used together with the `ark` factory fn to create a type that can be used with `asChild` prop.
+- Parsed `focusedValue` in `DatePicker`
+
+### Fixed
+
+- Resolved an issue with `@ark-ui/anatomy`
+
+## [1.0.0-beta.0] - 2023-10-20
 
 ### Changed
 
-- Revised `Comoobox` component to support multiple selection
-- Revised `Select` component to support multiple selection
+- Add memoization to `Select` and `Combobox` item collection to improve performance.
+- Ensure all event callbacks have a stable reference
 
 ### Fixed
 
-- Fix issue where event callbacks that use `flushSync` did not have a stable reference, resulting in a noticable blocking re-renders.
-  > Affected components: `Slider`, `RangeSlider`, `NumberInput`, `ColorPicker`
+- Resolved an issue when controlling the `Editable` component.
 
-## [0.15.0-beta.0] - 2023-09-14
+### Removed
+
+- Removed anatomy exports. These exports are now available in `@ark-ui/anatomy`.
+
+```tsx
+// before
+import { accordionAnatomy } from '@ark-ui/react'
+// after
+import { accordionAnatomy } from '@ark-ui/anatomy' // or
+import { anatomy } from '@ark-ui/anatomy/accordion'
+```
+
+## [0.15.0] - 2023-09-14
 
 ### Added
 
@@ -270,5 +286,8 @@ description: All notable changes to this project will be documented in this file
 [0.13.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.13.1
 [0.14.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.14.0
 [0.15.0-beta.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.15.0-beta.0
-
 [0.15.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.15.0
+
+```
+
+```

package/accordion/accordion-context.d.ts

@@ -1,5 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseAccordionReturn } from './use-accordion';
-export type AccordionContext = UseAccordionReturn;
-export declare const AccordionProvider: Provider<UseAccordionReturn>, useAccordionContext: () => UseAccordionReturn;
+export interface AccordionContext extends UseAccordionReturn {
+}
+export declare const AccordionProvider: Provider<AccordionContext>, useAccordionContext: () => AccordionContext;

package/accordion/{accordion-content.cjs → accordion-item-content.cjs}

@@ -12,8 +12,8 @@ const accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
 const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
-const AccordionContent = react.forwardRef(
-  function AccordionContent2(props, ref) {
+const AccordionItemContent = react.forwardRef(
+  function AccordionItemContent2(props, ref) {
     const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
     const api = accordionItemContext.useAccordionItemContext();
     return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(AccordionInnerContent, { ref, ...localProps }) });
@@ -23,9 +23,9 @@ const AccordionInnerContent = react.forwardRef(
   function AccordionInnerContent2(props, ref) {
     const api = accordionContext.useAccordionContext();
     const accordionItem = accordionItemContext.useAccordionItemContext();
-    const mergedProps = react$1.mergeProps(api.getContentProps(accordionItem), props);
+    const mergedProps = react$1.mergeProps(api.getItemContentProps(accordionItem), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
 
-exports.AccordionContent = AccordionContent;
+exports.AccordionItemContent = AccordionItemContent;

package/accordion/accordion-item-content.d.ts

@@ -0,0 +1,8 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+import { type PresenceProps } from '../presence';
+import type { Assign } from '../types';
+export interface AccordionItemContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+}
+export declare const AccordionItemContent: ForwardRefExoticComponent<AccordionItemContentProps & RefAttributes<HTMLDivElement>>;

package/accordion/{accordion-content.mjs → accordion-item-content.mjs}

@@ -8,8 +8,8 @@ import { useAccordionContext } from './accordion-context.mjs';
 import { useAccordionItemContext } from './accordion-item-context.mjs';
 import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
-const AccordionContent = forwardRef(
-  function AccordionContent2(props, ref) {
+const AccordionItemContent = forwardRef(
+  function AccordionItemContent2(props, ref) {
     const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useAccordionItemContext();
     return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(AccordionInnerContent, { ref, ...localProps }) });
@@ -19,9 +19,9 @@ const AccordionInnerContent = forwardRef(
   function AccordionInnerContent2(props, ref) {
     const api = useAccordionContext();
     const accordionItem = useAccordionItemContext();
-    const mergedProps = mergeProps(api.getContentProps(accordionItem), props);
+    const mergedProps = mergeProps(api.getItemContentProps(accordionItem), props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
 
-export { AccordionContent };
+export { AccordionItemContent };

package/accordion/accordion-item-indicator.cjs

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const accordionContext = require('./accordion-context.cjs');
+const accordionItemContext = require('./accordion-item-context.cjs');
+
+const AccordionItemIndicator = react.forwardRef(
+  (props, ref) => {
+    const api = accordionContext.useAccordionContext();
+    const item = accordionItemContext.useAccordionItemContext();
+    const mergedProps = react$1.mergeProps(api.getItemIndicatorProps(item), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
+AccordionItemIndicator.displayName = "AccordionItemIndicator";
+
+exports.AccordionItemIndicator = AccordionItemIndicator;

package/accordion/accordion-item-indicator.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface AccordionItemIndicatorProps extends HTMLArkProps<'div'> {
+}
+export declare const AccordionItemIndicator: ForwardRefExoticComponent<AccordionItemIndicatorProps & RefAttributes<HTMLDivElement>>;

package/accordion/accordion-item-indicator.mjs

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useAccordionContext } from './accordion-context.mjs';
+import { useAccordionItemContext } from './accordion-item-context.mjs';
+
+const AccordionItemIndicator = forwardRef(
+  (props, ref) => {
+    const api = useAccordionContext();
+    const item = useAccordionItemContext();
+    const mergedProps = mergeProps(api.getItemIndicatorProps(item), props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+AccordionItemIndicator.displayName = "AccordionItemIndicator";
+
+export { AccordionItemIndicator };

package/accordion/{accordion-trigger.cjs → accordion-item-trigger.cjs}

@@ -10,14 +10,14 @@ const factory = require('../factory.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
 
-const AccordionTrigger = react.forwardRef(
+const AccordionItemTrigger = react.forwardRef(
   (props, ref) => {
-    const { getTriggerProps } = accordionContext.useAccordionContext();
+    const api = accordionContext.useAccordionContext();
     const accordionItem = accordionItemContext.useAccordionItemContext();
-    const mergedProps = react$1.mergeProps(getTriggerProps(accordionItem), props);
+    const mergedProps = react$1.mergeProps(api.getItemTriggerProps(accordionItem), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
   }
 );
-AccordionTrigger.displayName = "AccordionTrigger";
+AccordionItemTrigger.displayName = "AccordionItemTrigger";
 
-exports.AccordionTrigger = AccordionTrigger;
+exports.AccordionItemTrigger = AccordionItemTrigger;

package/accordion/accordion-item-trigger.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface AccordionItemTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const AccordionItemTrigger: ForwardRefExoticComponent<AccordionItemTriggerProps & RefAttributes<HTMLButtonElement>>;

package/accordion/{accordion-trigger.mjs → accordion-item-trigger.mjs}

@@ -6,14 +6,14 @@ import { ark } from '../factory.mjs';
 import { useAccordionContext } from './accordion-context.mjs';
 import { useAccordionItemContext } from './accordion-item-context.mjs';
 
-const AccordionTrigger = forwardRef(
+const AccordionItemTrigger = forwardRef(
   (props, ref) => {
-    const { getTriggerProps } = useAccordionContext();
+    const api = useAccordionContext();
     const accordionItem = useAccordionItemContext();
-    const mergedProps = mergeProps(getTriggerProps(accordionItem), props);
+    const mergedProps = mergeProps(api.getItemTriggerProps(accordionItem), props);
     return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
   }
 );
-AccordionTrigger.displayName = "AccordionTrigger";
+AccordionItemTrigger.displayName = "AccordionItemTrigger";
 
-export { AccordionTrigger };
+export { AccordionItemTrigger };

package/accordion/accordion-item.cjs

@@ -13,13 +13,13 @@ const accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
 
 const AccordionItem = react.forwardRef((props, ref) => {
-  const [itemProps, { children, ...rest }] = createSplitProps.createSplitProps()(props, [
+  const [itemProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, [
     "value",
     "disabled"
   ]);
-  const { getItemProps, getItemState } = accordionContext.useAccordionContext();
-  const itemState = getItemState(itemProps);
-  const mergedProps = react$1.mergeProps(getItemProps(itemProps), rest);
+  const api = accordionContext.useAccordionContext();
+  const itemState = api.getItemState(itemProps);
+  const mergedProps = react$1.mergeProps(api.getItemProps(itemProps), localProps);
   const view = runIfFn.runIfFn(children, itemState);
   return /* @__PURE__ */ jsxRuntime.jsx(accordionItemContext.AccordionItemProvider, { value: { ...itemProps, ...itemState }, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
 });

package/accordion/accordion-item.d.ts

@@ -1,11 +1,10 @@
-import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import type { ItemProps, ItemState } from '@zag-js/accordion';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type AccordionItemProps = ItemProps & Assign<HTMLArkProps<'div'>, {
+export interface AccordionItemProps extends ItemProps, Assign<HTMLArkProps<'div'>, {
     children?: React.ReactNode | ((props: ItemState) => React.ReactNode);
-}>;
-export declare const AccordionItem: ForwardRefExoticComponent<ItemProps & Omit<HTMLArkProps<"div">, "children"> & {
-    children?: ReactNode | ((props: ItemState) => React.ReactNode);
-} & RefAttributes<HTMLDivElement>>;
+}> {
+}
+export declare const AccordionItem: ForwardRefExoticComponent<AccordionItemProps & RefAttributes<HTMLDivElement>>;

package/accordion/accordion-item.mjs

@@ -9,13 +9,13 @@ import { useAccordionContext } from './accordion-context.mjs';
 import { AccordionItemProvider } from './accordion-item-context.mjs';
 
 const AccordionItem = forwardRef((props, ref) => {
-  const [itemProps, { children, ...rest }] = createSplitProps()(props, [
+  const [itemProps, { children, ...localProps }] = createSplitProps()(props, [
     "value",
     "disabled"
   ]);
-  const { getItemProps, getItemState } = useAccordionContext();
-  const itemState = getItemState(itemProps);
-  const mergedProps = mergeProps(getItemProps(itemProps), rest);
+  const api = useAccordionContext();
+  const itemState = api.getItemState(itemProps);
+  const mergedProps = mergeProps(api.getItemProps(itemProps), localProps);
   const view = runIfFn(children, itemState);
   return /* @__PURE__ */ jsx(AccordionItemProvider, { value: { ...itemProps, ...itemState }, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
 });

package/accordion/accordion.cjs

@@ -21,14 +21,14 @@ const Accordion = react.forwardRef((props, ref) => {
     "id",
     "ids",
     "multiple",
-    "onChange",
     "onFocusChange",
+    "onValueChange",
     "orientation",
     "value"
   ]);
-  const accordion = useAccordion.useAccordion(useAccordionProps);
-  const mergedProps = react$1.mergeProps(accordion.rootProps, divProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(accordionContext.AccordionProvider, { value: accordion, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+  const api = useAccordion.useAccordion(useAccordionProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(accordionContext.AccordionProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
 Accordion.displayName = "Accordion";
 

package/accordion/accordion.d.ts

@@ -3,5 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type UseAccordionProps } from './use-accordion';
-export type AccordionProps = Assign<HTMLArkProps<'div'>, UseAccordionProps>;
-export declare const Accordion: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseAccordionProps> & UseAccordionProps & RefAttributes<HTMLDivElement>>;
+export interface AccordionProps extends Assign<HTMLArkProps<'div'>, UseAccordionProps> {
+}
+export declare const Accordion: ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>>;

package/accordion/accordion.mjs

@@ -17,14 +17,14 @@ const Accordion = forwardRef((props, ref) => {
     "id",
     "ids",
     "multiple",
-    "onChange",
     "onFocusChange",
+    "onValueChange",
     "orientation",
     "value"
   ]);
-  const accordion = useAccordion(useAccordionProps);
-  const mergedProps = mergeProps(accordion.rootProps, divProps);
-  return /* @__PURE__ */ jsx(AccordionProvider, { value: accordion, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+  const api = useAccordion(useAccordionProps);
+  const mergedProps = mergeProps(api.rootProps, divProps);
+  return /* @__PURE__ */ jsx(AccordionProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
 Accordion.displayName = "Accordion";
 

package/accordion/index.cjs

@@ -3,28 +3,26 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const accordion$1 = require('./accordion.cjs');
-const accordionContent = require('./accordion-content.cjs');
+const accordion = require('./accordion.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const accordionItem = require('./accordion-item.cjs');
+const accordionItemContent = require('./accordion-item-content.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
-const accordionTrigger = require('./accordion-trigger.cjs');
-const accordion = require('@zag-js/accordion');
+const accordionItemIndicator = require('./accordion-item-indicator.cjs');
+const accordionItemTrigger = require('./accordion-item-trigger.cjs');
 
-const Accordion = Object.assign(accordion$1.Accordion, {
-  Root: accordion$1.Accordion,
-  Content: accordionContent.AccordionContent,
+const Accordion = Object.assign(accordion.Accordion, {
+  Root: accordion.Accordion,
   Item: accordionItem.AccordionItem,
-  Trigger: accordionTrigger.AccordionTrigger
+  ItemContent: accordionItemContent.AccordionItemContent,
+  ItemIndicator: accordionItemIndicator.AccordionItemIndicator,
+  ItemTrigger: accordionItemTrigger.AccordionItemTrigger
 });
 
-exports.AccordionContent = accordionContent.AccordionContent;
 exports.useAccordionContext = accordionContext.useAccordionContext;
 exports.AccordionItem = accordionItem.AccordionItem;
+exports.AccordionItemContent = accordionItemContent.AccordionItemContent;
 exports.useAccordionItemContext = accordionItemContext.useAccordionItemContext;
-exports.AccordionTrigger = accordionTrigger.AccordionTrigger;
-Object.defineProperty(exports, 'accordionAnatomy', {
-  enumerable: true,
-  get: () => accordion.anatomy
-});
+exports.AccordionItemIndicator = accordionItemIndicator.AccordionItemIndicator;
+exports.AccordionItemTrigger = accordionItemTrigger.AccordionItemTrigger;
 exports.Accordion = Accordion;

package/accordion/index.d.ts

@@ -1,24 +1,18 @@
-import { ItemProps, ItemState } from '@zag-js/accordion';
-import { UseAccordionProps } from './use-accordion';
-import { HTMLArkProps, PresenceProps } from '..';
-import { ForwardRefExoticComponent, RefAttributes, ReactNode, DetailedHTMLProps, ButtonHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type AccordionProps } from './accordion';
-import { AccordionContent, type AccordionContentProps } from './accordion-content';
 import { useAccordionContext, type AccordionContext } from './accordion-context';
 import { AccordionItem, type AccordionItemProps } from './accordion-item';
+import { AccordionItemContent, type AccordionItemContentProps } from './accordion-item-content';
 import { useAccordionItemContext, type AccordionItemContext } from './accordion-item-context';
-import { AccordionTrigger, type AccordionTriggerProps } from './accordion-trigger';
-import { accordionAnatomy } from './accordion.anatomy';
-declare const Accordion: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseAccordionProps> & UseAccordionProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseAccordionProps> & UseAccordionProps & RefAttributes<HTMLDivElement>>;
-    Content: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
-    Item: ForwardRefExoticComponent<ItemProps & Omit<HTMLArkProps<"div">, "children"> & {
-        children?: ReactNode | ((props: ItemState) => ReactNode);
-    } & RefAttributes<HTMLDivElement>>;
-    Trigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLButtonElement>>;
+import { AccordionItemIndicator, type AccordionItemIndicatorProps } from './accordion-item-indicator';
+import { AccordionItemTrigger, type AccordionItemTriggerProps } from './accordion-item-trigger';
+declare const Accordion: ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>>;
+    Item: ForwardRefExoticComponent<AccordionItemProps & RefAttributes<HTMLDivElement>>;
+    ItemContent: ForwardRefExoticComponent<AccordionItemContentProps & RefAttributes<HTMLDivElement>>;
+    ItemIndicator: ForwardRefExoticComponent<AccordionItemIndicatorProps & RefAttributes<HTMLDivElement>>;
+    ItemTrigger: ForwardRefExoticComponent<AccordionItemTriggerProps & RefAttributes<HTMLButtonElement>>;
 };
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, accordionAnatomy, useAccordionContext, useAccordionItemContext, };
-export type { AccordionContentProps, AccordionContext, AccordionItemContext, AccordionItemProps, AccordionProps, AccordionTriggerProps, };
+export { Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, useAccordionContext, useAccordionItemContext, };
+export type { AccordionContext, AccordionItemContentProps, AccordionItemContext, AccordionItemIndicatorProps, AccordionItemProps, AccordionItemTriggerProps, AccordionProps, };

package/accordion/index.mjs

@@ -1,17 +1,18 @@
 'use client';
 import { Accordion as Accordion$1 } from './accordion.mjs';
-import { AccordionContent } from './accordion-content.mjs';
 export { useAccordionContext } from './accordion-context.mjs';
 import { AccordionItem } from './accordion-item.mjs';
+import { AccordionItemContent } from './accordion-item-content.mjs';
 export { useAccordionItemContext } from './accordion-item-context.mjs';
-import { AccordionTrigger } from './accordion-trigger.mjs';
-export { anatomy as accordionAnatomy } from '@zag-js/accordion';
+import { AccordionItemIndicator } from './accordion-item-indicator.mjs';
+import { AccordionItemTrigger } from './accordion-item-trigger.mjs';
 
 const Accordion = Object.assign(Accordion$1, {
   Root: Accordion$1,
-  Content: AccordionContent,
   Item: AccordionItem,
-  Trigger: AccordionTrigger
+  ItemContent: AccordionItemContent,
+  ItemIndicator: AccordionItemIndicator,
+  ItemTrigger: AccordionItemTrigger
 });
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+export { Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger };

package/accordion/use-accordion.cjs

@@ -7,6 +7,7 @@ const accordion = require('@zag-js/accordion');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 require('../environment/index.cjs');
+const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -28,17 +29,18 @@ function _interopNamespaceDefault(e) {
 
 const accordion__namespace = /*#__PURE__*/_interopNamespaceDefault(accordion);
 
-const useAccordion = (props) => {
-  const getRootNode = environmentContext.useEnvironmentContext();
+const useAccordion = (props = {}) => {
   const initialContext = {
     id: react.useId(),
-    getRootNode,
+    getRootNode: environmentContext.useEnvironmentContext(),
     ...props,
     value: props.defaultValue
   };
   const context = {
     ...initialContext,
-    value: props.value
+    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);

package/accordion/use-accordion.d.ts

@@ -1,7 +1,12 @@
 import * as accordion from '@zag-js/accordion';
+import { type PropTypes } from '@zag-js/react';
 import { type Optional } from '../types';
 export interface UseAccordionProps extends Optional<accordion.Context, 'id'> {
+    /**
+     * The initial value of the accordion.
+     */
     defaultValue?: accordion.Context['value'];
 }
-export type UseAccordionReturn = accordion.Api;
-export declare const useAccordion: (props: UseAccordionProps) => UseAccordionReturn;
+export interface UseAccordionReturn extends accordion.Api<PropTypes> {
+}
+export declare const useAccordion: (props?: UseAccordionProps) => UseAccordionReturn;

package/accordion/use-accordion.mjs

@@ -3,19 +3,21 @@ import * as accordion from '@zag-js/accordion';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
 import '../environment/index.mjs';
+import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
-const useAccordion = (props) => {
-  const getRootNode = useEnvironmentContext();
+const useAccordion = (props = {}) => {
   const initialContext = {
     id: useId(),
-    getRootNode,
+    getRootNode: useEnvironmentContext(),
     ...props,
     value: props.defaultValue
   };
   const context = {
     ...initialContext,
-    value: props.value
+    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);

package/avatar/avatar-context.d.ts

@@ -1,5 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseAvatarReturn } from './use-avatar';
-export type AvatarContext = UseAvatarReturn;
-export declare const AvatarProvider: Provider<UseAvatarReturn>, useAvatarContext: () => UseAvatarReturn;
+export interface AvatarContext extends UseAvatarReturn {
+}
+export declare const AvatarProvider: Provider<AvatarContext>, useAvatarContext: () => AvatarContext;

package/avatar/avatar-fallback.cjs

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

package/avatar/avatar-fallback.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type AvatarFallbackProps = HTMLArkProps<'span'>;
-export declare const AvatarFallback: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLSpanElement>>;
+export interface AvatarFallbackProps extends HTMLArkProps<'span'> {
+}
+export declare const AvatarFallback: ForwardRefExoticComponent<AvatarFallbackProps & RefAttributes<HTMLSpanElement>>;

package/avatar/avatar-fallback.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useAvatarContext } from './avatar-context.mjs';
 
 const AvatarFallback = forwardRef((props, ref) => {
-  const { fallbackProps } = useAvatarContext();
-  const mergedProps = mergeProps(fallbackProps, props);
+  const api = useAvatarContext();
+  const mergedProps = mergeProps(api.fallbackProps, props);
   return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
 });
 AvatarFallback.displayName = "AvatarFallback";

package/avatar/avatar-image.cjs

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

package/avatar/avatar-image.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ImgHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type AvatarImageProps = HTMLArkProps<'img'>;
-export declare const AvatarImage: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLImageElement>>;
+export interface AvatarImageProps extends HTMLArkProps<'img'> {
+}
+export declare const AvatarImage: ForwardRefExoticComponent<AvatarImageProps & RefAttributes<HTMLImageElement>>;

package/avatar/avatar-image.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useAvatarContext } from './avatar-context.mjs';
 
 const AvatarImage = forwardRef((props, ref) => {
-  const { imageProps } = useAvatarContext();
-  const mergedProps = mergeProps(imageProps, props);
+  const api = useAvatarContext();
+  const mergedProps = mergeProps(api.imageProps, props);
   return /* @__PURE__ */ jsx(ark.img, { ...mergedProps, ref });
 });
 AvatarImage.displayName = "AvatarImage";

package/avatar/avatar.cjs

@@ -13,14 +13,14 @@ const useAvatar = require('./use-avatar.cjs');
 
 const Avatar = react.forwardRef((props, ref) => {
   const [useAvatarProps, localProps] = createSplitProps.createSplitProps()(props, [
+    "dir",
     "getRootNode",
     "id",
-    "onError",
-    "onLoad"
+    "onLoadingStatusChange"
   ]);
-  const avatar = useAvatar.useAvatar(useAvatarProps);
-  const mergedProps = react$1.mergeProps(avatar.rootProps, localProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(avatarContext.AvatarProvider, { value: avatar, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+  const api = useAvatar.useAvatar(useAvatarProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(avatarContext.AvatarProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
 Avatar.displayName = "Avatar";