@ark-ui/react 1.3.0 → 2.0.1

package/CHANGELOG.md

@@ -6,6 +6,56 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [2.0.1] - 2024-01-30
+
+### Fixed
+
+- Resolved an issue that for some components the types were not being generated correctly.
+
+## [2.0.0] - 2024-01-30
+
+### Added
+
+- Added `TreeView` component
+- Updated `@zag-js` dependencies to their latest versions, enhancing performance for all components.
+
+### Changed
+
+- **Breaking Change**: Renamed the root types for all components to `<ComponentName>RootProps`. Like shown for the `Avatar` component below:
+
+```diff
+- import type { AvatarProps } from "@ark-ui/react"
++ import type { AvatarRootProps } from "@ark-ui/react"
+```
+
+- **Breaking Change**: Removed the `.Root` suffix for provider component like `Presence` and `Environment`.
+
+```diff
+- <Presence.Root>...</Presence.Root>
++ <Presence>...</Presence>
+```
+
+- **Breaking Change**: Renamed the `indicator` part to `view` in the `Progress` component to more accurately reflect its functionality.
+
+- Added the `ItemPreview` component to the `TagsInput` component. See the example below:
+
+```diff
+<TagsInput.Item key={index} index={index} value={value}>
++  <TagsInput.ItemPreview>
+    <TagsInput.ItemText>{value}</TagsInput.ItemText>
+    <TagsInput.ItemDeleteTrigger>Delete</TagsInput.ItemDeleteTrigger>
++ </TagsInput.ItemPreview>
+  <TagsInput.ItemInput />
+</TagsInput.Item>
+```
+
+- Refactored the `Progress` component to use `div` elements instead of `nav` for semantic correctness.
+
+### Fixed
+
+- Fixed an issue on touch devices where selecting an item within `Combobox`, `Menu`, or `Select` triggered a click event on the element behind the portalled content.
+- Fixed an issue in `PinInput` where pasting a value filled all inputs instead of populating them one per input.
+
 ## [1.3.0] - 2024-01-17
 
 ### Added
@@ -345,3 +395,11 @@ With the release of version 1.0.0, we are moving towards a more stable version o
 ```
 
 ```
+
+```
+
+```
+
+```
+
+```

package/README.md

