@acusti/css-value-input 1.1.2 → 2.1.0

package/dist/CSSValueInput.d.ts

@@ -1,5 +1,5 @@
-import { type CSSValueType } from '@acusti/css-values';
-import * as React from 'react';
+import { CSSValueType } from '../../css-values/src';
+import { ChangeEvent, FocusEvent, KeyboardEvent, ReactNode } from 'react';
 export type Props = {
     /**
      * Boolean indicating if the user can submit an empty value (i.e. clear
@@ -14,16 +14,16 @@ export type Props = {
      * (i.e. '12px' → 12). Defaults to parseFloat().
      */
     getValueAsNumber?: (value: number | string) => number;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     label?: string;
     max?: number;
     min?: number;
     name?: string;
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
-    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
-    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => unknown;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => unknown;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => unknown;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => unknown;
+    onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => unknown;
     /**
      * Custom event handler triggered when the user presses enter/return
      * or blurs the input after making a change. Hitting esc will restore
@@ -39,5 +39,5 @@ export type Props = {
     validator?: ((value: string) => boolean) | RegExp;
     value?: string;
 };
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+declare const _default: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLInputElement>>;
 export default _default;

package/dist/CSSValueInput.js

@@ -1,178 +1,333 @@
-import { DEFAULT_CSS_VALUE_TYPE, DEFAULT_UNIT_BY_CSS_VALUE_TYPE, getCSSValueAsNumber, getCSSValueWithUnit, getUnitFromCSSValue, roundToPrecision, } from '@acusti/css-values';
-import InputText from '@acusti/input-text';
-import clsx from 'clsx';
-import * as React from 'react';
-const { useCallback, useEffect, useImperativeHandle, useRef } = React;
-const ROOT_CLASS_NAME = 'cssvalueinput';
-export default React.forwardRef(function CSSValueInput({ allowEmpty = true, className, cssValueType = DEFAULT_CSS_VALUE_TYPE, disabled, getValueAsNumber = getCSSValueAsNumber, icon, label, max, min, name, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onSubmitValue, placeholder, step = 1, tabIndex, title, unit = DEFAULT_UNIT_BY_CSS_VALUE_TYPE[cssValueType], validator, value, }, ref) {
-    const inputRef = useRef(null);
-    useImperativeHandle(ref, () => inputRef.current);
-    // props.value should be a string; if it’s a number, convert it here
-    if (typeof value === 'number' && !Number.isNaN(value)) {
-        value = `${value}`;
-    }
-    const submittedValueRef = useRef(value !== null && value !== void 0 ? value : '');
-    useEffect(() => {
-        submittedValueRef.current = value !== null && value !== void 0 ? value : '';
-    }, [value]);
-    const handleSubmitValue = useCallback((event) => {
-        const currentValue = event.currentTarget.value;
-        // Store last submittedValue (used to reset value on invalid input)
-        submittedValueRef.current = currentValue;
-        onSubmitValue(currentValue);
-    }, [onSubmitValue]);
-    const handleBlur = useCallback((event) => {
-        const input = event.currentTarget;
-        inputRef.current = input;
-        if (onBlur)
-            onBlur(event);
-        const currentValue = input.value.trim();
-        // If allowEmpty and value is empty, skip all validation + normalization
-        if (allowEmpty && !currentValue) {
-            handleSubmitValue(event);
-            return;
-        }
-        const currentValueAsNumber = getValueAsNumber(currentValue);
-        const isCurrentValueFinite = Number.isFinite(currentValueAsNumber);
-        // Inherit unit from last submitted value unless default is unitless;
-        // ensures that submitting a new value with no unit doesn’t add a unit
-        const defaultUnit = unit
-            ? getUnitFromCSSValue({
-                cssValueType,
-                defaultUnit: unit,
-                value: submittedValueRef.current,
-            })
-            : '';
-        if (!isCurrentValueFinite) {
-            let isValid = false;
-            if (validator instanceof RegExp) {
-                isValid = validator.test(currentValue);
-            }
-            else if (validator) {
-                isValid = validator(currentValue);
-            }
-            if (isValid) {
-                handleSubmitValue(event);
-            }
-            else {
-                // If current value isn’t valid, revert to last submitted value
-                input.value = submittedValueRef.current;
-            }
-            return;
-        }
-        // Normalize value by applying min/max and integer constraints
-        let normalizedValueAsNumber = currentValueAsNumber;
-        if (isCurrentValueFinite) {
-            if (min != null && currentValueAsNumber < min) {
-                normalizedValueAsNumber = min;
-            }
-            else if (max != null && currentValueAsNumber > max) {
-                normalizedValueAsNumber = max;
-            }
-            else if (cssValueType === 'integer') {
-                normalizedValueAsNumber = Math.floor(currentValueAsNumber);
-            }
-        }
-        if (normalizedValueAsNumber !== currentValueAsNumber) {
-            const currentUnit = getUnitFromCSSValue({
-                cssValueType,
-                defaultUnit,
-                value: currentValue,
-            });
-            input.value = normalizedValueAsNumber + currentUnit;
-        }
-        else {
-            input.value = getCSSValueWithUnit({
-                cssValueType,
-                defaultUnit,
-                value: currentValue,
-            });
-        }
-        handleSubmitValue(event);
-    }, [
-        allowEmpty,
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { DEFAULT_UNIT_BY_CSS_VALUE_TYPE, DEFAULT_CSS_VALUE_TYPE, getCSSValueAsNumber, getUnitFromCSSValue, getCSSValueWithUnit, roundToPrecision } from "@acusti/css-values";
+import InputText from "@acusti/input-text";
+import clsx from "clsx";
+import { forwardRef, useRef, useImperativeHandle, useEffect } from "react";
+const ROOT_CLASS_NAME = "cssvalueinput";
+const CSSValueInput = forwardRef(function CSSValueInput2(t0, ref) {
+  const $ = c(56);
+  const {
+    allowEmpty: t1,
+    className,
+    cssValueType: t2,
+    disabled,
+    getValueAsNumber: t3,
+    icon,
+    label,
+    max,
+    min,
+    name,
+    onBlur,
+    onChange,
+    onFocus,
+    onKeyDown,
+    onKeyUp,
+    onSubmitValue,
+    placeholder,
+    step: t4,
+    tabIndex,
+    title,
+    unit: t5,
+    validator,
+    value: valueFromProps
+  } = t0;
+  const allowEmpty = t1 === void 0 ? true : t1;
+  const cssValueType = t2 === void 0 ? DEFAULT_CSS_VALUE_TYPE : t2;
+  const getValueAsNumber = t3 === void 0 ? getCSSValueAsNumber : t3;
+  const step = t4 === void 0 ? 1 : t4;
+  const unit = t5 === void 0 ? DEFAULT_UNIT_BY_CSS_VALUE_TYPE[cssValueType] : t5;
+  const inputRef = useRef(null);
+  let t6;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = () => inputRef.current;
+    $[0] = t6;
+  } else {
+    t6 = $[0];
+  }
+  useImperativeHandle(ref, t6);
+  const value = typeof valueFromProps === "number" && !Number.isNaN(valueFromProps) ? `${valueFromProps}` : valueFromProps;
+  const submittedValueRef = useRef(value ?? "");
+  let t7;
+  let t8;
+  if ($[1] !== value) {
+    t7 = () => {
+      submittedValueRef.current = value ?? "";
+    };
+    t8 = [value];
+    $[1] = value;
+    $[2] = t7;
+    $[3] = t8;
+  } else {
+    t7 = $[2];
+    t8 = $[3];
+  }
+  useEffect(t7, t8);
+  let t9;
+  if ($[4] !== onSubmitValue) {
+    t9 = (event) => {
+      const currentValue = event.currentTarget.value;
+      submittedValueRef.current = currentValue;
+      onSubmitValue(currentValue);
+    };
+    $[4] = onSubmitValue;
+    $[5] = t9;
+  } else {
+    t9 = $[5];
+  }
+  const handleSubmitValue = t9;
+  let t10;
+  if ($[6] !== allowEmpty || $[7] !== cssValueType || $[8] !== getValueAsNumber || $[9] !== handleSubmitValue || $[10] !== max || $[11] !== min || $[12] !== onBlur || $[13] !== unit || $[14] !== validator) {
+    t10 = (event_0) => {
+      const input = event_0.currentTarget;
+      inputRef.current = input;
+      if (onBlur) {
+        onBlur(event_0);
+      }
+      const currentValue_0 = input.value.trim();
+      if (allowEmpty && !currentValue_0) {
+        handleSubmitValue(event_0);
+        return;
+      }
+      const currentValueAsNumber = getValueAsNumber(currentValue_0);
+      const isCurrentValueFinite = Number.isFinite(currentValueAsNumber);
+      const defaultUnit = unit ? getUnitFromCSSValue({
         cssValueType,
-        getValueAsNumber,
-        handleSubmitValue,
-        max,
-        min,
-        onBlur,
-        unit,
-        validator,
-    ]);
-    const getNextValue = useCallback(({ currentValue, multiplier = 1, signum = 1, }) => {
-        const modifier = multiplier * step * signum;
-        const currentValueAsNumber = getValueAsNumber(currentValue);
-        // If currentValue isn’t numeric, don’t try to increment/decrement it
-        if (typeof currentValue === 'string' && Number.isNaN(currentValueAsNumber)) {
-            return currentValue;
-        }
-        let nextValue = currentValueAsNumber + modifier;
-        if (cssValueType === 'integer') {
-            nextValue = Math.floor(nextValue);
+        defaultUnit: unit,
+        value: submittedValueRef.current
+      }) : "";
+      if (!isCurrentValueFinite) {
+        let isValid = false;
+        if (validator instanceof RegExp) {
+          isValid = validator.test(currentValue_0);
+        } else {
+          if (validator) {
+            isValid = validator(currentValue_0);
+          }
         }
-        else {
-            nextValue = roundToPrecision(nextValue, 5);
+        if (isValid) {
+          handleSubmitValue(event_0);
+        } else {
+          input.value = submittedValueRef.current;
         }
-        if (typeof max === 'number' && Number.isFinite(max)) {
-            nextValue = Math.min(max, nextValue);
-        }
-        if (typeof min === 'number' && Number.isFinite(min)) {
-            nextValue = Math.max(min, nextValue);
+        return;
+      }
+      let normalizedValueAsNumber = currentValueAsNumber;
+      if (isCurrentValueFinite) {
+        if (min != null && currentValueAsNumber < min) {
+          normalizedValueAsNumber = min;
+        } else {
+          if (max != null && currentValueAsNumber > max) {
+            normalizedValueAsNumber = max;
+          } else {
+            if (cssValueType === "integer") {
+              normalizedValueAsNumber = Math.floor(currentValueAsNumber);
+            }
+          }
         }
-        const nextUnit = getUnitFromCSSValue({
-            cssValueType,
-            defaultUnit: unit,
-            value: currentValue,
+      }
+      if (normalizedValueAsNumber !== currentValueAsNumber) {
+        const currentUnit = getUnitFromCSSValue({
+          cssValueType,
+          defaultUnit,
+          value: currentValue_0
+        });
+        input.value = normalizedValueAsNumber + currentUnit;
+      } else {
+        input.value = getCSSValueWithUnit({
+          cssValueType,
+          defaultUnit,
+          value: currentValue_0
         });
-        return `${nextValue}${nextUnit}`;
-    }, [cssValueType, getValueAsNumber, max, min, step, unit]);
-    const handleKeyDown = useCallback((event) => {
-        var _a, _b;
-        const input = event.currentTarget;
-        inputRef.current = input;
-        if (onKeyDown)
-            onKeyDown(event);
-        const currentValue = (_b = (_a = input.value) !== null && _a !== void 0 ? _a : placeholder) !== null && _b !== void 0 ? _b : `0${unit}`;
-        let nextValue = '';
-        switch (event.key) {
-            case 'ArrowDown':
-            case 'ArrowUp':
-                nextValue = getNextValue({
-                    currentValue,
-                    multiplier: event.shiftKey ? 10 : 1,
-                    signum: event.key === 'ArrowUp' ? 1 : -1,
-                });
-                if (nextValue === currentValue)
-                    return;
-                event.stopPropagation();
-                event.preventDefault();
-                input.value = nextValue;
-                return;
-            case 'Enter':
-            case 'Escape':
-                if (event.key === 'Escape') {
-                    input.value = submittedValueRef.current;
-                }
-                input.blur();
-                return;
-            default:
-            // No default key handling
+      }
+      handleSubmitValue(event_0);
+    };
+    $[6] = allowEmpty;
+    $[7] = cssValueType;
+    $[8] = getValueAsNumber;
+    $[9] = handleSubmitValue;
+    $[10] = max;
+    $[11] = min;
+    $[12] = onBlur;
+    $[13] = unit;
+    $[14] = validator;
+    $[15] = t10;
+  } else {
+    t10 = $[15];
+  }
+  const handleBlur = t10;
+  let t11;
+  if ($[16] !== cssValueType || $[17] !== getValueAsNumber || $[18] !== max || $[19] !== min || $[20] !== step || $[21] !== unit) {
+    t11 = (t122) => {
+      const {
+        currentValue: currentValue_1,
+        multiplier: t132,
+        signum: t142
+      } = t122;
+      const multiplier = t132 === void 0 ? 1 : t132;
+      const signum = t142 === void 0 ? 1 : t142;
+      const modifier = multiplier * step * signum;
+      const currentValueAsNumber_0 = getValueAsNumber(currentValue_1);
+      if (typeof currentValue_1 === "string" && Number.isNaN(currentValueAsNumber_0)) {
+        return currentValue_1;
+      }
+      let nextValue = currentValueAsNumber_0 + modifier;
+      if (cssValueType === "integer") {
+        nextValue = Math.floor(nextValue);
+      } else {
+        nextValue = roundToPrecision(nextValue, 5);
+      }
+      if (typeof max === "number" && Number.isFinite(max)) {
+        nextValue = Math.min(max, nextValue);
+      }
+      if (typeof min === "number" && Number.isFinite(min)) {
+        nextValue = Math.max(min, nextValue);
+      }
+      const nextUnit = getUnitFromCSSValue({
+        cssValueType,
+        defaultUnit: unit,
+        value: currentValue_1
+      });
+      return `${nextValue}${nextUnit}`;
+    };
+    $[16] = cssValueType;
+    $[17] = getValueAsNumber;
+    $[18] = max;
+    $[19] = min;
+    $[20] = step;
+    $[21] = unit;
+    $[22] = t11;
+  } else {
+    t11 = $[22];
+  }
+  const getNextValue = t11;
+  let t12;
+  if ($[23] !== getNextValue || $[24] !== onKeyDown || $[25] !== placeholder || $[26] !== unit) {
+    t12 = (event_1) => {
+      const input_0 = event_1.currentTarget;
+      inputRef.current = input_0;
+      if (onKeyDown) {
+        onKeyDown(event_1);
+      }
+      const currentValue_2 = input_0.value ?? placeholder ?? `0${unit}`;
+      let nextValue_0;
+      switch (event_1.key) {
+        case "ArrowDown":
+        case "ArrowUp": {
+          nextValue_0 = getNextValue({
+            currentValue: currentValue_2,
+            multiplier: event_1.shiftKey ? 10 : 1,
+            signum: event_1.key === "ArrowUp" ? 1 : -1
+          });
+          if (nextValue_0 === currentValue_2) {
+            return;
+          }
+          event_1.stopPropagation();
+          event_1.preventDefault();
+          input_0.value = nextValue_0;
+          return;
         }
-    }, [getNextValue, onKeyDown, placeholder, unit]);
-    const handleKeyUp = useCallback((event) => {
-        if (onKeyUp)
-            onKeyUp(event);
-        // If this is the key up from ↑ or ↓ keys, time to handleSubmitValue
-        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
-            handleSubmitValue(event);
+        case "Enter":
+        case "Escape": {
+          if (event_1.key === "Escape") {
+            input_0.value = submittedValueRef.current;
+          }
+          input_0.blur();
+          return;
         }
-    }, [handleSubmitValue, onKeyUp]);
-    return (React.createElement("label", { "aria-label": label ? undefined : title, className: clsx(ROOT_CLASS_NAME, className, { disabled }), title: title },
-        icon == null ? null : (React.createElement("div", { className: `${ROOT_CLASS_NAME}-icon` }, icon)),
-        label ? (React.createElement("div", { className: `${ROOT_CLASS_NAME}-label` },
-            React.createElement("p", { className: `${ROOT_CLASS_NAME}-label-text` }, label))) : null,
-        React.createElement("div", { className: `${ROOT_CLASS_NAME}-value` },
-            React.createElement(InputText, { disabled: disabled, initialValue: value, name: name, onBlur: handleBlur, onChange: onChange, onFocus: onFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, placeholder: placeholder, ref: inputRef, selectTextOnFocus: true, tabIndex: tabIndex }))));
+      }
+    };
+    $[23] = getNextValue;
+    $[24] = onKeyDown;
+    $[25] = placeholder;
+    $[26] = unit;
+    $[27] = t12;
+  } else {
+    t12 = $[27];
+  }
+  const handleKeyDown = t12;
+  let t13;
+  if ($[28] !== handleSubmitValue || $[29] !== onKeyUp) {
+    t13 = (event_2) => {
+      if (onKeyUp) {
+        onKeyUp(event_2);
+      }
+      if (event_2.key === "ArrowUp" || event_2.key === "ArrowDown") {
+        handleSubmitValue(event_2);
+      }
+    };
+    $[28] = handleSubmitValue;
+    $[29] = onKeyUp;
+    $[30] = t13;
+  } else {
+    t13 = $[30];
+  }
+  const handleKeyUp = t13;
+  const t14 = label ? void 0 : title;
+  let t15;
+  if ($[31] !== className || $[32] !== disabled) {
+    t15 = clsx(ROOT_CLASS_NAME, className, {
+      disabled
+    });
+    $[31] = className;
+    $[32] = disabled;
+    $[33] = t15;
+  } else {
+    t15 = $[33];
+  }
+  let t16;
+  if ($[34] !== icon) {
+    t16 = icon == null ? null : /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME}-icon`, children: icon });
+    $[34] = icon;
+    $[35] = t16;
+  } else {
+    t16 = $[35];
+  }
+  let t17;
+  if ($[36] !== label) {
+    t17 = label ? /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME}-label`, children: /* @__PURE__ */ jsx("p", { className: `${ROOT_CLASS_NAME}-label-text`, children: label }) }) : null;
+    $[36] = label;
+    $[37] = t17;
+  } else {
+    t17 = $[37];
+  }
+  let t18;
+  if ($[38] !== disabled || $[39] !== handleBlur || $[40] !== handleKeyDown || $[41] !== handleKeyUp || $[42] !== name || $[43] !== onChange || $[44] !== onFocus || $[45] !== placeholder || $[46] !== tabIndex || $[47] !== value) {
+    t18 = /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME}-value`, children: /* @__PURE__ */ jsx(InputText, { disabled, initialValue: value, name, onBlur: handleBlur, onChange, onFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, placeholder, ref: inputRef, selectTextOnFocus: true, tabIndex }) });
+    $[38] = disabled;
+    $[39] = handleBlur;
+    $[40] = handleKeyDown;
+    $[41] = handleKeyUp;
+    $[42] = name;
+    $[43] = onChange;
+    $[44] = onFocus;
+    $[45] = placeholder;
+    $[46] = tabIndex;
+    $[47] = value;
+    $[48] = t18;
+  } else {
+    t18 = $[48];
+  }
+  let t19;
+  if ($[49] !== t14 || $[50] !== t15 || $[51] !== t16 || $[52] !== t17 || $[53] !== t18 || $[54] !== title) {
+    t19 = /* @__PURE__ */ jsxs("label", { "aria-label": t14, className: t15, title, children: [
+      t16,
+      t17,
+      t18
+    ] });
+    $[49] = t14;
+    $[50] = t15;
+    $[51] = t16;
+    $[52] = t17;
+    $[53] = t18;
+    $[54] = title;
+    $[55] = t19;
+  } else {
+    t19 = $[55];
+  }
+  return t19;
 });
-//# sourceMappingURL=CSSValueInput.js.map
+export {
+  CSSValueInput as default
+};
+//# sourceMappingURL=CSSValueInput.js.map

package/dist/CSSValueInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CSSValueInput.js","sourceRoot":"","sources":["../src/CSSValueInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CSSValueInput.js","sources":["../src/CSSValueInput.tsx"],"sourcesContent":["import {\n    type CSSValueType,\n    DEFAULT_CSS_VALUE_TYPE,\n    DEFAULT_UNIT_BY_CSS_VALUE_TYPE,\n    getCSSValueAsNumber,\n    getCSSValueWithUnit,\n    getUnitFromCSSValue,\n    roundToPrecision,\n} from '@acusti/css-values';\nimport InputText from '@acusti/input-text';\nimport clsx from 'clsx';\nimport {\n    type ChangeEvent,\n    type FocusEvent,\n    forwardRef,\n    type KeyboardEvent,\n    type ReactNode,\n    type SyntheticEvent,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n} from 'react';\n\nexport type Props = {\n    /**\n     * Boolean indicating if the user can submit an empty value (i.e. clear\n     * the value). Defaults to true.\n     */\n    allowEmpty?: boolean;\n    className?: string;\n    cssValueType?: CSSValueType;\n    disabled?: boolean;\n    /**\n     * Function that receives a value and converts it to its numerical equivalent\n     * (i.e. '12px' → 12). Defaults to parseFloat().\n     */\n    getValueAsNumber?: (value: number | string) => number;\n    icon?: ReactNode;\n    label?: string;\n    max?: number;\n    min?: number;\n    name?: string;\n    onBlur?: (event: FocusEvent<HTMLInputElement>) => unknown;\n    onChange?: (event: ChangeEvent<HTMLInputElement>) => unknown;\n    onFocus?: (event: FocusEvent<HTMLInputElement>) => unknown;\n    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => unknown;\n    onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => unknown;\n    /**\n     * Custom event handler triggered when the user presses enter/return\n     * or blurs the input after making a change. Hitting esc will restore\n     * the previous submitted value or original value.\n     */\n    onSubmitValue: (value: string) => unknown;\n    placeholder?: string;\n    step?: number;\n    tabIndex?: number;\n    title?: string;\n    unit?: string;\n    /** Regex or validator function to validate non-numeric values */\n    validator?: ((value: string) => boolean) | RegExp;\n    value?: string;\n};\n\ntype InputRef = HTMLInputElement | null;\n\nconst ROOT_CLASS_NAME = 'cssvalueinput';\n\nexport default forwardRef<HTMLInputElement, Props>(function CSSValueInput(\n    {\n        allowEmpty = true,\n        className,\n        cssValueType = DEFAULT_CSS_VALUE_TYPE,\n        disabled,\n        getValueAsNumber = getCSSValueAsNumber,\n        icon,\n        label,\n        max,\n        min,\n        name,\n        onBlur,\n        onChange,\n        onFocus,\n        onKeyDown,\n        onKeyUp,\n        onSubmitValue,\n        placeholder,\n        step = 1,\n        tabIndex,\n        title,\n        unit = DEFAULT_UNIT_BY_CSS_VALUE_TYPE[cssValueType],\n        validator,\n        value: valueFromProps,\n    }: Props,\n    ref,\n) {\n    const inputRef = useRef<InputRef>(null);\n    useImperativeHandle<InputRef, InputRef>(ref, () => inputRef.current);\n    // props.value should be a string; if it’s a number, convert it here\n    const value =\n        typeof valueFromProps === 'number' && !Number.isNaN(valueFromProps)\n            ? `${valueFromProps}`\n            : valueFromProps;\n    const submittedValueRef = useRef<string>(value ?? '');\n\n    useEffect(() => {\n        submittedValueRef.current = value ?? '';\n    }, [value]);\n\n    const handleSubmitValue = (event: SyntheticEvent<HTMLInputElement>) => {\n        const currentValue = event.currentTarget.value;\n        // Store last submittedValue (used to reset value on invalid input)\n        submittedValueRef.current = currentValue;\n        onSubmitValue(currentValue);\n    };\n\n    const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n        const input = event.currentTarget;\n        inputRef.current = input;\n        if (onBlur) onBlur(event);\n\n        const currentValue = input.value.trim();\n\n        // If allowEmpty and value is empty, skip all validation + normalization\n        if (allowEmpty && !currentValue) {\n            handleSubmitValue(event);\n            return;\n        }\n\n        const currentValueAsNumber = getValueAsNumber(currentValue);\n        const isCurrentValueFinite = Number.isFinite(currentValueAsNumber);\n        // Inherit unit from last submitted value unless default is unitless;\n        // ensures that submitting a new value with no unit doesn’t add a unit\n        const defaultUnit = unit\n            ? getUnitFromCSSValue({\n                  cssValueType,\n                  defaultUnit: unit,\n                  value: submittedValueRef.current,\n              })\n            : '';\n\n        if (!isCurrentValueFinite) {\n            let isValid = false;\n            if (validator instanceof RegExp) {\n                isValid = validator.test(currentValue);\n            } else if (validator) {\n                isValid = validator(currentValue);\n            }\n\n            if (isValid) {\n                handleSubmitValue(event);\n            } else {\n                // If current value isn’t valid, revert to last submitted value\n                input.value = submittedValueRef.current;\n            }\n\n            return;\n        }\n\n        // Normalize value by applying min/max and integer constraints\n        let normalizedValueAsNumber = currentValueAsNumber;\n\n        if (isCurrentValueFinite) {\n            if (min != null && currentValueAsNumber < min) {\n                normalizedValueAsNumber = min;\n            } else if (max != null && currentValueAsNumber > max) {\n                normalizedValueAsNumber = max;\n            } else if (cssValueType === 'integer') {\n                normalizedValueAsNumber = Math.floor(currentValueAsNumber);\n            }\n        }\n\n        if (normalizedValueAsNumber !== currentValueAsNumber) {\n            const currentUnit = getUnitFromCSSValue({\n                cssValueType,\n                defaultUnit,\n                value: currentValue,\n            });\n            input.value = normalizedValueAsNumber + currentUnit;\n        } else {\n            input.value = getCSSValueWithUnit({\n                cssValueType,\n                defaultUnit,\n                value: currentValue,\n            });\n        }\n\n        handleSubmitValue(event);\n    };\n\n    const getNextValue = ({\n        currentValue,\n        multiplier = 1,\n        signum = 1,\n    }: {\n        currentValue: number | string;\n        multiplier?: number;\n        signum?: number;\n    }) => {\n        const modifier = multiplier * step * signum;\n        const currentValueAsNumber = getValueAsNumber(currentValue);\n        // If currentValue isn’t numeric, don’t try to increment/decrement it\n        if (typeof currentValue === 'string' && Number.isNaN(currentValueAsNumber)) {\n            return currentValue;\n        }\n\n        let nextValue = currentValueAsNumber + modifier;\n        if (cssValueType === 'integer') {\n            nextValue = Math.floor(nextValue);\n        } else {\n            nextValue = roundToPrecision(nextValue, 5);\n        }\n\n        if (typeof max === 'number' && Number.isFinite(max)) {\n            nextValue = Math.min(max, nextValue);\n        }\n\n        if (typeof min === 'number' && Number.isFinite(min)) {\n            nextValue = Math.max(min, nextValue);\n        }\n\n        const nextUnit = getUnitFromCSSValue({\n            cssValueType,\n            defaultUnit: unit,\n            value: currentValue,\n        });\n        return `${nextValue}${nextUnit}`;\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n        const input = event.currentTarget;\n        inputRef.current = input;\n        if (onKeyDown) onKeyDown(event);\n\n        const currentValue = input.value ?? placeholder ?? `0${unit}`;\n        let nextValue = '';\n\n        switch (event.key) {\n            case 'ArrowDown':\n            case 'ArrowUp':\n                nextValue = getNextValue({\n                    currentValue,\n                    multiplier: event.shiftKey ? 10 : 1,\n                    signum: event.key === 'ArrowUp' ? 1 : -1,\n                });\n\n                if (nextValue === currentValue) return;\n\n                event.stopPropagation();\n                event.preventDefault();\n\n                input.value = nextValue;\n                return;\n            case 'Enter':\n            case 'Escape':\n                if (event.key === 'Escape') {\n                    input.value = submittedValueRef.current;\n                }\n                input.blur();\n                return;\n            default:\n            // No default key handling\n        }\n    };\n\n    const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n        if (onKeyUp) onKeyUp(event);\n        // If this is the key up from ↑ or ↓ keys, time to handleSubmitValue\n        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n            handleSubmitValue(event);\n        }\n    };\n\n    return (\n        <label\n            aria-label={label ? undefined : title}\n            className={clsx(ROOT_CLASS_NAME, className, { disabled })}\n            title={title}\n        >\n            {icon == null ? null : (\n                <div className={`${ROOT_CLASS_NAME}-icon`}>{icon}</div>\n            )}\n            {label ? (\n                <div className={`${ROOT_CLASS_NAME}-label`}>\n                    <p className={`${ROOT_CLASS_NAME}-label-text`}>{label}</p>\n                </div>\n            ) : null}\n            <div className={`${ROOT_CLASS_NAME}-value`}>\n                <InputText\n                    disabled={disabled}\n                    initialValue={value}\n                    name={name}\n                    onBlur={handleBlur}\n                    onChange={onChange}\n                    onFocus={onFocus}\n                    onKeyDown={handleKeyDown}\n                    onKeyUp={handleKeyUp}\n                    placeholder={placeholder}\n                    ref={inputRef}\n                    selectTextOnFocus\n                    tabIndex={tabIndex}\n                />\n            </div>\n        </label>\n    );\n});\n"],"names":["ROOT_CLASS_NAME","forwardRef","CSSValueInput","t0","ref","$","_c","allowEmpty","t1","className","cssValueType","t2","disabled","getValueAsNumber","t3","icon","label","max","min","name","onBlur","onChange","onFocus","onKeyDown","onKeyUp","onSubmitValue","placeholder","step","t4","tabIndex","title","unit","t5","validator","value","valueFromProps","undefined","DEFAULT_CSS_VALUE_TYPE","getCSSValueAsNumber","DEFAULT_UNIT_BY_CSS_VALUE_TYPE","inputRef","useRef","t6","Symbol","for","current","useImperativeHandle","Number","isNaN","submittedValueRef","t7","t8","useEffect","t9","event","currentValue","currentTarget","handleSubmitValue","t10","event_0","input","currentValue_0","trim","currentValueAsNumber","isCurrentValueFinite","isFinite","defaultUnit","getUnitFromCSSValue","isValid","RegExp","test","normalizedValueAsNumber","currentUnit","getCSSValueWithUnit","handleBlur","t11","t12","currentValue_1","multiplier","t13","signum","t14","modifier","currentValueAsNumber_0","nextValue","nextUnit","getNextValue","event_1","input_0","currentValue_2","nextValue_0","key","shiftKey","stopPropagation","preventDefault","blur","handleKeyDown","event_2","handleKeyUp","t15","clsx","t16","t17","t18","t19"],"mappings":"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"}

package/package.json

@@ -1,14 +1,13 @@
 {
     "name": "@acusti/css-value-input",
-    "version": "1.1.2",
+    "version": "2.1.0",
     "type": "module",
     "sideEffects": false,
     "exports": "./dist/CSSValueInput.js",
     "main": "./dist/CSSValueInput.js",
     "types": "./dist/CSSValueInput.d.ts",
     "files": [
-        "dist",
-        "src"
+        "dist"
     ],
     "description": "React component that renders a text input that can take and update a CSS value of a particular type with a default unit",
     "keywords": [
@@ -21,11 +20,11 @@
         "input-text",
         "ssr",
         "typescript",
-        "ts",
-        "flow"
+        "ts"
     ],
     "scripts": {
-        "test": "vitest"
+        "test": "vitest",
+        "build": "vite build"
     },
     "repository": {
         "type": "git",
@@ -43,19 +42,23 @@
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^14.6.1",
         "@types/react": "^19.1.6",
-        "happy-dom": "^17.4.7",
+        "@vitejs/plugin-react": "^4.5.0",
+        "babel-plugin-react-compiler": "rc",
+        "happy-dom": "^17.5.6",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "typescript": "5.8.3",
+        "unplugin-dts": "^1.0.0-beta.0",
+        "vite": "^6.3.5",
         "vitest": "^3.1.4"
     },
     "dependencies": {
-        "@acusti/css-values": "^1.1.0",
-        "@acusti/input-text": "^1.11.0",
+        "@acusti/css-values": "^1.2.0",
+        "@acusti/input-text": "^2.1.0",
         "clsx": "^2"
     },
     "peerDependencies": {
-        "react": "^16.8 || ^17 || ^18 || ^19 || ~0.0.0-experimental < 0.0.0-f",
-        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ~0.0.0-experimental < 0.0.0-f"
+        "react": "^19 || ~0.0.0-experimental < 0.0.0-f",
+        "react-dom": "^19 || ~0.0.0-experimental < 0.0.0-f"
     }
 }

package/dist/CSSValueInput.js.flow

@@ -1,58 +0,0 @@
-/**
- * Flowtype definitions for CSSValueInput
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-
-import { type, CSSValueType } from "@acusti/css-values";
-import * as React from "react";
-export type Props = {|
-  /**
-   * Boolean indicating if the user can submit an empty value (i.e. clear
-   * the value). Defaults to true.
-   */
-  allowEmpty?: boolean,
-  className?: string,
-  cssValueType?: CSSValueType,
-  disabled?: boolean,
-
-  /**
-   * Function that receives a value and converts it to its numerical equivalent
-   * (i.e. '12px' → 12). Defaults to parseFloat().
-   */
-  getValueAsNumber?: (value: number | string) => number,
-  icon?: React.Node,
-  label?: string,
-  max?: number,
-  min?: number,
-  name?: string,
-  onBlur?: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed,
-  onChange?: (event: SyntheticInputEvent<HTMLInputElement>) => mixed,
-  onFocus?: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed,
-  onKeyDown?: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
-  onKeyUp?: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
-
-  /**
-   * Custom event handler triggered when the user presses enter/return
-   * or blurs the input after making a change. Hitting esc will restore
-   * the previous submitted value or original value.
-   */
-  onSubmitValue: (value: string) => mixed,
-  placeholder?: string,
-  step?: number,
-  tabIndex?: number,
-  title?: string,
-  unit?: string,
-
-  /**
-   * Regex or validator function to validate non-numeric values
-   */
-  validator?: ((value: string) => boolean) | RegExp,
-  value?: string,
-|};
-declare var _default: React.StatelessFunctionalComponent<{|
-  ...Props,
-  ...{| ref?: HTMLInputElement |},
-|}>;
-declare export default typeof _default;

package/dist/CSSValueInput.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/CSSValueInput.test.js

@@ -1,97 +0,0 @@
-// @vitest-environment happy-dom
-import { cleanup, render, screen } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
-import React from 'react';
-import { afterEach, describe, expect, it } from 'vitest';
-import CSSValueInput from './CSSValueInput.js';
-const noop = () => { }; // eslint-disable-line @typescript-eslint/no-empty-function
-afterEach(cleanup);
-describe('CSSValueInput.tsx', () => {
-    it('renders a text input with the given props.value', () => {
-        render(React.createElement(CSSValueInput, { onSubmitValue: noop, value: "24px" }));
-        const input = screen.getByRole('textbox');
-        expect(input.value).toBe('24px');
-    });
-    it('handles ↑/↓ keys to increment/decrement by 1 and ⇧↑/⇧↓ to increment/decrement by 10 (preserving the CSS unit)', async () => {
-        const user = userEvent.setup();
-        render(React.createElement(CSSValueInput, { onSubmitValue: noop, value: "75%" }));
-        const input = screen.getByRole('textbox');
-        expect(input.value).toBe('75%');
-        await user.type(input, '{ArrowUp}');
-        expect(input.value).toBe('76%');
-        await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
-        expect(input.value).toBe('86%');
-        await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
-        expect(input.value).toBe('96%');
-        await user.type(input, '{ArrowUp}');
-        expect(input.value).toBe('97%');
-        await user.type(input, '{Shift>}{ArrowDown}{/Shift}');
-        expect(input.value).toBe('87%');
-        await user.type(input, '{Shift>}{ArrowDown}{/Shift}');
-        expect(input.value).toBe('77%');
-    });
-    it('supports custom props.step for ↑/↓ key handling', async () => {
-        const user = userEvent.setup();
-        render(React.createElement(CSSValueInput, { onSubmitValue: noop, step: 0.1, value: "2rem" }));
-        const input = screen.getByRole('textbox');
-        expect(input.value).toBe('2rem');
-        await user.type(input, '{ArrowUp}');
-        expect(input.value).toBe('2.1rem');
-        await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
-        expect(input.value).toBe('3.1rem');
-        await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
-        expect(input.value).toBe('4.1rem');
-        await user.type(input, '{ArrowUp}');
-        expect(input.value).toBe('4.2rem');
-        await user.type(input, '{Shift>}{ArrowDown}{/Shift}');
-        expect(input.value).toBe('3.2rem');
-        await user.type(input, '{Shift>}{ArrowDown}{/Shift}');
-        expect(input.value).toBe('2.2rem');
-    });
-    it('uses props.unit as default unit when unit is missing', async () => {
-        const user = userEvent.setup();
-        render(React.createElement(CSSValueInput, { allowEmpty: true, onSubmitValue: noop, unit: "px", value: "" }));
-        const input = screen.getByRole('textbox');
-        expect(input.value).toBe('');
-        await user.type(input, '14{Enter}');
-        expect(input.value).toBe('14px');
-    });
-    it('preserves last entered unit if different from props.unit when unit is missing', async () => {
-        const user = userEvent.setup();
-        render(React.createElement(CSSValueInput, { allowEmpty: true, onSubmitValue: noop, unit: "px", value: "" }));
-        const input = screen.getByRole('textbox');
-        expect(input.value).toBe('');
-        await user.type(input, '25vw{Enter}');
-        expect(input.value).toBe('25vw');
-        await user.type(input, '50{Enter}');
-        expect(input.value).toBe('50vw');
-    });
-    it('treats value as numeric if props.unit is an empty string', async () => {
-        const user = userEvent.setup();
-        render(React.createElement(CSSValueInput, { allowEmpty: true, onSubmitValue: noop, unit: "", value: "100" }));
-        const input = screen.getByRole('textbox');
-        expect(input.value).toBe('100');
-        await user.type(input, '1{Enter}');
-        expect(input.value).toBe('1');
-        await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
-        expect(input.value).toBe('11');
-        await user.clear(input);
-        expect(input.value).toBe('');
-        await user.type(input, '200{Enter}');
-        expect(input.value).toBe('200');
-    });
-    it('updates default unit as props.unit and props.value changes', async () => {
-        const user = userEvent.setup();
-        const { rerender } = render(React.createElement(CSSValueInput, { onSubmitValue: noop, unit: "px", value: "12px" }));
-        const input = screen.getByRole('textbox');
-        rerender(React.createElement(CSSValueInput, { onSubmitValue: noop, unit: "", value: "4" }));
-        expect(input.value).toBe('4');
-        await user.type(input, '25{Enter}');
-        expect(input.value).toBe('25');
-        rerender(React.createElement(CSSValueInput, { onSubmitValue: noop, unit: "rad", value: "3rad" }));
-        expect(input.value).toBe('3rad');
-        await user.type(input, '-4.1{Enter}');
-        expect(input.value).toBe('-4.1rad');
-    });
-});
-//# sourceMappingURL=CSSValueInput.test.js.map

package/dist/CSSValueInput.test.js.flow

@@ -1,6 +0,0 @@
-/**
- * Flowtype definitions for CSSValueInput.test
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */

package/dist/CSSValueInput.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CSSValueInput.test.js","sourceRoot":"","sources":["../src/CSSValueInput.test.tsx"],"names":[],"mappings":"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"}

package/src/CSSValueInput.test.tsx

@@ -1,108 +0,0 @@
-// @vitest-environment happy-dom
-import { cleanup, render, screen } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
-import React from 'react';
-import { afterEach, describe, expect, it } from 'vitest';
-
-import CSSValueInput from './CSSValueInput.js';
-
-const noop = () => {}; // eslint-disable-line @typescript-eslint/no-empty-function
-
-afterEach(cleanup);
-
-describe('CSSValueInput.tsx', () => {
-    it('renders a text input with the given props.value', () => {
-        render(<CSSValueInput onSubmitValue={noop} value="24px" />);
-        const input = screen.getByRole('textbox') as HTMLInputElement;
-        expect(input.value).toBe('24px');
-    });
-
-    it('handles ↑/↓ keys to increment/decrement by 1 and ⇧↑/⇧↓ to increment/decrement by 10 (preserving the CSS unit)', async () => {
-        const user = userEvent.setup();
-        render(<CSSValueInput onSubmitValue={noop} value="75%" />);
-        const input = screen.getByRole('textbox') as HTMLInputElement;
-        expect(input.value).toBe('75%');
-        await user.type(input, '{ArrowUp}');
-        expect(input.value).toBe('76%');
-        await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
-        expect(input.value).toBe('86%');
-        await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
-        expect(input.value).toBe('96%');
-        await user.type(input, '{ArrowUp}');
-        expect(input.value).toBe('97%');
-        await user.type(input, '{Shift>}{ArrowDown}{/Shift}');
-        expect(input.value).toBe('87%');
-        await user.type(input, '{Shift>}{ArrowDown}{/Shift}');
-        expect(input.value).toBe('77%');
-    });
-
-    it('supports custom props.step for ↑/↓ key handling', async () => {
-        const user = userEvent.setup();
-        render(<CSSValueInput onSubmitValue={noop} step={0.1} value="2rem" />);
-        const input = screen.getByRole('textbox') as HTMLInputElement;
-        expect(input.value).toBe('2rem');
-        await user.type(input, '{ArrowUp}');
-        expect(input.value).toBe('2.1rem');
-        await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
-        expect(input.value).toBe('3.1rem');
-        await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
-        expect(input.value).toBe('4.1rem');
-        await user.type(input, '{ArrowUp}');
-        expect(input.value).toBe('4.2rem');
-        await user.type(input, '{Shift>}{ArrowDown}{/Shift}');
-        expect(input.value).toBe('3.2rem');
-        await user.type(input, '{Shift>}{ArrowDown}{/Shift}');
-        expect(input.value).toBe('2.2rem');
-    });
-
-    it('uses props.unit as default unit when unit is missing', async () => {
-        const user = userEvent.setup();
-        render(<CSSValueInput allowEmpty onSubmitValue={noop} unit="px" value="" />);
-        const input = screen.getByRole('textbox') as HTMLInputElement;
-        expect(input.value).toBe('');
-        await user.type(input, '14{Enter}');
-        expect(input.value).toBe('14px');
-    });
-
-    it('preserves last entered unit if different from props.unit when unit is missing', async () => {
-        const user = userEvent.setup();
-        render(<CSSValueInput allowEmpty onSubmitValue={noop} unit="px" value="" />);
-        const input = screen.getByRole('textbox') as HTMLInputElement;
-        expect(input.value).toBe('');
-        await user.type(input, '25vw{Enter}');
-        expect(input.value).toBe('25vw');
-        await user.type(input, '50{Enter}');
-        expect(input.value).toBe('50vw');
-    });
-
-    it('treats value as numeric if props.unit is an empty string', async () => {
-        const user = userEvent.setup();
-        render(<CSSValueInput allowEmpty onSubmitValue={noop} unit="" value="100" />);
-        const input = screen.getByRole('textbox') as HTMLInputElement;
-        expect(input.value).toBe('100');
-        await user.type(input, '1{Enter}');
-        expect(input.value).toBe('1');
-        await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
-        expect(input.value).toBe('11');
-        await user.clear(input);
-        expect(input.value).toBe('');
-        await user.type(input, '200{Enter}');
-        expect(input.value).toBe('200');
-    });
-
-    it('updates default unit as props.unit and props.value changes', async () => {
-        const user = userEvent.setup();
-        const { rerender } = render(
-            <CSSValueInput onSubmitValue={noop} unit="px" value="12px" />,
-        );
-        const input = screen.getByRole('textbox') as HTMLInputElement;
-        rerender(<CSSValueInput onSubmitValue={noop} unit="" value="4" />);
-        expect(input.value).toBe('4');
-        await user.type(input, '25{Enter}');
-        expect(input.value).toBe('25');
-        rerender(<CSSValueInput onSubmitValue={noop} unit="rad" value="3rad" />);
-        expect(input.value).toBe('3rad');
-        await user.type(input, '-4.1{Enter}');
-        expect(input.value).toBe('-4.1rad');
-    });
-});

package/src/CSSValueInput.tsx

@@ -1,321 +0,0 @@
-import {
-    type CSSValueType,
-    DEFAULT_CSS_VALUE_TYPE,
-    DEFAULT_UNIT_BY_CSS_VALUE_TYPE,
-    getCSSValueAsNumber,
-    getCSSValueWithUnit,
-    getUnitFromCSSValue,
-    roundToPrecision,
-} from '@acusti/css-values';
-import InputText from '@acusti/input-text';
-import clsx from 'clsx';
-import * as React from 'react';
-
-export type Props = {
-    /**
-     * Boolean indicating if the user can submit an empty value (i.e. clear
-     * the value). Defaults to true.
-     */
-    allowEmpty?: boolean;
-    className?: string;
-    cssValueType?: CSSValueType;
-    disabled?: boolean;
-    /**
-     * Function that receives a value and converts it to its numerical equivalent
-     * (i.e. '12px' → 12). Defaults to parseFloat().
-     */
-    getValueAsNumber?: (value: number | string) => number;
-    icon?: React.ReactNode;
-    label?: string;
-    max?: number;
-    min?: number;
-    name?: string;
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
-    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
-    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
-    /**
-     * Custom event handler triggered when the user presses enter/return
-     * or blurs the input after making a change. Hitting esc will restore
-     * the previous submitted value or original value.
-     */
-    onSubmitValue: (value: string) => unknown;
-    placeholder?: string;
-    step?: number;
-    tabIndex?: number;
-    title?: string;
-    unit?: string;
-    /** Regex or validator function to validate non-numeric values */
-    validator?: ((value: string) => boolean) | RegExp;
-    value?: string;
-};
-
-type InputRef = HTMLInputElement | null;
-
-const { useCallback, useEffect, useImperativeHandle, useRef } = React;
-
-const ROOT_CLASS_NAME = 'cssvalueinput';
-
-export default React.forwardRef<HTMLInputElement, Props>(function CSSValueInput(
-    {
-        allowEmpty = true,
-        className,
-        cssValueType = DEFAULT_CSS_VALUE_TYPE,
-        disabled,
-        getValueAsNumber = getCSSValueAsNumber,
-        icon,
-        label,
-        max,
-        min,
-        name,
-        onBlur,
-        onChange,
-        onFocus,
-        onKeyDown,
-        onKeyUp,
-        onSubmitValue,
-        placeholder,
-        step = 1,
-        tabIndex,
-        title,
-        unit = DEFAULT_UNIT_BY_CSS_VALUE_TYPE[cssValueType],
-        validator,
-        value,
-    }: Props,
-    ref,
-) {
-    const inputRef = useRef<InputRef>(null);
-    useImperativeHandle<InputRef, InputRef>(ref, () => inputRef.current);
-    // props.value should be a string; if it’s a number, convert it here
-    if (typeof value === 'number' && !Number.isNaN(value)) {
-        value = `${value}`;
-    }
-    const submittedValueRef = useRef<string>(value ?? '');
-
-    useEffect(() => {
-        submittedValueRef.current = value ?? '';
-    }, [value]);
-
-    const handleSubmitValue = useCallback(
-        (event: React.SyntheticEvent<HTMLInputElement>) => {
-            const currentValue = event.currentTarget.value;
-            // Store last submittedValue (used to reset value on invalid input)
-            submittedValueRef.current = currentValue;
-            onSubmitValue(currentValue);
-        },
-        [onSubmitValue],
-    );
-
-    const handleBlur = useCallback(
-        (event: React.FocusEvent<HTMLInputElement>) => {
-            const input = event.currentTarget;
-            inputRef.current = input;
-            if (onBlur) onBlur(event);
-
-            const currentValue = input.value.trim();
-
-            // If allowEmpty and value is empty, skip all validation + normalization
-            if (allowEmpty && !currentValue) {
-                handleSubmitValue(event);
-                return;
-            }
-
-            const currentValueAsNumber = getValueAsNumber(currentValue);
-            const isCurrentValueFinite = Number.isFinite(currentValueAsNumber);
-            // Inherit unit from last submitted value unless default is unitless;
-            // ensures that submitting a new value with no unit doesn’t add a unit
-            const defaultUnit = unit
-                ? getUnitFromCSSValue({
-                      cssValueType,
-                      defaultUnit: unit,
-                      value: submittedValueRef.current,
-                  })
-                : '';
-
-            if (!isCurrentValueFinite) {
-                let isValid = false;
-                if (validator instanceof RegExp) {
-                    isValid = validator.test(currentValue);
-                } else if (validator) {
-                    isValid = validator(currentValue);
-                }
-
-                if (isValid) {
-                    handleSubmitValue(event);
-                } else {
-                    // If current value isn’t valid, revert to last submitted value
-                    input.value = submittedValueRef.current;
-                }
-
-                return;
-            }
-
-            // Normalize value by applying min/max and integer constraints
-            let normalizedValueAsNumber = currentValueAsNumber;
-
-            if (isCurrentValueFinite) {
-                if (min != null && currentValueAsNumber < min) {
-                    normalizedValueAsNumber = min;
-                } else if (max != null && currentValueAsNumber > max) {
-                    normalizedValueAsNumber = max;
-                } else if (cssValueType === 'integer') {
-                    normalizedValueAsNumber = Math.floor(currentValueAsNumber);
-                }
-            }
-
-            if (normalizedValueAsNumber !== currentValueAsNumber) {
-                const currentUnit = getUnitFromCSSValue({
-                    cssValueType,
-                    defaultUnit,
-                    value: currentValue,
-                });
-                input.value = normalizedValueAsNumber + currentUnit;
-            } else {
-                input.value = getCSSValueWithUnit({
-                    cssValueType,
-                    defaultUnit,
-                    value: currentValue,
-                });
-            }
-
-            handleSubmitValue(event);
-        },
-        [
-            allowEmpty,
-            cssValueType,
-            getValueAsNumber,
-            handleSubmitValue,
-            max,
-            min,
-            onBlur,
-            unit,
-            validator,
-        ],
-    );
-
-    const getNextValue = useCallback(
-        ({
-            currentValue,
-            multiplier = 1,
-            signum = 1,
-        }: {
-            currentValue: number | string;
-            multiplier?: number;
-            signum?: number;
-        }) => {
-            const modifier = multiplier * step * signum;
-            const currentValueAsNumber = getValueAsNumber(currentValue);
-            // If currentValue isn’t numeric, don’t try to increment/decrement it
-            if (typeof currentValue === 'string' && Number.isNaN(currentValueAsNumber)) {
-                return currentValue;
-            }
-
-            let nextValue = currentValueAsNumber + modifier;
-            if (cssValueType === 'integer') {
-                nextValue = Math.floor(nextValue);
-            } else {
-                nextValue = roundToPrecision(nextValue, 5);
-            }
-
-            if (typeof max === 'number' && Number.isFinite(max)) {
-                nextValue = Math.min(max, nextValue);
-            }
-
-            if (typeof min === 'number' && Number.isFinite(min)) {
-                nextValue = Math.max(min, nextValue);
-            }
-
-            const nextUnit = getUnitFromCSSValue({
-                cssValueType,
-                defaultUnit: unit,
-                value: currentValue,
-            });
-            return `${nextValue}${nextUnit}`;
-        },
-        [cssValueType, getValueAsNumber, max, min, step, unit],
-    );
-
-    const handleKeyDown = useCallback(
-        (event: React.KeyboardEvent<HTMLInputElement>) => {
-            const input = event.currentTarget;
-            inputRef.current = input;
-            if (onKeyDown) onKeyDown(event);
-
-            const currentValue = input.value ?? placeholder ?? `0${unit}`;
-            let nextValue = '';
-
-            switch (event.key) {
-                case 'ArrowDown':
-                case 'ArrowUp':
-                    nextValue = getNextValue({
-                        currentValue,
-                        multiplier: event.shiftKey ? 10 : 1,
-                        signum: event.key === 'ArrowUp' ? 1 : -1,
-                    });
-
-                    if (nextValue === currentValue) return;
-
-                    event.stopPropagation();
-                    event.preventDefault();
-
-                    input.value = nextValue;
-                    return;
-                case 'Enter':
-                case 'Escape':
-                    if (event.key === 'Escape') {
-                        input.value = submittedValueRef.current;
-                    }
-                    input.blur();
-                    return;
-                default:
-                // No default key handling
-            }
-        },
-        [getNextValue, onKeyDown, placeholder, unit],
-    );
-
-    const handleKeyUp = useCallback(
-        (event: React.KeyboardEvent<HTMLInputElement>) => {
-            if (onKeyUp) onKeyUp(event);
-            // If this is the key up from ↑ or ↓ keys, time to handleSubmitValue
-            if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
-                handleSubmitValue(event);
-            }
-        },
-        [handleSubmitValue, onKeyUp],
-    );
-
-    return (
-        <label
-            aria-label={label ? undefined : title}
-            className={clsx(ROOT_CLASS_NAME, className, { disabled })}
-            title={title}
-        >
-            {icon == null ? null : (
-                <div className={`${ROOT_CLASS_NAME}-icon`}>{icon}</div>
-            )}
-            {label ? (
-                <div className={`${ROOT_CLASS_NAME}-label`}>
-                    <p className={`${ROOT_CLASS_NAME}-label-text`}>{label}</p>
-                </div>
-            ) : null}
-            <div className={`${ROOT_CLASS_NAME}-value`}>
-                <InputText
-                    disabled={disabled}
-                    initialValue={value}
-                    name={name}
-                    onBlur={handleBlur}
-                    onChange={onChange}
-                    onFocus={onFocus}
-                    onKeyDown={handleKeyDown}
-                    onKeyUp={handleKeyUp}
-                    placeholder={placeholder}
-                    ref={inputRef}
-                    selectTextOnFocus
-                    tabIndex={tabIndex}
-                />
-            </div>
-        </label>
-    );
-});