@zendir/ui 0.4.1 → 0.6.0

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

@@ -1,507 +1,535 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, forwardRef, useState, useRef, useId, useMemo, useEffect, useCallback } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { deriveStatus } from "../data/propertyConfig.js";
 import { StatusIndicator } from "../../astro/StatusIndicator.js";
-const DEFAULT_DECIMAL_PLACES = 0;
-const NumberInput = memo(forwardRef(function NumberInput2({
-  value,
-  onChange,
-  min,
-  max,
-  step = 1,
-  precision,
-  unit,
-  label,
-  helperText,
-  error,
-  slider = false,
-  size = "medium",
-  disabled = false,
-  fullWidth = false,
-  width,
-  id,
-  className,
-  style,
-  textAlign = "right",
-  labelPlacement = "outlined",
-  required,
-  statusMode = false,
-  status: statusOverride,
-  statusThresholds,
-  onStatusChange
-}, ref) {
-  const { tokens, theme } = useTheme();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const isOutlined = labelPlacement === "outlined";
-  const decimalPlaces = precision ?? DEFAULT_DECIMAL_PLACES;
-  const [isFocused, setIsFocused] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const [isSliderActive, setIsSliderActive] = useState(false);
-  const [localValue, setLocalValue] = useState(() => value.toFixed(decimalPlaces));
-  const inputRef = useRef(null);
-  const sliderContainerRef = useRef(null);
-  const sliderId = useId().replace(/:/g, "");
-  const resolvedStatus = useMemo(() => {
-    if (!statusMode) return void 0;
-    if (statusOverride) return statusOverride;
-    return deriveStatus(value, statusThresholds);
-  }, [statusMode, statusOverride, statusThresholds, value]);
-  const prevStatusRef = useRef(void 0);
-  useEffect(() => {
-    if (resolvedStatus !== void 0 && resolvedStatus !== prevStatusRef.current) {
-      prevStatusRef.current = resolvedStatus;
-      onStatusChange == null ? void 0 : onStatusChange(resolvedStatus);
-    }
-  }, [resolvedStatus, onStatusChange]);
-  const activeColor = useMemo(() => {
-    if (resolvedStatus && tokens.colors.status[resolvedStatus]) {
-      return tokens.colors.status[resolvedStatus];
-    }
-    return tokens.colors.accent.primary;
-  }, [resolvedStatus, tokens.colors.status, tokens.colors.accent.primary]);
-  useEffect(() => {
-    if (!isFocused) {
-      setLocalValue(value.toFixed(decimalPlaces));
-    }
-  }, [value, decimalPlaces, isFocused]);
-  const clamp = useCallback((v) => {
-    let result = v;
-    if (min !== void 0) result = Math.max(min, result);
-    if (max !== void 0) result = Math.min(max, result);
-    result = Number(result.toFixed(decimalPlaces));
-    return result;
-  }, [min, max, decimalPlaces]);
-  const handleInputChange = useCallback((e) => {
-    const raw = e.target.value;
-    setLocalValue(raw);
-    const parsed = parseFloat(raw);
-    if (!isNaN(parsed)) {
-      onChange(clamp(parsed));
-    }
-  }, [onChange, clamp]);
-  const handleBlur = useCallback(() => {
-    setIsFocused(false);
-    const parsed = parseFloat(localValue);
-    if (isNaN(parsed)) {
-      setLocalValue(value.toFixed(decimalPlaces));
-    } else {
-      const clamped = clamp(parsed);
-      onChange(clamped);
-      setLocalValue(clamped.toFixed(decimalPlaces));
-    }
-  }, [localValue, value, onChange, clamp, decimalPlaces]);
-  const handleSliderChange = useCallback((e) => {
-    const parsed = parseFloat(e.target.value);
-    const clamped = clamp(parsed);
-    onChange(clamped);
-    setLocalValue(clamped.toFixed(decimalPlaces));
-  }, [onChange, clamp, decimalPlaces]);
-  const handleKeyDown = useCallback((e) => {
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      onChange(clamp(value + step));
-    } else if (e.key === "ArrowDown") {
-      e.preventDefault();
-      onChange(clamp(value - step));
-    }
-  }, [value, step, onChange, clamp]);
-  const handleWheel = useCallback((e) => {
-    if (disabled || min === void 0 || max === void 0) return;
-    e.preventDefault();
-    const direction = e.deltaY < 0 ? 1 : -1;
-    onChange(clamp(value + step * direction));
-  }, [value, step, onChange, clamp, disabled, min, max]);
-  useEffect(() => {
-    const sliderContainer = sliderContainerRef.current;
-    const inputElement = inputRef.current;
-    if (min !== void 0 && max !== void 0) {
-      if (slider && sliderContainer) {
-        sliderContainer.addEventListener("wheel", handleWheel, { passive: false });
-      }
-      if (inputElement) {
-        inputElement.addEventListener("wheel", handleWheel, { passive: false });
-      }
-    }
-    return () => {
-      if (sliderContainer) sliderContainer.removeEventListener("wheel", handleWheel);
-      if (inputElement) inputElement.removeEventListener("wheel", handleWheel);
-    };
-  }, [handleWheel, slider, min, max]);
-  useEffect(() => {
-    if (!isSliderActive) return;
-    const handleUp = () => setIsSliderActive(false);
-    window.addEventListener("mouseup", handleUp);
-    window.addEventListener("touchend", handleUp);
-    return () => {
-      window.removeEventListener("mouseup", handleUp);
-      window.removeEventListener("touchend", handleUp);
-    };
-  }, [isSliderActive]);
-  const [isUnitDragging, setIsUnitDragging] = useState(false);
-  const dragStartValueRef = useRef(0);
-  const dragStartYRef = useRef(0);
-  const unitRef = useRef(null);
-  const handleUnitMouseDown = useCallback((e) => {
-    if (disabled) return;
-    e.preventDefault();
-    setIsUnitDragging(true);
-    dragStartValueRef.current = value;
-    dragStartYRef.current = e.clientY;
-    if (document.body.requestPointerLock) {
-      document.body.requestPointerLock();
-    }
-  }, [value, disabled]);
-  const handleUnitMouseMove = useCallback((e) => {
-    if (!isUnitDragging) return;
-    const deltaY = document.pointerLockElement ? -e.movementY : dragStartYRef.current - e.clientY;
-    if (deltaY === 0) return;
-    let speedMultiplier = 1;
-    if (e.shiftKey) speedMultiplier = 0.1;
-    else if (e.ctrlKey || e.metaKey) speedMultiplier = 10;
-    const sensitivity = document.pointerLockElement ? 1 : 0.5;
-    const change = deltaY * sensitivity * (step || 1) * speedMultiplier;
-    if (!document.pointerLockElement) {
-      dragStartYRef.current = e.clientY;
-      dragStartValueRef.current = clamp(value + change);
-      onChange(clamp(value + change));
-    } else {
-      onChange(clamp(value + change));
-    }
-  }, [isUnitDragging, value, step, onChange, clamp]);
-  const handleUnitMouseUp = useCallback(() => {
-    if (isUnitDragging) {
-      setIsUnitDragging(false);
-      if (document.exitPointerLock) {
-        document.exitPointerLock();
-      }
-    }
-  }, [isUnitDragging]);
-  useEffect(() => {
-    if (isUnitDragging) {
-      window.addEventListener("mousemove", handleUnitMouseMove);
-      window.addEventListener("mouseup", handleUnitMouseUp);
-    }
-    return () => {
-      window.removeEventListener("mousemove", handleUnitMouseMove);
-      window.removeEventListener("mouseup", handleUnitMouseUp);
-    };
-  }, [isUnitDragging, handleUnitMouseMove, handleUnitMouseUp]);
-  useEffect(() => {
-    const unitEl = unitRef.current;
-    if (unitEl && !disabled) {
-      unitEl.addEventListener("wheel", handleWheel, { passive: false });
-    }
-    return () => {
-      if (unitEl) unitEl.removeEventListener("wheel", handleWheel);
-    };
-  }, [handleWheel, disabled]);
-  const sizeConfig = {
-    small: { height: tokens.elementSize.sm, fontSize: tokens.typography.fontSize.xs, padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`, sliderHeight: 3, inputPaddingLeft: 8 },
-    medium: { height: tokens.elementSize.md, fontSize: tokens.typography.fontSize.sm, padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`, sliderHeight: 4, inputPaddingLeft: 12 },
-    large: { height: tokens.elementSize.lg, fontSize: tokens.typography.fontSize.base, padding: `${tokens.spacing.sm} ${tokens.spacing.md}`, sliderHeight: 5, inputPaddingLeft: 16 }
-  };
-  const config = sizeConfig[size];
-  const hasError = !!error;
-  const errorMessage = typeof error === "string" ? error : void 0;
-  const computedBorder = hasError ? tokens.borders.input.error : isFocused ? tokens.borders.input.focus : isHovered ? tokens.borders.input.hover : tokens.borders.input.default;
-  const inputBg = isTransparentTheme ? tokens.colors.interactive.transparentInputBg || "rgba(139, 92, 246, 0.08)" : tokens.colors.background.surface;
-  const sliderPercent = min !== void 0 && max !== void 0 ? (value - min) / (max - min) * 100 : 50;
-  const inputId = id || (typeof label === "string" ? `zendir-number-${label.replace(/\s+/g, "-").toLowerCase()}` : void 0);
-  const thumbWidth = 24;
-  const thumbHeight = config.sliderHeight + 8;
-  const trackH = config.sliderHeight;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className,
-      style: {
-        display: "inline-flex",
-        flexDirection: "column",
-        // No gap when slider is present — slider sits flush on the input bottom edge
-        gap: slider ? 0 : tokens.spacing.xs,
-        width: fullWidth ? "100%" : typeof width === "number" ? `${width}px` : width,
-        fontFamily: tokens.typography.fontFamily.primary,
-        ...style
-      },
-      children: [
-        label && !isOutlined && /* @__PURE__ */ jsxs(
-          "label",
-          {
-            htmlFor: inputId,
-            style: {
-              fontSize: tokens.typography.fontSize.xs,
-              fontWeight: tokens.typography.fontWeight.medium,
-              color: tokens.colors.text.secondary,
-              letterSpacing: tokens.typography.letterSpacing.wide
-            },
-            children: [
-              label,
-              required && /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.status.critical, marginLeft: "2px" }, children: "*" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              position: "relative",
-              display: "flex",
-              alignItems: "center",
-              height: config.height,
-              backgroundColor: inputBg,
-              border: computedBorder,
-              borderRadius: tokens.borderRadius.md,
-              transition: tokens.animation.fast,
-              opacity: disabled ? 0.5 : 1,
-              overflow: isOutlined ? "visible" : "hidden"
-            },
-            onMouseEnter: () => !disabled && setIsHovered(true),
-            onMouseLeave: () => setIsHovered(false),
-            children: [
-              label && isOutlined && /* @__PURE__ */ jsxs(
-                "label",
-                {
-                  htmlFor: inputId,
-                  style: {
-                    position: "absolute",
-                    top: 0,
-                    left: `${config.inputPaddingLeft - 6}px`,
-                    transform: "translateY(-50%)",
-                    backgroundColor: isTransparentTheme ? tokens.colors.background.base : tokens.colors.background.surface,
-                    padding: "0 6px",
-                    fontSize: { small: "0.625rem", medium: "0.6875rem", large: "0.75rem" }[size],
-                    fontWeight: tokens.typography.fontWeight.medium,
-                    color: isFocused ? hasError ? tokens.colors.status.critical : tokens.colors.accent.primary : hasError ? tokens.colors.status.critical : tokens.colors.text.secondary,
-                    letterSpacing: tokens.typography.letterSpacing.wide,
-                    zIndex: 1,
-                    pointerEvents: "none",
-                    transition: tokens.animation.fast,
-                    lineHeight: 1.2,
-                    whiteSpace: "nowrap"
-                  },
-                  children: [
-                    label,
-                    required && /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.status.critical, marginLeft: "2px" }, children: "*" })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  ref: ref || inputRef,
-                  id: inputId,
-                  type: "text",
-                  inputMode: "decimal",
-                  value: localValue,
-                  onChange: handleInputChange,
-                  onFocus: () => setIsFocused(true),
-                  onBlur: handleBlur,
-                  onKeyDown: handleKeyDown,
-                  disabled,
-                  "aria-invalid": hasError,
-                  "aria-describedby": errorMessage ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
-                  style: {
-                    flex: 1,
-                    height: "100%",
-                    padding: config.padding,
-                    fontSize: config.fontSize,
-                    fontWeight: tokens.typography.fontWeight.medium,
-                    fontFamily: tokens.typography.fontFamily.mono,
-                    fontVariantNumeric: "tabular-nums",
-                    color: tokens.colors.text.primary,
-                    backgroundColor: "transparent",
-                    border: "none",
-                    outline: "none",
-                    minWidth: 0,
-                    textAlign
-                  }
-                }
-              ),
-              unit && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  ref: unitRef,
-                  onMouseDown: handleUnitMouseDown,
-                  style: {
-                    padding: `0 ${tokens.spacing.sm}`,
-                    fontSize: tokens.typography.fontSize.xs,
-                    fontWeight: tokens.typography.fontWeight.medium,
-                    color: isUnitDragging ? activeColor : tokens.colors.text.tertiary,
-                    fontFamily: tokens.typography.fontFamily.primary,
-                    flexShrink: 0,
-                    borderLeft: tokens.borders.separator,
-                    height: "100%",
-                    display: "flex",
-                    alignItems: "center",
-                    backgroundColor: isTransparentTheme ? "rgba(139, 92, 246, 0.04)" : "rgba(0, 0, 0, 0.15)",
-                    cursor: disabled ? "not-allowed" : "ns-resize",
-                    userSelect: "none",
-                    transition: "color 0.2s ease"
-                  },
-                  title: disabled ? void 0 : "Drag to adjust value",
-                  children: unit
-                }
-              )
-            ]
-          }
-        ),
-        slider && min !== void 0 && max !== void 0 && (() => {
-          const sliderH = thumbHeight;
-          const cy = sliderH / 2;
-          const pct = sliderPercent / 100;
-          const thumbLeftCalc = `calc(${pct} * (100% - ${thumbWidth}px))`;
-          const filledWidthCalc = `calc(${pct} * (100% - ${thumbWidth}px) + 1px)`;
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ref: sliderContainerRef,
-              style: {
-                position: "relative",
-                height: `${sliderH}px`,
-                marginTop: `-${sliderH / 1.42}px`
-              },
-              children: [
-                /* @__PURE__ */ jsx("div", { style: {
-                  position: "absolute",
-                  top: `${cy}px`,
-                  left: 0,
-                  right: 0,
-                  height: `${trackH}px`,
-                  transform: "translateY(-50%)",
-                  borderRadius: `${trackH / 2}px`,
-                  backgroundColor: `${tokens.colors.border.muted}60`
-                } }),
-                /* @__PURE__ */ jsx("div", { style: {
-                  position: "absolute",
-                  top: `${cy}px`,
-                  left: 0,
-                  width: filledWidthCalc,
-                  height: `${trackH}px`,
-                  transform: "translateY(-50%)",
-                  borderRadius: `${trackH / 2}px 0 0 ${trackH / 2}px`,
-                  background: activeColor,
-                  transition: "background 300ms ease"
-                } }),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "range",
-                    className: `zendir-slider-${sliderId}`,
-                    min,
-                    max,
-                    step,
-                    value,
-                    onChange: handleSliderChange,
-                    onMouseDown: () => setIsSliderActive(true),
-                    onMouseUp: () => setIsSliderActive(false),
-                    onTouchStart: () => setIsSliderActive(true),
-                    onTouchEnd: () => setIsSliderActive(false),
-                    disabled,
-                    "aria-label": typeof label === "string" ? label : "Value slider",
-                    style: {
-                      position: "absolute",
-                      top: 0,
-                      left: 0,
-                      width: "100%",
-                      height: "100%",
-                      margin: 0,
-                      padding: 0,
-                      opacity: 0,
-                      cursor: disabled ? "not-allowed" : "pointer",
-                      zIndex: 2
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      position: "absolute",
-                      top: `${cy}px`,
-                      left: thumbLeftCalc,
-                      width: `${thumbWidth}px`,
-                      height: `${thumbHeight}px`,
-                      transform: "translateY(-50%)",
-                      pointerEvents: "none",
-                      zIndex: 1
-                    },
-                    children: /* @__PURE__ */ jsx(
-                      "svg",
-                      {
-                        width: thumbWidth,
-                        height: thumbHeight,
-                        viewBox: `0 0 ${thumbWidth} ${thumbHeight}`,
-                        xmlns: "http://www.w3.org/2000/svg",
-                        style: { display: "block", overflow: "visible" },
-                        children: (() => {
-                          const w = thumbWidth;
-                          const h = thumbHeight;
-                          const svgCy = h / 2;
-                          const trackHalf = trackH / 2;
-                          const r = 2;
-                          const ltop = svgCy - trackHalf;
-                          const lbot = svgCy + trackHalf;
-                          const rtop = r;
-                          const rbot = h - r;
-                          const cp1x = w * 0.28;
-                          const cp2x = w * 0.48;
-                          const d = [
-                            `M 0 ${ltop}`,
-                            `C ${cp1x} ${ltop}, ${cp2x} ${rtop}, ${w - r} ${rtop}`,
-                            `A ${r} ${r} 0 0 1 ${w} ${rtop + r}`,
-                            `L ${w} ${rbot - r}`,
-                            `A ${r} ${r} 0 0 1 ${w - r} ${rbot}`,
-                            `C ${cp2x} ${rbot}, ${cp1x} ${lbot}, 0 ${lbot}`,
-                            `Z`
-                          ].join(" ");
-                          return /* @__PURE__ */ jsx("path", { d, fill: activeColor });
-                        })()
-                      }
-                    )
-                  }
-                ),
-                statusMode && resolvedStatus && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      position: "absolute",
-                      bottom: `-${size === "large" ? 10 : 8}px`,
-                      left: `calc(${pct} * (100% - ${thumbWidth}px) + ${thumbWidth / 2}px)`,
-                      transform: "translateX(-50%)",
-                      zIndex: 1,
-                      lineHeight: 0
-                    },
-                    children: /* @__PURE__ */ jsx(
-                      StatusIndicator,
-                      {
-                        status: resolvedStatus,
-                        small: true
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          );
-        })(),
-        (helperText || errorMessage) && /* @__PURE__ */ jsx(
-          "div",
-          {
-            id: errorMessage ? `${inputId}-error` : `${inputId}-helper`,
-            role: errorMessage ? "alert" : void 0,
-            style: {
-              fontSize: tokens.typography.fontSize.xs,
-              color: hasError ? tokens.colors.status.critical : tokens.colors.text.tertiary
-            },
-            children: errorMessage || helperText
-          }
-        )
-      ]
-    }
-  );
+import { forwardRef, memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/inputs/NumberInput.tsx
+/**
+* @zendir/ui - NumberInput Component
+*
+* Numeric input with optional slider, min/max bounds, step, precision,
+* and unit display. Essential for operator dashboards (frequency, power,
+* aperture, field of view, etc.).
+*
+* Astro UX Compliance:
+* - Consistent sizing with Input component (small/medium/large)
+* - Focus ring for accessibility (WCAG 2.1 AA)
+* - Status-based border colors
+* - Tabular numbers for value alignment
+*
+* @example
+* ```tsx
+* // Each instance can set precision (decimal places); default is 2
+* <NumberInput value={500} onChange={setFreq} min={300} max={900} unit="MHz" label="Frequency" />
+* <NumberInput value={45.2} onChange={setPower} min={0.1} max={100} step={0.1} precision={1} unit="W" slider />
+* <NumberInput value={1024} onChange={setRes} min={128} max={2048} step={128} precision={0} unit="px" label="Resolution" slider />
+* // Status mode with automatic threshold-based coloring:
+* <NumberInput value={temp} onChange={setTemp} min={0} max={100} unit="°C" slider
+*   statusMode statusThresholds={{ critical: 90, serious: 75, caution: 50, normal: 20, standby: 0 }} />
+* ```
+*/
+/** Default decimal places when precision is not specified: 0 = integer display. Set precision (e.g. 2) to show decimals. */
+var DEFAULT_DECIMAL_PLACES = 0;
+var NumberInput = memo(forwardRef(function NumberInput({ value, onChange, min, max, step = 1, precision, unit, label, helperText, error, slider = false, size = "medium", disabled = false, fullWidth = false, width, id, className, style, textAlign = "right", labelPlacement = "outlined", required, statusMode = false, status: statusOverride, statusThresholds, onStatusChange }, ref) {
+	const { tokens, theme } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const isOutlined = labelPlacement === "outlined";
+	const decimalPlaces = precision ?? DEFAULT_DECIMAL_PLACES;
+	const [isFocused, setIsFocused] = useState(false);
+	const [isHovered, setIsHovered] = useState(false);
+	const [isSliderActive, setIsSliderActive] = useState(false);
+	const [localValue, setLocalValue] = useState(() => value.toFixed(decimalPlaces));
+	const inputRef = useRef(null);
+	const sliderContainerRef = useRef(null);
+	const sliderId = useId().replace(/:/g, "");
+	const resolvedStatus = useMemo(() => {
+		if (!statusMode) return void 0;
+		if (statusOverride) return statusOverride;
+		return deriveStatus(value, statusThresholds);
+	}, [
+		statusMode,
+		statusOverride,
+		statusThresholds,
+		value
+	]);
+	const prevStatusRef = useRef(void 0);
+	useEffect(() => {
+		if (resolvedStatus !== void 0 && resolvedStatus !== prevStatusRef.current) {
+			prevStatusRef.current = resolvedStatus;
+			onStatusChange?.(resolvedStatus);
+		}
+	}, [resolvedStatus, onStatusChange]);
+	/** Resolve the active color: status color or accent */
+	const activeColor = useMemo(() => {
+		if (resolvedStatus && tokens.colors.status[resolvedStatus]) return tokens.colors.status[resolvedStatus];
+		return tokens.colors.accent.primary;
+	}, [
+		resolvedStatus,
+		tokens.colors.status,
+		tokens.colors.accent.primary
+	]);
+	useEffect(() => {
+		if (!isFocused) setLocalValue(value.toFixed(decimalPlaces));
+	}, [
+		value,
+		decimalPlaces,
+		isFocused
+	]);
+	const clamp = useCallback((v) => {
+		let result = v;
+		if (min !== void 0) result = Math.max(min, result);
+		if (max !== void 0) result = Math.min(max, result);
+		result = Number(result.toFixed(decimalPlaces));
+		return result;
+	}, [
+		min,
+		max,
+		decimalPlaces
+	]);
+	const handleInputChange = useCallback((e) => {
+		const raw = e.target.value;
+		setLocalValue(raw);
+		const parsed = parseFloat(raw);
+		if (!isNaN(parsed)) onChange(clamp(parsed));
+	}, [onChange, clamp]);
+	const handleBlur = useCallback(() => {
+		setIsFocused(false);
+		const parsed = parseFloat(localValue);
+		if (isNaN(parsed)) setLocalValue(value.toFixed(decimalPlaces));
+		else {
+			const clamped = clamp(parsed);
+			onChange(clamped);
+			setLocalValue(clamped.toFixed(decimalPlaces));
+		}
+	}, [
+		localValue,
+		value,
+		onChange,
+		clamp,
+		decimalPlaces
+	]);
+	const handleSliderChange = useCallback((e) => {
+		const parsed = parseFloat(e.target.value);
+		const clamped = clamp(parsed);
+		onChange(clamped);
+		setLocalValue(clamped.toFixed(decimalPlaces));
+	}, [
+		onChange,
+		clamp,
+		decimalPlaces
+	]);
+	const handleKeyDown = useCallback((e) => {
+		if (e.key === "ArrowUp") {
+			e.preventDefault();
+			onChange(clamp(value + step));
+		} else if (e.key === "ArrowDown") {
+			e.preventDefault();
+			onChange(clamp(value - step));
+		}
+	}, [
+		value,
+		step,
+		onChange,
+		clamp
+	]);
+	const handleWheel = useCallback((e) => {
+		if (disabled || min === void 0 || max === void 0) return;
+		e.preventDefault();
+		const direction = e.deltaY < 0 ? 1 : -1;
+		onChange(clamp(value + step * direction));
+	}, [
+		value,
+		step,
+		onChange,
+		clamp,
+		disabled,
+		min,
+		max
+	]);
+	useEffect(() => {
+		const sliderContainer = sliderContainerRef.current;
+		const inputElement = inputRef.current;
+		if (min !== void 0 && max !== void 0) {
+			if (slider && sliderContainer) sliderContainer.addEventListener("wheel", handleWheel, { passive: false });
+			if (inputElement) inputElement.addEventListener("wheel", handleWheel, { passive: false });
+		}
+		return () => {
+			if (sliderContainer) sliderContainer.removeEventListener("wheel", handleWheel);
+			if (inputElement) inputElement.removeEventListener("wheel", handleWheel);
+		};
+	}, [
+		handleWheel,
+		slider,
+		min,
+		max
+	]);
+	useEffect(() => {
+		if (!isSliderActive) return;
+		const handleUp = () => setIsSliderActive(false);
+		window.addEventListener("mouseup", handleUp);
+		window.addEventListener("touchend", handleUp);
+		return () => {
+			window.removeEventListener("mouseup", handleUp);
+			window.removeEventListener("touchend", handleUp);
+		};
+	}, [isSliderActive]);
+	const [isUnitDragging, setIsUnitDragging] = useState(false);
+	const dragStartValueRef = useRef(0);
+	const dragStartYRef = useRef(0);
+	const unitRef = useRef(null);
+	const handleUnitMouseDown = useCallback((e) => {
+		if (disabled) return;
+		e.preventDefault();
+		setIsUnitDragging(true);
+		dragStartValueRef.current = value;
+		dragStartYRef.current = e.clientY;
+		if (document.body.requestPointerLock) document.body.requestPointerLock();
+	}, [value, disabled]);
+	const handleUnitMouseMove = useCallback((e) => {
+		if (!isUnitDragging) return;
+		const deltaY = document.pointerLockElement ? -e.movementY : dragStartYRef.current - e.clientY;
+		if (deltaY === 0) return;
+		let speedMultiplier = 1;
+		if (e.shiftKey) speedMultiplier = .1;
+		else if (e.ctrlKey || e.metaKey) speedMultiplier = 10;
+		const change = deltaY * (document.pointerLockElement ? 1 : .5) * (step || 1) * speedMultiplier;
+		if (!document.pointerLockElement) {
+			dragStartYRef.current = e.clientY;
+			dragStartValueRef.current = clamp(value + change);
+			onChange(clamp(value + change));
+		} else onChange(clamp(value + change));
+	}, [
+		isUnitDragging,
+		value,
+		step,
+		onChange,
+		clamp
+	]);
+	const handleUnitMouseUp = useCallback(() => {
+		if (isUnitDragging) {
+			setIsUnitDragging(false);
+			if (document.exitPointerLock) document.exitPointerLock();
+		}
+	}, [isUnitDragging]);
+	useEffect(() => {
+		if (isUnitDragging) {
+			window.addEventListener("mousemove", handleUnitMouseMove);
+			window.addEventListener("mouseup", handleUnitMouseUp);
+		}
+		return () => {
+			window.removeEventListener("mousemove", handleUnitMouseMove);
+			window.removeEventListener("mouseup", handleUnitMouseUp);
+		};
+	}, [
+		isUnitDragging,
+		handleUnitMouseMove,
+		handleUnitMouseUp
+	]);
+	useEffect(() => {
+		const unitEl = unitRef.current;
+		if (unitEl && !disabled) unitEl.addEventListener("wheel", handleWheel, { passive: false });
+		return () => {
+			if (unitEl) unitEl.removeEventListener("wheel", handleWheel);
+		};
+	}, [handleWheel, disabled]);
+	const config = {
+		small: {
+			height: tokens.elementSize.sm,
+			fontSize: tokens.typography.fontSize.xs,
+			padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+			sliderHeight: 3,
+			inputPaddingLeft: 8
+		},
+		medium: {
+			height: tokens.elementSize.md,
+			fontSize: tokens.typography.fontSize.sm,
+			padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
+			sliderHeight: 4,
+			inputPaddingLeft: 12
+		},
+		large: {
+			height: tokens.elementSize.lg,
+			fontSize: tokens.typography.fontSize.base,
+			padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
+			sliderHeight: 5,
+			inputPaddingLeft: 16
+		}
+	}[size];
+	const hasError = !!error;
+	const errorMessage = typeof error === "string" ? error : void 0;
+	const computedBorder = hasError ? tokens.borders.input.error : isFocused ? tokens.borders.input.focus : isHovered ? tokens.borders.input.hover : tokens.borders.input.default;
+	const inputBg = isTransparentTheme ? tokens.colors.interactive.transparentInputBg || "rgba(139, 92, 246, 0.08)" : tokens.colors.background.surface;
+	const sliderPercent = min !== void 0 && max !== void 0 ? (value - min) / (max - min) * 100 : 50;
+	const inputId = id || (typeof label === "string" ? `zendir-number-${label.replace(/\s+/g, "-").toLowerCase()}` : void 0);
+	const thumbWidth = 24;
+	const thumbHeight = config.sliderHeight + 8;
+	const trackH = config.sliderHeight;
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		style: {
+			display: "inline-flex",
+			flexDirection: "column",
+			gap: slider ? 0 : tokens.spacing.xs,
+			width: fullWidth ? "100%" : typeof width === "number" ? `${width}px` : width,
+			fontFamily: tokens.typography.fontFamily.primary,
+			...style
+		},
+		children: [
+			label && !isOutlined && /* @__PURE__ */ jsxs("label", {
+				htmlFor: inputId,
+				style: {
+					fontSize: tokens.typography.fontSize.xs,
+					fontWeight: tokens.typography.fontWeight.medium,
+					color: tokens.colors.text.secondary,
+					letterSpacing: tokens.typography.letterSpacing.wide
+				},
+				children: [label, required && /* @__PURE__ */ jsx("span", {
+					style: {
+						color: tokens.colors.status.critical,
+						marginLeft: "2px"
+					},
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					position: "relative",
+					display: "flex",
+					alignItems: "center",
+					height: config.height,
+					backgroundColor: inputBg,
+					border: computedBorder,
+					borderRadius: tokens.borderRadius.md,
+					transition: tokens.animation.fast,
+					opacity: disabled ? .5 : 1,
+					overflow: isOutlined ? "visible" : "hidden"
+				},
+				onMouseEnter: () => !disabled && setIsHovered(true),
+				onMouseLeave: () => setIsHovered(false),
+				children: [
+					label && isOutlined && /* @__PURE__ */ jsxs("label", {
+						htmlFor: inputId,
+						style: {
+							position: "absolute",
+							top: 0,
+							left: `${config.inputPaddingLeft - 6}px`,
+							transform: "translateY(-50%)",
+							backgroundColor: isTransparentTheme ? tokens.colors.background.base : tokens.colors.background.surface,
+							padding: "0 6px",
+							fontSize: {
+								small: "0.625rem",
+								medium: "0.6875rem",
+								large: "0.75rem"
+							}[size],
+							fontWeight: tokens.typography.fontWeight.medium,
+							color: isFocused ? hasError ? tokens.colors.status.critical : tokens.colors.accent.primary : hasError ? tokens.colors.status.critical : tokens.colors.text.secondary,
+							letterSpacing: tokens.typography.letterSpacing.wide,
+							zIndex: 1,
+							pointerEvents: "none",
+							transition: tokens.animation.fast,
+							lineHeight: 1.2,
+							whiteSpace: "nowrap"
+						},
+						children: [label, required && /* @__PURE__ */ jsx("span", {
+							style: {
+								color: tokens.colors.status.critical,
+								marginLeft: "2px"
+							},
+							children: "*"
+						})]
+					}),
+					/* @__PURE__ */ jsx("input", {
+						ref: ref || inputRef,
+						id: inputId,
+						type: "text",
+						inputMode: "decimal",
+						value: localValue,
+						onChange: handleInputChange,
+						onFocus: () => setIsFocused(true),
+						onBlur: handleBlur,
+						onKeyDown: handleKeyDown,
+						disabled,
+						"aria-invalid": hasError,
+						"aria-describedby": errorMessage ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
+						style: {
+							flex: 1,
+							height: "100%",
+							padding: config.padding,
+							fontSize: config.fontSize,
+							fontWeight: tokens.typography.fontWeight.medium,
+							fontFamily: tokens.typography.fontFamily.mono,
+							fontVariantNumeric: "tabular-nums",
+							color: tokens.colors.text.primary,
+							backgroundColor: "transparent",
+							border: "none",
+							outline: "none",
+							minWidth: 0,
+							textAlign
+						}
+					}),
+					unit && /* @__PURE__ */ jsx("span", {
+						ref: unitRef,
+						onMouseDown: handleUnitMouseDown,
+						style: {
+							padding: `0 ${tokens.spacing.sm}`,
+							fontSize: tokens.typography.fontSize.xs,
+							fontWeight: tokens.typography.fontWeight.medium,
+							color: isUnitDragging ? activeColor : tokens.colors.text.tertiary,
+							fontFamily: tokens.typography.fontFamily.primary,
+							flexShrink: 0,
+							borderLeft: tokens.borders.separator,
+							height: "100%",
+							display: "flex",
+							alignItems: "center",
+							backgroundColor: isTransparentTheme ? `${tokens.colors.accent.primary}0a` : "rgba(0, 0, 0, 0.15)",
+							cursor: disabled ? "not-allowed" : "ns-resize",
+							userSelect: "none",
+							transition: "color 0.2s ease"
+						},
+						title: disabled ? void 0 : "Drag to adjust value",
+						children: unit
+					})
+				]
+			}),
+			slider && min !== void 0 && max !== void 0 && (() => {
+				const sliderH = thumbHeight;
+				const cy = sliderH / 2;
+				const pct = sliderPercent / 100;
+				const thumbLeftCalc = `calc(${pct} * (100% - ${thumbWidth}px))`;
+				const filledWidthCalc = `calc(${pct} * (100% - ${thumbWidth}px) + 1px)`;
+				return /* @__PURE__ */ jsxs("div", {
+					ref: sliderContainerRef,
+					style: {
+						position: "relative",
+						height: `${sliderH}px`,
+						marginTop: `-${sliderH / 1.42}px`
+					},
+					children: [
+						/* @__PURE__ */ jsx("div", { style: {
+							position: "absolute",
+							top: `${cy}px`,
+							left: 0,
+							right: 0,
+							height: `${trackH}px`,
+							transform: "translateY(-50%)",
+							borderRadius: `${trackH / 2}px`,
+							backgroundColor: `${tokens.colors.border.muted}60`
+						} }),
+						/* @__PURE__ */ jsx("div", { style: {
+							position: "absolute",
+							top: `${cy}px`,
+							left: 0,
+							width: filledWidthCalc,
+							height: `${trackH}px`,
+							transform: "translateY(-50%)",
+							borderRadius: `${trackH / 2}px 0 0 ${trackH / 2}px`,
+							background: activeColor,
+							transition: "background 300ms ease"
+						} }),
+						/* @__PURE__ */ jsx("input", {
+							type: "range",
+							className: `zendir-slider-${sliderId}`,
+							min,
+							max,
+							step,
+							value,
+							onChange: handleSliderChange,
+							onMouseDown: () => setIsSliderActive(true),
+							onMouseUp: () => setIsSliderActive(false),
+							onTouchStart: () => setIsSliderActive(true),
+							onTouchEnd: () => setIsSliderActive(false),
+							disabled,
+							"aria-label": typeof label === "string" ? label : "Value slider",
+							style: {
+								position: "absolute",
+								top: 0,
+								left: 0,
+								width: "100%",
+								height: "100%",
+								margin: 0,
+								padding: 0,
+								opacity: 0,
+								cursor: disabled ? "not-allowed" : "pointer",
+								zIndex: 2
+							}
+						}),
+						/* @__PURE__ */ jsx("div", {
+							style: {
+								position: "absolute",
+								top: `${cy}px`,
+								left: thumbLeftCalc,
+								width: `${thumbWidth}px`,
+								height: `${thumbHeight}px`,
+								transform: "translateY(-50%)",
+								pointerEvents: "none",
+								zIndex: 1
+							},
+							children: /* @__PURE__ */ jsx("svg", {
+								width: thumbWidth,
+								height: thumbHeight,
+								viewBox: `0 0 ${thumbWidth} ${thumbHeight}`,
+								xmlns: "http://www.w3.org/2000/svg",
+								style: {
+									display: "block",
+									overflow: "visible"
+								},
+								children: (() => {
+									const w = thumbWidth;
+									const h = thumbHeight;
+									const svgCy = h / 2;
+									const trackHalf = trackH / 2;
+									const r = 2;
+									const ltop = svgCy - trackHalf;
+									const lbot = svgCy + trackHalf;
+									const rtop = r;
+									const rbot = h - r;
+									const cp1x = w * .28;
+									const cp2x = w * .48;
+									return /* @__PURE__ */ jsx("path", {
+										d: [
+											`M 0 ${ltop}`,
+											`C ${cp1x} ${ltop}, ${cp2x} ${rtop}, ${w - r} ${rtop}`,
+											`A ${r} ${r} 0 0 1 ${w} 4`,
+											`L ${w} ${rbot - r}`,
+											`A ${r} ${r} 0 0 1 ${w - r} ${rbot}`,
+											`C ${cp2x} ${rbot}, ${cp1x} ${lbot}, 0 ${lbot}`,
+											`Z`
+										].join(" "),
+										fill: activeColor
+									});
+								})()
+							})
+						}),
+						statusMode && resolvedStatus && /* @__PURE__ */ jsx("div", {
+							style: {
+								position: "absolute",
+								bottom: `-${size === "large" ? 10 : 8}px`,
+								left: `calc(${pct} * (100% - ${thumbWidth}px) + ${thumbWidth / 2}px)`,
+								transform: "translateX(-50%)",
+								zIndex: 1,
+								lineHeight: 0
+							},
+							children: /* @__PURE__ */ jsx(StatusIndicator, {
+								status: resolvedStatus,
+								small: true
+							})
+						})
+					]
+				});
+			})(),
+			(helperText || errorMessage) && /* @__PURE__ */ jsx("div", {
+				id: errorMessage ? `${inputId}-error` : `${inputId}-helper`,
+				role: errorMessage ? "alert" : void 0,
+				style: {
+					fontSize: tokens.typography.fontSize.xs,
+					color: hasError ? tokens.colors.status.critical : tokens.colors.text.tertiary
+				},
+				children: errorMessage || helperText
+			})
+		]
+	});
 }));
-export {
-  NumberInput
-};
-//# sourceMappingURL=NumberInput.js.map
+//#endregion
+export { NumberInput, NumberInput as default };
+
+//# sourceMappingURL=NumberInput.js.map