@ark-ui/react 0.13.1 → 0.14.0

package/editable/index.d.ts

@@ -1,5 +1,6 @@
-import { PublicApi, Context } from '@zag-js/editable';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, CSSProperties, RefAttributes, ButtonHTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
+import { Context } from '@zag-js/editable';
+import { UseEditableReturn } from './use-editable';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, RefAttributes, ButtonHTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
 /// <reference types="react" />
 import { type EditableProps } from './editable';
 import { EditableArea, type EditableAreaProps } from './editable-area';
@@ -17,11 +18,8 @@ declare const Editable: ForwardRefExoticComponent<Omit<Omit<Omit<Omit<DetailedHT
 } & {
     asChild?: boolean | undefined;
 }, "ref">, "children"> & {
-    children: ReactNode | ((pages: PublicApi<JSX.IntrinsicElements & {
-        element: HTMLAttributes<HTMLElement>;
-        style: CSSProperties;
-    }>) => ReactNode);
-}, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "onChange" | "onSubmit" | "defaultValue" | "dir" | "placeholder" | "onCancel" | "maxLength" | "readOnly" | "invalid" | "translations" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "finalFocusEl" | "autoResize" | "activationMode" | "submitMode" | "startWithEditView" | "selectOnFocus" | "onEdit"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+    children?: ReactNode | ((pages: UseEditableReturn) => ReactNode);
+}, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "defaultValue" | "dir" | "placeholder" | "onChange" | "onSubmit" | "maxLength" | "readOnly" | "onCancel" | "invalid" | "translations" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "finalFocusEl" | "autoResize" | "activationMode" | "submitMode" | "startWithEditView" | "selectOnFocus" | "onEdit"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultValue?: string | undefined;
 } & RefAttributes<HTMLDivElement>> & {
     Root: ForwardRefExoticComponent<Omit<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -29,11 +27,8 @@ declare const Editable: ForwardRefExoticComponent<Omit<Omit<Omit<Omit<DetailedHT
     } & {
         asChild?: boolean | undefined;
     }, "ref">, "children"> & {
-        children: ReactNode | ((pages: PublicApi<JSX.IntrinsicElements & {
-            element: HTMLAttributes<HTMLElement>;
-            style: CSSProperties;
-        }>) => ReactNode);
-    }, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "onChange" | "onSubmit" | "defaultValue" | "dir" | "placeholder" | "onCancel" | "maxLength" | "readOnly" | "invalid" | "translations" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "finalFocusEl" | "autoResize" | "activationMode" | "submitMode" | "startWithEditView" | "selectOnFocus" | "onEdit"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+        children?: ReactNode | ((pages: UseEditableReturn) => ReactNode);
+    }, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "defaultValue" | "dir" | "placeholder" | "onChange" | "onSubmit" | "maxLength" | "readOnly" | "onCancel" | "invalid" | "translations" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "finalFocusEl" | "autoResize" | "activationMode" | "submitMode" | "startWithEditView" | "selectOnFocus" | "onEdit"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
         defaultValue?: string | undefined;
     } & RefAttributes<HTMLDivElement>>;
     Area: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

package/editable/use-editable.d.ts

@@ -1,12 +1,7 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
 import * as editable from '@zag-js/editable';
 import { type Optional } from '../types';
 export type UseEditableProps = Optional<editable.Context, 'id'> & {
     defaultValue?: editable.Context['value'];
 };
-export type UseEditableReturn = ReturnType<typeof useEditable>;
-export declare const useEditable: (props: UseEditableProps) => editable.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export type UseEditableReturn = editable.MachineApi;
+export declare const useEditable: (props: UseEditableProps) => UseEditableReturn;

package/factory.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react$1 = require('@zag-js/react');
+const core = require('@zag-js/core');
 const react = require('react');
 const composeRefs = require('./compose-refs.cjs');
 
@@ -15,7 +15,7 @@ const withAsChild = (Component) => {
     }
     const onlyChild = react.Children.only(children);
     return react.isValidElement(onlyChild) ? react.cloneElement(onlyChild, {
-      ...react$1.mergeProps(restProps, onlyChild.props),
+      ...core.mergeProps(restProps, onlyChild.props),
       ref: ref ? composeRefs.composeRefs(ref, onlyChild.ref) : onlyChild.ref
     }) : null;
   });

