@salt-ds/lab 1.0.0-alpha.61 → 1.0.0-alpha.63

package/dist-es/date-picker/useKeyboard.js

@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+
+function useKeyboard(context, props) {
+  const { onOpenChange } = context;
+  const { enabled = true } = props;
+  const reference = useMemo(
+    () => ({
+      onKeyDown(event) {
+        if (event.key === "ArrowDown") {
+          event.preventDefault();
+          onOpenChange(true, event.nativeEvent, "reference-press");
+        }
+      }
+    }),
+    [onOpenChange]
+  );
+  return useMemo(() => enabled ? { reference } : {}, [enabled, reference]);
+}
+
+export { useKeyboard };
+//# sourceMappingURL=useKeyboard.js.map

package/dist-es/date-picker/useKeyboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboard.js","sources":["../src/date-picker/useKeyboard.ts"],"sourcesContent":["import type { ElementProps, FloatingContext } from \"@floating-ui/react\";\nimport { useMemo } from \"react\";\n\nexport interface UseKeyboardProps {\n  /**\n   * Whether the hook is enabled\n   * @default true\n   */\n  enabled?: boolean;\n}\n\n/**\n * Floating UI Interactions hook, that will open DatePicker on keydown\n * @param context\n * @param props\n */\nexport function useKeyboard(\n  context: FloatingContext,\n  props: UseKeyboardProps,\n): ElementProps {\n  const { onOpenChange } = context;\n  const { enabled = true } = props;\n  const reference: ElementProps[\"reference\"] = useMemo(\n    () => ({\n      onKeyDown(event) {\n        if (event.key === \"ArrowDown\") {\n          event.preventDefault();\n          onOpenChange(true, event.nativeEvent, \"reference-press\");\n        }\n      },\n    }),\n    [onOpenChange],\n  );\n\n  return useMemo(() => (enabled ? { reference } : {}), [enabled, reference]);\n}\n"],"names":[],"mappings":";;AAgBgB,SAAA,WAAA,CACd,SACA,KACc,EAAA;AACd,EAAM,MAAA,EAAE,cAAiB,GAAA,OAAA;AACzB,EAAM,MAAA,EAAE,OAAU,GAAA,IAAA,EAAS,GAAA,KAAA;AAC3B,EAAA,MAAM,SAAuC,GAAA,OAAA;AAAA,IAC3C,OAAO;AAAA,MACL,UAAU,KAAO,EAAA;AACf,QAAI,IAAA,KAAA,CAAM,QAAQ,WAAa,EAAA;AAC7B,UAAA,KAAA,CAAM,cAAe,EAAA;AACrB,UAAa,YAAA,CAAA,IAAA,EAAM,KAAM,CAAA,WAAA,EAAa,iBAAiB,CAAA;AAAA;AACzD;AACF,KACF,CAAA;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAO,OAAA,OAAA,CAAQ,MAAO,OAAA,GAAU,EAAE,SAAA,EAAc,GAAA,EAAK,EAAA,CAAC,OAAS,EAAA,SAAS,CAAC,CAAA;AAC3E;;;;"}

package/dist-es/index.js

@@ -63,6 +63,7 @@ export { DatePicker, DatePickerMain } from './date-picker/DatePicker.js';
 export { DatePickerActions } from './date-picker/DatePickerActions.js';
 export { DateRangeSelectionContext, SingleDateSelectionContext, useDatePickerContext } from './date-picker/DatePickerContext.js';
 export { DatePickerOverlay } from './date-picker/DatePickerOverlay.js';
+export { DatePickerOverlayProvider, useDatePickerOverlay } from './date-picker/DatePickerOverlayProvider.js';
 export { DatePickerRangeInput, defaultRangeValidator } from './date-picker/DatePickerRangeInput.js';
 export { DatePickerRangePanel } from './date-picker/DatePickerRangePanel.js';
 export { DatePickerSingleInput } from './date-picker/DatePickerSingleInput.js';
@@ -76,10 +77,10 @@ export { DropdownButton } from './dropdown/DropdownButton.js';
 export { Dropdown } from './dropdown/Dropdown.js';
 export { useDropdownBase } from './dropdown/useDropdownBase.js';
 export { EditableLabel } from './editable-label/EditableLabel.js';
-export { FormFieldLegacy as FormField } from './form-field-legacy/FormFieldLegacy.js';
-export { FormLabel } from './form-field-legacy/FormLabel.js';
 export { FormFieldLegacyContext } from './form-field-context-legacy/FormFieldLegacyContext.js';
 export { useFormFieldLegacyProps } from './form-field-context-legacy/useFormFieldLegacyProps.js';
+export { FormFieldLegacy as FormField } from './form-field-legacy/FormFieldLegacy.js';
+export { FormLabel } from './form-field-legacy/FormLabel.js';
 export { FormGroup } from './form-group/FormGroup.js';
 export { FormattedInput } from './formatted-input/FormattedInput.js';
 export { InputLegacy as Input } from './input-legacy/InputLegacy.js';
@@ -102,6 +103,8 @@ export { MenuButton } from './menu-button/MenuButton.js';
 export { Metric } from './metric/Metric.js';
 export { MetricHeader } from './metric/MetricHeader.js';
 export { MetricContent } from './metric/MetricContent.js';
+export { useNumberInput } from './number-input/useNumberInput.js';
+export { NumberInput } from './number-input/NumberInput.js';
 export { OverlayHeader } from './overlay/OverlayHeader.js';
 export { Portal } from './portal/Portal.js';
 export { QueryInput } from './query-input/QueryInput.js';
