@ark-ui/react 0.8.0-beta.0 → 0.8.0

package/package.json

@@ -1,10 +1,8 @@
 {
   "name": "@ark-ui/react",
-  "version": "0.8.0-beta.0",
+  "version": "0.8.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
-    "react",
-    "headless",
     "accordion",
     "avatar",
     "carousel",
@@ -14,29 +12,30 @@
     "date picker",
     "dialog",
     "editable",
+    "environment",
     "hover card",
     "menu",
     "number input",
     "pagination",
     "pin input",
     "popover",
+    "presence",
+    "pressable",
     "radio group",
     "range slider",
     "rating group",
+    "segment group",
     "select",
     "slider",
     "splitter",
+    "switch",
     "tabs",
     "tags input",
     "toast",
     "tooltip"
   ],
-  "homepage": "https://github.com/chakra-ui/ark#readme",
+  "homepage": "https://ark-ui.com",
   "license": "MIT",
-  "main": "dist/index.cjs",
-  "files": [
-    "dist"
-  ],
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
@@ -55,99 +54,246 @@
     "test": "vitest",
     "test:ci": "vitest --run --coverage",
     "typecheck": "tsc",
-    "prepack": "clean-package",
-    "postpack": "clean-package restore",
-    "typedocs": "ts-node ../../scripts/generate-type-docs.ts",
-    "storydocs": "ts-node ../../scripts/generate-stories.ts",
+    "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 ../../config/release-it.json"
+    "release-it": "release-it --config ../../release-it.json"
   },
   "dependencies": {
-    "@zag-js/accordion": "0.10.2",
-    "@zag-js/anatomy": "0.10.2",
-    "@zag-js/avatar": "0.10.2",
-    "@zag-js/carousel": "0.10.2",
-    "@zag-js/checkbox": "0.10.2",
-    "@zag-js/color-picker": "0.10.2",
-    "@zag-js/combobox": "0.10.2",
-    "@zag-js/date-picker": "0.10.2",
-    "@zag-js/dialog": "0.10.2",
-    "@zag-js/editable": "0.10.2",
-    "@zag-js/hover-card": "0.10.2",
-    "@zag-js/menu": "0.10.2",
-    "@zag-js/number-input": "0.10.2",
-    "@zag-js/pagination": "0.10.2",
-    "@zag-js/pin-input": "0.10.2",
-    "@zag-js/popover": "0.10.2",
-    "@zag-js/pressable": "0.10.2",
-    "@zag-js/radio-group": "0.10.2",
-    "@zag-js/range-slider": "0.10.2",
-    "@zag-js/rating-group": "0.10.2",
-    "@zag-js/react": "0.10.2",
-    "@zag-js/select": "0.10.2",
-    "@zag-js/slider": "0.10.2",
-    "@zag-js/splitter": "0.10.2",
-    "@zag-js/switch": "0.10.2",
-    "@zag-js/tabs": "0.10.2",
-    "@zag-js/tags-input": "0.10.2",
-    "@zag-js/toast": "0.10.2",
-    "@zag-js/tooltip": "0.10.2",
-    "@zag-js/transition": "0.10.2",
-    "@zag-js/types": "0.10.2"
+    "@zag-js/accordion": "0.12.0",
+    "@zag-js/anatomy": "0.12.0",
+    "@zag-js/avatar": "0.12.0",
+    "@zag-js/carousel": "0.12.0",
+    "@zag-js/checkbox": "0.12.0",
+    "@zag-js/color-picker": "0.12.0",
+    "@zag-js/color-utils": "0.12.0",
+    "@zag-js/combobox": "0.12.0",
+    "@zag-js/date-picker": "0.12.0",
+    "@zag-js/date-utils": "0.12.0",
+    "@zag-js/dialog": "0.12.0",
+    "@zag-js/editable": "0.12.0",
+    "@zag-js/hover-card": "0.12.0",
+    "@zag-js/menu": "0.12.0",
+    "@zag-js/number-input": "0.12.0",
+    "@zag-js/pagination": "0.12.0",
+    "@zag-js/pin-input": "0.12.0",
+    "@zag-js/popover": "0.12.0",
+    "@zag-js/presence": "0.12.0",
+    "@zag-js/pressable": "0.12.0",
+    "@zag-js/radio-group": "0.12.0",
+    "@zag-js/range-slider": "0.12.0",
+    "@zag-js/rating-group": "0.12.0",
+    "@zag-js/react": "0.12.0",
+    "@zag-js/select": "0.12.0",
+    "@zag-js/slider": "0.12.0",
+    "@zag-js/splitter": "0.12.0",
+    "@zag-js/switch": "0.12.0",
+    "@zag-js/tabs": "0.12.0",
+    "@zag-js/tags-input": "0.12.0",
+    "@zag-js/toast": "0.12.0",
+    "@zag-js/tooltip": "0.12.0",
+    "@zag-js/types": "0.12.0"
   },
   "devDependencies": {
-    "@release-it/keep-a-changelog": "3.1.0",
-    "@storybook/addon-a11y": "7.0.23",
-    "@storybook/addon-essentials": "7.0.23",
-    "@storybook/addons": "7.0.23",
-    "@storybook/react": "7.0.23",
-    "@storybook/react-vite": "7.0.23",
+    "@release-it/keep-a-changelog": "4.0.0",
+    "@storybook/addon-a11y": "7.1.0",
+    "@storybook/addon-essentials": "7.1.0",
+    "@storybook/addons": "7.1.0",
+    "@storybook/react": "7.1.0",
+    "@storybook/react-vite": "7.1.0",
     "@testing-library/dom": "9.3.1",
-    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "@types/jsdom": "21.1.1",
-    "@types/react": "18.2.14",
-    "@types/react-dom": "18.2.6",
-    "@types/testing-library__jest-dom": "5.14.6",
-    "@typescript-eslint/eslint-plugin": "5.60.0",
-    "@typescript-eslint/parser": "5.60.0",
-    "@vitejs/plugin-react": "4.0.1",
-    "@vitest/coverage-c8": "0.31.4",
-    "clean-package": "2.2.0",
-    "eslint": "8.43.0",
+    "@types/react": "18.2.15",
+    "@types/react-dom": "18.2.7",
+    "@types/testing-library__jest-dom": "5.14.8",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
+    "@typescript-eslint/parser": "5.62.0",
+    "@vitejs/plugin-react": "4.0.3",
+    "@vitest/coverage-v8": "0.33.0",
+    "eslint": "8.45.0",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "happy-dom": "9.20.3",
+    "globby": "13.2.2",
     "jsdom": "22.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-frame-component": "5.2.6",
-    "release-it": "15.11.0",
+    "release-it": "16.1.2",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "7.0.23",
-    "typescript": "5.1.3",
-    "vite": "4.3.9",
+    "storybook": "7.1.0",
+    "typescript": "5.1.6",
+    "vite": "4.4.4",
     "vite-plugin-dts": "2.3.0",
-    "vitest": "0.31.4"
+    "vitest": "0.33.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
-  "clean-package": "../../config/clean-package.config.json",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "main": "index.cjs",
+  "module": "index.mjs",
+  "types": "index.d.ts",
+  "files": [
+    "./"
+  ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
-    },
-    "switch": {
-      "types": "./dist/switch/index.d.ts",
-      "import": "./dist/switch/index.mjs",
-      "require": "./dist/switch/index.cjs"
+      "types": "./index.d.ts",
+      "import": "./index.mjs",
+      "require": "./index.cjs"
+    },
+    "./accordion": {
+      "types": "./accordion/index.d.ts",
+      "import": "./accordion/index.mjs",
+      "require": "./accordion/index.cjs"
+    },
+    "./avatar": {
+      "types": "./avatar/index.d.ts",
+      "import": "./avatar/index.mjs",
+      "require": "./avatar/index.cjs"
+    },
+    "./carousel": {
+      "types": "./carousel/index.d.ts",
+      "import": "./carousel/index.mjs",
+      "require": "./carousel/index.cjs"
+    },
+    "./checkbox": {
+      "types": "./checkbox/index.d.ts",
+      "import": "./checkbox/index.mjs",
+      "require": "./checkbox/index.cjs"
+    },
+    "./color-picker": {
+      "types": "./color-picker/index.d.ts",
+      "import": "./color-picker/index.mjs",
+      "require": "./color-picker/index.cjs"
+    },
+    "./combobox": {
+      "types": "./combobox/index.d.ts",
+      "import": "./combobox/index.mjs",
+      "require": "./combobox/index.cjs"
+    },
+    "./date-picker": {
+      "types": "./date-picker/index.d.ts",
+      "import": "./date-picker/index.mjs",
+      "require": "./date-picker/index.cjs"
+    },
+    "./dialog": {
+      "types": "./dialog/index.d.ts",
+      "import": "./dialog/index.mjs",
+      "require": "./dialog/index.cjs"
+    },
+    "./editable": {
+      "types": "./editable/index.d.ts",
+      "import": "./editable/index.mjs",
+      "require": "./editable/index.cjs"
+    },
+    "./environment": {
+      "types": "./environment/index.d.ts",
+      "import": "./environment/index.mjs",
+      "require": "./environment/index.cjs"
+    },
+    "./hover-card": {
+      "types": "./hover-card/index.d.ts",
+      "import": "./hover-card/index.mjs",
+      "require": "./hover-card/index.cjs"
+    },
+    "./menu": {
+      "types": "./menu/index.d.ts",
+      "import": "./menu/index.mjs",
+      "require": "./menu/index.cjs"
+    },
+    "./number-input": {
+      "types": "./number-input/index.d.ts",
+      "import": "./number-input/index.mjs",
+      "require": "./number-input/index.cjs"
+    },
+    "./pagination": {
+      "types": "./pagination/index.d.ts",
+      "import": "./pagination/index.mjs",
+      "require": "./pagination/index.cjs"
+    },
+    "./pin-input": {
+      "types": "./pin-input/index.d.ts",
+      "import": "./pin-input/index.mjs",
+      "require": "./pin-input/index.cjs"
+    },
+    "./popover": {
+      "types": "./popover/index.d.ts",
+      "import": "./popover/index.mjs",
+      "require": "./popover/index.cjs"
+    },
+    "./presence": {
+      "types": "./presence/index.d.ts",
+      "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",
+      "require": "./rating-group/index.cjs"
+    },
+    "./segment-group": {
+      "types": "./segment-group/index.d.ts",
+      "import": "./segment-group/index.mjs",
+      "require": "./segment-group/index.cjs"
+    },
+    "./select": {
+      "types": "./select/index.d.ts",
+      "import": "./select/index.mjs",
+      "require": "./select/index.cjs"
+    },
+    "./slider": {
+      "types": "./slider/index.d.ts",
+      "import": "./slider/index.mjs",
+      "require": "./slider/index.cjs"
+    },
+    "./splitter": {
+      "types": "./splitter/index.d.ts",
+      "import": "./splitter/index.mjs",
+      "require": "./splitter/index.cjs"
+    },
+    "./switch": {
+      "types": "./switch/index.d.ts",
+      "import": "./switch/index.mjs",
+      "require": "./switch/index.cjs"
+    },
+    "./tabs": {
+      "types": "./tabs/index.d.ts",
+      "import": "./tabs/index.mjs",
+      "require": "./tabs/index.cjs"
+    },
+    "./tags-input": {
+      "types": "./tags-input/index.d.ts",
+      "import": "./tags-input/index.mjs",
+      "require": "./tags-input/index.cjs"
+    },
+    "./toast": {
+      "types": "./toast/index.d.ts",
+      "import": "./toast/index.mjs",
+      "require": "./toast/index.cjs"
+    },
+    "./tooltip": {
+      "types": "./tooltip/index.d.ts",
+      "import": "./tooltip/index.mjs",
+      "require": "./tooltip/index.cjs"
     },
     "./package.json": "./package.json"
   }

