@ark-ui/react 3.4.0-1 → 3.5.0

package/dist/components/index.d.cts

@@ -10,6 +10,7 @@ export * from './date-picker';
 export * from './dialog';
 export * from './editable';
 export * from './factory';
+export * from './field';
 export * from './file-upload';
 export * from './format';
 export * from './hover-card';

package/dist/components/index.d.ts

@@ -10,6 +10,7 @@ export * from './date-picker';
 export * from './dialog';
 export * from './editable';
 export * from './factory';
+export * from './field';
 export * from './file-upload';
 export * from './format';
 export * from './hover-card';

package/dist/components/index.js

@@ -33,6 +33,7 @@ export { CarouselRootProvider } from './carousel/carousel-root-provider.js';
 export { CarouselViewport } from './carousel/carousel-viewport.js';
 export { useCarousel } from './carousel/use-carousel.js';
 export { useCarouselContext } from './carousel/use-carousel-context.js';
+export { carouselAnatomy } from './carousel/carousel.anatomy.js';
 import * as carousel from './carousel/carousel.js';
 export { carousel as Carousel };
 export { CheckboxContext } from './checkbox/checkbox-context.js';
@@ -47,6 +48,7 @@ export { useCheckbox } from './checkbox/use-checkbox.js';
 export { useCheckboxContext } from './checkbox/use-checkbox-context.js';
 export { useCheckboxGroup } from './checkbox/use-checkbox-group.js';
 export { useCheckboxGroupContext } from './checkbox/use-checkbox-group-context.js';
+export { checkboxAnatomy } from './checkbox/checkbox.anatomy.js';
 import * as checkbox from './checkbox/checkbox.js';
 export { checkbox as Checkbox };
 export { ClipboardContext } from './clipboard/clipboard-context.js';
@@ -101,6 +103,7 @@ export { ColorPickerValueText } from './color-picker/color-picker-value-text.js'
 export { ColorPickerView } from './color-picker/color-picker-view.js';
 export { useColorPicker } from './color-picker/use-color-picker.js';
 export { useColorPickerContext } from './color-picker/use-color-picker-context.js';
+export { colorPickerAnatomy } from './color-picker/color-picker.anatomy.js';
 import * as colorPicker from './color-picker/color-picker.js';
 export { colorPicker as ColorPicker };
 export { ComboboxClearTrigger } from './combobox/combobox-clear-trigger.js';
@@ -153,6 +156,7 @@ export { DatePickerViewTrigger } from './date-picker/date-picker-view-trigger.js
 export { DatePickerYearSelect } from './date-picker/date-picker-year-select.js';
 export { useDatePicker } from './date-picker/use-date-picker.js';
 export { useDatePickerContext } from './date-picker/use-date-picker-context.js';
+export { datePickerAnatomy } from './date-picker/date-picker.anatomy.js';
 import * as datePicker from './date-picker/date-picker.js';
 export { datePicker as DatePicker };
 export { DialogBackdrop } from './dialog/dialog-backdrop.js';
@@ -185,6 +189,19 @@ export { useEditableContext } from './editable/use-editable-context.js';
 import * as editable from './editable/editable.js';
 export { editable as Editable };
 export { ark, jsxFactory } from './factory.js';
+export { FieldContext } from './field/field-context.js';
+export { FieldErrorText } from './field/field-error-text.js';
+export { FieldHelperText } from './field/field-helper-text.js';
+export { FieldInput } from './field/field-input.js';
+export { FieldLabel } from './field/field-label.js';
+export { FieldSelect } from './field/field-select.js';
+export { FieldRoot } from './field/field-root.js';
+export { FieldRootProvider } from './field/field-root-provider.js';
+export { FieldTextarea } from './field/field-textarea.js';
+export { useFieldContext } from './field/use-field-context.js';
+export { fieldAnatomy } from './field/field.anatomy.js';
+import * as field from './field/field.js';
+export { field as Field };
 export { FileUploadContext } from './file-upload/file-upload-context.js';
 export { FileUploadDropzone } from './file-upload/file-upload-dropzone.js';
 export { FileUploadHiddenInput } from './file-upload/file-upload-hidden-input.js';
@@ -254,6 +271,7 @@ export { NumberInputLabel } from './number-input/number-input-label.js';
 export { NumberInputRoot } from './number-input/number-input-root.js';
 export { NumberInputRootProvider } from './number-input/number-input-root-provider.js';
 export { NumberInputScrubber } from './number-input/number-input-scrubber.js';
+export { NumberInputValueText } from './number-input/number-input-value-text.js';
 export { useNumberInput } from './number-input/use-number-input.js';
 export { useNumberInputContext } from './number-input/use-number-input-context.js';
 import * as numberInput from './number-input/number-input.js';
