@salt-ds/lab 1.0.0-alpha.77 → 1.0.0-alpha.79

package/dist-es/calendar/useCalendarDay.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCalendarDay.js","sources":["../src/calendar/useCalendarDay.ts"],"sourcesContent":["import type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport type {\n  ComponentPropsWithoutRef,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\nimport { useFocusManagement } from \"./internal/useFocusManagement\";\nimport { useCalendarSelectionDay } from \"./useCalendarSelection\";\n\n/**\n * Interface representing the status of a day in the Calendar.\n */\nexport interface DayStatus {\n  /**\n   * If `true`, the day is selectable but outside of current month.\n   */\n  outOfRange?: boolean;\n  /**\n   * If `true`, the day is selected.\n   */\n  selected?: boolean;\n  /**\n   * If `true`, the day is today.\n   */\n  today?: boolean;\n  /**\n   * If set, the day is unselectable with a reason.\n   */\n  unselectable?: string | false;\n  /**\n   * If set, the day is highlighted with a reason.\n   */\n  highlighted?: string | false;\n  /**\n   * If `true`, the day is focused.\n   */\n  focused?: boolean;\n  /**\n   * If `true`, the day is hidden.\n   */\n  hidden?: boolean;\n}\n\n/**\n * UseCalendar hook props to return a calendar day's status\n * @template TDate - The type of the date object.\n */\nexport interface useCalendarDayProps<TDate> {\n  /**\n   * The date of the calendar day.\n   */\n  date: TDate;\n  /**\n   * The month of the calendar day.\n   */\n  month: TDate;\n}\n\nexport function useCalendarDay<TDate extends DateFrameworkType>(\n  props: useCalendarDayProps<TDate>,\n) {\n  const { date, month } = props;\n  const { dateAdapter } = useLocalization<TDate>();\n  const {\n    state: {\n      focusedDate,\n      focusedDateRef,\n      hideOutOfRangeDates,\n      timezone,\n      focusableDates,\n    },\n    helpers: {\n      setHoveredDate,\n      isDayUnselectable,\n      isDayHighlighted,\n      isOutsideAllowedMonths,\n    },\n  } = useCalendarContext<TDate>();\n  const selectionManager = useCalendarSelectionDay<TDate>({ date });\n  const focusManager = useFocusManagement<TDate>({ date });\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    selectionManager.handleClick(event);\n    focusManager.handleClick(event);\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLButtonElement> = (event) => {\n    focusManager.handleKeyDown(event);\n    selectionManager.handleKeyDown(event);\n  };\n\n  const handleFocus: FocusEventHandler<HTMLButtonElement> = (event) => {\n    focusManager.handleFocus(event);\n    setHoveredDate(event, date);\n  };\n\n  const handleMouseMove: MouseEventHandler<HTMLButtonElement> = (event) => {\n    setHoveredDate(event, date);\n  };\n\n  const eventHandlers = {\n    onClick: handleClick,\n    onKeyDown: handleKeyDown,\n    onFocus: handleFocus,\n    onMouseMove: handleMouseMove,\n  };\n\n  const focused = focusedDate && dateAdapter.isSame(date, focusedDate, \"day\");\n  const tabIndex = focusableDates.find((tabbableDate) =>\n    dateAdapter.isSame(date, tabbableDate, \"day\"),\n  )\n    ? 0\n    : -1;\n  const today = dateAdapter.isSame(dateAdapter.today(timezone), date, \"day\");\n\n  const unselectableReason = isDayUnselectable(date);\n  const highlightedReason = isDayHighlighted(date);\n\n  const outOfRange = !dateAdapter.isSame(date, month, \"month\");\n  const unselectable =\n    Boolean(unselectableReason) || isOutsideAllowedMonths(date);\n  const highlighted = Boolean(highlightedReason);\n  const hidden = hideOutOfRangeDates ? outOfRange : false;\n\n  return {\n    status: {\n      outOfRange,\n      today,\n      unselectable,\n      focused,\n      hidden,\n      highlighted,\n      ...selectionManager.status,\n    } as DayStatus,\n    dayProps: {\n      tabIndex,\n      \"aria-current\": today ? \"date\" : undefined,\n      \"aria-hidden\": hidden ? \"true\" : undefined,\n      ...eventHandlers,\n      ...selectionManager.dayProps,\n    } as ComponentPropsWithoutRef<\"button\">,\n    focusedDateRef: focused ? focusedDateRef : null,\n    unselectableReason,\n    highlightedReason,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useCalendarDay.js","sources":["../src/calendar/useCalendarDay.ts"],"sourcesContent":["import type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport type {\n  ComponentPropsWithoutRef,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\nimport { useFocusManagement } from \"./internal/useFocusManagement\";\nimport { useCalendarSelectionDay } from \"./useCalendarSelection\";\n\n/**\n * Interface representing the status of a day in the Calendar.\n */\nexport interface DayStatus {\n  /**\n   * If `true`, the day is selectable but outside of current month.\n   */\n  outOfRange?: boolean;\n  /**\n   * If `true`, the day is selected.\n   */\n  selected?: boolean;\n  /**\n   * If `true`, the day is today.\n   */\n  today?: boolean;\n  /**\n   * If set, the day is unselectable with a reason.\n   */\n  unselectable?: string | false;\n  /**\n   * If set, the day is highlighted with a reason.\n   */\n  highlighted?: string | false;\n  /**\n   * If `true`, the day is focused.\n   */\n  focused?: boolean;\n  /**\n   * If `true`, the day is hidden.\n   */\n  hidden?: boolean;\n}\n\n/**\n * UseCalendar hook props to return a calendar day's status\n * @template TDate - The type of the date object.\n */\nexport interface useCalendarDayProps<TDate> {\n  /**\n   * The date of the calendar day.\n   */\n  date: TDate;\n  /**\n   * The month of the calendar day.\n   */\n  month: TDate;\n}\n\nexport function useCalendarDay<TDate extends DateFrameworkType>(\n  props: useCalendarDayProps<TDate>,\n) {\n  const { date, month } = props;\n  const { dateAdapter } = useLocalization<TDate>();\n  const {\n    state: {\n      focusedDate,\n      focusedDateRef,\n      hideOutOfRangeDates,\n      timezone,\n      focusableDates,\n    },\n    helpers: {\n      setHoveredDate,\n      isDayUnselectable,\n      isDayHighlighted,\n      isOutsideAllowedMonths,\n      isOutsideAllowedDates,\n    },\n  } = useCalendarContext<TDate>();\n  const selectionManager = useCalendarSelectionDay<TDate>({ date });\n  const focusManager = useFocusManagement<TDate>({ date });\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    selectionManager.handleClick(event);\n    focusManager.handleClick(event);\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLButtonElement> = (event) => {\n    focusManager.handleKeyDown(event);\n    selectionManager.handleKeyDown(event);\n  };\n\n  const handleFocus: FocusEventHandler<HTMLButtonElement> = (event) => {\n    focusManager.handleFocus(event);\n    setHoveredDate(event, date);\n  };\n\n  const handleMouseMove: MouseEventHandler<HTMLButtonElement> = (event) => {\n    setHoveredDate(event, date);\n  };\n\n  const eventHandlers = {\n    onClick: handleClick,\n    onKeyDown: handleKeyDown,\n    onFocus: handleFocus,\n    onMouseMove: handleMouseMove,\n  };\n\n  const focused = focusedDate && dateAdapter.isSame(date, focusedDate, \"day\");\n  const tabIndex = focusableDates.find((tabbableDate) =>\n    dateAdapter.isSame(date, tabbableDate, \"day\"),\n  )\n    ? 0\n    : -1;\n  const today = dateAdapter.isSame(dateAdapter.today(timezone), date, \"day\");\n\n  const unselectableReason = isDayUnselectable(date);\n  const highlightedReason = isDayHighlighted(date);\n\n  const outOfRange = !dateAdapter.isSame(date, month, \"month\");\n  const unselectable =\n    Boolean(unselectableReason) ||\n    isOutsideAllowedMonths(date) ||\n    isOutsideAllowedDates(date);\n  const highlighted = Boolean(highlightedReason);\n  const hidden = hideOutOfRangeDates ? outOfRange : false;\n\n  return {\n    status: {\n      outOfRange,\n      today,\n      unselectable,\n      focused,\n      hidden,\n      highlighted,\n      ...selectionManager.status,\n    } as DayStatus,\n    dayProps: {\n      tabIndex,\n      \"aria-current\": today ? \"date\" : undefined,\n      \"aria-hidden\": hidden ? \"true\" : undefined,\n      ...eventHandlers,\n      ...selectionManager.dayProps,\n    } as ComponentPropsWithoutRef<\"button\">,\n    focusedDateRef: focused ? focusedDateRef : null,\n    unselectableReason,\n    highlightedReason,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist-es/form-field-legacy/FormHelperText.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-high {\n  --formFieldLegacy-helperText-marginTop-default: 2px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 3px;\n\n  --formFieldLegacy-helperText-background-offset-height: 17px;\n}\n.salt-density-medium {\n  --formFieldLegacy-helperText-marginTop-default: 2px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 3px;\n  --formFieldLegacy-helperText-transform: translate(0, 2px);\n\n  --formFieldLegacy-helperText-background-offset-height: 19px;\n}\n.salt-density-touch {\n  --formFieldLegacy-helperText-marginTop-default: 8px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 5px;\n  --formFieldLegacy-helperText-transform: translate(0, -3px);\n\n  --formFieldLegacy-helperText-background-offset-height: 21px;\n}\n.salt-density-low {\n  --formFieldLegacy-helperText-marginTop-default: 4px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 5px;\n  --formFieldLegacy-helperText-transform: translate(0, 1px);\n\n  --formFieldLegacy-helperText-background-offset-height: 21px;\n}\n\n/* Class applied if `fullWidth={true}` */\n.saltFormFieldLegacy-fullWidth {\n  --formFieldLegacy-helperText-transform: none;\n}\n\n/* Class applied to the helper text container */\n.saltFormHelperText {\n  --formFieldLegacy-helperText-opacity: 1;\n\n  color: var(--saltFormFieldLegacy-helperText-color, var(--salt-content-secondary-foreground));\n  font-size: var(--formFieldLegacy-helperText-fontSize);\n  font-style: var(--saltFormFieldLegacy-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n  letter-spacing: var(--saltFormFieldLegacy-helperText-letterSpacing, 0);\n  line-height: var(--saltFormFieldLegacy-helperText-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltFormFieldLegacy-helperText-minHeight, var(--salt-text-label-minHeight));\n  margin-bottom: var(--saltFormFieldLegacy-helperText-marginBottom, 0);\n  margin-top: var(--saltFormFieldLegacy-helperText-marginTop, var(--formFieldLegacy-helperText-marginTop));\n  opacity: var(--saltFormFieldLegacy-helperText-opacity, var(--formFieldLegacy-helperText-opacity));\n  padding-left: var(--saltFormFieldLegacy-helperText-paddingLeft, var(--salt-size-unit));\n  padding-right: var(--saltFormFieldLegacy-helperText-paddingRight, var(--salt-size-unit));\n  transform: var(--saltFormFieldLegacy-helperText-transform, var(--formFieldLegacy-helperText-transform, none));\n}\n";
+var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-high {\n  --formFieldLegacy-helperText-marginTop-default: 2px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 3px;\n\n  --formFieldLegacy-helperText-background-offset-height: 17px;\n}\n.salt-density-medium {\n  --formFieldLegacy-helperText-marginTop-default: 2px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 3px;\n  --formFieldLegacy-helperText-transform: translate(0, 2px);\n\n  --formFieldLegacy-helperText-background-offset-height: 19px;\n}\n.salt-density-touch {\n  --formFieldLegacy-helperText-marginTop-default: 8px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 5px;\n  --formFieldLegacy-helperText-transform: translate(0, -3px);\n\n  --formFieldLegacy-helperText-background-offset-height: 21px;\n}\n.salt-density-low {\n  --formFieldLegacy-helperText-marginTop-default: 4px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 5px;\n  --formFieldLegacy-helperText-transform: translate(0, 1px);\n\n  --formFieldLegacy-helperText-background-offset-height: 21px;\n}\n\n/* Class applied if `fullWidth={true}` */\n.saltFormFieldLegacy-fullWidth {\n  --formFieldLegacy-helperText-transform: none;\n}\n\n/* Class applied to the helper text container */\n.saltFormHelperText {\n  --formFieldLegacy-helperText-opacity: 1;\n\n  color: var(--saltFormFieldLegacy-helperText-color, var(--salt-content-secondary-foreground));\n  font-size: var(--formFieldLegacy-helperText-fontSize);\n  font-style: var(--saltFormFieldLegacy-helperText-fontStyle, var(--salt-typography-textDecoration-italic));\n  letter-spacing: var(--saltFormFieldLegacy-helperText-letterSpacing, 0);\n  line-height: var(--saltFormFieldLegacy-helperText-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltFormFieldLegacy-helperText-minHeight, var(--salt-text-label-minHeight));\n  margin-bottom: var(--saltFormFieldLegacy-helperText-marginBottom, 0);\n  margin-top: var(--saltFormFieldLegacy-helperText-marginTop, var(--formFieldLegacy-helperText-marginTop));\n  opacity: var(--saltFormFieldLegacy-helperText-opacity, var(--formFieldLegacy-helperText-opacity));\n  padding-left: var(--saltFormFieldLegacy-helperText-paddingLeft, var(--salt-size-unit));\n  padding-right: var(--saltFormFieldLegacy-helperText-paddingRight, var(--salt-size-unit));\n  transform: var(--saltFormFieldLegacy-helperText-transform, var(--formFieldLegacy-helperText-transform, none));\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=FormHelperText.css.js.map

package/dist-es/form-field-legacy/FormLabel.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to root element */\n.salt-density-touch {\n  --formFieldLegacy-label-default-top: 11px;\n  --formFieldLegacy-label-left-top: 16px;\n  --formFieldLegacy-label-minHeight: 16px;\n}\n.salt-density-low {\n  --formFieldLegacy-label-default-top: 7px;\n  --formFieldLegacy-label-left-top: 12px;\n}\n.salt-density-medium {\n  --formFieldLegacy-label-default-top: 5px;\n  --formFieldLegacy-label-left-top: 8px;\n}\n.salt-density-high {\n  --formFieldLegacy-label-default-top: 3px;\n  --formFieldLegacy-label-left-top: 4px;\n}\n\n.saltFormLabel {\n  --formFieldLegacy-label-fontSize: var(--saltFormFieldLegacy-label-fontSize, var(--salt-text-label-fontSize));\n  --formFieldLegacy-label-top: var(--formFieldLegacy-label-default-top);\n  --formFieldLegacy-label-width: 100%;\n}\n\n.saltFormFieldLegacy-labelLeft .saltFormLabel {\n  --formFieldLegacy-label-top: var(--formFieldLegacy-label-left-top);\n  --formFieldLegacy-label-width: auto;\n}\n\n.saltFormLabel {\n  align-items: center;\n  color: var(--saltFormFieldLegacy-label-text-color, var(--salt-content-secondary-foreground));\n  display: block;\n  font-size: var(--formFieldLegacy-label-fontSize);\n  margin-bottom: var(--saltFormFieldLegacy-label-marginBottom, var(--formFieldLegacy-label-marginBottom));\n  min-height: var(--saltFormFieldLegacy-label-minHeight, var(--formFieldLegacy-label-minHeight, var(--salt-text-label-minHeight)));\n  margin-top: var(--saltFormFieldLegacy-label-marginTop, 0px);\n  line-height: var(--saltFormFieldLegacy-label-lineHeight, var(--salt-text-label-lineHeight));\n  overflow: hidden;\n  padding-left: var(--saltFormFieldLegacy-label-paddingLeft, var(--formFieldLegacy-label-paddingLeft));\n  padding-right: var(--saltFormFieldLegacy-label-paddingRight, var(--formFieldLegacy-label-paddingRight));\n  padding-top: var(--saltFormFieldLegacy-label-paddingTop, 0);\n  padding-bottom: var(--saltFormFieldLegacy-label-paddingBottom, 0);\n  text-overflow: ellipsis;\n  top: var(--saltFormFieldLegacy-label-top, var(--formFieldLegacy-label-top));\n  transform: translate(var(--saltFormFieldLegacy-label-transform-x, 0), var(--saltFormFieldLegacy-label-transform-y, var(--formFieldLegacy-label-top)));\n  white-space: nowrap;\n  width: var(--saltFormFieldLegacy-label-width, var(--formFieldLegacy-label-width, 100%));\n  box-sizing: border-box;\n}\n\n.saltFormLabel ~ * {\n  z-index: 1;\n}\n\n/* Styles applied when `disabled={true}` */\n.saltFormLabel-disabled {\n  color: var(--saltFormFieldLegacy-label-text-color-disabled, var(--salt-content-secondary-foreground-disabled));\n  cursor: var(--salt-cursor-disabled);\n}\n\n/* Styles applied when displayedNecessity or necessityText provided */\n.saltFormLabel-necessityIndicator {\n  font-style: var(--saltFormFieldLegacy-label-necessityIndicator-fontStyle, var(--salt-editable-help-fontStyle));\n  margin-left: 1ch;\n}\n\n/* Styles applied if `hasStatusIndicator={true}` */\n.saltFormLabel-statusIndicator.saltIcon {\n  margin-left: 6px;\n  vertical-align: top;\n}\n";
+var css_248z = "/* Styles applied to root element */\n.salt-density-touch {\n  --formFieldLegacy-label-default-top: 11px;\n  --formFieldLegacy-label-left-top: 16px;\n  --formFieldLegacy-label-minHeight: 16px;\n}\n.salt-density-low {\n  --formFieldLegacy-label-default-top: 7px;\n  --formFieldLegacy-label-left-top: 12px;\n}\n.salt-density-medium {\n  --formFieldLegacy-label-default-top: 5px;\n  --formFieldLegacy-label-left-top: 8px;\n}\n.salt-density-high {\n  --formFieldLegacy-label-default-top: 3px;\n  --formFieldLegacy-label-left-top: 4px;\n}\n\n.saltFormLabel {\n  --formFieldLegacy-label-fontSize: var(--saltFormFieldLegacy-label-fontSize, var(--salt-text-label-fontSize));\n  --formFieldLegacy-label-top: var(--formFieldLegacy-label-default-top);\n  --formFieldLegacy-label-width: 100%;\n}\n\n.saltFormFieldLegacy-labelLeft .saltFormLabel {\n  --formFieldLegacy-label-top: var(--formFieldLegacy-label-left-top);\n  --formFieldLegacy-label-width: auto;\n}\n\n.saltFormLabel {\n  align-items: center;\n  color: var(--saltFormFieldLegacy-label-text-color, var(--salt-content-secondary-foreground));\n  display: block;\n  font-size: var(--formFieldLegacy-label-fontSize);\n  margin-bottom: var(--saltFormFieldLegacy-label-marginBottom, var(--formFieldLegacy-label-marginBottom));\n  min-height: var(--saltFormFieldLegacy-label-minHeight, var(--formFieldLegacy-label-minHeight, var(--salt-text-label-minHeight)));\n  margin-top: var(--saltFormFieldLegacy-label-marginTop, 0px);\n  line-height: var(--saltFormFieldLegacy-label-lineHeight, var(--salt-text-label-lineHeight));\n  overflow: hidden;\n  padding-left: var(--saltFormFieldLegacy-label-paddingLeft, var(--formFieldLegacy-label-paddingLeft));\n  padding-right: var(--saltFormFieldLegacy-label-paddingRight, var(--formFieldLegacy-label-paddingRight));\n  padding-top: var(--saltFormFieldLegacy-label-paddingTop, 0);\n  padding-bottom: var(--saltFormFieldLegacy-label-paddingBottom, 0);\n  text-overflow: ellipsis;\n  top: var(--saltFormFieldLegacy-label-top, var(--formFieldLegacy-label-top));\n  transform: translate(var(--saltFormFieldLegacy-label-transform-x, 0), var(--saltFormFieldLegacy-label-transform-y, var(--formFieldLegacy-label-top)));\n  white-space: nowrap;\n  width: var(--saltFormFieldLegacy-label-width, var(--formFieldLegacy-label-width, 100%));\n  box-sizing: border-box;\n}\n\n.saltFormLabel ~ * {\n  z-index: 1;\n}\n\n/* Styles applied when `disabled={true}` */\n.saltFormLabel-disabled {\n  color: var(--saltFormFieldLegacy-label-text-color-disabled, var(--salt-content-secondary-foreground-disabled));\n  cursor: var(--salt-cursor-disabled);\n}\n\n/* Styles applied when displayedNecessity or necessityText provided */\n.saltFormLabel-necessityIndicator {\n  font-style: var(--saltFormFieldLegacy-label-necessityIndicator-fontStyle, var(--salt-typography-textDecoration-italic));\n  margin-left: 1ch;\n}\n\n/* Styles applied if `hasStatusIndicator={true}` */\n.saltFormLabel-statusIndicator.saltIcon {\n  margin-left: 6px;\n  vertical-align: top;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=FormLabel.css.js.map

package/dist-es/index.js

@@ -103,8 +103,7 @@ export { MenuButton } from './menu-button/MenuButton.js';
 export { Metric } from './metric/Metric.js';
 export { MetricContent } from './metric/MetricContent.js';
 export { MetricHeader } from './metric/MetricHeader.js';
-export { NumberInput } from './number-input/NumberInput.js';
-export { useNumberInput } from './number-input/useNumberInput.js';
+export { NumberInput, isOutOfRange } from './number-input/NumberInput.js';
 export { Portal } from './portal/Portal.js';
 export { QueryInput } from './query-input/QueryInput.js';
 export { useQueryInput } from './query-input/useQueryInput.js';

package/dist-es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-es/number-input/NumberInput.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to number container */\n.saltNumberInput {\n  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n  --numberInput-borderColor: var(--salt-editable-borderColor);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-outlineColor: var(--salt-focused-outlineColor);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n  --numberInput-outline: none;\n\n  align-items: center;\n  background: var(--numberInput-background);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  box-sizing: border-box;\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  overflow: hidden;\n  outline: var(--numberInput-outline);\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-50);\n  padding-top: var(--salt-spacing-50);\n  padding-bottom: var(--salt-spacing-50);\n  position: relative;\n  width: 100%;\n}\n\n.saltNumberInput:hover {\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--numberInput-background-hover);\n  cursor: var(--salt-cursor-text);\n}\n\n.saltNumberInput:active {\n  --numberInput-borderColor: var(--salt-editable-borderColor-active);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n  background: var(--numberInput-background-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltNumberInput-primary {\n  --numberInput-background: var(--salt-editable-primary-background);\n  --numberInput-background-active: var(--salt-editable-primary-background-active);\n  --numberInput-background-hover: var(--salt-editable-primary-background-hover);\n  --numberInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltNumberInput-secondary {\n  --numberInput-background: var(--salt-editable-secondary-background);\n  --numberInput-background-active: var(--salt-editable-secondary-background-active);\n  --numberInput-background-hover: var(--salt-editable-secondary-background-active);\n  --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltNumberInput-error,\n.saltNumberInput-error:hover {\n  --numberInput-background: var(--salt-status-error-background);\n  --numberInput-background-active: var(--salt-status-error-background);\n  --numberInput-background-hover: var(--salt-status-error-background);\n  --numberInput-borderColor: var(--salt-status-error-borderColor);\n  --numberInput-outlineColor: var(--salt-status-error-borderColor);\n  --numberInput-background-readonly: var(--salt-status-error-background);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltNumberInput-warning,\n.saltNumberInput-warning:hover {\n  --numberInput-background: var(--salt-status-warning-background);\n  --numberInput-background-active: var(--salt-status-warning-background);\n  --numberInput-background-hover: var(--salt-status-warning-background);\n  --numberInput-borderColor: var(--salt-status-warning-borderColor);\n  --numberInput-outlineColor: var(--salt-status-warning-borderColor);\n  --numberInput-background-readonly: var(--salt-status-warning-background);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltNumberInput-success,\n.saltNumberInput-success:hover {\n  --numberInput-background: var(--salt-status-success-background);\n  --numberInput-background-active: var(--salt-status-success-background);\n  --numberInput-background-hover: var(--salt-status-success-background);\n  --numberInput-borderColor: var(--salt-status-success-borderColor);\n  --numberInput-outlineColor: var(--salt-status-success-borderColor);\n  --numberInput-background-readonly: var(--salt-status-success-background);\n}\n\n/* Style applied to inner input component */\n.saltNumberInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  margin: 0;\n  min-width: 0;\n  padding: 0;\n  text-align: var(--numberInput-textAlign);\n  width: 100%;\n}\n\n.saltNumberInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to placeholder text */\n.saltNumberInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltNumberInput-focused {\n  --numberInput-borderColor: var(--numberInput-outlineColor);\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n  outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));\n}\n\n/* Style applied if `bordered={true}` */\n.saltNumberInput-bordered {\n  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n  --numberInput-borderWidth: 0;\n\n  border: var(--numberInput-border);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused,\n.saltNumberInput-bordered:active {\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-disabled:hover {\n  --numberInput-borderWidth: 0;\n}\n\n/* Styling when focused and hovered when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused:hover {\n  --numberInput-borderColor: var(--salt-editable-borderColor-active);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-readOnly {\n  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--numberInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltNumberInput-focused.saltNumberInput-disabled {\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n  outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltNumberInput-focused.saltNumberInput-readOnly {\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput:hover.saltNumberInput-readOnly {\n  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltNumberInput-disabled .saltNumberInput-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltNumberInput-disabled,\n.saltNumberInput-disabled:hover,\n.saltNumberInput-disabled:active {\n  --numberInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--numberInput-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltNumberInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltNumberInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltNumberInput-startAdornmentContainer {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-startAdornmentContainer > .saltButton,\n.saltNumberInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltNumberInput-inputTextAlignLeft {\n  --numberInput-textAlign: left;\n}\n\n.saltNumberInput-inputTextAlignCenter {\n  --numberInput-textAlign: center;\n}\n\n.saltNumberInput-inputTextAlignRight {\n  --numberInput-textAlign: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to number buttons container */\n.saltNumberInput-buttonContainer {\n  --numberInput-buttonGap: var(--salt-spacing-fixed-200);\n  display: flex;\n  flex-direction: column;\n  gap: var(--numberInput-buttonGap);\n  justify-content: center;\n}\n\n.saltNumberInput-hiddenButtons .saltNumberInput-buttonContainer {\n  display: none;\n}\n\n/* Styles applied to number buttons */\n.saltNumberInput-numberButton {\n  --saltButton-height: calc((var(--salt-size-base) - (var(--salt-spacing-50) * 2) - var(--salt-size-fixed-200)) / 2);\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n}\n\n.saltNumberInput-numberButtonIncrement {\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0) 0 0;\n}\n.saltNumberInput-numberButtonDecrement {\n  --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0);\n}\n\n.saltNumberInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n}\n\n.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-editable-borderColor-active);\n}\n\n.saltNumberInput-bordered.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  /* Activation indicator width minus the border from the number input. */\n  border-bottom-width: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput-bordered .saltNumberInput-activationIndicator,\n.saltNumberInput-readOnly.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  border-bottom-width: 0;\n}\n";
+var css_248z = "/* Styles applied to number container */\n.saltNumberInput {\n  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n  --numberInput-borderColor: var(--salt-editable-borderColor);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-outlineColor: var(--salt-focused-outlineColor);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n  --numberInput-outline: none;\n\n  align-items: center;\n  background: var(--numberInput-background);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  box-sizing: border-box;\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  overflow: hidden;\n  outline: var(--numberInput-outline);\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-50);\n  padding-top: var(--salt-spacing-50);\n  padding-bottom: var(--salt-spacing-50);\n  position: relative;\n  width: 100%;\n}\n\n.saltNumberInput:hover {\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--numberInput-background-hover);\n  cursor: var(--salt-cursor-text);\n}\n\n.saltNumberInput:active {\n  --numberInput-borderColor: var(--salt-editable-borderColor-active);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n  background: var(--numberInput-background-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltNumberInput-primary {\n  --numberInput-background: var(--salt-editable-primary-background);\n  --numberInput-background-active: var(--salt-editable-primary-background-active);\n  --numberInput-background-hover: var(--salt-editable-primary-background-hover);\n  --numberInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltNumberInput-secondary {\n  --numberInput-background: var(--salt-editable-secondary-background);\n  --numberInput-background-active: var(--salt-editable-secondary-background-active);\n  --numberInput-background-hover: var(--salt-editable-secondary-background-active);\n  --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltNumberInput-error,\n.saltNumberInput-error:hover {\n  --numberInput-background: var(--salt-status-error-background);\n  --numberInput-background-active: var(--salt-status-error-background);\n  --numberInput-background-hover: var(--salt-status-error-background);\n  --numberInput-borderColor: var(--salt-status-error-borderColor);\n  --numberInput-outlineColor: var(--salt-status-error-borderColor);\n  --numberInput-background-readonly: var(--salt-status-error-background);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltNumberInput-warning,\n.saltNumberInput-warning:hover {\n  --numberInput-background: var(--salt-status-warning-background);\n  --numberInput-background-active: var(--salt-status-warning-background);\n  --numberInput-background-hover: var(--salt-status-warning-background);\n  --numberInput-borderColor: var(--salt-status-warning-borderColor);\n  --numberInput-outlineColor: var(--salt-status-warning-borderColor);\n  --numberInput-background-readonly: var(--salt-status-warning-background);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltNumberInput-success,\n.saltNumberInput-success:hover {\n  --numberInput-background: var(--salt-status-success-background);\n  --numberInput-background-active: var(--salt-status-success-background);\n  --numberInput-background-hover: var(--salt-status-success-background);\n  --numberInput-borderColor: var(--salt-status-success-borderColor);\n  --numberInput-outlineColor: var(--salt-status-success-borderColor);\n  --numberInput-background-readonly: var(--salt-status-success-background);\n}\n\n/* Style applied to inner input component */\n.saltNumberInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  margin: 0;\n  min-width: 0;\n  padding: 0;\n  text-align: var(--numberInput-textAlign);\n  width: 100%;\n}\n\n.saltNumberInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to placeholder text */\n.saltNumberInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltNumberInput-focused {\n  --numberInput-borderColor: var(--numberInput-outlineColor);\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n  outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));\n}\n\n/* Style applied if `bordered={true}` */\n.saltNumberInput-bordered {\n  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n  --numberInput-borderWidth: 0;\n\n  border: var(--numberInput-border);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused,\n.saltNumberInput-bordered:active {\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-disabled:hover {\n  --numberInput-borderWidth: 0;\n}\n\n/* Styling when focused and hovered when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused:hover {\n  --numberInput-borderColor: var(--salt-editable-borderColor-active);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-readOnly {\n  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--numberInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltNumberInput-focused.saltNumberInput-disabled {\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n  outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltNumberInput-focused.saltNumberInput-readOnly {\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput:hover.saltNumberInput-readOnly {\n  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltNumberInput-disabled .saltNumberInput-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltNumberInput-disabled,\n.saltNumberInput-disabled:hover,\n.saltNumberInput-disabled:active {\n  --numberInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--numberInput-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltNumberInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltNumberInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltNumberInput-startAdornmentContainer {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-startAdornmentContainer > .saltButton,\n.saltNumberInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltNumberInput-inputTextAlignLeft {\n  --numberInput-textAlign: left;\n}\n\n.saltNumberInput-inputTextAlignCenter {\n  --numberInput-textAlign: center;\n}\n\n.saltNumberInput-inputTextAlignRight {\n  --numberInput-textAlign: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to number buttons container */\n.saltNumberInput-buttonContainer {\n  --numberInput-buttonGap: var(--salt-spacing-fixed-200);\n  display: flex;\n  flex-direction: column;\n  gap: var(--numberInput-buttonGap);\n  justify-content: center;\n}\n\n.saltNumberInput-hiddenButtons .saltNumberInput-buttonContainer {\n  display: none;\n}\n\n.saltNumberInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n}\n\n.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-editable-borderColor-active);\n}\n\n.saltNumberInput-bordered.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  /* Activation indicator width minus the border from the number input. */\n  border-bottom-width: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput-bordered .saltNumberInput-activationIndicator,\n.saltNumberInput-readOnly.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltNumberInput-increment {\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0) 0 0;\n}\n\n.saltNumberInput-decrement {\n  --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0);\n}\n\n/* Styles applied to number buttons */\n.saltNumberInput-increment,\n.saltNumberInput-decrement {\n  --saltButton-height: calc((var(--salt-size-base) - (var(--salt-spacing-50) * 2) - var(--salt-size-fixed-200)) / 2);\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=NumberInput.css.js.map