package/pagination/index.cjs

@@ -0,0 +1,26 @@
+'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 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');
+
+
+
+exports.Pagination = pagination.Pagination;
+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;

package/pagination/index.d.ts

@@ -0,0 +1,9 @@
+export { Pagination, type PaginationProps } from './pagination';
+export { usePaginationContext } from './pagination-context';
+export { PaginationEllipsis, type PaginationEllipsisProps } from './pagination-ellipsis';
+export { PaginationList, type PaginationListProps } from './pagination-list';
+export { PaginationListItem, type PaginationListItemProps } from './pagination-list-item';
+export { PaginationNextPageTrigger, type PaginationNextPageTriggerProps, } from './pagination-next-page-trigger';
+export { PaginationPageTrigger, type PaginationPageTriggerProps } from './pagination-page-trigger';
+export { PaginationPrevPageTrigger, type PaginationPrevPageTriggerProps, } from './pagination-prev-page-trigger';
+export { paginationAnatomy } from './pagination.anatomy';

package/pagination/index.mjs

@@ -0,0 +1,10 @@
+'use client';
+export { Pagination } from './pagination.mjs';
+export { usePaginationContext } from './pagination-context.mjs';
+export { PaginationEllipsis } from './pagination-ellipsis.mjs';
+export { PaginationList } from './pagination-list.mjs';
+export { PaginationListItem } from './pagination-list-item.mjs';
+export { PaginationNextPageTrigger } from './pagination-next-page-trigger.mjs';
+export { PaginationPageTrigger } from './pagination-page-trigger.mjs';
+export { PaginationPrevPageTrigger } from './pagination-prev-page-trigger.mjs';
+export { paginationAnatomy } from './pagination.anatomy.mjs';

