@acusti/css-value-input 2.1.2 → 2.2.1

package/README.md

@@ -5,29 +5,75 @@
 [![downloads per month](https://img.shields.io/npm/dm/@acusti/css-value-input?style=for-the-badge)](https://www.npmjs.com/package/@acusti/css-value-input)
 [![bundle size](https://deno.bundlejs.com/badge?q=@acusti/css-value-input)](https://bundlejs.com/?q=%40acusti%2Fcss-value-input)
 
-`CSSValueInput` is a React component that renders a text input that can
-take and update a CSS value of a particular type with a default unit. The
-input’s behavior is similar to those of design applications such as Adobe
-Illustrator.
+`CSSValueInput` is a React component that renders a specialized text input
+for CSS values with intelligent unit handling, increment/decrement
+controls, validation, and normalization. Designed with the user experience
+of professional design tools like Adobe Illustrator, it automatically
+manages units, enforces constraints, and provides intuitive keyboard
+interactions.
 
-See the [storybook docs and demo][] to get a feel for what it can do.
+## Key Features
 
-[storybook docs and demo]:
-    https://uikit.acusti.ca/?path=/docs/uikit-controls-CSSValueInput--docs
+- **Smart Unit Management** - Automatically applies appropriate units based
+  on CSS value type
+- **Arrow Key Increment/Decrement** - Use ↑/↓ keys to adjust values (Shift
+  for 10x multiplier)
+- **Automatic Validation** - Enforces min/max bounds and CSS value type
+  constraints
+- **Value Normalization** - Converts inputs to valid CSS values with proper
+  units
+- **Escape to Revert** - Press Escape to restore the last valid value
+- **Custom Validators** - Support for regex or function-based validation of
+  non-numeric values
+- **Flexible Input Types** - Supports length, angle, time, percentage, and
+  integer CSS values
+- **Design Tool UX** - Text selection on focus, enter to confirm, intuitive
+  interactions
 
-## Usage
+## Installation
 
-```
+```bash
 npm install @acusti/css-value-input
 # or
 yarn add @acusti/css-value-input
 ```
 
-### Props
+## Quick Start
+
+```tsx
+import CSSValueInput from '@acusti/css-value-input';
+import { useState } from 'react';
+
+function StyleEditor() {
+    const [width, setWidth] = useState('100px');
+    const [rotation, setRotation] = useState('0deg');
+
+    return (
+        <div>
+            <CSSValueInput
+                label="Width"
+                cssValueType="length"
+                value={width}
+                onSubmitValue={setWidth}
+                min={0}
+                max={1000}
+            />
 
-This is the type signature for the props you can pass to `CSSValueInput`.
-The unique features provided by the component are called out and explained
-above the corresponding prop via JSDoc comments:
+            <CSSValueInput
+                label="Rotation"
+                cssValueType="angle"
+                value={rotation}
+                onSubmitValue={setRotation}
+                step={15}
+            />
+        </div>
+    );
+}
+```
+
+## API Reference
+
+### Props
 
 ```ts
 type Props = {
@@ -36,37 +82,890 @@ type Props = {
      * the value). Defaults to true.
      */
     allowEmpty?: boolean;
+
+    /** Additional CSS class name for styling */
     className?: string;
+
+    /** Type of CSS value: 'length', 'angle', 'time', 'percent', or 'integer' */
     cssValueType?: CSSValueType;
+
+    /** Disable the input */
     disabled?: boolean;
+
     /**
      * Function that receives a value and converts it to its numerical equivalent
      * (i.e. '12px' → 12). Defaults to parseFloat().
      */
     getValueAsNumber?: (value: string | number) => number;
+
+    /** Icon element to display before the input */
     icon?: React.ReactNode;
+
+    /** Label text displayed above the input */
     label?: string;
+
+    /** Maximum allowed numeric value */
     max?: number;
+
+    /** Minimum allowed numeric value */
     min?: number;
+
+    /** HTML name attribute for forms */
     name?: string;
+
+    /** Called when input loses focus */
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
+
+    /** Called on each keystroke (before validation) */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
+
+    /** Called when input gains focus */
     onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
+
+    /** Called on key press (before built-in key handling) */
     onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
+
+    /** Called on key release */
     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.
+     * Called when the user submits a value (Enter key or blur after change).
+     * This is your main callback for getting the validated, normalized CSS value.
      */
     onSubmitValue: (value: string) => unknown;
+
+    /** Placeholder text when input is empty */
     placeholder?: string;
+
+    /** Step size for arrow key increments (default: 1) */
     step?: number;
+
+    /** HTML tabindex for focus order */
     tabIndex?: number;
+
+    /** Tooltip text */
     title?: string;
+
+    /** Default unit to apply (auto-detected from cssValueType if not provided) */
     unit?: string;
-    /** Regex or validator function to validate non-numeric values */
+
+    /** Custom validator for non-numeric values (RegExp or function) */
     validator?: RegExp | ((value: string) => boolean);
+
+    /** Current value of the input */
     value?: string;
 };
 ```
+
+### CSS Value Types
+
+The component supports all CSS value types from `@acusti/css-values`:
+
+- **`length`** - px, em, rem, %, vh, vw, etc. (default: px)
+- **`angle`** - deg, rad, grad, turn (default: deg)
+- **`time`** - s, ms (default: s)
+- **`percent`** - % (default: %)
+- **`integer`** - whole numbers only (no unit)
+
+## Usage Examples
+
+### Design Tool Property Panel
+
+```tsx
+import CSSValueInput from '@acusti/css-value-input';
+import { useState } from 'react';
+
+function PropertyPanel({ selectedElement }) {
+    const [styles, setStyles] = useState({
+        width: '100px',
+        height: '100px',
+        borderRadius: '0px',
+        rotation: '0deg',
+        opacity: '100%',
+        animationDuration: '0.3s',
+    });
+
+    const updateStyle = (property: string) => (value: string) => {
+        setStyles((prev) => ({ ...prev, [property]: value }));
+        // Apply to selected element
+        if (selectedElement) {
+            selectedElement.style[property] = value;
+        }
+    };
+
+    return (
+        <div className="property-panel">
+            <h3>Transform</h3>
+            <div className="input-group">
+                <CSSValueInput
+                    label="Width"
+                    cssValueType="length"
+                    value={styles.width}
+                    onSubmitValue={updateStyle('width')}
+                    min={0}
+                    icon="📏"
+                />
+
+                <CSSValueInput
+                    label="Height"
+                    cssValueType="length"
+                    value={styles.height}
+                    onSubmitValue={updateStyle('height')}
+                    min={0}
+                    icon="📐"
+                />
+            </div>
+
+            <CSSValueInput
+                label="Border Radius"
+                cssValueType="length"
+                value={styles.borderRadius}
+                onSubmitValue={updateStyle('borderRadius')}
+                min={0}
+                step={5}
+                icon="⭕"
+            />
+
+            <CSSValueInput
+                label="Rotation"
+                cssValueType="angle"
+                value={styles.rotation}
+                onSubmitValue={updateStyle('rotation')}
+                step={15}
+                icon="🔄"
+            />
+
+            <h3>Appearance</h3>
+            <CSSValueInput
+                label="Opacity"
+                cssValueType="percent"
+                value={styles.opacity}
+                onSubmitValue={updateStyle('opacity')}
+                min={0}
+                max={100}
+                step={5}
+                icon="👁️"
+            />
+
+            <CSSValueInput
+                label="Animation Duration"
+                cssValueType="time"
+                value={styles.animationDuration}
+                onSubmitValue={updateStyle('animationDuration')}
+                min={0}
+                step={0.1}
+                icon="⏱️"
+            />
+        </div>
+    );
+}
+```
+
+### Responsive Design Controls
+
+```tsx
+import CSSValueInput from '@acusti/css-value-input';
+import { useState } from 'react';
+
+function ResponsiveControls() {
+    const [breakpoints, setBreakpoints] = useState({
+        mobile: '480px',
+        tablet: '768px',
+        desktop: '1024px',
+        wide: '1440px',
+    });
+
+    const [spacing, setSpacing] = useState({
+        xs: '4px',
+        sm: '8px',
+        md: '16px',
+        lg: '24px',
+        xl: '32px',
+    });
+
+    const updateBreakpoint = (key: string) => (value: string) => {
+        setBreakpoints((prev) => ({ ...prev, [key]: value }));
+    };
+
+    const updateSpacing = (key: string) => (value: string) => {
+        setSpacing((prev) => ({ ...prev, [key]: value }));
+    };
+
+    return (
+        <div className="responsive-controls">
+            <section>
+                <h3>Breakpoints</h3>
+                {Object.entries(breakpoints).map(([key, value]) => (
+                    <CSSValueInput
+                        key={key}
+                        label={key.charAt(0).toUpperCase() + key.slice(1)}
+                        cssValueType="length"
+                        value={value}
+                        onSubmitValue={updateBreakpoint(key)}
+                        min={200}
+                        max={2560}
+                        step={10}
+                        unit="px"
+                    />
+                ))}
+            </section>
+
+            <section>
+                <h3>Spacing Scale</h3>
+                {Object.entries(spacing).map(([key, value]) => (
+                    <CSSValueInput
+                        key={key}
+                        label={key.toUpperCase()}
+                        cssValueType="length"
+                        value={value}
+                        onSubmitValue={updateSpacing(key)}
+                        min={0}
+                        max={100}
+                        step={2}
+                    />
+                ))}
+            </section>
+        </div>
+    );
+}
+```
+
+### Animation Keyframe Editor
+
+```tsx
+import CSSValueInput from '@acusti/css-value-input';
+import { useState } from 'react';
+
+function KeyframeEditor() {
+    const [keyframes, setKeyframes] = useState([
+        {
+            offset: '0%',
+            transform: 'translateX(0px) rotate(0deg)',
+            opacity: '100%',
+        },
+        {
+            offset: '50%',
+            transform: 'translateX(100px) rotate(180deg)',
+            opacity: '50%',
+        },
+        {
+            offset: '100%',
+            transform: 'translateX(0px) rotate(360deg)',
+            opacity: '100%',
+        },
+    ]);
+
+    const [animationSettings, setAnimationSettings] = useState({
+        duration: '2s',
+        delay: '0s',
+        timingFunction: 'ease-in-out',
+        iterations: '1',
+    });
+
+    const updateKeyframe = (
+        index: number,
+        property: string,
+        value: string,
+    ) => {
+        setKeyframes((prev) =>
+            prev.map((kf, i) =>
+                i === index ? { ...kf, [property]: value } : kf,
+            ),
+        );
+    };
+
+    return (
+        <div className="keyframe-editor">
+            <h3>Animation Settings</h3>
+            <div className="animation-controls">
+                <CSSValueInput
+                    label="Duration"
+                    cssValueType="time"
+                    value={animationSettings.duration}
+                    onSubmitValue={(value) =>
+                        setAnimationSettings((prev) => ({
+                            ...prev,
+                            duration: value,
+                        }))
+                    }
+                    min={0}
+                    step={0.1}
+                />
+
+                <CSSValueInput
+                    label="Delay"
+                    cssValueType="time"
+                    value={animationSettings.delay}
+                    onSubmitValue={(value) =>
+                        setAnimationSettings((prev) => ({
+                            ...prev,
+                            delay: value,
+                        }))
+                    }
+                    min={0}
+                    step={0.1}
+                />
+
+                <CSSValueInput
+                    label="Iterations"
+                    cssValueType="integer"
+                    value={animationSettings.iterations}
+                    onSubmitValue={(value) =>
+                        setAnimationSettings((prev) => ({
+                            ...prev,
+                            iterations: value,
+                        }))
+                    }
+                    min={1}
+                    validator={(value) =>
+                        value === 'infinite' || !isNaN(Number(value))
+                    }
+                />
+            </div>
+
+            <h3>Keyframes</h3>
+            {keyframes.map((keyframe, index) => (
+                <div key={index} className="keyframe">
+                    <h4>Keyframe {index + 1}</h4>
+                    <div className="keyframe-controls">
+                        <CSSValueInput
+                            label="Offset"
+                            cssValueType="percent"
+                            value={keyframe.offset}
+                            onSubmitValue={(value) =>
+                                updateKeyframe(index, 'offset', value)
+                            }
+                            min={0}
+                            max={100}
+                            step={5}
+                        />
+
+                        <CSSValueInput
+                            label="Opacity"
+                            cssValueType="percent"
+                            value={keyframe.opacity}
+                            onSubmitValue={(value) =>
+                                updateKeyframe(index, 'opacity', value)
+                            }
+                            min={0}
+                            max={100}
+                            step={10}
+                        />
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}
+```
+
+### CSS Grid Layout Builder
+
+```tsx
+import CSSValueInput from '@acusti/css-value-input';
+import { useState } from 'react';
+
+function GridLayoutBuilder() {
+    const [gridSettings, setGridSettings] = useState({
+        columns: '1fr 1fr 1fr',
+        rows: 'auto auto',
+        columnGap: '16px',
+        rowGap: '16px',
+        padding: '20px',
+    });
+
+    const [itemSettings, setItemSettings] = useState({
+        columnStart: '1',
+        columnEnd: '2',
+        rowStart: '1',
+        rowEnd: '2',
+    });
+
+    return (
+        <div className="grid-builder">
+            <h3>Grid Container</h3>
+            <div className="grid-controls">
+                <CSSValueInput
+                    label="Column Gap"
+                    cssValueType="length"
+                    value={gridSettings.columnGap}
+                    onSubmitValue={(value) =>
+                        setGridSettings((prev) => ({
+                            ...prev,
+                            columnGap: value,
+                        }))
+                    }
+                    min={0}
+                    step={4}
+                />
+
+                <CSSValueInput
+                    label="Row Gap"
+                    cssValueType="length"
+                    value={gridSettings.rowGap}
+                    onSubmitValue={(value) =>
+                        setGridSettings((prev) => ({
+                            ...prev,
+                            rowGap: value,
+                        }))
+                    }
+                    min={0}
+                    step={4}
+                />
+
+                <CSSValueInput
+                    label="Padding"
+                    cssValueType="length"
+                    value={gridSettings.padding}
+                    onSubmitValue={(value) =>
+                        setGridSettings((prev) => ({
+                            ...prev,
+                            padding: value,
+                        }))
+                    }
+                    min={0}
+                    step={4}
+                />
+            </div>
+
+            <h3>Grid Item Position</h3>
+            <div className="item-controls">
+                <CSSValueInput
+                    label="Column Start"
+                    cssValueType="integer"
+                    value={itemSettings.columnStart}
+                    onSubmitValue={(value) =>
+                        setItemSettings((prev) => ({
+                            ...prev,
+                            columnStart: value,
+                        }))
+                    }
+                    min={1}
+                />
+
+                <CSSValueInput
+                    label="Column End"
+                    cssValueType="integer"
+                    value={itemSettings.columnEnd}
+                    onSubmitValue={(value) =>
+                        setItemSettings((prev) => ({
+                            ...prev,
+                            columnEnd: value,
+                        }))
+                    }
+                    min={1}
+                />
+
+                <CSSValueInput
+                    label="Row Start"
+                    cssValueType="integer"
+                    value={itemSettings.rowStart}
+                    onSubmitValue={(value) =>
+                        setItemSettings((prev) => ({
+                            ...prev,
+                            rowStart: value,
+                        }))
+                    }
+                    min={1}
+                />
+
+                <CSSValueInput
+                    label="Row End"
+                    cssValueType="integer"
+                    value={itemSettings.rowEnd}
+                    onSubmitValue={(value) =>
+                        setItemSettings((prev) => ({
+                            ...prev,
+                            rowEnd: value,
+                        }))
+                    }
+                    min={1}
+                />
+            </div>
+
+            <div className="preview">
+                <div
+                    style={{
+                        display: 'grid',
+                        gridTemplateColumns: gridSettings.columns,
+                        gridTemplateRows: gridSettings.rows,
+                        columnGap: gridSettings.columnGap,
+                        rowGap: gridSettings.rowGap,
+                        padding: gridSettings.padding,
+                        border: '1px dashed #ccc',
+                        minHeight: '200px',
+                    }}
+                >
+                    <div
+                        style={{
+                            gridColumnStart: itemSettings.columnStart,
+                            gridColumnEnd: itemSettings.columnEnd,
+                            gridRowStart: itemSettings.rowStart,
+                            gridRowEnd: itemSettings.rowEnd,
+                            backgroundColor: '#e3f2fd',
+                            padding: '8px',
+                            border: '1px solid #2196f3',
+                        }}
+                    >
+                        Grid Item
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+```
+
+### Typography Controls
+
+```tsx
+import CSSValueInput from '@acusti/css-value-input';
+import { useState } from 'react';
+
+function TypographyControls() {
+    const [typography, setTypography] = useState({
+        fontSize: '16px',
+        lineHeight: '1.5',
+        letterSpacing: '0px',
+        wordSpacing: '0px',
+        textIndent: '0px',
+    });
+
+    const updateTypography = (property: string) => (value: string) => {
+        setTypography((prev) => ({ ...prev, [property]: value }));
+    };
+
+    return (
+        <div className="typography-controls">
+            <h3>Typography</h3>
+
+            <CSSValueInput
+                label="Font Size"
+                cssValueType="length"
+                value={typography.fontSize}
+                onSubmitValue={updateTypography('fontSize')}
+                min={8}
+                max={72}
+                step={1}
+                icon="🔤"
+            />
+
+            <CSSValueInput
+                label="Line Height"
+                cssValueType="length"
+                value={typography.lineHeight}
+                onSubmitValue={updateTypography('lineHeight')}
+                min={0.5}
+                max={3}
+                step={0.1}
+                unit="" // Line height can be unitless
+                validator={(value) => {
+                    // Allow unitless numbers or length values
+                    return /^(\d*\.?\d+)(px|em|rem|%)?$/.test(value);
+                }}
+                icon="📏"
+            />
+
+            <CSSValueInput
+                label="Letter Spacing"
+                cssValueType="length"
+                value={typography.letterSpacing}
+                onSubmitValue={updateTypography('letterSpacing')}
+                min={-5}
+                max={10}
+                step={0.5}
+                icon="🔤"
+            />
+
+            <CSSValueInput
+                label="Word Spacing"
+                cssValueType="length"
+                value={typography.wordSpacing}
+                onSubmitValue={updateTypography('wordSpacing')}
+                min={-10}
+                max={20}
+                step={1}
+                icon="📝"
+            />
+
+            <CSSValueInput
+                label="Text Indent"
+                cssValueType="length"
+                value={typography.textIndent}
+                onSubmitValue={updateTypography('textIndent')}
+                min={0}
+                max={100}
+                step={5}
+                icon="⬅️"
+            />
+
+            <div className="preview-text" style={typography}>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing
+                    elit. Sed do eiusmod tempor incididunt ut labore et
+                    dolore magna aliqua. Ut enim ad minim veniam, quis
+                    nostrud exercitation.
+                </p>
+            </div>
+        </div>
+    );
+}
+```
+
+### Custom Validator Examples
+
+```tsx
+import CSSValueInput from '@acusti/css-value-input';
+
+function CustomValidators() {
+    // CSS function validator (e.g., calc(), var(), etc.)
+    const cssFunctionValidator = (value: string) => {
+        return (
+            /^(calc|var|min|max|clamp)\(.*\)$/.test(value) ||
+            !isNaN(parseFloat(value))
+        );
+    };
+
+    // Color hex validator
+    const hexColorValidator = /^#([0-9A-Fa-f]{3}){1,2}$/;
+
+    // CSS keyword validator for display property
+    const displayKeywordValidator = (value: string) => {
+        const validKeywords = [
+            'block',
+            'inline',
+            'flex',
+            'grid',
+            'none',
+            'inline-block',
+        ];
+        return validKeywords.includes(value) || !isNaN(parseFloat(value));
+    };
+
+    return (
+        <div>
+            <CSSValueInput
+                label="Width (supports calc)"
+                cssValueType="length"
+                onSubmitValue={(value) => console.log('Width:', value)}
+                validator={cssFunctionValidator}
+                placeholder="100px or calc(50% - 10px)"
+            />
+
+            <CSSValueInput
+                label="Border Color"
+                cssValueType="length" // We'll override the unit behavior
+                onSubmitValue={(value) => console.log('Color:', value)}
+                validator={hexColorValidator}
+                unit="" // No default unit
+                placeholder="#ff0000"
+            />
+
+            <CSSValueInput
+                label="Z-Index"
+                cssValueType="integer"
+                onSubmitValue={(value) => console.log('Z-Index:', value)}
+                min={-999}
+                max={999}
+                step={1}
+                validator={(value) =>
+                    value === 'auto' || !isNaN(parseInt(value))
+                }
+            />
+        </div>
+    );
+}
+```
+
+## Keyboard Interactions
+
+### Arrow Keys
+
+- **↑/↓** - Increment/decrement by step amount
+- **Shift + ↑/↓** - Increment/decrement by step × 10
+- Works with all numeric CSS value types
+
+### Special Keys
+
+- **Enter** - Submit value and blur input
+- **Escape** - Revert to last submitted value and blur
+- **Tab** - Submit value and move to next input
+
+### Value Handling
+
+- **Auto-complete units** - Typing "100" becomes "100px" for length inputs
+- **Unit preservation** - Keeps the unit from the previous value when
+  possible
+- **Range enforcement** - Automatically clamps values to min/max bounds
+- **Type coercion** - Converts integers when cssValueType="integer"
+
+## Styling
+
+The component uses CSS classes with the prefix `cssvalueinput`:
+
+```css
+.cssvalueinput {
+    /* Main container styles */
+}
+
+.cssvalueinput-icon {
+    /* Icon container styles */
+}
+
+.cssvalueinput-label {
+    /* Label container styles */
+}
+
+.cssvalueinput-label-text {
+    /* Label text styles */
+}
+
+.cssvalueinput-value {
+    /* Input wrapper styles */
+}
+
+.cssvalueinput.disabled {
+    /* Disabled state styles */
+}
+```
+
+### Example Styling
+
+```css
+.cssvalueinput {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-bottom: 12px;
+}
+
+.cssvalueinput-label-text {
+    font-size: 12px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+}
+
+.cssvalueinput-icon {
+    font-size: 16px;
+    margin-right: 8px;
+}
+
+.cssvalueinput input {
+    padding: 6px 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-family: monospace;
+    text-align: center;
+}
+
+.cssvalueinput input:focus {
+    outline: 2px solid #007bff;
+    border-color: transparent;
+}
+
+.cssvalueinput.disabled {
+    opacity: 0.6;
+    pointer-events: none;
+}
+```
+
+## Integration with CSS-in-JS
+
+```tsx
+import CSSValueInput from '@acusti/css-value-input';
+import styled from 'styled-components';
+
+const StyledBox = styled.div<{
+    width: string;
+    height: string;
+    rotation: string;
+}>`
+    width: ${(props) => props.width};
+    height: ${(props) => props.height};
+    transform: rotate(${(props) => props.rotation});
+    background: linear-gradient(45deg, #007bff, #28a745);
+    transition: all 0.3s ease;
+`;
+
+function StyledComponentEditor() {
+    const [boxStyles, setBoxStyles] = useState({
+        width: '200px',
+        height: '200px',
+        rotation: '0deg',
+    });
+
+    return (
+        <div>
+            <div className="controls">
+                <CSSValueInput
+                    label="Width"
+                    cssValueType="length"
+                    value={boxStyles.width}
+                    onSubmitValue={(value) =>
+                        setBoxStyles((prev) => ({ ...prev, width: value }))
+                    }
+                />
+
+                <CSSValueInput
+                    label="Height"
+                    cssValueType="length"
+                    value={boxStyles.height}
+                    onSubmitValue={(value) =>
+                        setBoxStyles((prev) => ({
+                            ...prev,
+                            height: value,
+                        }))
+                    }
+                />
+
+                <CSSValueInput
+                    label="Rotation"
+                    cssValueType="angle"
+                    value={boxStyles.rotation}
+                    onSubmitValue={(value) =>
+                        setBoxStyles((prev) => ({
+                            ...prev,
+                            rotation: value,
+                        }))
+                    }
+                    step={15}
+                />
+            </div>
+
+            <StyledBox {...boxStyles}>Styled Component</StyledBox>
+        </div>
+    );
+}
+```
+
+## Accessibility
+
+- **Label Association** - Proper label/input relationships for screen
+  readers
+- **Keyboard Navigation** - Full keyboard control without mouse dependency
+- **Focus Management** - Clear focus indicators and logical tab order
+- **Value Announcements** - Screen readers announce value changes
+- **Error Handling** - Invalid values are reverted with visual feedback
+
+## Browser Compatibility
+
+- **Modern Browsers** - Chrome, Firefox, Safari, Edge (latest)
+- **Mobile Support** - Touch-friendly with virtual keyboard support
+- **SSR Compatible** - Works with Next.js, React Router, etc.
+
+## Common Use Cases
+
+- **Design Tools** - Property panels, style editors, layout builders
+- **CSS Generators** - Live CSS property editors
+- **Animation Tools** - Keyframe editors, timing controls
+- **Theme Builders** - Design system value editors
+- **Form Builders** - CSS-aware form inputs
+- **Component Libraries** - Styleable component property editors
+
+## Demo
+
+See the
+[Storybook documentation and examples](https://uikit.acusti.ca/?path=/docs/uikit-controls-CSSValueInput--docs)
+for interactive demonstrations of all CSS value input features and
+configurations.

package/dist/CSSValueInput.d.ts

@@ -1,5 +1,5 @@
 import { CSSValueType } from '../../css-values/src';
-import { ChangeEvent, FocusEvent, KeyboardEvent, ReactNode } from 'react';
+import { ChangeEvent, FocusEvent, KeyboardEvent, ReactNode, Ref } from 'react';
 export type Props = {
     /**
      * Boolean indicating if the user can submit an empty value (i.e. clear
@@ -31,6 +31,7 @@ export type Props = {
      */
     onSubmitValue: (value: string) => unknown;
     placeholder?: string;
+    ref?: Ref<HTMLInputElement>;
     step?: number;
     tabIndex?: number;
     title?: string;
@@ -39,5 +40,4 @@ export type Props = {
     validator?: ((value: string) => boolean) | RegExp;
     value?: string;
 };
-declare const _default: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLInputElement>>;
-export default _default;
+export default function CSSValueInput({ allowEmpty, className, cssValueType, disabled, getValueAsNumber, icon, label, max, min, name, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onSubmitValue, placeholder, ref, step, tabIndex, title, unit, validator, value: valueFromProps, }: Props): import("react/jsx-runtime").JSX.Element;

package/dist/CSSValueInput.js

@@ -3,9 +3,9 @@ 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";
+import { useRef, useImperativeHandle, useEffect } from "react";
 const ROOT_CLASS_NAME = "cssvalueinput";
-const CSSValueInput = forwardRef(function CSSValueInput2(t0, ref) {
+function CSSValueInput(t0) {
   const $ = c(56);
   const {
     allowEmpty: t1,
@@ -25,6 +25,7 @@ const CSSValueInput = forwardRef(function CSSValueInput2(t0, ref) {
     onKeyUp,
     onSubmitValue,
     placeholder,
+    ref,
     step: t4,
     tabIndex,
     title,
@@ -46,7 +47,7 @@ const CSSValueInput = forwardRef(function CSSValueInput2(t0, ref) {
     t6 = $[0];
   }
   useImperativeHandle(ref, t6);
-  const value = typeof valueFromProps === "number" && !Number.isNaN(valueFromProps) ? `${valueFromProps}` : valueFromProps;
+  const value = typeof valueFromProps === "number" && Number.isFinite(valueFromProps) ? `${valueFromProps}` : valueFromProps;
   const submittedValueRef = useRef(value ?? "");
   let t7;
   let t8;
@@ -66,9 +67,8 @@ const CSSValueInput = forwardRef(function CSSValueInput2(t0, ref) {
   let t9;
   if ($[4] !== onSubmitValue) {
     t9 = (event) => {
-      const currentValue = event.currentTarget.value;
-      submittedValueRef.current = currentValue;
-      onSubmitValue(currentValue);
+      submittedValueRef.current = event.currentTarget.value;
+      onSubmitValue(event.currentTarget.value);
     };
     $[4] = onSubmitValue;
     $[5] = t9;
@@ -84,12 +84,12 @@ const CSSValueInput = forwardRef(function CSSValueInput2(t0, ref) {
       if (onBlur) {
         onBlur(event_0);
       }
-      const currentValue_0 = input.value.trim();
-      if (allowEmpty && !currentValue_0) {
+      const currentValue = input.value.trim();
+      if (allowEmpty && !currentValue) {
         handleSubmitValue(event_0);
         return;
       }
-      const currentValueAsNumber = getValueAsNumber(currentValue_0);
+      const currentValueAsNumber = getValueAsNumber(currentValue);
       const isCurrentValueFinite = Number.isFinite(currentValueAsNumber);
       const defaultUnit = unit ? getUnitFromCSSValue({
         cssValueType,
@@ -99,10 +99,10 @@ const CSSValueInput = forwardRef(function CSSValueInput2(t0, ref) {
       if (!isCurrentValueFinite) {
         let isValid = false;
         if (validator instanceof RegExp) {
-          isValid = validator.test(currentValue_0);
+          isValid = validator.test(currentValue);
         } else {
           if (validator) {
-            isValid = validator(currentValue_0);
+            isValid = validator(currentValue);
           }
         }
         if (isValid) {
@@ -130,14 +130,14 @@ const CSSValueInput = forwardRef(function CSSValueInput2(t0, ref) {
         const currentUnit = getUnitFromCSSValue({
           cssValueType,
           defaultUnit,
-          value: currentValue_0
+          value: currentValue
         });
         input.value = normalizedValueAsNumber + currentUnit;
       } else {
         input.value = getCSSValueWithUnit({
           cssValueType,
           defaultUnit,
-          value: currentValue_0
+          value: currentValue
         });
       }
       handleSubmitValue(event_0);
@@ -160,16 +160,16 @@ const CSSValueInput = forwardRef(function CSSValueInput2(t0, ref) {
   if ($[16] !== cssValueType || $[17] !== getValueAsNumber || $[18] !== max || $[19] !== min || $[20] !== step || $[21] !== unit) {
     t11 = (t122) => {
       const {
-        currentValue: currentValue_1,
+        currentValue: currentValue_0,
         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;
+      const currentValueAsNumber_0 = getValueAsNumber(currentValue_0);
+      if (typeof currentValue_0 === "string" && Number.isNaN(currentValueAsNumber_0)) {
+        return currentValue_0;
       }
       let nextValue = currentValueAsNumber_0 + modifier;
       if (cssValueType === "integer") {
@@ -186,7 +186,7 @@ const CSSValueInput = forwardRef(function CSSValueInput2(t0, ref) {
       const nextUnit = getUnitFromCSSValue({
         cssValueType,
         defaultUnit: unit,
-        value: currentValue_1
+        value: currentValue_0
       });
       return `${nextValue}${nextUnit}`;
     };
@@ -209,33 +209,21 @@ const CSSValueInput = forwardRef(function CSSValueInput2(t0, ref) {
       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;
-        }
-        case "Enter":
-        case "Escape": {
-          if (event_1.key === "Escape") {
-            input_0.value = submittedValueRef.current;
-          }
-          input_0.blur();
-          return;
-        }
+      if (event_1.key !== "ArrowDown" && event_1.key !== "ArrowUp") {
+        return;
+      }
+      const currentValue_1 = input_0.value ?? placeholder ?? `0${unit}`;
+      const nextValue_0 = getNextValue({
+        currentValue: currentValue_1,
+        multiplier: event_1.shiftKey ? 10 : 1,
+        signum: event_1.key === "ArrowUp" ? 1 : -1
+      });
+      if (nextValue_0 === currentValue_1) {
+        return;
       }
+      event_1.stopPropagation();
+      event_1.preventDefault();
+      input_0.value = nextValue_0;
     };
     $[23] = getNextValue;
     $[24] = onKeyDown;
@@ -293,7 +281,7 @@ const CSSValueInput = forwardRef(function CSSValueInput2(t0, ref) {
   }
   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 }) });
+    t18 = /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME}-value`, children: /* @__PURE__ */ jsx(InputText, { disabled, discardOnEscape: true, initialValue: value, name, onBlur: handleBlur, onChange, onFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, placeholder, ref: inputRef, selectTextOnFocus: true, tabIndex }) });
     $[38] = disabled;
     $[39] = handleBlur;
     $[40] = handleKeyDown;
@@ -326,7 +314,7 @@ const CSSValueInput = forwardRef(function CSSValueInput2(t0, ref) {
     t19 = $[55];
   }
   return t19;
-});
+}
 export {
   CSSValueInput as default
 };

package/dist/CSSValueInput.js.map

@@ -1 +1 @@
-{"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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"}
+{"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    type KeyboardEvent,\n    type ReactNode,\n    type Ref,\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    ref?: Ref<HTMLInputElement>;\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 function CSSValueInput({\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    ref,\n    step = 1,\n    tabIndex,\n    title,\n    unit = DEFAULT_UNIT_BY_CSS_VALUE_TYPE[cssValueType],\n    validator,\n    value: valueFromProps,\n}: Props) {\n    const inputRef = useRef<InputRef>(null);\n\n    useImperativeHandle<InputRef, InputRef>(ref, () => inputRef.current);\n\n    // props.value should be a string; if it’s a number, convert it here\n    const value =\n        typeof valueFromProps === 'number' && Number.isFinite(valueFromProps)\n            ? `${valueFromProps}`\n            : valueFromProps;\n    const submittedValueRef = useRef(value ?? '');\n\n    useEffect(() => {\n        submittedValueRef.current = value ?? '';\n    }, [value]);\n\n    const handleSubmitValue = (event: SyntheticEvent<HTMLInputElement>) => {\n        // Store last submittedValue (used to reset value on invalid input)\n        submittedValueRef.current = event.currentTarget.value;\n        onSubmitValue(event.currentTarget.value);\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        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;\n\n        const currentValue = input.value ?? placeholder ?? `0${unit}`;\n        const 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    };\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                    discardOnEscape\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","CSSValueInput","t0","$","_c","allowEmpty","t1","className","cssValueType","t2","disabled","getValueAsNumber","t3","icon","label","max","min","name","onBlur","onChange","onFocus","onKeyDown","onKeyUp","onSubmitValue","placeholder","ref","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","isFinite","submittedValueRef","t7","t8","useEffect","t9","event","currentTarget","handleSubmitValue","t10","event_0","input","currentValue","trim","currentValueAsNumber","isCurrentValueFinite","defaultUnit","getUnitFromCSSValue","isValid","RegExp","test","normalizedValueAsNumber","Math","floor","currentUnit","getCSSValueWithUnit","handleBlur","t11","t12","currentValue_0","multiplier","t13","signum","t14","modifier","currentValueAsNumber_0","isNaN","nextValue","roundToPrecision","nextUnit","getNextValue","event_1","input_0","key","currentValue_1","nextValue_0","shiftKey","stopPropagation","preventDefault","handleKeyDown","event_2","handleKeyUp","t15","clsx","t16","t17","t18","t19"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acusti/css-value-input",
-    "version": "2.1.2",
+    "version": "2.2.1",
     "type": "module",
     "sideEffects": false,
     "exports": "./dist/CSSValueInput.js",
@@ -38,23 +38,23 @@
     },
     "homepage": "https://github.com/acusti/uikit/tree/main/packages/css-value-input#readme",
     "devDependencies": {
-        "@testing-library/dom": "^10.4.0",
+        "@testing-library/dom": "^10.4.1",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^14.6.1",
-        "@types/react": "^19.1.8",
-        "@vitejs/plugin-react": "^4.6.0",
-        "babel-plugin-react-compiler": "rc",
-        "happy-dom": "^18.0.1",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0",
-        "typescript": "5.8.3",
-        "unplugin-dts": "^1.0.0-beta.2",
-        "vite": "^7.0.0",
+        "@types/react": "^19.2.2",
+        "@vitejs/plugin-react": "^5.0.4",
+        "babel-plugin-react-compiler": "^1",
+        "happy-dom": "^20.0.10",
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0",
+        "typescript": "5.9.2",
+        "unplugin-dts": "^1.0.0-beta.6",
+        "vite": "^7.1.10",
         "vitest": "^3.2.4"
     },
     "dependencies": {
         "@acusti/css-values": "^1.2.0",
-        "@acusti/input-text": "^2.1.1",
+        "@acusti/input-text": "^2.2.1",
         "clsx": "^2"
     },
     "peerDependencies": {