@ark-ui/react 3.0.0-2 → 3.0.0

package/README.md

@@ -1,6 +1,8 @@
 # Welcome to Ark UI
 
-Ark UI is a headless, open-source UI library with over 30+ components designed for building reusable, scalable Design Systems. It supports a wide range of JavaScript frameworks, offering dedciated packages for each supported framework.
+Ark UI is a headless, open-source UI library with over 30+ components designed for building
+reusable, scalable Design Systems. It supports a wide range of JavaScript frameworks, offering
+dedciated packages for each supported framework.
 
 ## Supported Frameworks
 
@@ -97,7 +99,8 @@ export const MySlider = (props: SliderProps) => {
 
 ## Documentation
 
-For more detailed documentation and examples, please visit the [official documentation](https://ark-ui.com/).
+For more detailed documentation and examples, please visit the
+[official documentation](https://ark-ui.com/).
 
 ## Roadmap
 
@@ -105,8 +108,11 @@ You can request, vote for, and check upcoming features on our [roadmap](https://
 
 ## Contribution
 
-We welcome contributions to Ark UI. Please read our [contributing guidelines](https://github.com/chakra-ui/ark/blob/main/CONTRIBUTING.md) for more information on how to contribute.
+We welcome contributions to Ark UI. Please read our
+[contributing guidelines](https://github.com/chakra-ui/ark/blob/main/CONTRIBUTING.md) for more
+information on how to contribute.
 
 ## License
 
-This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ark/blob/main/LICENSE).
+This project is licensed under the terms of the
+[MIT license](https://github.com/chakra-ui/ark/blob/main/LICENSE).

package/dist/components/pagination/index.d.cts

@@ -1,4 +1,4 @@
-export type { ItemLabelDetails as PaginationItemLabelDetails, PageChangeDetails as PaginationPageChangeDetails, } from '@zag-js/pagination';
+export type { ItemLabelDetails as PaginationItemLabelDetails, PageChangeDetails as PaginationPageChangeDetails, PageSizeChangeDetails as PaginationPageSizeChangeDetails, } from '@zag-js/pagination';
 export { PaginationContext, type PaginationContextProps } from './pagination-context';
 export { PaginationEllipsis, type PaginationEllipsisProps } from './pagination-ellipsis';
 export { PaginationItem, type PaginationItemProps } from './pagination-item';

package/dist/components/pagination/index.d.ts

@@ -1,4 +1,4 @@
-export type { ItemLabelDetails as PaginationItemLabelDetails, PageChangeDetails as PaginationPageChangeDetails, } from '@zag-js/pagination';
+export type { ItemLabelDetails as PaginationItemLabelDetails, PageChangeDetails as PaginationPageChangeDetails, PageSizeChangeDetails as PaginationPageSizeChangeDetails, } from '@zag-js/pagination';
 export { PaginationContext, type PaginationContextProps } from './pagination-context';
 export { PaginationEllipsis, type PaginationEllipsisProps } from './pagination-ellipsis';
 export { PaginationItem, type PaginationItemProps } from './pagination-item';

package/dist/components/pagination/pagination-root.cjs

@@ -18,6 +18,7 @@ const PaginationRoot = react.forwardRef((props, ref) => {
     "id",
     "ids",
     "onPageChange",
+    "onPageSizeChange",
     "page",
     "pageSize",
     "siblingCount",

package/dist/components/pagination/pagination-root.js

@@ -14,6 +14,7 @@ const PaginationRoot = forwardRef((props, ref) => {
     "id",
     "ids",
     "onPageChange",
+    "onPageSizeChange",
     "page",
     "pageSize",
     "siblingCount",

package/dist/components/pagination/pagination.d.cts

@@ -1,4 +1,4 @@
-export type { ItemLabelDetails, PageChangeDetails } from '@zag-js/pagination';
+export type { ItemLabelDetails, PageChangeDetails, PageSizeChangeDetails, } from '@zag-js/pagination';
 export { PaginationContext as Context, type PaginationContextProps as ContextProps, } from './pagination-context';
 export { PaginationEllipsis as Ellipsis, type PaginationEllipsisProps as EllipsisProps, } from './pagination-ellipsis';
 export { PaginationItem as Item, type PaginationItemProps as ItemProps } from './pagination-item';

package/dist/components/pagination/pagination.d.ts

@@ -1,4 +1,4 @@
-export type { ItemLabelDetails, PageChangeDetails } from '@zag-js/pagination';
+export type { ItemLabelDetails, PageChangeDetails, PageSizeChangeDetails, } from '@zag-js/pagination';
 export { PaginationContext as Context, type PaginationContextProps as ContextProps, } from './pagination-context';
 export { PaginationEllipsis as Ellipsis, type PaginationEllipsisProps as EllipsisProps, } from './pagination-ellipsis';
 export { PaginationItem as Item, type PaginationItemProps as ItemProps } from './pagination-item';

package/dist/components/tags-input/tags-input-root.d.cts

@@ -5,4 +5,4 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
 export interface TagsInputRootProps extends Assign<HTMLArkProps<'div'>, UseTagsInputProps> {
 }
-export declare const TagsInputRoot: ForwardRefExoticComponent<TagsInputRootProps & RefAttributes<HTMLInputElement>>;
+export declare const TagsInputRoot: ForwardRefExoticComponent<TagsInputRootProps & RefAttributes<HTMLDivElement>>;

package/dist/components/tags-input/tags-input-root.d.ts

@@ -5,4 +5,4 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
 export interface TagsInputRootProps extends Assign<HTMLArkProps<'div'>, UseTagsInputProps> {
 }
-export declare const TagsInputRoot: ForwardRefExoticComponent<TagsInputRootProps & RefAttributes<HTMLInputElement>>;
+export declare const TagsInputRoot: ForwardRefExoticComponent<TagsInputRootProps & RefAttributes<HTMLDivElement>>;

package/dist/index.cjs

@@ -399,7 +399,7 @@ const treeViewTree = require('./components/tree-view/tree-view-tree.cjs');
 const useTreeViewContext = require('./components/tree-view/use-tree-view-context.cjs');
 const useTreeViewItemContext = require('./components/tree-view/use-tree-view-item-context.cjs');
 const treeView = require('./components/tree-view/tree-view.cjs');
-const environment = require('./providers/environment/environment.cjs');
+const environmentProvider = require('./providers/environment/environment-provider.cjs');
 const useEnvironmentContext = require('./providers/environment/use-environment-context.cjs');
 const localeProvider = require('./providers/locale/locale-provider.cjs');
 const useLocaleContext = require('./providers/locale/use-locale-context.cjs');
@@ -805,7 +805,7 @@ exports.TreeViewTree = treeViewTree.TreeViewTree;
 exports.useTreeViewContext = useTreeViewContext.useTreeViewContext;
 exports.useTreeViewItemContext = useTreeViewItemContext.useTreeViewItemContext;
 exports.TreeView = treeView;
-exports.Environment = environment.Environment;
+exports.EnvironmentProvider = environmentProvider.EnvironmentProvider;
 exports.useEnvironmentContext = useEnvironmentContext.useEnvironmentContext;
 exports.LocaleProvider = localeProvider.LocaleProvider;
 exports.useLocaleContext = useLocaleContext.useLocaleContext;

package/dist/index.d.cts

@@ -1,2 +1,3 @@
 export * from './components';
 export * from './providers';
+export type { Assign, Optional } from './types';

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components';
 export * from './providers';
+export type { Assign, Optional } from './types';

package/dist/index.js

@@ -428,7 +428,7 @@ export { useTreeViewContext } from './components/tree-view/use-tree-view-context
 export { useTreeViewItemContext } from './components/tree-view/use-tree-view-item-context.js';
 import * as treeView from './components/tree-view/tree-view.js';
 export { treeView as TreeView };
-export { Environment } from './providers/environment/environment.js';
+export { EnvironmentProvider } from './providers/environment/environment-provider.js';
 export { useEnvironmentContext } from './providers/environment/use-environment-context.js';
 export { LocaleProvider } from './providers/locale/locale-provider.js';
 export { useLocaleContext } from './providers/locale/use-locale-context.js';

package/dist/providers/environment/{environment.cjs → environment-provider.cjs}

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -8,7 +9,7 @@ const react = require('react');
 const runIfFn = require('../../utils/run-if-fn.cjs');
 const useEnvironmentContext = require('./use-environment-context.cjs');
 
-const Environment = (props) => {
+const EnvironmentProvider = (props) => {
   const { value, children } = props;
   const [spanRef, setSpanRef] = react.useState();
   const getRootNode = react.useMemo(() => {
@@ -22,10 +23,10 @@ const Environment = (props) => {
     }),
     [getRootNode]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(useEnvironmentContext.EnvironmentProvider, { value: environment, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(useEnvironmentContext.EnvironmentContextProvider, { value: environment, children: [
     children,
     !value && /* @__PURE__ */ jsxRuntime.jsx("span", { hidden: true, ref: setSpanRef })
   ] });
 };
 
-exports.Environment = Environment;
+exports.EnvironmentProvider = EnvironmentProvider;

package/dist/providers/environment/environment-provider.d.cts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { RootNode } from './use-environment-context';
+
+export interface EnvironmentProviderProps {
+    children?: ReactNode;
+    value?: RootNode | (() => RootNode);
+}
+export declare const EnvironmentProvider: (props: EnvironmentProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/providers/environment/environment-provider.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { RootNode } from './use-environment-context';
+
+export interface EnvironmentProviderProps {
+    children?: ReactNode;
+    value?: RootNode | (() => RootNode);
+}
+export declare const EnvironmentProvider: (props: EnvironmentProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/providers/environment/{environment.js → environment-provider.js}

@@ -1,10 +1,11 @@
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { getWindow, getDocument } from '@zag-js/dom-query';
 import { useState, useMemo } from 'react';
 import { runIfFn } from '../../utils/run-if-fn.js';
-import { EnvironmentProvider } from './use-environment-context.js';
+import { EnvironmentContextProvider } from './use-environment-context.js';
 
-const Environment = (props) => {
+const EnvironmentProvider = (props) => {
   const { value, children } = props;
   const [spanRef, setSpanRef] = useState();
   const getRootNode = useMemo(() => {
@@ -18,10 +19,10 @@ const Environment = (props) => {
     }),
     [getRootNode]
   );
-  return /* @__PURE__ */ jsxs(EnvironmentProvider, { value: environment, children: [
+  return /* @__PURE__ */ jsxs(EnvironmentContextProvider, { value: environment, children: [
     children,
     !value && /* @__PURE__ */ jsx("span", { hidden: true, ref: setSpanRef })
   ] });
 };
 
-export { Environment };
+export { EnvironmentProvider };

package/dist/providers/environment/index.cjs

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const environment = require('./environment.cjs');
+const environmentProvider = require('./environment-provider.cjs');
 const useEnvironmentContext = require('./use-environment-context.cjs');
 
 
 
-exports.Environment = environment.Environment;
+exports.EnvironmentProvider = environmentProvider.EnvironmentProvider;
 exports.useEnvironmentContext = useEnvironmentContext.useEnvironmentContext;

package/dist/providers/environment/index.d.cts

@@ -1,2 +1,2 @@
-export { Environment, type EnvironmentProps } from './environment';
+export { EnvironmentProvider, type EnvironmentProviderProps } from './environment-provider';
 export { useEnvironmentContext, type EnvironmentContext, type RootNode, } from './use-environment-context';

package/dist/providers/environment/index.d.ts

@@ -1,2 +1,2 @@
-export { Environment, type EnvironmentProps } from './environment';
+export { EnvironmentProvider, type EnvironmentProviderProps } from './environment-provider';
 export { useEnvironmentContext, type EnvironmentContext, type RootNode, } from './use-environment-context';

package/dist/providers/environment/index.js

@@ -1,2 +1,2 @@
-export { Environment } from './environment.js';
+export { EnvironmentProvider } from './environment-provider.js';
 export { useEnvironmentContext } from './use-environment-context.js';

package/dist/providers/environment/use-environment-context.cjs

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const createContext = require('../../utils/create-context.cjs');
 
-const [EnvironmentProvider, useEnvironmentContext] = createContext.createContext({
+const [EnvironmentContextProvider, useEnvironmentContext] = createContext.createContext({
   name: "EnvironmentContext",
   hookName: "useEnvironmentContext",
   providerName: "<EnvironmentProvider />",
@@ -17,5 +17,5 @@ const [EnvironmentProvider, useEnvironmentContext] = createContext.createContext
   }
 });
 
-exports.EnvironmentProvider = EnvironmentProvider;
+exports.EnvironmentContextProvider = EnvironmentContextProvider;
 exports.useEnvironmentContext = useEnvironmentContext;

package/dist/providers/environment/use-environment-context.d.cts

@@ -16,4 +16,4 @@ export interface EnvironmentContext {
      */
     getWindow(): Window & typeof globalThis;
 }
-export declare const EnvironmentProvider: Provider<EnvironmentContext>, useEnvironmentContext: () => EnvironmentContext;
+export declare const EnvironmentContextProvider: Provider<EnvironmentContext>, useEnvironmentContext: () => EnvironmentContext;

package/dist/providers/environment/use-environment-context.d.ts

@@ -16,4 +16,4 @@ export interface EnvironmentContext {
      */
     getWindow(): Window & typeof globalThis;
 }
-export declare const EnvironmentProvider: Provider<EnvironmentContext>, useEnvironmentContext: () => EnvironmentContext;
+export declare const EnvironmentContextProvider: Provider<EnvironmentContext>, useEnvironmentContext: () => EnvironmentContext;

package/dist/providers/environment/use-environment-context.js

@@ -1,7 +1,7 @@
 'use client';
 import { createContext } from '../../utils/create-context.js';
 
-const [EnvironmentProvider, useEnvironmentContext] = createContext({
+const [EnvironmentContextProvider, useEnvironmentContext] = createContext({
   name: "EnvironmentContext",
   hookName: "useEnvironmentContext",
   providerName: "<EnvironmentProvider />",
@@ -13,4 +13,4 @@ const [EnvironmentProvider, useEnvironmentContext] = createContext({
   }
 });
 
-export { EnvironmentProvider, useEnvironmentContext };
+export { EnvironmentContextProvider, useEnvironmentContext };

package/dist/providers/index.cjs

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const environment = require('./environment/environment.cjs');
+const environmentProvider = require('./environment/environment-provider.cjs');
 const useEnvironmentContext = require('./environment/use-environment-context.cjs');
 const localeProvider = require('./locale/locale-provider.cjs');
 const useLocaleContext = require('./locale/use-locale-context.cjs');
 
 
 
-exports.Environment = environment.Environment;
+exports.EnvironmentProvider = environmentProvider.EnvironmentProvider;
 exports.useEnvironmentContext = useEnvironmentContext.useEnvironmentContext;
 exports.LocaleProvider = localeProvider.LocaleProvider;
 exports.useLocaleContext = useLocaleContext.useLocaleContext;

package/dist/providers/index.js

@@ -1,4 +1,4 @@
-export { Environment } from './environment/environment.js';
+export { EnvironmentProvider } from './environment/environment-provider.js';
 export { useEnvironmentContext } from './environment/use-environment-context.js';
 export { LocaleProvider } from './locale/locale-provider.js';
 export { useLocaleContext } from './locale/use-locale-context.js';

package/dist/providers/locale/locale-provider.d.cts

@@ -2,7 +2,8 @@ import { PropsWithChildren } from 'react';
 
 export interface LocaleProviderProps extends PropsWithChildren {
     /**
-     * The locale to use. For example, 'en-US'.
+     * The locale to use for the application.
+     * @default 'en-US'
      */
     locale: string;
 }

package/dist/providers/locale/locale-provider.d.ts

@@ -2,7 +2,8 @@ import { PropsWithChildren } from 'react';
 
 export interface LocaleProviderProps extends PropsWithChildren {
     /**
-     * The locale to use. For example, 'en-US'.
+     * The locale to use for the application.
+     * @default 'en-US'
      */
     locale: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "3.0.0-2",
+  "version": "3.0.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -500,73 +500,73 @@
   "sideEffects": false,
   "dependencies": {
     "@ark-ui/anatomy": "3.1.0",
-    "@zag-js/accordion": "0.50.0",
-    "@zag-js/avatar": "0.50.0",
-    "@zag-js/carousel": "0.50.0",
-    "@zag-js/checkbox": "0.50.0",
-    "@zag-js/clipboard": "0.50.0",
-    "@zag-js/collapsible": "0.50.0",
-    "@zag-js/color-picker": "0.50.0",
-    "@zag-js/color-utils": "0.50.0",
-    "@zag-js/combobox": "0.50.0",
-    "@zag-js/core": "0.50.0",
-    "@zag-js/date-picker": "0.50.0",
-    "@zag-js/date-utils": "0.50.0",
-    "@zag-js/dom-query": "0.50.0",
-    "@zag-js/dialog": "0.50.0",
-    "@zag-js/editable": "0.50.0",
-    "@zag-js/file-upload": "0.50.0",
-    "@zag-js/file-utils": "0.50.0",
-    "@zag-js/hover-card": "0.50.0",
-    "@zag-js/i18n-utils": "0.50.0",
-    "@zag-js/menu": "0.50.0",
-    "@zag-js/number-input": "0.50.0",
-    "@zag-js/pagination": "0.50.0",
-    "@zag-js/pin-input": "0.50.0",
-    "@zag-js/popover": "0.50.0",
-    "@zag-js/presence": "0.50.0",
-    "@zag-js/progress": "0.50.0",
-    "@zag-js/radio-group": "0.50.0",
-    "@zag-js/rating-group": "0.50.0",
-    "@zag-js/react": "0.50.0",
-    "@zag-js/select": "0.50.0",
-    "@zag-js/slider": "0.50.0",
-    "@zag-js/splitter": "0.50.0",
-    "@zag-js/switch": "0.50.0",
-    "@zag-js/tabs": "0.50.0",
-    "@zag-js/tags-input": "0.50.0",
-    "@zag-js/toast": "0.50.0",
-    "@zag-js/toggle-group": "0.50.0",
-    "@zag-js/tooltip": "0.50.0",
-    "@zag-js/tree-view": "0.50.0",
-    "@zag-js/types": "0.50.0"
+    "@zag-js/accordion": "0.51.1",
+    "@zag-js/avatar": "0.51.1",
+    "@zag-js/carousel": "0.51.1",
+    "@zag-js/checkbox": "0.51.1",
+    "@zag-js/clipboard": "0.51.1",
+    "@zag-js/collapsible": "0.51.1",
+    "@zag-js/color-picker": "0.51.1",
+    "@zag-js/color-utils": "0.51.1",
+    "@zag-js/combobox": "0.51.1",
+    "@zag-js/core": "0.51.1",
+    "@zag-js/date-picker": "0.51.1",
+    "@zag-js/date-utils": "0.51.1",
+    "@zag-js/dom-query": "0.51.1",
+    "@zag-js/dialog": "0.51.1",
+    "@zag-js/editable": "0.51.1",
+    "@zag-js/file-upload": "0.51.1",
+    "@zag-js/file-utils": "0.51.1",
+    "@zag-js/hover-card": "0.51.1",
+    "@zag-js/i18n-utils": "0.51.1",
+    "@zag-js/menu": "0.51.1",
+    "@zag-js/number-input": "0.51.1",
+    "@zag-js/pagination": "0.51.1",
+    "@zag-js/pin-input": "0.51.1",
+    "@zag-js/popover": "0.51.1",
+    "@zag-js/presence": "0.51.1",
+    "@zag-js/progress": "0.51.1",
+    "@zag-js/radio-group": "0.51.1",
+    "@zag-js/rating-group": "0.51.1",
+    "@zag-js/react": "0.51.1",
+    "@zag-js/select": "0.51.1",
+    "@zag-js/slider": "0.51.1",
+    "@zag-js/splitter": "0.51.1",
+    "@zag-js/switch": "0.51.1",
+    "@zag-js/tabs": "0.51.1",
+    "@zag-js/tags-input": "0.51.1",
+    "@zag-js/toast": "0.51.1",
+    "@zag-js/toggle-group": "0.51.1",
+    "@zag-js/tooltip": "0.51.1",
+    "@zag-js/tree-view": "0.51.1",
+    "@zag-js/types": "0.51.1"
   },
   "devDependencies": {
     "@biomejs/biome": "1.7.3",
     "@release-it/keep-a-changelog": "5.0.0",
-    "@storybook/addon-a11y": "8.1.1",
-    "@storybook/addon-essentials": "8.1.1",
-    "@storybook/react-vite": "8.1.1",
-    "@storybook/react": "8.1.1",
+    "@storybook/addon-a11y": "8.1.3",
+    "@storybook/addon-essentials": "8.1.3",
+    "@storybook/react-vite": "8.1.3",
+    "@storybook/react": "8.1.3",
     "@testing-library/dom": "10.1.0",
     "@testing-library/jest-dom": "6.4.5",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.6",
-    "@types/react": "18.3.2",
+    "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@vitejs/plugin-react": "4.2.1",
+    "@vitejs/plugin-react": "4.3.0",
     "globby": "14.0.1",
     "jsdom": "24.0.0",
-    "lucide-react": "0.378.0",
+    "lucide-react": "0.379.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-frame-component": "5.2.6",
-    "react-hook-form": "7.51.4",
-    "release-it": "17.2.1",
+    "react-hook-form": "7.51.5",
+    "release-it": "17.3.0",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "8.1.1",
+    "storybook": "8.1.3",
     "typescript": "5.4.5",
     "vite": "5.2.11",
     "vite-plugin-dts": "3.9.1",

package/dist/providers/environment/environment.d.cts

@@ -1,8 +0,0 @@
-import { ReactNode } from 'react';
-import { RootNode } from './use-environment-context';
-
-export interface EnvironmentProps {
-    children?: ReactNode;
-    value?: RootNode | (() => RootNode);
-}
-export declare const Environment: (props: EnvironmentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/providers/environment/environment.d.ts

@@ -1,8 +0,0 @@
-import { ReactNode } from 'react';
-import { RootNode } from './use-environment-context';
-
-export interface EnvironmentProps {
-    children?: ReactNode;
-    value?: RootNode | (() => RootNode);
-}
-export declare const Environment: (props: EnvironmentProps) => import("react/jsx-runtime").JSX.Element;