package/factory.mjs

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { mergeProps } from '@zag-js/react';
+import { mergeProps } from '@zag-js/core';
 import { forwardRef, Children, isValidElement, cloneElement } from 'react';
 import { composeRefs } from './compose-refs.mjs';
 

package/hover-card/hover-card-context.d.ts

@@ -1,12 +1,5 @@
-import { PublicApi } from '@zag-js/hover-card';
-import { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseHoverCardReturn } from './use-hover-card';
 export type HoverCardContext = UseHoverCardReturn;
-export declare const HoverCardProvider: Provider<PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>>, useHoverCardContext: () => PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export declare const HoverCardProvider: Provider<UseHoverCardReturn>, useHoverCardContext: () => UseHoverCardReturn;

package/hover-card/use-hover-card.d.ts

@@ -1,10 +1,5 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
 import * as hoverCard from '@zag-js/hover-card';
 import { type Optional } from '../types';
 export type UseHoverCardProps = Optional<hoverCard.Context, 'id'>;
-export declare const useHoverCard: (props: UseHoverCardProps) => hoverCard.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
-export type UseHoverCardReturn = ReturnType<typeof useHoverCard>;
+export type UseHoverCardReturn = hoverCard.Api;
+export declare const useHoverCard: (props: UseHoverCardProps) => UseHoverCardReturn;

package/index.cjs

@@ -243,7 +243,6 @@ const splitterResizeTrigger = require('./splitter/splitter-resize-trigger.cjs');
 const splitter = require('@zag-js/splitter');
 const splitterContext = require('./splitter/splitter-context.cjs');
 const switchControl = require('./switch/switch-control.cjs');
-const switchInput = require('./switch/switch-input.cjs');
 const switchLabel = require('./switch/switch-label.cjs');
 const switchThumb = require('./switch/switch-thumb.cjs');
 const zagSwitch = require('@zag-js/switch');
@@ -581,7 +580,6 @@ Object.defineProperty(exports, 'splitterAnatomy', {
 });
 exports.useSplitterContext = splitterContext.useSplitterContext;
 exports.SwitchControl = switchControl.SwitchControl;
-exports.SwitchInput = switchInput.SwitchInput;
 exports.SwitchLabel = switchLabel.SwitchLabel;
 exports.SwitchThumb = switchThumb.SwitchThumb;
 Object.defineProperty(exports, 'switchAnatomy', {

package/index.mjs

@@ -239,7 +239,6 @@ export { SplitterResizeTrigger } from './splitter/splitter-resize-trigger.mjs';
 export { anatomy as splitterAnatomy } from '@zag-js/splitter';
 export { useSplitterContext } from './splitter/splitter-context.mjs';
 export { SwitchControl } from './switch/switch-control.mjs';
-export { SwitchInput } from './switch/switch-input.mjs';
 export { SwitchLabel } from './switch/switch-label.mjs';
 export { SwitchThumb } from './switch/switch-thumb.mjs';
 export { anatomy as switchAnatomy } from '@zag-js/switch';

package/menu/index.d.ts

@@ -39,8 +39,8 @@ declare const Menu: ((props: MenuProps) => JSX.Element) & {
     } & {
         asChild?: boolean | undefined;
     }, "ref"> & RefAttributes<HTMLButtonElement>>;
-    Item: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
+    Item: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
     } & {
         asChild?: boolean | undefined;
     }, "ref">, keyof ItemProps> & ItemProps & RefAttributes<HTMLDivElement>>;

package/menu/menu-item.d.ts

@@ -1,13 +1,10 @@
-import { ItemProps } from '@zag-js/menu';
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import type { ItemProps } from '@zag-js/menu';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 import { type Assign } from '../types';
-import { type UseMenuReturn } from './use-menu';
-type MenuItemParams = Parameters<UseMenuReturn['api']['getItemProps']>[0];
-export type MenuItemProps = Assign<ComponentPropsWithoutRef<typeof ark.button>, MenuItemParams>;
-export declare const MenuItem: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
+export type MenuItemProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, ItemProps>;
+export declare const MenuItem: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
 }, "ref">, keyof ItemProps> & ItemProps & RefAttributes<HTMLDivElement>>;
