@ark-ui/react 1.1.0 → 1.2.1

package/hover-card/hover-card.mjs

@@ -1,5 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
 import 'react';
 import '../presence/index.mjs';
 import { splitPresenceProps } from '../presence/split-presence-props.mjs';
@@ -12,7 +13,7 @@ import { PresenceProvider } from '../presence/presence-context.mjs';
 const HoverCard = (props) => {
   const [presenceProps, { children, ...localProps }] = splitPresenceProps(props);
   const api = useHoverCard(localProps);
-  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn(children, api);
   return /* @__PURE__ */ jsx(HoverCardProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: view }) });
 };

package/index.cjs

@@ -143,7 +143,7 @@ const fileUploadItem = require('./file-upload/file-upload-item.cjs');
 const fileUploadItemDeleteTrigger = require('./file-upload/file-upload-item-delete-trigger.cjs');
 const fileUploadItemGroup = require('./file-upload/file-upload-item-group.cjs');
 const fileUploadItemName = require('./file-upload/file-upload-item-name.cjs');
-const fileUploadItemPreview = require('./file-upload/file-upload-item-preview.cjs');
+const fileUploadItemPreviewImage = require('./file-upload/file-upload-item-preview-image.cjs');
 const fileUploadItemSizeText = require('./file-upload/file-upload-item-size-text.cjs');
 const fileUploadLabel = require('./file-upload/file-upload-label.cjs');
 const fileUploadTrigger = require('./file-upload/file-upload-trigger.cjs');
@@ -170,7 +170,7 @@ const menuContext = require('./menu/menu-context.cjs');
 const numberInputControl = require('./number-input/number-input-control.cjs');
 const numberInputDecrementTrigger = require('./number-input/number-input-decrement-trigger.cjs');
 const numberInputIncrementTrigger = require('./number-input/number-input-increment-trigger.cjs');
-const numberInputField = require('./number-input/number-input-field.cjs');
+const numberInputInput = require('./number-input/number-input-input.cjs');
 const numberInputLabel = require('./number-input/number-input-label.cjs');
 const numberInputScrubber = require('./number-input/number-input-scrubber.cjs');
 const numberInputContext = require('./number-input/number-input-context.cjs');
