@zendir/ui 0.4.1 → 0.6.0

package/dist/react/core/inputs/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sources":["../../../../src/react/core/inputs/NumberInput.tsx"],"sourcesContent":["/**\n * @zendir/ui - NumberInput Component\n * \n * Numeric input with optional slider, min/max bounds, step, precision,\n * and unit display. Essential for operator dashboards (frequency, power,\n * aperture, field of view, etc.).\n * \n * Astro UX Compliance:\n * - Consistent sizing with Input component (small/medium/large)\n * - Focus ring for accessibility (WCAG 2.1 AA)\n * - Status-based border colors\n * - Tabular numbers for value alignment\n * \n * @example\n * ```tsx\n * // Each instance can set precision (decimal places); default is 2\n * <NumberInput value={500} onChange={setFreq} min={300} max={900} unit=\"MHz\" label=\"Frequency\" />\n * <NumberInput value={45.2} onChange={setPower} min={0.1} max={100} step={0.1} precision={1} unit=\"W\" slider />\n * <NumberInput value={1024} onChange={setRes} min={128} max={2048} step={128} precision={0} unit=\"px\" label=\"Resolution\" slider />\n * // Status mode with automatic threshold-based coloring:\n * <NumberInput value={temp} onChange={setTemp} min={0} max={100} unit=\"°C\" slider\n *   statusMode statusThresholds={{ critical: 90, serious: 75, caution: 50, normal: 20, standby: 0 }} />\n * ```\n */\n\nimport React, { memo, forwardRef, useState, useCallback, useRef, useEffect, useId, useMemo } from 'react';\nimport { useTheme } from '../../theme';\nimport type { LabelPlacement } from './Input';\nimport type { StatusLevel } from '../../utils';\nimport type { StatusThresholds } from '../data/propertyConfig';\nimport { deriveStatus } from '../data/propertyConfig';\nimport { StatusIndicator } from '../../astro/StatusIndicator';\n\nexport type NumberInputSize = 'small' | 'medium' | 'large';\n\n/**\n * Re-export SliderStatus as an alias for StatusLevel for convenience.\n * Includes: 'normal' | 'standby' | 'caution' | 'serious' | 'critical' | 'off'\n */\nexport type SliderStatus = StatusLevel;\n\n/** Default decimal places when precision is not specified: 0 = integer display. Set precision (e.g. 2) to show decimals. */\nconst DEFAULT_DECIMAL_PLACES = 0;\n\nexport interface NumberInputProps {\n  /** Current value */\n  value: number;\n  /** Change handler */\n  onChange: (value: number) => void;\n  /** Minimum value */\n  min?: number;\n  /** Maximum value */\n  max?: number;\n  /** Step increment */\n  step?: number;\n  /** Number of decimal places to show and round to. Omit or 0 = integer. Use 2 (or any positive number) to show decimals; 2 is typical when decimals are needed. */\n  precision?: number;\n  /** Unit label displayed after the input (e.g., \"MHz\", \"W\", \"°C\") */\n  unit?: string;\n  /** Label text or ReactNode (supports rich content like tooltip icons) */\n  label?: React.ReactNode;\n  /** Helper text below the input */\n  helperText?: string;\n  /** Error state / message */\n  error?: boolean | string;\n  /** Show slider below the input */\n  slider?: boolean;\n  /** Size variant */\n  size?: NumberInputSize;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Full width */\n  fullWidth?: boolean;\n  /** Custom width */\n  width?: string | number;\n  /** ID for accessibility */\n  id?: string;\n  /** Custom className */\n  className?: string;\n  /** Custom style */\n  style?: React.CSSProperties;\n  /** Text alignment inside the input field */\n  textAlign?: 'left' | 'center' | 'right';\n  /**\n   * Label placement style.\n   * - `'outlined'` — label sits on the input border (notched/Material-style). **Default.**\n   * - `'above'`    — label sits above the input with a gap (classic stack).\n   */\n  labelPlacement?: LabelPlacement;\n  /** Required indicator */\n  required?: boolean;\n\n  // ── Status Mode ──────────────────────────────────────────────────────\n  /**\n   * Enable status-based coloring on the slider track, thumb, and glow.\n   * When enabled, the slider color reflects the current status instead of\n   * the default accent color.\n   */\n  statusMode?: boolean;\n  /**\n   * Manual status override. When provided, this status is used directly\n   * instead of computing from thresholds.\n   */\n  status?: SliderStatus;\n  /**\n   * Threshold map for automatic status resolution based on current value.\n   * Supports both high thresholds (critical, serious, caution) and low\n   * thresholds (criticalLow, seriousLow, cautionLow) from the shared\n   * Astro UX StatusThresholds type.\n   * Requires `statusMode` to be enabled.\n   */\n  statusThresholds?: StatusThresholds;\n  /**\n   * Callback fired whenever the computed/resolved status changes.\n   * Useful for parent components to react to status transitions.\n   */\n  onStatusChange?: (status: SliderStatus) => void;\n}\n\n// Status resolution is delegated to the shared deriveStatus() utility from propertyConfig.\n\nexport const NumberInput = memo(forwardRef<HTMLInputElement, NumberInputProps>(function NumberInput(\n  {\n    value,\n    onChange,\n    min,\n    max,\n    step = 1,\n    precision,\n    unit,\n    label,\n    helperText,\n    error,\n    slider = false,\n    size = 'medium',\n    disabled = false,\n    fullWidth = false,\n    width,\n    id,\n    className,\n    style,\n    textAlign = 'right',\n    labelPlacement = 'outlined',\n    required,\n    statusMode = false,\n    status: statusOverride,\n    statusThresholds,\n    onStatusChange,\n  },\n  ref\n): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const isOutlined = labelPlacement === 'outlined';\n  const decimalPlaces = precision ?? DEFAULT_DECIMAL_PLACES;\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [isSliderActive, setIsSliderActive] = useState(false);\n  const [localValue, setLocalValue] = useState(() => value.toFixed(decimalPlaces));\n  const inputRef = useRef<HTMLInputElement>(null);\n  const sliderContainerRef = useRef<HTMLDivElement>(null);\n  const sliderId = useId().replace(/:/g, '');\n  \n  // ── Status resolution ──────────────────────────────────────────────────\n  const resolvedStatus: SliderStatus | undefined = useMemo(() => {\n    if (!statusMode) return undefined;\n    if (statusOverride) return statusOverride;\n    return deriveStatus(value, statusThresholds);\n  }, [statusMode, statusOverride, statusThresholds, value]);\n\n  // Fire onStatusChange when status changes\n  const prevStatusRef = useRef<SliderStatus | undefined>(undefined);\n  useEffect(() => {\n    if (resolvedStatus !== undefined && resolvedStatus !== prevStatusRef.current) {\n      prevStatusRef.current = resolvedStatus;\n      onStatusChange?.(resolvedStatus);\n    }\n  }, [resolvedStatus, onStatusChange]);\n\n  /** Resolve the active color: status color or accent */\n  const activeColor = useMemo(() => {\n    if (resolvedStatus && tokens.colors.status[resolvedStatus]) {\n      return tokens.colors.status[resolvedStatus];\n    }\n    return tokens.colors.accent.primary;\n  }, [resolvedStatus, tokens.colors.status, tokens.colors.accent.primary]);\n\n  // Sync external value to local state\n  useEffect(() => {\n    if (!isFocused) {\n      setLocalValue(value.toFixed(decimalPlaces));\n    }\n  }, [value, decimalPlaces, isFocused]);\n  \n  const clamp = useCallback((v: number): number => {\n    let result = v;\n    if (min !== undefined) result = Math.max(min, result);\n    if (max !== undefined) result = Math.min(max, result);\n    result = Number(result.toFixed(decimalPlaces));\n    return result;\n  }, [min, max, decimalPlaces]);\n  \n  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const raw = e.target.value;\n    setLocalValue(raw);\n    \n    const parsed = parseFloat(raw);\n    if (!isNaN(parsed)) {\n      onChange(clamp(parsed));\n    }\n  }, [onChange, clamp]);\n  \n  const handleBlur = useCallback(() => {\n    setIsFocused(false);\n    const parsed = parseFloat(localValue);\n    if (isNaN(parsed)) {\n      setLocalValue(value.toFixed(decimalPlaces));\n    } else {\n      const clamped = clamp(parsed);\n      onChange(clamped);\n      setLocalValue(clamped.toFixed(decimalPlaces));\n    }\n  }, [localValue, value, onChange, clamp, decimalPlaces]);\n  \n  const handleSliderChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const parsed = parseFloat(e.target.value);\n    const clamped = clamp(parsed);\n    onChange(clamped);\n    setLocalValue(clamped.toFixed(decimalPlaces));\n  }, [onChange, clamp, decimalPlaces]);\n  \n  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      onChange(clamp(value + step));\n    } else if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      onChange(clamp(value - step));\n    }\n  }, [value, step, onChange, clamp]);\n  \n  // Wheel handler: scroll on slider or input changes value\n  const handleWheel = useCallback((e: WheelEvent) => {\n    if (disabled || min === undefined || max === undefined) return;\n    e.preventDefault();\n    const direction = e.deltaY < 0 ? 1 : -1;\n    onChange(clamp(value + step * direction));\n  }, [value, step, onChange, clamp, disabled, min, max]);\n  \n  // Attach wheel listener to slider container AND input element\n  useEffect(() => {\n    const sliderContainer = sliderContainerRef.current;\n    const inputElement = inputRef.current;\n    \n    // Always attach to input if min/max defined, regardless of slider prop\n    if (min !== undefined && max !== undefined) {\n      if (slider && sliderContainer) {\n        sliderContainer.addEventListener('wheel', handleWheel, { passive: false });\n      }\n      if (inputElement) {\n        inputElement.addEventListener('wheel', handleWheel, { passive: false });\n      }\n    }\n    \n    return () => {\n      if (sliderContainer) sliderContainer.removeEventListener('wheel', handleWheel);\n      if (inputElement) inputElement.removeEventListener('wheel', handleWheel);\n    };\n  }, [handleWheel, slider, min, max]);\n  \n  // Release slider active state when mouse is released anywhere\n  useEffect(() => {\n    if (!isSliderActive) return;\n    const handleUp = () => setIsSliderActive(false);\n    window.addEventListener('mouseup', handleUp);\n    window.addEventListener('touchend', handleUp);\n    return () => {\n      window.removeEventListener('mouseup', handleUp);\n      window.removeEventListener('touchend', handleUp);\n    };\n  }, [isSliderActive]);\n\n  const [isUnitDragging, setIsUnitDragging] = useState(false);\n  const dragStartValueRef = useRef<number>(0);\n  const dragStartYRef = useRef<number>(0);\n  const unitRef = useRef<HTMLSpanElement>(null);\n\n  // Unit Drag Handler\n  const handleUnitMouseDown = useCallback((e: React.MouseEvent) => {\n    if (disabled) return;\n    \n    e.preventDefault();\n    setIsUnitDragging(true);\n    dragStartValueRef.current = value;\n    dragStartYRef.current = e.clientY;\n    \n    // Lock cursor if supported for infinite drag\n    if (document.body.requestPointerLock) {\n      document.body.requestPointerLock();\n    }\n  }, [value, disabled]);\n\n  const handleUnitMouseMove = useCallback((e: MouseEvent) => {\n    if (!isUnitDragging) return;\n    \n    // Use movementY if pointer is locked (infinite drag), otherwise fallback to delta\n    // Invert Y because dragging UP (negative Y) should INCREASE value\n    const deltaY = document.pointerLockElement \n      ? -e.movementY \n      : (dragStartYRef.current - e.clientY);\n      \n    if (deltaY === 0) return;\n\n    // Velocity / Precision Logic\n    // Shift key = Precision mode (0.1x speed)\n    // Ctrl/Cmd key = Fast mode (10x speed)\n    let speedMultiplier = 1;\n    if (e.shiftKey) speedMultiplier = 0.1;\n    else if (e.ctrlKey || e.metaKey) speedMultiplier = 10;\n    \n    // Scale sensitivity: 1 pixel = 1 step * multiplier\n    // For non-locked pointer, we might want to dampen it slightly to 0.5 step per pixel\n    const sensitivity = document.pointerLockElement ? 1 : 0.5;\n    \n    const change = deltaY * sensitivity * (step || 1) * speedMultiplier;\n    \n    // If pointer is NOT locked, we update reference to prevent jumpiness\n    if (!document.pointerLockElement) {\n        dragStartYRef.current = e.clientY;\n        dragStartValueRef.current = clamp(value + change);\n        onChange(clamp(value + change));\n    } else {\n        // For locked pointer, we accumulate on the start value or current value\n        // Better to accumulate on current value to handle continuous flow\n        onChange(clamp(value + change));\n    }\n    \n  }, [isUnitDragging, value, step, onChange, clamp]);\n\n  const handleUnitMouseUp = useCallback(() => {\n    if (isUnitDragging) {\n      setIsUnitDragging(false);\n      if (document.exitPointerLock) {\n        document.exitPointerLock();\n      }\n    }\n  }, [isUnitDragging]);\n\n  // Global mouse listeners for drag\n  useEffect(() => {\n    if (isUnitDragging) {\n      window.addEventListener('mousemove', handleUnitMouseMove);\n      window.addEventListener('mouseup', handleUnitMouseUp);\n    }\n    return () => {\n      window.removeEventListener('mousemove', handleUnitMouseMove);\n      window.removeEventListener('mouseup', handleUnitMouseUp);\n    };\n  }, [isUnitDragging, handleUnitMouseMove, handleUnitMouseUp]);\n\n  // Attach wheel listener to unit element too\n  useEffect(() => {\n    const unitEl = unitRef.current;\n    if (unitEl && !disabled) {\n      unitEl.addEventListener('wheel', handleWheel, { passive: false });\n    }\n    return () => {\n      if (unitEl) unitEl.removeEventListener('wheel', handleWheel);\n    };\n  }, [handleWheel, disabled]);\n  \n  // Size config — heights match Input & Select via elementSize tokens\n  const sizeConfig = {\n    small: { height: tokens.elementSize.sm, fontSize: tokens.typography.fontSize.xs, padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`, sliderHeight: 3, inputPaddingLeft: 8 },\n    medium: { height: tokens.elementSize.md, fontSize: tokens.typography.fontSize.sm, padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`, sliderHeight: 4, inputPaddingLeft: 12 },\n    large: { height: tokens.elementSize.lg, fontSize: tokens.typography.fontSize.base, padding: `${tokens.spacing.sm} ${tokens.spacing.md}`, sliderHeight: 5, inputPaddingLeft: 16 },\n  };\n  const config = sizeConfig[size];\n  \n  const hasError = !!error;\n  const errorMessage = typeof error === 'string' ? error : undefined;\n  \n  const computedBorder = hasError\n    ? tokens.borders.input.error\n    : isFocused\n      ? tokens.borders.input.focus\n      : isHovered\n        ? tokens.borders.input.hover\n        : tokens.borders.input.default;\n  \n  const inputBg = isTransparentTheme\n    ? (tokens.colors.interactive.transparentInputBg || 'rgba(139, 92, 246, 0.08)')\n    : tokens.colors.background.surface;\n\n  // Slider track gradient (filled portion)\n  const sliderPercent = (min !== undefined && max !== undefined)\n    ? ((value - min) / (max - min)) * 100\n    : 50;\n\n  const inputId = id || (typeof label === 'string' ? `zendir-number-${label.replace(/\\s+/g, '-').toLowerCase()}` : undefined);\n\n  // ── Thumb dimensions ─────────────────────────────────────────────────\n  const thumbWidth = 24;\n  const thumbHeight = config.sliderHeight + 8;\n  const trackH = config.sliderHeight;\n\n  return (\n    <div\n      className={className}\n      style={{\n        display: 'inline-flex',\n        flexDirection: 'column',\n        // No gap when slider is present — slider sits flush on the input bottom edge\n        gap: slider ? 0 : tokens.spacing.xs,\n        width: fullWidth ? '100%' : (typeof width === 'number' ? `${width}px` : width),\n        fontFamily: tokens.typography.fontFamily.primary,\n        ...style,\n      }}\n    >\n      {/* Label: 'above' variant */}\n      {label && !isOutlined && (\n        <label\n          htmlFor={inputId}\n          style={{\n            fontSize: tokens.typography.fontSize.xs,\n            fontWeight: tokens.typography.fontWeight.medium,\n            color: tokens.colors.text.secondary,\n            letterSpacing: tokens.typography.letterSpacing.wide,\n          }}\n        >\n          {label}\n          {required && (\n            <span style={{ color: tokens.colors.status.critical, marginLeft: '2px' }}>*</span>\n          )}\n        </label>\n      )}\n      \n      {/* Input row */}\n      <div\n        style={{\n          position: 'relative',\n          display: 'flex',\n          alignItems: 'center',\n          height: config.height,\n          backgroundColor: inputBg,\n          border: computedBorder,\n          borderRadius: tokens.borderRadius.md,\n          transition: tokens.animation.fast,\n          opacity: disabled ? 0.5 : 1,\n          overflow: isOutlined ? 'visible' : 'hidden',\n        }}\n        onMouseEnter={() => !disabled && setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      >\n        {/* Label: 'outlined' variant — positioned on the input row border */}\n        {label && isOutlined && (\n          <label\n            htmlFor={inputId}\n            style={{\n              position: 'absolute',\n              top: 0,\n              left: `${config.inputPaddingLeft - 6}px`,\n              transform: 'translateY(-50%)',\n              backgroundColor: isTransparentTheme\n                ? tokens.colors.background.base\n                : tokens.colors.background.surface,\n              padding: '0 6px',\n              fontSize: { small: '0.625rem', medium: '0.6875rem', large: '0.75rem' }[size],\n              fontWeight: tokens.typography.fontWeight.medium,\n              color: isFocused\n                ? (hasError ? tokens.colors.status.critical : tokens.colors.accent.primary)\n                : hasError\n                  ? tokens.colors.status.critical\n                  : tokens.colors.text.secondary,\n              letterSpacing: tokens.typography.letterSpacing.wide,\n              zIndex: 1,\n              pointerEvents: 'none',\n              transition: tokens.animation.fast,\n              lineHeight: 1.2,\n              whiteSpace: 'nowrap',\n            }}\n          >\n            {label}\n            {required && (\n              <span style={{ color: tokens.colors.status.critical, marginLeft: '2px' }}>*</span>\n            )}\n          </label>\n        )}\n        <input\n          ref={ref || inputRef}\n          id={inputId}\n          type=\"text\"\n          inputMode=\"decimal\"\n          value={localValue}\n          onChange={handleInputChange}\n          onFocus={() => setIsFocused(true)}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n          disabled={disabled}\n          aria-invalid={hasError}\n          aria-describedby={errorMessage ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined}\n          style={{\n            flex: 1,\n            height: '100%',\n            padding: config.padding,\n            fontSize: config.fontSize,\n            fontWeight: tokens.typography.fontWeight.medium,\n            fontFamily: tokens.typography.fontFamily.mono,\n            fontVariantNumeric: 'tabular-nums',\n            color: tokens.colors.text.primary,\n            backgroundColor: 'transparent',\n            border: 'none',\n            outline: 'none',\n            minWidth: 0,\n            textAlign,\n          }}\n        />\n        \n        {/* Unit */}\n        {unit && (\n          <span\n            ref={unitRef}\n            onMouseDown={handleUnitMouseDown}\n            style={{\n              padding: `0 ${tokens.spacing.sm}`,\n              fontSize: tokens.typography.fontSize.xs,\n              fontWeight: tokens.typography.fontWeight.medium,\n              color: isUnitDragging ? activeColor : tokens.colors.text.tertiary,\n              fontFamily: tokens.typography.fontFamily.primary,\n              flexShrink: 0,\n              borderLeft: tokens.borders.separator,\n              height: '100%',\n              display: 'flex',\n              alignItems: 'center',\n              backgroundColor: isTransparentTheme\n                ? 'rgba(139, 92, 246, 0.04)'\n                : 'rgba(0, 0, 0, 0.15)',\n              cursor: disabled ? 'not-allowed' : 'ns-resize',\n              userSelect: 'none',\n              transition: 'color 0.2s ease',\n            }}\n            title={disabled ? undefined : \"Drag to adjust value\"}\n          >\n            {unit}\n          </span>\n        )}\n      </div>\n      \n      {/* Slider — directly below input with no gap */}\n      {slider && min !== undefined && max !== undefined && (() => {\n        const sliderH = thumbHeight;\n        const cy = sliderH / 2;\n        const pct = sliderPercent / 100; // 0..1\n\n        // Thumb left-edge position: maps 0% → 0px, 100% → (containerWidth - thumbWidth)\n        // CSS calc: pct * (100% - thumbWidth)\n        const thumbLeftCalc = `calc(${pct} * (100% - ${thumbWidth}px))`;\n\n        // Filled track width = thumb left edge + 1px overlap for seamless join\n        const filledWidthCalc = `calc(${pct} * (100% - ${thumbWidth}px) + 1px)`;\n\n        return (\n          <div\n            ref={sliderContainerRef}\n            style={{\n              position: 'relative',\n              height: `${sliderH}px`,\n              marginTop:  `-${sliderH / 1.42}px`,\n            }}\n          >\n            {/* Unfilled track */}\n            <div style={{\n              position: 'absolute',\n              top: `${cy}px`,\n              left: 0,\n              right: 0,\n              height: `${trackH}px`,\n              transform: 'translateY(-50%)',\n              borderRadius: `${trackH / 2}px`,\n              backgroundColor: `${tokens.colors.border.muted}60`,\n            }} />\n            {/* Filled track — flat right edge for flush join with thumb */}\n            <div style={{\n              position: 'absolute',\n              top: `${cy}px`,\n              left: 0,\n              width: filledWidthCalc,\n              height: `${trackH}px`,\n              transform: 'translateY(-50%)',\n              borderRadius: `${trackH / 2}px 0 0 ${trackH / 2}px`,\n              background: activeColor,\n              transition: 'background 300ms ease',\n            }} />\n            {/* Invisible range input */}\n            <input\n              type=\"range\"\n              className={`zendir-slider-${sliderId}`}\n              min={min}\n              max={max}\n              step={step}\n              value={value}\n              onChange={handleSliderChange}\n              onMouseDown={() => setIsSliderActive(true)}\n              onMouseUp={() => setIsSliderActive(false)}\n              onTouchStart={() => setIsSliderActive(true)}\n              onTouchEnd={() => setIsSliderActive(false)}\n              disabled={disabled}\n              aria-label={typeof label === 'string' ? label : 'Value slider'}\n              style={{\n                position: 'absolute',\n                top: 0,\n                left: 0,\n                width: '100%',\n                height: '100%',\n                margin: 0,\n                padding: 0,\n                opacity: 0,\n                cursor: disabled ? 'not-allowed' : 'pointer',\n                zIndex: 2,\n              }}\n            />\n            {/* Smooth-blob thumb — left edge flush with filled track end */}\n            <div\n              style={{\n                position: 'absolute',\n                top: `${cy}px`,\n                left: thumbLeftCalc,\n                width: `${thumbWidth}px`,\n                height: `${thumbHeight}px`,\n                transform: 'translateY(-50%)',\n                pointerEvents: 'none',\n                zIndex: 1,\n              }}\n            >\n              <svg\n                width={thumbWidth}\n                height={thumbHeight}\n                viewBox={`0 0 ${thumbWidth} ${thumbHeight}`}\n                xmlns=\"http://www.w3.org/2000/svg\"\n                style={{ display: 'block', overflow: 'visible' }}\n              >\n                {(() => {\n                  const w = thumbWidth;\n                  const h = thumbHeight;\n                  const svgCy = h / 2;\n                  const trackHalf = trackH / 2;\n                  const r = 2;\n\n                  const ltop = svgCy - trackHalf;\n                  const lbot = svgCy + trackHalf;\n                  const rtop = r;\n                  const rbot = h - r;\n\n                  const cp1x = w * 0.28;\n                  const cp2x = w * 0.48;\n\n                  const d = [\n                    `M 0 ${ltop}`,\n                    `C ${cp1x} ${ltop}, ${cp2x} ${rtop}, ${w - r} ${rtop}`,\n                    `A ${r} ${r} 0 0 1 ${w} ${rtop + r}`,\n                    `L ${w} ${rbot - r}`,\n                    `A ${r} ${r} 0 0 1 ${w - r} ${rbot}`,\n                    `C ${cp2x} ${rbot}, ${cp1x} ${lbot}, 0 ${lbot}`,\n                    `Z`,\n                  ].join(' ');\n\n                  return <path d={d} fill={activeColor} />;\n                })()}\n              </svg>\n            </div>\n\n            {/* Astro UXDS status symbol (shape-coded: circle/square/diamond/triangle) */}\n            {statusMode && resolvedStatus && (\n              <div\n                style={{\n                  position: 'absolute',\n                  bottom: `-${size === 'large' ? 10 : 8}px`,\n                  left: `calc(${pct} * (100% - ${thumbWidth}px) + ${thumbWidth / 2}px)`,\n                  transform: 'translateX(-50%)',\n                  zIndex: 1,\n                  lineHeight: 0,\n                }}\n              >\n                <StatusIndicator\n                  status={resolvedStatus}\n                  small\n                />\n              </div>\n            )}\n          </div>\n        );\n      })()}\n      \n      {/* Helper / Error text */}\n      {(helperText || errorMessage) && (\n        <div\n          id={errorMessage ? `${inputId}-error` : `${inputId}-helper`}\n          role={errorMessage ? 'alert' : undefined}\n          style={{\n            fontSize: tokens.typography.fontSize.xs,\n            color: hasError ? tokens.colors.status.critical : tokens.colors.text.tertiary,\n          }}\n        >\n          {errorMessage || helperText}\n        </div>\n      )}\n    </div>\n  );\n}));\n\nexport default NumberInput;\n"],"names":["NumberInput"],"mappings":"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"}
+{"version":3,"file":"NumberInput.js","names":[],"sources":["../../../../src/react/core/inputs/NumberInput.tsx"],"sourcesContent":["/**\n * @zendir/ui - NumberInput Component\n *\n * Numeric input with optional slider, min/max bounds, step, precision,\n * and unit display. Essential for operator dashboards (frequency, power,\n * aperture, field of view, etc.).\n *\n * Astro UX Compliance:\n * - Consistent sizing with Input component (small/medium/large)\n * - Focus ring for accessibility (WCAG 2.1 AA)\n * - Status-based border colors\n * - Tabular numbers for value alignment\n *\n * @example\n * ```tsx\n * // Each instance can set precision (decimal places); default is 2\n * <NumberInput value={500} onChange={setFreq} min={300} max={900} unit=\"MHz\" label=\"Frequency\" />\n * <NumberInput value={45.2} onChange={setPower} min={0.1} max={100} step={0.1} precision={1} unit=\"W\" slider />\n * <NumberInput value={1024} onChange={setRes} min={128} max={2048} step={128} precision={0} unit=\"px\" label=\"Resolution\" slider />\n * // Status mode with automatic threshold-based coloring:\n * <NumberInput value={temp} onChange={setTemp} min={0} max={100} unit=\"°C\" slider\n *   statusMode statusThresholds={{ critical: 90, serious: 75, caution: 50, normal: 20, standby: 0 }} />\n * ```\n */\n\nimport React, {\n  memo,\n  forwardRef,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  useId,\n  useMemo,\n} from \"react\";\nimport { useTheme } from \"../../theme\";\nimport type { LabelPlacement } from \"./Input\";\nimport type { StatusLevel } from \"../../utils\";\nimport type { StatusThresholds } from \"../data/propertyConfig\";\nimport { deriveStatus } from \"../data/propertyConfig\";\nimport { StatusIndicator } from \"../../astro/StatusIndicator\";\n\nexport type NumberInputSize = \"small\" | \"medium\" | \"large\";\n\n/**\n * Re-export SliderStatus as an alias for StatusLevel for convenience.\n * Includes: 'normal' | 'standby' | 'caution' | 'serious' | 'critical' | 'off'\n */\nexport type SliderStatus = StatusLevel;\n\n/** Default decimal places when precision is not specified: 0 = integer display. Set precision (e.g. 2) to show decimals. */\nconst DEFAULT_DECIMAL_PLACES = 0;\n\nexport interface NumberInputProps {\n  /** Current value */\n  value: number;\n  /** Change handler */\n  onChange: (value: number) => void;\n  /** Minimum value */\n  min?: number;\n  /** Maximum value */\n  max?: number;\n  /** Step increment */\n  step?: number;\n  /** Number of decimal places to show and round to. Omit or 0 = integer. Use 2 (or any positive number) to show decimals; 2 is typical when decimals are needed. */\n  precision?: number;\n  /** Unit label displayed after the input (e.g., \"MHz\", \"W\", \"°C\") */\n  unit?: string;\n  /** Label text or ReactNode (supports rich content like tooltip icons) */\n  label?: React.ReactNode;\n  /** Helper text below the input */\n  helperText?: string;\n  /** Error state / message */\n  error?: boolean | string;\n  /** Show slider below the input */\n  slider?: boolean;\n  /** Size variant */\n  size?: NumberInputSize;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Full width */\n  fullWidth?: boolean;\n  /** Custom width */\n  width?: string | number;\n  /** ID for accessibility */\n  id?: string;\n  /** Custom className */\n  className?: string;\n  /** Custom style */\n  style?: React.CSSProperties;\n  /** Text alignment inside the input field */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /**\n   * Label placement style.\n   * - `'outlined'` — label sits on the input border (notched/Material-style). **Default.**\n   * - `'above'`    — label sits above the input with a gap (classic stack).\n   */\n  labelPlacement?: LabelPlacement;\n  /** Required indicator */\n  required?: boolean;\n\n  // ── Status Mode ──────────────────────────────────────────────────────\n  /**\n   * Enable status-based coloring on the slider track, thumb, and glow.\n   * When enabled, the slider color reflects the current status instead of\n   * the default accent color.\n   */\n  statusMode?: boolean;\n  /**\n   * Manual status override. When provided, this status is used directly\n   * instead of computing from thresholds.\n   */\n  status?: SliderStatus;\n  /**\n   * Threshold map for automatic status resolution based on current value.\n   * Supports both high thresholds (critical, serious, caution) and low\n   * thresholds (criticalLow, seriousLow, cautionLow) from the shared\n   * Astro UX StatusThresholds type.\n   * Requires `statusMode` to be enabled.\n   */\n  statusThresholds?: StatusThresholds;\n  /**\n   * Callback fired whenever the computed/resolved status changes.\n   * Useful for parent components to react to status transitions.\n   */\n  onStatusChange?: (status: SliderStatus) => void;\n}\n\n// Status resolution is delegated to the shared deriveStatus() utility from propertyConfig.\n\nexport const NumberInput = memo(\n  forwardRef<HTMLInputElement, NumberInputProps>(function NumberInput(\n    {\n      value,\n      onChange,\n      min,\n      max,\n      step = 1,\n      precision,\n      unit,\n      label,\n      helperText,\n      error,\n      slider = false,\n      size = \"medium\",\n      disabled = false,\n      fullWidth = false,\n      width,\n      id,\n      className,\n      style,\n      textAlign = \"right\",\n      labelPlacement = \"outlined\",\n      required,\n      statusMode = false,\n      status: statusOverride,\n      statusThresholds,\n      onStatusChange,\n    },\n    ref,\n  ): React.ReactElement {\n    const { tokens, theme } = useTheme();\n    const isTransparentTheme =\n      theme === \"transparent\" ||\n      theme === \"transparent-bold\" ||\n      theme === \"transparent-minimal\";\n    const isOutlined = labelPlacement === \"outlined\";\n    const decimalPlaces = precision ?? DEFAULT_DECIMAL_PLACES;\n    const [isFocused, setIsFocused] = useState(false);\n    const [isHovered, setIsHovered] = useState(false);\n    const [isSliderActive, setIsSliderActive] = useState(false);\n    const [localValue, setLocalValue] = useState(() =>\n      value.toFixed(decimalPlaces),\n    );\n    const inputRef = useRef<HTMLInputElement>(null);\n    const sliderContainerRef = useRef<HTMLDivElement>(null);\n    const sliderId = useId().replace(/:/g, \"\");\n\n    // ── Status resolution ──────────────────────────────────────────────────\n    const resolvedStatus: SliderStatus | undefined = useMemo(() => {\n      if (!statusMode) return undefined;\n      if (statusOverride) return statusOverride;\n      return deriveStatus(value, statusThresholds);\n    }, [statusMode, statusOverride, statusThresholds, value]);\n\n    // Fire onStatusChange when status changes\n    const prevStatusRef = useRef<SliderStatus | undefined>(undefined);\n    useEffect(() => {\n      if (\n        resolvedStatus !== undefined &&\n        resolvedStatus !== prevStatusRef.current\n      ) {\n        prevStatusRef.current = resolvedStatus;\n        onStatusChange?.(resolvedStatus);\n      }\n    }, [resolvedStatus, onStatusChange]);\n\n    /** Resolve the active color: status color or accent */\n    const activeColor = useMemo(() => {\n      if (resolvedStatus && tokens.colors.status[resolvedStatus]) {\n        return tokens.colors.status[resolvedStatus];\n      }\n      return tokens.colors.accent.primary;\n    }, [resolvedStatus, tokens.colors.status, tokens.colors.accent.primary]);\n\n    // Sync external value to local state\n    useEffect(() => {\n      if (!isFocused) {\n        setLocalValue(value.toFixed(decimalPlaces));\n      }\n    }, [value, decimalPlaces, isFocused]);\n\n    const clamp = useCallback(\n      (v: number): number => {\n        let result = v;\n        if (min !== undefined) result = Math.max(min, result);\n        if (max !== undefined) result = Math.min(max, result);\n        result = Number(result.toFixed(decimalPlaces));\n        return result;\n      },\n      [min, max, decimalPlaces],\n    );\n\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const raw = e.target.value;\n        setLocalValue(raw);\n\n        const parsed = parseFloat(raw);\n        if (!isNaN(parsed)) {\n          onChange(clamp(parsed));\n        }\n      },\n      [onChange, clamp],\n    );\n\n    const handleBlur = useCallback(() => {\n      setIsFocused(false);\n      const parsed = parseFloat(localValue);\n      if (isNaN(parsed)) {\n        setLocalValue(value.toFixed(decimalPlaces));\n      } else {\n        const clamped = clamp(parsed);\n        onChange(clamped);\n        setLocalValue(clamped.toFixed(decimalPlaces));\n      }\n    }, [localValue, value, onChange, clamp, decimalPlaces]);\n\n    const handleSliderChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const parsed = parseFloat(e.target.value);\n        const clamped = clamp(parsed);\n        onChange(clamped);\n        setLocalValue(clamped.toFixed(decimalPlaces));\n      },\n      [onChange, clamp, decimalPlaces],\n    );\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === \"ArrowUp\") {\n          e.preventDefault();\n          onChange(clamp(value + step));\n        } else if (e.key === \"ArrowDown\") {\n          e.preventDefault();\n          onChange(clamp(value - step));\n        }\n      },\n      [value, step, onChange, clamp],\n    );\n\n    // Wheel handler: scroll on slider or input changes value\n    const handleWheel = useCallback(\n      (e: WheelEvent) => {\n        if (disabled || min === undefined || max === undefined) return;\n        e.preventDefault();\n        const direction = e.deltaY < 0 ? 1 : -1;\n        onChange(clamp(value + step * direction));\n      },\n      [value, step, onChange, clamp, disabled, min, max],\n    );\n\n    // Attach wheel listener to slider container AND input element\n    useEffect(() => {\n      const sliderContainer = sliderContainerRef.current;\n      const inputElement = inputRef.current;\n\n      // Always attach to input if min/max defined, regardless of slider prop\n      if (min !== undefined && max !== undefined) {\n        if (slider && sliderContainer) {\n          sliderContainer.addEventListener(\"wheel\", handleWheel, {\n            passive: false,\n          });\n        }\n        if (inputElement) {\n          inputElement.addEventListener(\"wheel\", handleWheel, {\n            passive: false,\n          });\n        }\n      }\n\n      return () => {\n        if (sliderContainer)\n          sliderContainer.removeEventListener(\"wheel\", handleWheel);\n        if (inputElement)\n          inputElement.removeEventListener(\"wheel\", handleWheel);\n      };\n    }, [handleWheel, slider, min, max]);\n\n    // Release slider active state when mouse is released anywhere\n    useEffect(() => {\n      if (!isSliderActive) return;\n      const handleUp = () => setIsSliderActive(false);\n      window.addEventListener(\"mouseup\", handleUp);\n      window.addEventListener(\"touchend\", handleUp);\n      return () => {\n        window.removeEventListener(\"mouseup\", handleUp);\n        window.removeEventListener(\"touchend\", handleUp);\n      };\n    }, [isSliderActive]);\n\n    const [isUnitDragging, setIsUnitDragging] = useState(false);\n    const dragStartValueRef = useRef<number>(0);\n    const dragStartYRef = useRef<number>(0);\n    const unitRef = useRef<HTMLSpanElement>(null);\n\n    // Unit Drag Handler\n    const handleUnitMouseDown = useCallback(\n      (e: React.MouseEvent) => {\n        if (disabled) return;\n\n        e.preventDefault();\n        setIsUnitDragging(true);\n        dragStartValueRef.current = value;\n        dragStartYRef.current = e.clientY;\n\n        // Lock cursor if supported for infinite drag\n        if (document.body.requestPointerLock) {\n          document.body.requestPointerLock();\n        }\n      },\n      [value, disabled],\n    );\n\n    const handleUnitMouseMove = useCallback(\n      (e: MouseEvent) => {\n        if (!isUnitDragging) return;\n\n        // Use movementY if pointer is locked (infinite drag), otherwise fallback to delta\n        // Invert Y because dragging UP (negative Y) should INCREASE value\n        const deltaY = document.pointerLockElement\n          ? -e.movementY\n          : dragStartYRef.current - e.clientY;\n\n        if (deltaY === 0) return;\n\n        // Velocity / Precision Logic\n        // Shift key = Precision mode (0.1x speed)\n        // Ctrl/Cmd key = Fast mode (10x speed)\n        let speedMultiplier = 1;\n        if (e.shiftKey) speedMultiplier = 0.1;\n        else if (e.ctrlKey || e.metaKey) speedMultiplier = 10;\n\n        // Scale sensitivity: 1 pixel = 1 step * multiplier\n        // For non-locked pointer, we might want to dampen it slightly to 0.5 step per pixel\n        const sensitivity = document.pointerLockElement ? 1 : 0.5;\n\n        const change = deltaY * sensitivity * (step || 1) * speedMultiplier;\n\n        // If pointer is NOT locked, we update reference to prevent jumpiness\n        if (!document.pointerLockElement) {\n          dragStartYRef.current = e.clientY;\n          dragStartValueRef.current = clamp(value + change);\n          onChange(clamp(value + change));\n        } else {\n          // For locked pointer, we accumulate on the start value or current value\n          // Better to accumulate on current value to handle continuous flow\n          onChange(clamp(value + change));\n        }\n      },\n      [isUnitDragging, value, step, onChange, clamp],\n    );\n\n    const handleUnitMouseUp = useCallback(() => {\n      if (isUnitDragging) {\n        setIsUnitDragging(false);\n        if (document.exitPointerLock) {\n          document.exitPointerLock();\n        }\n      }\n    }, [isUnitDragging]);\n\n    // Global mouse listeners for drag\n    useEffect(() => {\n      if (isUnitDragging) {\n        window.addEventListener(\"mousemove\", handleUnitMouseMove);\n        window.addEventListener(\"mouseup\", handleUnitMouseUp);\n      }\n      return () => {\n        window.removeEventListener(\"mousemove\", handleUnitMouseMove);\n        window.removeEventListener(\"mouseup\", handleUnitMouseUp);\n      };\n    }, [isUnitDragging, handleUnitMouseMove, handleUnitMouseUp]);\n\n    // Attach wheel listener to unit element too\n    useEffect(() => {\n      const unitEl = unitRef.current;\n      if (unitEl && !disabled) {\n        unitEl.addEventListener(\"wheel\", handleWheel, { passive: false });\n      }\n      return () => {\n        if (unitEl) unitEl.removeEventListener(\"wheel\", handleWheel);\n      };\n    }, [handleWheel, disabled]);\n\n    // Size config — heights match Input & Select via elementSize tokens\n    const sizeConfig = {\n      small: {\n        height: tokens.elementSize.sm,\n        fontSize: tokens.typography.fontSize.xs,\n        padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n        sliderHeight: 3,\n        inputPaddingLeft: 8,\n      },\n      medium: {\n        height: tokens.elementSize.md,\n        fontSize: tokens.typography.fontSize.sm,\n        padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,\n        sliderHeight: 4,\n        inputPaddingLeft: 12,\n      },\n      large: {\n        height: tokens.elementSize.lg,\n        fontSize: tokens.typography.fontSize.base,\n        padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,\n        sliderHeight: 5,\n        inputPaddingLeft: 16,\n      },\n    };\n    const config = sizeConfig[size];\n\n    const hasError = !!error;\n    const errorMessage = typeof error === \"string\" ? error : undefined;\n\n    const computedBorder = hasError\n      ? tokens.borders.input.error\n      : isFocused\n        ? tokens.borders.input.focus\n        : isHovered\n          ? tokens.borders.input.hover\n          : tokens.borders.input.default;\n\n    const inputBg = isTransparentTheme\n      ? tokens.colors.interactive.transparentInputBg ||\n        \"rgba(139, 92, 246, 0.08)\"\n      : tokens.colors.background.surface;\n\n    // Slider track gradient (filled portion)\n    const sliderPercent =\n      min !== undefined && max !== undefined\n        ? ((value - min) / (max - min)) * 100\n        : 50;\n\n    const inputId =\n      id ||\n      (typeof label === \"string\"\n        ? `zendir-number-${label.replace(/\\s+/g, \"-\").toLowerCase()}`\n        : undefined);\n\n    // ── Thumb dimensions ─────────────────────────────────────────────────\n    const thumbWidth = 24;\n    const thumbHeight = config.sliderHeight + 8;\n    const trackH = config.sliderHeight;\n\n    return (\n      <div\n        className={className}\n        style={{\n          display: \"inline-flex\",\n          flexDirection: \"column\",\n          // No gap when slider is present — slider sits flush on the input bottom edge\n          gap: slider ? 0 : tokens.spacing.xs,\n          width: fullWidth\n            ? \"100%\"\n            : typeof width === \"number\"\n              ? `${width}px`\n              : width,\n          fontFamily: tokens.typography.fontFamily.primary,\n          ...style,\n        }}\n      >\n        {/* Label: 'above' variant */}\n        {label && !isOutlined && (\n          <label\n            htmlFor={inputId}\n            style={{\n              fontSize: tokens.typography.fontSize.xs,\n              fontWeight: tokens.typography.fontWeight.medium,\n              color: tokens.colors.text.secondary,\n              letterSpacing: tokens.typography.letterSpacing.wide,\n            }}\n          >\n            {label}\n            {required && (\n              <span\n                style={{\n                  color: tokens.colors.status.critical,\n                  marginLeft: \"2px\",\n                }}\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        {/* Input row */}\n        <div\n          style={{\n            position: \"relative\",\n            display: \"flex\",\n            alignItems: \"center\",\n            height: config.height,\n            backgroundColor: inputBg,\n            border: computedBorder,\n            borderRadius: tokens.borderRadius.md,\n            transition: tokens.animation.fast,\n            opacity: disabled ? 0.5 : 1,\n            overflow: isOutlined ? \"visible\" : \"hidden\",\n          }}\n          onMouseEnter={() => !disabled && setIsHovered(true)}\n          onMouseLeave={() => setIsHovered(false)}\n        >\n          {/* Label: 'outlined' variant — positioned on the input row border */}\n          {label && isOutlined && (\n            <label\n              htmlFor={inputId}\n              style={{\n                position: \"absolute\",\n                top: 0,\n                left: `${config.inputPaddingLeft - 6}px`,\n                transform: \"translateY(-50%)\",\n                backgroundColor: isTransparentTheme\n                  ? tokens.colors.background.base\n                  : tokens.colors.background.surface,\n                padding: \"0 6px\",\n                fontSize: {\n                  small: \"0.625rem\",\n                  medium: \"0.6875rem\",\n                  large: \"0.75rem\",\n                }[size],\n                fontWeight: tokens.typography.fontWeight.medium,\n                color: isFocused\n                  ? hasError\n                    ? tokens.colors.status.critical\n                    : tokens.colors.accent.primary\n                  : hasError\n                    ? tokens.colors.status.critical\n                    : tokens.colors.text.secondary,\n                letterSpacing: tokens.typography.letterSpacing.wide,\n                zIndex: 1,\n                pointerEvents: \"none\",\n                transition: tokens.animation.fast,\n                lineHeight: 1.2,\n                whiteSpace: \"nowrap\",\n              }}\n            >\n              {label}\n              {required && (\n                <span\n                  style={{\n                    color: tokens.colors.status.critical,\n                    marginLeft: \"2px\",\n                  }}\n                >\n                  *\n                </span>\n              )}\n            </label>\n          )}\n          <input\n            ref={ref || inputRef}\n            id={inputId}\n            type=\"text\"\n            inputMode=\"decimal\"\n            value={localValue}\n            onChange={handleInputChange}\n            onFocus={() => setIsFocused(true)}\n            onBlur={handleBlur}\n            onKeyDown={handleKeyDown}\n            disabled={disabled}\n            aria-invalid={hasError}\n            aria-describedby={\n              errorMessage\n                ? `${inputId}-error`\n                : helperText\n                  ? `${inputId}-helper`\n                  : undefined\n            }\n            style={{\n              flex: 1,\n              height: \"100%\",\n              padding: config.padding,\n              fontSize: config.fontSize,\n              fontWeight: tokens.typography.fontWeight.medium,\n              fontFamily: tokens.typography.fontFamily.mono,\n              fontVariantNumeric: \"tabular-nums\",\n              color: tokens.colors.text.primary,\n              backgroundColor: \"transparent\",\n              border: \"none\",\n              outline: \"none\",\n              minWidth: 0,\n              textAlign,\n            }}\n          />\n\n          {/* Unit */}\n          {unit && (\n            <span\n              ref={unitRef}\n              onMouseDown={handleUnitMouseDown}\n              style={{\n                padding: `0 ${tokens.spacing.sm}`,\n                fontSize: tokens.typography.fontSize.xs,\n                fontWeight: tokens.typography.fontWeight.medium,\n                color: isUnitDragging\n                  ? activeColor\n                  : tokens.colors.text.tertiary,\n                fontFamily: tokens.typography.fontFamily.primary,\n                flexShrink: 0,\n                borderLeft: tokens.borders.separator,\n                height: \"100%\",\n                display: \"flex\",\n                alignItems: \"center\",\n                backgroundColor: isTransparentTheme\n                  ? `${tokens.colors.accent.primary}0a`\n                  : \"rgba(0, 0, 0, 0.15)\",\n                cursor: disabled ? \"not-allowed\" : \"ns-resize\",\n                userSelect: \"none\",\n                transition: \"color 0.2s ease\",\n              }}\n              title={disabled ? undefined : \"Drag to adjust value\"}\n            >\n              {unit}\n            </span>\n          )}\n        </div>\n\n        {/* Slider — directly below input with no gap */}\n        {slider &&\n          min !== undefined &&\n          max !== undefined &&\n          (() => {\n            const sliderH = thumbHeight;\n            const cy = sliderH / 2;\n            const pct = sliderPercent / 100; // 0..1\n\n            // Thumb left-edge position: maps 0% → 0px, 100% → (containerWidth - thumbWidth)\n            // CSS calc: pct * (100% - thumbWidth)\n            const thumbLeftCalc = `calc(${pct} * (100% - ${thumbWidth}px))`;\n\n            // Filled track width = thumb left edge + 1px overlap for seamless join\n            const filledWidthCalc = `calc(${pct} * (100% - ${thumbWidth}px) + 1px)`;\n\n            return (\n              <div\n                ref={sliderContainerRef}\n                style={{\n                  position: \"relative\",\n                  height: `${sliderH}px`,\n                  marginTop: `-${sliderH / 1.42}px`,\n                }}\n              >\n                {/* Unfilled track */}\n                <div\n                  style={{\n                    position: \"absolute\",\n                    top: `${cy}px`,\n                    left: 0,\n                    right: 0,\n                    height: `${trackH}px`,\n                    transform: \"translateY(-50%)\",\n                    borderRadius: `${trackH / 2}px`,\n                    backgroundColor: `${tokens.colors.border.muted}60`,\n                  }}\n                />\n                {/* Filled track — flat right edge for flush join with thumb */}\n                <div\n                  style={{\n                    position: \"absolute\",\n                    top: `${cy}px`,\n                    left: 0,\n                    width: filledWidthCalc,\n                    height: `${trackH}px`,\n                    transform: \"translateY(-50%)\",\n                    borderRadius: `${trackH / 2}px 0 0 ${trackH / 2}px`,\n                    background: activeColor,\n                    transition: \"background 300ms ease\",\n                  }}\n                />\n                {/* Invisible range input */}\n                <input\n                  type=\"range\"\n                  className={`zendir-slider-${sliderId}`}\n                  min={min}\n                  max={max}\n                  step={step}\n                  value={value}\n                  onChange={handleSliderChange}\n                  onMouseDown={() => setIsSliderActive(true)}\n                  onMouseUp={() => setIsSliderActive(false)}\n                  onTouchStart={() => setIsSliderActive(true)}\n                  onTouchEnd={() => setIsSliderActive(false)}\n                  disabled={disabled}\n                  aria-label={\n                    typeof label === \"string\" ? label : \"Value slider\"\n                  }\n                  style={{\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    width: \"100%\",\n                    height: \"100%\",\n                    margin: 0,\n                    padding: 0,\n                    opacity: 0,\n                    cursor: disabled ? \"not-allowed\" : \"pointer\",\n                    zIndex: 2,\n                  }}\n                />\n                {/* Smooth-blob thumb — left edge flush with filled track end */}\n                <div\n                  style={{\n                    position: \"absolute\",\n                    top: `${cy}px`,\n                    left: thumbLeftCalc,\n                    width: `${thumbWidth}px`,\n                    height: `${thumbHeight}px`,\n                    transform: \"translateY(-50%)\",\n                    pointerEvents: \"none\",\n                    zIndex: 1,\n                  }}\n                >\n                  <svg\n                    width={thumbWidth}\n                    height={thumbHeight}\n                    viewBox={`0 0 ${thumbWidth} ${thumbHeight}`}\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    style={{ display: \"block\", overflow: \"visible\" }}\n                  >\n                    {(() => {\n                      const w = thumbWidth;\n                      const h = thumbHeight;\n                      const svgCy = h / 2;\n                      const trackHalf = trackH / 2;\n                      const r = 2;\n\n                      const ltop = svgCy - trackHalf;\n                      const lbot = svgCy + trackHalf;\n                      const rtop = r;\n                      const rbot = h - r;\n\n                      const cp1x = w * 0.28;\n                      const cp2x = w * 0.48;\n\n                      const d = [\n                        `M 0 ${ltop}`,\n                        `C ${cp1x} ${ltop}, ${cp2x} ${rtop}, ${w - r} ${rtop}`,\n                        `A ${r} ${r} 0 0 1 ${w} ${rtop + r}`,\n                        `L ${w} ${rbot - r}`,\n                        `A ${r} ${r} 0 0 1 ${w - r} ${rbot}`,\n                        `C ${cp2x} ${rbot}, ${cp1x} ${lbot}, 0 ${lbot}`,\n                        `Z`,\n                      ].join(\" \");\n\n                      return <path d={d} fill={activeColor} />;\n                    })()}\n                  </svg>\n                </div>\n\n                {/* Astro UXDS status symbol (shape-coded: circle/square/diamond/triangle) */}\n                {statusMode && resolvedStatus && (\n                  <div\n                    style={{\n                      position: \"absolute\",\n                      bottom: `-${size === \"large\" ? 10 : 8}px`,\n                      left: `calc(${pct} * (100% - ${thumbWidth}px) + ${thumbWidth / 2}px)`,\n                      transform: \"translateX(-50%)\",\n                      zIndex: 1,\n                      lineHeight: 0,\n                    }}\n                  >\n                    <StatusIndicator status={resolvedStatus} small />\n                  </div>\n                )}\n              </div>\n            );\n          })()}\n\n        {/* Helper / Error text */}\n        {(helperText || errorMessage) && (\n          <div\n            id={errorMessage ? `${inputId}-error` : `${inputId}-helper`}\n            role={errorMessage ? \"alert\" : undefined}\n            style={{\n              fontSize: tokens.typography.fontSize.xs,\n              color: hasError\n                ? tokens.colors.status.critical\n                : tokens.colors.text.tertiary,\n            }}\n          >\n            {errorMessage || helperText}\n          </div>\n        )}\n      </div>\n    );\n  }),\n);\n\nexport default NumberInput;\n"],"mappings":"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"}

package/dist/react/core/inputs/PinInput.d.ts

@@ -1,11 +1,10 @@
 import { default as React } from 'react';
 import { LabelPlacement } from './Input';
-
 export interface PinInputProps {
     /** Number of character cells (default 6; any positive number, e.g. 4, 6, 8) */
     length?: number;
     /** Input type */
-    type?: 'numeric' | 'alphanumeric';
+    type?: "numeric" | "alphanumeric";
     /** Current value */
     value: string;
     /** Change handler */
@@ -21,7 +20,7 @@ export interface PinInputProps {
     /** Mask characters (password mode) */
     mask?: boolean;
     /** Size */
-    size?: 'small' | 'medium' | 'large';
+    size?: "small" | "medium" | "large";
     /** Auto-focus first cell on mount */
     autoFocus?: boolean;
     /** Callback when all cells filled */