-export {};

package/menu/use-menu.d.ts

@@ -3,6 +3,6 @@ import { type Optional } from '../types';
 export type UseMenuProps = Optional<menu.Context, 'id'>;
 export type UseMenuReturn = {
     machine: ReturnType<typeof menu.machine>;
-    api: ReturnType<typeof menu.connect>;
+    api: menu.Api;
 };
 export declare const useMenu: (props: UseMenuProps) => UseMenuReturn;

package/number-input/index.d.ts

@@ -14,14 +14,14 @@ declare const NumberInput: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTML
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "getRootNode" | "form" | "pattern" | "id" | "ids" | "disabled" | "max" | "min" | "format" | "onFocus" | "onBlur" | "onChange" | "onInvalid" | "defaultValue" | "dir" | "inputMode" | "readOnly" | "step" | "invalid" | "translations" | "parse" | "allowMouseWheel" | "allowOverflow" | "validateCharacter" | "clampValueOnBlur" | "focusInputOnChange" | "minFractionDigits" | "maxFractionDigits" | "spinOnPress"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "ref">, "name" | "value" | "getRootNode" | "form" | "pattern" | "id" | "ids" | "disabled" | "defaultValue" | "dir" | "inputMode" | "onFocus" | "onBlur" | "onChange" | "onInvalid" | "max" | "min" | "readOnly" | "step" | "format" | "invalid" | "translations" | "parse" | "allowMouseWheel" | "allowOverflow" | "validateCharacter" | "clampValueOnBlur" | "focusInputOnChange" | "minFractionDigits" | "maxFractionDigits" | "spinOnPress"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultValue?: string | undefined;
 } & RefAttributes<HTMLDivElement>> & {
     Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
     } & {
         asChild?: boolean | undefined;
-    }, "ref">, "name" | "value" | "getRootNode" | "form" | "pattern" | "id" | "ids" | "disabled" | "max" | "min" | "format" | "onFocus" | "onBlur" | "onChange" | "onInvalid" | "defaultValue" | "dir" | "inputMode" | "readOnly" | "step" | "invalid" | "translations" | "parse" | "allowMouseWheel" | "allowOverflow" | "validateCharacter" | "clampValueOnBlur" | "focusInputOnChange" | "minFractionDigits" | "maxFractionDigits" | "spinOnPress"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+    }, "ref">, "name" | "value" | "getRootNode" | "form" | "pattern" | "id" | "ids" | "disabled" | "defaultValue" | "dir" | "inputMode" | "onFocus" | "onBlur" | "onChange" | "onInvalid" | "max" | "min" | "readOnly" | "step" | "format" | "invalid" | "translations" | "parse" | "allowMouseWheel" | "allowOverflow" | "validateCharacter" | "clampValueOnBlur" | "focusInputOnChange" | "minFractionDigits" | "maxFractionDigits" | "spinOnPress"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
         defaultValue?: string | undefined;
     } & RefAttributes<HTMLDivElement>>;
     Control: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

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

@@ -1,12 +1,5 @@
-import { PublicApi } from '@zag-js/number-input';
-import { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseNumberInputReturn } from './use-number-input';
 export type NumberInputContext = UseNumberInputReturn;
-export declare const NumberInputProvider: Provider<PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>>, useNumberInputContext: () => PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export declare const NumberInputProvider: Provider<UseNumberInputReturn>, useNumberInputContext: () => UseNumberInputReturn;

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

