@ark-ui/react 1.3.0 → 2.0.1

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

@@ -1,9 +1,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'>, {
-    children?: ReactNode | ((api: UseNumberInputReturn) => ReactNode);
-}>, UseNumberInputProps> {
-}
-export declare const NumberInput: ForwardRefExoticComponent<NumberInputProps & RefAttributes<HTMLDivElement>>;
+import { NumberInputControl as Control } from './number-input-control';
+import { NumberInputDecrementTrigger as DecrementTrigger } from './number-input-decrement-trigger';
+import { NumberInputIncrementTrigger as IncrementTrigger } from './number-input-increment-trigger';
+import { NumberInputInput as Input } from './number-input-input';
+import { NumberInputLabel as Label } from './number-input-label';
+import { NumberInputRoot as Root } from './number-input-root';
+import { NumberInputScrubber as Scrubber } from './number-input-scrubber';
+export { Control, DecrementTrigger, IncrementTrigger, Input, Label, Root, Scrubber };

package/number-input/number-input.mjs

@@ -1,48 +1,7 @@
-'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 { 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 [useNumberInputProps, { children, ...localProps }] = createSplitProps()(props, [
-    "allowMouseWheel",
-    "allowOverflow",
-    "clampValueOnBlur",
-    "defaultValue",
-    "dir",
-    "disabled",
-    "focusInputOnChange",
-    "form",
-    "formatOptions",
-    "getRootNode",
-    "id",
-    "ids",
-    "inputMode",
-    "invalid",
-    "locale",
-    "max",
-    "min",
-    "name",
-    "onFocusChange",
-    "onValueChange",
-    "onValueInvalid",
-    "pattern",
-    "readOnly",
-    "spinOnPress",
-    "step",
-    "translations",
-    "value"
-  ]);
-  const api = useNumberInput(useNumberInputProps);
-  const mergedProps = mergeProps(api.rootProps, localProps);
-  const view = runIfFn(children, api);
-  return /* @__PURE__ */ jsx(NumberInputProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
-});
-NumberInput.displayName = "NumberInput";
-
-export { NumberInput };
+export { NumberInputControl as Control } from './number-input-control.mjs';
+export { NumberInputDecrementTrigger as DecrementTrigger } from './number-input-decrement-trigger.mjs';
+export { NumberInputIncrementTrigger as IncrementTrigger } from './number-input-increment-trigger.mjs';
+export { NumberInputInput as Input } from './number-input-input.mjs';
+export { NumberInputLabel as Label } from './number-input-label.mjs';
+export { NumberInputRoot as Root } from './number-input-root.mjs';
+export { NumberInputScrubber as Scrubber } from './number-input-scrubber.mjs';

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.1",
   "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

@@ -1,26 +1,21 @@
-'use client';
 'use strict';
 
 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 = require('./pagination.cjs');
+
 
-const Pagination = Object.assign(pagination.Pagination, {
-  Root: pagination.Pagination,
-  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.Pagination = Pagination;
+exports.PaginationRoot = paginationRoot.PaginationRoot;
+exports.Pagination = pagination;

package/pagination/index.d.ts

@@ -1,18 +1,10 @@
-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>>;
-    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, };
+import { PaginationRoot, type PaginationRootProps } from './pagination-root';
+export * as Pagination from './pagination';
+export { PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, usePaginationContext, };
+export type { PaginationContext, PaginationEllipsisProps, PaginationItemLabelDetails, PaginationItemProps, PaginationNextTriggerProps, PaginationPageChangeDetails, PaginationPrevTriggerProps, PaginationRootProps, };

package/pagination/index.mjs

@@ -1,17 +1,8 @@
-'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';
-
-const Pagination = Object.assign(Pagination$1, {
-  Root: Pagination$1,
-  Ellipsis: PaginationEllipsis,
-  Item: PaginationItem,
-  NextTrigger: PaginationNextTrigger,
-  PrevTrigger: PaginationPrevTrigger
-});
-
-export { Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger };
+export { PaginationEllipsis } from './pagination-ellipsis.mjs';
+export { PaginationItem } from './pagination-item.mjs';
+export { PaginationNextTrigger } from './pagination-next-trigger.mjs';
+export { PaginationPrevTrigger } from './pagination-prev-trigger.mjs';
+export { PaginationRoot } from './pagination-root.mjs';
+import * as pagination from './pagination.mjs';
+export { pagination as Pagination };

package/pagination/pagination-root.cjs

@@ -0,0 +1,40 @@
+'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 runIfFn = require('../run-if-fn.cjs');
+const paginationContext = require('./pagination-context.cjs');
+const usePagination = require('./use-pagination.cjs');
+
+const PaginationRoot = react.forwardRef((props, ref) => {
+  const [paginationProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
+    props,
+    [
+      "count",
+      "defaultPage",
+      "dir",
+      "getRootNode",
+      "id",
+      "ids",
+      "onPageChange",
+      "page",
+      "pageSize",
+      "siblingCount",
+      "translations",
+      "type"
+    ]
+  );
+  const api = usePagination.usePagination(paginationProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
+  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 }) });
+});
+PaginationRoot.displayName = "PaginationRoot";
+
+exports.PaginationRoot = PaginationRoot;

package/pagination/pagination-root.d.ts

@@ -0,0 +1,9 @@
+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 PaginationRootProps extends Assign<Assign<HTMLArkProps<'nav'>, {
+    children?: ReactNode | ((api: UsePaginationReturn) => ReactNode);
+}>, UsePaginationProps> {
+}
+export declare const PaginationRoot: ForwardRefExoticComponent<PaginationRootProps & RefAttributes<HTMLElement>>;

