@ark-ui/react 1.0.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -13,6 +13,7 @@
     "dialog",
     "editable",
     "environment",
+    "file upload",
     "hover card",
     "menu",
     "number input",
@@ -59,74 +60,78 @@
     "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "1.0.0",
-    "@zag-js/accordion": "0.29.0",
-    "@zag-js/avatar": "0.29.0",
-    "@zag-js/carousel": "0.29.0",
-    "@zag-js/checkbox": "0.29.0",
-    "@zag-js/color-picker": "0.29.0",
-    "@zag-js/color-utils": "0.29.0",
-    "@zag-js/combobox": "0.29.0",
-    "@zag-js/core": "0.29.0",
-    "@zag-js/date-picker": "0.29.0",
-    "@zag-js/date-utils": "0.29.0",
-    "@zag-js/dialog": "0.29.0",
-    "@zag-js/editable": "0.29.0",
-    "@zag-js/hover-card": "0.29.0",
-    "@zag-js/menu": "0.29.0",
-    "@zag-js/number-input": "0.29.0",
-    "@zag-js/pagination": "0.29.0",
-    "@zag-js/pin-input": "0.29.0",
-    "@zag-js/popover": "0.29.0",
-    "@zag-js/presence": "0.29.0",
-    "@zag-js/radio-group": "0.29.0",
-    "@zag-js/rating-group": "0.29.0",
-    "@zag-js/react": "0.29.0",
-    "@zag-js/select": "0.29.0",
-    "@zag-js/slider": "0.29.0",
-    "@zag-js/splitter": "0.29.0",
-    "@zag-js/switch": "0.29.0",
-    "@zag-js/tabs": "0.29.0",
-    "@zag-js/tags-input": "0.29.0",
-    "@zag-js/toast": "0.29.0",
-    "@zag-js/toggle-group": "0.29.0",
-    "@zag-js/tooltip": "0.29.0",
-    "@zag-js/types": "0.29.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": "4.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",
+    "@release-it/keep-a-changelog": "5.0.0",
+    "@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/react": "14.1.0",
+    "@testing-library/jest-dom": "6.1.5",
+    "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.1",
-    "@types/jsdom": "21.1.5",
-    "@types/react": "18.2.37",
-    "@types/react-dom": "18.2.15",
+    "@types/jsdom": "21.1.6",
+    "@types/react": "18.2.42",
+    "@types/react-dom": "18.2.17",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.10.0",
-    "@typescript-eslint/parser": "6.10.0",
-    "@vitejs/plugin-react": "4.1.1",
+    "@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.53.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",
-    "globby": "13.2.2",
-    "jsdom": "22.1.0",
-    "lucide-react": "0.292.0",
+    "eslint-plugin-testing-library": "6.2.0",
+    "globby": "14.0.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",
-    "release-it": "16.2.1",
+    "react-hook-form": "7.49.2",
+    "release-it": "17.0.1",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "7.5.3",
-    "typescript": "5.2.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": {
@@ -195,6 +200,11 @@
       "import": "./environment/index.mjs",
       "require": "./environment/index.cjs"
     },
+    "./file-upload": {
+      "types": "./file-upload/index.d.ts",
+      "import": "./file-upload/index.mjs",
+      "require": "./file-upload/index.cjs"
+    },
     "./hover-card": {
       "types": "./hover-card/index.d.ts",
       "import": "./hover-card/index.mjs",
@@ -290,6 +300,11 @@
       "import": "./tooltip/index.mjs",
       "require": "./tooltip/index.cjs"
     },
