@ark-ui/react 0.9.0 → 0.10.0-beta.1

package/number-input/number-input-increment-trigger.cjs

@@ -4,16 +4,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
-require('react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const numberInputContext = require('./number-input-context.cjs');
 
-const NumberInputIncrementTrigger = forwardRef.forwardRef((props, ref) => {
+const NumberInputIncrementTrigger = react.forwardRef((props, ref) => {
   const { incrementTriggerProps } = numberInputContext.useNumberInputContext();
-  const mergedProps = react.mergeProps(incrementTriggerProps, props);
+  const mergedProps = react$1.mergeProps(incrementTriggerProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
 });
+NumberInputIncrementTrigger.displayName = "NumberInputIncrementTrigger";
 
 exports.NumberInputIncrementTrigger = NumberInputIncrementTrigger;

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

@@ -1,7 +1,8 @@
-import type { AsChildComponentProps } from '../factory';
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent, type ReactElement } from 'react';
-export type NumberInputIncrementTriggerProps = {
-    children: ReactElement;
-};
-export declare const NumberInputIncrementTrigger: ForwardRefExoticComponent<Assign<AsChildComponentProps<"button">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type NumberInputIncrementTriggerProps = ComponentPropsWithoutRef<typeof ark.button>;
+export declare const NumberInputIncrementTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLButtonElement>>;

package/number-input/number-input-increment-trigger.mjs

@@ -1,9 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
-import 'react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useNumberInputContext } from './number-input-context.mjs';
 
 const NumberInputIncrementTrigger = forwardRef((props, ref) => {
@@ -11,5 +10,6 @@ const NumberInputIncrementTrigger = forwardRef((props, ref) => {
   const mergedProps = mergeProps(incrementTriggerProps, props);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
 });
+NumberInputIncrementTrigger.displayName = "NumberInputIncrementTrigger";
 
 export { NumberInputIncrementTrigger };

package/number-input/number-input-label.cjs

@@ -4,15 +4,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const numberInputContext = require('./number-input-context.cjs');
 
-const NumberInputLabel = forwardRef.forwardRef((props, ref) => {
-  const { labelProps } = numberInputContext.useNumberInputContext();
-  const mergedProps = react.mergeProps(labelProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
-});
+const NumberInputLabel = react.forwardRef(
+  (props, ref) => {
+    const { labelProps } = numberInputContext.useNumberInputContext();
+    const mergedProps = react$1.mergeProps(labelProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+  }
+);
+NumberInputLabel.displayName = "NumberInputLabel";
 
 exports.NumberInputLabel = NumberInputLabel;

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

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type NumberInputLabelProps = HTMLArkProps<'label'>;
-export declare const NumberInputLabel: ForwardRefExoticComponent<Assign<AsChildComponentProps<"label">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type NumberInputLabelProps = ComponentPropsWithoutRef<typeof ark.label>;
+export declare const NumberInputLabel: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+    ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLLabelElement>>;

package/number-input/number-input-label.mjs

@@ -1,14 +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 { forwardRef } from '../forward-ref.mjs';
 import { useNumberInputContext } from './number-input-context.mjs';
 
-const NumberInputLabel = forwardRef((props, ref) => {
-  const { labelProps } = useNumberInputContext();
-  const mergedProps = mergeProps(labelProps, props);
-  return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
-});
+const NumberInputLabel = forwardRef(
+  (props, ref) => {
+    const { labelProps } = useNumberInputContext();
+    const mergedProps = mergeProps(labelProps, props);
+    return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+  }
+);
+NumberInputLabel.displayName = "NumberInputLabel";
 
 export { NumberInputLabel };

package/number-input/number-input-scrubber.cjs

@@ -4,15 +4,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const numberInputContext = require('./number-input-context.cjs');
 
-const NumberInputScrubber = forwardRef.forwardRef((props, ref) => {
-  const { scrubberProps } = numberInputContext.useNumberInputContext();
-  const mergedProps = react.mergeProps(scrubberProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-});
+const NumberInputScrubber = react.forwardRef(
+  (props, ref) => {
+    const { scrubberProps } = numberInputContext.useNumberInputContext();
+    const mergedProps = react$1.mergeProps(scrubberProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
+NumberInputScrubber.displayName = "NumberInputScrubber";
 
 exports.NumberInputScrubber = NumberInputScrubber;

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

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type NumberInputScrubberProps = HTMLArkProps<'div'>;
-export declare const NumberInputScrubber: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type NumberInputScrubberProps = ComponentPropsWithoutRef<typeof ark.div>;
+export declare const NumberInputScrubber: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLDivElement>>;

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

@@ -1,14 +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 { forwardRef } from '../forward-ref.mjs';
 import { useNumberInputContext } from './number-input-context.mjs';
 
-const NumberInputScrubber = forwardRef((props, ref) => {
-  const { scrubberProps } = useNumberInputContext();
-  const mergedProps = mergeProps(scrubberProps, props);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-});
+const NumberInputScrubber = forwardRef(
+  (props, ref) => {
+    const { scrubberProps } = useNumberInputContext();
+    const mergedProps = mergeProps(scrubberProps, props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+NumberInputScrubber.displayName = "NumberInputScrubber";
 
 export { NumberInputScrubber };

package/number-input/number-input.cjs

@@ -4,14 +4,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const numberInputContext = require('./number-input-context.cjs');
 const useNumberInput = require('./use-number-input.cjs');
 
-const NumberInput = forwardRef.forwardRef((props, ref) => {
+const NumberInput = react.forwardRef((props, ref) => {
   const [useNumberInputProps, divProps] = createSplitProps.createSplitProps()(props, [
     "allowMouseWheel",
     "allowOverflow",
@@ -46,8 +46,9 @@ const NumberInput = forwardRef.forwardRef((props, ref) => {
     "value"
   ]);
   const pinInput = useNumberInput.useNumberInput(useNumberInputProps);
-  const mergedProps = react.mergeProps(pinInput.rootProps, divProps);
+  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 }) });
 });
+NumberInput.displayName = "NumberInput";
 
 exports.NumberInput = NumberInput;

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

@@ -1,6 +1,13 @@
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { Context } from '@zag-js/number-input';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } 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<Assign<AsChildComponentProps<"div">, UseNumberInputProps>>;
+export type NumberInputProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, UseNumberInputProps>;
+export declare const NumberInput: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, "name" | "value" | "form" | "pattern" | "id" | "max" | "min" | "format" | "onFocus" | "onBlur" | "onChange" | "onInvalid" | "defaultValue" | "dir" | "inputMode" | "disabled" | "readOnly" | "step" | "getRootNode" | "ids" | "invalid" | "translations" | "parse" | "allowMouseWheel" | "allowOverflow" | "validateCharacter" | "clampValueOnBlur" | "focusInputOnChange" | "minFractionDigits" | "maxFractionDigits" | "spinOnPress"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+    defaultValue?: string | undefined;
+} & RefAttributes<HTMLDivElement>>;

package/number-input/number-input.mjs

@@ -1,9 +1,9 @@
 '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 { forwardRef } from '../forward-ref.mjs';
 import { NumberInputProvider } from './number-input-context.mjs';
 import { useNumberInput } from './use-number-input.mjs';
 
@@ -45,5 +45,6 @@ const NumberInput = forwardRef((props, ref) => {
   const mergedProps = mergeProps(pinInput.rootProps, divProps);
   return /* @__PURE__ */ jsx(NumberInputProvider, { value: pinInput, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
+NumberInput.displayName = "NumberInput";
 
 export { NumberInput };

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

@@ -4,8 +4,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const numberInput = require('@zag-js/number-input');
-const react = require('@zag-js/react');
-const React = require('react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const reactDom = require('react-dom');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -30,17 +31,23 @@ const numberInput__namespace = /*#__PURE__*/_interopNamespaceDefault(numberInput
 const useNumberInput = (props) => {
   const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
-    id: React.useId(),
+    id: react.useId(),
     getRootNode,
     ...props,
     value: props.defaultValue
   };
+  const onChange = props.onChange;
+  const onChangeWithFlushSync = react.useCallback(
+    (e) => reactDom.flushSync(() => onChange?.(e)),
+    [onChange]
+  );
   const context = {
     ...initialContext,
-    value: props.value
+    value: props.value,
+    onChange: onChangeWithFlushSync
   };
-  const [state, send] = react.useMachine(numberInput__namespace.machine(initialContext), { context });
-  return numberInput__namespace.connect(state, send, react.normalizeProps);
+  const [state, send] = react$1.useMachine(numberInput__namespace.machine(initialContext), { context });
+  return numberInput__namespace.connect(state, send, react$1.normalizeProps);
 };
 
 exports.useNumberInput = useNumberInput;

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

@@ -1,7 +1,8 @@
 'use client';
 import * as numberInput from '@zag-js/number-input';
 import { useMachine, normalizeProps } from '@zag-js/react';
-import { useId } from 'react';
+import { useId, useCallback } from 'react';
+import { flushSync } from 'react-dom';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useNumberInput = (props) => {
@@ -12,9 +13,15 @@ const useNumberInput = (props) => {
     ...props,
     value: props.defaultValue
   };
+  const onChange = props.onChange;
+  const onChangeWithFlushSync = useCallback(
+    (e) => flushSync(() => onChange?.(e)),
+    [onChange]
+  );
   const context = {
     ...initialContext,
-    value: props.value
+    value: props.value,
+    onChange: onChangeWithFlushSync
   };
   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.9.0",
+  "version": "0.10.0-beta.1",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -96,24 +96,24 @@
   },
   "devDependencies": {
     "@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",
+    "@storybook/addon-a11y": "7.1.1",
+    "@storybook/addon-essentials": "7.1.1",
+    "@storybook/addons": "7.1.1",
+    "@storybook/react": "7.1.1",
+    "@storybook/react-vite": "7.1.1",
     "@testing-library/dom": "9.3.1",
     "@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.15",
+    "@types/react": "18.2.17",
     "@types/react-dom": "18.2.7",
-    "@types/testing-library__jest-dom": "5.14.8",
+    "@types/testing-library__jest-dom": "5.14.9",
     "@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": "8.46.0",
     "eslint-plugin-react": "7.33.0",
     "eslint-plugin-react-hooks": "4.6.0",
     "globby": "13.2.2",
@@ -123,9 +123,9 @@
     "react-frame-component": "5.2.6",
     "release-it": "16.1.3",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "7.1.0",
+    "storybook": "7.1.1",
     "typescript": "5.1.6",
-    "vite": "4.4.6",
+    "vite": "4.4.7",
     "vite-plugin-dts": "2.3.0",
     "vitest": "0.33.0"
   },

package/pagination/pagination-ellipsis.cjs

@@ -4,17 +4,20 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('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 });
-});
+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);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
 
 exports.PaginationEllipsis = PaginationEllipsis;

package/pagination/pagination-ellipsis.d.ts

@@ -1,6 +1,10 @@
-import type { ForwardRefExoticComponent } from 'react';
 import type { EllipsisProps } from '@zag-js/pagination';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
 import { type Assign } from '../types';
-export type PaginationEllipsisProps = Assign<HTMLArkProps<'div'>, EllipsisProps>;
-export declare const PaginationEllipsis: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, EllipsisProps>>;
+export type PaginationEllipsisProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, EllipsisProps>;
+export declare const PaginationEllipsis: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, "index"> & EllipsisProps & RefAttributes<HTMLDivElement>>;

package/pagination/pagination-ellipsis.mjs

@@ -1,16 +1,19 @@
 '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 { 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 });
-});
+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 });
+  }
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
 
 export { PaginationEllipsis };

package/pagination/pagination-list-item.cjs

@@ -4,10 +4,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
 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 }));
+const PaginationListItem = react.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(factory.ark.li, { ...pagination_anatomy.parts.listItem.attrs, ...props, ref })
+);
+PaginationListItem.displayName = "PaginationListItem";
 
 exports.PaginationListItem = PaginationListItem;

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

@@ -1,5 +1,8 @@
-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>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, LiHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type PaginationListItemProps = ComponentPropsWithoutRef<typeof ark.li>;
+export declare const PaginationListItem: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | RefObject<HTMLLIElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLLIElement>>;

package/pagination/pagination-list-item.mjs

@@ -1,9 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 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 }));
+const PaginationListItem = forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(ark.li, { ...parts.listItem.attrs, ...props, ref })
+);
+PaginationListItem.displayName = "PaginationListItem";
 
 export { PaginationListItem };

package/pagination/pagination-list.cjs

@@ -4,10 +4,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
 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 }));
