@zendir/ui 0.1.0

package/dist/react/core/NumberInput.js

@@ -0,0 +1,507 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, forwardRef, useState, useRef, useId, useMemo, useEffect, useCallback } from "react";
+import { deriveStatus } from "./propertyConfig.js";
+import { StatusIndicator } from "../astro/StatusIndicator.js";
+import { useTheme } from "../theme/ThemeProvider.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
+          }
+        )
+      ]
+    }
+  );
+}));
+export {
+  NumberInput
+};
+//# sourceMappingURL=NumberInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.js","sources":["../../../src/react/core/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 './propertyConfig';\nimport { deriveStatus } from './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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"}

package/dist/react/core/PacketViewer.d.ts

@@ -0,0 +1,73 @@
+import { default as React } from 'react';
+
+export type PacketItemLimitsState = 'BLUE' | 'GREEN' | 'YELLOW' | 'YELLOW_LOW' | 'YELLOW_HIGH' | 'RED' | 'RED_LOW' | 'RED_HIGH' | 'STALE' | null;
+export type PacketViewMode = 'raw' | 'converted' | 'formatted' | 'with_units';
+export interface PacketItemLimits {
+    state: PacketItemLimitsState;
+    redLow?: number;
+    yellowLow?: number;
+    greenLow?: number;
+    greenHigh?: number;
+    yellowHigh?: number;
+    redHigh?: number;
+}
+export interface PacketItem {
+    /** Item name (e.g., TEMP1, VOLTAGE) */
+    name: string;
+    /** Raw value */
+    value: number | string | boolean;
+    /** Converted value (after read conversion) */
+    convertedValue?: number | string;
+    /** Formatted value (with format string applied) */
+    formattedValue?: string;
+    /** Units string */
+    units?: string;
+    /** Limits definition and current state */
+    limits?: PacketItemLimits;
+    /** Item description */
+    description?: string;
+    /** Data type (e.g., UINT, INT, FLOAT, STRING, BLOCK, DERIVED) */
+    dataType?: string;
+    /** Bit size */
+    bitSize?: number;
+    /** Bit offset */
+    bitOffset?: number;
+    /** Whether this is a derived item */
+    derived?: boolean;
+    /** Conversion applied */
+    conversion?: string;
+    /** States map (for state items) */
+    states?: Record<string, number | string>;
+    /** Whether value is stale */
+    stale?: boolean;
+}
+export interface PacketViewerProps {
+    /** Target name */
+    target?: string;
+    /** Packet name */
+    packet?: string;
+    /** Array of packet items */
+    items: PacketItem[];
+    /** View mode (default: 'converted') */
+    viewMode?: PacketViewMode;
+    /** Height (default: 500) */
+    height?: number | string;
+    /** Show derived items last (default: true) */
+    derivedLast?: boolean;
+    /** Show search bar (default: true) */
+    showSearch?: boolean;
+    /** Show view mode selector (default: true) */
+    showViewMode?: boolean;
+    /** Compact mode */
+    compact?: boolean;
+    /** Called when an item is clicked */
+    onItemClick?: (item: PacketItem) => void;
+    /** CSS class */
+    className?: string;
+    /** Show outer container border (default: true). Set false when embedded inside a Container/card. */
+    bordered?: boolean;
+    /** Custom style overrides for the outer container */
+    style?: React.CSSProperties;
+}
+export declare const PacketViewer: React.NamedExoticComponent<PacketViewerProps>;
+export default PacketViewer;