@@ -8,6 +8,6 @@ export declare const NumberInput: ForwardRefExoticComponent<Omit<Omit<Omit<Detai
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "getRootNode" | "form" | "pattern" | "id" | "ids" | "disabled" | "max" | "min" | "format" | "onFocus" | "onBlur" | "onChange" | "onInvalid" | "defaultValue" | "dir" | "inputMode" | "readOnly" | "step" | "invalid" | "translations" | "parse" | "allowMouseWheel" | "allowOverflow" | "validateCharacter" | "clampValueOnBlur" | "focusInputOnChange" | "minFractionDigits" | "maxFractionDigits" | "spinOnPress"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "ref">, "name" | "value" | "getRootNode" | "form" | "pattern" | "id" | "ids" | "disabled" | "defaultValue" | "dir" | "inputMode" | "onFocus" | "onBlur" | "onChange" | "onInvalid" | "max" | "min" | "readOnly" | "step" | "format" | "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/use-number-input.d.ts

@@ -1,12 +1,7 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
 import * as numberInput from '@zag-js/number-input';
 import { type Optional } from '../types';
 export type UseNumberInputProps = Optional<numberInput.Context, 'id'> & {
     defaultValue?: numberInput.Context['value'];
 };
-export declare const useNumberInput: (props: UseNumberInputProps) => numberInput.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
-export type UseNumberInputReturn = ReturnType<typeof useNumberInput>;
+export type UseNumberInputReturn = numberInput.Api;
+export declare const useNumberInput: (props: UseNumberInputProps) => UseNumberInputReturn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -60,74 +60,75 @@
     "release-it": "release-it --config ../../release-it.json"
   },
   "dependencies": {
-    "@zag-js/accordion": "0.16.0",
-    "@zag-js/anatomy": "0.16.0",
-    "@zag-js/avatar": "0.16.0",
-    "@zag-js/carousel": "0.16.0",
-    "@zag-js/checkbox": "0.16.0",
-    "@zag-js/color-picker": "0.16.0",
-    "@zag-js/color-utils": "0.16.0",
-    "@zag-js/combobox": "0.16.0",
-    "@zag-js/date-picker": "0.16.0",
-    "@zag-js/date-utils": "0.16.0",
-    "@zag-js/dialog": "0.16.0",
-    "@zag-js/editable": "0.16.0",
-    "@zag-js/hover-card": "0.16.0",
-    "@zag-js/menu": "0.16.0",
-    "@zag-js/number-input": "0.16.0",
-    "@zag-js/pagination": "0.16.0",
-    "@zag-js/pin-input": "0.16.0",
-    "@zag-js/popover": "0.16.0",
-    "@zag-js/presence": "0.16.0",
-    "@zag-js/pressable": "0.16.0",
-    "@zag-js/radio-group": "0.16.0",
-    "@zag-js/range-slider": "0.16.0",
-    "@zag-js/rating-group": "0.16.0",
-    "@zag-js/react": "0.16.0",
-    "@zag-js/select": "0.16.0",
-    "@zag-js/slider": "0.16.0",
-    "@zag-js/splitter": "0.16.0",
-    "@zag-js/switch": "0.16.0",
-    "@zag-js/tabs": "0.16.0",
-    "@zag-js/tags-input": "0.16.0",
-    "@zag-js/toast": "0.16.0",
-    "@zag-js/tooltip": "0.16.0",
-    "@zag-js/types": "0.16.0"
+    "@zag-js/accordion": "0.17.0",
+    "@zag-js/anatomy": "0.17.0",
+    "@zag-js/avatar": "0.17.0",
+    "@zag-js/carousel": "0.17.0",
+    "@zag-js/checkbox": "0.17.0",
+    "@zag-js/color-picker": "0.17.0",
+    "@zag-js/color-utils": "0.17.0",
+    "@zag-js/combobox": "0.17.0",
+    "@zag-js/core": "0.17.0",
+    "@zag-js/date-picker": "0.17.0",
+    "@zag-js/date-utils": "0.17.0",
+    "@zag-js/dialog": "0.17.0",
+    "@zag-js/editable": "0.17.0",
+    "@zag-js/hover-card": "0.17.0",
+    "@zag-js/menu": "0.17.0",
+    "@zag-js/number-input": "0.17.0",
+    "@zag-js/pagination": "0.17.0",
+    "@zag-js/pin-input": "0.17.0",
+    "@zag-js/popover": "0.17.0",
+    "@zag-js/presence": "0.17.0",
+    "@zag-js/pressable": "0.17.0",
+    "@zag-js/radio-group": "0.17.0",
+    "@zag-js/range-slider": "0.17.0",
+    "@zag-js/rating-group": "0.17.0",
+    "@zag-js/react": "0.17.0",
+    "@zag-js/select": "0.17.0",
+    "@zag-js/slider": "0.17.0",
+    "@zag-js/splitter": "0.17.0",
+    "@zag-js/switch": "0.17.0",
+    "@zag-js/tabs": "0.17.0",
+    "@zag-js/tags-input": "0.17.0",
+    "@zag-js/toast": "0.17.0",
+    "@zag-js/tooltip": "0.17.0",
+    "@zag-js/types": "0.17.0"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "4.0.0",
-    "@storybook/addon-a11y": "7.2.2",
-    "@storybook/addon-essentials": "7.2.2",
-    "@storybook/addons": "7.2.2",
-    "@storybook/react": "7.2.2",
-    "@storybook/react-vite": "7.2.2",
+    "@storybook/addon-a11y": "7.3.2",
+    "@storybook/addon-essentials": "7.3.2",
+    "@storybook/addons": "7.3.2",
+    "@storybook/react": "7.3.2",
+    "@storybook/react-vite": "7.3.2",
     "@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/jsdom": "21.1.2",
     "@types/react": "18.2.17",
     "@types/react-dom": "18.2.7",
     "@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.34.1",
-    "eslint": "8.46.0",
-    "eslint-plugin-react": "7.33.1",
+    "@vitest/coverage-v8": "0.34.2",
+    "eslint": "8.48.0",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "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": "16.1.4",
+    "release-it": "16.1.5",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "7.2.2",
-    "typescript": "5.1.6",
+    "storybook": "7.3.2",
+    "typescript": "5.2.2",
     "vite": "4.4.9",
-    "vite-plugin-dts": "3.5.1",
-    "vitest": "0.34.1"
+    "vite-plugin-dts": "3.5.3",
+    "vitest": "0.34.2"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/pagination/index.d.ts

@@ -1,7 +1,7 @@
-import { PublicApi, EllipsisProps, PageTriggerProps } from '@zag-js/pagination';
-import { UsePaginationProps } from './use-pagination';
+import { EllipsisProps, PageTriggerProps } from '@zag-js/pagination';
+import { UsePaginationProps, UsePaginationReturn } from './use-pagination';
 import { Assign } from '../types';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, CSSProperties, RefAttributes, LiHTMLAttributes, ButtonHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, RefAttributes, LiHTMLAttributes, ButtonHTMLAttributes } from 'react';
 /// <reference types="react" />
 import { type PaginationProps } from './pagination';
 import { usePaginationContext } from './pagination-context';
