@dynatrace/strato-components 3.7.1 → 3.8.0

package/esm/forms/index.js

@@ -29,6 +29,12 @@ import {
   isFormControlRef,
   isFormControlWithOverlayRef
 } from "./shared-types.js";
+import {
+  NativeValidityStateKeys,
+  StratoValidityStateKeys,
+  ValidationError,
+  ValidityStateKey
+} from "./validation/types.js";
 import { NumberSpinButton } from "./spin-buttons/number-spin-button/NumberSpinButton.js";
 import { SpinButtonGroup } from "./spin-buttons/spin-button-group/SpinButtonGroup.js";
 import { TextSpinButton } from "./spin-buttons/text-spin-button/TextSpinButton.js";
@@ -47,6 +53,7 @@ export {
   FormFieldMessages,
   Hint,
   Label,
+  NativeValidityStateKeys,
   NumberInput,
   NumberInput2 as NumberInputV2,
   PasswordInput,
@@ -65,10 +72,13 @@ export {
   SelectPrefix,
   SelectSuffix,
   SelectTrigger,
+  StratoValidityStateKeys,
   Switch,
   TextArea,
   TextInput,
   ToggleButtonGroup,
+  ValidationError,
+  ValidityStateKey,
   Calendar as _Calendar,
   DateTimeRangePicker as _DateTimeRangePicker,
   _FormFieldContext,

package/esm/forms/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/forms/index.ts"],
-  "sourcesContent": ["export type { BaseInputButtonProps } from './_base-input/BaseInputButton.js';\nexport type { BaseInputContentProps } from './_base-input/BaseInputContent.js';\nexport type { BaseInputButtonProps as TextInputButtonProps } from './_base-input/BaseInputButton.js';\nexport type { BaseInputProps } from './_base-input/base-input.types.js';\nexport type { BaseInputContentProps as TextInputContentProps } from './_base-input/BaseInputContent.js';\nexport { Checkbox } from './checkbox/Checkbox.js';\nexport type { CheckboxProps } from './checkbox/Checkbox.js';\nexport { Calendar as _Calendar } from './calendar/Calendar.js';\nexport type {\n  CalendarProps as _CalendarProps,\n  CalendarStrictValueType as _CalendarOnChangeType,\n  CalendarValueType as _CalendarValueType,\n} from './calendar/Calendar.types.js';\nexport type { CalendarType as _CalendarType } from './calendar/types/calendarConfiguration.js';\nexport { getFormattedDateTime } from './forms-core/time/date-time.js';\nexport { DateTimePicker } from './date-time-picker/DateTimePicker.js';\nexport type {\n  DateTimePickerPrecision,\n  DateTimePickerProps,\n  DateTimePickerType,\n  DateTimePickerTypeProps,\n} from './date-time-picker/types.js';\nexport { FieldSet } from './forms-core/components/field-set/FieldSet.js';\nexport type { FieldSetProps } from './forms-core/components/field-set/FieldSet.js';\nexport type { FieldSetLegendProps } from './forms-core/components/field-set/FieldSet.js';\nexport { FormField } from './forms-core/components/form-field/FormField.js';\nexport type { FormFieldProps } from './forms-core/components/form-field/FormField.js';\nexport { _FormFieldContext } from './forms-core/contexts/FormFieldContext.js';\nexport type { SharedFormFieldContextProps } from './forms-core/contexts/FormFieldContext.js';\nexport type {\n  FormFieldReducerAction,\n  FormFieldReducerActionPayload,\n  FormFieldAction,\n} from './forms-core/state/formfield-state-reducer.js';\nexport type { SharedFormFieldProps } from './forms-core/types/formfield.types.js';\nexport { FormFieldMessages } from './forms-core/components/form-field-messages/FormFieldMessages.js';\nexport type { FormFieldMessageProps } from './forms-core/components/form-field-messages/FormFieldMessages.js';\nexport type {\n  FormFieldControlMessage,\n  FormFieldCustomMessage,\n} from './forms-core/types/formfield-messages.types.js';\nexport type { FormFieldMessageItemProps } from './forms-core/components/form-field-messages/FormFieldMessageItem.js';\nexport type { FormFieldMessageBaseItemProps } from './forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nexport { Hint } from './forms-core/components/hint/Hint.js';\nexport type { HintProps } from './forms-core/components/hint/Hint.js';\nexport { Label } from './forms-core/components/label/Label.js';\nexport type { LabelProps } from './forms-core/components/label/Label.js';\n/* eslint-disable-next-line @typescript-eslint/no-deprecated */\nexport { NumberInput } from './number-input/NumberInput.js';\n/* eslint-disable-next-line @typescript-eslint/no-deprecated */\nexport type { NumberInputProps } from './number-input/NumberInputBase.js';\nexport { NumberInput as NumberInputV2 } from './number-input-v2/NumberInput.js';\nexport type { NumberInputProps as NumberInputV2Props } from './number-input-v2/NumberInput.js';\nexport { PasswordInput } from './password-input/PasswordInput.js';\nexport type { PasswordInputProps } from './password-input/PasswordInput.js';\nexport type { PasswordInputTooltipProps } from './password-input/PasswordInputTooltip.js';\nexport { Radio } from './radio/Radio.js';\nexport type { RadioProps } from './radio/Radio.js';\nexport { RadioGroup } from './radio/RadioGroup.js';\nexport type { RadioGroupProps } from './radio/RadioGroup.js';\nexport { SearchInput } from './search-input/SearchInput.js';\nexport type { SearchInputProps } from './search-input/SearchInput.js';\nexport type { SearchInputStepperProps } from './search-input/Stepper.js';\n\nexport { Select } from './select/Select.js';\nexport type {\n  SelectOnChangeValue,\n  SelectFormsProps,\n  SelectBaseProps,\n} from './select/Select.js';\nexport { SelectContent } from './select/SelectContent.js';\nexport type { SelectContentProps } from './select/SelectContent.js';\n\nexport { SelectCustomTrigger } from './select/SelectCustomTrigger.js';\nexport type { SelectCustomTriggerProps } from './select/SelectCustomTrigger.js';\n\nexport { SelectDisplayValue } from './select/SelectDisplayValue.js';\nexport type { SelectDisplayValueProps } from './select/SelectDisplayValue.js';\n\nexport { SelectEmptyState } from './select/SelectEmptyState.js';\nexport type { SelectEmptyStateProps } from './select/SelectEmptyState.js';\n\nexport { SelectFilter } from './select/SelectFilter.js';\nexport type { SelectFilterProps } from './select/SelectFilter.js';\n\nexport { SelectGroup, SelectGroupLabel } from './select/SelectGroup.js';\n\nexport type {\n  SelectGroupLabelProps,\n  SelectGroupProps,\n} from './select/SelectGroup.js';\n\nexport { SelectOption } from './select/SelectOption.js';\nexport type { SelectOptionProps } from './select/SelectOption.js';\n\nexport { SelectPrefix } from './select/SelectPrefix.js';\nexport type { SelectPrefixProps } from './select/SelectPrefix.js';\n\nexport { SelectSuffix } from './select/SelectSuffix.js';\nexport type { SelectSuffixProps } from './select/SelectSuffix.js';\n\nexport { SelectTrigger } from './select/SelectTrigger.js';\nexport type { SelectTriggerProps } from './select/SelectTrigger.js';\n\nexport type {\n  SelectContentWidthOptionsType,\n  SelectTriggerWidthOptionsType,\n  SelectMultiValue,\n  SelectSingleValue,\n} from './select/types.js';\n\nexport {\n  isFormControlRef as _isFormControlRef,\n  isFormControlWithOverlayRef as _isFormControlWithOverlayRef,\n} from './shared-types.js';\nexport type {\n  FormControlRef,\n  FormControlWithOverlayRef,\n  TimeRangePickerRef,\n} from './shared-types.js';\nexport { NumberSpinButton as _NumberSpinButton } from './spin-buttons/number-spin-button/NumberSpinButton.js';\nexport type {\n  NumberSpinButtonDisplayFormat as _NumberSpinButtonDisplayFormat,\n  NumberSpinButtonProps as _NumberSpinButtonProps,\n  NumberSpinButtonRef as _NumberSpinButtonRef,\n} from './spin-buttons/number-spin-button/types.js';\nexport { SpinButtonGroup as _SpinButtonGroup } from './spin-buttons/spin-button-group/SpinButtonGroup.js';\nexport type {\n  SpinButtonGroupProps as _SpinButtonGroupProps,\n  SpinButtonGroupSeparatorProps as _SpinButtonGroupSeparatorProps,\n} from './spin-buttons/spin-button-group/types.js';\nexport { TextSpinButton as _TextSpinButton } from './spin-buttons/text-spin-button/TextSpinButton.js';\nexport type {\n  TextSpinButtonProps as _TextSpinButtonProps,\n  TextSpinButtonRef as _TextSpinButtonRef,\n} from './spin-buttons/text-spin-button/types.js';\nexport type { SpinButtonTextSelection as _SpinButtonTextSelection } from './spin-buttons/types.js';\nexport { Switch } from './switch/Switch.js';\nexport type { SwitchProps } from './switch/Switch.js';\nexport { TextArea } from './text-area/TextArea.js';\nexport type { TextAreaProps, TextAreaInputRef } from './text-area/TextArea.js';\nexport { TextInput } from './text-input/TextInput.js';\nexport type {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  TextInputControlledProps,\n  TextInputProps,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  TextInputUncontrolledProps,\n} from './text-input/TextInput.js';\n\nexport { DateTimeRangePicker as _DateTimeRangePicker } from './date-time-range-picker/DateTimeRangePicker.js';\nexport type {\n  DateTimeRangePickerProps as _DateTimeRangePickerProps,\n  DateTimeRangePickerRef as _DateTimeRangePickerRef,\n} from './date-time-range-picker/types.js';\n\nexport {\n  ToggleButtonGroup,\n  type ToggleButtonGroupProps,\n} from './toggle-button-group/ToggleButtonGroup.js';\nexport type { ToggleButtonGroupItemProps } from './toggle-button-group/Item.js';\nexport type { ToggleButtonGroupPrefixProps } from './toggle-button-group/Prefix.js';\nexport type { ToggleButtonGroupSuffixProps } from './toggle-button-group/Suffix.js';\n"],
-  "mappings": "AAKA,SAAS,gBAAgB;AAEzB,SAAqB,gBAAiB;AAOtC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAO/B,SAAS,gBAAgB;AAGzB,SAAS,iBAAiB;AAE1B,SAAS,yBAAyB;AAQlC,SAAS,yBAAyB;AAQlC,SAAS,YAAY;AAErB,SAAS,aAAa;AAGtB,SAAS,mBAAmB;AAG5B,SAAwB,eAAfA,oBAAoC;AAE7C,SAAS,qBAAqB;AAG9B,SAAS,aAAa;AAEtB,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAI5B,SAAS,cAAc;AAMvB,SAAS,qBAAqB;AAG9B,SAAS,2BAA2B;AAGpC,SAAS,0BAA0B;AAGnC,SAAS,wBAAwB;AAGjC,SAAS,oBAAoB;AAG7B,SAAS,aAAa,wBAAwB;AAO9C,SAAS,oBAAoB;AAG7B,SAAS,oBAAoB;AAG7B,SAAS,oBAAoB;AAG7B,SAAS,qBAAqB;AAU9B;AAAA,EACsB;AAAA,EACW;AAAA,OAC1B;AAMP,SAA6B,wBAAyB;AAMtD,SAA4B,uBAAwB;AAKpD,SAA2B,sBAAuB;AAMlD,SAAS,cAAc;AAEvB,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAS1B,SAAgC,2BAA4B;AAM5D;AAAA,EACE;AAAA,OAEK;",
+  "sourcesContent": ["export type { BaseInputButtonProps } from './_base-input/BaseInputButton.js';\nexport type { BaseInputContentProps } from './_base-input/BaseInputContent.js';\nexport type { BaseInputButtonProps as TextInputButtonProps } from './_base-input/BaseInputButton.js';\nexport type { BaseInputProps } from './_base-input/base-input.types.js';\nexport type { BaseInputContentProps as TextInputContentProps } from './_base-input/BaseInputContent.js';\nexport { Checkbox } from './checkbox/Checkbox.js';\nexport type { CheckboxProps } from './checkbox/Checkbox.js';\nexport { Calendar as _Calendar } from './calendar/Calendar.js';\nexport type {\n  CalendarProps as _CalendarProps,\n  CalendarStrictValueType as _CalendarOnChangeType,\n  CalendarValueType as _CalendarValueType,\n} from './calendar/Calendar.types.js';\nexport type { CalendarType as _CalendarType } from './calendar/types/calendarConfiguration.js';\nexport { getFormattedDateTime } from './forms-core/time/date-time.js';\nexport { DateTimePicker } from './date-time-picker/DateTimePicker.js';\nexport type {\n  DateTimePickerPrecision,\n  DateTimePickerProps,\n  DateTimePickerType,\n  DateTimePickerTypeProps,\n} from './date-time-picker/types.js';\nexport { FieldSet } from './forms-core/components/field-set/FieldSet.js';\nexport type { FieldSetProps } from './forms-core/components/field-set/FieldSet.js';\nexport type { FieldSetLegendProps } from './forms-core/components/field-set/FieldSet.js';\nexport { FormField } from './forms-core/components/form-field/FormField.js';\nexport type { FormFieldProps } from './forms-core/components/form-field/FormField.js';\nexport { _FormFieldContext } from './forms-core/contexts/FormFieldContext.js';\nexport type { SharedFormFieldContextProps } from './forms-core/contexts/FormFieldContext.js';\nexport type {\n  FormFieldReducerAction,\n  FormFieldReducerActionPayload,\n  FormFieldAction,\n} from './forms-core/state/formfield-state-reducer.js';\nexport type { SharedFormFieldProps } from './forms-core/types/formfield.types.js';\nexport { FormFieldMessages } from './forms-core/components/form-field-messages/FormFieldMessages.js';\nexport type { FormFieldMessageProps } from './forms-core/components/form-field-messages/FormFieldMessages.js';\nexport type {\n  FormFieldControlMessage,\n  FormFieldCustomMessage,\n} from './forms-core/types/formfield-messages.types.js';\nexport type { FormFieldMessageItemProps } from './forms-core/components/form-field-messages/FormFieldMessageItem.js';\nexport type { FormFieldMessageBaseItemProps } from './forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nexport { Hint } from './forms-core/components/hint/Hint.js';\nexport type { HintProps } from './forms-core/components/hint/Hint.js';\nexport { Label } from './forms-core/components/label/Label.js';\nexport type { LabelProps } from './forms-core/components/label/Label.js';\n/* eslint-disable-next-line @typescript-eslint/no-deprecated */\nexport { NumberInput } from './number-input/NumberInput.js';\n/* eslint-disable-next-line @typescript-eslint/no-deprecated */\nexport type { NumberInputProps } from './number-input/NumberInputBase.js';\nexport { NumberInput as NumberInputV2 } from './number-input-v2/NumberInput.js';\nexport type { NumberInputProps as NumberInputV2Props } from './number-input-v2/NumberInput.js';\nexport { PasswordInput } from './password-input/PasswordInput.js';\nexport type { PasswordInputProps } from './password-input/PasswordInput.js';\nexport type { PasswordInputTooltipProps } from './password-input/PasswordInputTooltip.js';\nexport { Radio } from './radio/Radio.js';\nexport type { RadioProps } from './radio/Radio.js';\nexport { RadioGroup } from './radio/RadioGroup.js';\nexport type { RadioGroupProps } from './radio/RadioGroup.js';\nexport { SearchInput } from './search-input/SearchInput.js';\nexport type { SearchInputProps } from './search-input/SearchInput.js';\nexport type { SearchInputStepperProps } from './search-input/Stepper.js';\n\nexport { Select } from './select/Select.js';\nexport type {\n  SelectOnChangeValue,\n  SelectFormsProps,\n  SelectBaseProps,\n} from './select/Select.js';\nexport { SelectContent } from './select/SelectContent.js';\nexport type { SelectContentProps } from './select/SelectContent.js';\n\nexport { SelectCustomTrigger } from './select/SelectCustomTrigger.js';\nexport type { SelectCustomTriggerProps } from './select/SelectCustomTrigger.js';\n\nexport { SelectDisplayValue } from './select/SelectDisplayValue.js';\nexport type { SelectDisplayValueProps } from './select/SelectDisplayValue.js';\n\nexport { SelectEmptyState } from './select/SelectEmptyState.js';\nexport type { SelectEmptyStateProps } from './select/SelectEmptyState.js';\n\nexport { SelectFilter } from './select/SelectFilter.js';\nexport type { SelectFilterProps } from './select/SelectFilter.js';\n\nexport { SelectGroup, SelectGroupLabel } from './select/SelectGroup.js';\n\nexport type {\n  SelectGroupLabelProps,\n  SelectGroupProps,\n} from './select/SelectGroup.js';\n\nexport { SelectOption } from './select/SelectOption.js';\nexport type { SelectOptionProps } from './select/SelectOption.js';\n\nexport { SelectPrefix } from './select/SelectPrefix.js';\nexport type { SelectPrefixProps } from './select/SelectPrefix.js';\n\nexport { SelectSuffix } from './select/SelectSuffix.js';\nexport type { SelectSuffixProps } from './select/SelectSuffix.js';\n\nexport { SelectTrigger } from './select/SelectTrigger.js';\nexport type { SelectTriggerProps } from './select/SelectTrigger.js';\n\nexport type {\n  SelectContentWidthOptionsType,\n  SelectTriggerWidthOptionsType,\n  SelectMultiValue,\n  SelectSingleValue,\n} from './select/types.js';\n\nexport {\n  isFormControlRef as _isFormControlRef,\n  isFormControlWithOverlayRef as _isFormControlWithOverlayRef,\n} from './shared-types.js';\nexport type {\n  FormControlRef,\n  FormControlWithOverlayRef,\n  TimeRangePickerRef,\n} from './shared-types.js';\nexport {\n  NativeValidityStateKeys,\n  StratoValidityStateKeys,\n  ValidationError,\n  ValidityStateKey,\n} from './validation/types.js';\nexport type {\n  NativeValidityStateKey,\n  StratoValidityStateKey,\n  ValidationErrorOptions,\n  ValidationErrorSource,\n  ValidationState,\n  ValidationStatus,\n  ValidationTrigger,\n} from './validation/types.js';\nexport { NumberSpinButton as _NumberSpinButton } from './spin-buttons/number-spin-button/NumberSpinButton.js';\nexport type {\n  NumberSpinButtonDisplayFormat as _NumberSpinButtonDisplayFormat,\n  NumberSpinButtonProps as _NumberSpinButtonProps,\n  NumberSpinButtonRef as _NumberSpinButtonRef,\n} from './spin-buttons/number-spin-button/types.js';\nexport { SpinButtonGroup as _SpinButtonGroup } from './spin-buttons/spin-button-group/SpinButtonGroup.js';\nexport type {\n  SpinButtonGroupProps as _SpinButtonGroupProps,\n  SpinButtonGroupSeparatorProps as _SpinButtonGroupSeparatorProps,\n} from './spin-buttons/spin-button-group/types.js';\nexport { TextSpinButton as _TextSpinButton } from './spin-buttons/text-spin-button/TextSpinButton.js';\nexport type {\n  TextSpinButtonProps as _TextSpinButtonProps,\n  TextSpinButtonRef as _TextSpinButtonRef,\n} from './spin-buttons/text-spin-button/types.js';\nexport type { SpinButtonTextSelection as _SpinButtonTextSelection } from './spin-buttons/types.js';\nexport { Switch } from './switch/Switch.js';\nexport type { SwitchProps } from './switch/Switch.js';\nexport { TextArea } from './text-area/TextArea.js';\nexport type { TextAreaProps, TextAreaInputRef } from './text-area/TextArea.js';\nexport { TextInput } from './text-input/TextInput.js';\nexport type {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  TextInputControlledProps,\n  TextInputProps,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  TextInputUncontrolledProps,\n} from './text-input/TextInput.js';\n\nexport { DateTimeRangePicker as _DateTimeRangePicker } from './date-time-range-picker/DateTimeRangePicker.js';\nexport type {\n  DateTimeRangePickerProps as _DateTimeRangePickerProps,\n  DateTimeRangePickerRef as _DateTimeRangePickerRef,\n} from './date-time-range-picker/types.js';\n\nexport {\n  ToggleButtonGroup,\n  type ToggleButtonGroupProps,\n} from './toggle-button-group/ToggleButtonGroup.js';\nexport type { ToggleButtonGroupItemProps } from './toggle-button-group/Item.js';\nexport type { ToggleButtonGroupPrefixProps } from './toggle-button-group/Prefix.js';\nexport type { ToggleButtonGroupSuffixProps } from './toggle-button-group/Suffix.js';\n"],
+  "mappings": "AAKA,SAAS,gBAAgB;AAEzB,SAAqB,gBAAiB;AAOtC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAO/B,SAAS,gBAAgB;AAGzB,SAAS,iBAAiB;AAE1B,SAAS,yBAAyB;AAQlC,SAAS,yBAAyB;AAQlC,SAAS,YAAY;AAErB,SAAS,aAAa;AAGtB,SAAS,mBAAmB;AAG5B,SAAwB,eAAfA,oBAAoC;AAE7C,SAAS,qBAAqB;AAG9B,SAAS,aAAa;AAEtB,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAI5B,SAAS,cAAc;AAMvB,SAAS,qBAAqB;AAG9B,SAAS,2BAA2B;AAGpC,SAAS,0BAA0B;AAGnC,SAAS,wBAAwB;AAGjC,SAAS,oBAAoB;AAG7B,SAAS,aAAa,wBAAwB;AAO9C,SAAS,oBAAoB;AAG7B,SAAS,oBAAoB;AAG7B,SAAS,oBAAoB;AAG7B,SAAS,qBAAqB;AAU9B;AAAA,EACsB;AAAA,EACW;AAAA,OAC1B;AAMP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAUP,SAA6B,wBAAyB;AAMtD,SAA4B,uBAAwB;AAKpD,SAA2B,sBAAuB;AAMlD,SAAS,cAAc;AAEvB,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAS1B,SAAgC,2BAA4B;AAM5D;AAAA,EACE;AAAA,OAEK;",
   "names": ["NumberInput"]
 }

package/esm/forms/number-input-v2/NumberInput.js

@@ -3,6 +3,7 @@ import {
   forwardRef,
   useCallback,
   useEffect,
+  useImperativeHandle,
   useMemo,
   useRef,
   useState
@@ -22,8 +23,16 @@ import {
   BaseInputSuffix
 } from "../_base-input/BaseInputContent.js";
 import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
+import {
+  getErrorType,
+  getI18nValidationMessage
+} from "../forms-core/hooks/useFormFieldValidation.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
 import { getSafeRegionalFormat } from "../forms-core/time/helpers.js";
+import { NativeValidityStateKeys } from "../validation/types.js";
+import { useCustomMessageEmitter } from "../validation/useCustomMessageEmitter.js";
+import { useValidationStateEmitter } from "../validation/useValidationStateEmitter.js";
+import { getValidationState } from "../validation/validation-builders.js";
 const COMPONENT_NAME = "NumberInput";
 const VALID_PATTERN = "^[+\\-]?\\d+(?:[\\.,]\\d+)?(?:[eE][+\\-]?\\d+)?$";
 const VALID_REGEXP = new RegExp(VALID_PATTERN);
@@ -39,6 +48,7 @@ const NumberInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const {
     onChange,
     onKeyDown,
+    onBlur,
     value: propValue,
     defaultValue,
     required,
@@ -52,10 +62,42 @@ const NumberInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     step,
     stepMultiplier = 1,
     placeholder = defaultPlaceholder,
+    onValidityChange,
     ...remainingProps
   } = props;
   const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
-  const { state, dispatch } = useFormFieldMessagesContext();
+  const { dispatch } = useFormFieldMessagesContext();
+  const _emitValidationState = useValidationStateEmitter(onValidityChange);
+  const emitValidationState = useCustomMessageEmitter(
+    _emitValidationState,
+    () => {
+      if (!value && value !== 0) {
+        const nativeErrorKey = getErrorType(
+          internalRef.current?.inputRef?.validity
+        );
+        const message = nativeErrorKey ? getI18nValidationMessage(
+          intl,
+          nativeErrorKey,
+          internalRef.current?.inputRef
+        ) : void 0;
+        return getValidationState(
+          internalRef.current?.inputRef,
+          "manual",
+          message
+        );
+      }
+      const errorKey = getErrorKey(value, min, max, step);
+      return errorKey ? getValidationState(
+        NativeValidityStateKeys[errorKey],
+        "manual",
+        getI18nValidationMessage(
+          intl,
+          errorKey,
+          internalRef.current?.inputRef
+        )
+      ) : getValidationState(null, "manual");
+    }
+  );
   const errorId = useId();
   const isPasted = useRef(false);
   const isInternalChanged = useRef(defaultValue !== void 0);
@@ -138,6 +180,43 @@ const NumberInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     },
     [onChange, setInternalValue, value, setValueNative]
   );
