@ark-ui/react 1.3.0 → 2.0.0

package/number-input/index.d.ts

@@ -1,16 +1,16 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import type { FocusChangeDetails as NumberInputFocusChangeDetails, ValueChangeDetails as NumberInputValueChangeDetails, ValueInvalidDetails as NumberInputValueInvalidDetails } from '@zag-js/number-input';
-import { type NumberInputProps } from './number-input';
 import { useNumberInputContext, type NumberInputContext } from './number-input-context';
 import { NumberInputControl, type NumberInputControlProps } from './number-input-control';
 import { NumberInputDecrementTrigger, type NumberInputDecrementTriggerProps } from './number-input-decrement-trigger';
 import { NumberInputIncrementTrigger, type NumberInputIncrementTriggerProps } from './number-input-increment-trigger';
 import { NumberInputInput, type NumberInputInputProps } from './number-input-input';
 import { NumberInputLabel, type NumberInputLabelProps } from './number-input-label';
+import { NumberInputRoot, type NumberInputRootProps } from './number-input-root';
 import { NumberInputScrubber, type NumberInputScrubberProps } from './number-input-scrubber';
-declare const NumberInput: ForwardRefExoticComponent<NumberInputProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<NumberInputProps & RefAttributes<HTMLDivElement>>;
+export declare const NumberInput: {
+    Root: ForwardRefExoticComponent<NumberInputRootProps & RefAttributes<HTMLDivElement>>;
     Control: ForwardRefExoticComponent<NumberInputControlProps & RefAttributes<HTMLDivElement>>;
     DecrementTrigger: ForwardRefExoticComponent<NumberInputDecrementTriggerProps & RefAttributes<HTMLButtonElement>>;
     Input: ForwardRefExoticComponent<NumberInputInputProps & RefAttributes<HTMLInputElement>>;
@@ -18,5 +18,5 @@ declare const NumberInput: ForwardRefExoticComponent<NumberInputProps & RefAttri
     Label: ForwardRefExoticComponent<NumberInputLabelProps & RefAttributes<HTMLLabelElement>>;
     Scrubber: ForwardRefExoticComponent<NumberInputScrubberProps & RefAttributes<HTMLDivElement>>;
 };
-export { NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputScrubber, useNumberInputContext, };
-export type { NumberInputContext, NumberInputControlProps, NumberInputDecrementTriggerProps, NumberInputFocusChangeDetails, NumberInputIncrementTriggerProps, NumberInputInputProps, NumberInputLabelProps, NumberInputProps, NumberInputScrubberProps, NumberInputValueChangeDetails, NumberInputValueInvalidDetails, };
+export { NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputRoot, NumberInputScrubber, useNumberInputContext, };
+export type { NumberInputContext, NumberInputControlProps, NumberInputDecrementTriggerProps, NumberInputFocusChangeDetails, NumberInputIncrementTriggerProps, NumberInputInputProps, NumberInputLabelProps, NumberInputRootProps, NumberInputScrubberProps, NumberInputValueChangeDetails, NumberInputValueInvalidDetails, };

package/number-input/index.mjs

@@ -1,21 +1,21 @@
 'use client';
-import { NumberInput as NumberInput$1 } from './number-input.mjs';
 export { useNumberInputContext } from './number-input-context.mjs';
 import { NumberInputControl } from './number-input-control.mjs';
 import { NumberInputDecrementTrigger } from './number-input-decrement-trigger.mjs';
 import { NumberInputIncrementTrigger } from './number-input-increment-trigger.mjs';
 import { NumberInputInput } from './number-input-input.mjs';
 import { NumberInputLabel } from './number-input-label.mjs';
+import { NumberInputRoot } from './number-input-root.mjs';
 import { NumberInputScrubber } from './number-input-scrubber.mjs';
 
