@ark-ui/react 0.8.0-beta.0 → 0.8.1

package/CHANGELOG.md

@@ -0,0 +1,139 @@
+---
+id: changelog
+name: Changelog
+description: All notable changes to this project will be documented in this file. The format is based on Keep a Changelog and this project adheres to and this project adheres to Semantic Versioning.
+---
+
+## [Unreleased]
+
+## [0.8.1] - 2023-07-19
+
+### Fixed
+
+- Resolved an issue that NextJS would throw a false error because of `use client` annotation.
+
+## [0.8.0] - 2023-07-19
+
+### Added
+
+- Enhanced `Carousel` component: Introduced `CarouselIndicator` and `CarouselIndicatorGroup` components. These sub-components offer finer control over the carousel navigation, enabling users to directly access desired carousel slides.
+- Introduced `Presence` component, a new utility designed to delay the unmount of child components to assist with animation processes.
+- Added support to animate the `Dialog`, `Tooltip` and `Popover` elements using the `Presence` component. Check out the documentation for these components to learn more.
+- Expose `use<X>Context` for all components that use context.
+
+## [0.7.3] - 2023-07-10
+
+### Fixed
+
+- Resolved an issue where the `SegmentGroup` component would not animate on the first click.
+- Fixed an issue where standalone imports were not working as expected.
+- Resolved an issue whre the `Toast` component would not render custom content.
+
+## [0.7.2] - 2023-06-30
+
+### Fixed
+
+- Resolved an issue that types accross various components were not being exported correctly.
+
+## [0.7.1] - 2023-06-27
+
+### Added
+
+- Support for standalone component imports: Developers can now import individual components, such as `@ark-ui/react/tabs` instead of the full `@ark-ui/react` package. This is a significant feature for those working with bundlers that do not support tree-shaking. By allowing imports of individual components, we ensure a reduced bundle size when the full package import is not necessary.
+
+## [0.7.0] - 2023-06-23
+
+### Added
+
+- Added `SegmentGroup` component
+
+## [0.6.0] - 2023-06-03
+
+### Added
+
+- Added `Avatar` component
+- Introduced an optional `defaulPage` property to `Pagination`
+- Introduced an optional `defaultSize` property to `Splitter`
+- Introduced the `onLongPress` property to `Pressable`
+
+### Changed
+
+- Exposed direct access to the `Splitter` component's internal API, enabling more control over the component's state
+- Updated all `@zag-js` dependencies to their latest versions
+
+## [0.5.0] - 2023-05-25
+
+### Removed
+
+- Removed `AccordionIcon`
+
+## [0.4.0] - 2023-05-23
+
+### Added
+
+- Add `DatePicker`
+
+### Changed
+
+- Update `Checkbox`. Control `indeterminate` state in `checked` prop
+
+### Fixed
+
+- Fix a typo in the `SwitchProps` type
+
+## [0.3.0] - 2023-05-11
+
+### Added
+
+- Add `Switch`
+- Add support for `asChild`
+
+## [0.2.0] - 2023-04-29
+
+### Added
+
+- Add `ColorPicker`
+
+## [0.1.0] - 2023-04-17
+
+### Added
+
+- Add `Accordion`
+- Add `Carousel`
+- Add `Checkbox`
+- Add `Combobox`
+- Add `DatePicker`
+- Add `Dialog`
+- Add `Editable`
+- Add `HoverCard`
+- Add `Menu`
+- Add `NumberInput`
+- Add `Pagination`
+- Add `PinInput`
+- Add `Popover`
+- Add `Pressable`
+- Add `RadioGroup`
+- Add `RangeSlider`
+- Add `RatingGroup`
+- Add `Select`
+- Add `Slider`
+- Add `Splitter`
+- Add `Tabs`
+- Add `TagsInput`
+- Add `Toast`
+- Add `Tooltip`
+
+[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/react@0.8.1...HEAD
+[0.1.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.1.0
+[0.2.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.2.0
+[0.3.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.3.0
+[0.4.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.4.0
+[0.5.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.5.0
+[0.6.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.6.0
+[0.7.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.7.0
+[0.7.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.7.1
+[0.7.2]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.7.2
+[0.7.3]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.7.3
+[0.8.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.8.0
+
+[0.8.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.8.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Chakra UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -33,6 +33,7 @@ At the moment, `@ark-ui/react`offers the following components:
 - [Radio Group](https://ark-ui.com/docs/react/components/radio-group)
 - [Range Slider](https://ark-ui.com/docs/react/components/range-slider)
 - [Rating Group](https://ark-ui.com/docs/react/components/rating-group)
+- [Segment Group](https://ark-ui.com/docs/react/components/segment-group)
 - [Select](https://ark-ui.com/docs/react/components/select)
 - [Slider](https://ark-ui.com/docs/react/components/slider)
 - [Splitter](https://ark-ui.com/docs/react/components/splitter)

package/accordion/accordion-content.cjs

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

package/accordion/accordion-content.d.ts

@@ -0,0 +1,5 @@
+import type { Assign } from '../types';
+import type { ForwardRefExoticComponent } from 'react';
+import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+export type AccordionContentProps = HTMLArkProps<'div'>;
+export declare const AccordionContent: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, Record<never, never>>>;

package/accordion/accordion-content.mjs

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

package/accordion/accordion-context.cjs

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [AccordionProvider, useAccordionContext] = createContext.createContext({
+  name: "AccordionContext",
+  hookName: "useAccordionContext",
+  providerName: "<AccordionProvider />"
+});
+
+exports.AccordionProvider = AccordionProvider;
+exports.useAccordionContext = useAccordionContext;

package/accordion/accordion-context.d.ts

@@ -0,0 +1,11 @@
+import type { PublicApi } from '@zag-js/accordion';
+import type { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { type UseAccordionReturn } from './use-accordion';
+export type AccordionContext = UseAccordionReturn;
+export declare const AccordionProvider: Provider<PublicApi<JSX.IntrinsicElements & {
+    element: HTMLAttributes<HTMLElement>;
+    style: CSSProperties;
+}>>, useAccordionContext: () => PublicApi<JSX.IntrinsicElements & {
+    element: HTMLAttributes<HTMLElement>;
+    style: CSSProperties;
+}>;

package/accordion/accordion-context.mjs

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../create-context.mjs';
+
+const [AccordionProvider, useAccordionContext] = createContext({
+  name: "AccordionContext",
+  hookName: "useAccordionContext",
+  providerName: "<AccordionProvider />"
+});
+
+export { AccordionProvider, useAccordionContext };

package/accordion/accordion-item-context.cjs

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [AccordionItemProvider, useAccordionItemContext] = createContext.createContext(
+  {
+    name: "AccordionItemContext",
+    hookName: "useAccordionItemContext",
+    providerName: "<AccordionItemProvider />"
+  }
+);
+
+exports.AccordionItemProvider = AccordionItemProvider;
+exports.useAccordionItemContext = useAccordionItemContext;

package/accordion/accordion-item-context.mjs

@@ -0,0 +1,12 @@
+'use client';
+import { createContext } from '../create-context.mjs';
+
+const [AccordionItemProvider, useAccordionItemContext] = createContext(
+  {
+    name: "AccordionItemContext",
+    hookName: "useAccordionItemContext",
+    providerName: "<AccordionItemProvider />"
+  }
+);
+
+export { AccordionItemProvider, useAccordionItemContext };

package/accordion/accordion-item.cjs

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
+const factory = require('../factory.cjs');
+const forwardRef = require('../forward-ref.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const accordionContext = require('./accordion-context.cjs');
+const accordionItemContext = require('./accordion-item-context.cjs');
+
+const AccordionItem = forwardRef.forwardRef((props, ref) => {
+  const { value, disabled, children, ...rest } = props;
+  const { getItemProps, getItemState } = accordionContext.useAccordionContext();
+  const itemState = getItemState({ value });
+  const mergedProps = react.mergeProps(getItemProps({ value, disabled }), rest);
+  const view = runIfFn.runIfFn(children, itemState);
+  return /* @__PURE__ */ jsxRuntime.jsx(accordionItemContext.AccordionItemProvider, { value: { value, disabled, ...itemState }, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+});
+
+exports.AccordionItem = AccordionItem;

package/accordion/accordion-item.d.ts

@@ -0,0 +1,10 @@
+import type { ForwardRefExoticComponent } from 'react';
+import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type AccordionContext } from './accordion-context';
+export type AccordionItemProps = Assign<HTMLArkProps<'div'>, {
+    value: string;
+    disabled?: boolean;
+    children?: React.ReactNode | ((props: ReturnType<AccordionContext['getItemState']>) => React.ReactNode);
+}>;
+export declare const AccordionItem: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, AccordionItemProps>>;

package/accordion/accordion-item.mjs

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { ark } from '../factory.mjs';
+import { forwardRef } from '../forward-ref.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { useAccordionContext } from './accordion-context.mjs';
+import { AccordionItemProvider } from './accordion-item-context.mjs';
+
+const AccordionItem = forwardRef((props, ref) => {
+  const { value, disabled, children, ...rest } = props;
+  const { getItemProps, getItemState } = useAccordionContext();
+  const itemState = getItemState({ value });
+  const mergedProps = mergeProps(getItemProps({ value, disabled }), rest);
+  const view = runIfFn(children, itemState);
+  return /* @__PURE__ */ jsx(AccordionItemProvider, { value: { value, disabled, ...itemState }, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+});
+
+export { AccordionItem };

package/accordion/accordion-trigger.cjs

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
+const factory = require('../factory.cjs');
+const forwardRef = require('../forward-ref.cjs');
+const accordionContext = require('./accordion-context.cjs');
+const accordionItemContext = require('./accordion-item-context.cjs');
+
+const AccordionTrigger = forwardRef.forwardRef((props, ref) => {
+  const { getTriggerProps } = accordionContext.useAccordionContext();
+  const accordionItem = accordionItemContext.useAccordionItemContext();
+  const mergedProps = react.mergeProps(getTriggerProps(accordionItem), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+});
+
+exports.AccordionTrigger = AccordionTrigger;

package/accordion/accordion-trigger.d.ts

@@ -0,0 +1,5 @@
+import type { Assign } from '../types';
+import type { ForwardRefExoticComponent } from 'react';
+import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+export type AccordionTriggerProps = HTMLArkProps<'button'>;
+export declare const AccordionTrigger: ForwardRefExoticComponent<Assign<AsChildComponentProps<"button">, Record<never, never>>>;

package/accordion/accordion-trigger.mjs

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { ark } from '../factory.mjs';
+import { forwardRef } from '../forward-ref.mjs';
+import { useAccordionContext } from './accordion-context.mjs';
+import { useAccordionItemContext } from './accordion-item-context.mjs';
+
+const AccordionTrigger = forwardRef((props, ref) => {
+  const { getTriggerProps } = useAccordionContext();
+  const accordionItem = useAccordionItemContext();
+  const mergedProps = mergeProps(getTriggerProps(accordionItem), props);
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
+
+export { AccordionTrigger };

package/accordion/accordion.cjs

@@ -0,0 +1,33 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const forwardRef = require('../forward-ref.cjs');
+const accordionContext = require('./accordion-context.cjs');
+const useAccordion = require('./use-accordion.cjs');
+
+const Accordion = forwardRef.forwardRef((props, ref) => {
+  const [useAccordionProps, divProps] = createSplitProps.createSplitProps()(props, [
+    "collapsible",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "getRootNode",
+    "id",
+    "ids",
+    "multiple",
+    "onChange",
+    "value",
+    "orientation"
+  ]);
+  const accordion = useAccordion.useAccordion(useAccordionProps);
+  const mergedProps = react.mergeProps(accordion.rootProps, divProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(accordionContext.AccordionProvider, { value: accordion, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+});
+
+exports.Accordion = Accordion;

package/accordion/accordion.d.ts

@@ -0,0 +1,6 @@
+import type { ForwardRefExoticComponent } from 'react';
+import type { AsChildComponentProps, 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<Assign<AsChildComponentProps<"div">, AccordionProps>>;

package/accordion/accordion.mjs

@@ -0,0 +1,29 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { forwardRef } from '../forward-ref.mjs';
+import { AccordionProvider } from './accordion-context.mjs';
+import { useAccordion } from './use-accordion.mjs';
+
+const Accordion = forwardRef((props, ref) => {
+  const [useAccordionProps, divProps] = createSplitProps()(props, [
+    "collapsible",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "getRootNode",
+    "id",
+    "ids",
+    "multiple",
+    "onChange",
+    "value",
+    "orientation"
+  ]);
+  const accordion = useAccordion(useAccordionProps);
+  const mergedProps = mergeProps(accordion.rootProps, divProps);
+  return /* @__PURE__ */ jsx(AccordionProvider, { value: accordion, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+});
+
+export { Accordion };

package/accordion/index.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const accordion = require('./accordion.cjs');
+const accordionContent = require('./accordion-content.cjs');
+const accordionContext = require('./accordion-context.cjs');
+const accordionItem = require('./accordion-item.cjs');
+const accordionItemContext = require('./accordion-item-context.cjs');
+const accordionTrigger = require('./accordion-trigger.cjs');
+const accordion$1 = require('@zag-js/accordion');
+
+
+
+exports.Accordion = accordion.Accordion;
+exports.AccordionContent = accordionContent.AccordionContent;
+exports.useAccordionContext = accordionContext.useAccordionContext;
+exports.AccordionItem = accordionItem.AccordionItem;
+exports.useAccordionItemContext = accordionItemContext.useAccordionItemContext;
+exports.AccordionTrigger = accordionTrigger.AccordionTrigger;
+Object.defineProperty(exports, 'accordionAnatomy', {
+	enumerable: true,
+	get: () => accordion$1.anatomy
+});

package/accordion/index.d.ts

@@ -0,0 +1,7 @@
+export { Accordion, type AccordionProps } from './accordion';
+export { AccordionContent, type AccordionContentProps } from './accordion-content';
+export { useAccordionContext } from './accordion-context';
+export { AccordionItem, type AccordionItemProps } from './accordion-item';
+export { useAccordionItemContext } from './accordion-item-context';
+export { AccordionTrigger, type AccordionTriggerProps } from './accordion-trigger';
+export { accordionAnatomy } from './accordion.anatomy';

package/accordion/index.mjs

@@ -0,0 +1,7 @@
+export { Accordion } from './accordion.mjs';
+export { AccordionContent } from './accordion-content.mjs';
+export { useAccordionContext } from './accordion-context.mjs';
+export { AccordionItem } from './accordion-item.mjs';
+export { useAccordionItemContext } from './accordion-item-context.mjs';
+export { AccordionTrigger } from './accordion-trigger.mjs';
+export { anatomy as accordionAnatomy } from '@zag-js/accordion';

package/accordion/use-accordion.cjs

@@ -0,0 +1,46 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const accordion = require('@zag-js/accordion');
+const react = require('@zag-js/react');
+const React = require('react');
+const environmentContext = require('../environment/environment-context.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const accordion__namespace = /*#__PURE__*/_interopNamespaceDefault(accordion);
+
+const useAccordion = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
+  const initialContext = {
+    id: React.useId(),
+    getRootNode,
+    ...props,
+    value: props.defaultValue
+  };
+  const context = {
+    ...initialContext,
+    value: props.value
+  };
+  const [state, send] = react.useMachine(accordion__namespace.machine(initialContext), { context });
+  return accordion__namespace.connect(state, send, react.normalizeProps);
+};
+
+exports.useAccordion = useAccordion;

package/accordion/use-accordion.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, CSSProperties } from 'react';
+import * as accordion from '@zag-js/accordion';
+import { type Optional } from '../types';
+export type UseAccordionProps = Optional<accordion.Context, 'id'> & {
+    defaultValue?: accordion.Context['value'];
+};
+export type UseAccordionReturn = ReturnType<typeof useAccordion>;
+export declare const useAccordion: (props: UseAccordionProps) => accordion.PublicApi<JSX.IntrinsicElements & {
+    element: HTMLAttributes<HTMLElement>;
+    style: CSSProperties;
+}>;

package/accordion/use-accordion.mjs

@@ -0,0 +1,23 @@
+'use client';
+import * as accordion from '@zag-js/accordion';
+import { useMachine, normalizeProps } from '@zag-js/react';
+import { useId } from 'react';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
+
+const useAccordion = (props) => {
+  const getRootNode = useEnvironmentContext();
+  const initialContext = {
+    id: useId(),
+    getRootNode,
+    ...props,
+    value: props.defaultValue
+  };
+  const context = {
+    ...initialContext,
+    value: props.value
+  };
+  const [state, send] = useMachine(accordion.machine(initialContext), { context });
+  return accordion.connect(state, send, normalizeProps);
+};
+
+export { useAccordion };

package/avatar/avatar-context.cjs

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [AvatarProvider, useAvatarContext] = createContext.createContext({
+  name: "AvatarContext",
+  hookName: "useAvatarContext",
+  providerName: "<AvatarProvider />"
+});
+
+exports.AvatarProvider = AvatarProvider;
+exports.useAvatarContext = useAvatarContext;

package/avatar/avatar-context.d.ts

@@ -0,0 +1,11 @@
+import type { PublicApi } from '@zag-js/avatar';
+import type { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { type UseAvatarReturn } from './use-avatar';
+export type AvatarContext = UseAvatarReturn;
+export declare const AvatarProvider: Provider<PublicApi<JSX.IntrinsicElements & {
+    element: HTMLAttributes<HTMLElement>;
+    style: CSSProperties;
+}>>, useAvatarContext: () => PublicApi<JSX.IntrinsicElements & {
+    element: HTMLAttributes<HTMLElement>;
+    style: CSSProperties;
+}>;

package/avatar/avatar-context.mjs

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../create-context.mjs';
+
+const [AvatarProvider, useAvatarContext] = createContext({
+  name: "AvatarContext",
+  hookName: "useAvatarContext",
+  providerName: "<AvatarProvider />"
+});
+
+export { AvatarProvider, useAvatarContext };

package/avatar/avatar-fallback.cjs

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
+const factory = require('../factory.cjs');
+const forwardRef = require('../forward-ref.cjs');
+const avatarContext = require('./avatar-context.cjs');
+
+const AvatarFallback = forwardRef.forwardRef((props, ref) => {
+  const { fallbackProps } = avatarContext.useAvatarContext();
+  const mergedProps = react.mergeProps(fallbackProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
+});
+
+exports.AvatarFallback = AvatarFallback;