entangle-ui 0.2.0 → 0.4.0

package/dist/esm/components/controls/CurveEditor/useCurveRenderer.js

@@ -0,0 +1,246 @@
+"use client";
+import { useRef, useCallback, useEffect } from 'react';
+import { drawGrid, drawDomainBounds, drawAxisLabels } from '../../primitives/canvas/canvasDrawing.js';
+import { resolveCanvasTheme, resolveVarValue } from '../../primitives/canvas/canvasTheme.js';
+import '../../primitives/canvas/CanvasContainer.js';
+import { sampleCurve, domainToCanvas } from './curveUtils.js';
+
+// CanvasThemeColors and resolveCanvasTheme are now imported from shared canvas primitives
+function useCurveRenderer(options) {
+    const rafRef = useRef(0);
+    const draw = useCallback(() => {
+        const canvas = options.canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const theme = resolveCanvasTheme(canvas);
+        const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+        const rect = canvas.getBoundingClientRect();
+        const w = rect.width;
+        const h = rect.height;
+        // Set canvas resolution for retina
+        if (canvas.width !== w * dpr || canvas.height !== h * dpr) {
+            canvas.width = w * dpr;
+            canvas.height = h * dpr;
+            ctx.scale(dpr, dpr);
+        }
+        else {
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        }
+        const { curve, viewport, showGrid, gridSubdivisions, showAxisLabels, labelX, labelY, curveColor: rawCurveColor, curveWidth, renderBackground, selectedIds, hoveredElement, selectionBox, disabled, } = options;
+        // Resolve curveColor if it's a CSS variable reference
+        const curveColor = rawCurveColor.startsWith('var(')
+            ? resolveVarValue(canvas, rawCurveColor)
+            : rawCurveColor;
+        const opacity = disabled ? 0.4 : 1;
+        // 1. Clear background
+        ctx.globalAlpha = 1;
+        ctx.fillStyle = theme.backgroundSecondary;
+        ctx.fillRect(0, 0, w, h);
+        // 1b. Custom background (histograms, gradients, etc.)
+        if (renderBackground) {
+            ctx.save();
+            renderBackground(ctx, {
+                width: w,
+                height: h,
+                viewport,
+                domainX: curve.domainX,
+                domainY: curve.domainY,
+            });
+            ctx.restore();
+        }
+        // 2. Grid lines -- based on domain values, not viewport
+        if (showGrid) {
+            drawGrid(ctx, w, h, theme, {
+                subdivisions: gridSubdivisions,
+                domain: { domainX: curve.domainX, domainY: curve.domainY },
+                viewport,
+                opacity,
+            });
+        }
+        // 3. Domain boundary axes (stronger lines at domain min/max)
+        drawDomainBounds(ctx, w, h, theme, { domainX: curve.domainX, domainY: curve.domainY }, viewport, opacity);
+        // 4. Axis labels -- based on domain values
+        if (showAxisLabels) {
+            drawAxisLabels(ctx, w, h, theme, {
+                subdivisions: gridSubdivisions,
+                domain: { domainX: curve.domainX, domainY: curve.domainY },
+                viewport,
+                opacity,
+                labelX,
+                labelY,
+            });
+        }
+        // 5. Curve line
+        ctx.globalAlpha = opacity;
+        drawCurveLine(ctx, curve, viewport, w, h, curveColor, curveWidth);
+        // 6. Tangent handles (for selected keyframes)
+        if (!options.lockTangents) {
+            drawTangentHandles(ctx, curve, viewport, w, h, selectedIds, hoveredElement, theme, opacity);
+        }
+        // 7. Keyframe points
+        drawKeyframes(ctx, curve, viewport, w, h, curveColor, selectedIds, hoveredElement, theme, opacity);
+        // 8. Selection box
+        if (selectionBox) {
+            drawSelectionBox(ctx, selectionBox, curveColor);
+        }
+        ctx.globalAlpha = 1;
+    }, [options]);
+    // Redraw on state changes
+    useEffect(() => {
+        if (options.isDragging) {
+            // Use rAF for smooth updates during drag
+            const render = () => {
+                draw();
+                rafRef.current = requestAnimationFrame(render);
+            };
+            rafRef.current = requestAnimationFrame(render);
+            return () => cancelAnimationFrame(rafRef.current);
+        }
+        draw();
+        return undefined;
+    }, [draw, options.isDragging]);
+}
+// drawGrid, drawDomainBounds, drawAxisLabels, and formatLabel are now
+// provided by shared canvas primitives and called in the draw() function above.
+function drawCurveLine(ctx, curve, viewport, w, h, curveColor, lineWidth) {
+    if (curve.keyframes.length < 2)
+        return;
+    const samples = sampleCurve(curve, Math.max(200, w));
+    if (samples.length === 0)
+        return;
+    ctx.strokeStyle = curveColor;
+    ctx.lineWidth = lineWidth;
+    ctx.lineJoin = 'round';
+    ctx.lineCap = 'round';
+    ctx.beginPath();
+    const first = samples[0];
+    if (!first)
+        return;
+    const firstCanvas = domainToCanvas(first.x, first.y, viewport, w, h);
+    ctx.moveTo(firstCanvas.px, firstCanvas.py);
+    for (let i = 1; i < samples.length; i++) {
+        const s = samples[i];
+        if (!s)
+            continue;
+        const sCanvas = domainToCanvas(s.x, s.y, viewport, w, h);
+        ctx.lineTo(sCanvas.px, sCanvas.py);
+    }
+    ctx.stroke();
+}
+function drawTangentHandles(ctx, curve, viewport, w, h, selectedIds, hoveredElement, theme, opacity) {
+    const { keyframes } = curve;
+    for (let i = 0; i < keyframes.length; i++) {
+        const kf = keyframes[i];
+        if (!kf)
+            continue;
+        if (!kf.id || !selectedIds.has(kf.id))
+            continue;
+        if (kf.tangentMode === 'linear' || kf.tangentMode === 'step')
+            continue;
+        const isAutoMode = kf.tangentMode === 'auto';
+        const kfCanvas = domainToCanvas(kf.x, kf.y, viewport, w, h);
+        // Handle In
+        const hIn = domainToCanvas(kf.x + kf.handleIn.x, kf.y + kf.handleIn.y, viewport, w, h);
+        ctx.globalAlpha = opacity * (isAutoMode ? 0.4 : 0.7);
+        ctx.strokeStyle = theme.textMuted;
+        ctx.lineWidth = 1;
+        ctx.setLineDash([3, 3]);
+        ctx.beginPath();
+        ctx.moveTo(kfCanvas.px, kfCanvas.py);
+        ctx.lineTo(hIn.px, hIn.py);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        // Handle In point
+        const hInRadius = isAutoMode ? 3 : 4;
+        const isHInHovered = hoveredElement?.type === 'handleIn' && hoveredElement.keyframeIndex === i;
+        ctx.globalAlpha = opacity;
+        ctx.fillStyle = isHInHovered ? theme.textPrimary : theme.textSecondary;
+        ctx.beginPath();
+        ctx.arc(hIn.px, hIn.py, isHInHovered ? hInRadius + 1 : hInRadius, 0, Math.PI * 2);
+        ctx.fill();
+        // Handle Out
+        const hOut = domainToCanvas(kf.x + kf.handleOut.x, kf.y + kf.handleOut.y, viewport, w, h);
+        ctx.globalAlpha = opacity * (isAutoMode ? 0.4 : 0.7);
+        ctx.strokeStyle = theme.textMuted;
+        ctx.lineWidth = 1;
+        ctx.setLineDash([3, 3]);
+        ctx.beginPath();
+        ctx.moveTo(kfCanvas.px, kfCanvas.py);
+        ctx.lineTo(hOut.px, hOut.py);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        // Handle Out point
+        const hOutRadius = isAutoMode ? 3 : 4;
+        const isHOutHovered = hoveredElement?.type === 'handleOut' &&
+            hoveredElement.keyframeIndex === i;
+        ctx.globalAlpha = opacity;
+        ctx.fillStyle = isHOutHovered ? theme.textPrimary : theme.textSecondary;
+        ctx.beginPath();
+        ctx.arc(hOut.px, hOut.py, isHOutHovered ? hOutRadius + 1 : hOutRadius, 0, Math.PI * 2);
+        ctx.fill();
+    }
+}
+function drawKeyframes(ctx, curve, viewport, w, h, curveColor, selectedIds, hoveredElement, theme, opacity) {
+    const { keyframes } = curve;
+    for (let i = 0; i < keyframes.length; i++) {
+        const kf = keyframes[i];
+        if (!kf)
+            continue;
+        const isSelected = kf.id ? selectedIds.has(kf.id) : false;
+        const isHovered = hoveredElement?.type === 'keyframe' && hoveredElement.keyframeIndex === i;
+        const isEndpoint = i === 0 || i === keyframes.length - 1;
+        const { px, py } = domainToCanvas(kf.x, kf.y, viewport, w, h);
+        ctx.globalAlpha = opacity;
+        if (isEndpoint) {
+            // Diamond shape for endpoints
+            const size = isHovered ? 8 : isSelected ? 7 : 6;
+            ctx.beginPath();
+            ctx.moveTo(px, py - size);
+            ctx.lineTo(px + size, py);
+            ctx.lineTo(px, py + size);
+            ctx.lineTo(px - size, py);
+            ctx.closePath();
+        }
+        else {
+            // Circle for middle keyframes
+            const radius = isHovered ? 8 : isSelected ? 7 : 6;
+            ctx.beginPath();
+            ctx.arc(px, py, radius, 0, Math.PI * 2);
+        }
+        if (isSelected) {
+            ctx.fillStyle = curveColor;
+            ctx.fill();
+            ctx.strokeStyle = theme.textPrimary;
+            ctx.lineWidth = 2;
+            ctx.stroke();
+        }
+        else {
+            ctx.fillStyle = theme.textPrimary;
+            ctx.fill();
+            ctx.strokeStyle = curveColor;
+            ctx.lineWidth = 1.5;
+            ctx.stroke();
+        }
+    }
+}
+function drawSelectionBox(ctx, box, curveColor) {
+    const x = Math.min(box.x1, box.x2);
+    const y = Math.min(box.y1, box.y2);
+    const bw = Math.abs(box.x2 - box.x1);
+    const bh = Math.abs(box.y2 - box.y1);
+    ctx.globalAlpha = 0.1;
+    ctx.fillStyle = curveColor;
+    ctx.fillRect(x, y, bw, bh);
+    ctx.globalAlpha = 0.5;
+    ctx.strokeStyle = curveColor;
+    ctx.lineWidth = 1;
+    ctx.setLineDash([4, 4]);
+    ctx.strokeRect(x, y, bw, bh);
+    ctx.setLineDash([]);
+}
+
+export { useCurveRenderer };
+//# sourceMappingURL=useCurveRenderer.js.map