package/pagination/pagination-root.mjs

@@ -0,0 +1,36 @@
+'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 { runIfFn } from '../run-if-fn.mjs';
+import { PaginationProvider } from './pagination-context.mjs';
+import { usePagination } from './use-pagination.mjs';
+
+const PaginationRoot = forwardRef((props, ref) => {
+  const [paginationProps, { children, ...localProps }] = createSplitProps()(
+    props,
+    [
+      "count",
+      "defaultPage",
+      "dir",
+      "getRootNode",
+      "id",
+      "ids",
+      "onPageChange",
+      "page",
+      "pageSize",
+      "siblingCount",
+      "translations",
+      "type"
+    ]
+  );
+  const api = usePagination(paginationProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
+  const view = runIfFn(children, api);
+  return /* @__PURE__ */ jsx(PaginationProvider, { value: api, children: /* @__PURE__ */ jsx(ark.nav, { ...mergedProps, ref, children: view }) });
+});
+PaginationRoot.displayName = "PaginationRoot";
+
+export { PaginationRoot };

package/pagination/pagination.cjs

@@ -1,40 +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');
-const runIfFn = require('../run-if-fn.cjs');
-const paginationContext = require('./pagination-context.cjs');
-const usePagination = require('./use-pagination.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 = react.forwardRef((props, ref) => {
-  const [paginationProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
-    props,
-    [
-      "count",
-      "defaultPage",
-      "dir",
-      "getRootNode",
-      "id",
-      "ids",
-      "onPageChange",
-      "page",
-      "pageSize",
-      "siblingCount",
-      "translations",
-      "type"
-    ]
-  );
-  const api = usePagination.usePagination(paginationProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
-  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";
 
-exports.Pagination = Pagination;
+
+exports.Ellipsis = paginationEllipsis.PaginationEllipsis;
+exports.Item = paginationItem.PaginationItem;
+exports.NextTrigger = paginationNextTrigger.PaginationNextTrigger;
+exports.PrevTrigger = paginationPrevTrigger.PaginationPrevTrigger;
+exports.Root = paginationRoot.PaginationRoot;

package/pagination/pagination.d.ts

@@ -1,9 +1,6 @@
-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'>, {
-    children?: ReactNode | ((api: UsePaginationReturn) => ReactNode);
-}>, UsePaginationProps> {
-}
-export declare const Pagination: ForwardRefExoticComponent<PaginationProps & RefAttributes<HTMLElement>>;
+import { PaginationEllipsis as Ellipsis } from './pagination-ellipsis';
+import { PaginationItem as Item } from './pagination-item';
+import { PaginationNextTrigger as NextTrigger } from './pagination-next-trigger';
+import { PaginationPrevTrigger as PrevTrigger } from './pagination-prev-trigger';
+import { PaginationRoot as Root } from './pagination-root';
+export { Ellipsis, Item, NextTrigger, PrevTrigger, Root };

package/pagination/pagination.mjs

@@ -1,36 +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 { runIfFn } from '../run-if-fn.mjs';
-import { PaginationProvider } from './pagination-context.mjs';
-import { usePagination } from './use-pagination.mjs';
-
-const Pagination = forwardRef((props, ref) => {
-  const [paginationProps, { children, ...localProps }] = createSplitProps()(
-    props,
-    [
-      "count",
-      "defaultPage",
-      "dir",
-      "getRootNode",
-      "id",
-      "ids",
-      "onPageChange",
-      "page",
-      "pageSize",
-      "siblingCount",
-      "translations",
-      "type"
-    ]
-  );
-  const api = usePagination(paginationProps);
-  const mergedProps = mergeProps(api.rootProps, localProps);
-  const view = runIfFn(children, api);
-  return /* @__PURE__ */ jsx(PaginationProvider, { value: api, children: /* @__PURE__ */ jsx(ark.nav, { ...mergedProps, ref, children: view }) });
-});
-Pagination.displayName = "Pagination";
-
-export { Pagination };
+export { PaginationEllipsis as Ellipsis } from './pagination-ellipsis.mjs';
+export { PaginationItem as Item } from './pagination-item.mjs';
+export { PaginationNextTrigger as NextTrigger } from './pagination-next-trigger.mjs';
+export { PaginationPrevTrigger as PrevTrigger } from './pagination-prev-trigger.mjs';
+export { PaginationRoot as Root } from './pagination-root.mjs';

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

@@ -1,23 +1,19 @@
-'use client';
 'use strict';
 
 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 = require('./pin-input.cjs');
+
 
-const PinInput = Object.assign(pinInput.PinInput, {
-  Root: pinInput.PinInput,
-  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.PinInput = PinInput;
+exports.PinInputRoot = pinInputRoot.PinInputRoot;
+exports.PinInput = pinInput;

package/pin-input/index.d.ts

@@ -1,16 +1,9 @@
-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>>;
-    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, };
+import { PinInputRoot, type PinInputRootProps } from './pin-input-root';
+export * as PinInput from './pin-input';
+export { PinInputControl, PinInputInput, PinInputLabel, PinInputRoot, usePinInputContext };
+export type { PinInputContext, PinInputControlProps, PinInputInputProps, PinInputLabelProps, PinInputRootProps, PinInputValueChangeDetails, PinInputValueInvalidDetails, };