@ark-ui/react 0.13.1 → 0.15.0-beta.0

package/menu/menu-item.d.ts

@@ -1,13 +1,7 @@
-import { ItemProps } from '@zag-js/menu';
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import type { ItemProps } from '@zag-js/menu';
+import { type HTMLArkProps } 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;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, keyof ItemProps> & ItemProps & RefAttributes<HTMLDivElement>>;
-export {};
+export type MenuItemProps = Assign<HTMLArkProps<'div'>, ItemProps>;
+export declare const MenuItem: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof ItemProps> & ItemProps & RefAttributes<HTMLDivElement>>;

package/menu/menu-option-item.d.ts

@@ -1,19 +1,14 @@
-import { ItemProps, type connect } from '@zag-js/menu';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { ark } from '../factory';
+import { ItemProps, type OptionItemProps } from '@zag-js/menu';
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 export type MenuOptionItemState = {
     isActive: boolean;
 };
-export type MenuOptionItemParams = Parameters<ReturnType<typeof connect>['getOptionItemProps']>[0];
-export type MenuOptionItemProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, MenuOptionItemParams & {
+export type MenuOptionItemProps = Assign<HTMLArkProps<'div'>, OptionItemProps & {
     children?: ReactNode | ((state: MenuOptionItemState) => ReactNode);
 }>;
-export declare const MenuOptionItem: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "children" | "type" | keyof ItemProps | "onCheckedChange"> & Partial<ItemProps> & {
+export declare const MenuOptionItem: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "name" | "value" | "children" | "type" | keyof ItemProps | "onCheckedChange"> & Partial<ItemProps> & {
     name: string;
     type: "checkbox" | "radio";
     value: string;

package/menu/menu-positioner.d.ts

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

package/menu/menu-separator.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type MenuSeparatorProps = ComponentPropsWithoutRef<typeof ark.hr>;
-export declare const MenuSeparator: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
-    ref?: ((instance: HTMLHRElement | null) => void) | RefObject<HTMLHRElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type MenuSeparatorProps = HTMLArkProps<'hr'>;
+export declare const MenuSeparator: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLHRElement>>;
+} & RefAttributes<HTMLHRElement>>;

package/menu/menu-trigger-item.d.ts

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

package/menu/menu-trigger.d.ts

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

package/menu/menu.d.ts

@@ -2,7 +2,7 @@ import { JSX } from 'react/jsx-runtime';
 import { type ReactNode } from 'react';
 import { type Assign } from '../types';
 import { type UseMenuProps } from './use-menu';
-export type MenuState = {
+type MenuState = {
     isOpen: boolean;
     onClose: () => void;
 };
@@ -11,3 +11,4 @@ export type MenuProps = Assign<UseMenuProps, {
     isOpen?: boolean;
 }>;
 export declare const Menu: (props: MenuProps) => JSX.Element;
+export {};

package/menu/menu.stories.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Menu } from '.';
+import { Menu } from './';
 type MenuType = typeof Menu;
 declare const meta: Meta<MenuType>;
 export default meta;

package/menu/use-menu.d.ts

@@ -1,8 +1,9 @@
 import * as menu from '@zag-js/menu';
 import { type Optional } from '../types';
-export type UseMenuProps = Optional<menu.Context, 'id'>;
+export interface UseMenuProps extends 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

@@ -1,8 +1,9 @@
-import { Context } from '@zag-js/number-input';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, ButtonHTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
+import { UseNumberInputProps } from './use-number-input';
+import { HTMLArkProps } from '..';
+import { ForwardRefExoticComponent, RefAttributes, DetailedHTMLProps, HTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
 /// <reference types="react" />
 import { type NumberInputProps } from './number-input';
-import { useNumberInputContext } from './number-input-context';
+import { useNumberInputContext, type NumberInputContext } from './number-input-context';
 import { NumberInputControl, type NumberInputControlProps } from './number-input-control';
 import { NumberInputDecrementTrigger, type NumberInputDecrementTriggerProps } from './number-input-decrement-trigger';
 import { NumberInputInput, type NumberInputInputProps } from './number-input-field';
@@ -10,50 +11,26 @@ import { NumberInputIncrementTrigger, type NumberInputIncrementTriggerProps } fr
 import { NumberInputLabel, type NumberInputLabelProps } from './number-input-label';
 import { NumberInputScrubber, type NumberInputScrubberProps } from './number-input-scrubber';
 import { numberInputAnatomy } from './number-input.anatomy';
-declare const NumberInput: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "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"> & {
-    defaultValue?: string | undefined;
-} & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+declare const NumberInput: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseNumberInputProps> & UseNumberInputProps & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseNumberInputProps> & UseNumberInputProps & RefAttributes<HTMLDivElement>>;
+    Control: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         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"> & {
-        defaultValue?: string | undefined;
     } & RefAttributes<HTMLDivElement>>;
-    Control: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    DecrementTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    DecrementTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLButtonElement>>;
+    Input: ForwardRefExoticComponent<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
-    Input: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLInputElement>>;
+    IncrementTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLInputElement>>;
-    IncrementTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLButtonElement>>;
+    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
-    Label: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-        ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLLabelElement>>;
+    Scrubber: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLLabelElement>>;
-    Scrubber: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
+    } & RefAttributes<HTMLDivElement>>;
 };
 export { NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputScrubber, numberInputAnatomy, useNumberInputContext, };
