@acusti/css-value-input 1.0.1 → 1.1.0

package/README.md

@@ -13,7 +13,7 @@ Illustrator.
 See the [storybook docs and demo][] to get a feel for what it can do.
 
 [storybook docs and demo]:
-    https://acusti-uikit.netlify.app/?path=/docs/uikit-controls-CSSValueInput--docs
+    https://uikit.acusti.ca/?path=/docs/uikit-controls-CSSValueInput--docs
 
 ## Usage
 

package/dist/CSSValueInput.d.ts

@@ -39,7 +39,5 @@ export type Props = {
     validator?: ((value: string) => boolean) | RegExp;
     value?: string;
 };
-declare const _default: React.ForwardRefExoticComponent<
-    Props & React.RefAttributes<HTMLInputElement>
->;
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/dist/CSSValueInput.js

@@ -1,44 +1,10 @@
-import {
-    DEFAULT_CSS_VALUE_TYPE,
-    DEFAULT_UNIT_BY_CSS_VALUE_TYPE,
-    getCSSValueAsNumber,
-    getCSSValueWithUnit,
-    getUnitFromCSSValue,
-    roundToPrecision,
-} from '@acusti/css-values';
+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,
-) {
+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
@@ -49,207 +15,164 @@ export default React.forwardRef(function CSSValueInput(
     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;
+    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);
             }
-            // 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);
-                }
+            else if (validator) {
+                isValid = validator(currentValue);
             }
-            if (normalizedValueAsNumber !== currentValueAsNumber) {
-                const currentUnit = getUnitFromCSSValue({
-                    cssValueType,
-                    defaultUnit,
-                    value: currentValue,
-                });
-                input.value = normalizedValueAsNumber + currentUnit;
-            } else {
-                input.value = getCSSValueWithUnit({
-                    cssValueType,
-                    defaultUnit,
-                    value: currentValue,
-                });
+            if (isValid) {
+                handleSubmitValue(event);
             }
-            handleSubmitValue(event);
-        },
-        [
-            allowEmpty,
-            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;
+            else {
+                // If current value isn’t valid, revert to last submitted value
+                input.value = submittedValueRef.current;
             }
-            let nextValue = currentValueAsNumber + modifier;
-            if (cssValueType === 'integer') {
-                nextValue = Math.floor(nextValue);
-            } else {
-                nextValue = roundToPrecision(nextValue, 5);
+            return;
+        }
+        // Normalize value by applying min/max and integer constraints
+        let normalizedValueAsNumber = currentValueAsNumber;
+        if (isCurrentValueFinite) {
+            if (min != null && currentValueAsNumber < min) {
+                normalizedValueAsNumber = min;
             }
-            if (typeof max === 'number' && Number.isFinite(max)) {
-                nextValue = Math.min(max, nextValue);
+            else if (max != null && currentValueAsNumber > max) {
+                normalizedValueAsNumber = max;
             }
-            if (typeof min === 'number' && Number.isFinite(min)) {
-                nextValue = Math.max(min, nextValue);
+            else if (cssValueType === 'integer') {
+                normalizedValueAsNumber = Math.floor(currentValueAsNumber);
             }
-            const nextUnit = getUnitFromCSSValue({
+        }
+        if (normalizedValueAsNumber !== currentValueAsNumber) {
+            const currentUnit = getUnitFromCSSValue({
                 cssValueType,
-                defaultUnit: unit,
+                defaultUnit,
                 value: currentValue,
             });
-            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();
+            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, }) => {
+        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) => {
+        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;
-                default:
-                // No default key handling
-            }
-        },
-        [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);
-            }
-        },
-        [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,
-            }),
-        ),
-    );
+                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) => {
+        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 (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 }))));
 });
-//# sourceMappingURL=CSSValueInput.js.map
+//# sourceMappingURL=CSSValueInput.js.map

package/dist/CSSValueInput.js.flow

@@ -1,58 +1,58 @@
 /**
  * Flowtype definitions for CSSValueInput
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 
-import { type, CSSValueType } from '@acusti/css-values';
-import * as React from 'react';
+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,
+  /**
+   * 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,
+  /**
+   * 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,
+  /**
+   * 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,
+  /**
+   * Regex or validator function to validate non-numeric values
+   */
+  validator?: ((value: string) => boolean) | RegExp,
+  value?: string,
 |};
 declare var _default: React.StatelessFunctionalComponent<{|
-    ...Props,
-    ...{| ref?: HTMLInputElement |},
+  ...Props,
+  ...{| ref?: HTMLInputElement |},
 |}>;
 declare export default typeof _default;

package/dist/CSSValueInput.test.js

@@ -4,19 +4,17 @@ 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
+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' }),
-        );
+        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%' }));
+        render(React.createElement(CSSValueInput, { onSubmitValue: noop, value: "75%" }));
         const input = screen.getByRole('textbox');
         expect(input.value).toBe('75%');
         await user.type(input, '{ArrowUp}');
@@ -34,13 +32,7 @@ describe('CSSValueInput.tsx', () => {
     });
     it('supports custom props.step for ↑/↓ key handling', async () => {
         const user = userEvent.setup();
-        render(
-            React.createElement(CSSValueInput, {
-                onSubmitValue: noop,
-                step: 0.1,
-                value: '2rem',
-            }),
-        );
+        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}');
@@ -58,14 +50,7 @@ describe('CSSValueInput.tsx', () => {
     });
     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: '',
-            }),
-        );
+        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}');
@@ -73,14 +58,7 @@ describe('CSSValueInput.tsx', () => {
     });
     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: '',
-            }),
-        );
+        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}');
@@ -90,14 +68,7 @@ describe('CSSValueInput.tsx', () => {
     });
     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',
-            }),
-        );
+        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}');
@@ -111,34 +82,16 @@ describe('CSSValueInput.tsx', () => {
     });
     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 { 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',
-            }),
-        );
+        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',
-            }),
-        );
+        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
+//# sourceMappingURL=CSSValueInput.test.js.map

package/dist/CSSValueInput.test.js.flow

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acusti/css-value-input",
-    "version": "1.0.1",
+    "version": "1.1.0",
     "type": "module",
     "sideEffects": false,
     "exports": "./dist/CSSValueInput.js",
@@ -40,18 +40,18 @@
     "homepage": "https://github.com/acusti/uikit/tree/main/packages/css-value-input#readme",
     "devDependencies": {
         "@testing-library/dom": "^10.4.0",
-        "@testing-library/react": "^16.1.0",
-        "@testing-library/user-event": "^14.5.2",
-        "@types/react": "^19.0.2",
-        "happy-dom": "^15.11.7",
+        "@testing-library/react": "^16.3.0",
+        "@testing-library/user-event": "^14.6.1",
+        "@types/react": "^19.1.1",
+        "happy-dom": "^17.4.4",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "typescript": "5.7.3",
-        "vitest": "^2.1.8"
+        "typescript": "5.8.3",
+        "vitest": "^3.1.1"
     },
     "dependencies": {
-        "@acusti/css-values": "^1.0.4",
-        "@acusti/input-text": "^1.9.1",
+        "@acusti/css-values": "^1.1.0",
+        "@acusti/input-text": "^1.10.0",
         "clsx": "^2"
     },
     "peerDependencies": {