package/dist/esm/components/controls/CurveEditor/useCurveRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCurveRenderer.js","sources":["../../../../../../src/components/controls/CurveEditor/useCurveRenderer.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAiDA;AAEM;AACJ;AAEA;AACE;AACA;;;AAGA;;AAEA;AAEA;AAEA;AACA;AACA;;AAGA;AACE;AACA;AACA;;;AAEA;;AAGF;;AAkBA;AACE;;;;AAMF;AACA;;;;;;AAOI;AACA;;;;AAID;;;;;;AAOC;AACA;;;AAGD;;;;;;;AAiBC;AACA;;;;;AAKD;;;AAIH;AACA;;AAGA;AACE;;;;;;AA6BA;;AAGF;AACF;;;AAIE;;;AAGI;AACA;AACF;AACA;;;AAIF;AACA;;AAEJ;AAEA;AACA;AAEA;AASE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAGA;AACA;;AACA;;AAGA;AACE;AACA;;AACA;;;;AAKJ;AAEA;AAWE;AAEA;AACE;AACA;;AACA;;;;AAGA;AACA;;AAGA;AAQA;AACA;AACA;;;;;;AAMA;;;AAIA;AAEA;AACA;;AAEA;;;AAUA;AAQA;AACA;AACA;;;;;;AAMA;;;AAIA;AAEE;AACF;AACA;;AAEA;;;AASJ;AAEA;AAYE;AAEA;AACE;AACA;;;AAEA;AAEA;;AAIA;;;AAIE;;;;;;;;;;AASA;;AAEA;;;AAIA;;AAEA;AACA;;;;AAGA;;AAEA;AACA;;;;AAIN;AAEA;AAKE;AACA;AACA;AACA;AAEA;AACA;;AAGA;AACA;AACA;;;AAGA;AACF;;"}