@@ -368,6 +386,7 @@ export { SegmentGroupRootProvider } from './segment-group/segment-group-root-pro
 export { useSegmentGroup } from './segment-group/use-segment-group.js';
 export { useSegmentGroupContext } from './segment-group/use-segment-group-context.js';
 export { useSegmentGroupItemContext } from './segment-group/use-segment-group-item-context.js';
+export { segmentGroupAnatomy } from './segment-group/segment-group.anatomy.js';
 import * as segmentGroup from './segment-group/segment-group.js';
 export { segmentGroup as SegmentGroup };
 export { SelectClearTrigger } from './select/select-clear-trigger.js';
@@ -399,6 +418,7 @@ export { SignaturePadContext } from './signature-pad/signature-pad-context.js';
 export { SignaturePadControl } from './signature-pad/signature-pad-control.js';
 export { SignaturePadGuide } from './signature-pad/signature-pad-guide.js';
 export { SignaturePadLabel } from './signature-pad/signature-pad-label.js';
+export { SignaturePadHiddenInput } from './signature-pad/signature-pad-hidden-input.js';
 export { SignaturePadRoot } from './signature-pad/signature-pad-root.js';
 export { SignaturePadRootProvider } from './signature-pad/signature-pad-root-provider.js';
 export { SignaturePadSegment } from './signature-pad/signature-pad-segment.js';
@@ -523,3 +543,32 @@ export { useTreeViewContext } from './tree-view/use-tree-view-context.js';
 export { useTreeViewItemContext } from './tree-view/use-tree-view-item-context.js';
 import * as treeView from './tree-view/tree-view.js';
 export { treeView as TreeView };
+export { anatomy as accordionAnatomy } from '@zag-js/accordion';
+export { anatomy as avatarAnatomy } from '@zag-js/avatar';
+export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';
+export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';
+export { anatomy as comboboxAnatomy } from '@zag-js/combobox';
+export { anatomy as dialogAnatomy } from '@zag-js/dialog';
+export { anatomy as editableAnatomy } from '@zag-js/editable';
+export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
+export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
+export { anatomy as menuAnatomy } from '@zag-js/menu';
+export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
+export { anatomy as paginationAnatomy } from '@zag-js/pagination';
+export { anatomy as pinInputAnatomy } from '@zag-js/pin-input';
+export { anatomy as popoverAnatomy } from '@zag-js/popover';
+export { anatomy as progressAnatomy } from '@zag-js/progress';
+export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code';
+export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group';
+export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';
+export { anatomy as selectAnatomy } from '@zag-js/select';
+export { anatomy as signaturePadAnatomy } from '@zag-js/signature-pad';
+export { anatomy as sliderAnatomy } from '@zag-js/slider';
+export { anatomy as splitterAnatomy } from '@zag-js/splitter';
+export { anatomy as switchAnatomy } from '@zag-js/switch';
+export { anatomy as tabsAnatomy } from '@zag-js/tabs';
+export { anatomy as tagsInputAnatomy } from '@zag-js/tags-input';
+export { anatomy as toastAnatomy } from '@zag-js/toast';
+export { anatomy as toggleGroupAnatomy } from '@zag-js/toggle-group';
+export { anatomy as tooltipAnatomy } from '@zag-js/tooltip';
+export { anatomy as treeViewAnatomy } from '@zag-js/tree-view';

package/dist/components/menu/index.cjs

@@ -26,7 +26,8 @@ const menuTriggerItem = require('./menu-trigger-item.cjs');
 const useMenu = require('./use-menu.cjs');
 const useMenuContext = require('./use-menu-context.cjs');
 const useMenuItemContext = require('./use-menu-item-context.cjs');
-const menu = require('./menu.cjs');
+const menu$1 = require('./menu.cjs');
+const menu = require('@zag-js/menu');
 
 
 
@@ -54,4 +55,8 @@ exports.MenuTriggerItem = menuTriggerItem.MenuTriggerItem;
 exports.useMenu = useMenu.useMenu;
 exports.useMenuContext = useMenuContext.useMenuContext;
 exports.useMenuItemContext = useMenuItemContext.useMenuItemContext;
-exports.Menu = menu;
+exports.Menu = menu$1;
+Object.defineProperty(exports, "menuAnatomy", {
+  enumerable: true,
+  get: () => menu.anatomy
+});

package/dist/components/menu/index.d.cts

@@ -24,4 +24,5 @@ export { useMenu, type UseMenuProps, type UseMenuReturn } from './use-menu';
 export { useMenuContext, type UseMenuContext } from './use-menu-context';
 export { useMenuItemContext, type UseMenuItemContext } from './use-menu-item-context';
 export type { ValueChangeDetails as MenuValueChangeDetails } from './use-menu-item-group-context';
+export { menuAnatomy } from './menu.anatomy';
 export * as Menu from './menu';

package/dist/components/menu/index.d.ts