+  const handleBlur = useCallback(
+    (e) => {
+      if (!value && value !== 0) {
+        const nativeErrorKey = getErrorType(
+          internalRef.current?.inputRef?.validity
+        );
+        const message = nativeErrorKey ? getI18nValidationMessage(
+          intl,
+          nativeErrorKey,
+          internalRef.current?.inputRef
+        ) : void 0;
+        emitValidationState(
+          getValidationState(internalRef.current?.inputRef, "blur", message)
+        );
+        onBlur?.(e);
+        return;
+      }
+      const errorKey = getErrorKey(value, min, max, step);
+      if (errorKey) {
+        emitValidationState(
+          getValidationState(
+            NativeValidityStateKeys[errorKey],
+            "blur",
+            getI18nValidationMessage(
+              intl,
+              errorKey,
+              internalRef.current?.inputRef
+            )
+          )
+        );
+      } else {
+        emitValidationState(getValidationState(null, "blur"));
+      }
+      onBlur?.(e);
+    },
+    [value, min, max, step, emitValidationState, onBlur]
+  );
   const handleStep = useCallback(
     (direction) => {
       setValueNative(
@@ -187,32 +266,97 @@ const NumberInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     el.element?.addEventListener("wheel", onWheel, { passive: false });
     return () => el.element?.removeEventListener("wheel", onWheel);
   }, [handleStep]);
+  useImperativeHandle(
+    forwardedRef,
+    () => ({
+      ...internalRef.current,
+      validateAsync: async () => {
+        dispatch?.({
+          type: FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
+        });
+        let validationState;
+        if (!value && value !== 0) {
+          const nativeErrorKey = getErrorType(
+            internalRef.current?.inputRef?.validity
+          );
+          const message = nativeErrorKey ? getI18nValidationMessage(
+            intl,
+            nativeErrorKey,
+            internalRef.current?.inputRef
+          ) : void 0;
+          validationState = getValidationState(
+            internalRef.current?.inputRef,
+            "manual",
+            message
+          );
+        } else {
+          const errorKey = getErrorKey(value, min, max, step);
+          validationState = errorKey ? getValidationState(
+            NativeValidityStateKeys[errorKey],
+            "manual",
+            getI18nValidationMessage(
+              intl,
+              errorKey,
+              internalRef.current?.inputRef
+            )
+          ) : getValidationState(null, "manual");
+        }
+        emitValidationState(validationState);
+        return validationState;
+      }
+    }),
+    [dispatch, value, min, max, step, emitValidationState]
+  );
   useEffect(() => {
     if (!value && value !== 0) {
+      dispatch?.({
+        type: FormFieldMessagesAction.REMOVEMESSAGE,
+        payload: { id: errorId, messageType: "formcontrol" }
+      });
+      const nativeErrorKey = getErrorType(
+        internalRef.current?.inputRef?.validity
+      );
+      if (nativeErrorKey) {
+        addError(
+          nativeErrorKey,
+          errorId,
+          internalRef.current?.inputRef,
+          dispatch
+        );
+      }
+      const message = nativeErrorKey ? getI18nValidationMessage(
+        intl,
+        nativeErrorKey,
+        internalRef.current?.inputRef
+      ) : void 0;
+      emitValidationState(
+        getValidationState(internalRef.current?.inputRef, "change", message)
+      );
       return;
     }
-    const errorMessage = getErrorKey(value, min, max, step);
-    if (errorMessage) {
-      addError(errorMessage, errorId, internalRef.current?.inputRef, dispatch);
+    const errorKey = getErrorKey(value, min, max, step);
+    if (errorKey) {
+      addError(errorKey, errorId, internalRef.current?.inputRef, dispatch);
+      emitValidationState(
+        getValidationState(
+          NativeValidityStateKeys[errorKey],
+          "change",
+          getI18nValidationMessage(
+            intl,
+            errorKey,
+            internalRef.current?.inputRef
+          )
+        )
+      );
       return;
     }
     dispatch?.({
       type: FormFieldMessagesAction.REMOVEMESSAGE,
-      payload: {
-        id: errorId,
-        messageType: "formcontrol"
-      }
+      payload: { id: errorId, messageType: "formcontrol" }
     });
-  }, [
-    value,
-    min,
-    max,
-    step,
-    state.isTouched,
-    state.isValid,
-    dispatch,
-    errorId
-  ]);
+    emitValidationState(getValidationState(null, "change"));
+  }, [value, min, max, step, dispatch, errorId, emitValidationState]);
   return /* @__PURE__ */ jsx(
     BaseInput,
     {
@@ -226,6 +370,7 @@ const NumberInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       readOnly,
       onChange: handleChange,
       onKeyDown: handleKeyDown,
+      onBlur: handleBlur,
       onPaste: () => isPasted.current = true,
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,

package/esm/forms/number-input-v2/NumberInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/number-input-v2/NumberInput.tsx"],
-  "sourcesContent": ["import {\n  type ChangeEvent as ReactChangeEvent,\n  forwardRef,\n  type KeyboardEvent,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { applyStep } from './utils/calculations.js';\nimport { checkFormat, parseNumber } from './utils/format.js';\nimport { addError, getErrorKey } from './utils/validation.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { FocusEvents } from '../../core/types/events.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport type { BaseInputProps } from '../_base-input/base-input.types.js';\nimport { BaseInput } from '../_base-input/BaseInput.js';\nimport { BaseInputButton } from '../_base-input/BaseInputButton.js';\nimport {\n  BaseInputPrefix,\n  BaseInputSuffix,\n} from '../_base-input/BaseInputContent.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { getSafeRegionalFormat } from '../forms-core/time/helpers.js';\nimport type { FormControlRef } from '../shared-types.js';\n\nconst COMPONENT_NAME = 'NumberInput';\n// Matches a fully valid number: optional sign, integer digits, optional decimal part, optional scientific notation (e.g. \"-1.5e+3\")\nconst VALID_PATTERN = '^[+\\\\-]?\\\\d+(?:[\\\\.,]\\\\d+)?(?:[eE][+\\\\-]?\\\\d+)?$';\nconst VALID_REGEXP = new RegExp(VALID_PATTERN);\n// Matches a number that may use any locale's grouping/decimal separators (spaces, dots, commas, Arabic/Unicode variants)\n// \u2014 used to detect paste-formatted input that can be normalized\nconst FORMATTABLE_PATTERN =\n  /^[-+]?[\\d.,'\\u2019 \u066B\u066C\\u00A0\\u1680\\u2000-\\u200A\\u202F\\u205F\\u3000]+(?:[eE][-+]?\\d+)?$/u;\n// Matches a number that is syntactically incomplete but still being typed:\n// digits and separators are optional so intermediate states like \"-\", \"1.\", \"1.5e\" are allowed without rejecting the input\nconst INTERMEDIATE_VALID_PATTERN = /^[+-]?\\d*(?:[.,]\\d*)?(?:[eE][+-]?\\d*)?$/;\n\n// #region Typings\n/**\n * Number inputs let users enter and edit integers and floating-point numbers.\n * @public\n */\nexport type NumberInputProps = Pick<\n  BaseInputProps,\n  | 'placeholder'\n  | 'variant'\n  | 'onKeyUp'\n  | 'onKeyDown'\n  | 'className'\n  | 'style'\n  | 'data-testid'\n  | 'data-dtrum-mask'\n  | 'data-dtrum-allow'\n> &\n  FormControlProps<number | null, (value: number | null) => void> &\n  PropsWithChildren &\n  FocusEvents &\n  BehaviorTrackingProps & {\n    /** Minimum amount of the input.\n     * @defaultValue undefined */\n    min?: number;\n    /** Maximum amount of the input.\n     * @defaultValue undefined */\n    max?: number;\n    /** Defines the step in which increments/decrements can be performed on the input and validates the value.\n     * Must be a positive number greater than 0. Values that are negative, zero, NaN, or undefined default to 1.\n     * @defaultValue undefined */\n    step?: number;\n    /** Multiplier applied to `step` (or 1 if no `step` is set) to determine how much the value changes\n     * when using arrow keys or the scroll wheel. Must be a positive integer greater than 0.\n     * Values that are negative, zero, NaN, or undefined default to 1. Decimal values are truncated to the nearest integer.\n     * @defaultValue 1 */\n    stepMultiplier?: number;\n  };\n\n// #endregion\n\n/**\n * Number inputs let users enter and edit integers and floating-point numbers.\n * @public\n */\nconst NumberInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  NumberInputProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n\n  const defaultPlaceholder = intl.formatMessage({\n    defaultMessage: 'Add number',\n    id: 'rrkUQoVNb46Jbd/8',\n    description: 'Default placeholder for the number input.',\n  });\n\n  const {\n    onChange,\n    onKeyDown,\n    value: propValue,\n    defaultValue,\n    required,\n    readOnly = false,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    min,\n    max,\n    step,\n    stepMultiplier = 1,\n    placeholder = defaultPlaceholder,\n    ...remainingProps\n  }: NumberInputProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const { state, dispatch } = useFormFieldMessagesContext();\n  const errorId = useId();\n  const isPasted = useRef<boolean>(false);\n  const isInternalChanged = useRef<boolean>(defaultValue !== undefined);\n\n  const internalRef = useRef<FormControlRef<HTMLDivElement>>(null);\n  const inputRef = useMergeRefs([forwardedRef, internalRef]);\n\n  const [internalValue, setInternalValue] = useState<string | number | null>(\n    defaultValue ?? propValue ?? null,\n  );\n\n  // Programmatically sets the DOM input value and optionally notifies consumers.\n  // Uses the native prototype setter so React's internal value tracker stays in sync.\n  const setValueNative = useCallback(\n    (newValue: number | string | null, triggerChange: boolean = true) => {\n      const input = internalRef.current?.inputRef;\n      if (input) {\n        let stringValue: string;\n        if (newValue === null) {\n          stringValue = '';\n        } else if (typeof newValue === 'number') {\n          stringValue = new Intl.NumberFormat(getSafeRegionalFormat(), {\n            useGrouping: false,\n            maximumFractionDigits: 17,\n          }).format(newValue);\n        } else {\n          stringValue = String(newValue);\n        }\n        const desc = Object.getOwnPropertyDescriptor(\n          HTMLInputElement.prototype,\n          'value',\n        );\n        desc?.set?.call(input, stringValue);\n        input.value = stringValue;\n        if (triggerChange) {\n          const parsedValue = checkFormat(stringValue);\n          isInternalChanged.current = true;\n          setInternalValue(parsedValue || stringValue);\n          if (VALID_REGEXP.exec(parsedValue)) {\n            onChange?.(parseNumber(parsedValue));\n          } else if (parsedValue === '') {\n            onChange?.(null);\n          }\n        }\n      }\n    },\n    [onChange],\n  );\n\n  // Caching the value to keep not valid states in the input\n  const value = useMemo<string | number | null>(() => {\n    const isChanged = isInternalChanged.current;\n    isInternalChanged.current = false;\n\n    if (isChanged) {\n      return internalValue;\n    }\n\n    if (!propValue && propValue !== 0) {\n      return '';\n    }\n\n    const formattedPropValue = new Intl.NumberFormat(getSafeRegionalFormat(), {\n      useGrouping: false,\n      maximumFractionDigits: 17, // Max precision for a JS number\n    }).format(propValue);\n\n    return formattedPropValue;\n  }, [propValue, internalValue]);\n\n  const handleChange = useCallback(\n    (e: ReactChangeEvent<HTMLInputElement>) => {\n      const parsedValue = checkFormat(e.target.value);\n\n      if (VALID_REGEXP.exec(parsedValue)) {\n        onChange?.(parseNumber(parsedValue));\n      }\n\n      if (parsedValue === '') {\n        onChange?.(null);\n      }\n\n      if (isPasted.current && FORMATTABLE_PATTERN.exec(parsedValue)) {\n        isInternalChanged.current = true;\n        setInternalValue(parsedValue);\n        setValueNative(parsedValue, false);\n      } else if (INTERMEDIATE_VALID_PATTERN.exec(e.target.value)) {\n        isInternalChanged.current = true;\n        setInternalValue(parsedValue);\n      } else {\n        setValueNative(value ?? '', false);\n      }\n      isPasted.current = false;\n    },\n    [onChange, setInternalValue, value, setValueNative],\n  );\n\n  // Handling step changes with buttons, keyboard and wheel\n  const handleStep = useCallback(\n    (direction: 1 | -1) => {\n      setValueNative(\n        applyStep(value, step, stepMultiplier, min, max, direction),\n      );\n    },\n    [value, stepMultiplier, step, min, max, setValueNative],\n  );\n\n  // Handling keyboard input for step changes and home/end keys\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        onKeyDown?.(e);\n        return;\n      }\n\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        handleStep(+1);\n      }\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        handleStep(-1);\n      }\n\n      if (e.key === 'Home' && min !== undefined) {\n        e.preventDefault();\n        setValueNative(min);\n      }\n\n      if (e.key === 'End' && max !== undefined) {\n        e.preventDefault();\n        setValueNative(max);\n      }\n      onKeyDown?.(e);\n    },\n    [handleStep, onKeyDown, setValueNative, min, max, readOnly],\n  );\n\n  // Handling wheel input\n  useEffect(() => {\n    const el = internalRef?.current;\n\n    if (!el) {\n      return;\n    }\n\n    const onWheel = (e: WheelEvent) => {\n      if (document.activeElement !== e.target) {\n        return;\n      }\n      e.preventDefault();\n      handleStep(e.deltaY < 0 ? +1 : -1);\n    };\n\n    // Passive event listeners do not work, because the default action needs to be prevented\n    // so we need to explicitly set passive to false\n    el.element?.addEventListener('wheel', onWheel, { passive: false });\n    return () => el.element?.removeEventListener('wheel', onWheel);\n  }, [handleStep]);\n\n  // Validating the native number input props manually, as we need to use a type=\"text\" input and can't rely on the native checks.\n  // We can't use type=\"number\" because it doesn't support all the formatting and localization features we need.\n  useEffect(() => {\n    if (!value && value !== 0) {\n      return;\n    }\n\n    const errorMessage = getErrorKey(value, min, max, step);\n    if (errorMessage) {\n      addError(errorMessage, errorId, internalRef.current?.inputRef, dispatch);\n      return;\n    }\n\n    dispatch?.({\n      type: FormFieldMessagesAction.REMOVEMESSAGE,\n      payload: {\n        id: errorId,\n        messageType: 'formcontrol',\n      },\n    });\n  }, [\n    value,\n    min,\n    max,\n    step,\n    state.isTouched,\n    state.isValid,\n    dispatch,\n    errorId,\n  ]);\n\n  return (\n    <BaseInput\n      ref={inputRef}\n      {...mergeProps(restProps, behavioralTrackingProps)}\n      type=\"text\"\n      inputMode=\"decimal\"\n      autoComplete=\"off\"\n      value={value ?? ''}\n      required={required}\n      readOnly={readOnly}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      onPaste={() => (isPasted.current = true)}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-disabled={ariaDisabledProp}\n      data-dt-component={COMPONENT_NAME}\n      min={min}\n      max={max}\n      step={step}\n      pattern={VALID_PATTERN}\n      placeholder={placeholder}\n    />\n  );\n});\n\n/**\n * Use `NumberInputV2` to let users enter integers and floating-point numbers.\n * @public\n */\nexport const NumberInput = Object.assign(NumberInputRoot, {\n  Prefix: BaseInputPrefix,\n  Suffix: BaseInputSuffix,\n  Button: BaseInputButton,\n});\n\n(NumberInput as typeof NumberInput & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type ChangeEvent as ReactChangeEvent,\n  type FocusEvent as ReactFocusEvent,\n  forwardRef,\n  type KeyboardEvent,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { applyStep } from './utils/calculations.js';\nimport { checkFormat, parseNumber } from './utils/format.js';\nimport { addError, getErrorKey } from './utils/validation.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { FocusEvents } from '../../core/types/events.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport type { BaseInputProps } from '../_base-input/base-input.types.js';\nimport { BaseInput } from '../_base-input/BaseInput.js';\nimport { BaseInputButton } from '../_base-input/BaseInputButton.js';\nimport {\n  BaseInputPrefix,\n  BaseInputSuffix,\n} from '../_base-input/BaseInputContent.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  getErrorType,\n  getI18nValidationMessage,\n} from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { getSafeRegionalFormat } from '../forms-core/time/helpers.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport { NativeValidityStateKeys } from '../validation/types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\nimport { getValidationState } from '../validation/validation-builders.js';\n\nconst COMPONENT_NAME = 'NumberInput';\n// Matches a fully valid number: optional sign, integer digits, optional decimal part, optional scientific notation (e.g. \"-1.5e+3\")\nconst VALID_PATTERN = '^[+\\\\-]?\\\\d+(?:[\\\\.,]\\\\d+)?(?:[eE][+\\\\-]?\\\\d+)?$';\nconst VALID_REGEXP = new RegExp(VALID_PATTERN);\n// Matches a number that may use any locale's grouping/decimal separators (spaces, dots, commas, Arabic/Unicode variants)\n// \u2014 used to detect paste-formatted input that can be normalized\nconst FORMATTABLE_PATTERN =\n  /^[-+]?[\\d.,'\\u2019 \u066B\u066C\\u00A0\\u1680\\u2000-\\u200A\\u202F\\u205F\\u3000]+(?:[eE][-+]?\\d+)?$/u;\n// Matches a number that is syntactically incomplete but still being typed:\n// digits and separators are optional so intermediate states like \"-\", \"1.\", \"1.5e\" are allowed without rejecting the input\nconst INTERMEDIATE_VALID_PATTERN = /^[+-]?\\d*(?:[.,]\\d*)?(?:[eE][+-]?\\d*)?$/;\n\n// #region Typings\n/**\n * Number inputs let users enter and edit integers and floating-point numbers.\n * @public\n */\nexport type NumberInputProps = Pick<\n  BaseInputProps,\n  | 'placeholder'\n  | 'variant'\n  | 'onKeyUp'\n  | 'onKeyDown'\n  | 'className'\n  | 'style'\n  | 'data-testid'\n  | 'data-dtrum-mask'\n  | 'data-dtrum-allow'\n> &\n  FormControlProps<number | null, (value: number | null) => void> &\n  PropsWithChildren &\n  FocusEvents &\n  BehaviorTrackingProps & {\n    /** Minimum amount of the input.\n     * @defaultValue undefined */\n    min?: number;\n    /** Maximum amount of the input.\n     * @defaultValue undefined */\n    max?: number;\n    /** Defines the step in which increments/decrements can be performed on the input and validates the value.\n     * Must be a positive number greater than 0. Values that are negative, zero, NaN, or undefined default to 1.\n     * @defaultValue undefined */\n    step?: number;\n    /** Multiplier applied to `step` (or 1 if no `step` is set) to determine how much the value changes\n     * when using arrow keys or the scroll wheel. Must be a positive integer greater than 0.\n     * Values that are negative, zero, NaN, or undefined default to 1. Decimal values are truncated to the nearest integer.\n     * @defaultValue 1 */\n    stepMultiplier?: number;\n  };\n\n// #endregion\n\n/**\n * Number inputs let users enter and edit integers and floating-point numbers.\n * @public\n */\nconst NumberInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  NumberInputProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n\n  const defaultPlaceholder = intl.formatMessage({\n    defaultMessage: 'Add number',\n    id: 'rrkUQoVNb46Jbd/8',\n    description: 'Default placeholder for the number input.',\n  });\n\n  const {\n    onChange,\n    onKeyDown,\n    onBlur,\n    value: propValue,\n    defaultValue,\n    required,\n    readOnly = false,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    min,\n    max,\n    step,\n    stepMultiplier = 1,\n    placeholder = defaultPlaceholder,\n    onValidityChange,\n    ...remainingProps\n  }: NumberInputProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const { dispatch } = useFormFieldMessagesContext();\n  const _emitValidationState = useValidationStateEmitter(onValidityChange);\n\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => {\n      if (!value && value !== 0) {\n        const nativeErrorKey = getErrorType(\n          internalRef.current?.inputRef?.validity,\n        );\n        const message = nativeErrorKey\n          ? getI18nValidationMessage(\n              intl,\n              nativeErrorKey,\n              internalRef.current?.inputRef,\n            )\n          : undefined;\n        return getValidationState(\n          internalRef.current?.inputRef,\n          'manual',\n          message,\n        );\n      }\n      const errorKey = getErrorKey(value, min, max, step);\n      return errorKey\n        ? getValidationState(\n            NativeValidityStateKeys[errorKey],\n            'manual',\n            getI18nValidationMessage(\n              intl,\n              errorKey,\n              internalRef.current?.inputRef,\n            ),\n          )\n        : getValidationState(null, 'manual');\n    },\n  );\n  const errorId = useId();\n  const isPasted = useRef<boolean>(false);\n  const isInternalChanged = useRef<boolean>(defaultValue !== undefined);\n\n  const internalRef = useRef<FormControlRef<HTMLDivElement>>(null);\n  const inputRef = useMergeRefs([forwardedRef, internalRef]);\n\n  const [internalValue, setInternalValue] = useState<string | number | null>(\n    defaultValue ?? propValue ?? null,\n  );\n\n  // Programmatically sets the DOM input value and optionally notifies consumers.\n  // Uses the native prototype setter so React's internal value tracker stays in sync.\n  const setValueNative = useCallback(\n    (newValue: number | string | null, triggerChange: boolean = true) => {\n      const input = internalRef.current?.inputRef;\n      if (input) {\n        let stringValue: string;\n        if (newValue === null) {\n          stringValue = '';\n        } else if (typeof newValue === 'number') {\n          stringValue = new Intl.NumberFormat(getSafeRegionalFormat(), {\n            useGrouping: false,\n            maximumFractionDigits: 17,\n          }).format(newValue);\n        } else {\n          stringValue = String(newValue);\n        }\n        const desc = Object.getOwnPropertyDescriptor(\n          HTMLInputElement.prototype,\n          'value',\n        );\n        desc?.set?.call(input, stringValue);\n        input.value = stringValue;\n        if (triggerChange) {\n          const parsedValue = checkFormat(stringValue);\n          isInternalChanged.current = true;\n          setInternalValue(parsedValue || stringValue);\n          if (VALID_REGEXP.exec(parsedValue)) {\n            onChange?.(parseNumber(parsedValue));\n          } else if (parsedValue === '') {\n            onChange?.(null);\n          }\n        }\n      }\n    },\n    [onChange],\n  );\n\n  // Caching the value to keep not valid states in the input\n  const value = useMemo<string | number | null>(() => {\n    const isChanged = isInternalChanged.current;\n    isInternalChanged.current = false;\n\n    if (isChanged) {\n      return internalValue;\n    }\n\n    if (!propValue && propValue !== 0) {\n      return '';\n    }\n\n    const formattedPropValue = new Intl.NumberFormat(getSafeRegionalFormat(), {\n      useGrouping: false,\n      maximumFractionDigits: 17, // Max precision for a JS number\n    }).format(propValue);\n\n    return formattedPropValue;\n  }, [propValue, internalValue]);\n\n  const handleChange = useCallback(\n    (e: ReactChangeEvent<HTMLInputElement>) => {\n      const parsedValue = checkFormat(e.target.value);\n\n      if (VALID_REGEXP.exec(parsedValue)) {\n        onChange?.(parseNumber(parsedValue));\n      }\n\n      if (parsedValue === '') {\n        onChange?.(null);\n      }\n\n      if (isPasted.current && FORMATTABLE_PATTERN.exec(parsedValue)) {\n        isInternalChanged.current = true;\n        setInternalValue(parsedValue);\n        setValueNative(parsedValue, false);\n      } else if (INTERMEDIATE_VALID_PATTERN.exec(e.target.value)) {\n        isInternalChanged.current = true;\n        setInternalValue(parsedValue);\n      } else {\n        setValueNative(value ?? '', false);\n      }\n      isPasted.current = false;\n    },\n    [onChange, setInternalValue, value, setValueNative],\n  );\n\n  const handleBlur = useCallback(\n    (e: ReactFocusEvent<HTMLInputElement>) => {\n      if (!value && value !== 0) {\n        const nativeErrorKey = getErrorType(\n          internalRef.current?.inputRef?.validity,\n        );\n        const message = nativeErrorKey\n          ? getI18nValidationMessage(\n              intl,\n              nativeErrorKey,\n              internalRef.current?.inputRef,\n            )\n          : undefined;\n        emitValidationState(\n          getValidationState(internalRef.current?.inputRef, 'blur', message),\n        );\n        onBlur?.(e);\n        return;\n      }\n\n      const errorKey = getErrorKey(value, min, max, step);\n      if (errorKey) {\n        emitValidationState(\n          getValidationState(\n            NativeValidityStateKeys[errorKey],\n            'blur',\n            getI18nValidationMessage(\n              intl,\n              errorKey,\n              internalRef.current?.inputRef,\n            ),\n          ),\n        );\n      } else {\n        emitValidationState(getValidationState(null, 'blur'));\n      }\n      onBlur?.(e);\n    },\n    [value, min, max, step, emitValidationState, onBlur],\n  );\n\n  // Handling step changes with buttons, keyboard and wheel\n  const handleStep = useCallback(\n    (direction: 1 | -1) => {\n      setValueNative(\n        applyStep(value, step, stepMultiplier, min, max, direction),\n      );\n    },\n    [value, stepMultiplier, step, min, max, setValueNative],\n  );\n\n  // Handling keyboard input for step changes and home/end keys\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        onKeyDown?.(e);\n        return;\n      }\n\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        handleStep(+1);\n      }\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        handleStep(-1);\n      }\n\n      if (e.key === 'Home' && min !== undefined) {\n        e.preventDefault();\n        setValueNative(min);\n      }\n\n      if (e.key === 'End' && max !== undefined) {\n        e.preventDefault();\n        setValueNative(max);\n      }\n      onKeyDown?.(e);\n    },\n    [handleStep, onKeyDown, setValueNative, min, max, readOnly],\n  );\n\n  // Handling wheel input\n  useEffect(() => {\n    const el = internalRef?.current;\n\n    if (!el) {\n      return;\n    }\n\n    const onWheel = (e: WheelEvent) => {\n      if (document.activeElement !== e.target) {\n        return;\n      }\n      e.preventDefault();\n      handleStep(e.deltaY < 0 ? +1 : -1);\n    };\n\n    // Passive event listeners do not work, because the default action needs to be prevented\n    // so we need to explicitly set passive to false\n    el.element?.addEventListener('wheel', onWheel, { passive: false });\n    return () => el.element?.removeEventListener('wheel', onWheel);\n  }, [handleStep]);\n\n  useImperativeHandle(\n    forwardedRef,\n    () => ({\n      ...internalRef.current!,\n      validateAsync: async () => {\n        dispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        let validationState;\n        if (!value && value !== 0) {\n          const nativeErrorKey = getErrorType(\n            internalRef.current?.inputRef?.validity,\n          );\n          const message = nativeErrorKey\n            ? getI18nValidationMessage(\n                intl,\n                nativeErrorKey,\n                internalRef.current?.inputRef,\n              )\n            : undefined;\n          validationState = getValidationState(\n            internalRef.current?.inputRef,\n            'manual',\n            message,\n          );\n        } else {\n          const errorKey = getErrorKey(value, min, max, step);\n          validationState = errorKey\n            ? getValidationState(\n                NativeValidityStateKeys[errorKey],\n                'manual',\n                getI18nValidationMessage(\n                  intl,\n                  errorKey,\n                  internalRef.current?.inputRef,\n                ),\n              )\n            : getValidationState(null, 'manual');\n        }\n        emitValidationState(validationState);\n        return validationState;\n      },\n    }),\n    [dispatch, value, min, max, step, emitValidationState],\n  );\n\n  // Validating the native number input props manually, as we need to use a type=\"text\" input and can't rely on the native checks.\n  // We can't use type=\"number\" because it doesn't support all the formatting and localization features we need.\n  useEffect(() => {\n    if (!value && value !== 0) {\n      dispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id: errorId, messageType: 'formcontrol' },\n      });\n      const nativeErrorKey = getErrorType(\n        internalRef.current?.inputRef?.validity,\n      );\n      if (nativeErrorKey) {\n        addError(\n          nativeErrorKey,\n          errorId,\n          internalRef.current?.inputRef,\n          dispatch,\n        );\n      }\n      const message = nativeErrorKey\n        ? getI18nValidationMessage(\n            intl,\n            nativeErrorKey,\n            internalRef.current?.inputRef,\n          )\n        : undefined;\n      emitValidationState(\n        getValidationState(internalRef.current?.inputRef, 'change', message),\n      );\n      return;\n    }\n\n    const errorKey = getErrorKey(value, min, max, step);\n    if (errorKey) {\n      addError(errorKey, errorId, internalRef.current?.inputRef, dispatch);\n      emitValidationState(\n        getValidationState(\n          NativeValidityStateKeys[errorKey],\n          'change',\n          getI18nValidationMessage(\n            intl,\n            errorKey,\n            internalRef.current?.inputRef,\n          ),\n        ),\n      );\n      return;\n    }\n\n    dispatch?.({\n      type: FormFieldMessagesAction.REMOVEMESSAGE,\n      payload: { id: errorId, messageType: 'formcontrol' },\n    });\n    emitValidationState(getValidationState(null, 'change'));\n  }, [value, min, max, step, dispatch, errorId, emitValidationState]);\n\n  return (\n    <BaseInput\n      ref={inputRef}\n      {...mergeProps(restProps, behavioralTrackingProps)}\n      type=\"text\"\n      inputMode=\"decimal\"\n      autoComplete=\"off\"\n      value={value ?? ''}\n      required={required}\n      readOnly={readOnly}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      onBlur={handleBlur}\n      onPaste={() => (isPasted.current = true)}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-disabled={ariaDisabledProp}\n      data-dt-component={COMPONENT_NAME}\n      min={min}\n      max={max}\n      step={step}\n      pattern={VALID_PATTERN}\n      placeholder={placeholder}\n    />\n  );\n});\n\n/**\n * Use `NumberInputV2` to let users enter integers and floating-point numbers.\n * @public\n */\nexport const NumberInput = Object.assign(NumberInputRoot, {\n  Prefix: BaseInputPrefix,\n  Suffix: BaseInputSuffix,\n  Button: BaseInputButton,\n});\n\n(NumberInput as typeof NumberInput & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "AAgeI;AAheJ;AAAA,EAGE;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AAExB,SAAS,iBAAiB;AAC1B,SAAS,aAAa,mBAAmB;AACzC,SAAS,UAAU,mBAAmB;AACtC,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAI7B,SAAS,kBAAkB;AAE3B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,mCAAmC;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,+BAA+B;AACxC,SAAS,6BAA6B;AAEtC,SAAS,+BAA+B;AACxC,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAC1C,SAAS,0BAA0B;AAEnC,MAAM,iBAAiB;AAEvB,MAAM,gBAAgB;AACtB,MAAM,eAAe,IAAI,OAAO,aAAa;AAG7C,MAAM,sBACJ;AAGF,MAAM,6BAA6B;AA8CnC,MAAM,kBAAkC,2BAGtC,CAAC,OAAO,iBAAiB;AACzB,QAAM,OAAO,QAAQ;AAErB,QAAM,qBAAqB,KAAK,cAAc;AAAA,IAC5C,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf,CAAC;AAED,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EACL,IAAsB;AAEtB,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,QAAM,EAAE,SAAS,IAAI,4BAA4B;AACjD,QAAM,uBAAuB,0BAA0B,gBAAgB;AAEvE,QAAM,sBAAsB;AAAA,IAC1B;AAAA,IACA,MAAM;AACJ,UAAI,CAAC,SAAS,UAAU,GAAG;AACzB,cAAM,iBAAiB;AAAA,UACrB,YAAY,SAAS,UAAU;AAAA,QACjC;AACA,cAAM,UAAU,iBACZ;AAAA,UACE;AAAA,UACA;AAAA,UACA,YAAY,SAAS;AAAA,QACvB,IACA;AACJ,eAAO;AAAA,UACL,YAAY,SAAS;AAAA,UACrB;AAAA,UACA;AAAA,QACF;AAAA,MACF;AACA,YAAM,WAAW,YAAY,OAAO,KAAK,KAAK,IAAI;AAClD,aAAO,WACH;AAAA,QACE,wBAAwB,QAAQ;AAAA,QAChC;AAAA,QACA;AAAA,UACE;AAAA,UACA;AAAA,UACA,YAAY,SAAS;AAAA,QACvB;AAAA,MACF,IACA,mBAAmB,MAAM,QAAQ;AAAA,IACvC;AAAA,EACF;AACA,QAAM,UAAU,MAAM;AACtB,QAAM,WAAW,OAAgB,KAAK;AACtC,QAAM,oBAAoB,OAAgB,iBAAiB,MAAS;AAEpE,QAAM,cAAc,OAAuC,IAAI;AAC/D,QAAM,WAAW,aAAa,CAAC,cAAc,WAAW,CAAC;AAEzD,QAAM,CAAC,eAAe,gBAAgB,IAAI;AAAA,IACxC,gBAAgB,aAAa;AAAA,EAC/B;AAIA,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAAkC,gBAAyB,SAAS;AACnE,YAAM,QAAQ,YAAY,SAAS;AACnC,UAAI,OAAO;AACT,YAAI;AACJ,YAAI,aAAa,MAAM;AACrB,wBAAc;AAAA,QAChB,WAAW,OAAO,aAAa,UAAU;AACvC,wBAAc,IAAI,KAAK,aAAa,sBAAsB,GAAG;AAAA,YAC3D,aAAa;AAAA,YACb,uBAAuB;AAAA,UACzB,CAAC,EAAE,OAAO,QAAQ;AAAA,QACpB,OAAO;AACL,wBAAc,OAAO,QAAQ;AAAA,QAC/B;AACA,cAAM,OAAO,OAAO;AAAA,UAClB,iBAAiB;AAAA,UACjB;AAAA,QACF;AACA,cAAM,KAAK,KAAK,OAAO,WAAW;AAClC,cAAM,QAAQ;AACd,YAAI,eAAe;AACjB,gBAAM,cAAc,YAAY,WAAW;AAC3C,4BAAkB,UAAU;AAC5B,2BAAiB,eAAe,WAAW;AAC3C,cAAI,aAAa,KAAK,WAAW,GAAG;AAClC,uBAAW,YAAY,WAAW,CAAC;AAAA,UACrC,WAAW,gBAAgB,IAAI;AAC7B,uBAAW,IAAI;AAAA,UACjB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAGA,QAAM,QAAQ,QAAgC,MAAM;AAClD,UAAM,YAAY,kBAAkB;AACpC,sBAAkB,UAAU;AAE5B,QAAI,WAAW;AACb,aAAO;AAAA,IACT;AAEA,QAAI,CAAC,aAAa,cAAc,GAAG;AACjC,aAAO;AAAA,IACT;AAEA,UAAM,qBAAqB,IAAI,KAAK,aAAa,sBAAsB,GAAG;AAAA,MACxE,aAAa;AAAA,MACb,uBAAuB;AAAA;AAAA,IACzB,CAAC,EAAE,OAAO,SAAS;AAEnB,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,aAAa,CAAC;AAE7B,QAAM,eAAe;AAAA,IACnB,CAAC,MAA0C;AACzC,YAAM,cAAc,YAAY,EAAE,OAAO,KAAK;AAE9C,UAAI,aAAa,KAAK,WAAW,GAAG;AAClC,mBAAW,YAAY,WAAW,CAAC;AAAA,MACrC;AAEA,UAAI,gBAAgB,IAAI;AACtB,mBAAW,IAAI;AAAA,MACjB;AAEA,UAAI,SAAS,WAAW,oBAAoB,KAAK,WAAW,GAAG;AAC7D,0BAAkB,UAAU;AAC5B,yBAAiB,WAAW;AAC5B,uBAAe,aAAa,KAAK;AAAA,MACnC,WAAW,2BAA2B,KAAK,EAAE,OAAO,KAAK,GAAG;AAC1D,0BAAkB,UAAU;AAC5B,yBAAiB,WAAW;AAAA,MAC9B,OAAO;AACL,uBAAe,SAAS,IAAI,KAAK;AAAA,MACnC;AACA,eAAS,UAAU;AAAA,IACrB;AAAA,IACA,CAAC,UAAU,kBAAkB,OAAO,cAAc;AAAA,EACpD;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,MAAyC;AACxC,UAAI,CAAC,SAAS,UAAU,GAAG;AACzB,cAAM,iBAAiB;AAAA,UACrB,YAAY,SAAS,UAAU;AAAA,QACjC;AACA,cAAM,UAAU,iBACZ;AAAA,UACE;AAAA,UACA;AAAA,UACA,YAAY,SAAS;AAAA,QACvB,IACA;AACJ;AAAA,UACE,mBAAmB,YAAY,SAAS,UAAU,QAAQ,OAAO;AAAA,QACnE;AACA,iBAAS,CAAC;AACV;AAAA,MACF;AAEA,YAAM,WAAW,YAAY,OAAO,KAAK,KAAK,IAAI;AAClD,UAAI,UAAU;AACZ;AAAA,UACE;AAAA,YACE,wBAAwB,QAAQ;AAAA,YAChC;AAAA,YACA;AAAA,cACE;AAAA,cACA;AAAA,cACA,YAAY,SAAS;AAAA,YACvB;AAAA,UACF;AAAA,QACF;AAAA,MACF,OAAO;AACL,4BAAoB,mBAAmB,MAAM,MAAM,CAAC;AAAA,MACtD;AACA,eAAS,CAAC;AAAA,IACZ;AAAA,IACA,CAAC,OAAO,KAAK,KAAK,MAAM,qBAAqB,MAAM;AAAA,EACrD;AAGA,QAAM,aAAa;AAAA,IACjB,CAAC,cAAsB;AACrB;AAAA,QACE,UAAU,OAAO,MAAM,gBAAgB,KAAK,KAAK,SAAS;AAAA,MAC5D;AAAA,IACF;AAAA,IACA,CAAC,OAAO,gBAAgB,MAAM,KAAK,KAAK,cAAc;AAAA,EACxD;AAGA,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAuC;AACtC,UAAI,UAAU;AACZ,oBAAY,CAAC;AACb;AAAA,MACF;AAEA,UAAI,EAAE,QAAQ,WAAW;AACvB,UAAE,eAAe;AACjB,mBAAW,CAAE;AAAA,MACf;AAEA,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AACjB,mBAAW,EAAE;AAAA,MACf;AAEA,UAAI,EAAE,QAAQ,UAAU,QAAQ,QAAW;AACzC,UAAE,eAAe;AACjB,uBAAe,GAAG;AAAA,MACpB;AAEA,UAAI,EAAE,QAAQ,SAAS,QAAQ,QAAW;AACxC,UAAE,eAAe;AACjB,uBAAe,GAAG;AAAA,MACpB;AACA,kBAAY,CAAC;AAAA,IACf;AAAA,IACA,CAAC,YAAY,WAAW,gBAAgB,KAAK,KAAK,QAAQ;AAAA,EAC5D;AAGA,YAAU,MAAM;AACd,UAAM,KAAK,aAAa;AAExB,QAAI,CAAC,IAAI;AACP;AAAA,IACF;AAEA,UAAM,UAAU,CAAC,MAAkB;AACjC,UAAI,SAAS,kBAAkB,EAAE,QAAQ;AACvC;AAAA,MACF;AACA,QAAE,eAAe;AACjB,iBAAW,EAAE,SAAS,IAAI,IAAK,EAAE;AAAA,IACnC;AAIA,OAAG,SAAS,iBAAiB,SAAS,SAAS,EAAE,SAAS,MAAM,CAAC;AACjE,WAAO,MAAM,GAAG,SAAS,oBAAoB,SAAS,OAAO;AAAA,EAC/D,GAAG,CAAC,UAAU,CAAC;AAEf;AAAA,IACE;AAAA,IACA,OAAO;AAAA,MACL,GAAG,YAAY;AAAA,MACf,eAAe,YAAY;AACzB,mBAAW;AAAA,UACT,MAAM,wBAAwB;AAAA,UAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,QAC7B,CAAC;AACD,YAAI;AACJ,YAAI,CAAC,SAAS,UAAU,GAAG;AACzB,gBAAM,iBAAiB;AAAA,YACrB,YAAY,SAAS,UAAU;AAAA,UACjC;AACA,gBAAM,UAAU,iBACZ;AAAA,YACE;AAAA,YACA;AAAA,YACA,YAAY,SAAS;AAAA,UACvB,IACA;AACJ,4BAAkB;AAAA,YAChB,YAAY,SAAS;AAAA,YACrB;AAAA,YACA;AAAA,UACF;AAAA,QACF,OAAO;AACL,gBAAM,WAAW,YAAY,OAAO,KAAK,KAAK,IAAI;AAClD,4BAAkB,WACd;AAAA,YACE,wBAAwB,QAAQ;AAAA,YAChC;AAAA,YACA;AAAA,cACE;AAAA,cACA;AAAA,cACA,YAAY,SAAS;AAAA,YACvB;AAAA,UACF,IACA,mBAAmB,MAAM,QAAQ;AAAA,QACvC;AACA,4BAAoB,eAAe;AACnC,eAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,CAAC,UAAU,OAAO,KAAK,KAAK,MAAM,mBAAmB;AAAA,EACvD;AAIA,YAAU,MAAM;AACd,QAAI,CAAC,SAAS,UAAU,GAAG;AACzB,iBAAW;AAAA,QACT,MAAM,wBAAwB;AAAA,QAC9B,SAAS,EAAE,IAAI,SAAS,aAAa,cAAc;AAAA,MACrD,CAAC;AACD,YAAM,iBAAiB;AAAA,QACrB,YAAY,SAAS,UAAU;AAAA,MACjC;AACA,UAAI,gBAAgB;AAClB;AAAA,UACE;AAAA,UACA;AAAA,UACA,YAAY,SAAS;AAAA,UACrB;AAAA,QACF;AAAA,MACF;AACA,YAAM,UAAU,iBACZ;AAAA,QACE;AAAA,QACA;AAAA,QACA,YAAY,SAAS;AAAA,MACvB,IACA;AACJ;AAAA,QACE,mBAAmB,YAAY,SAAS,UAAU,UAAU,OAAO;AAAA,MACrE;AACA;AAAA,IACF;AAEA,UAAM,WAAW,YAAY,OAAO,KAAK,KAAK,IAAI;AAClD,QAAI,UAAU;AACZ,eAAS,UAAU,SAAS,YAAY,SAAS,UAAU,QAAQ;AACnE;AAAA,QACE;AAAA,UACE,wBAAwB,QAAQ;AAAA,UAChC;AAAA,UACA;AAAA,YACE;AAAA,YACA;AAAA,YACA,YAAY,SAAS;AAAA,UACvB;AAAA,QACF;AAAA,MACF;AACA;AAAA,IACF;AAEA,eAAW;AAAA,MACT,MAAM,wBAAwB;AAAA,MAC9B,SAAS,EAAE,IAAI,SAAS,aAAa,cAAc;AAAA,IACrD,CAAC;AACD,wBAAoB,mBAAmB,MAAM,QAAQ,CAAC;AAAA,EACxD,GAAG,CAAC,OAAO,KAAK,KAAK,MAAM,UAAU,SAAS,mBAAmB,CAAC;AAElE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACJ,GAAG,WAAW,WAAW,uBAAuB;AAAA,MACjD,MAAK;AAAA,MACL,WAAU;AAAA,MACV,cAAa;AAAA,MACb,OAAO,SAAS;AAAA,MAChB;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,SAAS,MAAO,SAAS,UAAU;AAAA,MACnC,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,iBAAe;AAAA,MACf,qBAAmB;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA;AAAA,EACF;AAEJ,CAAC;AAMM,MAAM,cAAc,OAAO,OAAO,iBAAiB;AAAA,EACxD,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AACV,CAAC;AAEA,YAA6D,cAC5D;",
   "names": []
 }

package/esm/forms/number-input-v2/utils/validation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/number-input-v2/utils/validation.tsx"],
-  "sourcesContent": ["import type { Dispatch } from 'react';\n\nimport { parseNumber } from './format.js';\nimport { getI18nErrorMessage } from '../../forms-core/hooks/useFormFieldValidation.js';\nimport {\n  FormFieldMessagesAction,\n  type FormFieldMessagesReducerAction,\n} from '../../forms-core/state/formfield-messages-state-reducer.js';\n\n/**\n * Sanitizes a numeric step value, returning 1 if the value is undefined, NaN, zero, or negative.\n * @internal\n */\nexport function sanitizePositiveNumber(value: number | undefined): number {\n  return value !== undefined && !Number.isNaN(value) && value > 0 ? value : 1;\n}\n\n/**\n * Checks if the given value is aligned with the specified step and minimum value.\n * @internal\n */\nexport function isStepAligned(\n  value: number,\n  step: number,\n  min: number = 0,\n): boolean {\n  step = sanitizePositiveNumber(step);\n  const roundedValue = Math.round((value - min) / step) * step + min;\n  const tolerance = step * 1e-9;\n  return Math.abs(value - roundedValue) < tolerance;\n}\n\n/**\n * Adds an error message to the form field messages state.\n * @internal\n */\nexport function addError(\n  errorType: keyof ValidityState,\n  errorId: string,\n  ref: HTMLInputElement | HTMLSelectElement | null | undefined,\n  dispatch: Dispatch<FormFieldMessagesReducerAction> | undefined,\n): void {\n  dispatch?.({\n    type: FormFieldMessagesAction.ADDMESSAGE,\n    payload: {\n      id: errorId,\n      message: getI18nErrorMessage(errorType, ref),\n      validityStateKey: errorType,\n      messageType: 'formcontrol',\n      variant: 'error',\n    },\n  });\n}\n\n/**\n * Determines the appropriate error key based on the provided value and validation constraints (min, max, step).\n * @internal\n */\nexport function getErrorKey(\n  value: string | number,\n  min?: number,\n  max?: number,\n  step?: number,\n): keyof ValidityState | null {\n  const parsed = parseNumber(value);\n\n  if (min !== undefined && parsed < min) {\n    return 'rangeUnderflow';\n  }\n\n  if (max !== undefined && parsed > max) {\n    return 'rangeOverflow';\n  }\n\n  if (step && step > 0 && !isStepAligned(parsed, step, min ?? 0)) {\n    return 'stepMismatch';\n  }\n  return null;\n}\n"],
-  "mappings": "AAEA,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,OAEK;AAMA,SAAS,uBAAuB,OAAmC;AACxE,SAAO,UAAU,UAAa,CAAC,OAAO,MAAM,KAAK,KAAK,QAAQ,IAAI,QAAQ;AAC5E;AAMO,SAAS,cACd,OACA,MACA,MAAc,GACL;AACT,SAAO,uBAAuB,IAAI;AAClC,QAAM,eAAe,KAAK,OAAO,QAAQ,OAAO,IAAI,IAAI,OAAO;AAC/D,QAAM,YAAY,OAAO;AACzB,SAAO,KAAK,IAAI,QAAQ,YAAY,IAAI;AAC1C;AAMO,SAAS,SACd,WACA,SACA,KACA,UACM;AACN,aAAW;AAAA,IACT,MAAM,wBAAwB;AAAA,IAC9B,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,SAAS,oBAAoB,WAAW,GAAG;AAAA,MAC3C,kBAAkB;AAAA,MAClB,aAAa;AAAA,MACb,SAAS;AAAA,IACX;AAAA,EACF,CAAC;AACH;AAMO,SAAS,YACd,OACA,KACA,KACA,MAC4B;AAC5B,QAAM,SAAS,YAAY,KAAK;AAEhC,MAAI,QAAQ,UAAa,SAAS,KAAK;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,UAAa,SAAS,KAAK;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,OAAO,KAAK,CAAC,cAAc,QAAQ,MAAM,OAAO,CAAC,GAAG;AAC9D,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
+  "sourcesContent": ["import type { Dispatch } from 'react';\n\nimport { parseNumber } from './format.js';\nimport { getI18nErrorMessage } from '../../forms-core/hooks/useFormFieldValidation.js';\nimport {\n  FormFieldMessagesAction,\n  type FormFieldMessagesReducerAction,\n} from '../../forms-core/state/formfield-messages-state-reducer.js';\nimport type { NativeValidityStateKeys } from '../../validation/types.js';\n\n/**\n * Sanitizes a numeric step value, returning 1 if the value is undefined, NaN, zero, or negative.\n * @internal\n */\nexport function sanitizePositiveNumber(value: number | undefined): number {\n  return value !== undefined && !Number.isNaN(value) && value > 0 ? value : 1;\n}\n\n/**\n * Checks if the given value is aligned with the specified step and minimum value.\n * @internal\n */\nexport function isStepAligned(\n  value: number,\n  step: number,\n  min: number = 0,\n): boolean {\n  step = sanitizePositiveNumber(step);\n  const roundedValue = Math.round((value - min) / step) * step + min;\n  const tolerance = step * 1e-9;\n  return Math.abs(value - roundedValue) < tolerance;\n}\n\n/**\n * Adds an error message to the form field messages state.\n * @internal\n */\nexport function addError(\n  errorType: keyof ValidityState,\n  errorId: string,\n  ref: HTMLInputElement | HTMLSelectElement | null | undefined,\n  dispatch: Dispatch<FormFieldMessagesReducerAction> | undefined,\n): void {\n  dispatch?.({\n    type: FormFieldMessagesAction.ADDMESSAGE,\n    payload: {\n      id: errorId,\n      message: getI18nErrorMessage(errorType, ref),\n      validityStateKey: errorType,\n      messageType: 'formcontrol',\n      variant: 'error',\n    },\n  });\n}\n\n/**\n * Determines the appropriate error key based on the provided value and validation constraints (min, max, step).\n * @internal\n */\nexport function getErrorKey(\n  value: string | number,\n  min?: number,\n  max?: number,\n  step?: number,\n): keyof typeof NativeValidityStateKeys | null {\n  const parsed = parseNumber(value);\n\n  if (min !== undefined && parsed < min) {\n    return 'rangeUnderflow';\n  }\n\n  if (max !== undefined && parsed > max) {\n    return 'rangeOverflow';\n  }\n\n  if (step && step > 0 && !isStepAligned(parsed, step, min ?? 0)) {\n    return 'stepMismatch';\n  }\n  return null;\n}\n"],
+  "mappings": "AAEA,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,OAEK;AAOA,SAAS,uBAAuB,OAAmC;AACxE,SAAO,UAAU,UAAa,CAAC,OAAO,MAAM,KAAK,KAAK,QAAQ,IAAI,QAAQ;AAC5E;AAMO,SAAS,cACd,OACA,MACA,MAAc,GACL;AACT,SAAO,uBAAuB,IAAI;AAClC,QAAM,eAAe,KAAK,OAAO,QAAQ,OAAO,IAAI,IAAI,OAAO;AAC/D,QAAM,YAAY,OAAO;AACzB,SAAO,KAAK,IAAI,QAAQ,YAAY,IAAI;AAC1C;AAMO,SAAS,SACd,WACA,SACA,KACA,UACM;AACN,aAAW;AAAA,IACT,MAAM,wBAAwB;AAAA,IAC9B,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,SAAS,oBAAoB,WAAW,GAAG;AAAA,MAC3C,kBAAkB;AAAA,MAClB,aAAa;AAAA,MACb,SAAS;AAAA,IACX;AAAA,EACF,CAAC;AACH;AAMO,SAAS,YACd,OACA,KACA,KACA,MAC6C;AAC7C,QAAM,SAAS,YAAY,KAAK;AAEhC,MAAI,QAAQ,UAAa,SAAS,KAAK;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,UAAa,SAAS,KAAK;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,OAAO,KAAK,CAAC,cAAc,QAAQ,MAAM,OAAO,CAAC,GAAG;AAC9D,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
   "names": []
 }

package/esm/forms/radio/Radio.js

@@ -20,6 +20,7 @@ import { Text } from "../../typography/text/Text.js";
 import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
 import { useFormFieldValidation } from "../forms-core/hooks/useFormFieldValidation.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
+import { getValidationState } from "../validation/validation-builders.js";
 const COMPONENT_NAME = "Radio";
 const Radio = /* @__PURE__ */ forwardRef(
   (props, forwardedRef) => {
@@ -55,7 +56,8 @@ const Radio = /* @__PURE__ */ forwardRef(
       name: groupName,
       required: groupRequired,
       value: groupValue,
-      onChange
+      onChange,
+      onValidityChange
     } = radioGroupContext || {};
     const radioLabelRef = useRef(null);
     const inputRef = useRef(null);
@@ -75,6 +77,18 @@ const Radio = /* @__PURE__ */ forwardRef(
             type: FormFieldMessagesAction.SETISTOUCHED,
             payload: { isTouched: true }
           });
+        },
+        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
+        validateAsync: async () => {
+          if (controlState !== void 0) {
+            return getValidationState(inputRef.current, "manual");
+          }
+          inputRef.current?.checkValidity();
+          messagesContextDispatch?.({
+            type: FormFieldMessagesAction.SETISTOUCHED,
+            payload: { isTouched: true }
+          });
+          return getValidationState(inputRef.current, "manual");
         }
       };
     });