+    "./factory": {
+      "types": "./factory/factory.d.ts",
+      "import": "./factory.mjs",
+      "require": "./factory.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, {

package/pin-input/pin-input.cjs

@@ -12,7 +12,7 @@ const pinInputContext = require('./pin-input-context.cjs');
 const usePinInput = require('./use-pin-input.cjs');
 
 const PinInput = react.forwardRef((props, ref) => {
-  const [usePinInputProps, divProps] = createSplitProps.createSplitProps()(props, [
+  const [usePinInputProps, localProps] = createSplitProps.createSplitProps()(props, [
     "autoFocus",
     "blurOnComplete",
     "defaultValue",
@@ -37,7 +37,7 @@ const PinInput = react.forwardRef((props, ref) => {
     "value"
   ]);
   const api = usePinInput.usePinInput(usePinInputProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsxRuntime.jsxs(pinInputContext.PinInputProvider, { value: api, children: [
     /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }),
     /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })

package/pin-input/pin-input.mjs

@@ -8,7 +8,7 @@ import { PinInputProvider } from './pin-input-context.mjs';
 import { usePinInput } from './use-pin-input.mjs';
 
 const PinInput = forwardRef((props, ref) => {
-  const [usePinInputProps, divProps] = createSplitProps()(props, [
+  const [usePinInputProps, localProps] = createSplitProps()(props, [
     "autoFocus",
     "blurOnComplete",
     "defaultValue",
@@ -33,7 +33,7 @@ const PinInput = forwardRef((props, ref) => {
     "value"
   ]);
   const api = usePinInput(usePinInputProps);
-  const mergedProps = mergeProps(api.rootProps, divProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsxs(PinInputProvider, { value: api, children: [
     /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }),
     /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })

package/popover/popover.cjs

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
 require('react');
 require('../presence/index.cjs');
 const splitPresenceProps = require('../presence/split-presence-props.cjs');
@@ -16,7 +17,7 @@ const presenceContext = require('../presence/presence-context.cjs');
 const Popover = (props) => {
   const [presenceProps, { children, ...localProps }] = splitPresenceProps.splitPresenceProps(props);
   const api = usePopover.usePopover(localProps);
-  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence.usePresence(react.mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn.runIfFn(children, api);
   return /* @__PURE__ */ jsxRuntime.jsx(popoverContext.PopoverProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: view }) });
 };

package/popover/popover.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 Popover = (props) => {
   const [presenceProps, { children, ...localProps }] = splitPresenceProps(props);
   const api = usePopover(localProps);
-  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn(children, api);
   return /* @__PURE__ */ jsx(PopoverProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: view }) });
 };

package/portal.cjs

@@ -6,11 +6,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const react = require('react');
 const reactDom = require('react-dom');
 require('./environment/index.cjs');
+const useIsServer = require('./use-is-server.cjs');
 const environmentContext = require('./environment/environment-context.cjs');
 
-const isServer = typeof window === "undefined";
 const Portal = (props) => {
   const { children, container, disabled } = props;
+  const isServer = useIsServer.useIsServer();
   const getRootNode = environmentContext.useEnvironmentContext();
   if (isServer || disabled)
     return children;

package/portal.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode, type PropsWithChildren, type RefObject } from 'react';
+import { type PropsWithChildren, type ReactNode, type ReactPortal, type RefObject } from 'react';
 export interface PortalProps {
     disabled?: boolean;
     container?: RefObject<HTMLElement>;
 }
-export declare const Portal: (props: PropsWithChildren<PortalProps>) => ReactNode;
+export declare const Portal: (props: PropsWithChildren<PortalProps>) => ReactPortal[] | ReactNode | null | undefined;

package/portal.mjs

@@ -2,11 +2,12 @@
 import { Children } from 'react';
 import { createPortal } from 'react-dom';
 import './environment/index.mjs';
+import { useIsServer } from './use-is-server.mjs';
 import { useEnvironmentContext } from './environment/environment-context.mjs';
 
-const isServer = typeof window === "undefined";
 const Portal = (props) => {
   const { children, container, disabled } = props;
+  const isServer = useIsServer();
   const getRootNode = useEnvironmentContext();
   if (isServer || disabled)
     return children;

package/radio-group/radio-group-indicator.cjs

@@ -4,7 +4,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const anatomy = require('@ark-ui/anatomy');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
@@ -14,7 +13,7 @@ const RadioGroupIndicator = react.forwardRef(
   (props, ref) => {
     const api = radioGroupContext.useRadioGroupContext();
     const mergedProps = react$1.mergeProps(api.indicatorProps, props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ...anatomy.radioGroupAnatomy.build().indicator.attrs, ref });
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
 RadioGroupIndicator.displayName = "RadioGroupIndicator";

package/radio-group/radio-group-indicator.mjs

@@ -1,6 +1,5 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { radioGroupAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
@@ -10,7 +9,7 @@ const RadioGroupIndicator = forwardRef(
   (props, ref) => {
     const api = useRadioGroupContext();
     const mergedProps = mergeProps(api.indicatorProps, props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ...radioGroupAnatomy.build().indicator.attrs, ref });
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
 RadioGroupIndicator.displayName = "RadioGroupIndicator";

package/radio-group/radio-group-item.d.ts

@@ -3,7 +3,7 @@ import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react'
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 export interface RadioGroupItemProps extends Assign<HTMLArkProps<'label'>, {
-    children?: ReactNode | ((state: ItemState) => ReactNode);
+    children?: ((state: ItemState) => ReactNode) | ReactNode;
 }>, ItemProps {
 }
 export declare const RadioGroupItem: ForwardRefExoticComponent<RadioGroupItemProps & RefAttributes<HTMLLabelElement>>;

package/radio-group/radio-group.cjs

@@ -12,7 +12,7 @@ const radioGroupContext = require('./radio-group-context.cjs');
 const useRadioGroup = require('./use-radio-group.cjs');
 
 const RadioGroup = react.forwardRef((props, ref) => {
-  const [useRadioGroupProps, divProps] = createSplitProps.createSplitProps()(props, [
+  const [useRadioGroupProps, localProps] = createSplitProps.createSplitProps()(props, [
     "defaultValue",
     "dir",
     "disabled",
@@ -26,7 +26,7 @@ const RadioGroup = react.forwardRef((props, ref) => {
     "value"
   ]);
   const api = useRadioGroup.useRadioGroup(useRadioGroupProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(radioGroupContext.RadioGroupProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
 RadioGroup.displayName = "RadioGroup";

package/radio-group/radio-group.mjs

@@ -8,7 +8,7 @@ import { RadioGroupProvider } from './radio-group-context.mjs';
 import { useRadioGroup } from './use-radio-group.mjs';
 
 const RadioGroup = forwardRef((props, ref) => {
-  const [useRadioGroupProps, divProps] = createSplitProps()(props, [
+  const [useRadioGroupProps, localProps] = createSplitProps()(props, [
     "defaultValue",
     "dir",
     "disabled",
@@ -22,7 +22,7 @@ const RadioGroup = forwardRef((props, ref) => {
     "value"
   ]);
   const api = useRadioGroup(useRadioGroupProps);
-  const mergedProps = mergeProps(api.rootProps, divProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsx(RadioGroupProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
 RadioGroup.displayName = "RadioGroup";

package/radio-group/radio-group.stories.d.ts

@@ -7,4 +7,4 @@ export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const Disabled: () => JSX.Element;
 export declare const InitialValue: () => JSX.Element;
-export declare const OnChange: () => JSX.Element;
+export declare const OnEvent: () => JSX.Element;

package/rating-group/rating-group-control.cjs

@@ -12,9 +12,9 @@ const ratingGroupContext = require('./rating-group-context.cjs');
 
 const RatingGroupControl = react.forwardRef(
   (props, ref) => {
-    const { children, ...divProps } = props;
+    const { children, ...localProps } = props;
     const api = ratingGroupContext.useRatingGroupContext();
-    const mergedProps = react$1.mergeProps(api.controlProps, divProps);
+    const mergedProps = react$1.mergeProps(api.controlProps, localProps);
     const view = runIfFn.runIfFn(children, api);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }),

package/rating-group/rating-group-control.mjs

@@ -8,9 +8,9 @@ import { useRatingGroupContext } from './rating-group-context.mjs';
 
 const RatingGroupControl = forwardRef(
   (props, ref) => {
-    const { children, ...divProps } = props;
+    const { children, ...localProps } = props;
     const api = useRatingGroupContext();
-    const mergedProps = mergeProps(api.controlProps, divProps);
+    const mergedProps = mergeProps(api.controlProps, localProps);
     const view = runIfFn(children, api);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }),

package/rating-group/rating-group-item-context.d.ts

@@ -1,6 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
-import { type ItemState } from '@zag-js/rating-group';
-export interface RatingGroupItemContext extends ItemState {
+import { type ItemProps } from '@zag-js/rating-group';
+export interface RatingGroupItemContext extends ItemProps {
 }
 export declare const RatingGroupItemProvider: Provider<RatingGroupItemContext>, useRatingGroupItemContext: () => RatingGroupItemContext;

package/rating-group/rating-group-item.cjs

@@ -6,18 +6,19 @@ 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 runIfFn = require('../run-if-fn.cjs');
 const ratingGroupContext = require('./rating-group-context.cjs');
 const ratingGroupItemContext = require('./rating-group-item-context.cjs');
 
 const RatingGroupItem = react.forwardRef((props, ref) => {
-  const { children, index, ...divProps } = props;
+  const [itemProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, ["index"]);
   const api = ratingGroupContext.useRatingGroupContext();
-  const itemState = api.getItemState({ index });
-  const mergedProps = react$1.mergeProps(api.getItemProps({ index }), divProps);
+  const mergedProps = react$1.mergeProps(api.getItemProps(itemProps), localProps);
+  const itemState = api.getItemState(itemProps);
   const view = runIfFn.runIfFn(children, itemState);
-  return /* @__PURE__ */ jsxRuntime.jsx(ratingGroupItemContext.RatingGroupItemProvider, { value: itemState, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: view }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(ratingGroupItemContext.RatingGroupItemProvider, { value: itemProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: view }) });
 });
 RatingGroupItem.displayName = "RatingGroupItem";
 

package/rating-group/rating-group-item.mjs

@@ -2,18 +2,19 @@
 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 { runIfFn } from '../run-if-fn.mjs';
 import { useRatingGroupContext } from './rating-group-context.mjs';
 import { RatingGroupItemProvider } from './rating-group-item-context.mjs';
 
 const RatingGroupItem = forwardRef((props, ref) => {
-  const { children, index, ...divProps } = props;
+  const [itemProps, { children, ...localProps }] = createSplitProps()(props, ["index"]);
   const api = useRatingGroupContext();
-  const itemState = api.getItemState({ index });
-  const mergedProps = mergeProps(api.getItemProps({ index }), divProps);
+  const mergedProps = mergeProps(api.getItemProps(itemProps), localProps);
+  const itemState = api.getItemState(itemProps);
   const view = runIfFn(children, itemState);
-  return /* @__PURE__ */ jsx(RatingGroupItemProvider, { value: itemState, children: /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: view }) });
+  return /* @__PURE__ */ jsx(RatingGroupItemProvider, { value: itemProps, children: /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: view }) });
 });
 RatingGroupItem.displayName = "RatingGroupItem";
 

package/rating-group/rating-group.cjs

@@ -12,7 +12,7 @@ const ratingGroupContext = require('./rating-group-context.cjs');
 const useRatingGroup = require('./use-rating-group.cjs');
 
 const RatingGroup = react.forwardRef((props, ref) => {
-  const [useRatingProps, inputProps] = createSplitProps.createSplitProps()(props, [
+  const [useRatingProps, localProps] = createSplitProps.createSplitProps()(props, [
     "allowHalf",
     "autoFocus",
     "count",
@@ -31,7 +31,7 @@ const RatingGroup = react.forwardRef((props, ref) => {
     "value"
   ]);
   const api = useRatingGroup.useRatingGroup(useRatingProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, inputProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(ratingGroupContext.RatingGroupProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
 RatingGroup.displayName = "RatingGroup";

package/rating-group/rating-group.mjs

@@ -8,7 +8,7 @@ import { RatingGroupProvider } from './rating-group-context.mjs';
 import { useRatingGroup } from './use-rating-group.mjs';
 
 const RatingGroup = forwardRef((props, ref) => {
-  const [useRatingProps, inputProps] = createSplitProps()(props, [
+  const [useRatingProps, localProps] = createSplitProps()(props, [
     "allowHalf",
     "autoFocus",
     "count",
@@ -27,7 +27,7 @@ const RatingGroup = forwardRef((props, ref) => {
     "value"
   ]);
   const api = useRatingGroup(useRatingProps);
-  const mergedProps = mergeProps(api.rootProps, inputProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsx(RatingGroupProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
 RatingGroup.displayName = "RatingGroup";