@@ -17,20 +17,14 @@ declare const Pagination: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<Detail
 } & {
     asChild?: boolean | undefined;
 }, "ref">, UsePaginationProps>, "children"> & {
-    children: ReactNode | ((pages: PublicApi<JSX.IntrinsicElements & {
-        element: HTMLAttributes<HTMLElement>;
-        style: CSSProperties;
-    }>) => ReactNode);
+    children?: ReactNode | ((pages: UsePaginationReturn) => ReactNode);
 } & RefAttributes<HTMLElement>> & {
     Root: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
         ref?: ((instance: HTMLElement | null) => void) | RefObject<HTMLElement> | null | undefined;
     } & {
         asChild?: boolean | undefined;
     }, "ref">, UsePaginationProps>, "children"> & {
-        children: ReactNode | ((pages: PublicApi<JSX.IntrinsicElements & {
-            element: HTMLAttributes<HTMLElement>;
-            style: CSSProperties;
-        }>) => ReactNode);
+        children?: ReactNode | ((pages: UsePaginationReturn) => ReactNode);
     } & RefAttributes<HTMLElement>>;
     Ellipsis: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;

package/pagination/pagination-context.d.ts

@@ -1,12 +1,5 @@
-import { PublicApi } from '@zag-js/pagination';
-import { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { Provider } from 'react';
 /// <reference types="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;
-}>;
+export declare const PaginationProvider: Provider<UsePaginationReturn>, usePaginationContext: () => UsePaginationReturn;

