@ark-ui/react 1.3.0 → 2.0.1

package/menu/menu-positioner.mjs

@@ -3,9 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
-import { useMenuContext } from './menu-context.mjs';
 import { usePresenceContext } from '../presence/presence-context.mjs';
+import { useMenuContext } from './menu-context.mjs';
 
 const MenuPositioner = forwardRef((props, ref) => {
   const api = useMenuContext();

package/menu/menu-root.cjs

@@ -0,0 +1,58 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
+const react$1 = require('react');
+const createSplitProps = require('../create-split-props.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const useEffectOnce = require('../use-effect-once.cjs');
+const menuContext = require('./menu-context.cjs');
+const useMenu = require('./use-menu.cjs');
+
+const MenuRoot = (props) => {
+  const [presenceProps, menuProps] = splitPresenceProps.splitPresenceProps(props);
+  const [useMenuProps, localProps] = createSplitProps.createSplitProps()(menuProps, [
+    "anchorPoint",
+    "aria-label",
+    "closeOnSelect",
+    "dir",
+    "getRootNode",
+    "highlightedId",
+    "id",
+    "ids",
+    "loop",
+    "onFocusOutside",
+    "onInteractOutside",
+    "onOpenChange",
+    "onPointerDownOutside",
+    "onSelect",
+    "onValueChange",
+    "open",
+    "positioning",
+    "value"
+  ]);
+  const parentApi = menuContext.useMenuContext();
+  const parentMachine = menuContext.useMenuMachineContext();
+  const { api, machine } = useMenu.useMenu(useMenuProps);
+  const presenceApi = usePresence.usePresence(react.mergeProps({ present: api.isOpen }, presenceProps));
+  const view = runIfFn.runIfFn(localProps.children, api);
+  useEffectOnce.useEffectOnce(() => {
+    if (!parentMachine)
+      return;
+    parentApi.setChild(machine);
+    api.setParent(parentMachine);
+  });
+  const getTriggerItemProps = react$1.useCallback(
+    () => parentApi.getTriggerItemProps(api),
+    [api, parentApi]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(menuContext.MenuTriggerItemProvider, { value: getTriggerItemProps, children: /* @__PURE__ */ jsxRuntime.jsx(menuContext.MenuMachineProvider, { value: machine, children: /* @__PURE__ */ jsxRuntime.jsx(menuContext.MenuProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: view }) }) }) });
+};
+
+exports.MenuRoot = MenuRoot;

package/menu/menu-root.d.ts

@@ -0,0 +1,8 @@
+import { JSX } from 'react/jsx-runtime';
+import { type ReactNode } from 'react';
+import { type UsePresenceProps } from '../presence';
+import { type UseMenuProps, type UseMenuReturn } from './use-menu';
+export interface MenuRootProps extends UseMenuProps, UsePresenceProps {
+    children?: ReactNode | ((api: UseMenuReturn['api']) => ReactNode);
+}
+export declare const MenuRoot: (props: MenuRootProps) => JSX.Element;

package/menu/menu-root.mjs

@@ -0,0 +1,54 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { useCallback } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { PresenceProvider } from '../presence/presence-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresence } from '../presence/use-presence.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { useEffectOnce } from '../use-effect-once.mjs';
+import { useMenuContext, useMenuMachineContext, MenuTriggerItemProvider, MenuMachineProvider, MenuProvider } from './menu-context.mjs';
+import { useMenu } from './use-menu.mjs';
+
+const MenuRoot = (props) => {
+  const [presenceProps, menuProps] = splitPresenceProps(props);
+  const [useMenuProps, localProps] = createSplitProps()(menuProps, [
+    "anchorPoint",
+    "aria-label",
+    "closeOnSelect",
+    "dir",
+    "getRootNode",
+    "highlightedId",
+    "id",
+    "ids",
+    "loop",
+    "onFocusOutside",
+    "onInteractOutside",
+    "onOpenChange",
+    "onPointerDownOutside",
+    "onSelect",
+    "onValueChange",
+    "open",
+    "positioning",
+    "value"
+  ]);
+  const parentApi = useMenuContext();
+  const parentMachine = useMenuMachineContext();
+  const { api, machine } = useMenu(useMenuProps);
+  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
+  const view = runIfFn(localProps.children, api);
+  useEffectOnce(() => {
+    if (!parentMachine)
+      return;
+    parentApi.setChild(machine);
+    api.setParent(parentMachine);
+  });
+  const getTriggerItemProps = useCallback(
+    () => parentApi.getTriggerItemProps(api),
+    [api, parentApi]
+  );
+  return /* @__PURE__ */ jsx(MenuTriggerItemProvider, { value: getTriggerItemProps, children: /* @__PURE__ */ jsx(MenuMachineProvider, { value: machine, children: /* @__PURE__ */ jsx(MenuProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: view }) }) }) });
+};
+
+export { MenuRoot };