@@ -85,13 +99,15 @@ const Radio = /* @__PURE__ */ forwardRef(
       ariaProps
     } = useFormFieldValidation(
       inputRef,
-      { groupRequired },
+      { groupRequired, groupValue: String(groupValue) },
       {
         "aria-label": ariaLabelProp,
         "aria-labelledby": ariaLabelledByProp,
         "aria-describedby": ariaDescribedByProp,
         "aria-details": ariaDetailsProp
-      }
+      },
+      id,
+      onValidityChange
     );
     useEffect(() => {
       messagesContextDispatch?.({

package/esm/forms/radio/Radio.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/radio/Radio.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { RadioGroupContext } from './RadioGroupContext.js';\nimport * as styles from './styles.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport type { FocusEvents } from '../../core/types/events.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { Text } from '../../typography/text/Text.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef } from '../shared-types.js';\n\nconst COMPONENT_NAME = 'Radio';\n\n// #region Typings\n/**\n * Properties for the Radio component\n * @public\n */\nexport type RadioProps = Pick<\n  FormControlProps<string, never>,\n  'disabled' | 'value'\n> &\n  DOMProps &\n  StylingProps &\n  WithChildren &\n  DataTestId &\n  FocusEvents &\n  AriaLabelingProps &\n  BehaviorTrackingProps;\n//#endregion\n\n/**\n * Radio buttons allow users to select one option from\n * a group of related options. To group options, wrap the\n * `Radio` components inside a `RadioGroup` component.\n * If you want to give the user more than 4 options,\n * consider using a `Select` component.\n * @public\n */\nexport const Radio = /* @__PURE__ */ forwardRef<FormControlRef, RadioProps>(\n  (props, forwardedRef) => {\n    const fallbackId = useId();\n    const {\n      disabled: propDisabled,\n      id = fallbackId,\n      children,\n      value,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-details': ariaDetailsProp,\n      ...remainingProps\n    }: RadioProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const { dispatch: messagesContextDispatch } = useFormFieldMessagesContext();\n\n    const radioGroupContext = useContext(RadioGroupContext);\n\n    if (isDev() && !radioGroupContext) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        '<Radio /> can only be used as a child element of <RadioGroup />',\n      );\n    }\n\n    const {\n      isDisabled,\n      ariaDisabled,\n      controlState,\n      hasError,\n      readOnly,\n      name: groupName,\n      required: groupRequired,\n      value: groupValue,\n      onChange,\n    } = radioGroupContext || {};\n\n    // Imperative Handle Construction\n    const radioLabelRef = useRef<HTMLLabelElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useImperativeHandle(forwardedRef, (): FormControlRef<HTMLLabelElement> => {\n      return {\n        element: radioLabelRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          if (controlState !== undefined) {\n            return;\n          }\n\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n        },\n      };\n    });\n\n    const {\n      onChange: validationOnChange,\n      onBlur: validationOnBlur,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(\n      inputRef,\n      { groupRequired },\n      {\n        'aria-label': ariaLabelProp,\n        'aria-labelledby': ariaLabelledByProp,\n        'aria-describedby': ariaDescribedByProp,\n        'aria-details': ariaDetailsProp,\n      },\n    );\n\n    /** Register every single input to the form error context to ensure proper validation. */\n    useEffect(() => {\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.ADDFORMCONTROLID,\n        payload: { controlId: id },\n      });\n\n      return () =>\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.REMOVEFORMCONTROLID,\n          payload: { controlId: id },\n        });\n    }, [id]);\n\n    const disabled = propDisabled ?? isDisabled;\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n    const checked = value === groupValue;\n\n    function handleChange(e: ChangeEvent<HTMLInputElement>) {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(e.target.value);\n      !controlState && validationOnChange?.();\n    }\n\n    let variant: 'accent' | 'emphasized' | 'default' = 'default';\n    let color: 'critical' | 'primary' | 'neutral' = 'neutral';\n\n    if (checked) {\n      variant = 'accent';\n    } else if (hasError) {\n      variant = 'emphasized';\n    }\n\n    if (hasError) {\n      color = 'critical';\n    } else if (!readOnly && checked) {\n      color = 'primary';\n    }\n\n    const { focusProps, focusClassName, isFocusVisible } = useFocusRing({\n      color,\n      disabled,\n    });\n\n    return (\n      <label\n        data-testid={dataTestId}\n        htmlFor={id}\n        ref={radioLabelRef}\n        className={clsx(\n          styles.label,\n          {\n            [styles.disabled]: disabledOrAriaDisabled,\n            [styles.checked]: checked,\n          },\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        {...behavioralTrackingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <VisuallyHidden>\n          <input\n            ref={inputRef}\n            checked={checked}\n            name={groupName}\n            value={value}\n            type=\"radio\"\n            disabled={disabled}\n            aria-disabled={ariaDisabled}\n            required={groupRequired}\n            id={id}\n            onChange={handleChange}\n            onInvalid={(e) => {\n              if (controlState) {\n                e.preventDefault(); // Prevents the browser validation pop-up\n                return;\n              }\n\n              validationOnInvalid(e);\n            }}\n            readOnly={readOnly}\n            {..._mergeProps(\n              restProps,\n              focusProps,\n              controlState\n                ? {}\n                : {\n                    ...ariaProps,\n                    onBlur: validationOnBlur,\n                  },\n            )}\n          />\n        </VisuallyHidden>\n        <div\n          className={clsx(\n            styles.knob({\n              disabled: disabledOrAriaDisabled,\n              checked,\n              isFocusVisible,\n              hasError,\n              readOnly,\n            }),\n            fieldColorsCSS({\n              disabled: disabledOrAriaDisabled,\n              variant,\n              color,\n            }),\n            focusClassName,\n          )}\n        >\n          <svg\n            className={clsx(\n              styles.innerKnob,\n              fieldColorsCSS({\n                color: hasError ? 'critical' : 'primary',\n                disabled: disabledOrAriaDisabled,\n                variant: 'accent',\n              }),\n            )}\n            viewBox=\"0 0 100 100\"\n          >\n            <circle r={isFocusVisible ? '20' : '25'} cx=\"50\" cy=\"50\" />\n          </svg>\n        </div>\n        <Text as=\"span\" textStyle=\"base\">\n          {children}\n        </Text>\n      </label>\n    );\n  },\n);\n\n(Radio as typeof Radio & { displayName: string }).displayName = COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { RadioGroupContext } from './RadioGroupContext.js';\nimport * as styles from './styles.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport type { FocusEvents } from '../../core/types/events.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { Text } from '../../typography/text/Text.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport { getValidationState } from '../validation/validation-builders.js';\n\nconst COMPONENT_NAME = 'Radio';\n\n// #region Typings\n/**\n * Properties for the Radio component\n * @public\n */\nexport type RadioProps = Pick<\n  FormControlProps<string, never>,\n  'disabled' | 'value'\n> &\n  DOMProps &\n  StylingProps &\n  WithChildren &\n  DataTestId &\n  FocusEvents &\n  AriaLabelingProps &\n  BehaviorTrackingProps;\n//#endregion\n\n/**\n * Radio buttons allow users to select one option from\n * a group of related options. To group options, wrap the\n * `Radio` components inside a `RadioGroup` component.\n * If you want to give the user more than 4 options,\n * consider using a `Select` component.\n * @public\n */\nexport const Radio = /* @__PURE__ */ forwardRef<FormControlRef, RadioProps>(\n  (props, forwardedRef) => {\n    const fallbackId = useId();\n    const {\n      disabled: propDisabled,\n      id = fallbackId,\n      children,\n      value,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-details': ariaDetailsProp,\n      ...remainingProps\n    }: RadioProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const { dispatch: messagesContextDispatch } = useFormFieldMessagesContext();\n\n    const radioGroupContext = useContext(RadioGroupContext);\n\n    if (isDev() && !radioGroupContext) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        '<Radio /> can only be used as a child element of <RadioGroup />',\n      );\n    }\n\n    const {\n      isDisabled,\n      ariaDisabled,\n      controlState,\n      hasError,\n      readOnly,\n      name: groupName,\n      required: groupRequired,\n      value: groupValue,\n      onChange,\n      onValidityChange,\n    } = radioGroupContext || {};\n\n    // Imperative Handle Construction\n    const radioLabelRef = useRef<HTMLLabelElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useImperativeHandle(forwardedRef, (): FormControlRef<HTMLLabelElement> => {\n      return {\n        element: radioLabelRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          if (controlState !== undefined) {\n            return;\n          }\n\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n        },\n        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n        validateAsync: async () => {\n          if (controlState !== undefined) {\n            return getValidationState(inputRef.current, 'manual');\n          }\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          return getValidationState(inputRef.current, 'manual');\n        },\n      };\n    });\n\n    const {\n      onChange: validationOnChange,\n      onBlur: validationOnBlur,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(\n      inputRef,\n      { groupRequired, groupValue: String(groupValue) },\n      {\n        'aria-label': ariaLabelProp,\n        'aria-labelledby': ariaLabelledByProp,\n        'aria-describedby': ariaDescribedByProp,\n        'aria-details': ariaDetailsProp,\n      },\n      id,\n      onValidityChange,\n    );\n\n    /** Register every single input to the form error context to ensure proper validation. */\n    useEffect(() => {\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.ADDFORMCONTROLID,\n        payload: { controlId: id },\n      });\n\n      return () =>\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.REMOVEFORMCONTROLID,\n          payload: { controlId: id },\n        });\n    }, [id]);\n\n    const disabled = propDisabled ?? isDisabled;\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n    const checked = value === groupValue;\n\n    function handleChange(e: ChangeEvent<HTMLInputElement>) {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(e.target.value);\n      !controlState && validationOnChange?.();\n    }\n\n    let variant: 'accent' | 'emphasized' | 'default' = 'default';\n    let color: 'critical' | 'primary' | 'neutral' = 'neutral';\n\n    if (checked) {\n      variant = 'accent';\n    } else if (hasError) {\n      variant = 'emphasized';\n    }\n\n    if (hasError) {\n      color = 'critical';\n    } else if (!readOnly && checked) {\n      color = 'primary';\n    }\n\n    const { focusProps, focusClassName, isFocusVisible } = useFocusRing({\n      color,\n      disabled,\n    });\n\n    return (\n      <label\n        data-testid={dataTestId}\n        htmlFor={id}\n        ref={radioLabelRef}\n        className={clsx(\n          styles.label,\n          {\n            [styles.disabled]: disabledOrAriaDisabled,\n            [styles.checked]: checked,\n          },\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        {...behavioralTrackingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <VisuallyHidden>\n          <input\n            ref={inputRef}\n            checked={checked}\n            name={groupName}\n            value={value}\n            type=\"radio\"\n            disabled={disabled}\n            aria-disabled={ariaDisabled}\n            required={groupRequired}\n            id={id}\n            onChange={handleChange}\n            onInvalid={(e) => {\n              if (controlState) {\n                e.preventDefault(); // Prevents the browser validation pop-up\n                return;\n              }\n\n              validationOnInvalid(e);\n            }}\n            readOnly={readOnly}\n            {..._mergeProps(\n              restProps,\n              focusProps,\n              controlState\n                ? {}\n                : {\n                    ...ariaProps,\n                    onBlur: validationOnBlur,\n                  },\n            )}\n          />\n        </VisuallyHidden>\n        <div\n          className={clsx(\n            styles.knob({\n              disabled: disabledOrAriaDisabled,\n              checked,\n              isFocusVisible,\n              hasError,\n              readOnly,\n            }),\n            fieldColorsCSS({\n              disabled: disabledOrAriaDisabled,\n              variant,\n              color,\n            }),\n            focusClassName,\n          )}\n        >\n          <svg\n            className={clsx(\n              styles.innerKnob,\n              fieldColorsCSS({\n                color: hasError ? 'critical' : 'primary',\n                disabled: disabledOrAriaDisabled,\n                variant: 'accent',\n              }),\n            )}\n            viewBox=\"0 0 100 100\"\n          >\n            <circle r={isFocusVisible ? '20' : '25'} cx=\"50\" cy=\"50\" />\n          </svg>\n        </div>\n        <Text as=\"span\" textStyle=\"base\">\n          {children}\n        </Text>\n      </label>\n    );\n  },\n);\n\n(Radio as typeof Radio & { displayName: string }).displayName = COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }