@ark-ui/react 1.0.1 → 1.2.0

package/hover-card/hover-card.mjs

@@ -1,5 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
 import 'react';
 import '../presence/index.mjs';
 import { splitPresenceProps } from '../presence/split-presence-props.mjs';
@@ -12,7 +13,7 @@ import { PresenceProvider } from '../presence/presence-context.mjs';
 const HoverCard = (props) => {
   const [presenceProps, { children, ...localProps }] = splitPresenceProps(props);
   const api = useHoverCard(localProps);
-  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn(children, api);
   return /* @__PURE__ */ jsx(HoverCardProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: view }) });
 };

package/index.cjs

@@ -13,26 +13,27 @@ const index$7 = require('./dialog/index.cjs');
 const index$8 = require('./editable/index.cjs');
 const index$9 = require('./environment/index.cjs');
 const factory = require('./factory.cjs');
-const index$a = require('./hover-card/index.cjs');
-const index$b = require('./menu/index.cjs');
-const index$c = require('./number-input/index.cjs');
-const index$d = require('./pagination/index.cjs');
-const index$e = require('./pin-input/index.cjs');
-const index$f = require('./popover/index.cjs');
+const index$a = require('./file-upload/index.cjs');
+const index$b = require('./hover-card/index.cjs');
+const index$c = require('./menu/index.cjs');
+const index$d = require('./number-input/index.cjs');
+const index$e = require('./pagination/index.cjs');
+const index$f = require('./pin-input/index.cjs');
+const index$g = require('./popover/index.cjs');
 const portal = require('./portal.cjs');
-const index$g = require('./presence/index.cjs');
-const index$h = require('./radio-group/index.cjs');
-const index$i = require('./rating-group/index.cjs');
-const index$j = require('./segment-group/index.cjs');
-const index$k = require('./select/index.cjs');
-const index$l = require('./slider/index.cjs');
-const index$m = require('./splitter/index.cjs');
-const index$n = require('./switch/index.cjs');
-const index$o = require('./tabs/index.cjs');
-const index$p = require('./tags-input/index.cjs');
-const index$q = require('./toast/index.cjs');
-const index$r = require('./toggle-group/index.cjs');
-const index$s = require('./tooltip/index.cjs');
+const index$h = require('./presence/index.cjs');
+const index$i = require('./radio-group/index.cjs');
+const index$j = require('./rating-group/index.cjs');
+const index$k = require('./segment-group/index.cjs');
+const index$l = require('./select/index.cjs');
+const index$m = require('./slider/index.cjs');
+const index$n = require('./splitter/index.cjs');
+const index$o = require('./switch/index.cjs');
+const index$p = require('./tabs/index.cjs');
+const index$q = require('./tags-input/index.cjs');
+const index$r = require('./toast/index.cjs');
+const index$s = require('./toggle-group/index.cjs');
+const index$t = require('./tooltip/index.cjs');
 const accordionItem = require('./accordion/accordion-item.cjs');
 const accordionItemContent = require('./accordion/accordion-item-content.cjs');
 const accordionItemIndicator = require('./accordion/accordion-item-indicator.cjs');