package/menu/menu-trigger.cjs

@@ -7,9 +7,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
-const menuContext = require('./menu-context.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
+const menuContext = require('./menu-context.cjs');
 
 const MenuTrigger = react.forwardRef((props, ref) => {
   const api = menuContext.useMenuContext();

package/menu/menu-trigger.mjs

@@ -3,9 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
-import { useMenuContext } from './menu-context.mjs';
 import { usePresenceContext } from '../presence/presence-context.mjs';
+import { useMenuContext } from './menu-context.mjs';
 
 const MenuTrigger = forwardRef((props, ref) => {
   const api = useMenuContext();

package/menu/menu.cjs

@@ -1,59 +1,33 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
-const react$1 = require('react');
-const createSplitProps = require('../create-split-props.cjs');
-require('../presence/index.cjs');
-const runIfFn = require('../run-if-fn.cjs');
-const useEffectOnce = require('../use-effect-once.cjs');
-const menuContext = require('./menu-context.cjs');
-const useMenu = require('./use-menu.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
-const usePresence = require('../presence/use-presence.cjs');
-const presenceContext = require('../presence/presence-context.cjs');
+const menuArrow = require('./menu-arrow.cjs');
+const menuArrowTip = require('./menu-arrow-tip.cjs');
+const menuContent = require('./menu-content.cjs');
+const menuContextTrigger = require('./menu-context-trigger.cjs');
+const menuItem = require('./menu-item.cjs');
+const menuItemGroup = require('./menu-item-group.cjs');
+const menuItemGroupLabel = require('./menu-item-group-label.cjs');
+const menuOptionItem = require('./menu-option-item.cjs');
+const menuPositioner = require('./menu-positioner.cjs');
+const menuRoot = require('./menu-root.cjs');
+const menuSeparator = require('./menu-separator.cjs');
+const menuTrigger = require('./menu-trigger.cjs');
+const menuTriggerItem = require('./menu-trigger-item.cjs');
 
-const Menu = (props) => {
-  const [presenceProps, menuProps] = splitPresenceProps.splitPresenceProps(props);
-  const [useMenuProps, localProps] = createSplitProps.createSplitProps()(menuProps, [
-    "anchorPoint",
-    "aria-label",
-    "closeOnSelect",
-    "dir",
-    "getRootNode",
-    "highlightedId",
-    "id",
-    "ids",
-    "loop",
-    "onFocusOutside",
-    "onInteractOutside",
-    "onOpenChange",
-    "onPointerDownOutside",
-    "onSelect",
-    "onValueChange",
-    "open",
-    "positioning",
-    "value"
-  ]);
-  const parentApi = menuContext.useMenuContext();
-  const parentMachine = menuContext.useMenuMachineContext();
-  const { api, machine } = useMenu.useMenu(useMenuProps);
-  const presenceApi = usePresence.usePresence(react.mergeProps({ present: api.isOpen }, presenceProps));
-  const view = runIfFn.runIfFn(localProps.children, api);
-  useEffectOnce.useEffectOnce(() => {
-    if (!parentMachine)
-      return;
-    parentApi.setChild(machine);
-    api.setParent(parentMachine);
-  });
-  const getTriggerItemProps = react$1.useCallback(
-    () => parentApi.getTriggerItemProps(api),
-    [api, parentApi]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(menuContext.MenuTriggerItemProvider, { value: getTriggerItemProps, children: /* @__PURE__ */ jsxRuntime.jsx(menuContext.MenuMachineProvider, { value: machine, children: /* @__PURE__ */ jsxRuntime.jsx(menuContext.MenuProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: view }) }) }) });
-};
 
-exports.Menu = Menu;
+
+exports.Arrow = menuArrow.MenuArrow;
+exports.ArrowTip = menuArrowTip.MenuArrowTip;
+exports.Content = menuContent.MenuContent;
+exports.ContextTrigger = menuContextTrigger.MenuContextTrigger;
+exports.Item = menuItem.MenuItem;
+exports.ItemGroup = menuItemGroup.MenuItemGroup;
+exports.ItemGroupLabel = menuItemGroupLabel.MenuItemGroupLabel;
+exports.OptionItem = menuOptionItem.MenuOptionItem;
+exports.Positioner = menuPositioner.MenuPositioner;
+exports.Root = menuRoot.MenuRoot;
+exports.Separator = menuSeparator.MenuSeparator;
+exports.Trigger = menuTrigger.MenuTrigger;
+exports.TriggerItem = menuTriggerItem.MenuTriggerItem;

package/menu/menu.d.ts

@@ -1,8 +1,14 @@
-import { JSX } from 'react/jsx-runtime';
-import { type ReactNode } from 'react';
-import { type UsePresenceProps } from '../presence';
-import { type UseMenuProps, type UseMenuReturn } from './use-menu';
-export interface MenuProps extends UseMenuProps, UsePresenceProps {
-    children?: ReactNode | ((api: UseMenuReturn['api']) => ReactNode);
-}
-export declare const Menu: (props: MenuProps) => JSX.Element;
+import { MenuArrow as Arrow } from './menu-arrow';
+import { MenuArrowTip as ArrowTip } from './menu-arrow-tip';
+import { MenuContent as Content } from './menu-content';
+import { MenuContextTrigger as ContextTrigger } from './menu-context-trigger';
+import { MenuItem as Item } from './menu-item';
+import { MenuItemGroup as ItemGroup } from './menu-item-group';
+import { MenuItemGroupLabel as ItemGroupLabel } from './menu-item-group-label';
+import { MenuOptionItem as OptionItem } from './menu-option-item';
+import { MenuPositioner as Positioner } from './menu-positioner';
+import { MenuRoot as Root } from './menu-root';
+import { MenuSeparator as Separator } from './menu-separator';
+import { MenuTrigger as Trigger } from './menu-trigger';
+import { MenuTriggerItem as TriggerItem } from './menu-trigger-item';
+export { Arrow, ArrowTip, Content, ContextTrigger, Item, ItemGroup, ItemGroupLabel, OptionItem, Positioner, Root, Separator, Trigger, TriggerItem, };

package/menu/menu.mjs

@@ -1,55 +1,13 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { mergeProps } from '@zag-js/react';
-import { useCallback } from 'react';
-import { createSplitProps } from '../create-split-props.mjs';
-import '../presence/index.mjs';
-import { runIfFn } from '../run-if-fn.mjs';
-import { useEffectOnce } from '../use-effect-once.mjs';
-import { useMenuContext, useMenuMachineContext, MenuTriggerItemProvider, MenuMachineProvider, MenuProvider } from './menu-context.mjs';
-import { useMenu } from './use-menu.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
-import { usePresence } from '../presence/use-presence.mjs';
-import { PresenceProvider } from '../presence/presence-context.mjs';
-
-const Menu = (props) => {
-  const [presenceProps, menuProps] = splitPresenceProps(props);
-  const [useMenuProps, localProps] = createSplitProps()(menuProps, [
-    "anchorPoint",
-    "aria-label",
-    "closeOnSelect",
-    "dir",
-    "getRootNode",
-    "highlightedId",
-    "id",
-    "ids",
-    "loop",
-    "onFocusOutside",
-    "onInteractOutside",
-    "onOpenChange",
-    "onPointerDownOutside",
-    "onSelect",
-    "onValueChange",
-    "open",
-    "positioning",
-    "value"
-  ]);
-  const parentApi = useMenuContext();
-  const parentMachine = useMenuMachineContext();
-  const { api, machine } = useMenu(useMenuProps);
-  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
-  const view = runIfFn(localProps.children, api);
-  useEffectOnce(() => {
-    if (!parentMachine)
-      return;
-    parentApi.setChild(machine);
-    api.setParent(parentMachine);
-  });
-  const getTriggerItemProps = useCallback(
-    () => parentApi.getTriggerItemProps(api),
-    [api, parentApi]
-  );
-  return /* @__PURE__ */ jsx(MenuTriggerItemProvider, { value: getTriggerItemProps, children: /* @__PURE__ */ jsx(MenuMachineProvider, { value: machine, children: /* @__PURE__ */ jsx(MenuProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: view }) }) }) });
-};
-
-export { Menu };
+export { MenuArrow as Arrow } from './menu-arrow.mjs';
+export { MenuArrowTip as ArrowTip } from './menu-arrow-tip.mjs';
+export { MenuContent as Content } from './menu-content.mjs';
+export { MenuContextTrigger as ContextTrigger } from './menu-context-trigger.mjs';
+export { MenuItem as Item } from './menu-item.mjs';
+export { MenuItemGroup as ItemGroup } from './menu-item-group.mjs';
+export { MenuItemGroupLabel as ItemGroupLabel } from './menu-item-group-label.mjs';
+export { MenuOptionItem as OptionItem } from './menu-option-item.mjs';
+export { MenuPositioner as Positioner } from './menu-positioner.mjs';
+export { MenuRoot as Root } from './menu-root.mjs';
+export { MenuSeparator as Separator } from './menu-separator.mjs';
+export { MenuTrigger as Trigger } from './menu-trigger.mjs';
+export { MenuTriggerItem as TriggerItem } from './menu-trigger-item.mjs';

package/menu/use-menu.cjs

@@ -6,9 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const menu = require('@zag-js/menu');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-require('../environment/index.cjs');
-const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
+const useEvent = require('../use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/menu/use-menu.mjs

@@ -2,9 +2,8 @@
 import * as menu from '@zag-js/menu';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
-import '../environment/index.mjs';
-import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
+import { useEvent } from '../use-event.mjs';
 
 const useMenu = (props = {}) => {
   const context = {

package/number-input/index.cjs

@@ -1,26 +1,18 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const numberInput = require('./number-input.cjs');
 const numberInputContext = require('./number-input-context.cjs');
 const numberInputControl = require('./number-input-control.cjs');
 const numberInputDecrementTrigger = require('./number-input-decrement-trigger.cjs');
 const numberInputIncrementTrigger = require('./number-input-increment-trigger.cjs');
 const numberInputInput = require('./number-input-input.cjs');
 const numberInputLabel = require('./number-input-label.cjs');
+const numberInputRoot = require('./number-input-root.cjs');
 const numberInputScrubber = require('./number-input-scrubber.cjs');
+const numberInput = require('./number-input.cjs');
+
 
-const NumberInput = Object.assign(numberInput.NumberInput, {
-  Root: numberInput.NumberInput,
-  Control: numberInputControl.NumberInputControl,
-  DecrementTrigger: numberInputDecrementTrigger.NumberInputDecrementTrigger,
-  Input: numberInputInput.NumberInputInput,
-  IncrementTrigger: numberInputIncrementTrigger.NumberInputIncrementTrigger,
-  Label: numberInputLabel.NumberInputLabel,
-  Scrubber: numberInputScrubber.NumberInputScrubber
-});
 
 exports.useNumberInputContext = numberInputContext.useNumberInputContext;
 exports.NumberInputControl = numberInputControl.NumberInputControl;
@@ -28,5 +20,6 @@ exports.NumberInputDecrementTrigger = numberInputDecrementTrigger.NumberInputDec
 exports.NumberInputIncrementTrigger = numberInputIncrementTrigger.NumberInputIncrementTrigger;
 exports.NumberInputInput = numberInputInput.NumberInputInput;
 exports.NumberInputLabel = numberInputLabel.NumberInputLabel;
+exports.NumberInputRoot = numberInputRoot.NumberInputRoot;
 exports.NumberInputScrubber = numberInputScrubber.NumberInputScrubber;
-exports.NumberInput = NumberInput;
+exports.NumberInput = numberInput;

package/number-input/index.d.ts

@@ -1,22 +1,12 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
 import type { FocusChangeDetails as NumberInputFocusChangeDetails, ValueChangeDetails as NumberInputValueChangeDetails, ValueInvalidDetails as NumberInputValueInvalidDetails } from '@zag-js/number-input';
-import { type NumberInputProps } from './number-input';
 import { useNumberInputContext, type NumberInputContext } from './number-input-context';
 import { NumberInputControl, type NumberInputControlProps } from './number-input-control';
 import { NumberInputDecrementTrigger, type NumberInputDecrementTriggerProps } from './number-input-decrement-trigger';
 import { NumberInputIncrementTrigger, type NumberInputIncrementTriggerProps } from './number-input-increment-trigger';
 import { NumberInputInput, type NumberInputInputProps } from './number-input-input';
 import { NumberInputLabel, type NumberInputLabelProps } from './number-input-label';
+import { NumberInputRoot, type NumberInputRootProps } from './number-input-root';
 import { NumberInputScrubber, type NumberInputScrubberProps } from './number-input-scrubber';
-declare const NumberInput: ForwardRefExoticComponent<NumberInputProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<NumberInputProps & RefAttributes<HTMLDivElement>>;
-    Control: ForwardRefExoticComponent<NumberInputControlProps & RefAttributes<HTMLDivElement>>;
-    DecrementTrigger: ForwardRefExoticComponent<NumberInputDecrementTriggerProps & RefAttributes<HTMLButtonElement>>;
-    Input: ForwardRefExoticComponent<NumberInputInputProps & RefAttributes<HTMLInputElement>>;
-    IncrementTrigger: ForwardRefExoticComponent<NumberInputIncrementTriggerProps & RefAttributes<HTMLButtonElement>>;
-    Label: ForwardRefExoticComponent<NumberInputLabelProps & RefAttributes<HTMLLabelElement>>;
-    Scrubber: ForwardRefExoticComponent<NumberInputScrubberProps & RefAttributes<HTMLDivElement>>;
-};
-export { NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputScrubber, useNumberInputContext, };
-export type { NumberInputContext, NumberInputControlProps, NumberInputDecrementTriggerProps, NumberInputFocusChangeDetails, NumberInputIncrementTriggerProps, NumberInputInputProps, NumberInputLabelProps, NumberInputProps, NumberInputScrubberProps, NumberInputValueChangeDetails, NumberInputValueInvalidDetails, };
+export * as NumberInput from './number-input';
+export { NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputRoot, NumberInputScrubber, useNumberInputContext, };
+export type { NumberInputContext, NumberInputControlProps, NumberInputDecrementTriggerProps, NumberInputFocusChangeDetails, NumberInputIncrementTriggerProps, NumberInputInputProps, NumberInputLabelProps, NumberInputRootProps, NumberInputScrubberProps, NumberInputValueChangeDetails, NumberInputValueInvalidDetails, };

package/number-input/index.mjs

@@ -1,21 +1,10 @@
-'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';
-import { NumberInputDecrementTrigger } from './number-input-decrement-trigger.mjs';
-import { NumberInputIncrementTrigger } from './number-input-increment-trigger.mjs';
-import { NumberInputInput } from './number-input-input.mjs';
-import { NumberInputLabel } from './number-input-label.mjs';
-import { NumberInputScrubber } from './number-input-scrubber.mjs';
-
-const NumberInput = Object.assign(NumberInput$1, {
-  Root: NumberInput$1,
-  Control: NumberInputControl,
-  DecrementTrigger: NumberInputDecrementTrigger,
-  Input: NumberInputInput,
-  IncrementTrigger: NumberInputIncrementTrigger,
-  Label: NumberInputLabel,
-  Scrubber: NumberInputScrubber
-});
-
-export { NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputScrubber };
+export { NumberInputControl } from './number-input-control.mjs';
+export { NumberInputDecrementTrigger } from './number-input-decrement-trigger.mjs';
+export { NumberInputIncrementTrigger } from './number-input-increment-trigger.mjs';
+export { NumberInputInput } from './number-input-input.mjs';
+export { NumberInputLabel } from './number-input-label.mjs';
+export { NumberInputRoot } from './number-input-root.mjs';
+export { NumberInputScrubber } from './number-input-scrubber.mjs';
+import * as numberInput from './number-input.mjs';
+export { numberInput as NumberInput };

package/number-input/number-input-root.cjs

@@ -0,0 +1,52 @@
+'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 react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const numberInputContext = require('./number-input-context.cjs');
+const useNumberInput = require('./use-number-input.cjs');
+
+const NumberInputRoot = react.forwardRef((props, ref) => {
+  const [useNumberInputProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, [
+    "allowMouseWheel",
+    "allowOverflow",
+    "clampValueOnBlur",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "focusInputOnChange",
+    "form",
+    "formatOptions",
+    "getRootNode",
+    "id",
+    "ids",
+    "inputMode",
+    "invalid",
+    "locale",
+    "max",
+    "min",
+    "name",
+    "onFocusChange",
+    "onValueChange",
+    "onValueInvalid",
+    "pattern",
+    "readOnly",
+    "spinOnPress",
+    "step",
+    "translations",
+    "value"
+  ]);
+  const api = useNumberInput.useNumberInput(useNumberInputProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
+  const view = runIfFn.runIfFn(children, api);
+  return /* @__PURE__ */ jsxRuntime.jsx(numberInputContext.NumberInputProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+});
+NumberInputRoot.displayName = "NumberInputRoot";
+
+exports.NumberInputRoot = NumberInputRoot;

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

@@ -0,0 +1,9 @@
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
+import { type Assign } from '../types';
+import { type UseNumberInputProps, type UseNumberInputReturn } from './use-number-input';
+export interface NumberInputRootProps extends Assign<Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseNumberInputReturn) => ReactNode);
+}>, UseNumberInputProps> {
+}
+export declare const NumberInputRoot: ForwardRefExoticComponent<NumberInputRootProps & RefAttributes<HTMLDivElement>>;

package/number-input/number-input-root.mjs

@@ -0,0 +1,48 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { NumberInputProvider } from './number-input-context.mjs';
+import { useNumberInput } from './use-number-input.mjs';
+
+const NumberInputRoot = forwardRef((props, ref) => {
+  const [useNumberInputProps, { children, ...localProps }] = createSplitProps()(props, [
+    "allowMouseWheel",
+    "allowOverflow",
+    "clampValueOnBlur",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "focusInputOnChange",
+    "form",
+    "formatOptions",
+    "getRootNode",
+    "id",
+    "ids",
+    "inputMode",
+    "invalid",
+    "locale",
+    "max",
+    "min",
+    "name",
+    "onFocusChange",
+    "onValueChange",
+    "onValueInvalid",
+    "pattern",
+    "readOnly",
+    "spinOnPress",
+    "step",
+    "translations",
+    "value"
+  ]);
+  const api = useNumberInput(useNumberInputProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
+  const view = runIfFn(children, api);
+  return /* @__PURE__ */ jsx(NumberInputProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+});
+NumberInputRoot.displayName = "NumberInputRoot";
+
+export { NumberInputRoot };

package/number-input/number-input.cjs

@@ -1,52 +1,21 @@
-'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 react = require('react');
-const createSplitProps = require('../create-split-props.cjs');
-const factory = require('../factory.cjs');
-const runIfFn = require('../run-if-fn.cjs');
-const numberInputContext = require('./number-input-context.cjs');
-const useNumberInput = require('./use-number-input.cjs');
+const numberInputControl = require('./number-input-control.cjs');
+const numberInputDecrementTrigger = require('./number-input-decrement-trigger.cjs');
+const numberInputIncrementTrigger = require('./number-input-increment-trigger.cjs');
+const numberInputInput = require('./number-input-input.cjs');
+const numberInputLabel = require('./number-input-label.cjs');
+const numberInputRoot = require('./number-input-root.cjs');
+const numberInputScrubber = require('./number-input-scrubber.cjs');
 
-const NumberInput = react.forwardRef((props, ref) => {
-  const [useNumberInputProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, [
-    "allowMouseWheel",
-    "allowOverflow",
-    "clampValueOnBlur",
-    "defaultValue",
-    "dir",
-    "disabled",
-    "focusInputOnChange",
-    "form",
-    "formatOptions",
-    "getRootNode",
-    "id",
-    "ids",
-    "inputMode",
-    "invalid",
-    "locale",
-    "max",
-    "min",
-    "name",
-    "onFocusChange",
-    "onValueChange",
-    "onValueInvalid",
-    "pattern",
-    "readOnly",
-    "spinOnPress",
-    "step",
-    "translations",
-    "value"
-  ]);
-  const api = useNumberInput.useNumberInput(useNumberInputProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
-  const view = runIfFn.runIfFn(children, api);
-  return /* @__PURE__ */ jsxRuntime.jsx(numberInputContext.NumberInputProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
-});
-NumberInput.displayName = "NumberInput";
 
-exports.NumberInput = NumberInput;
+
+exports.Control = numberInputControl.NumberInputControl;
+exports.DecrementTrigger = numberInputDecrementTrigger.NumberInputDecrementTrigger;
+exports.IncrementTrigger = numberInputIncrementTrigger.NumberInputIncrementTrigger;
+exports.Input = numberInputInput.NumberInputInput;
+exports.Label = numberInputLabel.NumberInputLabel;
+exports.Root = numberInputRoot.NumberInputRoot;
+exports.Scrubber = numberInputScrubber.NumberInputScrubber;