@@ -42,6 +42,7 @@ Ark UI is available for the following JavaScript frameworks:
 - [Toast](https://ark-ui.com/docs/components/toast)
 - [Toggle Group](https://ark-ui.com/docs/components/toggle-group)
 - [Tooltip](https://ark-ui.com/docs/components/tooltip)
+- [Tree View](https://ark-ui.com/docs/components/tree-view)
 
 ## Installation
 

package/accordion/accordion-item-content.cjs

@@ -7,10 +7,9 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
-const presenceContext = require('../presence/presence-context.cjs');
 
 const AccordionItemContent = react.forwardRef(
   (props, ref) => {

package/accordion/accordion-item-content.mjs

@@ -3,10 +3,9 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 import { useAccordionContext } from './accordion-context.mjs';
 import { useAccordionItemContext } from './accordion-item-context.mjs';
-import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const AccordionItemContent = forwardRef(
   (props, ref) => {

package/accordion/accordion-item-trigger.cjs

@@ -7,10 +7,9 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
-const presenceContext = require('../presence/presence-context.cjs');
 
 const AccordionItemTrigger = react.forwardRef(
   (props, ref) => {

package/accordion/accordion-item-trigger.mjs

@@ -3,10 +3,9 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 import { useAccordionContext } from './accordion-context.mjs';
 import { useAccordionItemContext } from './accordion-item-context.mjs';
-import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const AccordionItemTrigger = forwardRef(
   (props, ref) => {

package/accordion/accordion-item.cjs

@@ -8,13 +8,12 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
+const presencePropsContext = require('../presence/presence-props-context.cjs');
+const usePresence = require('../presence/use-presence.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
-const presencePropsContext = require('../presence/presence-props-context.cjs');
-const usePresence = require('../presence/use-presence.cjs');
-const presenceContext = require('../presence/presence-context.cjs');
 
 const AccordionItem = react.forwardRef((props, ref) => {
   const [itemProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, [

package/accordion/accordion-item.mjs

@@ -4,13 +4,12 @@ import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
+import { PresenceProvider } from '../presence/presence-context.mjs';
+import { usePresencePropsContext } from '../presence/presence-props-context.mjs';
+import { usePresence } from '../presence/use-presence.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { useAccordionContext } from './accordion-context.mjs';
 import { AccordionItemProvider } from './accordion-item-context.mjs';
-import { usePresencePropsContext } from '../presence/presence-props-context.mjs';
-import { usePresence } from '../presence/use-presence.mjs';
-import { PresenceProvider } from '../presence/presence-context.mjs';
 
 const AccordionItem = forwardRef((props, ref) => {
   const [itemProps, { children, ...localProps }] = createSplitProps()(props, [

package/accordion/accordion-root.cjs

@@ -0,0 +1,38 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const presencePropsContext = require('../presence/presence-props-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const accordionContext = require('./accordion-context.cjs');
+const useAccordion = require('./use-accordion.cjs');
+
+const AccordionRoot = react.forwardRef((props, ref) => {
+  const [presenceProps, accordionProps] = splitPresenceProps.splitPresenceProps(props);
+  const [useAccordionProps, localProps] = createSplitProps.createSplitProps()(accordionProps, [
+    "collapsible",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "getRootNode",
+    "id",
+    "ids",
+    "multiple",
+    "onFocusChange",
+    "onValueChange",
+    "orientation",
+    "value"
+  ]);
+  const api = useAccordion.useAccordion(useAccordionProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(accordionContext.AccordionProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presencePropsContext.PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
+});
+AccordionRoot.displayName = "AccordionRoot";
+
+exports.AccordionRoot = AccordionRoot;

package/accordion/accordion-root.d.ts

@@ -0,0 +1,9 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+import { type UsePresenceProps } from '../presence';
+import type { Assign } from '../types';
+import { type UseAccordionProps } from './use-accordion';
+export interface AccordionRootProps extends Assign<HTMLArkProps<'div'>, UseAccordionProps>, UsePresenceProps {
+}
+export declare const AccordionRoot: ForwardRefExoticComponent<AccordionRootProps & RefAttributes<HTMLDivElement>>;

package/accordion/accordion-root.mjs

@@ -0,0 +1,34 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { PresencePropsProvider } from '../presence/presence-props-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { AccordionProvider } from './accordion-context.mjs';
+import { useAccordion } from './use-accordion.mjs';
+
+const AccordionRoot = forwardRef((props, ref) => {
+  const [presenceProps, accordionProps] = splitPresenceProps(props);
+  const [useAccordionProps, localProps] = createSplitProps()(accordionProps, [
+    "collapsible",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "getRootNode",
+    "id",
+    "ids",
+    "multiple",
+    "onFocusChange",
+    "onValueChange",
+    "orientation",
+    "value"
+  ]);
+  const api = useAccordion(useAccordionProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsx(AccordionProvider, { value: api, children: /* @__PURE__ */ jsx(PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
+});
+AccordionRoot.displayName = "AccordionRoot";
+
+export { AccordionRoot };

package/accordion/accordion.cjs

@@ -1,39 +1,17 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const jsxRuntime = require('react/jsx-runtime');
-const react$1 = require('@zag-js/react');
-const react = require('react');
-const createSplitProps = require('../create-split-props.cjs');
-const factory = require('../factory.cjs');
-require('../presence/index.cjs');
-const accordionContext = require('./accordion-context.cjs');
-const useAccordion = require('./use-accordion.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
-const presencePropsContext = require('../presence/presence-props-context.cjs');
+const accordionItem = require('./accordion-item.cjs');
+const accordionItemContent = require('./accordion-item-content.cjs');
+const accordionItemIndicator = require('./accordion-item-indicator.cjs');
+const accordionItemTrigger = require('./accordion-item-trigger.cjs');
+const accordionRoot = require('./accordion-root.cjs');
 
-const Accordion = react.forwardRef((props, ref) => {
-  const [presenceProps, accordionProps] = splitPresenceProps.splitPresenceProps(props);
-  const [useAccordionProps, localProps] = createSplitProps.createSplitProps()(accordionProps, [
-    "collapsible",
-    "defaultValue",
-    "dir",
-    "disabled",
-    "getRootNode",
-    "id",
-    "ids",
-    "multiple",
-    "onFocusChange",
-    "onValueChange",
-    "orientation",
-    "value"
-  ]);
-  const api = useAccordion.useAccordion(useAccordionProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(accordionContext.AccordionProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presencePropsContext.PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
-});
-Accordion.displayName = "Accordion";
 
-exports.Accordion = Accordion;
+
+exports.Item = accordionItem.AccordionItem;
+exports.ItemContent = accordionItemContent.AccordionItemContent;
+exports.ItemIndicator = accordionItemIndicator.AccordionItemIndicator;
+exports.ItemTrigger = accordionItemTrigger.AccordionItemTrigger;
+exports.Root = accordionRoot.AccordionRoot;

package/accordion/accordion.d.ts

@@ -1,9 +1,6 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
-import { type HTMLArkProps } from '../factory';
-import { type UsePresenceProps } from '../presence';
-import type { Assign } from '../types';
-import { type UseAccordionProps } from './use-accordion';
-export interface AccordionProps extends Assign<HTMLArkProps<'div'>, UseAccordionProps>, UsePresenceProps {
-}
-export declare const Accordion: ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>>;
+import { AccordionItem as Item } from './accordion-item';
+import { AccordionItemContent as ItemContent } from './accordion-item-content';
+import { AccordionItemIndicator as ItemIndicator } from './accordion-item-indicator';
+import { AccordionItemTrigger as ItemTrigger } from './accordion-item-trigger';
+import { AccordionRoot as Root } from './accordion-root';
+export { Item, ItemContent, ItemIndicator, ItemTrigger, Root };

package/accordion/accordion.mjs

@@ -1,35 +1,5 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { mergeProps } from '@zag-js/react';
-import { forwardRef } from 'react';
-import { createSplitProps } from '../create-split-props.mjs';
-import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
-import { AccordionProvider } from './accordion-context.mjs';
-import { useAccordion } from './use-accordion.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
-import { PresencePropsProvider } from '../presence/presence-props-context.mjs';
-
-const Accordion = forwardRef((props, ref) => {
-  const [presenceProps, accordionProps] = splitPresenceProps(props);
-  const [useAccordionProps, localProps] = createSplitProps()(accordionProps, [
-    "collapsible",
-    "defaultValue",
-    "dir",
-    "disabled",
-    "getRootNode",
-    "id",
-    "ids",
-    "multiple",
-    "onFocusChange",
-    "onValueChange",
-    "orientation",
-    "value"
-  ]);
-  const api = useAccordion(useAccordionProps);
-  const mergedProps = mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsx(AccordionProvider, { value: api, children: /* @__PURE__ */ jsx(PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
-});
-Accordion.displayName = "Accordion";
-
-export { Accordion };
+export { AccordionItem as Item } from './accordion-item.mjs';
+export { AccordionItemContent as ItemContent } from './accordion-item-content.mjs';
+export { AccordionItemIndicator as ItemIndicator } from './accordion-item-indicator.mjs';
+export { AccordionItemTrigger as ItemTrigger } from './accordion-item-trigger.mjs';
+export { AccordionRoot as Root } from './accordion-root.mjs';

package/accordion/index.cjs

@@ -1,23 +1,17 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-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 accordionItemIndicator = require('./accordion-item-indicator.cjs');
 const accordionItemTrigger = require('./accordion-item-trigger.cjs');
+const accordionRoot = require('./accordion-root.cjs');
+const accordion = require('./accordion.cjs');
+
 
-const Accordion = Object.assign(accordion.Accordion, {
-  Root: accordion.Accordion,
-  Item: accordionItem.AccordionItem,
-  ItemContent: accordionItemContent.AccordionItemContent,
-  ItemIndicator: accordionItemIndicator.AccordionItemIndicator,
-  ItemTrigger: accordionItemTrigger.AccordionItemTrigger
-});
 
 exports.useAccordionContext = accordionContext.useAccordionContext;
 exports.AccordionItem = accordionItem.AccordionItem;
@@ -25,4 +19,5 @@ exports.AccordionItemContent = accordionItemContent.AccordionItemContent;
 exports.useAccordionItemContext = accordionItemContext.useAccordionItemContext;
 exports.AccordionItemIndicator = accordionItemIndicator.AccordionItemIndicator;
 exports.AccordionItemTrigger = accordionItemTrigger.AccordionItemTrigger;
-exports.Accordion = Accordion;
+exports.AccordionRoot = accordionRoot.AccordionRoot;
+exports.Accordion = accordion;

package/accordion/index.d.ts

@@ -1,19 +1,11 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
 import type { FocusChangeDetails as AccordionFocusChangeDetails, ValueChangeDetails as AccordionValueChangeDetails } from '@zag-js/accordion';
-import { type AccordionProps } from './accordion';
 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 { 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, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, useAccordionContext, useAccordionItemContext, };
-export type { AccordionContext, AccordionFocusChangeDetails, AccordionItemContentProps, AccordionItemContext, AccordionItemIndicatorProps, AccordionItemProps, AccordionItemTriggerProps, AccordionProps, AccordionValueChangeDetails, };
+import { AccordionRoot, type AccordionRootProps } from './accordion-root';
+export * as Accordion from './accordion';
+export { AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, useAccordionContext, useAccordionItemContext, };
+export type { AccordionContext, AccordionFocusChangeDetails, AccordionItemContentProps, AccordionItemContext, AccordionItemIndicatorProps, AccordionItemProps, AccordionItemTriggerProps, AccordionRootProps, AccordionValueChangeDetails, };

package/accordion/index.mjs

@@ -1,18 +1,9 @@
-'use client';
-import { Accordion as Accordion$1 } from './accordion.mjs';
 export { useAccordionContext } from './accordion-context.mjs';
-import { AccordionItem } from './accordion-item.mjs';
-import { AccordionItemContent } from './accordion-item-content.mjs';
+export { AccordionItem } from './accordion-item.mjs';
+export { AccordionItemContent } from './accordion-item-content.mjs';
 export { useAccordionItemContext } from './accordion-item-context.mjs';
-import { AccordionItemIndicator } from './accordion-item-indicator.mjs';
-import { AccordionItemTrigger } from './accordion-item-trigger.mjs';
-
-const Accordion = Object.assign(Accordion$1, {
-  Root: Accordion$1,
-  Item: AccordionItem,
-  ItemContent: AccordionItemContent,
-  ItemIndicator: AccordionItemIndicator,
-  ItemTrigger: AccordionItemTrigger
-});
-
-export { Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger };
+export { AccordionItemIndicator } from './accordion-item-indicator.mjs';
+export { AccordionItemTrigger } from './accordion-item-trigger.mjs';
+export { AccordionRoot } from './accordion-root.mjs';
+import * as accordion from './accordion.mjs';
+export { accordion as Accordion };

package/accordion/use-accordion.cjs

@@ -6,9 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 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');
+const useEvent = require('../use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/accordion/use-accordion.mjs

@@ -2,9 +2,8 @@
 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';
+import { useEvent } from '../use-event.mjs';
 
 const useAccordion = (props = {}) => {
   const initialContext = {

package/avatar/avatar-root.cjs

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const avatarContext = require('./avatar-context.cjs');
+const useAvatar = require('./use-avatar.cjs');
+
+const AvatarRoot = react.forwardRef((props, ref) => {
+  const [useAvatarProps, localProps] = createSplitProps.createSplitProps()(props, [
+    "dir",
+    "getRootNode",
+    "id",
+    "onLoadingStatusChange"
+  ]);
+  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 }) });
+});
+AvatarRoot.displayName = "AvatarRoot";
+
+exports.AvatarRoot = AvatarRoot;

package/avatar/avatar-root.d.ts

@@ -0,0 +1,8 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+import { type Assign } from '../types';
+import { type UseAvatarProps } from './use-avatar';
+export interface AvatarRootProps extends Assign<HTMLArkProps<'div'>, UseAvatarProps> {
+}
+export declare const AvatarRoot: ForwardRefExoticComponent<AvatarRootProps & RefAttributes<HTMLDivElement>>;

package/avatar/avatar-root.mjs

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { AvatarProvider } from './avatar-context.mjs';
+import { useAvatar } from './use-avatar.mjs';
+
+const AvatarRoot = forwardRef((props, ref) => {
+  const [useAvatarProps, localProps] = createSplitProps()(props, [
+    "dir",
+    "getRootNode",
+    "id",
+    "onLoadingStatusChange"
+  ]);
+  const api = useAvatar(useAvatarProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsx(AvatarProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+});
+AvatarRoot.displayName = "AvatarRoot";
+
+export { AvatarRoot };

package/avatar/avatar.cjs

@@ -1,27 +1,13 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const jsxRuntime = require('react/jsx-runtime');
-const react$1 = require('@zag-js/react');
-const react = require('react');
-const createSplitProps = require('../create-split-props.cjs');
-const factory = require('../factory.cjs');
-const avatarContext = require('./avatar-context.cjs');
-const useAvatar = require('./use-avatar.cjs');
+const avatarFallback = require('./avatar-fallback.cjs');
+const avatarImage = require('./avatar-image.cjs');
+const avatarRoot = require('./avatar-root.cjs');
 
-const Avatar = react.forwardRef((props, ref) => {
-  const [useAvatarProps, localProps] = createSplitProps.createSplitProps()(props, [
-    "dir",
-    "getRootNode",
-    "id",
-    "onLoadingStatusChange"
-  ]);
-  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";
 
-exports.Avatar = Avatar;
+
+exports.Fallback = avatarFallback.AvatarFallback;
+exports.Image = avatarImage.AvatarImage;
+exports.Root = avatarRoot.AvatarRoot;

package/avatar/avatar.d.ts

@@ -1,8 +1,4 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
-import { type HTMLArkProps } from '../factory';
-import { type Assign } from '../types';
-import { type UseAvatarProps } from './use-avatar';
-export interface AvatarProps extends Assign<HTMLArkProps<'div'>, UseAvatarProps> {
-}
-export declare const Avatar: ForwardRefExoticComponent<AvatarProps & RefAttributes<HTMLDivElement>>;
+import { AvatarFallback as Fallback } from './avatar-fallback';
+import { AvatarImage as Image } from './avatar-image';
+import { AvatarRoot as Root } from './avatar-root';
+export { Fallback, Image, Root };

package/avatar/avatar.mjs

@@ -1,23 +1,3 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { mergeProps } from '@zag-js/react';
-import { forwardRef } from 'react';
-import { createSplitProps } from '../create-split-props.mjs';
-import { ark } from '../factory.mjs';
-import { AvatarProvider } from './avatar-context.mjs';
-import { useAvatar } from './use-avatar.mjs';
-
-const Avatar = forwardRef((props, ref) => {
-  const [useAvatarProps, localProps] = createSplitProps()(props, [
-    "dir",
-    "getRootNode",
-    "id",
-    "onLoadingStatusChange"
-  ]);
-  const api = useAvatar(useAvatarProps);
-  const mergedProps = mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsx(AvatarProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
-});
-Avatar.displayName = "Avatar";
-
-export { Avatar };
+export { AvatarFallback as Fallback } from './avatar-fallback.mjs';
+export { AvatarImage as Image } from './avatar-image.mjs';
+export { AvatarRoot as Root } from './avatar-root.mjs';

package/avatar/index.cjs

@@ -1,20 +1,17 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const avatar = require('./avatar.cjs');
 const avatarContext = require('./avatar-context.cjs');
 const avatarFallback = require('./avatar-fallback.cjs');
 const avatarImage = require('./avatar-image.cjs');
+const avatarRoot = require('./avatar-root.cjs');
+const avatar = require('./avatar.cjs');
+
 
-const Avatar = Object.assign(avatar.Avatar, {
-  Root: avatar.Avatar,
-  Fallback: avatarFallback.AvatarFallback,
-  Image: avatarImage.AvatarImage
-});
 
 exports.useAvatarContext = avatarContext.useAvatarContext;
 exports.AvatarFallback = avatarFallback.AvatarFallback;
 exports.AvatarImage = avatarImage.AvatarImage;
-exports.Avatar = Avatar;
+exports.AvatarRoot = avatarRoot.AvatarRoot;
+exports.Avatar = avatar;