-const NumberInput = Object.assign(NumberInput$1, {
-  Root: NumberInput$1,
+const NumberInput = {
+  Root: NumberInputRoot,
   Control: NumberInputControl,
   DecrementTrigger: NumberInputDecrementTrigger,
   Input: NumberInputInput,
   IncrementTrigger: NumberInputIncrementTrigger,
   Label: NumberInputLabel,
   Scrubber: NumberInputScrubber
-});
+};
 
-export { NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputScrubber };
+export { NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputRoot, NumberInputScrubber };

package/number-input/{number-input.cjs → number-input-root.cjs}

@@ -12,7 +12,7 @@ const runIfFn = require('../run-if-fn.cjs');
 const numberInputContext = require('./number-input-context.cjs');
 const useNumberInput = require('./use-number-input.cjs');
 
-const NumberInput = react.forwardRef((props, ref) => {
+const NumberInputRoot = react.forwardRef((props, ref) => {
   const [useNumberInputProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, [
     "allowMouseWheel",
     "allowOverflow",
@@ -47,6 +47,6 @@ const NumberInput = react.forwardRef((props, ref) => {
   const view = runIfFn.runIfFn(children, api);
   return /* @__PURE__ */ jsxRuntime.jsx(numberInputContext.NumberInputProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
 });
-NumberInput.displayName = "NumberInput";
+NumberInputRoot.displayName = "NumberInputRoot";
 
-exports.NumberInput = NumberInput;
+exports.NumberInputRoot = NumberInputRoot;

package/number-input/{number-input.d.ts → number-input-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 UseNumberInputProps, type UseNumberInputReturn } from './use-number-input';
-export interface NumberInputProps extends Assign<Assign<HTMLArkProps<'div'>, {
+export interface NumberInputRootProps extends Assign<Assign<HTMLArkProps<'div'>, {
     children?: ReactNode | ((api: UseNumberInputReturn) => ReactNode);
 }>, UseNumberInputProps> {
 }
-export declare const NumberInput: ForwardRefExoticComponent<NumberInputProps & RefAttributes<HTMLDivElement>>;
+export declare const NumberInputRoot: ForwardRefExoticComponent<NumberInputRootProps & RefAttributes<HTMLDivElement>>;

package/number-input/{number-input.mjs → number-input-root.mjs}

@@ -8,7 +8,7 @@ import { runIfFn } from '../run-if-fn.mjs';
 import { NumberInputProvider } from './number-input-context.mjs';
 import { useNumberInput } from './use-number-input.mjs';
 
-const NumberInput = forwardRef((props, ref) => {
+const NumberInputRoot = forwardRef((props, ref) => {
   const [useNumberInputProps, { children, ...localProps }] = createSplitProps()(props, [
     "allowMouseWheel",
     "allowOverflow",
@@ -43,6 +43,6 @@ const NumberInput = forwardRef((props, ref) => {
   const view = runIfFn(children, api);
   return /* @__PURE__ */ jsx(NumberInputProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
 });
-NumberInput.displayName = "NumberInput";
+NumberInputRoot.displayName = "NumberInputRoot";
 
-export { NumberInput };
+export { NumberInputRoot };

package/number-input/stories/number-input.stories.d.ts

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

package/number-input/tests/basic.d.ts

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

package/number-input/use-number-input.cjs

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -33,7 +33,8 @@
     "tags input",
     "toast",
     "toggle group",
-    "tooltip"
+    "tooltip",
+    "tree view"
   ],
   "homepage": "https://ark-ui.com",
   "license": "MIT",
@@ -61,80 +62,80 @@
     "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "1.3.0",
-    "@zag-js/accordion": "0.32.1",
-    "@zag-js/avatar": "0.32.1",
-    "@zag-js/carousel": "0.32.1",
-    "@zag-js/checkbox": "0.32.1",
-    "@zag-js/color-picker": "0.32.1",
-    "@zag-js/color-utils": "0.32.1",
-    "@zag-js/combobox": "0.32.1",
-    "@zag-js/core": "0.32.1",
-    "@zag-js/date-picker": "0.32.1",
-    "@zag-js/date-utils": "0.32.1",
-    "@zag-js/dialog": "0.32.1",
-    "@zag-js/editable": "0.32.1",
-    "@zag-js/file-upload": "0.32.1",
-    "@zag-js/hover-card": "0.32.1",
-    "@zag-js/menu": "0.32.1",
-    "@zag-js/number-input": "0.32.1",
-    "@zag-js/pagination": "0.32.1",
-    "@zag-js/pin-input": "0.32.1",
-    "@zag-js/popover": "0.32.1",
-    "@zag-js/presence": "0.32.1",
-    "@zag-js/progress": "0.32.1",
-    "@zag-js/radio-group": "0.32.1",
-    "@zag-js/rating-group": "0.32.1",
-    "@zag-js/react": "0.32.1",
-    "@zag-js/select": "0.32.1",
-    "@zag-js/slider": "0.32.1",
-    "@zag-js/splitter": "0.32.1",
-    "@zag-js/switch": "0.32.1",
-    "@zag-js/tabs": "0.32.1",
-    "@zag-js/tags-input": "0.32.1",
-    "@zag-js/toast": "0.32.1",
-    "@zag-js/toggle-group": "0.32.1",
-    "@zag-js/tooltip": "0.32.1",
-    "@zag-js/types": "0.32.1"
+    "@ark-ui/anatomy": "2.1.0",
+    "@zag-js/accordion": "0.34.0",
+    "@zag-js/avatar": "0.34.0",
+    "@zag-js/carousel": "0.34.0",
+    "@zag-js/checkbox": "0.34.0",
+    "@zag-js/color-picker": "0.34.0",
+    "@zag-js/color-utils": "0.34.0",
+    "@zag-js/combobox": "0.34.0",
+    "@zag-js/core": "0.34.0",
+    "@zag-js/date-picker": "0.34.0",
+    "@zag-js/date-utils": "0.34.0",
+    "@zag-js/dialog": "0.34.0",
+    "@zag-js/editable": "0.34.0",
+    "@zag-js/file-upload": "0.34.0",
+    "@zag-js/hover-card": "0.34.0",
+    "@zag-js/menu": "0.34.0",
+    "@zag-js/number-input": "0.34.0",
+    "@zag-js/pagination": "0.34.0",
+    "@zag-js/pin-input": "0.34.0",
+    "@zag-js/popover": "0.34.0",
+    "@zag-js/presence": "0.34.0",
+    "@zag-js/progress": "0.34.0",
+    "@zag-js/radio-group": "0.34.0",
+    "@zag-js/rating-group": "0.34.0",
+    "@zag-js/react": "0.34.0",
+    "@zag-js/select": "0.34.0",
+    "@zag-js/slider": "0.34.0",
+    "@zag-js/splitter": "0.34.0",
+    "@zag-js/switch": "0.34.0",
+    "@zag-js/tabs": "0.34.0",
+    "@zag-js/tags-input": "0.34.0",
+    "@zag-js/toast": "0.34.0",
+    "@zag-js/toggle-group": "0.34.0",
+    "@zag-js/tooltip": "0.34.0",
+    "@zag-js/tree-view": "0.34.0",
+    "@zag-js/types": "0.34.0"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "5.0.0",
-    "@storybook/addon-a11y": "7.6.8",
-    "@storybook/addon-essentials": "7.6.8",
-    "@storybook/addons": "7.6.8",
-    "@storybook/react": "7.6.8",
-    "@storybook/react-vite": "7.6.8",
+    "@storybook/addon-a11y": "7.6.10",
+    "@storybook/addon-essentials": "7.6.10",
+    "@storybook/addons": "7.6.10",
+    "@storybook/react": "7.6.10",
+    "@storybook/react-vite": "7.6.10",
     "@testing-library/dom": "9.3.4",
-    "@testing-library/jest-dom": "6.2.0",
+    "@testing-library/jest-dom": "6.3.0",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.6",
-    "@types/react": "18.2.47",
+    "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.18.1",
-    "@typescript-eslint/parser": "6.18.1",
+    "@typescript-eslint/eslint-plugin": "6.20.0",
+    "@typescript-eslint/parser": "6.20.0",
     "@vitejs/plugin-react": "4.2.1",
-    "@vitest/coverage-v8": "0.34.6",
+    "@vitest/coverage-v8": "1.2.2",
     "eslint": "8.56.0",
     "eslint-plugin-jest-dom": "5.1.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-testing-library": "6.2.0",
     "globby": "14.0.0",
-    "jsdom": "23.0.1",
-    "lucide-react": "0.309.0",
+    "jsdom": "24.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-frame-component": "5.2.6",
     "react-hook-form": "7.49.3",
-    "release-it": "17.0.1",
+    "release-it": "17.0.3",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "7.6.8",
+    "storybook": "7.6.10",
     "typescript": "5.3.3",
-    "vite": "5.0.11",
-    "vite-plugin-dts": "3.7.0",
-    "vitest": "0.34.6"
+    "vite": "5.0.12",
+    "vite-plugin-dts": "3.7.2",
+    "vitest": "1.2.2"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -307,6 +308,11 @@
       "import": "./tooltip/index.mjs",
       "require": "./tooltip/index.cjs"
     },
+    "./tree-view": {
+      "types": "./tree-view/index.d.ts",
+      "import": "./tree-view/index.mjs",
+      "require": "./tree-view/index.cjs"
+    },
     "./factory": {
       "types": "./factory.d.ts",
       "import": "./factory.mjs",

package/pagination/index.cjs

@@ -3,24 +3,25 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const pagination = require('./pagination.cjs');
 const paginationContext = require('./pagination-context.cjs');
 const paginationEllipsis = require('./pagination-ellipsis.cjs');
 const paginationItem = require('./pagination-item.cjs');
 const paginationNextTrigger = require('./pagination-next-trigger.cjs');
 const paginationPrevTrigger = require('./pagination-prev-trigger.cjs');
+const paginationRoot = require('./pagination-root.cjs');
 
-const Pagination = Object.assign(pagination.Pagination, {
-  Root: pagination.Pagination,
+const Pagination = {
+  Root: paginationRoot.PaginationRoot,
   Ellipsis: paginationEllipsis.PaginationEllipsis,
   Item: paginationItem.PaginationItem,
   NextTrigger: paginationNextTrigger.PaginationNextTrigger,
   PrevTrigger: paginationPrevTrigger.PaginationPrevTrigger
-});
+};
 
 exports.usePaginationContext = paginationContext.usePaginationContext;
 exports.PaginationEllipsis = paginationEllipsis.PaginationEllipsis;
 exports.PaginationItem = paginationItem.PaginationItem;
 exports.PaginationNextTrigger = paginationNextTrigger.PaginationNextTrigger;
 exports.PaginationPrevTrigger = paginationPrevTrigger.PaginationPrevTrigger;
+exports.PaginationRoot = paginationRoot.PaginationRoot;
 exports.Pagination = Pagination;

package/pagination/index.d.ts

@@ -1,18 +1,18 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import type { ItemLabelDetails as PaginationItemLabelDetails, PageChangeDetails as PaginationPageChangeDetails } from '@zag-js/pagination';
-import { type PaginationProps } from './pagination';
 import { usePaginationContext, type PaginationContext } from './pagination-context';
 import { PaginationEllipsis, type PaginationEllipsisProps } from './pagination-ellipsis';
 import { PaginationItem, type PaginationItemProps } from './pagination-item';
 import { PaginationNextTrigger, type PaginationNextTriggerProps } from './pagination-next-trigger';
 import { PaginationPrevTrigger, type PaginationPrevTriggerProps } from './pagination-prev-trigger';
-declare const Pagination: ForwardRefExoticComponent<PaginationProps & RefAttributes<HTMLElement>> & {
-    Root: ForwardRefExoticComponent<PaginationProps & RefAttributes<HTMLElement>>;
+import { PaginationRoot, type PaginationRootProps } from './pagination-root';
+export declare const Pagination: {
+    Root: ForwardRefExoticComponent<PaginationRootProps & RefAttributes<HTMLElement>>;
     Ellipsis: ForwardRefExoticComponent<PaginationEllipsisProps & RefAttributes<HTMLDivElement>>;
     Item: ForwardRefExoticComponent<PaginationItemProps & RefAttributes<HTMLButtonElement>>;
     NextTrigger: ForwardRefExoticComponent<PaginationNextTriggerProps & RefAttributes<HTMLButtonElement>>;
     PrevTrigger: ForwardRefExoticComponent<PaginationPrevTriggerProps & RefAttributes<HTMLButtonElement>>;
 };
-export { Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, usePaginationContext, };
-export type { PaginationContext, PaginationEllipsisProps, PaginationItemLabelDetails, PaginationItemProps, PaginationNextTriggerProps, PaginationPageChangeDetails, PaginationPrevTriggerProps, PaginationProps, };
+export { PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, usePaginationContext, };
+export type { PaginationContext, PaginationEllipsisProps, PaginationItemLabelDetails, PaginationItemProps, PaginationNextTriggerProps, PaginationPageChangeDetails, PaginationPrevTriggerProps, PaginationRootProps, };

package/pagination/index.mjs

@@ -1,17 +1,17 @@
 'use client';
-import { Pagination as Pagination$1 } from './pagination.mjs';
 export { usePaginationContext } from './pagination-context.mjs';
 import { PaginationEllipsis } from './pagination-ellipsis.mjs';
 import { PaginationItem } from './pagination-item.mjs';
 import { PaginationNextTrigger } from './pagination-next-trigger.mjs';
 import { PaginationPrevTrigger } from './pagination-prev-trigger.mjs';
+import { PaginationRoot } from './pagination-root.mjs';
 
-const Pagination = Object.assign(Pagination$1, {
-  Root: Pagination$1,
+const Pagination = {
+  Root: PaginationRoot,
   Ellipsis: PaginationEllipsis,
   Item: PaginationItem,
   NextTrigger: PaginationNextTrigger,
   PrevTrigger: PaginationPrevTrigger
-});
+};
 
-export { Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger };
+export { Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot };

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

@@ -12,7 +12,7 @@ const runIfFn = require('../run-if-fn.cjs');
 const paginationContext = require('./pagination-context.cjs');
 const usePagination = require('./use-pagination.cjs');
 
-const Pagination = react.forwardRef((props, ref) => {
+const PaginationRoot = react.forwardRef((props, ref) => {
   const [paginationProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
     props,
     [
@@ -35,6 +35,6 @@ const Pagination = react.forwardRef((props, ref) => {
   const view = runIfFn.runIfFn(children, api);
   return /* @__PURE__ */ jsxRuntime.jsx(paginationContext.PaginationProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.nav, { ...mergedProps, ref, children: view }) });
 });
-Pagination.displayName = "Pagination";
+PaginationRoot.displayName = "PaginationRoot";
 
-exports.Pagination = Pagination;
+exports.PaginationRoot = PaginationRoot;

package/pagination/{pagination.d.ts → pagination-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 UsePaginationProps, type UsePaginationReturn } from './use-pagination';
-export interface PaginationProps extends Assign<Assign<HTMLArkProps<'nav'>, {
+export interface PaginationRootProps extends Assign<Assign<HTMLArkProps<'nav'>, {
     children?: ReactNode | ((api: UsePaginationReturn) => ReactNode);
 }>, UsePaginationProps> {
 }
-export declare const Pagination: ForwardRefExoticComponent<PaginationProps & RefAttributes<HTMLElement>>;
+export declare const PaginationRoot: ForwardRefExoticComponent<PaginationRootProps & RefAttributes<HTMLElement>>;

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

@@ -8,7 +8,7 @@ import { runIfFn } from '../run-if-fn.mjs';
 import { PaginationProvider } from './pagination-context.mjs';
 import { usePagination } from './use-pagination.mjs';
 
-const Pagination = forwardRef((props, ref) => {
+const PaginationRoot = forwardRef((props, ref) => {
   const [paginationProps, { children, ...localProps }] = createSplitProps()(
     props,
     [
@@ -31,6 +31,6 @@ const Pagination = forwardRef((props, ref) => {
   const view = runIfFn(children, api);
   return /* @__PURE__ */ jsx(PaginationProvider, { value: api, children: /* @__PURE__ */ jsx(ark.nav, { ...mergedProps, ref, children: view }) });
 });
-Pagination.displayName = "Pagination";
+PaginationRoot.displayName = "PaginationRoot";
 
-export { Pagination };
+export { PaginationRoot };

package/pagination/stories/pagination.stories.d.ts

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

package/pagination/tests/basic.d.ts

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

package/pagination/use-pagination.cjs

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

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

package/pin-input/index.cjs

@@ -3,21 +3,22 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const pinInput = require('./pin-input.cjs');
 const pinInputContext = require('./pin-input-context.cjs');
 const pinInputControl = require('./pin-input-control.cjs');
 const pinInputInput = require('./pin-input-input.cjs');
 const pinInputLabel = require('./pin-input-label.cjs');
+const pinInputRoot = require('./pin-input-root.cjs');
 
-const PinInput = Object.assign(pinInput.PinInput, {
-  Root: pinInput.PinInput,
+const PinInput = {
+  Root: pinInputRoot.PinInputRoot,
   Control: pinInputControl.PinInputControl,
   Input: pinInputInput.PinInputInput,
   Label: pinInputLabel.PinInputLabel
-});
+};
 
 exports.usePinInputContext = pinInputContext.usePinInputContext;
 exports.PinInputControl = pinInputControl.PinInputControl;
 exports.PinInputInput = pinInputInput.PinInputInput;
 exports.PinInputLabel = pinInputLabel.PinInputLabel;
+exports.PinInputRoot = pinInputRoot.PinInputRoot;
 exports.PinInput = PinInput;

package/pin-input/index.d.ts

@@ -1,16 +1,16 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import type { ValueChangeDetails as PinInputValueChangeDetails, ValueInvalidDetails as PinInputValueInvalidDetails } from '@zag-js/pin-input';
-import { type PinInputProps } from './pin-input';
 import { usePinInputContext, type PinInputContext } from './pin-input-context';
 import { PinInputControl, type PinInputControlProps } from './pin-input-control';
 import { PinInputInput, type PinInputInputProps } from './pin-input-input';
 import { PinInputLabel, type PinInputLabelProps } from './pin-input-label';
-declare const PinInput: ForwardRefExoticComponent<PinInputProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<PinInputProps & RefAttributes<HTMLDivElement>>;
+import { PinInputRoot, type PinInputRootProps } from './pin-input-root';
+export declare const PinInput: {
+    Root: ForwardRefExoticComponent<PinInputRootProps & RefAttributes<HTMLDivElement>>;
     Control: ForwardRefExoticComponent<PinInputControlProps & RefAttributes<HTMLDivElement>>;
     Input: ForwardRefExoticComponent<PinInputInputProps & RefAttributes<HTMLInputElement>>;
     Label: ForwardRefExoticComponent<PinInputLabelProps & RefAttributes<HTMLLabelElement>>;
 };
-export { PinInput, PinInputControl, PinInputInput, PinInputLabel, usePinInputContext };
-export type { PinInputContext, PinInputControlProps, PinInputInputProps, PinInputLabelProps, PinInputProps, PinInputValueChangeDetails, PinInputValueInvalidDetails, };
+export { PinInputControl, PinInputInput, PinInputLabel, PinInputRoot, usePinInputContext };
+export type { PinInputContext, PinInputControlProps, PinInputInputProps, PinInputLabelProps, PinInputRootProps, PinInputValueChangeDetails, PinInputValueInvalidDetails, };

package/pin-input/index.mjs

@@ -1,15 +1,15 @@
 'use client';
-import { PinInput as PinInput$1 } from './pin-input.mjs';
 export { usePinInputContext } from './pin-input-context.mjs';
 import { PinInputControl } from './pin-input-control.mjs';
 import { PinInputInput } from './pin-input-input.mjs';
 import { PinInputLabel } from './pin-input-label.mjs';
+import { PinInputRoot } from './pin-input-root.mjs';
 
-const PinInput = Object.assign(PinInput$1, {
-  Root: PinInput$1,
+const PinInput = {
+  Root: PinInputRoot,
   Control: PinInputControl,
   Input: PinInputInput,
   Label: PinInputLabel
-});
+};
 
-export { PinInput, PinInputControl, PinInputInput, PinInputLabel };
+export { PinInput, PinInputControl, PinInputInput, PinInputLabel, PinInputRoot };

package/pin-input/{pin-input.cjs → pin-input-root.cjs}

@@ -11,7 +11,7 @@ const factory = require('../factory.cjs');
 const pinInputContext = require('./pin-input-context.cjs');
 const usePinInput = require('./use-pin-input.cjs');
 
-const PinInput = react.forwardRef((props, ref) => {
+const PinInputRoot = react.forwardRef((props, ref) => {
   const [usePinInputProps, localProps] = createSplitProps.createSplitProps()(props, [
     "autoFocus",
     "blurOnComplete",
@@ -43,6 +43,6 @@ const PinInput = react.forwardRef((props, ref) => {
     /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
   ] });
 });
-PinInput.displayName = "PinInput";
+PinInputRoot.displayName = "PinInputRoot";
 
-exports.PinInput = PinInput;
+exports.PinInputRoot = PinInputRoot;

package/pin-input/{pin-input.d.ts → pin-input-root.d.ts}

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UsePinInputProps } from './use-pin-input';
-export interface PinInputProps extends Assign<HTMLArkProps<'div'>, UsePinInputProps> {
+export interface PinInputRootProps extends Assign<HTMLArkProps<'div'>, UsePinInputProps> {
 }
-export declare const PinInput: ForwardRefExoticComponent<PinInputProps & RefAttributes<HTMLDivElement>>;
+export declare const PinInputRoot: ForwardRefExoticComponent<PinInputRootProps & RefAttributes<HTMLDivElement>>;

package/pin-input/{pin-input.mjs → pin-input-root.mjs}

@@ -7,7 +7,7 @@ import { ark } from '../factory.mjs';
 import { PinInputProvider } from './pin-input-context.mjs';
 import { usePinInput } from './use-pin-input.mjs';
 
-const PinInput = forwardRef((props, ref) => {
+const PinInputRoot = forwardRef((props, ref) => {
   const [usePinInputProps, localProps] = createSplitProps()(props, [
     "autoFocus",
     "blurOnComplete",
@@ -39,6 +39,6 @@ const PinInput = forwardRef((props, ref) => {
     /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
   ] });
 });
-PinInput.displayName = "PinInput";
+PinInputRoot.displayName = "PinInputRoot";
 
-export { PinInput };
+export { PinInputRoot };

package/pin-input/stories/pin-input.stories.d.ts

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

package/pin-input/tests/basic.d.ts

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