+const PaginationList = react.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(factory.ark.ul, { ...pagination_anatomy.parts.list.attrs, ...props, ref }));
+PaginationList.displayName = "PaginationList";
 
 exports.PaginationList = PaginationList;

package/pagination/pagination-list.d.ts

@@ -1,5 +1,8 @@
-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>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type PaginationListProps = ComponentPropsWithoutRef<typeof ark.ul>;
+export declare const PaginationList: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
+    ref?: ((instance: HTMLUListElement | null) => void) | RefObject<HTMLUListElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLUListElement>>;

package/pagination/pagination-list.mjs

@@ -1,9 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 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 }));
+PaginationList.displayName = "PaginationList";
 
 export { PaginationList };

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

@@ -4,15 +4,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('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 PaginationNextPageTrigger = react.forwardRef((props, ref) => {
   const { nextPageTriggerProps } = paginationContext.usePaginationContext();
-  const mergedProps = react.mergeProps(nextPageTriggerProps, props);
+  const mergedProps = react$1.mergeProps(nextPageTriggerProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
 });
+PaginationNextPageTrigger.displayName = "PaginationNextPageTrigger";
 
 exports.PaginationNextPageTrigger = PaginationNextPageTrigger;

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

@@ -1,5 +1,8 @@
-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>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type PaginationNextPageTriggerProps = ComponentPropsWithoutRef<typeof ark.button>;
+export declare const PaginationNextPageTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLButtonElement>>;

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

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