@@ -24,4 +24,5 @@ export { useMenu, type UseMenuProps, type UseMenuReturn } from './use-menu';
 export { useMenuContext, type UseMenuContext } from './use-menu-context';
 export { useMenuItemContext, type UseMenuItemContext } from './use-menu-item-context';
 export type { ValueChangeDetails as MenuValueChangeDetails } from './use-menu-item-group-context';
+export { menuAnatomy } from './menu.anatomy';
 export * as Menu from './menu';

package/dist/components/menu/index.js

@@ -24,3 +24,4 @@ export { useMenuContext } from './use-menu-context.js';
 export { useMenuItemContext } from './use-menu-item-context.js';
 import * as menu from './menu.js';
 export { menu as Menu };
+export { anatomy as menuAnatomy } from '@zag-js/menu';

package/dist/components/menu/menu-checkbox-item.cjs

@@ -26,9 +26,9 @@ const MenuCheckboxItem = react.forwardRef((props, ref) => {
     type: "checkbox"
   };
   const menu = useMenuContext.useMenuContext();
-  const item = menu.getOptionItemState(optionItemProps);
   const mergedProps = react$1.mergeProps(menu.getOptionItemProps(optionItemProps), localProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(useMenuOptionItemPropsContext.MenuOptionItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsxRuntime.jsx(useMenuItemContext.MenuItemProvider, { value: item, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
+  const optionItemState = menu.getOptionItemState(optionItemProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useMenuOptionItemPropsContext.MenuOptionItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsxRuntime.jsx(useMenuItemContext.MenuItemProvider, { value: optionItemState, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
 });
 MenuCheckboxItem.displayName = "MenuCheckboxItem";
 

package/dist/components/menu/menu-checkbox-item.js

@@ -22,9 +22,9 @@ const MenuCheckboxItem = forwardRef((props, ref) => {
     type: "checkbox"
   };
   const menu = useMenuContext();
-  const item = menu.getOptionItemState(optionItemProps);
   const mergedProps = mergeProps(menu.getOptionItemProps(optionItemProps), localProps);
-  return /* @__PURE__ */ jsx(MenuOptionItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsx(MenuItemProvider, { value: item, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
+  const optionItemState = menu.getOptionItemState(optionItemProps);
+  return /* @__PURE__ */ jsx(MenuOptionItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsx(MenuItemProvider, { value: optionItemState, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
 });
 MenuCheckboxItem.displayName = "MenuCheckboxItem";
 

package/dist/components/menu/menu-radio-item.cjs

@@ -29,8 +29,8 @@ const MenuRadioItem = react.forwardRef((props, ref) => {
     onCheckedChange: () => itemGroup.onValueChange?.({ value: partialItemProps.value })
   };
   const mergedProps = react$1.mergeProps(menu.getOptionItemProps(optionItemProps), localProps);
-  const itemState = menu.getItemState(optionItemProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(useMenuOptionItemPropsContext.MenuOptionItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsxRuntime.jsx(useMenuItemContext.MenuItemProvider, { value: itemState, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
+  const optionItemState = menu.getOptionItemState(optionItemProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useMenuOptionItemPropsContext.MenuOptionItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsxRuntime.jsx(useMenuItemContext.MenuItemProvider, { value: optionItemState, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
 });
 MenuRadioItem.displayName = "MenuRadioItem";
 

package/dist/components/menu/menu-radio-item.js

@@ -25,8 +25,8 @@ const MenuRadioItem = forwardRef((props, ref) => {
     onCheckedChange: () => itemGroup.onValueChange?.({ value: partialItemProps.value })
   };
   const mergedProps = mergeProps(menu.getOptionItemProps(optionItemProps), localProps);
-  const itemState = menu.getItemState(optionItemProps);
-  return /* @__PURE__ */ jsx(MenuOptionItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsx(MenuItemProvider, { value: itemState, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
+  const optionItemState = menu.getOptionItemState(optionItemProps);
+  return /* @__PURE__ */ jsx(MenuOptionItemPropsProvider, { value: optionItemProps, children: /* @__PURE__ */ jsx(MenuItemProvider, { value: optionItemState, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
 });
 MenuRadioItem.displayName = "MenuRadioItem";
 

package/dist/components/menu/menu.anatomy.d.cts

@@ -0,0 +1 @@
+export { anatomy as menuAnatomy } from '@zag-js/menu';

package/dist/components/menu/menu.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as menuAnatomy } from '@zag-js/menu';

package/dist/components/number-input/index.cjs

@@ -11,9 +11,11 @@ const numberInputLabel = require('./number-input-label.cjs');
 const numberInputRoot = require('./number-input-root.cjs');
 const numberInputRootProvider = require('./number-input-root-provider.cjs');
 const numberInputScrubber = require('./number-input-scrubber.cjs');
+const numberInputValueText = require('./number-input-value-text.cjs');
 const useNumberInput = require('./use-number-input.cjs');
 const useNumberInputContext = require('./use-number-input-context.cjs');
-const numberInput = require('./number-input.cjs');
+const numberInput$1 = require('./number-input.cjs');
+const numberInput = require('@zag-js/number-input');
 
 
 
@@ -26,6 +28,11 @@ exports.NumberInputLabel = numberInputLabel.NumberInputLabel;
 exports.NumberInputRoot = numberInputRoot.NumberInputRoot;
 exports.NumberInputRootProvider = numberInputRootProvider.NumberInputRootProvider;
 exports.NumberInputScrubber = numberInputScrubber.NumberInputScrubber;
+exports.NumberInputValueText = numberInputValueText.NumberInputValueText;
 exports.useNumberInput = useNumberInput.useNumberInput;
 exports.useNumberInputContext = useNumberInputContext.useNumberInputContext;
-exports.NumberInput = numberInput;
+exports.NumberInput = numberInput$1;
+Object.defineProperty(exports, "numberInputAnatomy", {
+  enumerable: true,
+  get: () => numberInput.anatomy
+});

package/dist/components/number-input/index.d.cts

@@ -1,13 +1,15 @@
 export type { FocusChangeDetails as NumberInputFocusChangeDetails, ValueChangeDetails as NumberInputValueChangeDetails, ValueInvalidDetails as NumberInputValueInvalidDetails, } from '@zag-js/number-input';
 export { NumberInputContext, type NumberInputContextProps, } from './number-input-context';
-export { NumberInputControl, type NumberInputControlProps, type NumberInputControlBaseProps, } from './number-input-control';
-export { NumberInputDecrementTrigger, type NumberInputDecrementTriggerProps, type NumberInputDecrementTriggerBaseProps, } from './number-input-decrement-trigger';
-export { NumberInputIncrementTrigger, type NumberInputIncrementTriggerProps, type NumberInputIncrementTriggerBaseProps, } from './number-input-increment-trigger';
-export { NumberInputInput, type NumberInputInputProps, type NumberInputInputBaseProps, } from './number-input-input';
-export { NumberInputLabel, type NumberInputLabelProps, type NumberInputLabelBaseProps, } from './number-input-label';
-export { NumberInputRoot, type NumberInputRootProps, type NumberInputRootBaseProps, } from './number-input-root';
-export { NumberInputRootProvider, type NumberInputRootProviderProps, type NumberInputRootProviderBaseProps, } from './number-input-root-provider';
-export { NumberInputScrubber, type NumberInputScrubberProps, type NumberInputScrubberBaseProps, } from './number-input-scrubber';
+export { NumberInputControl, type NumberInputControlBaseProps, type NumberInputControlProps, } from './number-input-control';
+export { NumberInputDecrementTrigger, type NumberInputDecrementTriggerBaseProps, type NumberInputDecrementTriggerProps, } from './number-input-decrement-trigger';
+export { NumberInputIncrementTrigger, type NumberInputIncrementTriggerBaseProps, type NumberInputIncrementTriggerProps, } from './number-input-increment-trigger';
+export { NumberInputInput, type NumberInputInputBaseProps, type NumberInputInputProps, } from './number-input-input';
+export { NumberInputLabel, type NumberInputLabelBaseProps, type NumberInputLabelProps, } from './number-input-label';
+export { NumberInputRoot, type NumberInputRootBaseProps, type NumberInputRootProps, } from './number-input-root';
+export { NumberInputRootProvider, type NumberInputRootProviderBaseProps, type NumberInputRootProviderProps, } from './number-input-root-provider';
+export { NumberInputScrubber, type NumberInputScrubberBaseProps, type NumberInputScrubberProps, } from './number-input-scrubber';
+export { NumberInputValueText, type NumberInputValueTextBaseProps, type NumberInputValueTextProps, } from './number-input-value-text';
 export { useNumberInput, type UseNumberInputProps, type UseNumberInputReturn, } from './use-number-input';
 export { useNumberInputContext, type UseNumberInputContext } from './use-number-input-context';
+export { numberInputAnatomy } from './number-input.anatomy';
 export * as NumberInput from './number-input';

package/dist/components/number-input/index.d.ts

@@ -1,13 +1,15 @@
 export type { FocusChangeDetails as NumberInputFocusChangeDetails, ValueChangeDetails as NumberInputValueChangeDetails, ValueInvalidDetails as NumberInputValueInvalidDetails, } from '@zag-js/number-input';
 export { NumberInputContext, type NumberInputContextProps, } from './number-input-context';
-export { NumberInputControl, type NumberInputControlProps, type NumberInputControlBaseProps, } from './number-input-control';
-export { NumberInputDecrementTrigger, type NumberInputDecrementTriggerProps, type NumberInputDecrementTriggerBaseProps, } from './number-input-decrement-trigger';
-export { NumberInputIncrementTrigger, type NumberInputIncrementTriggerProps, type NumberInputIncrementTriggerBaseProps, } from './number-input-increment-trigger';
-export { NumberInputInput, type NumberInputInputProps, type NumberInputInputBaseProps, } from './number-input-input';
-export { NumberInputLabel, type NumberInputLabelProps, type NumberInputLabelBaseProps, } from './number-input-label';
-export { NumberInputRoot, type NumberInputRootProps, type NumberInputRootBaseProps, } from './number-input-root';
-export { NumberInputRootProvider, type NumberInputRootProviderProps, type NumberInputRootProviderBaseProps, } from './number-input-root-provider';
-export { NumberInputScrubber, type NumberInputScrubberProps, type NumberInputScrubberBaseProps, } from './number-input-scrubber';
+export { NumberInputControl, type NumberInputControlBaseProps, type NumberInputControlProps, } from './number-input-control';
+export { NumberInputDecrementTrigger, type NumberInputDecrementTriggerBaseProps, type NumberInputDecrementTriggerProps, } from './number-input-decrement-trigger';
+export { NumberInputIncrementTrigger, type NumberInputIncrementTriggerBaseProps, type NumberInputIncrementTriggerProps, } from './number-input-increment-trigger';
+export { NumberInputInput, type NumberInputInputBaseProps, type NumberInputInputProps, } from './number-input-input';
+export { NumberInputLabel, type NumberInputLabelBaseProps, type NumberInputLabelProps, } from './number-input-label';
+export { NumberInputRoot, type NumberInputRootBaseProps, type NumberInputRootProps, } from './number-input-root';
+export { NumberInputRootProvider, type NumberInputRootProviderBaseProps, type NumberInputRootProviderProps, } from './number-input-root-provider';
+export { NumberInputScrubber, type NumberInputScrubberBaseProps, type NumberInputScrubberProps, } from './number-input-scrubber';
+export { NumberInputValueText, type NumberInputValueTextBaseProps, type NumberInputValueTextProps, } from './number-input-value-text';
 export { useNumberInput, type UseNumberInputProps, type UseNumberInputReturn, } from './use-number-input';
 export { useNumberInputContext, type UseNumberInputContext } from './use-number-input-context';
+export { numberInputAnatomy } from './number-input.anatomy';
 export * as NumberInput from './number-input';

package/dist/components/number-input/index.js

@@ -7,7 +7,9 @@ export { NumberInputLabel } from './number-input-label.js';
 export { NumberInputRoot } from './number-input-root.js';
 export { NumberInputRootProvider } from './number-input-root-provider.js';
 export { NumberInputScrubber } from './number-input-scrubber.js';
+export { NumberInputValueText } from './number-input-value-text.js';
 export { useNumberInput } from './use-number-input.js';
 export { useNumberInputContext } from './use-number-input-context.js';
 import * as numberInput from './number-input.js';
 export { numberInput as NumberInput };
+export { anatomy as numberInputAnatomy } from '@zag-js/number-input';

package/dist/components/number-input/number-input-input.cjs

@@ -7,13 +7,15 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+const useFieldContext = require('../field/use-field-context.cjs');
 const useNumberInputContext = require('./use-number-input-context.cjs');
 
 const NumberInputInput = react.forwardRef(
   (props, ref) => {
     const numberInput = useNumberInputContext.useNumberInputContext();
     const mergedProps = react$1.mergeProps(numberInput.getInputProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+    const field = useFieldContext.useFieldContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 NumberInputInput.displayName = "NumberInputInput";

package/dist/components/number-input/number-input-input.js

@@ -3,13 +3,15 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
+import { useFieldContext } from '../field/use-field-context.js';
 import { useNumberInputContext } from './use-number-input-context.js';
 
 const NumberInputInput = forwardRef(
   (props, ref) => {
     const numberInput = useNumberInputContext();
     const mergedProps = mergeProps(numberInput.getInputProps(), props);
-    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+    const field = useFieldContext();
+    return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 NumberInputInput.displayName = "NumberInputInput";

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

@@ -34,6 +34,7 @@ const NumberInputRoot = react.forwardRef((props, ref) => {
     "onValueInvalid",
     "pattern",
     "readOnly",
+    "required",
     "spinOnPress",
     "step",
     "translations",

package/dist/components/number-input/number-input-root.js

@@ -30,6 +30,7 @@ const NumberInputRoot = forwardRef((props, ref) => {
     "onValueInvalid",
     "pattern",
     "readOnly",
+    "required",
     "spinOnPress",
     "step",
     "translations",

package/dist/components/number-input/number-input-value-text.cjs

@@ -0,0 +1,22 @@
+'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 factory = require('../factory.cjs');
+const useNumberInputContext = require('./use-number-input-context.cjs');
+
+const NumberInputValueText = react.forwardRef(
+  (props, ref) => {
+    const { children, ...localProps } = props;
+    const numberInput = useNumberInputContext.useNumberInputContext();
+    const mergedProps = react$1.mergeProps(numberInput.getValueTextProps(), localProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: children || numberInput.value });
+  }
+);
+NumberInputValueText.displayName = "NumberInputValueText";
+
+exports.NumberInputValueText = NumberInputValueText;

package/dist/components/number-input/number-input-value-text.d.cts

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface NumberInputValueTextBaseProps extends PolymorphicProps {
+}
+export interface NumberInputValueTextProps extends HTMLProps<'span'>, NumberInputValueTextBaseProps {
+}
+export declare const NumberInputValueText: ForwardRefExoticComponent<NumberInputValueTextProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/number-input/number-input-value-text.d.ts

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface NumberInputValueTextBaseProps extends PolymorphicProps {
+}
+export interface NumberInputValueTextProps extends HTMLProps<'span'>, NumberInputValueTextBaseProps {
+}
+export declare const NumberInputValueText: ForwardRefExoticComponent<NumberInputValueTextProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/number-input/number-input-value-text.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useNumberInputContext } from './use-number-input-context.js';
+
+const NumberInputValueText = forwardRef(
+  (props, ref) => {
+    const { children, ...localProps } = props;
+    const numberInput = useNumberInputContext();
+    const mergedProps = mergeProps(numberInput.getValueTextProps(), localProps);
+    return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: children || numberInput.value });
+  }
+);
+NumberInputValueText.displayName = "NumberInputValueText";
+
+export { NumberInputValueText };

package/dist/components/number-input/number-input.anatomy.d.cts

@@ -0,0 +1 @@
+export { anatomy as numberInputAnatomy } from '@zag-js/number-input';

package/dist/components/number-input/number-input.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as numberInputAnatomy } from '@zag-js/number-input';

package/dist/components/number-input/number-input.cjs

@@ -11,6 +11,7 @@ const numberInputLabel = require('./number-input-label.cjs');
 const numberInputRoot = require('./number-input-root.cjs');
 const numberInputRootProvider = require('./number-input-root-provider.cjs');
 const numberInputScrubber = require('./number-input-scrubber.cjs');
+const numberInputValueText = require('./number-input-value-text.cjs');
 
 
 
@@ -23,3 +24,4 @@ exports.Label = numberInputLabel.NumberInputLabel;
 exports.Root = numberInputRoot.NumberInputRoot;
 exports.RootProvider = numberInputRootProvider.NumberInputRootProvider;
 exports.Scrubber = numberInputScrubber.NumberInputScrubber;
+exports.ValueText = numberInputValueText.NumberInputValueText;

package/dist/components/number-input/number-input.d.cts

@@ -1,10 +1,11 @@
 export type { FocusChangeDetails, ValueChangeDetails, ValueInvalidDetails, } from '@zag-js/number-input';
 export { NumberInputContext as Context, type NumberInputContextProps as ContextProps, } from './number-input-context';
-export { NumberInputControl as Control, type NumberInputControlProps as ControlProps, type NumberInputControlBaseProps as ControlBaseProps, } from './number-input-control';
-export { NumberInputDecrementTrigger as DecrementTrigger, type NumberInputDecrementTriggerProps as DecrementTriggerProps, type NumberInputDecrementTriggerBaseProps as DecrementTriggerBaseProps, } from './number-input-decrement-trigger';
-export { NumberInputIncrementTrigger as IncrementTrigger, type NumberInputIncrementTriggerProps as IncrementTriggerProps, type NumberInputIncrementTriggerBaseProps as IncrementTriggerBaseProps, } from './number-input-increment-trigger';
-export { NumberInputInput as Input, type NumberInputInputProps as InputProps, type NumberInputInputBaseProps as InputBaseProps, } from './number-input-input';
-export { NumberInputLabel as Label, type NumberInputLabelProps as LabelProps, type NumberInputLabelBaseProps as LabelBaseProps, } from './number-input-label';
-export { NumberInputRoot as Root, type NumberInputRootProps as RootProps, type NumberInputRootBaseProps as RootBaseProps, } from './number-input-root';
-export { NumberInputRootProvider as RootProvider, type NumberInputRootProviderProps as RootProviderProps, type NumberInputRootProviderBaseProps as RootProviderBaseProps, } from './number-input-root-provider';
-export { NumberInputScrubber as Scrubber, type NumberInputScrubberProps as ScrubberProps, type NumberInputScrubberBaseProps as ScrubberBaseProps, } from './number-input-scrubber';
+export { NumberInputControl as Control, type NumberInputControlBaseProps as ControlBaseProps, type NumberInputControlProps as ControlProps, } from './number-input-control';
+export { NumberInputDecrementTrigger as DecrementTrigger, type NumberInputDecrementTriggerBaseProps as DecrementTriggerBaseProps, type NumberInputDecrementTriggerProps as DecrementTriggerProps, } from './number-input-decrement-trigger';
+export { NumberInputIncrementTrigger as IncrementTrigger, type NumberInputIncrementTriggerBaseProps as IncrementTriggerBaseProps, type NumberInputIncrementTriggerProps as IncrementTriggerProps, } from './number-input-increment-trigger';
+export { NumberInputInput as Input, type NumberInputInputBaseProps as InputBaseProps, type NumberInputInputProps as InputProps, } from './number-input-input';
+export { NumberInputLabel as Label, type NumberInputLabelBaseProps as LabelBaseProps, type NumberInputLabelProps as LabelProps, } from './number-input-label';
+export { NumberInputRoot as Root, type NumberInputRootBaseProps as RootBaseProps, type NumberInputRootProps as RootProps, } from './number-input-root';
+export { NumberInputRootProvider as RootProvider, type NumberInputRootProviderBaseProps as RootProviderBaseProps, type NumberInputRootProviderProps as RootProviderProps, } from './number-input-root-provider';
+export { NumberInputScrubber as Scrubber, type NumberInputScrubberBaseProps as ScrubberBaseProps, type NumberInputScrubberProps as ScrubberProps, } from './number-input-scrubber';
+export { NumberInputValueText as ValueText, type NumberInputValueTextBaseProps as ValueTextBaseProps, type NumberInputValueTextProps as ValueTextProps, } from './number-input-value-text';

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

@@ -1,10 +1,11 @@
 export type { FocusChangeDetails, ValueChangeDetails, ValueInvalidDetails, } from '@zag-js/number-input';
 export { NumberInputContext as Context, type NumberInputContextProps as ContextProps, } from './number-input-context';
-export { NumberInputControl as Control, type NumberInputControlProps as ControlProps, type NumberInputControlBaseProps as ControlBaseProps, } from './number-input-control';
-export { NumberInputDecrementTrigger as DecrementTrigger, type NumberInputDecrementTriggerProps as DecrementTriggerProps, type NumberInputDecrementTriggerBaseProps as DecrementTriggerBaseProps, } from './number-input-decrement-trigger';
-export { NumberInputIncrementTrigger as IncrementTrigger, type NumberInputIncrementTriggerProps as IncrementTriggerProps, type NumberInputIncrementTriggerBaseProps as IncrementTriggerBaseProps, } from './number-input-increment-trigger';
-export { NumberInputInput as Input, type NumberInputInputProps as InputProps, type NumberInputInputBaseProps as InputBaseProps, } from './number-input-input';
-export { NumberInputLabel as Label, type NumberInputLabelProps as LabelProps, type NumberInputLabelBaseProps as LabelBaseProps, } from './number-input-label';
-export { NumberInputRoot as Root, type NumberInputRootProps as RootProps, type NumberInputRootBaseProps as RootBaseProps, } from './number-input-root';
-export { NumberInputRootProvider as RootProvider, type NumberInputRootProviderProps as RootProviderProps, type NumberInputRootProviderBaseProps as RootProviderBaseProps, } from './number-input-root-provider';
-export { NumberInputScrubber as Scrubber, type NumberInputScrubberProps as ScrubberProps, type NumberInputScrubberBaseProps as ScrubberBaseProps, } from './number-input-scrubber';
+export { NumberInputControl as Control, type NumberInputControlBaseProps as ControlBaseProps, type NumberInputControlProps as ControlProps, } from './number-input-control';
+export { NumberInputDecrementTrigger as DecrementTrigger, type NumberInputDecrementTriggerBaseProps as DecrementTriggerBaseProps, type NumberInputDecrementTriggerProps as DecrementTriggerProps, } from './number-input-decrement-trigger';
+export { NumberInputIncrementTrigger as IncrementTrigger, type NumberInputIncrementTriggerBaseProps as IncrementTriggerBaseProps, type NumberInputIncrementTriggerProps as IncrementTriggerProps, } from './number-input-increment-trigger';
+export { NumberInputInput as Input, type NumberInputInputBaseProps as InputBaseProps, type NumberInputInputProps as InputProps, } from './number-input-input';
+export { NumberInputLabel as Label, type NumberInputLabelBaseProps as LabelBaseProps, type NumberInputLabelProps as LabelProps, } from './number-input-label';
+export { NumberInputRoot as Root, type NumberInputRootBaseProps as RootBaseProps, type NumberInputRootProps as RootProps, } from './number-input-root';
+export { NumberInputRootProvider as RootProvider, type NumberInputRootProviderBaseProps as RootProviderBaseProps, type NumberInputRootProviderProps as RootProviderProps, } from './number-input-root-provider';
+export { NumberInputScrubber as Scrubber, type NumberInputScrubberBaseProps as ScrubberBaseProps, type NumberInputScrubberProps as ScrubberProps, } from './number-input-scrubber';
+export { NumberInputValueText as ValueText, type NumberInputValueTextBaseProps as ValueTextBaseProps, type NumberInputValueTextProps as ValueTextProps, } from './number-input-value-text';

package/dist/components/number-input/number-input.js

@@ -7,3 +7,4 @@ export { NumberInputLabel as Label } from './number-input-label.js';
 export { NumberInputRoot as Root } from './number-input-root.js';
 export { NumberInputRootProvider as RootProvider } from './number-input-root-provider.js';
 export { NumberInputScrubber as Scrubber } from './number-input-scrubber.js';
+export { NumberInputValueText as ValueText } from './number-input-value-text.js';

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

@@ -9,6 +9,7 @@ const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
 const useEvent = require('../../utils/use-event.cjs');
+const useFieldContext = require('../field/use-field-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -32,8 +33,17 @@ const numberInput__namespace = /*#__PURE__*/_interopNamespaceDefault(numberInput
 const useNumberInput = (props = {}) => {
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
+  const field = useFieldContext.useFieldContext();
   const initialContext = {
     id: react.useId(),
+    ids: {
+      label: field?.ids.label,
+      input: field?.ids.control
+    },
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    required: field?.required,
+    invalid: field?.invalid,
     dir,
     getRootNode,
     value: props.defaultValue,

package/dist/components/number-input/use-number-input.js

@@ -5,12 +5,22 @@ import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
 import { useEvent } from '../../utils/use-event.js';
+import { useFieldContext } from '../field/use-field-context.js';
 
 const useNumberInput = (props = {}) => {
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
+  const field = useFieldContext();
   const initialContext = {
     id: useId(),
+    ids: {
+      label: field?.ids.label,
+      input: field?.ids.control
+    },
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    required: field?.required,
+    invalid: field?.invalid,
     dir,
     getRootNode,
     value: props.defaultValue,

package/dist/components/pagination/index.cjs

@@ -11,7 +11,8 @@ const paginationRoot = require('./pagination-root.cjs');
 const paginationRootProvider = require('./pagination-root-provider.cjs');
 const usePagination = require('./use-pagination.cjs');
 const usePaginationContext = require('./use-pagination-context.cjs');
-const pagination = require('./pagination.cjs');
+const pagination$1 = require('./pagination.cjs');
+const pagination = require('@zag-js/pagination');
 
 
 
@@ -24,4 +25,8 @@ exports.PaginationRoot = paginationRoot.PaginationRoot;
 exports.PaginationRootProvider = paginationRootProvider.PaginationRootProvider;
 exports.usePagination = usePagination.usePagination;
 exports.usePaginationContext = usePaginationContext.usePaginationContext;
-exports.Pagination = pagination;
+exports.Pagination = pagination$1;
+Object.defineProperty(exports, "paginationAnatomy", {
+  enumerable: true,
+  get: () => pagination.anatomy
+});

package/dist/components/pagination/index.d.cts

@@ -8,4 +8,5 @@ export { PaginationRoot, type PaginationRootProps, type PaginationRootBaseProps,
 export { PaginationRootProvider, type PaginationRootProviderProps, type PaginationRootProviderBaseProps, } from './pagination-root-provider';
 export { usePagination, type UsePaginationProps, type UsePaginationReturn } from './use-pagination';
 export { usePaginationContext, type UsePaginationContext } from './use-pagination-context';
+export { paginationAnatomy } from './pagination.anatomy';
 export * as Pagination from './pagination';

package/dist/components/pagination/index.d.ts

@@ -8,4 +8,5 @@ export { PaginationRoot, type PaginationRootProps, type PaginationRootBaseProps,
 export { PaginationRootProvider, type PaginationRootProviderProps, type PaginationRootProviderBaseProps, } from './pagination-root-provider';
 export { usePagination, type UsePaginationProps, type UsePaginationReturn } from './use-pagination';
 export { usePaginationContext, type UsePaginationContext } from './use-pagination-context';
+export { paginationAnatomy } from './pagination.anatomy';
 export * as Pagination from './pagination';

package/dist/components/pagination/index.js

@@ -9,3 +9,4 @@ export { usePagination } from './use-pagination.js';
 export { usePaginationContext } from './use-pagination-context.js';
 import * as pagination from './pagination.js';
 export { pagination as Pagination };
+export { anatomy as paginationAnatomy } from '@zag-js/pagination';

package/dist/components/pagination/pagination.anatomy.d.cts

@@ -0,0 +1 @@
+export { anatomy as paginationAnatomy } from '@zag-js/pagination';