@@ -65,14 +66,18 @@ const colorPickerChannelSliderTrack = require('./color-picker/color-picker-chann
 const colorPickerContent = require('./color-picker/color-picker-content.cjs');
 const colorPickerControl = require('./color-picker/color-picker-control.cjs');
 const colorPickerEyeDropperTrigger = require('./color-picker/color-picker-eye-dropper-trigger.cjs');
+const colorPickerFormatSelect = require('./color-picker/color-picker-format-select.cjs');
+const colorPickerFormatTrigger = require('./color-picker/color-picker-format-trigger.cjs');
 const colorPickerLabel = require('./color-picker/color-picker-label.cjs');
 const colorPickerPositioner = require('./color-picker/color-picker-positioner.cjs');
 const colorPickerSwatch = require('./color-picker/color-picker-swatch.cjs');
 const colorPickerSwatchGroup = require('./color-picker/color-picker-swatch-group.cjs');
+const colorPickerSwatchIndicator = require('./color-picker/color-picker-swatch-indicator.cjs');
 const colorPickerSwatchTrigger = require('./color-picker/color-picker-swatch-trigger.cjs');
 const colorPickerTransparencyGrid = require('./color-picker/color-picker-transparency-grid.cjs');
 const colorPickerTrigger = require('./color-picker/color-picker-trigger.cjs');
 const colorPickerValueText = require('./color-picker/color-picker-value-text.cjs');
+const colorPickerView = require('./color-picker/color-picker-view.cjs');
 const colorPickerAreaContext = require('./color-picker/color-picker-area-context.cjs');
 const colorPickerChannelSliderContext = require('./color-picker/color-picker-channel-slider-context.cjs');
 const colorPickerContext = require('./color-picker/color-picker-context.cjs');
@@ -133,6 +138,16 @@ const editablePreview = require('./editable/editable-preview.cjs');
 const editableSubmitTrigger = require('./editable/editable-submit-trigger.cjs');
 const editableContext = require('./editable/editable-context.cjs');
 const environmentContext = require('./environment/environment-context.cjs');
+const fileUploadDropzone = require('./file-upload/file-upload-dropzone.cjs');
+const fileUploadItem = require('./file-upload/file-upload-item.cjs');
+const fileUploadItemDeleteTrigger = require('./file-upload/file-upload-item-delete-trigger.cjs');
+const fileUploadItemGroup = require('./file-upload/file-upload-item-group.cjs');
+const fileUploadItemName = require('./file-upload/file-upload-item-name.cjs');
+const fileUploadItemPreviewImage = require('./file-upload/file-upload-item-preview-image.cjs');
+const fileUploadItemSizeText = require('./file-upload/file-upload-item-size-text.cjs');
+const fileUploadLabel = require('./file-upload/file-upload-label.cjs');
+const fileUploadTrigger = require('./file-upload/file-upload-trigger.cjs');
+const fileUploadContext = require('./file-upload/file-upload-context.cjs');
 const hoverCardArrow = require('./hover-card/hover-card-arrow.cjs');
 const hoverCardArrowTip = require('./hover-card/hover-card-arrow-tip.cjs');
 const hoverCardContent = require('./hover-card/hover-card-content.cjs');
@@ -155,7 +170,7 @@ const menuContext = require('./menu/menu-context.cjs');
 const numberInputControl = require('./number-input/number-input-control.cjs');
 const numberInputDecrementTrigger = require('./number-input/number-input-decrement-trigger.cjs');
 const numberInputIncrementTrigger = require('./number-input/number-input-increment-trigger.cjs');
-const numberInputField = require('./number-input/number-input-field.cjs');
+const numberInputInput = require('./number-input/number-input-input.cjs');
 const numberInputLabel = require('./number-input/number-input-label.cjs');
 const numberInputScrubber = require('./number-input/number-input-scrubber.cjs');
 const numberInputContext = require('./number-input/number-input-context.cjs');
@@ -165,7 +180,7 @@ const paginationNextTrigger = require('./pagination/pagination-next-trigger.cjs'
 const paginationPrevTrigger = require('./pagination/pagination-prev-trigger.cjs');
 const paginationContext = require('./pagination/pagination-context.cjs');
 const pinInputControl = require('./pin-input/pin-input-control.cjs');
-const pinInputField = require('./pin-input/pin-input-field.cjs');
+const pinInputInput = require('./pin-input/pin-input-input.cjs');
 const pinInputLabel = require('./pin-input/pin-input-label.cjs');
 const pinInputContext = require('./pin-input/pin-input-context.cjs');
 const popoverAnchor = require('./popover/popover-anchor.cjs');
@@ -250,6 +265,7 @@ const tagsInputItemContext = require('./tags-input/tags-input-item-context.cjs')
 const createToaster = require('./toast/create-toaster.cjs');
 const toastCloseTrigger = require('./toast/toast-close-trigger.cjs');
 const toastDescription = require('./toast/toast-description.cjs');
+const toastGroup = require('./toast/toast-group.cjs');
 const toastTitle = require('./toast/toast-title.cjs');
 const toggleGroupItem = require('./toggle-group/toggle-group-item.cjs');
 const toggleGroupContext = require('./toggle-group/toggle-group-context.cjs');
@@ -274,26 +290,27 @@ exports.Editable = index$8.Editable;
 exports.Environment = index$9.Environment;
 exports.ark = factory.ark;
 exports.jsxFactory = factory.jsxFactory;
-exports.HoverCard = index$a.HoverCard;
-exports.Menu = index$b.Menu;
-exports.NumberInput = index$c.NumberInput;
-exports.Pagination = index$d.Pagination;
-exports.PinInput = index$e.PinInput;
-exports.Popover = index$f.Popover;
+exports.FileUpload = index$a.FileUpload;
+exports.HoverCard = index$b.HoverCard;
+exports.Menu = index$c.Menu;
+exports.NumberInput = index$d.NumberInput;
+exports.Pagination = index$e.Pagination;
+exports.PinInput = index$f.PinInput;
+exports.Popover = index$g.Popover;
 exports.Portal = portal.Portal;
-exports.Presence = index$g.Presence;
-exports.RadioGroup = index$h.RadioGroup;
-exports.RatingGroup = index$i.RatingGroup;
-exports.SegmentGroup = index$j.SegmentGroup;
-exports.Select = index$k.Select;
-exports.Slider = index$l.Slider;
-exports.Splitter = index$m.Splitter;
-exports.Switch = index$n.Switch;
-exports.Tabs = index$o.Tabs;
-exports.TagsInput = index$p.TagsInput;
-exports.Toast = index$q.Toast;
-exports.ToggleGroup = index$r.ToggleGroup;
-exports.Tooltip = index$s.Tooltip;
+exports.Presence = index$h.Presence;
+exports.RadioGroup = index$i.RadioGroup;
+exports.RatingGroup = index$j.RatingGroup;
+exports.SegmentGroup = index$k.SegmentGroup;
+exports.Select = index$l.Select;
+exports.Slider = index$m.Slider;
+exports.Splitter = index$n.Splitter;
+exports.Switch = index$o.Switch;
+exports.Tabs = index$p.Tabs;
+exports.TagsInput = index$q.TagsInput;
+exports.Toast = index$r.Toast;
+exports.ToggleGroup = index$s.ToggleGroup;
+exports.Tooltip = index$t.Tooltip;
 exports.AccordionItem = accordionItem.AccordionItem;
 exports.AccordionItemContent = accordionItemContent.AccordionItemContent;
 exports.AccordionItemIndicator = accordionItemIndicator.AccordionItemIndicator;
@@ -326,14 +343,18 @@ exports.ColorPickerChannelSliderTrack = colorPickerChannelSliderTrack.ColorPicke
 exports.ColorPickerContent = colorPickerContent.ColorPickerContent;
 exports.ColorPickerControl = colorPickerControl.ColorPickerControl;
 exports.ColorPickerEyeDropperTrigger = colorPickerEyeDropperTrigger.ColorPickerEyeDropperTrigger;
+exports.ColorPickerFormatSelect = colorPickerFormatSelect.ColorPickerFormatSelect;
+exports.ColorPickerFormatTrigger = colorPickerFormatTrigger.ColorPickerFormatTrigger;
 exports.ColorPickerLabel = colorPickerLabel.ColorPickerLabel;
 exports.ColorPickerPositioner = colorPickerPositioner.ColorPickerPositioner;
 exports.ColorPickerSwatch = colorPickerSwatch.ColorPickerSwatch;
 exports.ColorPickerSwatchGroup = colorPickerSwatchGroup.ColorPickerSwatchGroup;
+exports.ColorPickerSwatchIndicator = colorPickerSwatchIndicator.ColorPickerSwatchIndicator;
 exports.ColorPickerSwatchTrigger = colorPickerSwatchTrigger.ColorPickerSwatchTrigger;
 exports.ColorPickerTransparencyGrid = colorPickerTransparencyGrid.ColorPickerTransparencyGrid;
 exports.ColorPickerTrigger = colorPickerTrigger.ColorPickerTrigger;
 exports.ColorPickerValueText = colorPickerValueText.ColorPickerValueText;
+exports.ColorPickerView = colorPickerView.ColorPickerView;
 exports.useColorPickerAreaContext = colorPickerAreaContext.useColorPickerAreaContext;
 exports.useColorPickerChannelSliderContext = colorPickerChannelSliderContext.useColorPickerChannelSliderContext;
 exports.useColorPickerContext = colorPickerContext.useColorPickerContext;
@@ -394,6 +415,16 @@ exports.EditablePreview = editablePreview.EditablePreview;
 exports.EditableSubmitTrigger = editableSubmitTrigger.EditableSubmitTrigger;
 exports.useEditableContext = editableContext.useEditableContext;
 exports.useEnvironmentContext = environmentContext.useEnvironmentContext;
+exports.FileUploadDropzone = fileUploadDropzone.FileUploadDropzone;
+exports.FileUploadItem = fileUploadItem.FileUploadItem;
+exports.FileUploadItemDeleteTrigger = fileUploadItemDeleteTrigger.FileUploadItemDeleteTrigger;
+exports.FileUploadItemGroup = fileUploadItemGroup.FileUploadItemGroup;
+exports.FileUploadItemName = fileUploadItemName.FileUploadItemName;
+exports.FileUploadItemPreviewImage = fileUploadItemPreviewImage.FileUploadItemPreviewImage;
+exports.FileUploadItemSizeText = fileUploadItemSizeText.FileUploadItemSizeText;
+exports.FileUploadLabel = fileUploadLabel.FileUploadLabel;
+exports.FileUploadTrigger = fileUploadTrigger.FileUploadTrigger;
+exports.useFileUploadContext = fileUploadContext.useFileUploadContext;
 exports.HoverCardArrow = hoverCardArrow.HoverCardArrow;
 exports.HoverCardArrowTip = hoverCardArrowTip.HoverCardArrowTip;
 exports.HoverCardContent = hoverCardContent.HoverCardContent;
@@ -416,7 +447,7 @@ exports.useMenuContext = menuContext.useMenuContext;
 exports.NumberInputControl = numberInputControl.NumberInputControl;
 exports.NumberInputDecrementTrigger = numberInputDecrementTrigger.NumberInputDecrementTrigger;
 exports.NumberInputIncrementTrigger = numberInputIncrementTrigger.NumberInputIncrementTrigger;
-exports.NumberInputInput = numberInputField.NumberInputInput;
+exports.NumberInputInput = numberInputInput.NumberInputInput;
 exports.NumberInputLabel = numberInputLabel.NumberInputLabel;
 exports.NumberInputScrubber = numberInputScrubber.NumberInputScrubber;
 exports.useNumberInputContext = numberInputContext.useNumberInputContext;
@@ -426,7 +457,7 @@ exports.PaginationNextTrigger = paginationNextTrigger.PaginationNextTrigger;
 exports.PaginationPrevTrigger = paginationPrevTrigger.PaginationPrevTrigger;
 exports.usePaginationContext = paginationContext.usePaginationContext;
 exports.PinInputControl = pinInputControl.PinInputControl;
-exports.PinInputInput = pinInputField.PinInputInput;
+exports.PinInputInput = pinInputInput.PinInputInput;
 exports.PinInputLabel = pinInputLabel.PinInputLabel;
 exports.usePinInputContext = pinInputContext.usePinInputContext;
 exports.PopoverAnchor = popoverAnchor.PopoverAnchor;
@@ -513,6 +544,7 @@ exports.useTagsInputItemContext = tagsInputItemContext.useTagsInputItemContext;
 exports.createToaster = createToaster.createToaster;
 exports.ToastCloseTrigger = toastCloseTrigger.ToastCloseTrigger;
 exports.ToastDescription = toastDescription.ToastDescription;
+exports.ToastGroup = toastGroup.ToastGroup;
 exports.ToastTitle = toastTitle.ToastTitle;
 exports.ToggleGroupItem = toggleGroupItem.ToggleGroupItem;
 exports.useToggleGroupContext = toggleGroupContext.useToggleGroupContext;

package/index.d.ts

@@ -9,6 +9,7 @@ export * from './dialog';
 export * from './editable';
 export * from './environment';
 export * from './factory';
+export * from './file-upload';
 export * from './hover-card';
 export * from './menu';
 export * from './number-input';

package/index.mjs

@@ -9,6 +9,7 @@ export { Dialog } from './dialog/index.mjs';
 export { Editable } from './editable/index.mjs';
 export { Environment } from './environment/index.mjs';
 export { ark, jsxFactory } from './factory.mjs';
+export { FileUpload } from './file-upload/index.mjs';
 export { HoverCard } from './hover-card/index.mjs';
 export { Menu } from './menu/index.mjs';
 export { NumberInput } from './number-input/index.mjs';
@@ -61,14 +62,18 @@ export { ColorPickerChannelSliderTrack } from './color-picker/color-picker-chann
 export { ColorPickerContent } from './color-picker/color-picker-content.mjs';
 export { ColorPickerControl } from './color-picker/color-picker-control.mjs';
 export { ColorPickerEyeDropperTrigger } from './color-picker/color-picker-eye-dropper-trigger.mjs';
+export { ColorPickerFormatSelect } from './color-picker/color-picker-format-select.mjs';
+export { ColorPickerFormatTrigger } from './color-picker/color-picker-format-trigger.mjs';
 export { ColorPickerLabel } from './color-picker/color-picker-label.mjs';
 export { ColorPickerPositioner } from './color-picker/color-picker-positioner.mjs';
 export { ColorPickerSwatch } from './color-picker/color-picker-swatch.mjs';
 export { ColorPickerSwatchGroup } from './color-picker/color-picker-swatch-group.mjs';
+export { ColorPickerSwatchIndicator } from './color-picker/color-picker-swatch-indicator.mjs';
 export { ColorPickerSwatchTrigger } from './color-picker/color-picker-swatch-trigger.mjs';
 export { ColorPickerTransparencyGrid } from './color-picker/color-picker-transparency-grid.mjs';
 export { ColorPickerTrigger } from './color-picker/color-picker-trigger.mjs';
 export { ColorPickerValueText } from './color-picker/color-picker-value-text.mjs';
+export { ColorPickerView } from './color-picker/color-picker-view.mjs';
 export { useColorPickerAreaContext } from './color-picker/color-picker-area-context.mjs';
 export { useColorPickerChannelSliderContext } from './color-picker/color-picker-channel-slider-context.mjs';
 export { useColorPickerContext } from './color-picker/color-picker-context.mjs';
@@ -129,6 +134,16 @@ export { EditablePreview } from './editable/editable-preview.mjs';
 export { EditableSubmitTrigger } from './editable/editable-submit-trigger.mjs';
 export { useEditableContext } from './editable/editable-context.mjs';
 export { useEnvironmentContext } from './environment/environment-context.mjs';
+export { FileUploadDropzone } from './file-upload/file-upload-dropzone.mjs';
+export { FileUploadItem } from './file-upload/file-upload-item.mjs';
+export { FileUploadItemDeleteTrigger } from './file-upload/file-upload-item-delete-trigger.mjs';
+export { FileUploadItemGroup } from './file-upload/file-upload-item-group.mjs';
+export { FileUploadItemName } from './file-upload/file-upload-item-name.mjs';
+export { FileUploadItemPreviewImage } from './file-upload/file-upload-item-preview-image.mjs';
+export { FileUploadItemSizeText } from './file-upload/file-upload-item-size-text.mjs';
+export { FileUploadLabel } from './file-upload/file-upload-label.mjs';
+export { FileUploadTrigger } from './file-upload/file-upload-trigger.mjs';
+export { useFileUploadContext } from './file-upload/file-upload-context.mjs';
 export { HoverCardArrow } from './hover-card/hover-card-arrow.mjs';
 export { HoverCardArrowTip } from './hover-card/hover-card-arrow-tip.mjs';
 export { HoverCardContent } from './hover-card/hover-card-content.mjs';
@@ -151,7 +166,7 @@ export { useMenuContext } from './menu/menu-context.mjs';
 export { NumberInputControl } from './number-input/number-input-control.mjs';
 export { NumberInputDecrementTrigger } from './number-input/number-input-decrement-trigger.mjs';
 export { NumberInputIncrementTrigger } from './number-input/number-input-increment-trigger.mjs';
-export { NumberInputInput } from './number-input/number-input-field.mjs';
+export { NumberInputInput } from './number-input/number-input-input.mjs';
 export { NumberInputLabel } from './number-input/number-input-label.mjs';
 export { NumberInputScrubber } from './number-input/number-input-scrubber.mjs';
 export { useNumberInputContext } from './number-input/number-input-context.mjs';
@@ -161,7 +176,7 @@ export { PaginationNextTrigger } from './pagination/pagination-next-trigger.mjs'
 export { PaginationPrevTrigger } from './pagination/pagination-prev-trigger.mjs';
 export { usePaginationContext } from './pagination/pagination-context.mjs';
 export { PinInputControl } from './pin-input/pin-input-control.mjs';
-export { PinInputInput } from './pin-input/pin-input-field.mjs';
+export { PinInputInput } from './pin-input/pin-input-input.mjs';
 export { PinInputLabel } from './pin-input/pin-input-label.mjs';
 export { usePinInputContext } from './pin-input/pin-input-context.mjs';
 export { PopoverAnchor } from './popover/popover-anchor.mjs';
@@ -246,6 +261,7 @@ export { useTagsInputItemContext } from './tags-input/tags-input-item-context.mj
 export { createToaster } from './toast/create-toaster.mjs';
 export { ToastCloseTrigger } from './toast/toast-close-trigger.mjs';
 export { ToastDescription } from './toast/toast-description.mjs';
+export { ToastGroup } from './toast/toast-group.mjs';
 export { ToastTitle } from './toast/toast-title.mjs';
 export { ToggleGroupItem } from './toggle-group/toggle-group-item.mjs';
 export { useToggleGroupContext } from './toggle-group/toggle-group-context.mjs';

package/menu/menu.cjs

@@ -4,7 +4,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('react');
+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');
@@ -40,7 +41,7 @@ const Menu = (props) => {
   const parentApi = menuContext.useMenuContext();
   const parentMachine = menuContext.useMenuMachineContext();
   const { api, machine } = useMenu.useMenu(useMenuProps);
-  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence.usePresence(react.mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn.runIfFn(localProps.children, api);
   useEffectOnce.useEffectOnce(() => {
     if (!parentMachine)
@@ -48,7 +49,7 @@ const Menu = (props) => {
     parentApi.setChild(machine);
     api.setParent(parentMachine);
   });
-  const getTriggerItemProps = react.useCallback(
+  const getTriggerItemProps = react$1.useCallback(
     () => parentApi.getTriggerItemProps(api),
     [api, parentApi]
   );

package/menu/menu.mjs

@@ -1,5 +1,6 @@
 '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';
@@ -36,7 +37,7 @@ const Menu = (props) => {
   const parentApi = useMenuContext();
   const parentMachine = useMenuMachineContext();
   const { api, machine } = useMenu(useMenuProps);
-  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn(localProps.children, api);
   useEffectOnce(() => {
     if (!parentMachine)

package/number-input/index.cjs

@@ -7,8 +7,8 @@ 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 numberInputField = require('./number-input-field.cjs');
 const numberInputIncrementTrigger = require('./number-input-increment-trigger.cjs');
+const numberInputInput = require('./number-input-input.cjs');
 const numberInputLabel = require('./number-input-label.cjs');
 const numberInputScrubber = require('./number-input-scrubber.cjs');
 
@@ -16,7 +16,7 @@ const NumberInput = Object.assign(numberInput.NumberInput, {
   Root: numberInput.NumberInput,
   Control: numberInputControl.NumberInputControl,
   DecrementTrigger: numberInputDecrementTrigger.NumberInputDecrementTrigger,
-  Input: numberInputField.NumberInputInput,
+  Input: numberInputInput.NumberInputInput,
   IncrementTrigger: numberInputIncrementTrigger.NumberInputIncrementTrigger,
   Label: numberInputLabel.NumberInputLabel,
   Scrubber: numberInputScrubber.NumberInputScrubber
@@ -25,8 +25,8 @@ const NumberInput = Object.assign(numberInput.NumberInput, {
 exports.useNumberInputContext = numberInputContext.useNumberInputContext;
 exports.NumberInputControl = numberInputControl.NumberInputControl;
 exports.NumberInputDecrementTrigger = numberInputDecrementTrigger.NumberInputDecrementTrigger;
-exports.NumberInputInput = numberInputField.NumberInputInput;
 exports.NumberInputIncrementTrigger = numberInputIncrementTrigger.NumberInputIncrementTrigger;
+exports.NumberInputInput = numberInputInput.NumberInputInput;
 exports.NumberInputLabel = numberInputLabel.NumberInputLabel;
 exports.NumberInputScrubber = numberInputScrubber.NumberInputScrubber;
 exports.NumberInput = NumberInput;

package/number-input/index.d.ts

@@ -4,8 +4,8 @@ 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 { NumberInputInput, type NumberInputInputProps } from './number-input-field';
 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 { NumberInputScrubber, type NumberInputScrubberProps } from './number-input-scrubber';
 declare const NumberInput: ForwardRefExoticComponent<NumberInputProps & RefAttributes<HTMLDivElement>> & {

package/number-input/index.mjs

@@ -3,8 +3,8 @@ 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 { NumberInputInput } from './number-input-field.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';
 

package/number-input/number-input.cjs

@@ -8,11 +8,12 @@ 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 NumberInput = react.forwardRef((props, ref) => {
-  const [useNumberInputProps, divProps] = createSplitProps.createSplitProps()(props, [
+  const [useNumberInputProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, [
     "allowMouseWheel",
     "allowOverflow",
     "clampValueOnBlur",
@@ -42,8 +43,9 @@ const NumberInput = react.forwardRef((props, ref) => {
     "value"
   ]);
   const api = useNumberInput.useNumberInput(useNumberInputProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(numberInputContext.NumberInputProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+  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";
 

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

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

package/number-input/number-input.mjs

@@ -4,11 +4,12 @@ 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 NumberInput = forwardRef((props, ref) => {
-  const [useNumberInputProps, divProps] = createSplitProps()(props, [
+  const [useNumberInputProps, { children, ...localProps }] = createSplitProps()(props, [
     "allowMouseWheel",
     "allowOverflow",
     "clampValueOnBlur",
@@ -38,8 +39,9 @@ const NumberInput = forwardRef((props, ref) => {
     "value"
   ]);
   const api = useNumberInput(useNumberInputProps);
-  const mergedProps = mergeProps(api.rootProps, divProps);
-  return /* @__PURE__ */ jsx(NumberInputProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+  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 }) });
 });
 NumberInput.displayName = "NumberInput";
 

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

@@ -12,3 +12,4 @@ export declare const MouseWheel: () => JSX.Element;
 export declare const NoClamp: () => JSX.Element;
 export declare const FormUsage: () => JSX.Element;
 export declare const Formatted: () => JSX.Element;
+export declare const RenderFn: () => JSX.Element;