@procaaso/alphinity-ui-components 1.0.0

package/dist/index.cjs

@@ -0,0 +1,1084 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  ControlPanel: () => ControlPanel,
+  Selector: () => Selector,
+  StatusIndicator: () => StatusIndicator,
+  ThemeProvider: () => ThemeProvider,
+  ThemeToggle: () => ThemeToggle,
+  ValueEntry: () => ValueEntry,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = ({
+  variant = "primary",
+  children,
+  className = "",
+  ...props
+}) => {
+  const baseStyles = "h-20 min-w-[160px] px-12 py-5 rounded-3xl font-bold text-2xl transition-all duration-300 transform hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-offset-3 focus:ring-offset-slate-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none shadow-2xl backdrop-blur-sm";
+  const variantStyles = variant === "primary" ? "bg-gradient-to-br from-blue-400 via-blue-600 to-purple-700 hover:from-blue-500 hover:via-blue-700 hover:to-purple-800 text-white shadow-blue-600/40 focus:ring-blue-400/70 border border-blue-300/40 hover:shadow-2xl hover:shadow-blue-600/60 hover:border-blue-200/50" : "bg-gradient-to-br from-slate-500 via-slate-700 to-slate-900 hover:from-slate-400 hover:via-slate-600 hover:to-slate-800 text-slate-100 shadow-slate-600/40 focus:ring-slate-400/70 border border-slate-400/40 hover:shadow-2xl hover:shadow-slate-600/60 hover:border-slate-300/50";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: `${baseStyles} ${variantStyles} ${className}`.trim(), ...props, children });
+};
+
+// src/TestValueEntry.tsx
+var import_react = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ValueEntry = ({
+  value,
+  onChange,
+  unit,
+  status = "normal",
+  min,
+  max,
+  precision = 2,
+  inputType = "numeric",
+  label,
+  readOnly = false,
+  className = "",
+  disabled,
+  ...props
+}) => {
+  const [displayValue, setDisplayValue] = (0, import_react.useState)(String(value));
+  const [isEditing, setIsEditing] = (0, import_react.useState)(false);
+  const handleFocus = (0, import_react.useCallback)(() => {
+    setIsEditing(true);
+    setDisplayValue(String(value));
+  }, [value]);
+  const handleBlur = (0, import_react.useCallback)(() => {
+    setIsEditing(false);
+    let newValue = displayValue;
+    if (inputType === "numeric") {
+      const numValue = parseFloat(displayValue);
+      if (!isNaN(numValue)) {
+        let constrainedValue = numValue;
+        if (min !== void 0) constrainedValue = Math.max(min, constrainedValue);
+        if (max !== void 0) constrainedValue = Math.min(max, constrainedValue);
+        constrainedValue = parseFloat(constrainedValue.toFixed(precision));
+        newValue = constrainedValue;
+        setDisplayValue(String(constrainedValue));
+      } else {
+        setDisplayValue(String(value));
+        return;
+      }
+    }
+    if (newValue !== value) {
+      onChange(newValue);
+    }
+  }, [displayValue, inputType, min, max, precision, value, onChange]);
+  const handleChange = (0, import_react.useCallback)((e) => {
+    setDisplayValue(e.target.value);
+  }, []);
+  const handleKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (e.key === "Enter") {
+        e.currentTarget.blur();
+      }
+      if (e.key === "Escape") {
+        setDisplayValue(String(value));
+        e.currentTarget.blur();
+      }
+    },
+    [value]
+  );
+  const displayText = isEditing ? displayValue : inputType === "numeric" ? Number(value).toFixed(precision) : String(value);
+  const getStatusStyles = () => {
+    switch (status) {
+      case "alarm":
+        return {
+          borderColor: "#ef4444",
+          backgroundColor: "rgba(239, 68, 68, 0.15)",
+          color: "#fecaca",
+          boxShadow: "0 0 20px rgba(239, 68, 68, 0.3)"
+        };
+      case "warning":
+        return {
+          borderColor: "#f59e0b",
+          backgroundColor: "rgba(245, 158, 11, 0.15)",
+          color: "#fed7aa",
+          boxShadow: "0 0 20px rgba(245, 158, 11, 0.3)"
+        };
+      case "disabled":
+        return {
+          borderColor: "#6b7280",
+          backgroundColor: "rgba(107, 114, 128, 0.1)",
+          color: "#9ca3af",
+          cursor: "not-allowed"
+        };
+      default:
+        return {
+          borderColor: "#64748b",
+          backgroundColor: "rgba(30, 41, 59, 0.9)",
+          color: "#f1f5f9",
+          boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)"
+        };
+    }
+  };
+  const statusStyles = getStatusStyles();
+  const inputStyle = {
+    width: "12rem",
+    height: "4rem",
+    padding: unit ? "1rem 4rem 1rem 1.5rem" : "1rem 1.5rem",
+    border: "2px solid",
+    borderRadius: "1.5rem",
+    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    fontSize: "1.25rem",
+    fontWeight: "bold",
+    textAlign: "center",
+    outline: "none",
+    transition: "all 300ms ease",
+    backdropFilter: "blur(8px)",
+    ...statusStyles
+  };
+  const inputStyleFocus = {
+    ...inputStyle,
+    borderColor: "#60a5fa",
+    boxShadow: "0 0 0 4px rgba(96, 165, 250, 0.3), " + (statusStyles.boxShadow || "0 8px 32px rgba(0, 0, 0, 0.3)"),
+    transform: "scale(1.02)"
+  };
+  const unitStyle = {
+    position: "absolute",
+    right: "0.75rem",
+    top: "50%",
+    transform: "translateY(-50%)",
+    padding: "0.5rem 0.75rem",
+    fontSize: "1rem",
+    fontWeight: "bold",
+    color: "#ffffff",
+    backgroundColor: "#3b82f6",
+    borderRadius: "0.5rem",
+    border: "2px solid #60a5fa",
+    backdropFilter: "blur(4px)",
+    pointerEvents: "none",
+    zIndex: 10,
+    boxShadow: "0 2px 8px rgba(59, 130, 246, 0.4)"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      style: {
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "0.75rem"
+      },
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "label",
+          {
+            style: {
+              fontSize: "0.875rem",
+              fontWeight: "600",
+              color: "#cbd5e1",
+              textTransform: "uppercase",
+              letterSpacing: "0.05em"
+            },
+            children: label
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { position: "relative", display: "inline-flex", alignItems: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              type: "text",
+              value: displayText,
+              onChange: handleChange,
+              onFocus: (e) => {
+                Object.assign(e.target.style, inputStyleFocus);
+                handleFocus();
+              },
+              onBlur: (e) => {
+                Object.assign(e.target.style, inputStyle);
+                handleBlur();
+              },
+              onKeyDown: handleKeyDown,
+              disabled,
+              readOnly,
+              style: inputStyle,
+              ...props
+            }
+          ),
+          unit && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: unitStyle, children: unit }),
+          status === "alarm" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: "-8px",
+                right: "-8px",
+                width: "1rem",
+                height: "1rem",
+                backgroundColor: "#ef4444",
+                borderRadius: "50%",
+                boxShadow: "0 0 10px rgba(239, 68, 68, 0.8)",
+                animation: "pulse 2s infinite"
+              }
+            }
+          ),
+          status === "warning" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: "-8px",
+                right: "-8px",
+                width: "1rem",
+                height: "1rem",
+                backgroundColor: "#f59e0b",
+                borderRadius: "50%",
+                boxShadow: "0 0 10px rgba(245, 158, 11, 0.8)"
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// src/StatusIndicator.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var StatusIndicator = ({
+  status,
+  size = "medium",
+  animation = "none",
+  label,
+  labelPosition = "right",
+  shape = "circle",
+  led = true,
+  className = "",
+  ...props
+}) => {
+  const sizeStyles = {
+    small: "w-5 h-5",
+    medium: "w-7 h-7",
+    large: "w-10 h-10"
+  };
+  const shapeStyles = {
+    circle: "rounded-full",
+    square: "rounded-lg",
+    diamond: "rotate-45 rounded-lg"
+  };
+  const statusStyles = {
+    off: "bg-gradient-to-br from-slate-500 to-slate-600 border-slate-400 shadow-slate-500/30",
+    normal: "bg-gradient-to-br from-emerald-400 via-green-500 to-green-600 border-emerald-300 shadow-green-500/70",
+    alarm: "bg-gradient-to-br from-red-400 via-red-500 to-red-600 border-red-300 shadow-red-500/70",
+    warning: "bg-gradient-to-br from-amber-400 via-yellow-500 to-orange-500 border-amber-300 shadow-yellow-500/70",
+    active: "bg-gradient-to-br from-blue-400 via-blue-500 to-indigo-600 border-blue-300 shadow-blue-500/70",
+    fault: "bg-gradient-to-br from-purple-400 via-purple-500 to-violet-600 border-purple-300 shadow-purple-500/70"
+  };
+  const animationStyles = {
+    none: "",
+    pulse: "animate-pulse",
+    blink: "animate-bounce",
+    flash: "animate-ping"
+  };
+  const ledEffect = led ? "shadow-lg border-2" : "border";
+  const glowEffect = status !== "off" && led ? "shadow-lg" : "";
+  const indicatorClasses = `
+    ${sizeStyles[size]}
+    ${shapeStyles[shape]}
+    ${statusStyles[status]}
+    ${animationStyles[animation]}
+    ${ledEffect}
+    ${glowEffect}
+    inline-block
+    transition-all
+    duration-300
+  `.trim().replace(/\s+/g, " ");
+  const labelClasses = "text-sm font-medium text-gray-700 uppercase tracking-wide select-none";
+  const getContainerLayout = () => {
+    switch (labelPosition) {
+      case "left":
+        return "inline-flex items-center gap-2 flex-row-reverse";
+      case "right":
+        return "inline-flex items-center gap-2";
+      case "top":
+        return "inline-flex flex-col-reverse items-center gap-1";
+      case "bottom":
+        return "inline-flex flex-col items-center gap-1";
+      default:
+        return "inline-flex items-center gap-2";
+    }
+  };
+  const getAriaLabel = () => {
+    if (label) {
+      return `${label}: ${status}`;
+    }
+    return `Status indicator: ${status}`;
+  };
+  const getAriaDescription = () => {
+    const descriptions = {
+      off: "Inactive or disabled state",
+      normal: "Normal operating condition",
+      alarm: "Critical alarm condition requiring attention",
+      warning: "Warning condition that should be monitored",
+      active: "Currently active or running",
+      fault: "System fault or error condition"
+    };
+    return descriptions[status];
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `${getContainerLayout()} ${className}`.trim(), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        className: indicatorClasses,
+        role: "status",
+        "aria-label": getAriaLabel(),
+        "aria-description": getAriaDescription(),
+        "data-status": status,
+        "data-testid": `status-indicator-${status}`
+      }
+    ),
+    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: labelClasses, children: label })
+  ] });
+};
+
+// src/Selector.tsx
+var import_react2 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Selector = ({
+  value,
+  onChange,
+  options,
+  placeholder = "Select option...",
+  disabled = false,
+  status = "normal",
+  size = "medium",
+  label,
+  dropdownUp = false,
+  className = "",
+  ...props
+}) => {
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  const [focusedIndex, setFocusedIndex] = (0, import_react2.useState)(-1);
+  const selectorRef = (0, import_react2.useRef)(null);
+  const dropdownRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (selectorRef.current && !selectorRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setFocusedIndex(-1);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    switch (e.key) {
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          setFocusedIndex(
+            Math.max(
+              0,
+              options.findIndex((opt) => opt.value === value)
+            )
+          );
+        } else if (focusedIndex >= 0) {
+          const selectedOption2 = options[focusedIndex];
+          if (!selectedOption2.disabled) {
+            onChange(selectedOption2.value);
+            setIsOpen(false);
+            setFocusedIndex(-1);
+          }
+        }
+        break;
+      case "Escape":
+        setIsOpen(false);
+        setFocusedIndex(-1);
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          setFocusedIndex(
+            Math.max(
+              0,
+              options.findIndex((opt) => opt.value === value)
+            )
+          );
+        } else {
+          setFocusedIndex((prev) => {
+            const nextIndex = Math.min(prev + 1, options.length - 1);
+            return options[nextIndex]?.disabled ? prev : nextIndex;
+          });
+        }
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (isOpen) {
+          setFocusedIndex((prev) => {
+            const nextIndex = Math.max(prev - 1, 0);
+            return options[nextIndex]?.disabled ? prev : nextIndex;
+          });
+        }
+        break;
+    }
+  };
+  const selectedOption = options.find((opt) => opt.value === value);
+  const getSizeStyles = () => {
+    switch (size) {
+      case "small":
+        return {
+          height: "2.5rem",
+          padding: "0.5rem 0.75rem",
+          fontSize: "0.875rem",
+          iconSize: "1rem"
+        };
+      case "large":
+        return {
+          height: "4rem",
+          padding: "1rem 1.5rem",
+          fontSize: "1.25rem",
+          iconSize: "1.5rem"
+        };
+      default:
+        return {
+          height: "3rem",
+          padding: "0.75rem 1rem",
+          fontSize: "1rem",
+          iconSize: "1.25rem"
+        };
+    }
+  };
+  const getStatusStyles = () => {
+    switch (status) {
+      case "alarm":
+        return {
+          borderColor: "var(--selector-alarm-border, #ef4444)",
+          backgroundColor: "var(--selector-alarm-bg, rgba(239, 68, 68, 0.15))",
+          color: "var(--selector-alarm-text, #fecaca)",
+          boxShadow: "var(--selector-alarm-shadow, 0 0 20px rgba(239, 68, 68, 0.3))"
+        };
+      case "warning":
+        return {
+          borderColor: "var(--selector-warning-border, #f59e0b)",
+          backgroundColor: "var(--selector-warning-bg, rgba(245, 158, 11, 0.15))",
+          color: "var(--selector-warning-text, #fed7aa)",
+          boxShadow: "var(--selector-warning-shadow, 0 0 20px rgba(245, 158, 11, 0.3))"
+        };
+      case "disabled":
+        return {
+          borderColor: "var(--selector-disabled-border, #6b7280)",
+          backgroundColor: "var(--selector-disabled-bg, rgba(107, 114, 128, 0.1))",
+          color: "var(--selector-disabled-text, #9ca3af)",
+          cursor: "not-allowed"
+        };
+      default:
+        return {
+          borderColor: "var(--selector-normal-border, #64748b)",
+          backgroundColor: "var(--selector-normal-bg, rgba(30, 41, 59, 0.9))",
+          color: "var(--selector-normal-text, #f1f5f9)",
+          boxShadow: "var(--selector-normal-shadow, 0 8px 32px rgba(0, 0, 0, 0.3))"
+        };
+    }
+  };
+  const sizeStyles = getSizeStyles();
+  const statusStyles = getStatusStyles();
+  const selectorStyle = {
+    position: "relative",
+    width: "100%",
+    height: sizeStyles.height,
+    padding: sizeStyles.padding,
+    paddingRight: "3rem",
+    border: "2px solid",
+    borderRadius: "1rem",
+    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    fontSize: sizeStyles.fontSize,
+    fontWeight: "bold",
+    outline: "none",
+    transition: "all 300ms ease",
+    backdropFilter: "blur(8px)",
+    cursor: disabled ? "not-allowed" : "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    userSelect: "none",
+    ...statusStyles
+  };
+  const dropdownStyle = {
+    position: "absolute",
+    top: dropdownUp ? "auto" : "100%",
+    bottom: dropdownUp ? "100%" : "auto",
+    left: 0,
+    right: 0,
+    marginTop: dropdownUp ? 0 : "0.25rem",
+    marginBottom: dropdownUp ? "0.25rem" : 0,
+    backgroundColor: "var(--selector-dropdown-bg, rgba(30, 41, 59, 0.95))",
+    border: "2px solid var(--selector-dropdown-border, #64748b)",
+    borderRadius: "1rem",
+    backdropFilter: "blur(12px)",
+    boxShadow: "var(--selector-dropdown-shadow, 0 12px 48px rgba(0, 0, 0, 0.4))",
+    zIndex: 50,
+    maxHeight: "12rem",
+    overflowY: "auto"
+  };
+  const optionStyle = (option, index) => ({
+    padding: sizeStyles.padding,
+    fontSize: sizeStyles.fontSize,
+    fontWeight: "600",
+    color: option.disabled ? "var(--selector-option-disabled-text, #6b7280)" : "var(--selector-option-text, #f1f5f9)",
+    backgroundColor: index === focusedIndex ? "var(--selector-option-focused-bg, rgba(59, 130, 246, 0.3))" : "transparent",
+    cursor: option.disabled ? "not-allowed" : "pointer",
+    transition: "all 150ms ease",
+    borderRadius: index === focusedIndex ? "0.5rem" : "0",
+    margin: index === focusedIndex ? "0.125rem" : "0"
+  });
+  const arrowStyle = {
+    position: "absolute",
+    right: "1rem",
+    top: "50%",
+    transform: `translateY(-50%) rotate(${isOpen ? "180deg" : "0deg"})`,
+    transition: "transform 200ms ease",
+    width: sizeStyles.iconSize,
+    height: sizeStyles.iconSize,
+    color: disabled ? "#6b7280" : "#94a3b8"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: "selector-container",
+      style: { display: "flex", flexDirection: "column", gap: "0.5rem" },
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "label",
+          {
+            className: "selector-label",
+            style: {
+              fontSize: "0.875rem",
+              fontWeight: "600",
+              color: "var(--selector-label-color, #cbd5e1)",
+              textTransform: "uppercase",
+              letterSpacing: "0.05em"
+            },
+            children: label
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref: selectorRef, style: { position: "relative" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "div",
+            {
+              className: `selector ${className}`,
+              style: selectorStyle,
+              onClick: () => !disabled && setIsOpen(!isOpen),
+              onKeyDown: handleKeyDown,
+              tabIndex: disabled ? -1 : 0,
+              role: "combobox",
+              "aria-expanded": isOpen,
+              "aria-haspopup": "listbox",
+              ...props,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "span",
+                  {
+                    style: {
+                      color: selectedOption ? statusStyles.color : "var(--selector-placeholder-text, #9ca3af)",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: selectedOption ? selectedOption.label : placeholder
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { style: arrowStyle, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+              ]
+            }
+          ),
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: dropdownRef, style: dropdownStyle, role: "listbox", children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "div",
+            {
+              style: optionStyle(option, index),
+              onClick: () => {
+                if (!option.disabled) {
+                  onChange(option.value);
+                  setIsOpen(false);
+                  setFocusedIndex(-1);
+                }
+              },
+              onMouseEnter: () => !option.disabled && setFocusedIndex(index),
+              role: "option",
+              "aria-selected": option.value === value,
+              "aria-disabled": option.disabled,
+              title: option.description,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                  "div",
+                  {
+                    style: { display: "flex", justifyContent: "space-between", alignItems: "center" },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: option.label }),
+                      option.value === value && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        "svg",
+                        {
+                          style: { width: "1rem", height: "1rem", color: "#3b82f6" },
+                          fill: "currentColor",
+                          viewBox: "0 0 20 20",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                            "path",
+                            {
+                              fillRule: "evenodd",
+                              d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+                              clipRule: "evenodd"
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ),
+                option.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "0.75rem",
+                      color: "#9ca3af",
+                      marginTop: "0.25rem",
+                      fontWeight: "normal"
+                    },
+                    children: option.description
+                  }
+                )
+              ]
+            },
+            option.value
+          )) })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/ControlPanel.tsx
+var import_react3 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ControlPanel = ({
+  title,
+  selectedMode,
+  modeOptions,
+  onModeChange,
+  setpointValue,
+  onSetpointChange,
+  secondSetpointValue,
+  onSecondSetpointChange,
+  modeConfigs = {},
+  defaultUnit = "Units",
+  defaultLabel = "Setpoint",
+  defaultMin = 0,
+  defaultMax = 100,
+  defaultPrecision = 2,
+  status = "normal",
+  collapsed = false,
+  onCollapseChange,
+  size = "medium",
+  setpointReadOnly = false,
+  showStartStopButtons = false,
+  isRunning = false,
+  onStart,
+  onStop,
+  startButtonText = "Start",
+  stopButtonText = "Stop",
+  className = "",
+  ...props
+}) => {
+  const [isExpanded, setIsExpanded] = (0, import_react3.useState)(!collapsed);
+  const toggleExpanded = () => {
+    const newExpanded = !isExpanded;
+    setIsExpanded(newExpanded);
+    onCollapseChange?.(!newExpanded);
+  };
+  const currentModeConfig = modeConfigs[selectedMode] || {};
+  const currentUnit = currentModeConfig.unit || defaultUnit;
+  const currentLabel = currentModeConfig.label || defaultLabel;
+  const currentMin = currentModeConfig.min ?? defaultMin;
+  const currentMax = currentModeConfig.max ?? defaultMax;
+  const currentPrecision = currentModeConfig.precision ?? defaultPrecision;
+  const hasSecondSetpoint = currentModeConfig.hasSecondSetpoint || false;
+  const getSizeStyles = () => {
+    switch (size) {
+      case "small":
+        return {
+          padding: "1rem",
+          titleSize: "1rem",
+          gap: "0.75rem"
+        };
+      case "large":
+        return {
+          padding: "1.5rem",
+          titleSize: "1.5rem",
+          gap: "1.25rem"
+        };
+      default:
+        return {
+          padding: "1.25rem",
+          titleSize: "1.125rem",
+          gap: "1rem"
+        };
+    }
+  };
+  const getStatusStyles = () => {
+    switch (status) {
+      case "alarm":
+        return {
+          borderColor: "var(--control-panel-alarm-border, #ef4444)",
+          backgroundColor: "var(--control-panel-alarm-bg, rgba(239, 68, 68, 0.1))",
+          titleColor: "var(--control-panel-alarm-text, #fecaca)",
+          boxShadow: "var(--control-panel-alarm-shadow, 0 0 20px rgba(239, 68, 68, 0.3))",
+          glowEffect: "var(--control-panel-alarm-glow, 0 0 30px rgba(239, 68, 68, 0.2))"
+        };
+      case "warning":
+        return {
+          borderColor: "var(--control-panel-warning-border, #f59e0b)",
+          backgroundColor: "var(--control-panel-warning-bg, rgba(245, 158, 11, 0.1))",
+          titleColor: "var(--control-panel-warning-text, #fed7aa)",
+          boxShadow: "var(--control-panel-warning-shadow, 0 0 20px rgba(245, 158, 11, 0.3))",
+          glowEffect: "var(--control-panel-warning-glow, 0 0 30px rgba(245, 158, 11, 0.2))"
+        };
+      case "disabled":
+        return {
+          borderColor: "var(--control-panel-disabled-border, #6b7280)",
+          backgroundColor: "var(--control-panel-disabled-bg, rgba(107, 114, 128, 0.1))",
+          titleColor: "var(--control-panel-disabled-text, #9ca3af)",
+          boxShadow: "var(--control-panel-disabled-shadow, 0 8px 32px rgba(0, 0, 0, 0.2))",
+          glowEffect: "var(--control-panel-disabled-glow, none)"
+        };
+      default:
+        return {
+          borderColor: "var(--control-panel-normal-border, #64748b)",
+          backgroundColor: "var(--control-panel-normal-bg, rgba(30, 41, 59, 0.9))",
+          titleColor: "var(--control-panel-normal-text, #f1f5f9)",
+          boxShadow: "var(--control-panel-normal-shadow, 0 8px 32px rgba(0, 0, 0, 0.3))",
+          glowEffect: "var(--control-panel-normal-glow, 0 0 20px rgba(59, 130, 246, 0.1))"
+        };
+    }
+  };
+  const sizeStyles = getSizeStyles();
+  const statusStyles = getStatusStyles();
+  const panelStyle = {
+    border: "2px solid",
+    borderRadius: "1.5rem",
+    backdropFilter: "blur(12px)",
+    transition: "all 400ms cubic-bezier(0.4, 0, 0.2, 1)",
+    position: "relative",
+    overflow: "hidden",
+    minWidth: "300px",
+    maxWidth: "400px",
+    minHeight: "400px",
+    width: "100%",
+    ...statusStyles,
+    boxShadow: isExpanded ? statusStyles.glowEffect : statusStyles.boxShadow
+  };
+  const headerStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: sizeStyles.padding,
+    cursor: onCollapseChange ? "pointer" : "default",
+    borderBottom: isExpanded ? `1px solid ${statusStyles.borderColor}40` : "none",
+    transition: "all 300ms ease"
+  };
+  const titleStyle = {
+    fontSize: sizeStyles.titleSize,
+    fontWeight: "bold",
+    color: statusStyles.titleColor,
+    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    letterSpacing: "0.05em",
+    margin: 0
+  };
+  const contentStyle = {
+    padding: isExpanded ? sizeStyles.padding : "0",
+    paddingTop: isExpanded ? sizeStyles.padding : "0",
+    maxHeight: isExpanded ? "500px" : "0",
+    opacity: isExpanded ? 1 : 0,
+    overflow: "hidden",
+    transition: "all 400ms cubic-bezier(0.4, 0, 0.2, 1)",
+    display: "flex",
+    flexDirection: "column",
+    gap: sizeStyles.gap,
+    justifyContent: "space-between",
+    flex: 1
+  };
+  const chevronStyle = {
+    width: "1.5rem",
+    height: "1.5rem",
+    color: statusStyles.titleColor,
+    transform: `rotate(${isExpanded ? "180deg" : "0deg"})`,
+    transition: "transform 300ms ease",
+    opacity: onCollapseChange ? 1 : 0.3
+  };
+  const statusBadgeStyle = {
+    position: "absolute",
+    top: "0.5rem",
+    right: "0.5rem",
+    width: "0.75rem",
+    height: "0.75rem",
+    borderRadius: "50%",
+    backgroundColor: status === "alarm" ? "#ef4444" : status === "warning" ? "#f59e0b" : status === "disabled" ? "#6b7280" : "#22c55e",
+    boxShadow: `0 0 10px ${status === "alarm" ? "#ef4444" : status === "warning" ? "#f59e0b" : status === "disabled" ? "#6b7280" : "#22c55e"}80`,
+    animation: status === "alarm" ? "pulse 2s infinite" : "none"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: panelStyle, className: `control-panel glass-card ${className}`, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: statusBadgeStyle }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: headerStyle, onClick: onCollapseChange ? toggleExpanded : void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { style: titleStyle, children: title }),
+      onCollapseChange && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { style: chevronStyle, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: contentStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        Selector,
+        {
+          value: selectedMode,
+          onChange: onModeChange,
+          options: modeOptions,
+          label: "Control Mode",
+          status,
+          size: size === "small" ? "small" : size === "large" ? "large" : "medium",
+          disabled: status === "disabled"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        ValueEntry,
+        {
+          value: setpointValue,
+          onChange: onSetpointChange,
+          label: currentLabel,
+          unit: currentUnit,
+          min: currentMin,
+          max: currentMax,
+          precision: currentPrecision,
+          status,
+          readOnly: setpointReadOnly || status === "disabled",
+          disabled: status === "disabled"
+        }
+      ) }),
+      hasSecondSetpoint && onSecondSetpointChange && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        ValueEntry,
+        {
+          value: secondSetpointValue || 0,
+          onChange: onSecondSetpointChange,
+          label: currentModeConfig.secondLabel || "Time",
+          unit: currentModeConfig.secondUnit || "sec",
+          min: currentModeConfig.secondMin ?? 0,
+          max: currentModeConfig.secondMax ?? 999,
+          precision: currentModeConfig.secondPrecision ?? 0,
+          status,
+          readOnly: setpointReadOnly || status === "disabled",
+          disabled: status === "disabled"
+        }
+      ) }),
+      showStartStopButtons && (onStart || onStop) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", gap: "0.75rem" }, children: [
+        onStart && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Button,
+          {
+            variant: "primary",
+            onClick: onStart,
+            disabled: isRunning || status === "disabled",
+            style: {
+              flex: 1,
+              fontSize: "0.875rem",
+              padding: "0.75rem 1rem",
+              backgroundColor: isRunning ? "#6b7280" : void 0
+            },
+            children: startButtonText
+          }
+        ),
+        onStop && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Button,
+          {
+            variant: "secondary",
+            onClick: onStop,
+            disabled: !isRunning || status === "disabled",
+            style: {
+              flex: 1,
+              fontSize: "0.875rem",
+              padding: "0.75rem 1rem",
+              backgroundColor: !isRunning ? "#6b7280" : "#dc2626",
+              borderColor: !isRunning ? "#6b7280" : "#dc2626"
+            },
+            children: stopButtonText
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "div",
+        {
+          className: "control-panel-info",
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: "0.5rem 0",
+            fontSize: "0.75rem",
+            color: "var(--control-panel-info-text, #9ca3af)",
+            borderTop: `1px solid ${statusStyles.borderColor}20`,
+            fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+              "Mode: ",
+              selectedMode.toUpperCase()
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", gap: "1rem" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+                "SP: ",
+                String(setpointValue),
+                currentUnit
+              ] }),
+              hasSecondSetpoint && secondSetpointValue && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+                currentModeConfig.secondLabel,
+                ": ",
+                String(secondSetpointValue),
+                currentModeConfig.secondUnit
+              ] })
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/ThemeContext.tsx
+var import_react4 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ThemeContext = (0, import_react4.createContext)(void 0);
+var useTheme = () => {
+  const context = (0, import_react4.useContext)(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
+var ThemeProvider = ({ children }) => {
+  const [theme, setThemeState] = (0, import_react4.useState)("modern");
+  (0, import_react4.useEffect)(() => {
+    document.body.className = "";
+    document.body.classList.add(`theme-${theme}`);
+    document.documentElement.className = "";
+    document.documentElement.classList.add(`theme-${theme}`);
+  }, [theme]);
+  const toggleTheme = () => {
+    setTheme(theme === "modern" ? "hmi" : "modern");
+  };
+  const setTheme = (newTheme) => {
+    setThemeState(newTheme);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ThemeContext.Provider, { value: { theme, toggleTheme, setTheme }, children });
+};
+
+// src/ThemeToggle.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ThemeToggle = ({
+  size = "medium",
+  position = "top-right",
+  className = "",
+  ...props
+}) => {
+  const { theme, toggleTheme } = useTheme();
+  const sizeStyles = {
+    small: { padding: "0.5rem 1rem", fontSize: "0.75rem" },
+    medium: { padding: "0.75rem 1.5rem", fontSize: "0.875rem" },
+    large: { padding: "1rem 2rem", fontSize: "1rem" }
+  };
+  const positionStyles = {
+    "top-left": { position: "fixed", top: "1rem", left: "1rem", zIndex: 1e3 },
+    "top-right": { position: "fixed", top: "1rem", right: "1rem", zIndex: 1e3 },
+    "bottom-left": { position: "fixed", bottom: "1rem", left: "1rem", zIndex: 1e3 },
+    "bottom-right": { position: "fixed", bottom: "1rem", right: "1rem", zIndex: 1e3 },
+    inline: { position: "relative" }
+  };
+  const baseStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.75rem",
+    cursor: "pointer",
+    borderRadius: "0.5rem",
+    border: "2px solid",
+    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    transition: "all 0.2s ease",
+    userSelect: "none",
+    ...sizeStyles[size],
+    ...positionStyles[position]
+  };
+  const modernStyle = {
+    ...baseStyle,
+    background: "linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%)",
+    borderColor: "rgba(59, 130, 246, 0.4)",
+    color: "#ffffff",
+    boxShadow: "0 8px 32px rgba(59, 130, 246, 0.3)"
+  };
+  const hmiStyle = {
+    ...baseStyle,
+    backgroundColor: "#666666",
+    borderColor: "#999999",
+    color: "#ffffff",
+    boxShadow: "none"
+  };
+  const currentStyle = theme === "modern" ? modernStyle : hmiStyle;
+  const toggleStyle = {
+    position: "relative",
+    width: "3rem",
+    height: "1.5rem",
+    borderRadius: "0.75rem",
+    transition: "all 0.2s ease",
+    backgroundColor: theme === "modern" ? "#3b82f6" : "#808080",
+    border: `2px solid ${theme === "modern" ? "#2563eb" : "#666666"}`
+  };
+  const thumbStyle = {
+    position: "absolute",
+    top: "0.125rem",
+    left: theme === "modern" ? "0.125rem" : "1.375rem",
+    width: "1rem",
+    height: "1rem",
+    borderRadius: "50%",
+    backgroundColor: "#ffffff",
+    transition: "all 0.2s ease",
+    boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: currentStyle, onClick: toggleTheme, className, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: theme === "modern" ? "\u{1F3A8} Modern" : "\u{1F3ED} HMI" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: toggleStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: thumbStyle }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { fontSize: "0.75rem", opacity: 0.8 }, children: theme === "modern" ? "Industrial Design" : "High Performance" })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  ControlPanel,
+  Selector,
+  StatusIndicator,
+  ThemeProvider,
+  ThemeToggle,
+  ValueEntry,
+  useTheme
+});
+//# sourceMappingURL=index.cjs.map