package/dist-es/number-input/NumberInput.js

@@ -3,32 +3,56 @@ import { makePrefixer, useFormFieldProps, useId, useForkRef, useIcon, useControl
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { forwardRef, useRef, useState, useEffect, useLayoutEffect } from 'react';
-import useCaret from './internal/useCaret.js';
-import { getNumberPrecision, toFloat, isOutOfRange, sanitizeInput, isEmpty, clampToRange } from './internal/utils.js';
+import { forwardRef, useRef, useState, useEffect } from 'react';
+import { useActivateWhileMouseDown } from './internal/useActivateWhileMouseDown.js';
 import css_248z from './NumberInput.css.js';
-import { useNumberInput } from './useNumberInput.js';
 
 const withBaseName = makePrefixer("saltNumberInput");
+const isOutOfRange = (value, min, max) => {
+  if (typeof value === "string" && !value.length) {
+    return true;
+  }
+  const floatValue = typeof value === "string" ? Number.parseFloat(value) : value;
+  return Number.isNaN(floatValue) || floatValue > max || floatValue < min;
+};
+function getNumberPrecision(num) {
+  const numStr = String(num);
+  if (numStr.includes("e") || numStr.includes("E")) {
+    const [base, exponent] = numStr.split(/[eE]/);
+    const decimalPart = base.split(".")[1] || "";
+    const precision = decimalPart.length - Number.parseInt(exponent, 10);
+    return Math.max(0, precision);
+  }
+  if (numStr.includes(".")) {
+    return numStr.split(".")[1].length;
+  }
+  return 0;
+}
+const defaultPattern = (inputValue) => /^[+-]?(\d+(\.\d*)?|\.\d*)?$/.test(inputValue);
 const NumberInput = forwardRef(
   function NumberInput2({
-    bordered = false,
+    "aria-valuetext": ariaValueTextProp,
+    bordered,
     className: classNameProp,
-    clamp = false,
+    clamp,
+    decimalScale: decimalScaleProp,
     disabled,
     emptyReadOnlyMarker = "\u2014",
     endAdornment,
-    format,
+    format: formatProp,
     hideButtons,
     id: idProp,
+    pattern = defaultPattern,
     inputProps: inputPropsProp = {},
     inputRef: inputRefProp,
     max = Number.MAX_SAFE_INTEGER,
     min = Number.MIN_SAFE_INTEGER,
-    onChange: onChangeProp,
-    parse,
+    onBlur,
+    onChange,
+    onMouseUp,
+    onNumberChange: onNumberChangeProp,
+    parse: parseProp,
     placeholder,
-    decimalScale: decimalScaleProp,
     readOnly: readOnlyProp,
     startAdornment,
     step = 1,
@@ -37,7 +61,7 @@ const NumberInput = forwardRef(
     validationStatus: validationStatusProp,
     value: valueProp,
     variant = "primary",
-    defaultValue: defaultValueProp = "",
+    defaultValue: defaultValueProp,
     ...restProps
   }, ref) {
     const targetWindow = useWindow();
@@ -59,130 +83,145 @@ const NumberInput = forwardRef(
     const isDisabled = disabled || formFieldDisabled;
     const isReadOnly = readOnlyProp || formFieldReadOnly;
     const validationStatus = formFieldValidationStatus ?? validationStatusProp;
-    const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;
-    const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;
     const validationStatusId = useId(idProp);
     const inputRef = useRef(null);
     const handleInputRef = useForkRef(inputRefProp, inputRef);
-    const { IncreaseIcon, DecreaseIcon } = useIcon();
     const {
       "aria-describedby": inputDescribedBy,
       "aria-labelledby": inputLabelledBy,
       className: inputClassName,
       onBlur: inputOnBlur,
-      onChange: inputOnChange,
       onFocus: inputOnFocus,
       required: inputRequired,
       onKeyDown: inputOnKeyDown,
       ...restInputProps
     } = inputPropsProp;
     const isRequired = formFieldRequired ? ["required", "asterisk"].includes(formFieldRequired) : inputRequired;
-    const isAdjustingRef = useRef(false);
-    const [isEditing, setIsEditing] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
-    const [recordCaret, restoreCaret, resetCaret] = useCaret({
-      inputRef
-    });
+    const [isEditing, setIsEditing] = useState(false);
+    const { DecreaseIcon, IncreaseIcon } = useIcon();
     const [value, setValue] = useControlled({
-      controlled: valueProp,
-      default: defaultValue,
+      controlled: valueProp !== void 0 ? String(valueProp) : void 0,
+      default: String(defaultValueProp ?? ""),
       name: "NumberInput",
       state: "value"
     });
     const decimalScale = decimalScaleProp || Math.max(getNumberPrecision(value), getNumberPrecision(step));
-    const [displayValue, setDisplayValue] = useState(value);
-    const clampAndFix = (value2) => {
-      const clampedValue = clamp ? clampToRange(min, max, value2) : value2;
-      return !format ? clampedValue.toFixed(decimalScale) : clampedValue;
+    const defaultFormat = (value2) => {
+      const sanitized = value2.trim();
+      if (!sanitized.length) {
+        return "";
+      }
+      const floatValue2 = Number.parseFloat(sanitized);
+      const updatedValue = Number.isNaN(floatValue2) ? sanitized : floatValue2.toFixed(decimalScale);
+      return String(updatedValue);
     };
-    const {
-      decrementButtonProps,
-      decrementValue,
-      incrementButtonProps,
-      incrementValue
-    } = useNumberInput({
-      clampAndFix,
-      decimalScale,
-      disabled,
-      format,
-      inputRef,
-      isAdjustingRef,
-      max,
-      min,
-      onChange: onChangeProp,
-      parse,
-      readOnly: isReadOnly,
-      setIsEditing,
-      setValue,
-      step,
-      stepMultiplier,
-      value
-    });
-    useEffect(() => {
-      const formatValue = () => {
-        const sanitizedValue = sanitizeInput(value);
-        const floatValue = toFloat(sanitizedValue);
-        if (!isAdjustingRef.current && (isEditing || isEmpty(value) || Number.isNaN(floatValue) || isReadOnly)) {
-          return value;
-        }
-        if (isAdjustingRef.current) {
-          return clampAndFix(toFloat(value));
+    const defaultParse = (value2) => {
+      const sanitizedValue = value2.trim();
+      if (!sanitizedValue.length) {
+        return null;
+      }
+      if (sanitizedValue === "." || sanitizedValue === "+" || sanitizedValue === "-") {
+        return 0;
+      }
+      const floatString = Number.parseFloat(value2).toFixed(decimalScale);
+      return Number.parseFloat(floatString);
+    };
+    const format = formatProp ?? defaultFormat;
+    const parse = parseProp ?? defaultParse;
+    const lastCommitValue = useRef(value);
+    const commit = (event, newNumber, newInputValue) => {
+      let safeNumber = newNumber;
+      if (safeNumber !== null && !Number.isNaN(safeNumber)) {
+        safeNumber = Math.max(
+          Number.MIN_SAFE_INTEGER,
+          Math.min(Number.MAX_SAFE_INTEGER, safeNumber)
+        );
+        if (clamp) {
+          safeNumber = Math.max(min, Math.min(max, safeNumber));
         }
-        const clampedValue = clampAndFix(floatValue);
-        return format ? format(clampedValue) : clampedValue;
-      };
-      const updatedValue = formatValue();
-      setDisplayValue(updatedValue);
-    }, [value, isEditing, isReadOnly, format, clamp, decimalScale, min, max]);
-    useLayoutEffect(() => {
-      if (isAdjustingRef.current) {
-        resetCaret();
-      } else {
-        restoreCaret();
       }
-    }, [displayValue, value]);
-    const handleInputFocus = (event) => {
-      setIsFocused(true);
-      if (isReadOnly) return;
-      const parsedValue = (parse == null ? void 0 : parse(value)) ?? value;
-      const updatedValue = !isEmpty(parsedValue) ? clampAndFix(toFloat(parsedValue)) : parsedValue;
-      setDisplayValue(updatedValue);
-      inputOnFocus == null ? void 0 : inputOnFocus(event);
+      const commitValue = safeNumber !== null && !Number.isNaN(safeNumber) ? safeNumber.toFixed(decimalScale) : newInputValue;
+      if (commitValue !== value) {
+        setValue(commitValue);
+      }
+      if (lastCommitValue.current !== commitValue) {
+        onChange == null ? void 0 : onChange(event, commitValue);
+        onNumberChangeProp == null ? void 0 : onNumberChangeProp(event, safeNumber);
+      }
+      lastCommitValue.current = commitValue;
     };
-    const handleInputBlur = (event) => {
+    const handleBlur = (event) => {
       setIsFocused(false);
-      if (isReadOnly) return;
+      onBlur == null ? void 0 : onBlur(event);
+    };
+    const handleInputBlur = (event) => {
       setIsEditing(false);
-      isAdjustingRef.current = false;
-      resetCaret();
-      const inputValue = event.target.value;
-      if (isEmpty(inputValue)) {
+      inputOnBlur == null ? void 0 : inputOnBlur(event);
+      const parsedValue = parse(value);
+      commit(event, parsedValue, value);
+    };
+    const handleInputFocus = (event) => {
+      setIsEditing(false);
+      inputOnFocus == null ? void 0 : inputOnFocus(event);
+    };
+    const handleInputChange = (event) => {
+      const inputValue = event.currentTarget.value;
+      if (!inputValue.length) {
+        setValue("");
+        onChange == null ? void 0 : onChange(event, "");
         return;
       }
-      const sanitizedValue = sanitizeInput(event.target.value);
-      const floatValue = toFloat(sanitizedValue);
-      const clampedValue = clampAndFix(floatValue);
-      if (clampedValue.toString() !== value.toString()) {
-        setValue(clampedValue);
-        onChangeProp == null ? void 0 : onChangeProp(event, clampedValue);
+      const validValue = pattern ? pattern(inputValue) : true;
+      if (validValue) {
+        setIsEditing(true);
+        onChange == null ? void 0 : onChange(event, event.target.value);
+        setValue(inputValue);
+      } else {
+        event.preventDefault();
       }
-      const formattedValue = format ? format(clampedValue) : clampedValue;
-      setDisplayValue(formattedValue);
-      inputOnBlur == null ? void 0 : inputOnBlur(event);
     };
-    const handleInputChange = (event) => {
-      recordCaret();
-      const raw = sanitizeInput(event.target.value);
-      if (raw.toString() === value.toString()) {
+    const decrementValue = (event, block) => {
+      const decrementStep = (block ? stepMultiplier : 1) * step;
+      let adjustedValue = parse(value) ?? 0;
+      if (Number.isNaN(adjustedValue)) {
         return;
       }
-      const parsed = parse && !isEditing ? parse(raw) : raw;
-      setValue(parsed);
-      onChangeProp == null ? void 0 : onChangeProp(event, parsed);
+      adjustedValue -= decrementStep;
+      commit(event ?? null, adjustedValue, String(adjustedValue));
     };
+    let floatValue = parse(value) ?? 0;
+    floatValue = Math.max(
+      Number.MIN_SAFE_INTEGER,
+      Math.min(Number.MAX_SAFE_INTEGER, floatValue)
+    );
+    if (clamp) {
+      floatValue = Math.max(min, Math.min(max, floatValue));
+    }
+    const { activate: activateDecrement } = useActivateWhileMouseDown(
+      decrementValue,
+      floatValue <= min
+    );
+    const incrementValue = (event, block) => {
+      const incrementStep = (block ? stepMultiplier : 1) * step;
+      let adjustedValue = parse(value) ?? 0;
+      if (Number.isNaN(adjustedValue)) {
+        return;
+      }
+      adjustedValue += incrementStep;
+      commit(event ?? null, adjustedValue, String(adjustedValue));
+    };
+    useEffect(() => {
+      var _a;
+      if (isFocused) {
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+      }
+    }, [isFocused]);
+    const { activate: activateIncrement } = useActivateWhileMouseDown(
+      incrementValue,
+      floatValue >= max
+    );
     const handleInputKeyDown = (event) => {
-      setIsEditing(true);
-      isAdjustingRef.current = false;
       switch (event.key) {
         case "ArrowUp": {
           event.preventDefault();
@@ -198,14 +237,16 @@ const NumberInput = forwardRef(
         }
         case "Home": {
           event.preventDefault();
-          setValue(min);
-          onChangeProp == null ? void 0 : onChangeProp(event, min);
+          const newValue = String(min);
+          setValue(newValue);
+          commit(event, min, newValue);
           break;
         }
         case "End": {
           event.preventDefault();
-          setValue(max);
-          onChangeProp == null ? void 0 : onChangeProp(event, max);
+          const newValue = String(max);
+          setValue(newValue);
+          commit(event, max, newValue);
           break;
         }
         case "PageUp": {
@@ -221,9 +262,40 @@ const NumberInput = forwardRef(
       }
       inputOnKeyDown == null ? void 0 : inputOnKeyDown(event);
     };
-    const handleBeforeInput = () => {
-      setIsEditing(true);
+    const handleIncrementMouseDown = (event, disableIncrement2) => {
+      event.preventDefault();
+      if (!disableIncrement2) {
+        setIsEditing(false);
+        activateIncrement(event);
+      } else if (inputRef.current) {
+        inputRef.current.select();
+      }
+    };
+    const handleDecrementMouseDown = (event, disableDecrement2) => {
+      event.preventDefault();
+      if (!disableDecrement2) {
+        setIsEditing(false);
+        activateDecrement(event);
+      } else if (inputRef.current) {
+        inputRef.current.select();
+      }
     };
+    const handleContainerMouseUp = (event) => {
+      setIsFocused(true);
+      onMouseUp == null ? void 0 : onMouseUp(event);
+    };
+    let renderedValue;
+    if (isEditing) {
+      renderedValue = value;
+    } else if (!(value == null ? void 0 : value.length)) {
+      renderedValue = "";
+    } else {
+      renderedValue = format(
+        Number.isNaN(floatValue) ? value : String(floatValue)
+      );
+    }
+    const disableDecrement = disabled || floatValue - step < min;
+    const disableIncrement = disabled || floatValue + step > max;
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -240,6 +312,8 @@ const NumberInput = forwardRef(
           },
           classNameProp
         ),
+        onBlur: handleBlur,
+        onMouseUp: handleContainerMouseUp,
         ...restProps,
         ref,
         children: [
@@ -247,17 +321,9 @@ const NumberInput = forwardRef(
           /* @__PURE__ */ jsx(
             "input",
             {
-              "aria-describedby": clsx(
-                validationStatusId,
-                formFieldDescribedBy,
-                inputDescribedBy
-              ),
-              "aria-labelledby": clsx(formFieldLabelledBy, inputLabelledBy),
-              "aria-invalid": !isReadOnly ? isOutOfRange(value, min, max) || validationStatus === "error" : void 0,
-              "aria-valuemax": !isReadOnly ? max : void 0,
-              "aria-valuemin": !isReadOnly ? min : void 0,
-              "aria-valuenow": value && !Number.isNaN(toFloat(value)) && !isReadOnly ? toFloat((parse == null ? void 0 : parse(value)) || value) : void 0,
-              ...!isReadOnly && { "aria-valuetext": value.toString() },
+              "aria-describedby": clsx(formFieldDescribedBy, inputDescribedBy) || void 0,
+              "aria-labelledby": clsx(formFieldLabelledBy, inputLabelledBy) || void 0,
+              "aria-invalid": !isReadOnly && renderedValue.length ? isOutOfRange(floatValue, min, max) || validationStatus === "error" : void 0,
               className: clsx(
                 withBaseName("input"),
                 withBaseName(`inputTextAlign${capitalize(textAlign)}`),
@@ -267,16 +333,19 @@ const NumberInput = forwardRef(
               onBlur: handleInputBlur,
               onChange: handleInputChange,
               onFocus: handleInputFocus,
-              onKeyDown: handleInputKeyDown,
-              onBeforeInput: handleBeforeInput,
+              onKeyDown: isReadOnly ? void 0 : handleInputKeyDown,
               placeholder,
               readOnly: isReadOnly,
               "aria-readonly": isReadOnly ? "true" : void 0,
               ref: handleInputRef,
               required: isRequired,
+              "aria-valuemax": !isReadOnly && renderedValue.length ? max : void 0,
+              "aria-valuemin": !isReadOnly && renderedValue.length ? min : void 0,
+              "aria-valuenow": !isReadOnly ? floatValue : void 0,
+              "aria-valuetext": !isReadOnly ? renderedValue.length ? ariaValueTextProp ?? renderedValue : "Empty" : void 0,
               role: isReadOnly ? "textbox" : "spinbutton",
               tabIndex: isDisabled ? -1 : 0,
-              value: displayValue,
+              value: isReadOnly && renderedValue.length === 0 ? emptyReadOnlyMarker : renderedValue,
               ...restInputProps
             }
           ),
@@ -287,24 +356,24 @@ const NumberInput = forwardRef(
             /* @__PURE__ */ jsx(
               Button,
               {
-                className: clsx(
-                  withBaseName("numberButton"),
-                  withBaseName("numberButtonIncrement")
-                ),
+                "aria-hidden": true,
                 appearance: "transparent",
-                ...incrementButtonProps,
+                tabIndex: -1,
+                disabled: disableIncrement,
+                className: withBaseName("increment"),
+                onMouseDown: (event) => handleIncrementMouseDown(event, disableIncrement),
                 children: /* @__PURE__ */ jsx(IncreaseIcon, { "aria-hidden": true })
               }
             ),
             /* @__PURE__ */ jsx(
               Button,
               {
-                className: clsx(
-                  withBaseName("numberButton"),
-                  withBaseName("numberButtonDecrement")
-                ),
+                "aria-hidden": true,
                 appearance: "transparent",
-                ...decrementButtonProps,
+                tabIndex: -1,
+                disabled: disableDecrement,
+                className: withBaseName("decrement"),
+                onMouseDown: (event) => handleDecrementMouseDown(event, disableDecrement),
                 children: /* @__PURE__ */ jsx(DecreaseIcon, { "aria-hidden": true })
               }
             )
@@ -315,5 +384,5 @@ const NumberInput = forwardRef(
   }
 );
 
-export { NumberInput };
+export { NumberInput, isOutOfRange };
 //# sourceMappingURL=NumberInput.js.map