package/pagination/pagination.d.ts

@@ -3,12 +3,12 @@ import { ark } from '../factory';
 import { type Assign } from '../types';
 import { type UsePaginationProps, type UsePaginationReturn } from './use-pagination';
 export type PaginationProps = Assign<Assign<ComponentPropsWithoutRef<typeof ark.nav>, UsePaginationProps>, {
-    children: ReactNode | ((pages: UsePaginationReturn) => ReactNode);
+    children?: ReactNode | ((pages: UsePaginationReturn) => ReactNode);
 }>;
 export declare const Pagination: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     ref?: ((instance: HTMLElement | null) => void) | RefObject<HTMLElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
 }, "ref">, UsePaginationProps>, "children"> & {
-    children: ReactNode | ((pages: UsePaginationReturn) => ReactNode);
+    children?: ReactNode | ((pages: UsePaginationReturn) => ReactNode);
 } & RefAttributes<HTMLElement>>;

package/pagination/use-pagination.d.ts

@@ -1,12 +1,7 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
 import * as pagination from '@zag-js/pagination';
 import { type Optional } from '../types';
 export type UsePaginationProps = Optional<pagination.Context, 'id'> & {
     defaultPage?: pagination.Context['page'];
 };
-export declare const usePagination: (props: UsePaginationProps) => pagination.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
-export type UsePaginationReturn = ReturnType<typeof usePagination>;
+export type UsePaginationReturn = pagination.Api;
+export declare const usePagination: (props: UsePaginationProps) => UsePaginationReturn;

package/pin-input/index.d.ts

@@ -11,14 +11,14 @@ declare const PinInput: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLPro
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "getRootNode" | "form" | "mask" | "pattern" | "id" | "ids" | "disabled" | "type" | "onChange" | "onInvalid" | "defaultValue" | "autoFocus" | "dir" | "placeholder" | "invalid" | "translations" | "selectOnFocus" | "otp" | "onComplete" | "blurOnComplete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "ref">, "name" | "value" | "getRootNode" | "form" | "mask" | "pattern" | "id" | "ids" | "disabled" | "type" | "defaultValue" | "autoFocus" | "dir" | "placeholder" | "onChange" | "onInvalid" | "invalid" | "translations" | "selectOnFocus" | "otp" | "onComplete" | "blurOnComplete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultValue?: string[] | undefined;
 } & RefAttributes<HTMLDivElement>> & {
     Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
     } & {
         asChild?: boolean | undefined;
-    }, "ref">, "name" | "value" | "getRootNode" | "form" | "mask" | "pattern" | "id" | "ids" | "disabled" | "type" | "onChange" | "onInvalid" | "defaultValue" | "autoFocus" | "dir" | "placeholder" | "invalid" | "translations" | "selectOnFocus" | "otp" | "onComplete" | "blurOnComplete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+    }, "ref">, "name" | "value" | "getRootNode" | "form" | "mask" | "pattern" | "id" | "ids" | "disabled" | "type" | "defaultValue" | "autoFocus" | "dir" | "placeholder" | "onChange" | "onInvalid" | "invalid" | "translations" | "selectOnFocus" | "otp" | "onComplete" | "blurOnComplete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
         defaultValue?: string[] | undefined;
     } & RefAttributes<HTMLDivElement>>;
     Control: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

package/pin-input/pin-input-context.d.ts

