@ark-ui/react 0.13.0 → 0.14.0

package/date-picker/use-date-picker.d.ts

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

package/dialog/dialog-context.d.ts

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

package/dialog/index.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

package/dialog/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { Dialog as Dialog$1 } from './dialog.mjs';
 import { DialogBackdrop } from './dialog-backdrop.mjs';
 import { DialogCloseTrigger } from './dialog-close-trigger.mjs';

package/dialog/use-dialog.d.ts

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

package/editable/editable-context.d.ts

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

package/editable/editable.d.ts

@@ -5,14 +5,14 @@ import { type Assign } from '../types';
 import { type EditableContext } from './editable-context';
 import { type UseEditableProps } from './use-editable';
 export type EditableProps = Assign<Omit<ComponentPropsWithoutRef<typeof ark.div>, 'children'> & {
-    children: ReactNode | ((pages: EditableContext) => ReactNode);
+    children?: ReactNode | ((pages: EditableContext) => ReactNode);
 }, UseEditableProps>;
 export declare const Editable: ForwardRefExoticComponent<Omit<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
 }, "ref">, "children"> & {
-    children: ReactNode | ((pages: EditableContext) => 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: EditableContext) => 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>>;

package/editable/index.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

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/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { Editable as Editable$1 } from './editable.mjs';
 import { EditableArea } from './editable-area.mjs';
 import { EditableCancelTrigger } from './editable-cancel-trigger.mjs';

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/environment/index.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

package/environment/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { Environment as Environment$1 } from './environment.mjs';
 export { useEnvironmentContext } from './environment-context.mjs';
 

package/factory.cjs

@@ -1,10 +1,9 @@
-'use client';
 'use strict';
 
 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');
 
@@ -16,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,6 +1,5 @@
-'use client';
 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/index.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

package/hover-card/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { HoverCard as HoverCard$1 } from './hover-card.mjs';
 import { HoverCardArrow } from './hover-card-arrow.mjs';
 import { HoverCardArrowTip } from './hover-card-arrow-tip.mjs';

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.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

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/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { Menu as Menu$1 } from './menu.mjs';
 import { MenuArrow } from './menu-arrow.mjs';
 import { MenuArrowTip } from './menu-arrow-tip.mjs';

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.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

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/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { NumberInput as NumberInput$1 } from './number-input.mjs';
 export { useNumberInputContext } from './number-input-context.mjs';
 import { NumberInputControl } from './number-input-control.mjs';

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.0",
+  "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.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

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/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { Pagination as Pagination$1 } from './pagination.mjs';
 export { usePaginationContext } from './pagination-context.mjs';
 import { PaginationEllipsis } from './pagination-ellipsis.mjs';

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;