package/pagination/pagination-context.cjs

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [PaginationProvider, usePaginationContext] = createContext.createContext({
+  name: "PaginationContext",
+  hookName: "usePaginationContext",
+  providerName: "<PaginationProvider />"
+});
+
+exports.PaginationProvider = PaginationProvider;
+exports.usePaginationContext = usePaginationContext;

package/pagination/pagination-context.d.ts

@@ -0,0 +1,11 @@
+import type { PublicApi } from '@zag-js/pagination';
+import type { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { type UsePaginationReturn } from './use-pagination';
+export type PaginationContext = UsePaginationReturn;
+export declare const PaginationProvider: Provider<PublicApi<JSX.IntrinsicElements & {
+    element: HTMLAttributes<HTMLElement>;
+    style: CSSProperties;
+}>>, usePaginationContext: () => PublicApi<JSX.IntrinsicElements & {
+    element: HTMLAttributes<HTMLElement>;
+    style: CSSProperties;
+}>;

package/pagination/pagination-context.mjs

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../create-context.mjs';
+
+const [PaginationProvider, usePaginationContext] = createContext({
+  name: "PaginationContext",
+  hookName: "usePaginationContext",
+  providerName: "<PaginationProvider />"
+});
+
+export { PaginationProvider, usePaginationContext };

package/pagination/pagination-ellipsis.cjs

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const forwardRef = require('../forward-ref.cjs');
+const paginationContext = require('./pagination-context.cjs');
+
+const PaginationEllipsis = forwardRef.forwardRef((props, ref) => {
+  const [ellipsisProps, localProps] = createSplitProps.createSplitProps()(props, ["index"]);
+  const { getEllipsisProps } = paginationContext.usePaginationContext();
+  const mergedProps = react.mergeProps(getEllipsisProps(ellipsisProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
+
+exports.PaginationEllipsis = PaginationEllipsis;

package/pagination/pagination-ellipsis.d.ts

@@ -0,0 +1,6 @@
+import type { ForwardRefExoticComponent } from 'react';
+import type { EllipsisProps } from '@zag-js/pagination';
+import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import { type Assign } from '../types';
+export type PaginationEllipsisProps = Assign<HTMLArkProps<'div'>, EllipsisProps>;
+export declare const PaginationEllipsis: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, EllipsisProps>>;

package/pagination/pagination-ellipsis.mjs

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { forwardRef } from '../forward-ref.mjs';
+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);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+
+export { PaginationEllipsis };

package/pagination/pagination-list-item.cjs

@@ -0,0 +1,13 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const factory = require('../factory.cjs');
+const forwardRef = require('../forward-ref.cjs');
+const pagination_anatomy = require('./pagination.anatomy.cjs');
+
+const PaginationListItem = forwardRef.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(factory.ark.li, { ...pagination_anatomy.parts.listItem.attrs, ...props, ref }));
+
+exports.PaginationListItem = PaginationListItem;

package/pagination/pagination-list-item.d.ts

@@ -0,0 +1,5 @@
+import type { Assign } from '../types';
+import type { ForwardRefExoticComponent } from 'react';
+import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+export type PaginationListItemProps = HTMLArkProps<'li'>;
+export declare const PaginationListItem: ForwardRefExoticComponent<Assign<AsChildComponentProps<"li">, Record<never, never>>>;

package/pagination/pagination-list-item.mjs

@@ -0,0 +1,9 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { ark } from '../factory.mjs';
+import { forwardRef } from '../forward-ref.mjs';
+import { parts } from './pagination.anatomy.mjs';
+
+const PaginationListItem = forwardRef((props, ref) => /* @__PURE__ */ jsx(ark.li, { ...parts.listItem.attrs, ...props, ref }));
+
+export { PaginationListItem };

package/pagination/pagination-list.cjs

@@ -0,0 +1,13 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const factory = require('../factory.cjs');
+const forwardRef = require('../forward-ref.cjs');
+const pagination_anatomy = require('./pagination.anatomy.cjs');
+
+const PaginationList = forwardRef.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(factory.ark.ul, { ...pagination_anatomy.parts.list.attrs, ...props, ref }));
+
+exports.PaginationList = PaginationList;

package/pagination/pagination-list.d.ts

@@ -0,0 +1,5 @@
+import type { Assign } from '../types';
+import type { ForwardRefExoticComponent } from 'react';
+import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+export type PaginationListProps = HTMLArkProps<'ul'>;
+export declare const PaginationList: ForwardRefExoticComponent<Assign<AsChildComponentProps<"ul">, Record<never, never>>>;

package/pagination/pagination-list.mjs

@@ -0,0 +1,9 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { ark } from '../factory.mjs';
+import { forwardRef } from '../forward-ref.mjs';
+import { parts } from './pagination.anatomy.mjs';
+
+const PaginationList = forwardRef((props, ref) => /* @__PURE__ */ jsx(ark.ul, { ...parts.list.attrs, ...props, ref }));
+
+export { PaginationList };

package/pagination/pagination-next-page-trigger.cjs

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
+const factory = require('../factory.cjs');
+const forwardRef = require('../forward-ref.cjs');
+const paginationContext = require('./pagination-context.cjs');
+
+const PaginationNextPageTrigger = forwardRef.forwardRef((props, ref) => {
+  const { nextPageTriggerProps } = paginationContext.usePaginationContext();
+  const mergedProps = react.mergeProps(nextPageTriggerProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+});
+
+exports.PaginationNextPageTrigger = PaginationNextPageTrigger;

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

@@ -0,0 +1,5 @@
+import type { Assign } from '../types';
+import type { ForwardRefExoticComponent } from 'react';
+import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+export type PaginationNextPageTriggerProps = HTMLArkProps<'button'>;
+export declare const PaginationNextPageTrigger: ForwardRefExoticComponent<Assign<AsChildComponentProps<"button">, Record<never, never>>>;

package/pagination/pagination-next-page-trigger.mjs

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

package/pagination/pagination-page-trigger.cjs

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const forwardRef = require('../forward-ref.cjs');
+const paginationContext = require('./pagination-context.cjs');
+
+const PaginationPageTrigger = forwardRef.forwardRef(
+  (props, ref) => {
+    const [paginationProps, localProps] = createSplitProps.createSplitProps()(props, [
+      "type",
+      "value"
+    ]);
+    const { getPageTriggerProps } = paginationContext.usePaginationContext();
+    const mergedProps = react.mergeProps(getPageTriggerProps(paginationProps), localProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+  }
+);
+
+exports.PaginationPageTrigger = PaginationPageTrigger;

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

@@ -0,0 +1,6 @@
+import type { ForwardRefExoticComponent } from 'react';
+import type { PageTriggerProps } from '@zag-js/pagination';
+import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export type PaginationPageTriggerProps = Assign<HTMLArkProps<'button'>, PageTriggerProps>;
+export declare const PaginationPageTrigger: ForwardRefExoticComponent<Assign<AsChildComponentProps<"button">, PaginationPageTriggerProps>>;