@@ -1,12 +1,5 @@
-import { PublicApi } from '@zag-js/pin-input';
-import { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { Provider } from 'react';
 /// <reference types="react" />
 import { type UsePinInputReturn } from './use-pin-input';
 export type PinInputContext = UsePinInputReturn;
-export declare const PinInputProvider: Provider<PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>>, usePinInputContext: () => PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export declare const PinInputProvider: Provider<UsePinInputReturn>, usePinInputContext: () => UsePinInputReturn;

package/pin-input/pin-input.d.ts

@@ -8,6 +8,6 @@ export declare const PinInput: ForwardRefExoticComponent<Omit<Omit<Omit<Detailed
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "getRootNode" | "form" | "mask" | "pattern" | "id" | "ids" | "disabled" | "type" | "onChange" | "onInvalid" | "defaultValue" | "autoFocus" | "dir" | "placeholder" | "invalid" | "translations" | "selectOnFocus" | "otp" | "onComplete" | "blurOnComplete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "ref">, "name" | "value" | "getRootNode" | "form" | "mask" | "pattern" | "id" | "ids" | "disabled" | "type" | "defaultValue" | "autoFocus" | "dir" | "placeholder" | "onChange" | "onInvalid" | "invalid" | "translations" | "selectOnFocus" | "otp" | "onComplete" | "blurOnComplete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultValue?: string[] | undefined;
 } & RefAttributes<HTMLDivElement>>;

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

@@ -1,12 +1,7 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
 import * as pinInput from '@zag-js/pin-input';
 import { type Optional } from '../types';
 export type UsePinInputProps = Optional<pinInput.Context, 'id'> & {
     defaultValue?: pinInput.Context['value'];
 };
-export declare const usePinInput: (props: UsePinInputProps) => pinInput.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
-export type UsePinInputReturn = ReturnType<typeof usePinInput>;
+export type UsePinInputReturn = pinInput.Api;
+export declare const usePinInput: (props: UsePinInputProps) => UsePinInputReturn;

package/popover/popover-context.d.ts

@@ -1,12 +1,5 @@
-import { PublicApi } from '@zag-js/popover';
-import { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { Provider } from 'react';
 /// <reference types="react" />
 import { type UsePopoverReturn } from './use-popover';
 export type PopoverContext = UsePopoverReturn;
-export declare const PopoverProvider: Provider<PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>>, usePopoverContext: () => PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export declare const PopoverProvider: Provider<UsePopoverReturn>, usePopoverContext: () => UsePopoverReturn;

package/popover/use-popover.d.ts

@@ -1,10 +1,5 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
 import * as popover from '@zag-js/popover';
 import { type Optional } from '../types';
 export type UsePopoverProps = Optional<popover.Context, 'id'>;
-export type UsePopoverReturn = ReturnType<typeof usePopover>;
-export declare const usePopover: (props: UsePopoverProps) => popover.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export type UsePopoverReturn = popover.Api;
+export declare const usePopover: (props: UsePopoverProps) => UsePopoverReturn;

package/presence/use-presence.d.ts

@@ -1,4 +1,4 @@
 import * as presence from '@zag-js/presence';
 import type { Optional } from '../types';
 export type UsePresenceProps = Optional<presence.Context, 'present'>;
-export declare const usePresence: (props: UsePresenceProps) => presence.PublicApi;
+export declare const usePresence: (props: UsePresenceProps) => presence.Api;

package/pressable/use-pressable.d.ts

@@ -1,10 +1,5 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
 import * as pressable from '@zag-js/pressable';
 import { type Optional } from '../types';
 export type UsePressableProps = Optional<pressable.Context, 'id'>;
-export type UsePressableReturn = ReturnType<typeof usePressable>;
-export declare const usePressable: (props?: UsePressableProps) => pressable.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export type UsePressableReturn = pressable.Api;
+export declare const usePressable: (props?: UsePressableProps) => UsePressableReturn;

package/radio-group/index.d.ts

@@ -13,14 +13,14 @@ declare const RadioGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLP
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "orientation" | "onChange" | "defaultValue" | "dir" | "readOnly"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "defaultValue" | "dir" | "onChange" | "readOnly" | "orientation"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultValue?: string | null | undefined;
 } & RefAttributes<HTMLDivElement>> & {
     Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
     } & {
         asChild?: boolean | undefined;
-    }, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "orientation" | "onChange" | "defaultValue" | "dir" | "readOnly"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+    }, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "defaultValue" | "dir" | "onChange" | "readOnly" | "orientation"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
         defaultValue?: string | null | undefined;
     } & RefAttributes<HTMLDivElement>>;
     Label: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {