@ark-ui/react 0.15.0 → 1.0.0-beta.0

package/number-input/number-input-scrubber.mjs

@@ -7,8 +7,8 @@ import { useNumberInputContext } from './number-input-context.mjs';
 
 const NumberInputScrubber = forwardRef(
   (props, ref) => {
-    const { scrubberProps } = useNumberInputContext();
-    const mergedProps = mergeProps(scrubberProps, props);
+    const api = useNumberInputContext();
+    const mergedProps = mergeProps(api.scrubberProps, props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

package/number-input/number-input.cjs

@@ -21,33 +21,29 @@ const NumberInput = react.forwardRef((props, ref) => {
     "disabled",
     "focusInputOnChange",
     "form",
-    "format",
+    "formatOptions",
     "getRootNode",
     "id",
     "ids",
     "inputMode",
     "invalid",
+    "locale",
     "max",
-    "maxFractionDigits",
     "min",
-    "minFractionDigits",
     "name",
-    "onBlur",
-    "onChange",
-    "onFocus",
-    "onInvalid",
-    "parse",
+    "onFocusChange",
+    "onValueChange",
+    "onValueInvalid",
     "pattern",
     "readOnly",
     "spinOnPress",
     "step",
     "translations",
-    "validateCharacter",
     "value"
   ]);
-  const pinInput = useNumberInput.useNumberInput(useNumberInputProps);
-  const mergedProps = react$1.mergeProps(pinInput.rootProps, divProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(numberInputContext.NumberInputProvider, { value: pinInput, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+  const api = useNumberInput.useNumberInput(useNumberInputProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(numberInputContext.NumberInputProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
 NumberInput.displayName = "NumberInput";
 

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

@@ -3,5 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UseNumberInputProps } from './use-number-input';
-export type NumberInputProps = Assign<HTMLArkProps<'div'>, UseNumberInputProps>;
-export declare const NumberInput: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseNumberInputProps> & UseNumberInputProps & RefAttributes<HTMLDivElement>>;
+export interface NumberInputProps extends Assign<HTMLArkProps<'div'>, UseNumberInputProps> {
+}
+export declare const NumberInput: ForwardRefExoticComponent<NumberInputProps & RefAttributes<HTMLDivElement>>;

package/number-input/number-input.mjs

@@ -17,33 +17,29 @@ const NumberInput = forwardRef((props, ref) => {
     "disabled",
     "focusInputOnChange",
     "form",
-    "format",
+    "formatOptions",
     "getRootNode",
     "id",
     "ids",
     "inputMode",
     "invalid",
+    "locale",
     "max",
-    "maxFractionDigits",
     "min",
-    "minFractionDigits",
     "name",
-    "onBlur",
-    "onChange",
-    "onFocus",
-    "onInvalid",
-    "parse",
+    "onFocusChange",
+    "onValueChange",
+    "onValueInvalid",
     "pattern",
     "readOnly",
     "spinOnPress",
     "step",
     "translations",
-    "validateCharacter",
     "value"
   ]);
-  const pinInput = useNumberInput(useNumberInputProps);
-  const mergedProps = mergeProps(pinInput.rootProps, divProps);
-  return /* @__PURE__ */ jsx(NumberInputProvider, { value: pinInput, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+  const api = useNumberInput(useNumberInputProps);
+  const mergedProps = mergeProps(api.rootProps, divProps);
+  return /* @__PURE__ */ jsx(NumberInputProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
 NumberInput.displayName = "NumberInput";
 

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

@@ -29,18 +29,19 @@ function _interopNamespaceDefault(e) {
 
 const numberInput__namespace = /*#__PURE__*/_interopNamespaceDefault(numberInput);
 
-const useNumberInput = (props) => {
-  const getRootNode = environmentContext.useEnvironmentContext();
+const useNumberInput = (props = {}) => {
   const initialContext = {
     id: react.useId(),
-    getRootNode,
+    getRootNode: environmentContext.useEnvironmentContext(),
     ...props,
     value: props.defaultValue
   };
   const context = {
     ...initialContext,
     value: props.value,
-    onChange: useEvent.useEvent(props.onChange, { sync: true })
+    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
+    onValueInvalid: useEvent.useEvent(props.onValueInvalid),
+    onFocusChange: useEvent.useEvent(props.onFocusChange)
   };
   const [state, send] = react$1.useMachine(numberInput__namespace.machine(initialContext), { context });
   return numberInput__namespace.connect(state, send, react$1.normalizeProps);

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

@@ -1,7 +1,12 @@
 import * as numberInput from '@zag-js/number-input';
+import { type PropTypes } from '@zag-js/react';
 import { type Optional } from '../types';
 export interface UseNumberInputProps extends Optional<numberInput.Context, 'id'> {
+    /**
+     * The initial value of the number input.
+     */
     defaultValue?: numberInput.Context['value'];
 }
-export type UseNumberInputReturn = numberInput.Api;
-export declare const useNumberInput: (props: UseNumberInputProps) => UseNumberInputReturn;
+export interface UseNumberInputReturn extends numberInput.Api<PropTypes> {
+}
+export declare const useNumberInput: (props?: UseNumberInputProps) => UseNumberInputReturn;

package/number-input/use-number-input.mjs

@@ -6,18 +6,19 @@ import '../environment/index.mjs';
 import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
-const useNumberInput = (props) => {
-  const getRootNode = useEnvironmentContext();
+const useNumberInput = (props = {}) => {
   const initialContext = {
     id: useId(),
-    getRootNode,
+    getRootNode: useEnvironmentContext(),
     ...props,
     value: props.defaultValue
   };
   const context = {
     ...initialContext,
     value: props.value,
-    onChange: useEvent(props.onChange, { sync: true })
+    onValueChange: useEvent(props.onValueChange, { sync: true }),
+    onValueInvalid: useEvent(props.onValueInvalid),
+    onFocusChange: useEvent(props.onFocusChange)
   };
   const [state, send] = useMachine(numberInput.machine(initialContext), { context });
   return numberInput.connect(state, send, normalizeProps);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "0.15.0",
+  "version": "1.0.0-beta.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -20,9 +20,7 @@
     "pin input",
     "popover",
     "presence",
-    "pressable",
     "radio group",
-    "range slider",
     "rating group",
     "segment group",
     "select",
@@ -44,7 +42,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/chakra-ui/ark.git",
-    "directory": "packages/react"
+    "directory": "packages/frameworks/react"
   },
   "bugs": {
     "url": "https://github.com/chakra-ui/ark/issues"
@@ -58,79 +56,79 @@
     "storydocs": "pnpm --filter=@ark-ui/scripts document:stories react",
     "typedocs": "pnpm --filter=@ark-ui/scripts document:types react",
     "storybook": "storybook dev -p 6006",
-    "release-it": "release-it --config ../../release-it.json"
+    "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@zag-js/accordion": "0.19.1",
-    "@zag-js/anatomy": "0.19.1",
-    "@zag-js/avatar": "0.19.1",
-    "@zag-js/carousel": "0.19.1",
-    "@zag-js/checkbox": "0.19.1",
-    "@zag-js/color-picker": "0.19.1",
-    "@zag-js/color-utils": "0.19.1",
-    "@zag-js/combobox": "0.19.1",
-    "@zag-js/core": "0.19.1",
-    "@zag-js/date-picker": "0.19.1",
-    "@zag-js/date-utils": "0.19.1",
-    "@zag-js/dialog": "0.19.1",
-    "@zag-js/editable": "0.19.1",
-    "@zag-js/hover-card": "0.19.1",
-    "@zag-js/menu": "0.19.1",
-    "@zag-js/number-input": "0.19.1",
-    "@zag-js/pagination": "0.19.1",
-    "@zag-js/pin-input": "0.19.1",
-    "@zag-js/popover": "0.19.1",
-    "@zag-js/presence": "0.19.1",
-    "@zag-js/pressable": "0.19.1",
-    "@zag-js/radio-group": "0.19.1",
-    "@zag-js/range-slider": "0.19.1",
-    "@zag-js/rating-group": "0.19.1",
-    "@zag-js/react": "0.19.1",
-    "@zag-js/select": "0.19.1",
-    "@zag-js/slider": "0.19.1",
-    "@zag-js/splitter": "0.19.1",
-    "@zag-js/switch": "0.19.1",
-    "@zag-js/tabs": "0.19.1",
-    "@zag-js/tags-input": "0.19.1",
-    "@zag-js/toast": "0.19.1",
-    "@zag-js/toggle-group": "0.19.1",
-    "@zag-js/tooltip": "0.19.1",
-    "@zag-js/types": "0.19.1"
+    "@ark-ui/anatomy": "workspace:*",
+    "@zag-js/accordion": "0.26.0",
+    "@zag-js/anatomy": "0.26.0",
+    "@zag-js/avatar": "0.26.0",
+    "@zag-js/carousel": "0.26.0",
+    "@zag-js/checkbox": "0.26.0",
+    "@zag-js/color-picker": "0.26.0",
+    "@zag-js/color-utils": "0.26.0",
+    "@zag-js/combobox": "0.26.0",
+    "@zag-js/core": "0.26.0",
+    "@zag-js/date-picker": "0.26.0",
+    "@zag-js/date-utils": "0.26.0",
+    "@zag-js/dialog": "0.26.0",
+    "@zag-js/editable": "0.26.0",
+    "@zag-js/hover-card": "0.26.0",
+    "@zag-js/menu": "0.26.0",
+    "@zag-js/number-input": "0.26.0",
+    "@zag-js/pagination": "0.26.0",
+    "@zag-js/pin-input": "0.26.0",
+    "@zag-js/popover": "0.26.0",
+    "@zag-js/presence": "0.26.0",
+    "@zag-js/radio-group": "0.26.0",
+    "@zag-js/rating-group": "0.26.0",
+    "@zag-js/react": "0.26.0",
+    "@zag-js/select": "0.26.0",
+    "@zag-js/slider": "0.26.0",
+    "@zag-js/splitter": "0.26.0",
+    "@zag-js/switch": "0.26.0",
+    "@zag-js/tabs": "0.26.0",
+    "@zag-js/tags-input": "0.26.0",
+    "@zag-js/toast": "0.26.0",
+    "@zag-js/toggle-group": "0.26.0",
+    "@zag-js/tooltip": "0.26.0",
+    "@zag-js/types": "0.26.0"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "4.0.0",
-    "@storybook/addon-a11y": "7.4.1",
-    "@storybook/addon-essentials": "7.4.1",
-    "@storybook/addons": "7.4.1",
-    "@storybook/react": "7.4.1",
-    "@storybook/react-vite": "7.4.1",
-    "@testing-library/dom": "9.3.1",
-    "@testing-library/jest-dom": "6.1.3",
+    "@storybook/addon-a11y": "7.4.6",
+    "@storybook/addon-essentials": "7.4.6",
+    "@storybook/addons": "7.4.6",
+    "@storybook/react": "7.4.6",
+    "@storybook/react-vite": "7.4.6",
+    "@testing-library/dom": "9.3.3",
+    "@testing-library/jest-dom": "6.1.4",
     "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "14.4.3",
-    "@types/jsdom": "21.1.2",
-    "@types/react": "18.2.21",
-    "@types/react-dom": "18.2.7",
+    "@testing-library/user-event": "14.5.1",
+    "@types/jsdom": "21.1.3",
+    "@types/react": "18.2.28",
+    "@types/react-dom": "18.2.13",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.7.0",
-    "@typescript-eslint/parser": "6.7.0",
-    "@vitejs/plugin-react": "4.0.4",
-    "@vitest/coverage-v8": "0.34.3",
-    "eslint": "8.49.0",
+    "@typescript-eslint/eslint-plugin": "6.7.5",
+    "@typescript-eslint/parser": "6.7.5",
+    "@vitejs/plugin-react": "4.1.0",
+    "@vitest/coverage-v8": "0.34.6",
+    "eslint": "8.51.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "globby": "13.2.2",
     "jsdom": "22.1.0",
+    "lucide-react": "0.287.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-frame-component": "5.2.6",
-    "release-it": "16.1.5",
+    "release-it": "16.2.1",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "7.4.1",
+    "storybook": "7.4.6",
     "typescript": "5.2.2",
-    "vite": "4.4.9",
-    "vite-plugin-dts": "3.5.3",
-    "vitest": "0.34.3"
+    "vite": "4.4.11",
+    "vite-plugin-dts": "3.6.0",
+    "vitest": "0.34.6"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -233,21 +231,11 @@
       "import": "./presence/index.mjs",
       "require": "./presence/index.cjs"
     },
-    "./pressable": {
-      "types": "./pressable/index.d.ts",
-      "import": "./pressable/index.mjs",
-      "require": "./pressable/index.cjs"
-    },
     "./radio-group": {
       "types": "./radio-group/index.d.ts",
       "import": "./radio-group/index.mjs",
       "require": "./radio-group/index.cjs"
     },
-    "./range-slider": {
-      "types": "./range-slider/index.d.ts",
-      "import": "./range-slider/index.mjs",
-      "require": "./range-slider/index.cjs"
-    },
     "./rating-group": {
       "types": "./rating-group/index.d.ts",
       "import": "./rating-group/index.mjs",

package/pagination/index.cjs

@@ -6,29 +6,21 @@ 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 paginationList = require('./pagination-list.cjs');
-const paginationListItem = require('./pagination-list-item.cjs');
-const paginationNextPageTrigger = require('./pagination-next-page-trigger.cjs');
-const paginationPageTrigger = require('./pagination-page-trigger.cjs');
-const paginationPrevPageTrigger = require('./pagination-prev-page-trigger.cjs');
-const pagination_anatomy = require('./pagination.anatomy.cjs');
+const paginationItem = require('./pagination-item.cjs');
+const paginationNextTrigger = require('./pagination-next-trigger.cjs');
+const paginationPrevTrigger = require('./pagination-prev-trigger.cjs');
 
 const Pagination = Object.assign(pagination.Pagination, {
   Root: pagination.Pagination,
   Ellipsis: paginationEllipsis.PaginationEllipsis,
-  List: paginationList.PaginationList,
-  ListItem: paginationListItem.PaginationListItem,
-  NextPageTrigger: paginationNextPageTrigger.PaginationNextPageTrigger,
-  PageTrigger: paginationPageTrigger.PaginationPageTrigger,
-  PrevPageTrigger: paginationPrevPageTrigger.PaginationPrevPageTrigger
+  Item: paginationItem.PaginationItem,
+  NextTrigger: paginationNextTrigger.PaginationNextTrigger,
+  PrevTrigger: paginationPrevTrigger.PaginationPrevTrigger
 });
 
 exports.usePaginationContext = paginationContext.usePaginationContext;
 exports.PaginationEllipsis = paginationEllipsis.PaginationEllipsis;
-exports.PaginationList = paginationList.PaginationList;
-exports.PaginationListItem = paginationListItem.PaginationListItem;
-exports.PaginationNextPageTrigger = paginationNextPageTrigger.PaginationNextPageTrigger;
-exports.PaginationPageTrigger = paginationPageTrigger.PaginationPageTrigger;
-exports.PaginationPrevPageTrigger = paginationPrevPageTrigger.PaginationPrevPageTrigger;
-exports.paginationAnatomy = pagination_anatomy.paginationAnatomy;
+exports.PaginationItem = paginationItem.PaginationItem;
+exports.PaginationNextTrigger = paginationNextTrigger.PaginationNextTrigger;
+exports.PaginationPrevTrigger = paginationPrevTrigger.PaginationPrevTrigger;
 exports.Pagination = Pagination;

package/pagination/index.d.ts

@@ -1,38 +1,17 @@
-import { EllipsisProps, PageTriggerProps } from '@zag-js/pagination';
-import { UsePaginationProps, UsePaginationReturn } from './use-pagination';
-import { HTMLArkProps } from '..';
-import { Assign } from '../types';
-import { ForwardRefExoticComponent, ReactNode, RefAttributes, DetailedHTMLProps, HTMLAttributes, LiHTMLAttributes, ButtonHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type PaginationProps } from './pagination';
 import { usePaginationContext, type PaginationContext } from './pagination-context';
 import { PaginationEllipsis, type PaginationEllipsisProps } from './pagination-ellipsis';
-import { PaginationList, type PaginationListProps } from './pagination-list';
-import { PaginationListItem, type PaginationListItemProps } from './pagination-list-item';
-import { PaginationNextPageTrigger, type PaginationNextPageTriggerProps } from './pagination-next-page-trigger';
-import { PaginationPageTrigger, type PaginationPageTriggerProps } from './pagination-page-trigger';
-import { PaginationPrevPageTrigger, type PaginationPrevPageTriggerProps } from './pagination-prev-page-trigger';
-import { paginationAnatomy } from './pagination.anatomy';
-declare const Pagination: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"nav">, UsePaginationProps>, "children"> & {
-    children?: ReactNode | ((pages: UsePaginationReturn) => ReactNode);
-} & RefAttributes<HTMLElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"nav">, UsePaginationProps>, "children"> & {
-        children?: ReactNode | ((pages: UsePaginationReturn) => ReactNode);
-    } & RefAttributes<HTMLElement>>;
-    Ellipsis: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "index"> & EllipsisProps & RefAttributes<HTMLDivElement>>;
-    List: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLUListElement>>;
-    ListItem: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLLIElement>>;
-    NextPageTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLButtonElement>>;
-    PageTrigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof PageTriggerProps> & PageTriggerProps & RefAttributes<HTMLButtonElement>>;
-    PrevPageTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLButtonElement>>;
+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, PaginationList, PaginationListItem, PaginationNextPageTrigger, PaginationPageTrigger, PaginationPrevPageTrigger, paginationAnatomy, usePaginationContext, };
-export type { PaginationContext, PaginationEllipsisProps, PaginationListItemProps, PaginationListProps, PaginationNextPageTriggerProps, PaginationPageTriggerProps, PaginationPrevPageTriggerProps, PaginationProps, };
+export { Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, usePaginationContext, };
+export type { PaginationContext, PaginationEllipsisProps, PaginationItemProps, PaginationNextTriggerProps, PaginationPrevTriggerProps, PaginationProps, };

package/pagination/index.mjs

@@ -2,21 +2,16 @@
 import { Pagination as Pagination$1 } from './pagination.mjs';
 export { usePaginationContext } from './pagination-context.mjs';
 import { PaginationEllipsis } from './pagination-ellipsis.mjs';
-import { PaginationList } from './pagination-list.mjs';
-import { PaginationListItem } from './pagination-list-item.mjs';
-import { PaginationNextPageTrigger } from './pagination-next-page-trigger.mjs';
-import { PaginationPageTrigger } from './pagination-page-trigger.mjs';
-import { PaginationPrevPageTrigger } from './pagination-prev-page-trigger.mjs';
-export { paginationAnatomy } from './pagination.anatomy.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,
-  List: PaginationList,
-  ListItem: PaginationListItem,
-  NextPageTrigger: PaginationNextPageTrigger,
-  PageTrigger: PaginationPageTrigger,
-  PrevPageTrigger: PaginationPrevPageTrigger
+  Item: PaginationItem,
+  NextTrigger: PaginationNextTrigger,
+  PrevTrigger: PaginationPrevTrigger
 });
 
-export { Pagination, PaginationEllipsis, PaginationList, PaginationListItem, PaginationNextPageTrigger, PaginationPageTrigger, PaginationPrevPageTrigger };
+export { Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger };

package/pagination/pagination-context.d.ts

@@ -1,5 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
 import { type UsePaginationReturn } from './use-pagination';
-export type PaginationContext = UsePaginationReturn;
-export declare const PaginationProvider: Provider<UsePaginationReturn>, usePaginationContext: () => UsePaginationReturn;
+export interface PaginationContext extends UsePaginationReturn {
+}
+export declare const PaginationProvider: Provider<PaginationContext>, usePaginationContext: () => PaginationContext;

package/pagination/pagination-ellipsis.cjs

@@ -13,8 +13,8 @@ const paginationContext = require('./pagination-context.cjs');
 const PaginationEllipsis = react.forwardRef(
   (props, ref) => {
     const [ellipsisProps, localProps] = createSplitProps.createSplitProps()(props, ["index"]);
-    const { getEllipsisProps } = paginationContext.usePaginationContext();
-    const mergedProps = react$1.mergeProps(getEllipsisProps(ellipsisProps), localProps);
+    const api = paginationContext.usePaginationContext();
+    const mergedProps = react$1.mergeProps(api.getEllipsisProps(ellipsisProps), localProps);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

package/pagination/pagination-ellipsis.d.ts

@@ -3,5 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import type { EllipsisProps } from '@zag-js/pagination';
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
-export type PaginationEllipsisProps = Assign<HTMLArkProps<'div'>, EllipsisProps>;
-export declare const PaginationEllipsis: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "index"> & EllipsisProps & RefAttributes<HTMLDivElement>>;
+export interface PaginationEllipsisProps extends Assign<HTMLArkProps<'div'>, EllipsisProps> {
+}
+export declare const PaginationEllipsis: ForwardRefExoticComponent<PaginationEllipsisProps & RefAttributes<HTMLDivElement>>;

package/pagination/pagination-ellipsis.mjs

@@ -9,8 +9,8 @@ import { usePaginationContext } from './pagination-context.mjs';
 const PaginationEllipsis = forwardRef(
   (props, ref) => {
     const [ellipsisProps, localProps] = createSplitProps()(props, ["index"]);
-    const { getEllipsisProps } = usePaginationContext();
-    const mergedProps = mergeProps(getEllipsisProps(ellipsisProps), localProps);
+    const api = usePaginationContext();
+    const mergedProps = mergeProps(api.getEllipsisProps(ellipsisProps), localProps);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

package/pagination/pagination-item.cjs

@@ -0,0 +1,21 @@
+'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 paginationContext = require('./pagination-context.cjs');
+
+const PaginationItem = react.forwardRef((props, ref) => {
+  const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ["type", "value"]);
+  const api = paginationContext.usePaginationContext();
+  const mergedProps = react$1.mergeProps(api.getItemProps(itemProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+});
+PaginationItem.displayName = "PaginationItem";
+
+exports.PaginationItem = PaginationItem;

package/pagination/pagination-item.d.ts

@@ -0,0 +1,8 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import type { ItemProps } from '@zag-js/pagination';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export interface PaginationItemProps extends Assign<HTMLArkProps<'button'>, ItemProps> {
+}
+export declare const PaginationItem: ForwardRefExoticComponent<PaginationItemProps & RefAttributes<HTMLButtonElement>>;

package/pagination/pagination-item.mjs

@@ -0,0 +1,17 @@
+'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 { usePaginationContext } from './pagination-context.mjs';
+
+const PaginationItem = forwardRef((props, ref) => {
+  const [itemProps, localProps] = createSplitProps()(props, ["type", "value"]);
+  const api = usePaginationContext();
+  const mergedProps = mergeProps(api.getItemProps(itemProps), localProps);
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
+PaginationItem.displayName = "PaginationItem";
+
+export { PaginationItem };

package/pagination/pagination-next-trigger.cjs

@@ -0,0 +1,21 @@
+'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 factory = require('../factory.cjs');
+const paginationContext = require('./pagination-context.cjs');
+
+const PaginationNextTrigger = react.forwardRef(
+  (props, ref) => {
+    const api = paginationContext.usePaginationContext();
+    const mergedProps = react$1.mergeProps(api.nextTriggerProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+  }
+);
+PaginationNextTrigger.displayName = "PaginationNextTrigger";
+
+exports.PaginationNextTrigger = PaginationNextTrigger;

package/pagination/pagination-next-trigger.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface PaginationNextTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const PaginationNextTrigger: ForwardRefExoticComponent<PaginationNextTriggerProps & RefAttributes<HTMLButtonElement>>;

package/pagination/pagination-next-trigger.mjs

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { usePaginationContext } from './pagination-context.mjs';
+
+const PaginationNextTrigger = forwardRef(
+  (props, ref) => {
+    const api = usePaginationContext();
+    const mergedProps = mergeProps(api.nextTriggerProps, props);
+    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+  }
+);
+PaginationNextTrigger.displayName = "PaginationNextTrigger";
+
+export { PaginationNextTrigger };