package/dist/esm/components/controls/NumberInput/NumberInput.css.js

@@ -0,0 +1,17 @@
+import './../../../assets/src/components/controls/NumberInput/NumberInput.css.ts.vanilla-uGNr81xQ.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var containerDraggingStyle = 'NumberInput_containerDraggingStyle__1l9csw2';
+var containerHoveredStyle = 'NumberInput_containerHoveredStyle__1l9csw1';
+var helperTextRecipe = createRuntimeFn({defaultClassName:'NumberInput_helperTextRecipe__1l9cswv',variantClassNames:{error:{true:'NumberInput_helperTextRecipe_error_true__1l9csww',false:'NumberInput_helperTextRecipe_error_false__1l9cswx'}},defaultVariants:{error:false},compoundVariants:[]});
+var inputRecipe = createRuntimeFn({defaultClassName:'NumberInput_inputRecipe__1l9cswh',variantClassNames:{size:{sm:'NumberInput_inputRecipe_size_sm__1l9cswi',md:'NumberInput_inputRecipe_size_md__1l9cswj',lg:'NumberInput_inputRecipe_size_lg__1l9cswk'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var labelRecipe = createRuntimeFn({defaultClassName:'NumberInput_labelRecipe__1l9csw3',variantClassNames:{disabled:{true:'NumberInput_labelRecipe_disabled_true__1l9csw4',false:'NumberInput_labelRecipe_disabled_false__1l9csw5'}},defaultVariants:{disabled:false},compoundVariants:[]});
+var numberInputContainerStyle = 'NumberInput_numberInputContainerStyle__1l9csw0';
+var stepButtonIconLeftStyle = 'NumberInput_stepButtonIconLeftStyle__1l9cswf';
+var stepButtonIconRightStyle = 'NumberInput_stepButtonIconRightStyle__1l9cswg';
+var stepButtonRecipe = createRuntimeFn({defaultClassName:'NumberInput_stepButtonBase__1l9csw6',variantClassNames:{position:{left:'NumberInput_stepButtonRecipe_position_left__1l9csw8',right:'NumberInput_stepButtonRecipe_position_right__1l9csw9'},size:{sm:'NumberInput_stepButtonRecipe_size_sm__1l9cswa',md:'NumberInput_stepButtonRecipe_size_md__1l9cswb',lg:'NumberInput_stepButtonRecipe_size_lg__1l9cswc'},visible:{true:'NumberInput_stepButtonRecipe_visible_true__1l9cswd',false:'NumberInput_stepButtonRecipe_visible_false__1l9cswe'}},defaultVariants:{position:'left',size:'md',visible:false},compoundVariants:[]});
+var unitLabelStyle = 'NumberInput_unitLabelStyle__1l9cswu';
+var valueDisplayRecipe = createRuntimeFn({defaultClassName:'NumberInput_valueDisplayRecipe__1l9cswl',variantClassNames:{size:{sm:'NumberInput_valueDisplayRecipe_size_sm__1l9cswm',md:'NumberInput_valueDisplayRecipe_size_md__1l9cswn',lg:'NumberInput_valueDisplayRecipe_size_lg__1l9cswo'},hasStepButtons:{true:'NumberInput_valueDisplayRecipe_hasStepButtons_true__1l9cswp',false:'NumberInput_valueDisplayRecipe_hasStepButtons_false__1l9cswq'}},defaultVariants:{size:'md',hasStepButtons:false},compoundVariants:[[{hasStepButtons:true,size:'sm'},'NumberInput_valueDisplayRecipe_compound_0__1l9cswr'],[{hasStepButtons:true,size:'md'},'NumberInput_valueDisplayRecipe_compound_1__1l9csws'],[{hasStepButtons:true,size:'lg'},'NumberInput_valueDisplayRecipe_compound_2__1l9cswt']]});
+
+export { containerDraggingStyle, containerHoveredStyle, helperTextRecipe, inputRecipe, labelRecipe, numberInputContainerStyle, stepButtonIconLeftStyle, stepButtonIconRightStyle, stepButtonRecipe, unitLabelStyle, valueDisplayRecipe };
+//# sourceMappingURL=NumberInput.css.js.map

package/dist/esm/components/controls/NumberInput/NumberInput.css.js.map

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

package/dist/esm/components/controls/NumberInput/NumberInput.js

@@ -0,0 +1,233 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useRef, useEffect } from 'react';
+import { inputWrapperRecipe } from '../../form/InputWrapper.css.js';
+import { ChevronDownIcon } from '../../Icons/ChevronDownIcon.js';
+import { useNumberInput } from './useNumberInput.js';
+import { cx } from '../../../utils/cx.js';
+import { labelRecipe, stepButtonIconLeftStyle, stepButtonRecipe, inputRecipe, unitLabelStyle, valueDisplayRecipe, stepButtonIconRightStyle, helperTextRecipe, containerDraggingStyle, containerHoveredStyle, numberInputContainerStyle } from './NumberInput.css.js';
+
+/**
+ * A specialized number input component with Blender-like functionality.
+ *
+ * Features:
+ * - Drag left/right to change values with mouse
+ * - Click chevron buttons to increment/decrement
+ * - Keyboard input with mathematical expression support
+ * - Modifier keys: Ctrl (large steps), Shift (precision), Minus (negate)
+ * - Soft and hard value limits
+ * - Unit display support
+ * - Expression evaluation (pi, sqrt, sin, etc.)
+ * - Custom validation and formatting
+ * - Centered value and unit display
+ *
+ * @example
+ * ```tsx
+ * // Basic number input
+ * <NumberInput
+ *   value={rotation}
+ *   onChange={setRotation}
+ *   unit="°"
+ *   step={1}
+ * />
+ *
+ * // With limits and precision
+ * <NumberInput
+ *   value={opacity}
+ *   onChange={setOpacity}
+ *   min={0}
+ *   max={1}
+ *   step={0.1}
+ *   precision={2}
+ *   unit="%"
+ * />
+ *
+ * // With custom validation
+ * <NumberInput
+ *   value={dimension}
+ *   onChange={setDimension}
+ *   validate={(v) => v <= 0 ? "Must be positive" : undefined}
+ *   placeholder="Enter value or expression"
+ * />
+ * ```
+ */
+const NumberInput = ({ 
+// Value props
+value, onChange, 
+// NumberInput specific props
+unit, showStepButtons = true, validate, formatValue, parseValue, 
+// UseNumberInput options
+min, max, softMin, softMax, step, precisionStep, largeStep, precision, allowExpressions = true, dragSensitivity = 1, 
+// Input props
+size = 'md', disabled = false, readOnly = false, errorMessage, placeholder, label, helperText, required = false, className, testId, onFocus, onBlur, onKeyDown, ref, ...props }) => {
+    const containerRef = useRef(null);
+    const inputRef = useRef(null);
+    const [focused, setFocused] = React.useState(false);
+    // Track mouse state for distinguishing click vs drag
+    const mouseDownRef = useRef(null);
+    const dragThreshold = 3; // pixels
+    const clickTimeThreshold = 200; // milliseconds
+    // Combine refs
+    React.useImperativeHandle(ref, () => inputRef.current, [
+        inputRef,
+    ]);
+    const { displayValue, isEditing, isDragging, isHovered, error: internalError, increment, decrement, startDrag, updateDrag, endDrag, startEditing, endEditing, updateDisplayValue, setHovered, handleKeyDown, } = useNumberInput({
+        value,
+        onChange,
+        ...(min !== undefined && { min }),
+        ...(max !== undefined && { max }),
+        ...(softMin !== undefined && { softMin }),
+        ...(softMax !== undefined && { softMax }),
+        ...(step !== undefined && { step }),
+        ...(precisionStep !== undefined && { precisionStep }),
+        ...(largeStep !== undefined && { largeStep }),
+        ...(precision !== undefined && { precision }),
+        ...(allowExpressions !== undefined && { allowExpressions }),
+        disabled: disabled || readOnly,
+        ...(dragSensitivity !== undefined && { dragSensitivity }),
+        ...(formatValue !== undefined && { formatValue }),
+        ...(parseValue !== undefined && { parseValue }),
+    });
+    // External validation
+    const externalError = validate ? validate(value) : undefined;
+    const effectiveError = !!errorMessage || !!externalError || !!internalError;
+    const effectiveErrorMessage = errorMessage ?? externalError ?? internalError;
+    // Mouse event handlers for dragging vs clicking
+    const handleMouseDown = (event) => {
+        if (disabled || readOnly)
+            return;
+        // Only handle left mouse button
+        if (event.button !== 0)
+            return;
+        // Don't handle if clicking on step buttons
+        const target = event.target;
+        if (target.tagName === 'BUTTON' || target.closest('button'))
+            return;
+        // Record mouse down state
+        mouseDownRef.current = {
+            x: event.clientX,
+            time: Date.now(),
+            hasMoved: false,
+        };
+        event.preventDefault();
+    };
+    const handleMouseMove = (event) => {
+        if (!mouseDownRef.current || disabled || readOnly)
+            return;
+        const deltaX = Math.abs(event.clientX - mouseDownRef.current.x);
+        // If we've moved beyond threshold and not already dragging, start drag
+        if (deltaX > dragThreshold &&
+            !mouseDownRef.current.hasMoved &&
+            !isDragging) {
+            mouseDownRef.current.hasMoved = true;
+            startDrag(mouseDownRef.current.x);
+        }
+    };
+    const handleMouseUp = () => {
+        if (!mouseDownRef.current || disabled || readOnly)
+            return;
+        const timeDelta = Date.now() - mouseDownRef.current.time;
+        const wasClick = !mouseDownRef.current.hasMoved && timeDelta < clickTimeThreshold;
+        // If it was a click (not drag), start editing
+        if (wasClick && !isEditing) {
+            startEditing();
+            // Focus the input after a short delay to ensure it's visible
+            setTimeout(() => {
+                inputRef.current?.focus();
+            }, 0);
+        }
+        mouseDownRef.current = null;
+    };
+    // Global mouse move and up handlers for dragging
+    useEffect(() => {
+        if (!isDragging)
+            return;
+        const handleGlobalMouseMove = (event) => {
+            updateDrag(event.clientX);
+        };
+        const handleGlobalMouseUp = () => {
+            endDrag();
+            mouseDownRef.current = null;
+        };
+        document.addEventListener('mousemove', handleGlobalMouseMove);
+        document.addEventListener('mouseup', handleGlobalMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleGlobalMouseMove);
+            document.removeEventListener('mouseup', handleGlobalMouseUp);
+        };
+    }, [isDragging, updateDrag, endDrag]);
+    // Input event handlers
+    const handleInputChange = (event) => {
+        updateDisplayValue(event.target.value);
+    };
+    const handleInputFocus = (event) => {
+        setFocused(true);
+        onFocus?.(event);
+    };
+    const handleInputBlur = (event) => {
+        setFocused(false);
+        endEditing();
+        onBlur?.(event);
+    };
+    const handleInputKeyDown = (event) => {
+        handleKeyDown(event);
+        onKeyDown?.(event);
+    };
+    // Container event handlers
+    const handleContainerMouseEnter = () => {
+        if (!disabled && !readOnly) {
+            setHovered(true);
+        }
+    };
+    const handleContainerMouseLeave = () => {
+        setHovered(false);
+        // Reset mouse state if leaving container
+        mouseDownRef.current = null;
+    };
+    // Step button handlers
+    const handleIncrementClick = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        increment();
+        // Don't focus input after step button click
+    };
+    const handleDecrementClick = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        decrement();
+        // Don't focus input after step button click
+    };
+    // Show step buttons when appropriate
+    const shouldShowStepButtons = showStepButtons && isHovered && !isEditing && !disabled && !readOnly;
+    // Format unit display
+    const unitDisplay = typeof unit === 'function' ? unit(value) : unit;
+    // Format display value
+    const formattedValue = formatValue ? formatValue(value) : displayValue;
+    const inputId = React.useId();
+    return (jsxs("div", { ref: containerRef, className: cx(numberInputContainerStyle, isHovered && !disabled && !isDragging && containerHoveredStyle, isDragging && containerDraggingStyle, className), onMouseEnter: handleContainerMouseEnter, onMouseLeave: handleContainerMouseLeave, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, "data-testid": testId, children: [label && (jsxs("label", { htmlFor: inputId, className: labelRecipe({ disabled }), children: [label, required && jsx("span", { style: { color: 'var(--accent-error)' }, children: " *" })] })), jsxs("div", { className: inputWrapperRecipe({
+                    size,
+                    error: effectiveError,
+                    disabled,
+                    focused,
+                }), children: [showStepButtons && (jsx("button", { type: "button", className: stepButtonRecipe({
+                            position: 'left',
+                            size,
+                            visible: shouldShowStepButtons,
+                        }), onClick: handleDecrementClick, disabled: disabled, tabIndex: -1, "aria-label": "Decrement value", children: jsx("span", { className: stepButtonIconLeftStyle, children: jsx(ChevronDownIcon, { size: size === 'sm' ? 'sm' : 'md' }) }) })), jsx("input", { ...props, ref: inputRef, id: inputId, type: "text", value: isEditing ? displayValue : '', onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, placeholder: isEditing ? placeholder : '', disabled: disabled, required: required, readOnly: readOnly, className: inputRecipe({ size }), style: {
+                            opacity: isEditing ? 1 : 0,
+                            pointerEvents: isEditing ? 'auto' : 'none',
+                        } }), !isEditing && (jsxs("div", { className: valueDisplayRecipe({
+                            size,
+                            hasStepButtons: shouldShowStepButtons,
+                        }), children: [jsx("span", { children: formattedValue }), unitDisplay && (jsx("span", { className: unitLabelStyle, children: unitDisplay }))] })), showStepButtons && (jsx("button", { type: "button", className: stepButtonRecipe({
+                            position: 'right',
+                            size,
+                            visible: shouldShowStepButtons,
+                        }), onClick: handleIncrementClick, disabled: disabled, tabIndex: -1, "aria-label": "Increment value", children: jsx("span", { className: stepButtonIconRightStyle, children: jsx(ChevronDownIcon, { size: size === 'sm' ? 'sm' : 'md' }) }) }))] }), (helperText ?? (effectiveError && effectiveErrorMessage)) && (jsx("div", { className: helperTextRecipe({ error: effectiveError }), children: effectiveError && effectiveErrorMessage
+                    ? effectiveErrorMessage
+                    : helperText }))] }));
+};
+NumberInput.displayName = 'NumberInput';
+
+export { NumberInput };
+//# sourceMappingURL=NumberInput.js.map

