@ark-ui/react 1.2.1 → 2.0.0

package/CHANGELOG.md

@@ -6,6 +6,73 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [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
+
+- Added the `Progress` component.
+- Added `valueAsString` to `onValueChange` in `DatePicker` callback details
+- Exported change details typings, for example `AccordionValueChangeDetails` or `DialogOpenChangeDetails`
+- Redesign `Portal` component to support `getRootNode` and `disabled` props
+
+### Changed
+
+- Replaced the styling props for indicator with CSS variables in `RadioGroup`, `SegmentGroup`, and `Tabs`.
+
+### Fixed
+
+- Added missing `placeholder` prop to `SelectValueTextProps` type.
+- Changed `PopoverDescriptionProps` type from `div` to `p`
+- Fixed multiple rerenders on `Select` component with Next.js or Remix `useSearchParams`
+- Fixed the issue where setting `disabled` on `Combobox` does not reflect in combobox item
+- Fix an issue that breaks the `Combobox` when clicking on the input while the menu is open
+- Fixed the issue where `DatePicker` initial value isn't set when using controlled context
+- Resolved an issue that `Menu` option item could not be activated by keyboard
+
 ## [1.2.1] - 2023-12-13
 
 ### Fixed
@@ -17,7 +84,7 @@ description: All notable changes to this project will be documented in this file
 ### Added
 
 - Added the `ToastGroup` component.
-- Added entrypoint for the  `ark` factory at `@ark-ui/react/factory`
+- Added entrypoint for the `ark` factory at `@ark-ui/react/factory`
 
 ### Changed
 
@@ -322,3 +389,11 @@ With the release of version 1.0.0, we are moving towards a more stable version o
 ```
 
 ```
+
+```
+
+```
+
+```
+
+```

package/README.md

@@ -28,6 +28,7 @@ Ark UI is available for the following JavaScript frameworks:
 - [Pagination](https://ark-ui.com/docs/components/pagination)
 - [Pin Input](https://ark-ui.com/docs/components/pin-input)
 - [Popover](https://ark-ui.com/docs/components/popover)
+- [Progress](https://ark-ui.com/docs/components/progress)
 - [Radio Group](https://ark-ui.com/docs/components/radio-group)
 - [Range Slider](https://ark-ui.com/docs/components/slider)
 - [Rating Group](https://ark-ui.com/docs/components/rating-group)
@@ -41,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.cjs → accordion-root.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 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 splitPresenceProps = require('../presence/split-presence-props.cjs');
-const presencePropsContext = require('../presence/presence-props-context.cjs');
 
-const Accordion = react.forwardRef((props, ref) => {
+const AccordionRoot = react.forwardRef((props, ref) => {
   const [presenceProps, accordionProps] = splitPresenceProps.splitPresenceProps(props);
   const [useAccordionProps, localProps] = createSplitProps.createSplitProps()(accordionProps, [
     "collapsible",
@@ -34,6 +33,6 @@ const Accordion = react.forwardRef((props, ref) => {
   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";
+AccordionRoot.displayName = "AccordionRoot";
 
-exports.Accordion = Accordion;
+exports.AccordionRoot = AccordionRoot;

package/accordion/{accordion.d.ts → accordion-root.d.ts}

@@ -4,6 +4,6 @@ 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 interface AccordionRootProps extends Assign<HTMLArkProps<'div'>, UseAccordionProps>, UsePresenceProps {
 }
-export declare const Accordion: ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>>;
+export declare const AccordionRoot: ForwardRefExoticComponent<AccordionRootProps & RefAttributes<HTMLDivElement>>;

package/accordion/{accordion.mjs → accordion-root.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 { 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';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
-import { PresencePropsProvider } from '../presence/presence-props-context.mjs';
 
-const Accordion = forwardRef((props, ref) => {
+const AccordionRoot = forwardRef((props, ref) => {
   const [presenceProps, accordionProps] = splitPresenceProps(props);
   const [useAccordionProps, localProps] = createSplitProps()(accordionProps, [
     "collapsible",
@@ -30,6 +29,6 @@ const Accordion = forwardRef((props, ref) => {
   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";
+AccordionRoot.displayName = "AccordionRoot";
 
-export { Accordion };
+export { AccordionRoot };

package/accordion/index.cjs

@@ -3,21 +3,21 @@
 
 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 = Object.assign(accordion.Accordion, {
-  Root: accordion.Accordion,
+const Accordion = {
+  Root: accordionRoot.AccordionRoot,
   Item: accordionItem.AccordionItem,
   ItemContent: accordionItemContent.AccordionItemContent,
   ItemIndicator: accordionItemIndicator.AccordionItemIndicator,
   ItemTrigger: accordionItemTrigger.AccordionItemTrigger
-});
+};
 
 exports.useAccordionContext = accordionContext.useAccordionContext;
 exports.AccordionItem = accordionItem.AccordionItem;
@@ -25,4 +25,5 @@ exports.AccordionItemContent = accordionItemContent.AccordionItemContent;
 exports.useAccordionItemContext = accordionItemContext.useAccordionItemContext;
 exports.AccordionItemIndicator = accordionItemIndicator.AccordionItemIndicator;
 exports.AccordionItemTrigger = accordionItemTrigger.AccordionItemTrigger;
+exports.AccordionRoot = accordionRoot.AccordionRoot;
 exports.Accordion = Accordion;

package/accordion/index.d.ts

@@ -1,18 +1,19 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import { type AccordionProps } from './accordion';
+import type { FocusChangeDetails as AccordionFocusChangeDetails, ValueChangeDetails as AccordionValueChangeDetails } from '@zag-js/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>>;
+import { AccordionRoot, type AccordionRootProps } from './accordion-root';
+export declare const Accordion: {
+    Root: ForwardRefExoticComponent<AccordionRootProps & 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, AccordionItemContentProps, AccordionItemContext, AccordionItemIndicatorProps, AccordionItemProps, AccordionItemTriggerProps, AccordionProps, };
+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,18 @@
 '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 { useAccordionItemContext } from './accordion-item-context.mjs';
 import { AccordionItemIndicator } from './accordion-item-indicator.mjs';
 import { AccordionItemTrigger } from './accordion-item-trigger.mjs';
+import { AccordionRoot } from './accordion-root.mjs';
 
-const Accordion = Object.assign(Accordion$1, {
-  Root: Accordion$1,
+const Accordion = {
+  Root: AccordionRoot,
   Item: AccordionItem,
   ItemContent: AccordionItemContent,
   ItemIndicator: AccordionItemIndicator,
   ItemTrigger: AccordionItemTrigger
-});
+};
 
-export { Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger };
+export { Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot };

package/accordion/{accordion.stories.d.ts → stories/accordion.stories.d.ts}

@@ -1,8 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Accordion } from './';
-type AccordionType = typeof Accordion;
-declare const meta: Meta<AccordionType>;
+declare const meta: Meta;
 export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const RenderProp: () => JSX.Element;

package/accordion/stories/icons.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react/jsx-runtime';
+declare const ChevronDownIcon: () => JSX.Element;
+export { ChevronDownIcon };

package/accordion/tests/basic.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react/jsx-runtime';
+import { type AccordionRootProps } from '../';
+export declare const ComponentUnderTest: (props: AccordionRootProps) => JSX.Element;

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.cjs → avatar-root.cjs}

@@ -11,7 +11,7 @@ const factory = require('../factory.cjs');
 const avatarContext = require('./avatar-context.cjs');
 const useAvatar = require('./use-avatar.cjs');
 
-const Avatar = react.forwardRef((props, ref) => {
+const AvatarRoot = react.forwardRef((props, ref) => {
   const [useAvatarProps, localProps] = createSplitProps.createSplitProps()(props, [
     "dir",
     "getRootNode",
@@ -22,6 +22,6 @@ const Avatar = react.forwardRef((props, ref) => {
   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";
+AvatarRoot.displayName = "AvatarRoot";
 
-exports.Avatar = Avatar;
+exports.AvatarRoot = AvatarRoot;

package/avatar/{avatar.d.ts → avatar-root.d.ts}

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from '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 interface AvatarRootProps extends Assign<HTMLArkProps<'div'>, UseAvatarProps> {
 }
-export declare const Avatar: ForwardRefExoticComponent<AvatarProps & RefAttributes<HTMLDivElement>>;
+export declare const AvatarRoot: ForwardRefExoticComponent<AvatarRootProps & RefAttributes<HTMLDivElement>>;

package/avatar/{avatar.mjs → avatar-root.mjs}

@@ -7,7 +7,7 @@ import { ark } from '../factory.mjs';
 import { AvatarProvider } from './avatar-context.mjs';
 import { useAvatar } from './use-avatar.mjs';
 
-const Avatar = forwardRef((props, ref) => {
+const AvatarRoot = forwardRef((props, ref) => {
   const [useAvatarProps, localProps] = createSplitProps()(props, [
     "dir",
     "getRootNode",
@@ -18,6 +18,6 @@ const Avatar = forwardRef((props, ref) => {
   const mergedProps = mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsx(AvatarProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
-Avatar.displayName = "Avatar";
+AvatarRoot.displayName = "AvatarRoot";
 
-export { Avatar };
+export { AvatarRoot };

package/avatar/index.cjs

@@ -3,18 +3,19 @@
 
 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 = Object.assign(avatar.Avatar, {
-  Root: avatar.Avatar,
+const Avatar = {
+  Root: avatarRoot.AvatarRoot,
   Fallback: avatarFallback.AvatarFallback,
   Image: avatarImage.AvatarImage
-});
+};
 
 exports.useAvatarContext = avatarContext.useAvatarContext;
 exports.AvatarFallback = avatarFallback.AvatarFallback;
 exports.AvatarImage = avatarImage.AvatarImage;
+exports.AvatarRoot = avatarRoot.AvatarRoot;
 exports.Avatar = Avatar;

package/avatar/index.d.ts

@@ -1,13 +1,14 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import { type AvatarProps } from './avatar';
+import type { StatusChangeDetails as AvatarStatusChangeDetails } from '@zag-js/avatar';
 import { useAvatarContext, type AvatarContext } from './avatar-context';
 import { AvatarFallback, type AvatarFallbackProps } from './avatar-fallback';
 import { AvatarImage, type AvatarImageProps } from './avatar-image';
-declare const Avatar: ForwardRefExoticComponent<AvatarProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<AvatarProps & RefAttributes<HTMLDivElement>>;
+import { AvatarRoot, type AvatarRootProps } from './avatar-root';
+export declare const Avatar: {
+    Root: ForwardRefExoticComponent<AvatarRootProps & RefAttributes<HTMLDivElement>>;
     Fallback: ForwardRefExoticComponent<AvatarFallbackProps & RefAttributes<HTMLSpanElement>>;
     Image: ForwardRefExoticComponent<AvatarImageProps & RefAttributes<HTMLImageElement>>;
 };
-export { Avatar, AvatarFallback, AvatarImage, useAvatarContext };
-export type { AvatarContext, AvatarFallbackProps, AvatarImageProps, AvatarProps };
+export { AvatarFallback, AvatarImage, AvatarRoot, useAvatarContext };
+export type { AvatarContext, AvatarFallbackProps, AvatarImageProps, AvatarRootProps, AvatarStatusChangeDetails, };

package/avatar/index.mjs

@@ -1,13 +1,13 @@
 'use client';
-import { Avatar as Avatar$1 } from './avatar.mjs';
 export { useAvatarContext } from './avatar-context.mjs';
 import { AvatarFallback } from './avatar-fallback.mjs';
 import { AvatarImage } from './avatar-image.mjs';
+import { AvatarRoot } from './avatar-root.mjs';
 
-const Avatar = Object.assign(Avatar$1, {
-  Root: Avatar$1,
+const Avatar = {
+  Root: AvatarRoot,
   Fallback: AvatarFallback,
   Image: AvatarImage
-});
+};
 
-export { Avatar, AvatarFallback, AvatarImage };
+export { Avatar, AvatarFallback, AvatarImage, AvatarRoot };

package/avatar/{avatar.stories.d.ts → stories/avatar.stories.d.ts}

@@ -1,8 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Avatar } from './';
-type AvatarType = typeof Avatar.Root;
-declare const meta: Meta<AvatarType>;
+declare const meta: Meta;
 export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const Events: () => JSX.Element;

package/avatar/tests/basic.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react/jsx-runtime';
+import { type AvatarRootProps } from '../';
+export declare const ComponentUnderTest: (props: AvatarRootProps) => JSX.Element;

package/avatar/use-avatar.cjs

@@ -6,9 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const avatar = require('@zag-js/avatar');
 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/avatar/use-avatar.mjs

@@ -2,9 +2,8 @@
 import * as avatar from '@zag-js/avatar';
 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 useAvatar = (props = {}) => {
   const initialContext = {

package/carousel/{carousel.cjs → carousel-root.cjs}

@@ -12,7 +12,7 @@ const runIfFn = require('../run-if-fn.cjs');
 const carouselContext = require('./carousel-context.cjs');
 const useCarousel = require('./use-carousel.cjs');
 
-const Carousel = react.forwardRef((props, ref) => {
+const CarouselRoot = react.forwardRef((props, ref) => {
   const [useCarouselProps, { children, ...divProps }] = createSplitProps.createSplitProps()(
     props,
     [
@@ -35,6 +35,6 @@ const Carousel = react.forwardRef((props, ref) => {
   const view = runIfFn.runIfFn(children, api);
   return /* @__PURE__ */ jsxRuntime.jsx(carouselContext.CarouselProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
 });
-Carousel.displayName = "Carousel";
+CarouselRoot.displayName = "CarouselRoot";
 
-exports.Carousel = Carousel;
+exports.CarouselRoot = CarouselRoot;

package/carousel/{carousel.d.ts → carousel-root.d.ts}

@@ -2,8 +2,8 @@ import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react'
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UseCarouselProps, type UseCarouselReturn } from './use-carousel';
-export interface CarouselProps extends Assign<Assign<HTMLArkProps<'div'>, {
+export interface CarouselRootProps extends Assign<Assign<HTMLArkProps<'div'>, {
     children?: ReactNode | ((api: UseCarouselReturn) => ReactNode);
 }>, UseCarouselProps> {
 }
-export declare const Carousel: ForwardRefExoticComponent<CarouselProps & RefAttributes<HTMLDivElement>>;
+export declare const CarouselRoot: ForwardRefExoticComponent<CarouselRootProps & RefAttributes<HTMLDivElement>>;

package/carousel/{carousel.mjs → carousel-root.mjs}

@@ -8,7 +8,7 @@ import { runIfFn } from '../run-if-fn.mjs';
 import { CarouselProvider } from './carousel-context.mjs';
 import { useCarousel } from './use-carousel.mjs';
 
-const Carousel = forwardRef((props, ref) => {
+const CarouselRoot = forwardRef((props, ref) => {
   const [useCarouselProps, { children, ...divProps }] = createSplitProps()(
     props,
     [
@@ -31,6 +31,6 @@ const Carousel = forwardRef((props, ref) => {
   const view = runIfFn(children, api);
   return /* @__PURE__ */ jsx(CarouselProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
 });
-Carousel.displayName = "Carousel";
+CarouselRoot.displayName = "CarouselRoot";
 
-export { Carousel };
+export { CarouselRoot };