@@ -118,14 +121,16 @@ export { DropdownPlaceholder, NO_DATA, addAll, allExceptOverflowIndicator, byDes
 export { isResponsiveAttribute, liftResponsivePropsToFormField } from './responsive/utils.js';
 export { SearchInput } from './search-input/SearchInput.js';
 export { Slider } from './slider/Slider.js';
+export { RangeSlider } from './slider/RangeSlider.js';
+export { Splitter } from './splitter/Splitter.js';
+export { SplitPanel } from './splitter/SplitPanel.js';
+export { SplitHandle } from './splitter/SplitHandle.js';
 export { StaticList } from './static-list/StaticList.js';
 export { StaticListItem } from './static-list/StaticListItem.js';
 export { StaticListItemContent } from './static-list/StaticListItemContent.js';
 export { SteppedTracker } from './stepped-tracker/SteppedTracker.js';
 export { Step } from './stepped-tracker/Step.js';
 export { useStepReducer } from './stepped-tracker/useStepReducer.js';
-export { useStepperInput } from './stepper-input/useStepperInput.js';
-export { StepperInput } from './stepper-input/StepperInput.js';
 export { SystemStatus } from './system-status/SystemStatus.js';
 export { SystemStatusContent } from './system-status/SystemStatusContent.js';
 export { SystemStatusActions } from './system-status/SystemStatusActions.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

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to number container */\n.saltNumberInput {\n  --numberInput-border: none;\n  --numberInput-borderColor: var(--salt-editable-borderColor);\n  --numberInput-borderStyle: var(--salt-editable-borderStyle);\n  --numberInput-outlineColor: var(--salt-focused-outlineColor);\n  --numberInput-borderWidth: var(--salt-size-border);\n\n  align-items: center;\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  height: var(--salt-size-base);\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  width: 100%;\n  box-sizing: border-box;\n\n  gap: var(--salt-spacing-50);\n}\n\n.saltNumberInput:hover {\n  --numberInput-borderStyle: var(--salt-editable-borderStyle-hover);\n  --numberInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--numberInput-background-hover);\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltNumberInput:active {\n  --numberInput-borderColor: var(--salt-editable-borderColor-active);\n  --numberInput-borderStyle: var(--salt-editable-borderStyle-active);\n  --numberInput-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--numberInput-background-active);\n  cursor: var(--salt-editable-cursor-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.saltNumberInput-inputContainer {\n  display: flex;\n  background: var(--numberInput-background);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  border: var(--numberInput-border);\n  box-sizing: border-box;\n  height: var(--salt-size-base);\n  min-height: var(--salt-size-base);\n  overflow: hidden;\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  position: relative;\n  flex-grow: 1;\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  height: 100%;\n  letter-spacing: var(--saltNumberInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\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 selected input */\n.saltNumberInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\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-editable-borderWidth-active);\n\n  outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltNumberInput-readOnly {\n  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --numberInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --numberInput-borderWidth: var(--salt-size-border);\n\n  background: var(--numberInput-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltNumberInput-focused.saltNumberInput-disabled {\n  --numberInput-borderWidth: var(--salt-size-border);\n  outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltNumberInput-focused.saltNumberInput-readOnly {\n  --numberInput-borderWidth: var(--salt-size-border);\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-editable-borderStyle-disabled);\n  --numberInput-borderWidth: var(--salt-size-border);\n\n  background: var(--numberInput-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltNumberInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--numberInput-borderWidth) var(--numberInput-borderStyle) var(--numberInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltNumberInput-bordered {\n  --numberInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--numberInput-borderColor);\n  --numberInput-borderWidth: 0;\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-editable-borderWidth-active);\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/* 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-readOnly .saltNumberInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltNumberInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltNumberInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltNumberInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: 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(--salt-size-border));\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  text-align: left;\n}\n\n.saltNumberInput-inputTextAlignCenter {\n  text-align: center;\n}\n\n.saltNumberInput-inputTextAlignRight {\n  text-align: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to number buttons container */\n.saltNumberInput-buttonContainer {\n  --numberInput-buttonGap: var(--salt-size-border-strong);\n  display: flex;\n  flex-direction: column;\n  gap: var(--numberInput-buttonGap);\n}\n\n/* Styles applied to number buttons */\n.saltNumberInput-numberButton {\n  --saltButton-height: calc((var(--salt-size-base) - var(--numberInput-buttonGap)) * 0.5);\n  --saltButton-width: var(--salt-size-base);\n}\n\n.saltNumberInput-numberButtonIncrement {\n  --saltButton-borderRadius: var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0 0;\n}\n.saltNumberInput-numberButtonDecrement {\n  --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=NumberInput.css.js.map

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

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

package/dist-es/{stepper-input/StepperInput.js → number-input/NumberInput.js}

@@ -5,12 +5,12 @@ import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
 import { forwardRef, useState, useRef } from 'react';
 import { toFixedDecimalPlaces, isOutOfRange, toFloat, isAllowedNonNumeric, sanitizedInput } from './internal/utils.js';
-import css_248z from './StepperInput.css.js';
-import { useStepperInput } from './useStepperInput.js';
+import css_248z from './NumberInput.css.js';
+import { useNumberInput } from './useNumberInput.js';
 
-const withBaseName = makePrefixer("saltStepperInput");
-const StepperInput = forwardRef(
-  function StepperInput2({
+const withBaseName = makePrefixer("saltNumberInput");
+const NumberInput = forwardRef(
+  function NumberInput2({
     bordered,
     className: classNameProp,
     decimalPlaces = 0,
@@ -37,7 +37,7 @@ const StepperInput = forwardRef(
   }, ref) {
     const targetWindow = useWindow();
     useComponentCssInjection({
-      testId: "salt-stepper-input",
+      testId: "salt-number-input",
       css: css_248z,
       window: targetWindow
     });
@@ -70,7 +70,7 @@ const StepperInput = forwardRef(
     const [value, setValue] = useControlled({
       controlled: valueProp,
       default: typeof defaultValueProp === "number" ? toFixedDecimalPlaces(defaultValueProp, decimalPlaces) : defaultValueProp,
-      name: "StepperInput",
+      name: "NumberInput",
       state: "value"
     });
     const [focused, setFocused] = useState(false);
@@ -81,7 +81,7 @@ const StepperInput = forwardRef(
       decrementValue,
       incrementButtonProps,
       incrementValue
-    } = useStepperInput({
+    } = useNumberInput({
       inputRef,
       setValue,
       decimalPlaces,
@@ -223,8 +223,8 @@ const StepperInput = forwardRef(
               Button,
               {
                 className: clsx(
-                  withBaseName("stepperButton"),
-                  withBaseName("stepperButtonIncrement")
+                  withBaseName("numberButton"),
+                  withBaseName("numberButtonIncrement")
                 ),
                 ...incrementButtonProps,
                 children: /* @__PURE__ */ jsx(IncreaseIcon, { "aria-hidden": true })
@@ -234,8 +234,8 @@ const StepperInput = forwardRef(
               Button,
               {
                 className: clsx(
-                  withBaseName("stepperButton"),
-                  withBaseName("stepperButtonDecrement")
+                  withBaseName("numberButton"),
+                  withBaseName("numberButtonDecrement")
                 ),
                 ...decrementButtonProps,
                 children: /* @__PURE__ */ jsx(DecreaseIcon, { "aria-hidden": true })
@@ -248,5 +248,5 @@ const StepperInput = forwardRef(
   }
 );
 
-export { StepperInput };
-//# sourceMappingURL=StepperInput.js.map
+export { NumberInput };
+//# sourceMappingURL=NumberInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.js","sources":["../src/number-input/NumberInput.tsx"],"sourcesContent":["import {\n  Button,\n  StatusAdornment,\n  type ValidationStatus,\n  capitalize,\n  makePrefixer,\n  useControlled,\n  useForkRef,\n  useFormFieldProps,\n  useIcon,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  forwardRef,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  isAllowedNonNumeric,\n  isOutOfRange,\n  sanitizedInput,\n  toFixedDecimalPlaces,\n  toFloat,\n} from \"./internal/utils\";\n\nimport numberInputCss from \"./NumberInput.css\";\nimport { useNumberInput } from \"./useNumberInput\";\n\nconst withBaseName = makePrefixer(\"saltNumberInput\");\n\nexport interface NumberInputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * A boolean. When `true`, the input will receive a full border.\n   */\n  bordered?: boolean;\n  /**\n   * The number of decimal places to display.\n   */\n  decimalPlaces?: number;\n  /**\n   * Sets the initial default value of the component.\n   */\n  defaultValue?: number | string;\n  /**\n   * If `true`, the number input will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The marker to use in an empty read only Input.\n   * Use `''` to disable this feature. Defaults to '—'.\n   * @default '—'\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * End adornment component\n   */\n  endAdornment?: ReactNode;\n  /**\n   * Whether to hide the number buttons. Defaults to `false`.\n   * @default false\n   */\n  hideButtons?: boolean;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n   */\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * The maximum value that can be selected. Defaults to Number.MAX_SAFE_INTEGER.\n   * @default Number.MAX_SAFE_INTEGER\n   */\n  max?: number;\n  /**\n   * The minimum value that can be selected. Defaults to Number.MIN_SAFE_INTEGER.\n   * @default Number.MIN_SAFE_INTEGER\n   */\n  min?: number;\n  /**\n   * Callback when number input value is changed.\n   * @param event - the event triggers value change, could be undefined during increment / decrement button long press\n   */\n  onChange?: (\n    event: SyntheticEvent | undefined,\n    value: number | string,\n  ) => void;\n  /**\n   * A string. Displayed in a dimmed color when the input value is empty.\n   */\n  placeholder?: string | undefined;\n  /**\n   * A boolean. If `true`, the component is not editable by the user.\n   */\n  readOnly?: boolean;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * The amount to increment or decrement the value by when using the number buttons or Up Arrow and Down Arrow keys. Default to 1.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * The amount to change the value when the value is incremented or decremented by holding Shift and pressing Up arrow or Down arrow keys.\n   * Defaults to 10.\n   * @default 10\n   */\n  stepBlock?: number;\n  /**\n   * Alignment of text within container. Defaults to \"left\".\n   * @default \"left\"\n   */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /**\n   * Validation status.\n   */\n  validationStatus?: Extract<ValidationStatus, \"error\" | \"warning\" | \"success\">;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   * @default \"primary\"\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * The value of the number input. The component will be controlled if this prop is provided.\n   */\n  value?: number | string | undefined;\n}\n\nexport const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(\n  function NumberInput(\n    {\n      bordered,\n      className: classNameProp,\n      decimalPlaces = 0,\n      defaultValue: defaultValueProp,\n      disabled,\n      emptyReadOnlyMarker = \"—\",\n      endAdornment,\n      hideButtons,\n      inputProps: inputPropsProp = {},\n      inputRef: inputRefProp,\n      max = Number.MAX_SAFE_INTEGER,\n      min = Number.MIN_SAFE_INTEGER,\n      onChange: onChangeProp,\n      placeholder,\n      readOnly: readOnlyProp,\n      startAdornment,\n      step = 1,\n      stepBlock = 10,\n      textAlign = \"left\",\n      validationStatus: validationStatusProp,\n      value: valueProp,\n      variant = \"primary\",\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-number-input\",\n      css: numberInputCss,\n      window: targetWindow,\n    });\n\n    const { IncreaseIcon, DecreaseIcon } = useIcon();\n\n    const {\n      a11yProps: {\n        \"aria-describedby\": formFieldDescribedBy,\n        \"aria-labelledby\": formFieldLabelledBy,\n      } = {},\n      disabled: formFieldDisabled,\n      readOnly: formFieldReadOnly,\n      necessity: formFieldRequired,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const isDisabled = disabled || formFieldDisabled;\n    const isReadOnly = readOnlyProp || formFieldReadOnly;\n    const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n    const {\n      \"aria-describedby\": inputDescribedBy,\n      \"aria-labelledby\": inputLabelledBy,\n      className: inputClassName,\n      onBlur: inputOnBlur,\n      onChange: inputOnChange,\n      onFocus: inputOnFocus,\n      required: inputRequired,\n      onKeyDown: inputOnKeyDown,\n      ...restInputProps\n    } = inputPropsProp;\n\n    const isRequired = formFieldRequired\n      ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n      : inputRequired;\n\n    const [value, setValue] = useControlled({\n      controlled: valueProp,\n      default:\n        typeof defaultValueProp === \"number\"\n          ? toFixedDecimalPlaces(defaultValueProp, decimalPlaces)\n          : defaultValueProp,\n      name: \"NumberInput\",\n      state: \"value\",\n    });\n\n    // Won't be needed when `:has` css can be used\n    const [focused, setFocused] = useState(false);\n\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const forkedInputRef = useForkRef(inputRef, inputRefProp);\n\n    const {\n      decrementButtonProps,\n      decrementValue,\n      incrementButtonProps,\n      incrementValue,\n    } = useNumberInput({\n      inputRef,\n      setValue,\n      decimalPlaces,\n      disabled,\n      max,\n      min,\n      onChange: onChangeProp,\n      readOnly: isReadOnly,\n      step,\n      stepBlock,\n      value,\n    });\n\n    const handleInputFocus = (event: FocusEvent<HTMLInputElement>) => {\n      setFocused(true);\n\n      inputOnFocus?.(event);\n    };\n\n    const handleInputBlur = (event: FocusEvent<HTMLInputElement>) => {\n      setFocused(false);\n\n      if (value === undefined) return;\n\n      const floatValue = toFloat(value);\n      if (Number.isNaN(floatValue)) {\n        // Keep original value if NaN\n        setValue(value);\n        onChangeProp?.(event, value);\n      } else {\n        const roundedValue = toFixedDecimalPlaces(floatValue, decimalPlaces);\n\n        if (value !== \"\" && !isAllowedNonNumeric(value)) {\n          setValue(roundedValue);\n        }\n\n        onChangeProp?.(event, roundedValue);\n      }\n\n      inputOnBlur?.(event);\n    };\n\n    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n      const changedValue = event.target.value;\n\n      setValue(sanitizedInput(changedValue));\n\n      onChangeProp?.(event, sanitizedInput(changedValue));\n      inputOnChange?.(event);\n    };\n\n    const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n      switch (event.key) {\n        case \"ArrowUp\": {\n          event.preventDefault();\n          const block = event.shiftKey;\n          incrementValue(event, block);\n          break;\n        }\n        case \"ArrowDown\": {\n          event.preventDefault();\n          const block = event.shiftKey;\n          decrementValue(event, block);\n          break;\n        }\n        case \"Home\": {\n          event.preventDefault();\n          setValue(min);\n          onChangeProp?.(event, min);\n          break;\n        }\n        case \"End\": {\n          event.preventDefault();\n          setValue(max);\n          onChangeProp?.(event, max);\n          break;\n        }\n        case \"PageUp\": {\n          event.preventDefault();\n          incrementValue(event, true);\n          break;\n        }\n        case \"PageDown\": {\n          event.preventDefault();\n          decrementValue(event, true);\n          break;\n        }\n      }\n\n      inputOnKeyDown?.(event);\n    };\n\n    return (\n      <div\n        className={clsx(withBaseName(), classNameProp)}\n        {...restProps}\n        ref={ref}\n      >\n        <div\n          className={clsx(\n            withBaseName(\"inputContainer\"),\n            withBaseName(variant),\n            {\n              [withBaseName(\"focused\")]: !isDisabled && focused,\n              [withBaseName(\"disabled\")]: isDisabled,\n              [withBaseName(\"readOnly\")]: isReadOnly,\n              [withBaseName(validationStatus || \"\")]: validationStatus,\n              [withBaseName(\"bordered\")]: bordered,\n            },\n          )}\n        >\n          {startAdornment && (\n            <div className={withBaseName(\"startAdornmentContainer\")}>\n              {startAdornment}\n            </div>\n          )}\n          <input\n            aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n            aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n            aria-invalid={\n              !isReadOnly ? isOutOfRange(value, min, max) : undefined\n            }\n            aria-valuemax={\n              !isReadOnly\n                ? toFloat(toFixedDecimalPlaces(max, decimalPlaces))\n                : undefined\n            }\n            aria-valuemin={\n              !isReadOnly\n                ? toFloat(toFixedDecimalPlaces(min, decimalPlaces))\n                : undefined\n            }\n            aria-valuenow={\n              value && !Number.isNaN(toFloat(value)) && !isReadOnly\n                ? toFloat(toFixedDecimalPlaces(toFloat(value), decimalPlaces))\n                : undefined\n            }\n            className={clsx(\n              withBaseName(\"input\"),\n              withBaseName(`inputTextAlign${capitalize(textAlign)}`),\n              inputClassName,\n            )}\n            disabled={isDisabled}\n            onBlur={handleInputBlur}\n            onChange={handleInputChange}\n            onFocus={!isDisabled ? handleInputFocus : undefined}\n            onKeyDown={handleInputKeyDown}\n            placeholder={placeholder}\n            readOnly={isReadOnly}\n            aria-readonly={isReadOnly ? \"true\" : undefined}\n            ref={forkedInputRef}\n            required={isRequired}\n            // Workaround to have readonly conveyed by screen readers (https://github.com/jpmorganchase/salt-ds/issues/4586)\n            role={isReadOnly ? \"textbox\" : \"spinbutton\"}\n            tabIndex={isDisabled ? -1 : 0}\n            value={value}\n            {...restInputProps}\n          />\n          {!isDisabled && validationStatus && (\n            <StatusAdornment status={validationStatus} />\n          )}\n          {endAdornment && (\n            <div className={withBaseName(\"endAdornmentContainer\")}>\n              {endAdornment}\n            </div>\n          )}\n          <div className={withBaseName(\"activationIndicator\")} />\n        </div>\n\n        {!hideButtons && !isReadOnly && (\n          <div className={withBaseName(\"buttonContainer\")}>\n            <Button\n              className={clsx(\n                withBaseName(\"numberButton\"),\n                withBaseName(\"numberButtonIncrement\"),\n              )}\n              {...incrementButtonProps}\n            >\n              <IncreaseIcon aria-hidden />\n            </Button>\n            <Button\n              className={clsx(\n                withBaseName(\"numberButton\"),\n                withBaseName(\"numberButtonDecrement\"),\n              )}\n              {...decrementButtonProps}\n            >\n              <DecreaseIcon aria-hidden />\n            </Button>\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["NumberInput","numberInputCss"],"mappings":";;;;;;;;;;AAsCA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA;AAwG5C,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,aAAgB,GAAA,CAAA;AAAA,IAChB,YAAc,EAAA,gBAAA;AAAA,IACd,QAAA;AAAA,IACA,mBAAsB,GAAA,QAAA;AAAA,IACtB,YAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA,EAAY,iBAAiB,EAAC;AAAA,IAC9B,QAAU,EAAA,YAAA;AAAA,IACV,MAAM,MAAO,CAAA,gBAAA;AAAA,IACb,MAAM,MAAO,CAAA,gBAAA;AAAA,IACb,QAAU,EAAA,YAAA;AAAA,IACV,WAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,cAAA;AAAA,IACA,IAAO,GAAA,CAAA;AAAA,IACP,SAAY,GAAA,EAAA;AAAA,IACZ,SAAY,GAAA,MAAA;AAAA,IACZ,gBAAkB,EAAA,oBAAA;AAAA,IAClB,KAAO,EAAA,SAAA;AAAA,IACP,OAAU,GAAA,SAAA;AAAA,IACV,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,YAAA,EAAc,YAAa,EAAA,GAAI,OAAQ,EAAA;AAE/C,IAAM,MAAA;AAAA,MACJ,SAAW,EAAA;AAAA,QACT,kBAAoB,EAAA,oBAAA;AAAA,QACpB,iBAAmB,EAAA;AAAA,UACjB,EAAC;AAAA,MACL,QAAU,EAAA,iBAAA;AAAA,MACV,QAAU,EAAA,iBAAA;AAAA,MACV,SAAW,EAAA,iBAAA;AAAA,MACX,gBAAkB,EAAA;AAAA,QAChB,iBAAkB,EAAA;AAEtB,IAAA,MAAM,aAAa,QAAY,IAAA,iBAAA;AAC/B,IAAA,MAAM,aAAa,YAAgB,IAAA,iBAAA;AACnC,IAAA,MAAM,mBAAmB,yBAA6B,IAAA,oBAAA;AAEtD,IAAM,MAAA;AAAA,MACJ,kBAAoB,EAAA,gBAAA;AAAA,MACpB,iBAAmB,EAAA,eAAA;AAAA,MACnB,SAAW,EAAA,cAAA;AAAA,MACX,MAAQ,EAAA,WAAA;AAAA,MACR,QAAU,EAAA,aAAA;AAAA,MACV,OAAS,EAAA,YAAA;AAAA,MACT,QAAU,EAAA,aAAA;AAAA,MACV,SAAW,EAAA,cAAA;AAAA,MACX,GAAG;AAAA,KACD,GAAA,cAAA;AAEJ,IAAM,MAAA,UAAA,GAAa,oBACf,CAAC,UAAA,EAAY,UAAU,CAAE,CAAA,QAAA,CAAS,iBAAiB,CACnD,GAAA,aAAA;AAEJ,IAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,aAAc,CAAA;AAAA,MACtC,UAAY,EAAA,SAAA;AAAA,MACZ,SACE,OAAO,gBAAA,KAAqB,WACxB,oBAAqB,CAAA,gBAAA,EAAkB,aAAa,CACpD,GAAA,gBAAA;AAAA,MACN,IAAM,EAAA,aAAA;AAAA,MACN,KAAO,EAAA;AAAA,KACR,CAAA;AAGD,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAE5C,IAAM,MAAA,QAAA,GAAW,OAAgC,IAAI,CAAA;AACrD,IAAM,MAAA,cAAA,GAAiB,UAAW,CAAA,QAAA,EAAU,YAAY,CAAA;AAExD,IAAM,MAAA;AAAA,MACJ,oBAAA;AAAA,MACA,cAAA;AAAA,MACA,oBAAA;AAAA,MACA;AAAA,QACE,cAAe,CAAA;AAAA,MACjB,QAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAA;AAAA,MACA,GAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,QAAU,EAAA,UAAA;AAAA,MACV,IAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAM,MAAA,gBAAA,GAAmB,CAAC,KAAwC,KAAA;AAChE,MAAA,UAAA,CAAW,IAAI,CAAA;AAEf,MAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA;AAAA,KACjB;AAEA,IAAM,MAAA,eAAA,GAAkB,CAAC,KAAwC,KAAA;AAC/D,MAAA,UAAA,CAAW,KAAK,CAAA;AAEhB,MAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AAEzB,MAAM,MAAA,UAAA,GAAa,QAAQ,KAAK,CAAA;AAChC,MAAI,IAAA,MAAA,CAAO,KAAM,CAAA,UAAU,CAAG,EAAA;AAE5B,QAAA,QAAA,CAAS,KAAK,CAAA;AACd,QAAA,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAe,KAAO,EAAA,KAAA,CAAA;AAAA,OACjB,MAAA;AACL,QAAM,MAAA,YAAA,GAAe,oBAAqB,CAAA,UAAA,EAAY,aAAa,CAAA;AAEnE,QAAA,IAAI,KAAU,KAAA,EAAA,IAAM,CAAC,mBAAA,CAAoB,KAAK,CAAG,EAAA;AAC/C,UAAA,QAAA,CAAS,YAAY,CAAA;AAAA;AAGvB,QAAA,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAe,KAAO,EAAA,YAAA,CAAA;AAAA;AAGxB,MAAc,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,KAAA,CAAA;AAAA,KAChB;AAEA,IAAM,MAAA,iBAAA,GAAoB,CAAC,KAAyC,KAAA;AAClE,MAAM,MAAA,YAAA,GAAe,MAAM,MAAO,CAAA,KAAA;AAElC,MAAS,QAAA,CAAA,cAAA,CAAe,YAAY,CAAC,CAAA;AAErC,MAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,EAAO,eAAe,YAAY,CAAA,CAAA;AACjD,MAAgB,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,KAAA,CAAA;AAAA,KAClB;AAEA,IAAM,MAAA,kBAAA,GAAqB,CAAC,KAA2C,KAAA;AACrE,MAAA,QAAQ,MAAM,GAAK;AAAA,QACjB,KAAK,SAAW,EAAA;AACd,UAAA,KAAA,CAAM,cAAe,EAAA;AACrB,UAAA,MAAM,QAAQ,KAAM,CAAA,QAAA;AACpB,UAAA,cAAA,CAAe,OAAO,KAAK,CAAA;AAC3B,UAAA;AAAA;AACF,QACA,KAAK,WAAa,EAAA;AAChB,UAAA,KAAA,CAAM,cAAe,EAAA;AACrB,UAAA,MAAM,QAAQ,KAAM,CAAA,QAAA;AACpB,UAAA,cAAA,CAAe,OAAO,KAAK,CAAA;AAC3B,UAAA;AAAA;AACF,QACA,KAAK,MAAQ,EAAA;AACX,UAAA,KAAA,CAAM,cAAe,EAAA;AACrB,UAAA,QAAA,CAAS,GAAG,CAAA;AACZ,UAAA,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAe,KAAO,EAAA,GAAA,CAAA;AACtB,UAAA;AAAA;AACF,QACA,KAAK,KAAO,EAAA;AACV,UAAA,KAAA,CAAM,cAAe,EAAA;AACrB,UAAA,QAAA,CAAS,GAAG,CAAA;AACZ,UAAA,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAe,KAAO,EAAA,GAAA,CAAA;AACtB,UAAA;AAAA;AACF,QACA,KAAK,QAAU,EAAA;AACb,UAAA,KAAA,CAAM,cAAe,EAAA;AACrB,UAAA,cAAA,CAAe,OAAO,IAAI,CAAA;AAC1B,UAAA;AAAA;AACF,QACA,KAAK,UAAY,EAAA;AACf,UAAA,KAAA,CAAM,cAAe,EAAA;AACrB,UAAA,cAAA,CAAe,OAAO,IAAI,CAAA;AAC1B,UAAA;AAAA;AACF;AAGF,MAAiB,cAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,cAAA,CAAA,KAAA,CAAA;AAAA,KACnB;AAEA,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,aAAa,CAAA;AAAA,QAC5C,GAAG,SAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAW,EAAA,IAAA;AAAA,gBACT,aAAa,gBAAgB,CAAA;AAAA,gBAC7B,aAAa,OAAO,CAAA;AAAA,gBACpB;AAAA,kBACE,CAAC,YAAa,CAAA,SAAS,CAAC,GAAG,CAAC,UAAc,IAAA,OAAA;AAAA,kBAC1C,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAA;AAAA,kBAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAA;AAAA,kBAC5B,CAAC,YAAA,CAAa,gBAAoB,IAAA,EAAE,CAAC,GAAG,gBAAA;AAAA,kBACxC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA;AAC9B,eACF;AAAA,cAEC,QAAA,EAAA;AAAA,gBAAA,cAAA,wBACE,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,yBAAyB,GACnD,QACH,EAAA,cAAA,EAAA,CAAA;AAAA,gCAEF,GAAA;AAAA,kBAAC,OAAA;AAAA,kBAAA;AAAA,oBACC,kBAAA,EAAkB,IAAK,CAAA,oBAAA,EAAsB,gBAAgB,CAAA;AAAA,oBAC7D,iBAAA,EAAiB,IAAK,CAAA,mBAAA,EAAqB,eAAe,CAAA;AAAA,oBAC1D,gBACE,CAAC,UAAA,GAAa,aAAa,KAAO,EAAA,GAAA,EAAK,GAAG,CAAI,GAAA,KAAA,CAAA;AAAA,oBAEhD,eAAA,EACE,CAAC,UACG,GAAA,OAAA,CAAQ,qBAAqB,GAAK,EAAA,aAAa,CAAC,CAChD,GAAA,KAAA,CAAA;AAAA,oBAEN,eAAA,EACE,CAAC,UACG,GAAA,OAAA,CAAQ,qBAAqB,GAAK,EAAA,aAAa,CAAC,CAChD,GAAA,KAAA,CAAA;AAAA,oBAEN,iBACE,KAAS,IAAA,CAAC,OAAO,KAAM,CAAA,OAAA,CAAQ,KAAK,CAAC,CAAA,IAAK,CAAC,UAAA,GACvC,QAAQ,oBAAqB,CAAA,OAAA,CAAQ,KAAK,CAAG,EAAA,aAAa,CAAC,CAC3D,GAAA,KAAA,CAAA;AAAA,oBAEN,SAAW,EAAA,IAAA;AAAA,sBACT,aAAa,OAAO,CAAA;AAAA,sBACpB,YAAa,CAAA,CAAA,cAAA,EAAiB,UAAW,CAAA,SAAS,CAAC,CAAE,CAAA,CAAA;AAAA,sBACrD;AAAA,qBACF;AAAA,oBACA,QAAU,EAAA,UAAA;AAAA,oBACV,MAAQ,EAAA,eAAA;AAAA,oBACR,QAAU,EAAA,iBAAA;AAAA,oBACV,OAAA,EAAS,CAAC,UAAA,GAAa,gBAAmB,GAAA,KAAA,CAAA;AAAA,oBAC1C,SAAW,EAAA,kBAAA;AAAA,oBACX,WAAA;AAAA,oBACA,QAAU,EAAA,UAAA;AAAA,oBACV,eAAA,EAAe,aAAa,MAAS,GAAA,KAAA,CAAA;AAAA,oBACrC,GAAK,EAAA,cAAA;AAAA,oBACL,QAAU,EAAA,UAAA;AAAA,oBAEV,IAAA,EAAM,aAAa,SAAY,GAAA,YAAA;AAAA,oBAC/B,QAAA,EAAU,aAAa,CAAK,CAAA,GAAA,CAAA;AAAA,oBAC5B,KAAA;AAAA,oBACC,GAAG;AAAA;AAAA,iBACN;AAAA,gBACC,CAAC,UAAc,IAAA,gBAAA,oBACb,GAAA,CAAA,eAAA,EAAA,EAAgB,QAAQ,gBAAkB,EAAA,CAAA;AAAA,gBAE5C,gCACE,GAAA,CAAA,KAAA,EAAA,EAAI,WAAW,YAAa,CAAA,uBAAuB,GACjD,QACH,EAAA,YAAA,EAAA,CAAA;AAAA,gCAED,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,qBAAqB,CAAG,EAAA;AAAA;AAAA;AAAA,WACvD;AAAA,UAEC,CAAC,eAAe,CAAC,UAAA,yBACf,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,iBAAiB,CAC5C,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,SAAW,EAAA,IAAA;AAAA,kBACT,aAAa,cAAc,CAAA;AAAA,kBAC3B,aAAa,uBAAuB;AAAA,iBACtC;AAAA,gBACC,GAAG,oBAAA;AAAA,gBAEJ,QAAA,kBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,aAC5B;AAAA,4BACA,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,SAAW,EAAA,IAAA;AAAA,kBACT,aAAa,cAAc,CAAA;AAAA,kBAC3B,aAAa,uBAAuB;AAAA,iBACtC;AAAA,gBACC,GAAG,oBAAA;AAAA,gBAEJ,QAAA,kBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA;AAC5B,WACF,EAAA;AAAA;AAAA;AAAA,KAEJ;AAAA;AAGN;;;;"}

package/dist-es/number-input/internal/useActivateWhileMouseDown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useActivateWhileMouseDown.js","sources":["../src/number-input/internal/useActivateWhileMouseDown.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { type SyntheticEvent, useCallback, useEffect, useState } from \"react\";\nimport { useInterval } from \"./useInterval\";\n\nconst INITIAL_DELAY = 500;\nconst INTERVAL_DELAY = 100;\n\nexport function useActivateWhileMouseDown(\n  activationFn: (event?: SyntheticEvent) => void,\n  isAtLimit: boolean,\n) {\n  const [buttonDown, setButtonDown] = useState(false);\n  const [delay, setDelay] = useState(INITIAL_DELAY);\n\n  const cancelInterval = useCallback(() => {\n    setButtonDown(false);\n    setDelay(INITIAL_DELAY);\n  }, []);\n\n  useEffect(() => {\n    if (isAtLimit) cancelInterval();\n  }, [isAtLimit, cancelInterval]);\n\n  const targetWindow = useWindow();\n\n  useEffect(() => {\n    if (targetWindow) {\n      targetWindow.addEventListener(\"mouseup\", cancelInterval);\n    }\n    return () => {\n      if (targetWindow) {\n        targetWindow.removeEventListener(\"mouseup\", cancelInterval);\n      }\n    };\n  }, [cancelInterval, targetWindow]);\n\n  const activate = (event: SyntheticEvent) => {\n    activationFn(event);\n    if (event.type === \"mousedown\") {\n      setButtonDown(true);\n    }\n  };\n\n  useInterval(\n    () => {\n      if (!buttonDown) return;\n      activationFn();\n      if (delay === INITIAL_DELAY) {\n        setDelay(INTERVAL_DELAY);\n      }\n    },\n    buttonDown ? delay : null,\n  );\n\n  return { activate, buttonDown };\n}\n"],"names":[],"mappings":";;;;AAIA,MAAM,aAAgB,GAAA,GAAA;AACtB,MAAM,cAAiB,GAAA,GAAA;AAEP,SAAA,yBAAA,CACd,cACA,SACA,EAAA;AACA,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,aAAa,CAAA;AAEhD,EAAM,MAAA,cAAA,GAAiB,YAAY,MAAM;AACvC,IAAA,aAAA,CAAc,KAAK,CAAA;AACnB,IAAA,QAAA,CAAS,aAAa,CAAA;AAAA,GACxB,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,WAA0B,cAAA,EAAA;AAAA,GAC7B,EAAA,CAAC,SAAW,EAAA,cAAc,CAAC,CAAA;AAE9B,EAAA,MAAM,eAAe,SAAU,EAAA;AAE/B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAc,EAAA;AAChB,MAAa,YAAA,CAAA,gBAAA,CAAiB,WAAW,cAAc,CAAA;AAAA;AAEzD,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,YAAc,EAAA;AAChB,QAAa,YAAA,CAAA,mBAAA,CAAoB,WAAW,cAAc,CAAA;AAAA;AAC5D,KACF;AAAA,GACC,EAAA,CAAC,cAAgB,EAAA,YAAY,CAAC,CAAA;AAEjC,EAAM,MAAA,QAAA,GAAW,CAAC,KAA0B,KAAA;AAC1C,IAAA,YAAA,CAAa,KAAK,CAAA;AAClB,IAAI,IAAA,KAAA,CAAM,SAAS,WAAa,EAAA;AAC9B,MAAA,aAAA,CAAc,IAAI,CAAA;AAAA;AACpB,GACF;AAEA,EAAA,WAAA;AAAA,IACE,MAAM;AACJ,MAAA,IAAI,CAAC,UAAY,EAAA;AACjB,MAAa,YAAA,EAAA;AACb,MAAA,IAAI,UAAU,aAAe,EAAA;AAC3B,QAAA,QAAA,CAAS,cAAc,CAAA;AAAA;AACzB,KACF;AAAA,IACA,aAAa,KAAQ,GAAA;AAAA,GACvB;AAEA,EAAO,OAAA,EAAE,UAAU,UAAW,EAAA;AAChC;;;;"}

package/dist-es/number-input/internal/useInterval.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.js","sources":["../src/number-input/internal/useInterval.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\ntype IntervalFunction = () => void;\n\n// https://gist.github.com/iamBevan/171cce94431b8c95206086252ce0c6c7\nfunction useInterval(callback: IntervalFunction, delay: number | null) {\n  const savedCallback = useRef<IntervalFunction | null>(null);\n\n  useEffect(() => {\n    savedCallback.current = callback;\n  });\n\n  useEffect(() => {\n    function tick() {\n      if (savedCallback.current !== null) {\n        savedCallback.current();\n      }\n    }\n\n    if (delay !== null) {\n      const id = setInterval(tick, delay);\n      return () => clearInterval(id);\n    }\n    return;\n  }, [delay]);\n}\n\nexport { useInterval };\n"],"names":[],"mappings":";;AAKA,SAAS,WAAA,CAAY,UAA4B,KAAsB,EAAA;AACrE,EAAM,MAAA,aAAA,GAAgB,OAAgC,IAAI,CAAA;AAE1D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,aAAA,CAAc,OAAU,GAAA,QAAA;AAAA,GACzB,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,SAAS,IAAO,GAAA;AACd,MAAI,IAAA,aAAA,CAAc,YAAY,IAAM,EAAA;AAClC,QAAA,aAAA,CAAc,OAAQ,EAAA;AAAA;AACxB;AAGF,IAAA,IAAI,UAAU,IAAM,EAAA;AAClB,MAAM,MAAA,EAAA,GAAK,WAAY,CAAA,IAAA,EAAM,KAAK,CAAA;AAClC,MAAO,OAAA,MAAM,cAAc,EAAE,CAAA;AAAA;AAE/B,IAAA;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA;AACZ;;;;"}

package/dist-es/number-input/internal/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../src/number-input/internal/utils.ts"],"sourcesContent":["// The input should only accept numbers, decimal points, and plus/minus symbols\nexport const ACCEPT_INPUT = /^[-+]?[0-9]*\\.?([0-9]+)?/g;\n\nexport const toFixedDecimalPlaces = (\n  inputNumber: number,\n  decimalPlaces: number,\n) => inputNumber.toFixed(decimalPlaces);\n\nexport const isAllowedNonNumeric = (inputCharacter: number | string) => {\n  if (typeof inputCharacter === \"number\") return;\n  return (\n    (\"-+\".includes(inputCharacter) && inputCharacter.length === 1) ||\n    inputCharacter === \"\"\n  );\n};\n\nexport const toFloat = (inputValue: number | string) => {\n  // Plus, minus, and empty characters are treated as 0\n  if (isAllowedNonNumeric(inputValue)) return 0;\n  return Number.parseFloat(inputValue.toString());\n};\n\nexport const sanitizedInput = (numberString: string) =>\n  (numberString.match(ACCEPT_INPUT) || []).join(\"\");\n\nexport const isAtMax = (value: number | string | undefined, max: number) => {\n  if (value === undefined) return true;\n  return toFloat(value) >= max;\n};\n\nexport const isAtMin = (value: number | string | undefined, min: number) => {\n  if (value === undefined) return true;\n  return toFloat(value) <= min;\n};\n\nexport const isOutOfRange = (\n  value: number | string | undefined,\n  min: number,\n  max: number,\n) => {\n  if (value === undefined) return true;\n  const floatValue = toFloat(value);\n  return floatValue > max || floatValue < min;\n};\n"],"names":[],"mappings":"AACO,MAAM,YAAe,GAAA;AAErB,MAAM,uBAAuB,CAClC,WAAA,EACA,aACG,KAAA,WAAA,CAAY,QAAQ,aAAa;AAEzB,MAAA,mBAAA,GAAsB,CAAC,cAAoC,KAAA;AACtE,EAAI,IAAA,OAAO,mBAAmB,QAAU,EAAA;AACxC,EAAA,OACG,KAAK,QAAS,CAAA,cAAc,KAAK,cAAe,CAAA,MAAA,KAAW,KAC5D,cAAmB,KAAA,EAAA;AAEvB;AAEa,MAAA,OAAA,GAAU,CAAC,UAAgC,KAAA;AAEtD,EAAI,IAAA,mBAAA,CAAoB,UAAU,CAAA,EAAU,OAAA,CAAA;AAC5C,EAAA,OAAO,MAAO,CAAA,UAAA,CAAW,UAAW,CAAA,QAAA,EAAU,CAAA;AAChD;AAEa,MAAA,cAAA,GAAiB,CAAC,YAAA,KAAA,CAC5B,YAAa,CAAA,KAAA,CAAM,YAAY,CAAK,IAAA,EAAI,EAAA,IAAA,CAAK,EAAE;AAErC,MAAA,OAAA,GAAU,CAAC,KAAA,EAAoC,GAAgB,KAAA;AAC1E,EAAI,IAAA,KAAA,KAAU,QAAkB,OAAA,IAAA;AAChC,EAAO,OAAA,OAAA,CAAQ,KAAK,CAAK,IAAA,GAAA;AAC3B;AAEa,MAAA,OAAA,GAAU,CAAC,KAAA,EAAoC,GAAgB,KAAA;AAC1E,EAAI,IAAA,KAAA,KAAU,QAAkB,OAAA,IAAA;AAChC,EAAO,OAAA,OAAA,CAAQ,KAAK,CAAK,IAAA,GAAA;AAC3B;AAEO,MAAM,YAAe,GAAA,CAC1B,KACA,EAAA,GAAA,EACA,GACG,KAAA;AACH,EAAI,IAAA,KAAA,KAAU,QAAkB,OAAA,IAAA;AAChC,EAAM,MAAA,UAAA,GAAa,QAAQ,KAAK,CAAA;AAChC,EAAO,OAAA,UAAA,GAAa,OAAO,UAAa,GAAA,GAAA;AAC1C;;;;"}

package/dist-es/{stepper-input/useStepperInput.js → number-input/useNumberInput.js}

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { useActivateWhileMouseDown } from './internal/useActivateWhileMouseDown.js';
 import { toFixedDecimalPlaces, toFloat, isAtMin, isAtMax } from './internal/utils.js';
 
-const useStepperInput = ({
+const useNumberInput = ({
   decimalPlaces = 0,
   disabled,
   inputRef,
@@ -93,5 +93,5 @@ const useStepperInput = ({
   };
 };
 
-export { useStepperInput };
-//# sourceMappingURL=useStepperInput.js.map
+export { useNumberInput };
+//# sourceMappingURL=useNumberInput.js.map

package/dist-es/number-input/useNumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNumberInput.js","sources":["../src/number-input/useNumberInput.ts"],"sourcesContent":["import {\n  type Dispatch,\n  type MouseEvent,\n  type MutableRefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  useCallback,\n} from \"react\";\nimport type { NumberInputProps } from \"./NumberInput\";\nimport { useActivateWhileMouseDown } from \"./internal/useActivateWhileMouseDown\";\nimport {\n  isAtMax,\n  isAtMin,\n  toFixedDecimalPlaces,\n  toFloat,\n} from \"./internal/utils\";\n\n/**\n * Manages increment / decrement logic\n */\nexport const useNumberInput = ({\n  decimalPlaces = 0,\n  disabled,\n  inputRef,\n  max = Number.MAX_SAFE_INTEGER,\n  min = Number.MIN_SAFE_INTEGER,\n  onChange,\n  readOnly,\n  setValue,\n  step = 1,\n  stepBlock = 10,\n  value,\n}: Pick<\n  NumberInputProps,\n  | \"decimalPlaces\"\n  | \"disabled\"\n  | \"inputRef\"\n  | \"max\"\n  | \"min\"\n  | \"onChange\"\n  | \"readOnly\"\n  | \"step\"\n  | \"stepBlock\"\n  | \"value\"\n> & {\n  setValue: Dispatch<SetStateAction<string | number | undefined>>;\n  inputRef: MutableRefObject<HTMLInputElement | null>;\n}) => {\n  const setValueInRange = useCallback(\n    (event: SyntheticEvent | undefined, modifiedValue: number) => {\n      if (readOnly) return;\n      let nextValue = modifiedValue;\n      if (nextValue < min) nextValue = min;\n      if (nextValue > max) nextValue = max;\n\n      const roundedValue = toFixedDecimalPlaces(nextValue, decimalPlaces);\n      if (Number.isNaN(toFloat(roundedValue))) return;\n\n      setValue(roundedValue);\n\n      onChange?.(event, roundedValue);\n    },\n    [decimalPlaces, min, max, onChange, readOnly, setValue],\n  );\n\n  const decrementValue = useCallback(\n    (event?: SyntheticEvent, block?: boolean) => {\n      if (value === undefined || isAtMin(value, min)) return;\n      const decrementStep = block ? stepBlock : step;\n      const nextValue =\n        value === \"\" ? -decrementStep : toFloat(value) - decrementStep;\n      setValueInRange(event, nextValue);\n    },\n    [value, min, step, stepBlock, setValueInRange],\n  );\n\n  const incrementValue = useCallback(\n    (event?: SyntheticEvent, block?: boolean) => {\n      if (value === undefined || isAtMax(value, max)) return;\n      const incrementStep = block ? stepBlock : step;\n      const nextValue =\n        value === \"\" ? incrementStep : toFloat(value) + incrementStep;\n      setValueInRange(event, nextValue);\n    },\n    [value, max, step, stepBlock, setValueInRange],\n  );\n\n  const { activate: decrementSpinner } = useActivateWhileMouseDown(\n    (event?: SyntheticEvent) => decrementValue(event),\n    isAtMin(value, min),\n  );\n\n  const { activate: incrementSpinner } = useActivateWhileMouseDown(\n    (event?: SyntheticEvent) => incrementValue(event),\n    isAtMax(value, max),\n  );\n\n  const handleButtonMouseUp = () => inputRef.current?.focus();\n\n  const commonButtonProps = {\n    \"aria-hidden\": true,\n    tabIndex: -1,\n    onMouseUp: handleButtonMouseUp,\n  };\n\n  const incrementButtonProps = {\n    ...commonButtonProps,\n    \"aria-label\": \"increment value\",\n    disabled: disabled || isAtMax(value, max),\n    onMouseDown: (event: MouseEvent<HTMLButtonElement>) => {\n      if (event.nativeEvent.button !== 0) {\n        // To match closely with <input type='input'>\n        return;\n      }\n      incrementSpinner(event);\n    },\n  };\n\n  const decrementButtonProps = {\n    ...commonButtonProps,\n    \"aria-label\": \"decrement value\",\n    disabled: disabled || isAtMin(value, min),\n    onMouseDown: (event: MouseEvent<HTMLButtonElement>) => {\n      if (event.nativeEvent.button !== 0) {\n        // To match closely with <input type='input'>\n        return;\n      }\n      decrementSpinner(event);\n    },\n  };\n\n  return {\n    incrementButtonProps,\n    decrementButtonProps,\n    incrementValue,\n    decrementValue,\n  };\n};\n"],"names":[],"mappings":";;;;AAoBO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,aAAgB,GAAA,CAAA;AAAA,EAChB,QAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAM,MAAO,CAAA,gBAAA;AAAA,EACb,MAAM,MAAO,CAAA,gBAAA;AAAA,EACb,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAO,GAAA,CAAA;AAAA,EACP,SAAY,GAAA,EAAA;AAAA,EACZ;AACF,CAeM,KAAA;AACJ,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,OAAmC,aAA0B,KAAA;AAC5D,MAAA,IAAI,QAAU,EAAA;AACd,MAAA,IAAI,SAAY,GAAA,aAAA;AAChB,MAAI,IAAA,SAAA,GAAY,KAAiB,SAAA,GAAA,GAAA;AACjC,MAAI,IAAA,SAAA,GAAY,KAAiB,SAAA,GAAA,GAAA;AAEjC,MAAM,MAAA,YAAA,GAAe,oBAAqB,CAAA,SAAA,EAAW,aAAa,CAAA;AAClE,MAAA,IAAI,MAAO,CAAA,KAAA,CAAM,OAAQ,CAAA,YAAY,CAAC,CAAG,EAAA;AAEzC,MAAA,QAAA,CAAS,YAAY,CAAA;AAErB,MAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,KAAO,EAAA,YAAA,CAAA;AAAA,KACpB;AAAA,IACA,CAAC,aAAe,EAAA,GAAA,EAAK,GAAK,EAAA,QAAA,EAAU,UAAU,QAAQ;AAAA,GACxD;AAEA,EAAA,MAAM,cAAiB,GAAA,WAAA;AAAA,IACrB,CAAC,OAAwB,KAAoB,KAAA;AAC3C,MAAA,IAAI,KAAU,KAAA,KAAA,CAAA,IAAa,OAAQ,CAAA,KAAA,EAAO,GAAG,CAAG,EAAA;AAChD,MAAM,MAAA,aAAA,GAAgB,QAAQ,SAAY,GAAA,IAAA;AAC1C,MAAA,MAAM,YACJ,KAAU,KAAA,EAAA,GAAK,CAAC,aAAgB,GAAA,OAAA,CAAQ,KAAK,CAAI,GAAA,aAAA;AACnD,MAAA,eAAA,CAAgB,OAAO,SAAS,CAAA;AAAA,KAClC;AAAA,IACA,CAAC,KAAA,EAAO,GAAK,EAAA,IAAA,EAAM,WAAW,eAAe;AAAA,GAC/C;AAEA,EAAA,MAAM,cAAiB,GAAA,WAAA;AAAA,IACrB,CAAC,OAAwB,KAAoB,KAAA;AAC3C,MAAA,IAAI,KAAU,KAAA,KAAA,CAAA,IAAa,OAAQ,CAAA,KAAA,EAAO,GAAG,CAAG,EAAA;AAChD,MAAM,MAAA,aAAA,GAAgB,QAAQ,SAAY,GAAA,IAAA;AAC1C,MAAA,MAAM,YACJ,KAAU,KAAA,EAAA,GAAK,aAAgB,GAAA,OAAA,CAAQ,KAAK,CAAI,GAAA,aAAA;AAClD,MAAA,eAAA,CAAgB,OAAO,SAAS,CAAA;AAAA,KAClC;AAAA,IACA,CAAC,KAAA,EAAO,GAAK,EAAA,IAAA,EAAM,WAAW,eAAe;AAAA,GAC/C;AAEA,EAAM,MAAA,EAAE,QAAU,EAAA,gBAAA,EAAqB,GAAA,yBAAA;AAAA,IACrC,CAAC,KAA2B,KAAA,cAAA,CAAe,KAAK,CAAA;AAAA,IAChD,OAAA,CAAQ,OAAO,GAAG;AAAA,GACpB;AAEA,EAAM,MAAA,EAAE,QAAU,EAAA,gBAAA,EAAqB,GAAA,yBAAA;AAAA,IACrC,CAAC,KAA2B,KAAA,cAAA,CAAe,KAAK,CAAA;AAAA,IAChD,OAAA,CAAQ,OAAO,GAAG;AAAA,GACpB;AAEA,EAAA,MAAM,sBAAsB,MAAG;AAjGjC,IAAA,IAAA,EAAA;AAiGoC,IAAA,OAAA,CAAA,EAAA,GAAA,QAAA,CAAS,YAAT,IAAkB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AAAA,GAAA;AAEpD,EAAA,MAAM,iBAAoB,GAAA;AAAA,IACxB,aAAe,EAAA,IAAA;AAAA,IACf,QAAU,EAAA,CAAA,CAAA;AAAA,IACV,SAAW,EAAA;AAAA,GACb;AAEA,EAAA,MAAM,oBAAuB,GAAA;AAAA,IAC3B,GAAG,iBAAA;AAAA,IACH,YAAc,EAAA,iBAAA;AAAA,IACd,QAAU,EAAA,QAAA,IAAY,OAAQ,CAAA,KAAA,EAAO,GAAG,CAAA;AAAA,IACxC,WAAA,EAAa,CAAC,KAAyC,KAAA;AACrD,MAAI,IAAA,KAAA,CAAM,WAAY,CAAA,MAAA,KAAW,CAAG,EAAA;AAElC,QAAA;AAAA;AAEF,MAAA,gBAAA,CAAiB,KAAK,CAAA;AAAA;AACxB,GACF;AAEA,EAAA,MAAM,oBAAuB,GAAA;AAAA,IAC3B,GAAG,iBAAA;AAAA,IACH,YAAc,EAAA,iBAAA;AAAA,IACd,QAAU,EAAA,QAAA,IAAY,OAAQ,CAAA,KAAA,EAAO,GAAG,CAAA;AAAA,IACxC,WAAA,EAAa,CAAC,KAAyC,KAAA;AACrD,MAAI,IAAA,KAAA,CAAM,WAAY,CAAA,MAAA,KAAW,CAAG,EAAA;AAElC,QAAA;AAAA;AAEF,MAAA,gBAAA,CAAiB,KAAK,CAAA;AAAA;AACxB,GACF;AAEA,EAAO,OAAA;AAAA,IACL,oBAAA;AAAA,IACA,oBAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist-es/slider/RangeSlider.js

@@ -0,0 +1,159 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useControlled, useFormFieldProps } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { SliderThumb } from './internal/SliderThumb.js';
+import { SliderTrack } from './internal/SliderTrack.js';
+import { useRangeSliderThumb } from './internal/useRangeSliderThumb.js';
+import { clampRange, calculatePercentage, toFloat } from './internal/utils.js';
+
+const RangeSlider = forwardRef(
+  function RangeSlider2({
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-valuetext": ariaValueText,
+    decimalPlaces = 2,
+    disabled: disabledProp = false,
+    format,
+    marks,
+    max = 10,
+    min = 0,
+    maxLabel,
+    minLabel,
+    onChange,
+    onChangeEnd,
+    restrictToMarks = false,
+    showTooltip = true,
+    step = 1,
+    stepMultiplier = 2,
+    value: valueProp,
+    defaultValue = [min, min + (max - min) / 2],
+    ...rest
+  }, ref) {
+    const [valueState, setValue] = useControlled({
+      controlled: valueProp,
+      default: defaultValue,
+      name: "RangeSlider",
+      state: "value"
+    });
+    const lastValueRef = useRef(valueState);
+    const {
+      a11yProps: { "aria-labelledby": formFieldLabelledBy } = {},
+      disabled: formFieldDisabled
+    } = useFormFieldProps();
+    const disabled = formFieldDisabled || disabledProp;
+    const value = clampRange(
+      valueState,
+      max,
+      min,
+      step,
+      decimalPlaces,
+      marks,
+      restrictToMarks
+    );
+    const progressPercentageStart = calculatePercentage(value[0], max, min);
+    const progressPercentageEnd = calculatePercentage(value[1], max, min);
+    const thumbProps = {
+      "aria-label": ariaLabel,
+      "aria-labelledby": clsx(formFieldLabelledBy, ariaLabelledBy),
+      "aria-valuemax": max,
+      "aria-valuemin": min,
+      "aria-valuetext": ariaValueText,
+      disabled,
+      format,
+      max,
+      maxLabel,
+      min,
+      minLabel,
+      showTooltip,
+      step,
+      stepMultiplier,
+      sliderValue: value
+    };
+    const handleInputChange = (event, thumbIndex) => {
+      const parsedValue = toFloat(event.target.value);
+      const values = preventThumbOverlap(parsedValue, value, thumbIndex);
+      const haveValuesChanged = values[0] !== lastValueRef.current[0] || values[1] !== lastValueRef.current[1];
+      if (haveValuesChanged) {
+        const values2 = preventThumbOverlap(parsedValue, value, thumbIndex);
+        setValue(values2);
+        onChange == null ? void 0 : onChange(event, values2);
+        onChangeEnd == null ? void 0 : onChangeEnd(event, values2);
+        lastValueRef.current = values2;
+      }
+    };
+    const {
+      handleKeydownOnThumb,
+      handlePointerDownOnThumb,
+      handlePointerDownOnTrack,
+      isDragging,
+      sliderRef,
+      thumbIndexState,
+      preventThumbOverlap
+    } = useRangeSliderThumb({
+      decimalPlaces,
+      handleInputChange,
+      marks,
+      min,
+      max,
+      step,
+      value,
+      onChange,
+      onChangeEnd,
+      restrictToMarks,
+      setValue,
+      stepMultiplier
+    });
+    return /* @__PURE__ */ jsxs(
+      SliderTrack,
+      {
+        disabled,
+        format,
+        handlePointerDown: handlePointerDownOnTrack,
+        isDragging,
+        isRange: true,
+        marks,
+        min,
+        minLabel,
+        max,
+        maxLabel,
+        progressPercentageRange: [
+          progressPercentageStart,
+          progressPercentageEnd
+        ],
+        ref,
+        sliderRef,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            SliderThumb,
+            {
+              index: 0,
+              handleInputChange: (event) => handleInputChange(event, 0),
+              handlePointerDown: (event) => handlePointerDownOnThumb(event, 0),
+              handleKeydownOnThumb: (event) => handleKeydownOnThumb(event, 0),
+              offsetPercentage: `${calculatePercentage(value[0], max, min)}%`,
+              trackDragging: isDragging && thumbIndexState === 0,
+              ...thumbProps
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SliderThumb,
+            {
+              index: 1,
+              handleInputChange: (event) => handleInputChange(event, 1),
+              handlePointerDown: (event) => handlePointerDownOnThumb(event, 1),
+              handleKeydownOnThumb: (event) => handleKeydownOnThumb(event, 1),
+              offsetPercentage: `${calculatePercentage(value[1], max, min)}%`,
+              trackDragging: isDragging && thumbIndexState === 1,
+              ...thumbProps
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export { RangeSlider };
+//# sourceMappingURL=RangeSlider.js.map

package/dist-es/slider/RangeSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeSlider.js","sources":["../src/slider/RangeSlider.tsx"],"sourcesContent":["import {\n  type ChangeEvent,\n  type HTMLAttributes,\n  type SyntheticEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\n\nimport { useControlled, useFormFieldProps } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useRangeSliderThumb } from \"./internal/useRangeSliderThumb\";\nimport { calculatePercentage, clampRange, toFloat } from \"./internal/utils\";\n\nexport interface RangeSliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /**\n   * When minimum and maximum labels are defined, ensure\n   * they are confined within the boundary of the slider.\n   */\n  constrainLabelPosition?: boolean;\n  /**\n   * The number of allowed decimal places\n   * @default 2\n   */\n  decimalPlaces?: number;\n  /**\n   * The default value. Use when the component is not controlled.\n   * @default [min, min + (max - min) / 2]\n   */\n  defaultValue?: [number, number];\n  /**\n   * Disable the slider.\n   */\n  disabled?: boolean;\n  /**\n   * Show visual ticks above the marks.\n   */\n  showTicks?: boolean;\n  /**\n   * A callback to format the display value in the tooltip, min and max labels\n   * and the `aria-valuetext` attribute.\n   */\n  format?: (value: number) => string | number;\n  /**\n   * Marks that are displayed under the track.\n   */\n  marks?: { label: string; value: number }[];\n  /**\n   * Maximum slider value.\n   * @default 10\n   */\n  max?: number;\n  /**\n   * Minimum slider value.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Label for maximum value.\n   */\n  maxLabel?: string;\n  /**\n   * Label for minimum value.\n   */\n  minLabel?: string;\n  /**\n   * Callback called when slider value is changed.\n   * Event is either an Input change event or a click event.\n   */\n  onChange?: (\n    event: SyntheticEvent<unknown> | Event,\n    value: [number, number],\n  ) => void;\n  /**\n   * Callback called when the slider is stopped from being dragged or\n   * its value is changed from the keyboard.\n   * Event is either an Input change event or a click event.\n   */\n  onChangeEnd?: (\n    event: SyntheticEvent<unknown> | Event,\n    value: [number, number],\n  ) => void;\n  /**\n   * Restrict slider value to marks only. The step will be ignored.\n   */\n  restrictToMarks?: boolean;\n  /**\n   * Show the slider value in a tooltip when the thumb is hovered.\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Minimum interval the slider thumb can move.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n   * @default 2\n   */\n  stepMultiplier?: number;\n  /**\n   * Value of the slider, to be used when in a controlled state.\n   */\n  value?: [number, number];\n}\n\nexport const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(\n  function RangeSlider(\n    {\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-valuetext\": ariaValueText,\n      decimalPlaces = 2,\n      disabled: disabledProp = false,\n      format,\n      marks,\n      max = 10,\n      min = 0,\n      maxLabel,\n      minLabel,\n      onChange,\n      onChangeEnd,\n      restrictToMarks = false,\n      showTooltip = true,\n      step = 1,\n      stepMultiplier = 2,\n      value: valueProp,\n      defaultValue = [min, min + (max - min) / 2],\n      ...rest\n    },\n    ref,\n  ) {\n    const [valueState, setValue] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"RangeSlider\",\n      state: \"value\",\n    });\n    const lastValueRef = useRef<[number, number]>(valueState);\n\n    const {\n      a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n      disabled: formFieldDisabled,\n    } = useFormFieldProps();\n\n    const disabled = formFieldDisabled || disabledProp;\n    const value: [number, number] = clampRange(\n      valueState,\n      max,\n      min,\n      step,\n      decimalPlaces,\n      marks,\n      restrictToMarks,\n    );\n    const progressPercentageStart = calculatePercentage(value[0], max, min);\n    const progressPercentageEnd = calculatePercentage(value[1], max, min);\n\n    const thumbProps = {\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": clsx(formFieldLabelledBy, ariaLabelledBy),\n      \"aria-valuemax\": max,\n      \"aria-valuemin\": min,\n      \"aria-valuetext\": ariaValueText,\n      disabled: disabled,\n      format: format,\n      max: max,\n      maxLabel: maxLabel,\n      min: min,\n      minLabel: minLabel,\n      showTooltip: showTooltip,\n      step: step,\n      stepMultiplier: stepMultiplier,\n      sliderValue: value,\n    };\n\n    const handleInputChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      thumbIndex: number,\n    ) => {\n      const parsedValue = toFloat(event.target.value);\n      const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n      const haveValuesChanged =\n        values[0] !== lastValueRef.current[0] ||\n        values[1] !== lastValueRef.current[1];\n      if (haveValuesChanged) {\n        const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n        setValue(values as [number, number]);\n        onChange?.(event, values as [number, number]);\n        onChangeEnd?.(event, values as [number, number]);\n        lastValueRef.current = values;\n      }\n    };\n\n    const {\n      handleKeydownOnThumb,\n      handlePointerDownOnThumb,\n      handlePointerDownOnTrack,\n      isDragging,\n      sliderRef,\n      thumbIndexState,\n      preventThumbOverlap,\n    } = useRangeSliderThumb({\n      decimalPlaces,\n      handleInputChange,\n      marks,\n      min,\n      max,\n      step,\n      value,\n      onChange,\n      onChangeEnd,\n      restrictToMarks,\n      setValue,\n      stepMultiplier,\n    });\n\n    return (\n      <SliderTrack\n        disabled={disabled}\n        format={format}\n        handlePointerDown={handlePointerDownOnTrack}\n        isDragging={isDragging}\n        isRange\n        marks={marks}\n        min={min}\n        minLabel={minLabel}\n        max={max}\n        maxLabel={maxLabel}\n        progressPercentageRange={[\n          progressPercentageStart,\n          progressPercentageEnd,\n        ]}\n        ref={ref}\n        sliderRef={sliderRef}\n        {...rest}\n      >\n        <SliderThumb\n          index={0}\n          handleInputChange={(event) => handleInputChange(event, 0)}\n          handlePointerDown={(event) => handlePointerDownOnThumb(event, 0)}\n          handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 0)}\n          offsetPercentage={`${calculatePercentage(value[0], max, min)}%`}\n          trackDragging={isDragging && thumbIndexState === 0}\n          {...thumbProps}\n        />\n        <SliderThumb\n          index={1}\n          handleInputChange={(event) => handleInputChange(event, 1)}\n          handlePointerDown={(event) => handlePointerDownOnThumb(event, 1)}\n          handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 1)}\n          offsetPercentage={`${calculatePercentage(value[1], max, min)}%`}\n          trackDragging={isDragging && thumbIndexState === 1}\n          {...thumbProps}\n        />\n      </SliderTrack>\n    );\n  },\n);\n"],"names":["RangeSlider","values"],"mappings":"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"}