package/dist/esm/components/controls/NumberInput/NumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.js","sources":["../../../../../../src/components/controls/NumberInput/NumberInput.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAyIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CG;AACI;AACL;AACA;AAGA;AACA;AAMA;AACA;AAWA;AACA;AAgBA;AACA;AACA;;AAGA;AAKA;AACA;;;;AAKC;AAED;;;;;;;;;;;;;;;;AAgCC;;AAGD;AACA;AACA;;AAGA;;;;AAIE;;;AAGA;;;;;;AAME;AACA;;;AAIJ;AAEA;AACE;;AAEA;;;AAKE;;AAGA;AACA;;AAEJ;;AAGE;;AAEA;AACA;;AAIA;AACE;;;AAGE;;;AAIJ;AACF;;;AAIE;;AAEA;AACE;AACF;;AAGE;AACA;AACF;AAEA;AACA;AAEA;AACE;AACA;AACF;;;AAIF;AACE;AACF;AAEA;;AAEE;AACF;AAEA;;AAEE;AACA;AACF;AAEA;;AAEE;AACF;;;AAIE;;;AAGF;;;;AAKE;AACF;;AAGA;;;AAGE;;AAEF;AAEA;;;AAGE;;AAEF;;AAGA;;AAIA;;AAGA;AAEA;AAEA;;AA0BQ;;;AAGD;AAOK;;AAEA;;;;;;AAwCA;AACD;AAcC;;AAEA;AACD;AAgBD;AACA;AAKZ;AAEA;;"}