-export type { NumberInputControlProps, NumberInputDecrementTriggerProps, NumberInputIncrementTriggerProps, NumberInputInputProps, NumberInputLabelProps, NumberInputProps, NumberInputScrubberProps, };
+export type { NumberInputContext, NumberInputControlProps, NumberInputDecrementTriggerProps, NumberInputIncrementTriggerProps, NumberInputInputProps, NumberInputLabelProps, NumberInputProps, NumberInputScrubberProps, };

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-control.d.ts

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

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

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

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

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type NumberInputInputProps = ComponentPropsWithoutRef<typeof ark.input>;
-export declare const NumberInputInput: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type NumberInputInputProps = HTMLArkProps<'input'>;
+export declare const NumberInputInput: ForwardRefExoticComponent<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLInputElement>>;
+} & RefAttributes<HTMLInputElement>>;

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

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

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

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

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

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

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

@@ -1,13 +1,7 @@
-import { Context } from '@zag-js/number-input';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UseNumberInputProps } from './use-number-input';
-export type NumberInputProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, UseNumberInputProps>;
-export declare const NumberInput: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "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"> & {
-    defaultValue?: string | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export type NumberInputProps = Assign<HTMLArkProps<'div'>, UseNumberInputProps>;
+export declare const NumberInput: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseNumberInputProps> & UseNumberInputProps & RefAttributes<HTMLDivElement>>;

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

@@ -5,3 +5,5 @@ type NumberInputType = typeof NumberInput.Root;
 declare const meta: Meta<NumberInputType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const MouseWheel: () => JSX.Element;
+export declare const FractionDigits: () => JSX.Element;

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const numberInput = require('@zag-js/number-input');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-const reactDom = require('react-dom');
 require('../environment/index.cjs');
+const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -37,15 +37,10 @@ const useNumberInput = (props) => {
     ...props,
     value: props.defaultValue
   };
-  const onChange = props.onChange;
-  const onChangeWithFlushSync = react.useCallback(
-    (e) => reactDom.flushSync(() => onChange?.(e)),
-    [onChange]
-  );
   const context = {
     ...initialContext,
     value: props.value,
-    onChange: onChangeWithFlushSync
+    onChange: useEvent.useEvent(props.onChange, { sync: true })
   };
   const [state, send] = react$1.useMachine(numberInput__namespace.machine(initialContext), { context });
   return numberInput__namespace.connect(state, send, react$1.normalizeProps);

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'> & {
+export interface UseNumberInputProps extends 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/number-input/use-number-input.mjs

@@ -1,9 +1,9 @@
 'use client';
 import * as numberInput from '@zag-js/number-input';
 import { useMachine, normalizeProps } from '@zag-js/react';
-import { useId, useCallback } from 'react';
-import { flushSync } from 'react-dom';
+import { useId } from 'react';
 import '../environment/index.mjs';
+import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useNumberInput = (props) => {
@@ -14,15 +14,10 @@ const useNumberInput = (props) => {
     ...props,
     value: props.defaultValue
   };
-  const onChange = props.onChange;
-  const onChangeWithFlushSync = useCallback(
-    (e) => flushSync(() => onChange?.(e)),
-    [onChange]
-  );
   const context = {
     ...initialContext,
     value: props.value,
-    onChange: onChangeWithFlushSync
+    onChange: useEvent(props.onChange, { sync: true })
   };
   const [state, send] = useMachine(numberInput.machine(initialContext), { context });
   return numberInput.connect(state, send, normalizeProps);