@@ -180,7 +180,7 @@ const paginationNextTrigger = require('./pagination/pagination-next-trigger.cjs'
 const paginationPrevTrigger = require('./pagination/pagination-prev-trigger.cjs');
 const paginationContext = require('./pagination/pagination-context.cjs');
 const pinInputControl = require('./pin-input/pin-input-control.cjs');
-const pinInputField = require('./pin-input/pin-input-field.cjs');
+const pinInputInput = require('./pin-input/pin-input-input.cjs');
 const pinInputLabel = require('./pin-input/pin-input-label.cjs');
 const pinInputContext = require('./pin-input/pin-input-context.cjs');
 const popoverAnchor = require('./popover/popover-anchor.cjs');
@@ -265,6 +265,7 @@ const tagsInputItemContext = require('./tags-input/tags-input-item-context.cjs')
 const createToaster = require('./toast/create-toaster.cjs');
 const toastCloseTrigger = require('./toast/toast-close-trigger.cjs');
 const toastDescription = require('./toast/toast-description.cjs');
+const toastGroup = require('./toast/toast-group.cjs');
 const toastTitle = require('./toast/toast-title.cjs');
 const toggleGroupItem = require('./toggle-group/toggle-group-item.cjs');
 const toggleGroupContext = require('./toggle-group/toggle-group-context.cjs');
@@ -419,7 +420,7 @@ exports.FileUploadItem = fileUploadItem.FileUploadItem;
 exports.FileUploadItemDeleteTrigger = fileUploadItemDeleteTrigger.FileUploadItemDeleteTrigger;
 exports.FileUploadItemGroup = fileUploadItemGroup.FileUploadItemGroup;
 exports.FileUploadItemName = fileUploadItemName.FileUploadItemName;
-exports.FileUploadItemPreview = fileUploadItemPreview.FileUploadItemPreview;
+exports.FileUploadItemPreviewImage = fileUploadItemPreviewImage.FileUploadItemPreviewImage;
 exports.FileUploadItemSizeText = fileUploadItemSizeText.FileUploadItemSizeText;
 exports.FileUploadLabel = fileUploadLabel.FileUploadLabel;
 exports.FileUploadTrigger = fileUploadTrigger.FileUploadTrigger;
@@ -446,7 +447,7 @@ exports.useMenuContext = menuContext.useMenuContext;
 exports.NumberInputControl = numberInputControl.NumberInputControl;
 exports.NumberInputDecrementTrigger = numberInputDecrementTrigger.NumberInputDecrementTrigger;
 exports.NumberInputIncrementTrigger = numberInputIncrementTrigger.NumberInputIncrementTrigger;
-exports.NumberInputInput = numberInputField.NumberInputInput;
+exports.NumberInputInput = numberInputInput.NumberInputInput;
 exports.NumberInputLabel = numberInputLabel.NumberInputLabel;
 exports.NumberInputScrubber = numberInputScrubber.NumberInputScrubber;
 exports.useNumberInputContext = numberInputContext.useNumberInputContext;
@@ -456,7 +457,7 @@ exports.PaginationNextTrigger = paginationNextTrigger.PaginationNextTrigger;
 exports.PaginationPrevTrigger = paginationPrevTrigger.PaginationPrevTrigger;
 exports.usePaginationContext = paginationContext.usePaginationContext;
 exports.PinInputControl = pinInputControl.PinInputControl;
-exports.PinInputInput = pinInputField.PinInputInput;
+exports.PinInputInput = pinInputInput.PinInputInput;
 exports.PinInputLabel = pinInputLabel.PinInputLabel;
 exports.usePinInputContext = pinInputContext.usePinInputContext;
 exports.PopoverAnchor = popoverAnchor.PopoverAnchor;
@@ -543,6 +544,7 @@ exports.useTagsInputItemContext = tagsInputItemContext.useTagsInputItemContext;
 exports.createToaster = createToaster.createToaster;
 exports.ToastCloseTrigger = toastCloseTrigger.ToastCloseTrigger;
 exports.ToastDescription = toastDescription.ToastDescription;
+exports.ToastGroup = toastGroup.ToastGroup;
 exports.ToastTitle = toastTitle.ToastTitle;
 exports.ToggleGroupItem = toggleGroupItem.ToggleGroupItem;
 exports.useToggleGroupContext = toggleGroupContext.useToggleGroupContext;

package/index.mjs

@@ -139,7 +139,7 @@ export { FileUploadItem } from './file-upload/file-upload-item.mjs';
 export { FileUploadItemDeleteTrigger } from './file-upload/file-upload-item-delete-trigger.mjs';
 export { FileUploadItemGroup } from './file-upload/file-upload-item-group.mjs';
 export { FileUploadItemName } from './file-upload/file-upload-item-name.mjs';
-export { FileUploadItemPreview } from './file-upload/file-upload-item-preview.mjs';
+export { FileUploadItemPreviewImage } from './file-upload/file-upload-item-preview-image.mjs';
 export { FileUploadItemSizeText } from './file-upload/file-upload-item-size-text.mjs';
 export { FileUploadLabel } from './file-upload/file-upload-label.mjs';
 export { FileUploadTrigger } from './file-upload/file-upload-trigger.mjs';
@@ -166,7 +166,7 @@ export { useMenuContext } from './menu/menu-context.mjs';
 export { NumberInputControl } from './number-input/number-input-control.mjs';
 export { NumberInputDecrementTrigger } from './number-input/number-input-decrement-trigger.mjs';
 export { NumberInputIncrementTrigger } from './number-input/number-input-increment-trigger.mjs';
-export { NumberInputInput } from './number-input/number-input-field.mjs';
+export { NumberInputInput } from './number-input/number-input-input.mjs';
 export { NumberInputLabel } from './number-input/number-input-label.mjs';
 export { NumberInputScrubber } from './number-input/number-input-scrubber.mjs';
 export { useNumberInputContext } from './number-input/number-input-context.mjs';
@@ -176,7 +176,7 @@ export { PaginationNextTrigger } from './pagination/pagination-next-trigger.mjs'
 export { PaginationPrevTrigger } from './pagination/pagination-prev-trigger.mjs';
 export { usePaginationContext } from './pagination/pagination-context.mjs';
 export { PinInputControl } from './pin-input/pin-input-control.mjs';
-export { PinInputInput } from './pin-input/pin-input-field.mjs';
+export { PinInputInput } from './pin-input/pin-input-input.mjs';
 export { PinInputLabel } from './pin-input/pin-input-label.mjs';
 export { usePinInputContext } from './pin-input/pin-input-context.mjs';
 export { PopoverAnchor } from './popover/popover-anchor.mjs';
@@ -261,6 +261,7 @@ export { useTagsInputItemContext } from './tags-input/tags-input-item-context.mj
 export { createToaster } from './toast/create-toaster.mjs';
 export { ToastCloseTrigger } from './toast/toast-close-trigger.mjs';
 export { ToastDescription } from './toast/toast-description.mjs';
+export { ToastGroup } from './toast/toast-group.mjs';
 export { ToastTitle } from './toast/toast-title.mjs';
 export { ToggleGroupItem } from './toggle-group/toggle-group-item.mjs';
 export { useToggleGroupContext } from './toggle-group/toggle-group-context.mjs';

package/menu/menu.cjs

@@ -4,7 +4,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('react');
+const react = require('@zag-js/react');
+const react$1 = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 require('../presence/index.cjs');
 const runIfFn = require('../run-if-fn.cjs');
@@ -40,7 +41,7 @@ const Menu = (props) => {
   const parentApi = menuContext.useMenuContext();
   const parentMachine = menuContext.useMenuMachineContext();
   const { api, machine } = useMenu.useMenu(useMenuProps);
-  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence.usePresence(react.mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn.runIfFn(localProps.children, api);
   useEffectOnce.useEffectOnce(() => {
     if (!parentMachine)
@@ -48,7 +49,7 @@ const Menu = (props) => {
     parentApi.setChild(machine);
     api.setParent(parentMachine);
   });
-  const getTriggerItemProps = react.useCallback(
+  const getTriggerItemProps = react$1.useCallback(
     () => parentApi.getTriggerItemProps(api),
     [api, parentApi]
   );

package/menu/menu.mjs

@@ -1,5 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
 import { useCallback } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import '../presence/index.mjs';
@@ -36,7 +37,7 @@ const Menu = (props) => {
   const parentApi = useMenuContext();
   const parentMachine = useMenuMachineContext();
   const { api, machine } = useMenu(useMenuProps);
-  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn(localProps.children, api);
   useEffectOnce(() => {
     if (!parentMachine)

package/number-input/index.cjs

@@ -7,8 +7,8 @@ const numberInput = require('./number-input.cjs');
 const numberInputContext = require('./number-input-context.cjs');
 const numberInputControl = require('./number-input-control.cjs');
 const numberInputDecrementTrigger = require('./number-input-decrement-trigger.cjs');
-const numberInputField = require('./number-input-field.cjs');
 const numberInputIncrementTrigger = require('./number-input-increment-trigger.cjs');
+const numberInputInput = require('./number-input-input.cjs');
 const numberInputLabel = require('./number-input-label.cjs');
 const numberInputScrubber = require('./number-input-scrubber.cjs');
 
@@ -16,7 +16,7 @@ const NumberInput = Object.assign(numberInput.NumberInput, {
   Root: numberInput.NumberInput,
   Control: numberInputControl.NumberInputControl,
   DecrementTrigger: numberInputDecrementTrigger.NumberInputDecrementTrigger,
-  Input: numberInputField.NumberInputInput,
+  Input: numberInputInput.NumberInputInput,
   IncrementTrigger: numberInputIncrementTrigger.NumberInputIncrementTrigger,
   Label: numberInputLabel.NumberInputLabel,
   Scrubber: numberInputScrubber.NumberInputScrubber
@@ -25,8 +25,8 @@ const NumberInput = Object.assign(numberInput.NumberInput, {
 exports.useNumberInputContext = numberInputContext.useNumberInputContext;
 exports.NumberInputControl = numberInputControl.NumberInputControl;
 exports.NumberInputDecrementTrigger = numberInputDecrementTrigger.NumberInputDecrementTrigger;
-exports.NumberInputInput = numberInputField.NumberInputInput;
 exports.NumberInputIncrementTrigger = numberInputIncrementTrigger.NumberInputIncrementTrigger;
+exports.NumberInputInput = numberInputInput.NumberInputInput;
 exports.NumberInputLabel = numberInputLabel.NumberInputLabel;
 exports.NumberInputScrubber = numberInputScrubber.NumberInputScrubber;
 exports.NumberInput = NumberInput;

package/number-input/index.d.ts

@@ -4,8 +4,8 @@ import { type NumberInputProps } from './number-input';
 import { useNumberInputContext, type NumberInputContext } from './number-input-context';
 import { NumberInputControl, type NumberInputControlProps } from './number-input-control';
 import { NumberInputDecrementTrigger, type NumberInputDecrementTriggerProps } from './number-input-decrement-trigger';
-import { NumberInputInput, type NumberInputInputProps } from './number-input-field';
 import { NumberInputIncrementTrigger, type NumberInputIncrementTriggerProps } from './number-input-increment-trigger';
+import { NumberInputInput, type NumberInputInputProps } from './number-input-input';
 import { NumberInputLabel, type NumberInputLabelProps } from './number-input-label';
 import { NumberInputScrubber, type NumberInputScrubberProps } from './number-input-scrubber';
 declare const NumberInput: ForwardRefExoticComponent<NumberInputProps & RefAttributes<HTMLDivElement>> & {

package/number-input/index.mjs

@@ -3,8 +3,8 @@ import { NumberInput as NumberInput$1 } from './number-input.mjs';
 export { useNumberInputContext } from './number-input-context.mjs';
 import { NumberInputControl } from './number-input-control.mjs';
 import { NumberInputDecrementTrigger } from './number-input-decrement-trigger.mjs';
-import { NumberInputInput } from './number-input-field.mjs';
 import { NumberInputIncrementTrigger } from './number-input-increment-trigger.mjs';
+import { NumberInputInput } from './number-input-input.mjs';
 import { NumberInputLabel } from './number-input-label.mjs';
 import { NumberInputScrubber } from './number-input-scrubber.mjs';
 

package/number-input/number-input.cjs

@@ -13,40 +13,37 @@ const numberInputContext = require('./number-input-context.cjs');
 const useNumberInput = require('./use-number-input.cjs');
 
 const NumberInput = react.forwardRef((props, ref) => {
-  const [useNumberInputProps, { children, ...divProps }] = createSplitProps.createSplitProps()(
-    props,
-    [
-      "allowMouseWheel",
-      "allowOverflow",
-      "clampValueOnBlur",
-      "defaultValue",
-      "dir",
-      "disabled",
-      "focusInputOnChange",
-      "form",
-      "formatOptions",
-      "getRootNode",
-      "id",
-      "ids",
-      "inputMode",
-      "invalid",
-      "locale",
-      "max",
-      "min",
-      "name",
-      "onFocusChange",
-      "onValueChange",
-      "onValueInvalid",
-      "pattern",
-      "readOnly",
-      "spinOnPress",
-      "step",
-      "translations",
-      "value"
-    ]
-  );
+  const [useNumberInputProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, [
+    "allowMouseWheel",
+    "allowOverflow",
+    "clampValueOnBlur",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "focusInputOnChange",
+    "form",
+    "formatOptions",
+    "getRootNode",
+    "id",
+    "ids",
+    "inputMode",
+    "invalid",
+    "locale",
+    "max",
+    "min",
+    "name",
+    "onFocusChange",
+    "onValueChange",
+    "onValueInvalid",
+    "pattern",
+    "readOnly",
+    "spinOnPress",
+    "step",
+    "translations",
+    "value"
+  ]);
   const api = useNumberInput.useNumberInput(useNumberInputProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
   const view = runIfFn.runIfFn(children, api);
   return /* @__PURE__ */ jsxRuntime.jsx(numberInputContext.NumberInputProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
 });

package/number-input/number-input.mjs

@@ -9,40 +9,37 @@ import { NumberInputProvider } from './number-input-context.mjs';
 import { useNumberInput } from './use-number-input.mjs';
 
 const NumberInput = forwardRef((props, ref) => {
-  const [useNumberInputProps, { children, ...divProps }] = createSplitProps()(
-    props,
-    [
-      "allowMouseWheel",
-      "allowOverflow",
-      "clampValueOnBlur",
-      "defaultValue",
-      "dir",
-      "disabled",
-      "focusInputOnChange",
-      "form",
-      "formatOptions",
-      "getRootNode",
-      "id",
-      "ids",
-      "inputMode",
-      "invalid",
-      "locale",
-      "max",
-      "min",
-      "name",
-      "onFocusChange",
-      "onValueChange",
-      "onValueInvalid",
-      "pattern",
-      "readOnly",
-      "spinOnPress",
-      "step",
-      "translations",
-      "value"
-    ]
-  );
+  const [useNumberInputProps, { children, ...localProps }] = createSplitProps()(props, [
+    "allowMouseWheel",
+    "allowOverflow",
+    "clampValueOnBlur",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "focusInputOnChange",
+    "form",
+    "formatOptions",
+    "getRootNode",
+    "id",
+    "ids",
+    "inputMode",
+    "invalid",
+    "locale",
+    "max",
+    "min",
+    "name",
+    "onFocusChange",
+    "onValueChange",
+    "onValueInvalid",
+    "pattern",
+    "readOnly",
+    "spinOnPress",
+    "step",
+    "translations",
+    "value"
+  ]);
   const api = useNumberInput(useNumberInputProps);
-  const mergedProps = mergeProps(api.rootProps, divProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
   const view = runIfFn(children, api);
   return /* @__PURE__ */ jsx(NumberInputProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -60,76 +60,78 @@
     "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "1.1.0",
-    "@zag-js/accordion": "0.30.0",
-    "@zag-js/avatar": "0.30.0",
-    "@zag-js/carousel": "0.30.0",
-    "@zag-js/checkbox": "0.30.0",
-    "@zag-js/color-picker": "0.30.0",
-    "@zag-js/color-utils": "0.30.0",
-    "@zag-js/combobox": "0.30.0",
-    "@zag-js/core": "0.30.0",
-    "@zag-js/date-picker": "0.30.0",
-    "@zag-js/date-utils": "0.30.0",
-    "@zag-js/dialog": "0.30.0",
-    "@zag-js/editable": "0.30.0",
-    "@zag-js/file-upload": "0.30.0",
-    "@zag-js/hover-card": "0.30.0",
-    "@zag-js/menu": "0.30.0",
-    "@zag-js/number-input": "0.30.0",
-    "@zag-js/pagination": "0.30.0",
-    "@zag-js/pin-input": "0.30.0",
-    "@zag-js/popover": "0.30.0",
-    "@zag-js/presence": "0.30.0",
-    "@zag-js/radio-group": "0.30.0",
-    "@zag-js/rating-group": "0.30.0",
-    "@zag-js/react": "0.30.0",
-    "@zag-js/select": "0.30.0",
-    "@zag-js/slider": "0.30.0",
-    "@zag-js/splitter": "0.30.0",
-    "@zag-js/switch": "0.30.0",
-    "@zag-js/tabs": "0.30.0",
-    "@zag-js/tags-input": "0.30.0",
-    "@zag-js/toast": "0.30.0",
-    "@zag-js/toggle-group": "0.30.0",
-    "@zag-js/tooltip": "0.30.0",
-    "@zag-js/types": "0.30.0"
+    "@ark-ui/anatomy": "1.2.0",
+    "@zag-js/accordion": "0.31.1",
+    "@zag-js/avatar": "0.31.1",
+    "@zag-js/carousel": "0.31.1",
+    "@zag-js/checkbox": "0.31.1",
+    "@zag-js/color-picker": "0.31.1",
+    "@zag-js/color-utils": "0.31.1",
+    "@zag-js/combobox": "0.31.1",
+    "@zag-js/core": "0.31.1",
+    "@zag-js/date-picker": "0.31.1",
+    "@zag-js/date-utils": "0.31.1",
+    "@zag-js/dialog": "0.31.1",
+    "@zag-js/editable": "0.31.1",
+    "@zag-js/file-upload": "0.31.1",
+    "@zag-js/hover-card": "0.31.1",
+    "@zag-js/menu": "0.31.1",
+    "@zag-js/number-input": "0.31.1",
+    "@zag-js/pagination": "0.31.1",
+    "@zag-js/pin-input": "0.31.1",
+    "@zag-js/popover": "0.31.1",
+    "@zag-js/presence": "0.31.1",
+    "@zag-js/radio-group": "0.31.1",
+    "@zag-js/rating-group": "0.31.1",
+    "@zag-js/react": "0.31.1",
+    "@zag-js/select": "0.31.1",
+    "@zag-js/slider": "0.31.1",
+    "@zag-js/splitter": "0.31.1",
+    "@zag-js/switch": "0.31.1",
+    "@zag-js/tabs": "0.31.1",
+    "@zag-js/tags-input": "0.31.1",
+    "@zag-js/toast": "0.31.1",
+    "@zag-js/toggle-group": "0.31.1",
+    "@zag-js/tooltip": "0.31.1",
+    "@zag-js/types": "0.31.1"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "5.0.0",
-    "@storybook/addon-a11y": "7.5.3",
-    "@storybook/addon-essentials": "7.5.3",
-    "@storybook/addons": "7.5.3",
-    "@storybook/react": "7.5.3",
-    "@storybook/react-vite": "7.5.3",
+    "@storybook/addon-a11y": "7.6.4",
+    "@storybook/addon-essentials": "7.6.4",
+    "@storybook/addons": "7.6.4",
+    "@storybook/react": "7.6.4",
+    "@storybook/react-vite": "7.6.4",
     "@testing-library/dom": "9.3.3",
-    "@testing-library/jest-dom": "6.1.4",
+    "@testing-library/jest-dom": "6.1.5",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.1",
     "@types/jsdom": "21.1.6",
-    "@types/react": "18.2.37",
-    "@types/react-dom": "18.2.16",
+    "@types/react": "18.2.42",
+    "@types/react-dom": "18.2.17",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.12.0",
-    "@typescript-eslint/parser": "6.12.0",
-    "@vitejs/plugin-react": "4.2.0",
+    "@typescript-eslint/eslint-plugin": "6.14.0",
+    "@typescript-eslint/parser": "6.14.0",
+    "@vitejs/plugin-react": "4.2.1",
     "@vitest/coverage-v8": "0.34.6",
-    "eslint": "8.54.0",
+    "eslint": "8.55.0",
+    "eslint-plugin-jest-dom": "5.1.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-testing-library": "6.2.0",
     "globby": "14.0.0",
-    "jsdom": "22.1.0",
-    "lucide-react": "0.292.0",
+    "jsdom": "23.0.1",
+    "lucide-react": "0.294.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-frame-component": "5.2.6",
-    "react-hook-form": "7.48.2",
-    "release-it": "17.0.0",
+    "react-hook-form": "7.49.2",
+    "release-it": "17.0.1",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "7.5.3",
-    "typescript": "5.3.2",
-    "vite": "4.5.0",
-    "vite-plugin-dts": "3.6.3",
+    "storybook": "7.6.4",
+    "typescript": "5.3.3",
+    "vite": "5.0.8",
+    "vite-plugin-dts": "3.6.4",
     "vitest": "0.34.6"
   },
   "peerDependencies": {
@@ -298,6 +300,16 @@
       "import": "./tooltip/index.mjs",
       "require": "./tooltip/index.cjs"
     },
+    "./factory": {
+      "types": "./factory.d.ts",
+      "import": "./factory.mjs",
+      "require": "./factory.cjs"
+    },
+    "./portal": {
+      "types": "./portal.d.ts",
+      "import": "./portal.mjs",
+      "require": "./portal.cjs"
+    },
     "./package.json": "./package.json"
   }
 }

package/pagination/pagination-item.cjs

@@ -11,7 +11,7 @@ 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 [itemProps, localProps] = createSplitProps.createSplitProps()(props, ["value", "type"]);
   const api = paginationContext.usePaginationContext();
   const mergedProps = react$1.mergeProps(api.getItemProps(itemProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });

package/pagination/pagination-item.mjs

@@ -7,7 +7,7 @@ import { ark } from '../factory.mjs';
 import { usePaginationContext } from './pagination-context.mjs';
 
 const PaginationItem = forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps()(props, ["type", "value"]);
+  const [itemProps, localProps] = createSplitProps()(props, ["value", "type"]);
   const api = usePaginationContext();
   const mergedProps = mergeProps(api.getItemProps(itemProps), localProps);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });

package/pagination/pagination.cjs

@@ -13,7 +13,7 @@ const paginationContext = require('./pagination-context.cjs');
 const usePagination = require('./use-pagination.cjs');
 
 const Pagination = react.forwardRef((props, ref) => {
-  const [paginationProps, { children, ...navProps }] = createSplitProps.createSplitProps()(
+  const [paginationProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
     props,
     [
       "count",
@@ -31,8 +31,8 @@ const Pagination = react.forwardRef((props, ref) => {
     ]
   );
   const api = usePagination.usePagination(paginationProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
   const view = runIfFn.runIfFn(children, api);
-  const mergedProps = react$1.mergeProps(api.rootProps, navProps);
   return /* @__PURE__ */ jsxRuntime.jsx(paginationContext.PaginationProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.nav, { ...mergedProps, ref, children: view }) });
 });
 Pagination.displayName = "Pagination";

package/pagination/pagination.mjs

@@ -9,7 +9,7 @@ import { PaginationProvider } from './pagination-context.mjs';
 import { usePagination } from './use-pagination.mjs';
 
 const Pagination = forwardRef((props, ref) => {
-  const [paginationProps, { children, ...navProps }] = createSplitProps()(
+  const [paginationProps, { children, ...localProps }] = createSplitProps()(
     props,
     [
       "count",
@@ -27,8 +27,8 @@ const Pagination = forwardRef((props, ref) => {
     ]
   );
   const api = usePagination(paginationProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
   const view = runIfFn(children, api);
-  const mergedProps = mergeProps(api.rootProps, navProps);
   return /* @__PURE__ */ jsx(PaginationProvider, { value: api, children: /* @__PURE__ */ jsx(ark.nav, { ...mergedProps, ref, children: view }) });
 });
 Pagination.displayName = "Pagination";

package/pin-input/index.cjs

@@ -6,18 +6,18 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const pinInput = require('./pin-input.cjs');
 const pinInputContext = require('./pin-input-context.cjs');
 const pinInputControl = require('./pin-input-control.cjs');
-const pinInputField = require('./pin-input-field.cjs');
+const pinInputInput = require('./pin-input-input.cjs');
 const pinInputLabel = require('./pin-input-label.cjs');
 
 const PinInput = Object.assign(pinInput.PinInput, {
   Root: pinInput.PinInput,
   Control: pinInputControl.PinInputControl,
-  Input: pinInputField.PinInputInput,
+  Input: pinInputInput.PinInputInput,
   Label: pinInputLabel.PinInputLabel
 });
 
 exports.usePinInputContext = pinInputContext.usePinInputContext;
 exports.PinInputControl = pinInputControl.PinInputControl;
-exports.PinInputInput = pinInputField.PinInputInput;
+exports.PinInputInput = pinInputInput.PinInputInput;
 exports.PinInputLabel = pinInputLabel.PinInputLabel;
 exports.PinInput = PinInput;

package/pin-input/index.d.ts

@@ -3,7 +3,7 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type PinInputProps } from './pin-input';
 import { usePinInputContext, type PinInputContext } from './pin-input-context';
 import { PinInputControl, type PinInputControlProps } from './pin-input-control';
-import { PinInputInput, type PinInputInputProps } from './pin-input-field';
+import { PinInputInput, type PinInputInputProps } from './pin-input-input';
 import { PinInputLabel, type PinInputLabelProps } from './pin-input-label';
 declare const PinInput: ForwardRefExoticComponent<PinInputProps & RefAttributes<HTMLDivElement>> & {
     Root: ForwardRefExoticComponent<PinInputProps & RefAttributes<HTMLDivElement>>;

package/pin-input/index.mjs

@@ -2,7 +2,7 @@
 import { PinInput as PinInput$1 } from './pin-input.mjs';
 export { usePinInputContext } from './pin-input-context.mjs';
 import { PinInputControl } from './pin-input-control.mjs';
-import { PinInputInput } from './pin-input-field.mjs';
+import { PinInputInput } from './pin-input-input.mjs';
 import { PinInputLabel } from './pin-input-label.mjs';
 
 const PinInput = Object.assign(PinInput$1, {