@procaaso/alphinity-ui-components 1.0.0

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Button.tsx","../src/TestValueEntry.tsx","../src/StatusIndicator.tsx","../src/Selector.tsx","../src/ControlPanel.tsx","../src/ThemeContext.tsx","../src/ThemeToggle.tsx"],"sourcesContent":["import React from 'react';\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  variant?: 'primary' | 'secondary';\r\n  children: React.ReactNode;\r\n}\r\n\r\nexport const Button: React.FC<ButtonProps> = ({\r\n  variant = 'primary',\r\n  children,\r\n  className = '',\r\n  ...props\r\n}) => {\r\n  // Large, touch-friendly button styles with enhanced visual presence\r\n  const baseStyles =\r\n    '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';\r\n\r\n  const variantStyles =\r\n    variant === 'primary'\r\n      ? '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'\r\n      : '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';\r\n\r\n  return (\r\n    <button className={`${baseStyles} ${variantStyles} ${className}`.trim()} {...props}>\r\n      {children}\r\n    </button>\r\n  );\r\n};\r\n","import React, { useState, useCallback } from 'react';\r\n\r\nexport interface ValueEntryProps\r\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {\r\n  /** Current value */\r\n  value: number | string;\r\n  /** Callback when value changes */\r\n  onChange: (value: number | string) => void;\r\n  /** Unit of measurement to display */\r\n  unit?: string;\r\n  /** Status state for visual feedback */\r\n  status?: 'normal' | 'alarm' | 'warning' | 'disabled';\r\n  /** Minimum allowed value (for numeric inputs) */\r\n  min?: number;\r\n  /** Maximum allowed value (for numeric inputs) */\r\n  max?: number;\r\n  /** Number of decimal places (for numeric inputs) */\r\n  precision?: number;\r\n  /** Input type - numeric or text */\r\n  inputType?: 'numeric' | 'text';\r\n  /** Label for the input */\r\n  label?: string;\r\n  /** Whether the input is read-only */\r\n  readOnly?: boolean;\r\n}\r\n\r\nexport const ValueEntry: React.FC<ValueEntryProps> = ({\r\n  value,\r\n  onChange,\r\n  unit,\r\n  status = 'normal',\r\n  min,\r\n  max,\r\n  precision = 2,\r\n  inputType = 'numeric',\r\n  label,\r\n  readOnly = false,\r\n  className = '',\r\n  disabled,\r\n  ...props\r\n}) => {\r\n  const [displayValue, setDisplayValue] = useState(String(value));\r\n  const [isEditing, setIsEditing] = useState(false);\r\n\r\n  const handleFocus = useCallback(() => {\r\n    setIsEditing(true);\r\n    setDisplayValue(String(value));\r\n  }, [value]);\r\n\r\n  const handleBlur = useCallback(() => {\r\n    setIsEditing(false);\r\n    let newValue: number | string = displayValue;\r\n\r\n    if (inputType === 'numeric') {\r\n      const numValue = parseFloat(displayValue);\r\n      if (!isNaN(numValue)) {\r\n        // Apply min/max constraints\r\n        let constrainedValue = numValue;\r\n        if (min !== undefined) constrainedValue = Math.max(min, constrainedValue);\r\n        if (max !== undefined) constrainedValue = Math.min(max, constrainedValue);\r\n\r\n        // Apply precision\r\n        constrainedValue = parseFloat(constrainedValue.toFixed(precision));\r\n        newValue = constrainedValue;\r\n        setDisplayValue(String(constrainedValue));\r\n      } else {\r\n        // Invalid number, revert to original value\r\n        setDisplayValue(String(value));\r\n        return;\r\n      }\r\n    }\r\n\r\n    if (newValue !== value) {\r\n      onChange(newValue);\r\n    }\r\n  }, [displayValue, inputType, min, max, precision, value, onChange]);\r\n\r\n  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    setDisplayValue(e.target.value);\r\n  }, []);\r\n\r\n  const handleKeyDown = useCallback(\r\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n      if (e.key === 'Enter') {\r\n        e.currentTarget.blur();\r\n      }\r\n      if (e.key === 'Escape') {\r\n        setDisplayValue(String(value));\r\n        e.currentTarget.blur();\r\n      }\r\n    },\r\n    [value]\r\n  );\r\n\r\n  // Create the display text\r\n  const displayText = isEditing\r\n    ? displayValue\r\n    : inputType === 'numeric'\r\n      ? Number(value).toFixed(precision)\r\n      : String(value);\r\n\r\n  // Status-based styling with modern industrial colors\r\n  const getStatusStyles = () => {\r\n    switch (status) {\r\n      case 'alarm':\r\n        return {\r\n          borderColor: '#ef4444',\r\n          backgroundColor: 'rgba(239, 68, 68, 0.15)',\r\n          color: '#fecaca',\r\n          boxShadow: '0 0 20px rgba(239, 68, 68, 0.3)',\r\n        };\r\n      case 'warning':\r\n        return {\r\n          borderColor: '#f59e0b',\r\n          backgroundColor: 'rgba(245, 158, 11, 0.15)',\r\n          color: '#fed7aa',\r\n          boxShadow: '0 0 20px rgba(245, 158, 11, 0.3)',\r\n        };\r\n      case 'disabled':\r\n        return {\r\n          borderColor: '#6b7280',\r\n          backgroundColor: 'rgba(107, 114, 128, 0.1)',\r\n          color: '#9ca3af',\r\n          cursor: 'not-allowed',\r\n        };\r\n      default:\r\n        return {\r\n          borderColor: '#64748b',\r\n          backgroundColor: 'rgba(30, 41, 59, 0.9)',\r\n          color: '#f1f5f9',\r\n          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',\r\n        };\r\n    }\r\n  };\r\n\r\n  const statusStyles = getStatusStyles();\r\n\r\n  const inputStyle: React.CSSProperties = {\r\n    width: '12rem',\r\n    height: '4rem',\r\n    padding: unit ? '1rem 4rem 1rem 1.5rem' : '1rem 1.5rem',\r\n    border: '2px solid',\r\n    borderRadius: '1.5rem',\r\n    fontFamily:\r\n      'ui-monospace, SFMono-Regular, \"SF Mono\", Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',\r\n    fontSize: '1.25rem',\r\n    fontWeight: 'bold',\r\n    textAlign: 'center',\r\n    outline: 'none',\r\n    transition: 'all 300ms ease',\r\n    backdropFilter: 'blur(8px)',\r\n    ...statusStyles,\r\n  };\r\n\r\n  const inputStyleFocus: React.CSSProperties = {\r\n    ...inputStyle,\r\n    borderColor: '#60a5fa',\r\n    boxShadow:\r\n      '0 0 0 4px rgba(96, 165, 250, 0.3), ' +\r\n      (statusStyles.boxShadow || '0 8px 32px rgba(0, 0, 0, 0.3)'),\r\n    transform: 'scale(1.02)',\r\n  };\r\n\r\n  const unitStyle: React.CSSProperties = {\r\n    position: 'absolute',\r\n    right: '0.75rem',\r\n    top: '50%',\r\n    transform: 'translateY(-50%)',\r\n    padding: '0.5rem 0.75rem',\r\n    fontSize: '1rem',\r\n    fontWeight: 'bold',\r\n    color: '#ffffff',\r\n    backgroundColor: '#3b82f6',\r\n    borderRadius: '0.5rem',\r\n    border: '2px solid #60a5fa',\r\n    backdropFilter: 'blur(4px)',\r\n    pointerEvents: 'none' as const,\r\n    zIndex: 10,\r\n    boxShadow: '0 2px 8px rgba(59, 130, 246, 0.4)',\r\n  };\r\n\r\n  return (\r\n    <div\r\n      style={{\r\n        display: 'inline-flex',\r\n        flexDirection: 'column',\r\n        alignItems: 'center',\r\n        gap: '0.75rem',\r\n      }}\r\n    >\r\n      {label && (\r\n        <label\r\n          style={{\r\n            fontSize: '0.875rem',\r\n            fontWeight: '600',\r\n            color: '#cbd5e1',\r\n            textTransform: 'uppercase',\r\n            letterSpacing: '0.05em',\r\n          }}\r\n        >\r\n          {label}\r\n        </label>\r\n      )}\r\n      <div style={{ position: 'relative', display: 'inline-flex', alignItems: 'center' }}>\r\n        <input\r\n          type=\"text\"\r\n          value={displayText}\r\n          onChange={handleChange}\r\n          onFocus={(e) => {\r\n            Object.assign(e.target.style, inputStyleFocus);\r\n            handleFocus();\r\n          }}\r\n          onBlur={(e) => {\r\n            Object.assign(e.target.style, inputStyle);\r\n            handleBlur();\r\n          }}\r\n          onKeyDown={handleKeyDown}\r\n          disabled={disabled}\r\n          readOnly={readOnly}\r\n          style={inputStyle}\r\n          {...props}\r\n        />\r\n        {unit && <span style={unitStyle}>{unit}</span>}\r\n        {status === 'alarm' && (\r\n          <div\r\n            style={{\r\n              position: 'absolute',\r\n              top: '-8px',\r\n              right: '-8px',\r\n              width: '1rem',\r\n              height: '1rem',\r\n              backgroundColor: '#ef4444',\r\n              borderRadius: '50%',\r\n              boxShadow: '0 0 10px rgba(239, 68, 68, 0.8)',\r\n              animation: 'pulse 2s infinite',\r\n            }}\r\n          />\r\n        )}\r\n        {status === 'warning' && (\r\n          <div\r\n            style={{\r\n              position: 'absolute',\r\n              top: '-8px',\r\n              right: '-8px',\r\n              width: '1rem',\r\n              height: '1rem',\r\n              backgroundColor: '#f59e0b',\r\n              borderRadius: '50%',\r\n              boxShadow: '0 0 10px rgba(245, 158, 11, 0.8)',\r\n            }}\r\n          />\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n","import React from 'react';\r\n\r\nexport interface StatusIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Status state determining color and behavior */\r\n  status: 'off' | 'normal' | 'alarm' | 'warning' | 'active' | 'fault';\r\n  /** Size of the indicator */\r\n  size?: 'small' | 'medium' | 'large';\r\n  /** Animation behavior */\r\n  animation?: 'none' | 'pulse' | 'blink' | 'flash';\r\n  /** Label text to display next to indicator */\r\n  label?: string;\r\n  /** Position of label relative to indicator */\r\n  labelPosition?: 'left' | 'right' | 'top' | 'bottom';\r\n  /** Shape of the indicator */\r\n  shape?: 'circle' | 'square' | 'diamond';\r\n  /** Whether the indicator should have a 3D LED effect */\r\n  led?: boolean;\r\n}\r\n\r\nexport const StatusIndicator: React.FC<StatusIndicatorProps> = ({\r\n  status,\r\n  size = 'medium',\r\n  animation = 'none',\r\n  label,\r\n  labelPosition = 'right',\r\n  shape = 'circle',\r\n  led = true,\r\n  className = '',\r\n  ...props\r\n}) => {\r\n  // Touch-friendly size styles - larger for better visibility\r\n  const sizeStyles = {\r\n    small: 'w-5 h-5',\r\n    medium: 'w-7 h-7',\r\n    large: 'w-10 h-10',\r\n  };\r\n\r\n  // Modern shape styles with more rounded corners\r\n  const shapeStyles = {\r\n    circle: 'rounded-full',\r\n    square: 'rounded-lg',\r\n    diamond: 'rotate-45 rounded-lg',\r\n  };\r\n\r\n  // Enhanced status colors with richer gradients and better contrast\r\n  const statusStyles = {\r\n    off: 'bg-gradient-to-br from-slate-500 to-slate-600 border-slate-400 shadow-slate-500/30',\r\n    normal:\r\n      'bg-gradient-to-br from-emerald-400 via-green-500 to-green-600 border-emerald-300 shadow-green-500/70',\r\n    alarm: 'bg-gradient-to-br from-red-400 via-red-500 to-red-600 border-red-300 shadow-red-500/70',\r\n    warning:\r\n      'bg-gradient-to-br from-amber-400 via-yellow-500 to-orange-500 border-amber-300 shadow-yellow-500/70',\r\n    active:\r\n      'bg-gradient-to-br from-blue-400 via-blue-500 to-indigo-600 border-blue-300 shadow-blue-500/70',\r\n    fault:\r\n      'bg-gradient-to-br from-purple-400 via-purple-500 to-violet-600 border-purple-300 shadow-purple-500/70',\r\n  };\r\n\r\n  // Animation styles\r\n  const animationStyles = {\r\n    none: '',\r\n    pulse: 'animate-pulse',\r\n    blink: 'animate-bounce',\r\n    flash: 'animate-ping',\r\n  };\r\n\r\n  // LED effect styles\r\n  const ledEffect = led ? 'shadow-lg border-2' : 'border';\r\n\r\n  // Get glow effect for active states\r\n  const glowEffect = status !== 'off' && led ? 'shadow-lg' : '';\r\n\r\n  const indicatorClasses = `\r\n    ${sizeStyles[size]}\r\n    ${shapeStyles[shape]}\r\n    ${statusStyles[status]}\r\n    ${animationStyles[animation]}\r\n    ${ledEffect}\r\n    ${glowEffect}\r\n    inline-block\r\n    transition-all\r\n    duration-300\r\n  `\r\n    .trim()\r\n    .replace(/\\s+/g, ' ');\r\n\r\n  // Label styles\r\n  const labelClasses = 'text-sm font-medium text-gray-700 uppercase tracking-wide select-none';\r\n\r\n  // Container layout based on label position\r\n  const getContainerLayout = () => {\r\n    switch (labelPosition) {\r\n      case 'left':\r\n        return 'inline-flex items-center gap-2 flex-row-reverse';\r\n      case 'right':\r\n        return 'inline-flex items-center gap-2';\r\n      case 'top':\r\n        return 'inline-flex flex-col-reverse items-center gap-1';\r\n      case 'bottom':\r\n        return 'inline-flex flex-col items-center gap-1';\r\n      default:\r\n        return 'inline-flex items-center gap-2';\r\n    }\r\n  };\r\n\r\n  // ARIA attributes for accessibility\r\n  const getAriaLabel = () => {\r\n    if (label) {\r\n      return `${label}: ${status}`;\r\n    }\r\n    return `Status indicator: ${status}`;\r\n  };\r\n\r\n  const getAriaDescription = () => {\r\n    const descriptions = {\r\n      off: 'Inactive or disabled state',\r\n      normal: 'Normal operating condition',\r\n      alarm: 'Critical alarm condition requiring attention',\r\n      warning: 'Warning condition that should be monitored',\r\n      active: 'Currently active or running',\r\n      fault: 'System fault or error condition',\r\n    };\r\n    return descriptions[status];\r\n  };\r\n\r\n  return (\r\n    <div className={`${getContainerLayout()} ${className}`.trim()} {...props}>\r\n      <div\r\n        className={indicatorClasses}\r\n        role=\"status\"\r\n        aria-label={getAriaLabel()}\r\n        aria-description={getAriaDescription()}\r\n        data-status={status}\r\n        data-testid={`status-indicator-${status}`}\r\n      />\r\n      {label && <span className={labelClasses}>{label}</span>}\r\n    </div>\r\n  );\r\n};\r\n","import React, { useState, useRef, useEffect } from 'react';\r\n\r\nexport interface SelectorOption {\r\n  /** Unique value for the option */\r\n  value: string;\r\n  /** Display label for the option */\r\n  label: string;\r\n  /** Whether this option is disabled */\r\n  disabled?: boolean;\r\n  /** Optional description for tooltip or additional context */\r\n  description?: string;\r\n}\r\n\r\nexport interface SelectorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\r\n  /** Currently selected value */\r\n  value: string;\r\n  /** Callback when selection changes */\r\n  onChange: (value: string) => void;\r\n  /** List of available options */\r\n  options: SelectorOption[];\r\n  /** Placeholder text when no option is selected */\r\n  placeholder?: string;\r\n  /** Whether the selector is disabled */\r\n  disabled?: boolean;\r\n  /** Status state for visual feedback */\r\n  status?: 'normal' | 'alarm' | 'warning' | 'disabled';\r\n  /** Size variant */\r\n  size?: 'small' | 'medium' | 'large';\r\n  /** Label for the selector */\r\n  label?: string;\r\n  /** Whether the dropdown should open upward */\r\n  dropdownUp?: boolean;\r\n}\r\n\r\nexport const Selector: React.FC<SelectorProps> = ({\r\n  value,\r\n  onChange,\r\n  options,\r\n  placeholder = 'Select option...',\r\n  disabled = false,\r\n  status = 'normal',\r\n  size = 'medium',\r\n  label,\r\n  dropdownUp = false,\r\n  className = '',\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n  const [focusedIndex, setFocusedIndex] = useState(-1);\r\n  const selectorRef = useRef<HTMLDivElement>(null);\r\n  const dropdownRef = useRef<HTMLDivElement>(null);\r\n\r\n  // Close dropdown when clicking outside\r\n  useEffect(() => {\r\n    const handleClickOutside = (event: MouseEvent) => {\r\n      if (selectorRef.current && !selectorRef.current.contains(event.target as Node)) {\r\n        setIsOpen(false);\r\n        setFocusedIndex(-1);\r\n      }\r\n    };\r\n\r\n    document.addEventListener('mousedown', handleClickOutside);\r\n    return () => document.removeEventListener('mousedown', handleClickOutside);\r\n  }, []);\r\n\r\n  // Handle keyboard navigation\r\n  const handleKeyDown = (e: React.KeyboardEvent) => {\r\n    if (disabled) return;\r\n\r\n    switch (e.key) {\r\n      case 'Enter':\r\n      case ' ':\r\n        e.preventDefault();\r\n        if (!isOpen) {\r\n          setIsOpen(true);\r\n          setFocusedIndex(\r\n            Math.max(\r\n              0,\r\n              options.findIndex((opt) => opt.value === value)\r\n            )\r\n          );\r\n        } else if (focusedIndex >= 0) {\r\n          const selectedOption = options[focusedIndex];\r\n          if (!selectedOption.disabled) {\r\n            onChange(selectedOption.value);\r\n            setIsOpen(false);\r\n            setFocusedIndex(-1);\r\n          }\r\n        }\r\n        break;\r\n      case 'Escape':\r\n        setIsOpen(false);\r\n        setFocusedIndex(-1);\r\n        break;\r\n      case 'ArrowDown':\r\n        e.preventDefault();\r\n        if (!isOpen) {\r\n          setIsOpen(true);\r\n          setFocusedIndex(\r\n            Math.max(\r\n              0,\r\n              options.findIndex((opt) => opt.value === value)\r\n            )\r\n          );\r\n        } else {\r\n          setFocusedIndex((prev) => {\r\n            const nextIndex = Math.min(prev + 1, options.length - 1);\r\n            return options[nextIndex]?.disabled ? prev : nextIndex;\r\n          });\r\n        }\r\n        break;\r\n      case 'ArrowUp':\r\n        e.preventDefault();\r\n        if (isOpen) {\r\n          setFocusedIndex((prev) => {\r\n            const nextIndex = Math.max(prev - 1, 0);\r\n            return options[nextIndex]?.disabled ? prev : nextIndex;\r\n          });\r\n        }\r\n        break;\r\n    }\r\n  };\r\n\r\n  // Get current selected option\r\n  const selectedOption = options.find((opt) => opt.value === value);\r\n\r\n  // Size-based styling\r\n  const getSizeStyles = () => {\r\n    switch (size) {\r\n      case 'small':\r\n        return {\r\n          height: '2.5rem',\r\n          padding: '0.5rem 0.75rem',\r\n          fontSize: '0.875rem',\r\n          iconSize: '1rem',\r\n        };\r\n      case 'large':\r\n        return {\r\n          height: '4rem',\r\n          padding: '1rem 1.5rem',\r\n          fontSize: '1.25rem',\r\n          iconSize: '1.5rem',\r\n        };\r\n      default:\r\n        return {\r\n          height: '3rem',\r\n          padding: '0.75rem 1rem',\r\n          fontSize: '1rem',\r\n          iconSize: '1.25rem',\r\n        };\r\n    }\r\n  };\r\n\r\n  // Status-based styling with CSS custom properties for theme override\r\n  const getStatusStyles = () => {\r\n    switch (status) {\r\n      case 'alarm':\r\n        return {\r\n          borderColor: 'var(--selector-alarm-border, #ef4444)',\r\n          backgroundColor: 'var(--selector-alarm-bg, rgba(239, 68, 68, 0.15))',\r\n          color: 'var(--selector-alarm-text, #fecaca)',\r\n          boxShadow: 'var(--selector-alarm-shadow, 0 0 20px rgba(239, 68, 68, 0.3))',\r\n        };\r\n      case 'warning':\r\n        return {\r\n          borderColor: 'var(--selector-warning-border, #f59e0b)',\r\n          backgroundColor: 'var(--selector-warning-bg, rgba(245, 158, 11, 0.15))',\r\n          color: 'var(--selector-warning-text, #fed7aa)',\r\n          boxShadow: 'var(--selector-warning-shadow, 0 0 20px rgba(245, 158, 11, 0.3))',\r\n        };\r\n      case 'disabled':\r\n        return {\r\n          borderColor: 'var(--selector-disabled-border, #6b7280)',\r\n          backgroundColor: 'var(--selector-disabled-bg, rgba(107, 114, 128, 0.1))',\r\n          color: 'var(--selector-disabled-text, #9ca3af)',\r\n          cursor: 'not-allowed',\r\n        };\r\n      default:\r\n        return {\r\n          borderColor: 'var(--selector-normal-border, #64748b)',\r\n          backgroundColor: 'var(--selector-normal-bg, rgba(30, 41, 59, 0.9))',\r\n          color: 'var(--selector-normal-text, #f1f5f9)',\r\n          boxShadow: 'var(--selector-normal-shadow, 0 8px 32px rgba(0, 0, 0, 0.3))',\r\n        };\r\n    }\r\n  };\r\n\r\n  const sizeStyles = getSizeStyles();\r\n  const statusStyles = getStatusStyles();\r\n\r\n  const selectorStyle: React.CSSProperties = {\r\n    position: 'relative',\r\n    width: '100%',\r\n    height: sizeStyles.height,\r\n    padding: sizeStyles.padding,\r\n    paddingRight: '3rem',\r\n    border: '2px solid',\r\n    borderRadius: '1rem',\r\n    fontFamily:\r\n      'ui-monospace, SFMono-Regular, \"SF Mono\", Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',\r\n    fontSize: sizeStyles.fontSize,\r\n    fontWeight: 'bold',\r\n    outline: 'none',\r\n    transition: 'all 300ms ease',\r\n    backdropFilter: 'blur(8px)',\r\n    cursor: disabled ? 'not-allowed' : 'pointer',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'space-between',\r\n    userSelect: 'none',\r\n    ...statusStyles,\r\n  };\r\n\r\n  const dropdownStyle: React.CSSProperties = {\r\n    position: 'absolute',\r\n    top: dropdownUp ? 'auto' : '100%',\r\n    bottom: dropdownUp ? '100%' : 'auto',\r\n    left: 0,\r\n    right: 0,\r\n    marginTop: dropdownUp ? 0 : '0.25rem',\r\n    marginBottom: dropdownUp ? '0.25rem' : 0,\r\n    backgroundColor: 'var(--selector-dropdown-bg, rgba(30, 41, 59, 0.95))',\r\n    border: '2px solid var(--selector-dropdown-border, #64748b)',\r\n    borderRadius: '1rem',\r\n    backdropFilter: 'blur(12px)',\r\n    boxShadow: 'var(--selector-dropdown-shadow, 0 12px 48px rgba(0, 0, 0, 0.4))',\r\n    zIndex: 50,\r\n    maxHeight: '12rem',\r\n    overflowY: 'auto',\r\n  };\r\n\r\n  const optionStyle = (option: SelectorOption, index: number): React.CSSProperties => ({\r\n    padding: sizeStyles.padding,\r\n    fontSize: sizeStyles.fontSize,\r\n    fontWeight: '600',\r\n    color: option.disabled\r\n      ? 'var(--selector-option-disabled-text, #6b7280)'\r\n      : 'var(--selector-option-text, #f1f5f9)',\r\n    backgroundColor:\r\n      index === focusedIndex\r\n        ? 'var(--selector-option-focused-bg, rgba(59, 130, 246, 0.3))'\r\n        : 'transparent',\r\n    cursor: option.disabled ? 'not-allowed' : 'pointer',\r\n    transition: 'all 150ms ease',\r\n    borderRadius: index === focusedIndex ? '0.5rem' : '0',\r\n    margin: index === focusedIndex ? '0.125rem' : '0',\r\n  });\r\n\r\n  const arrowStyle: React.CSSProperties = {\r\n    position: 'absolute',\r\n    right: '1rem',\r\n    top: '50%',\r\n    transform: `translateY(-50%) rotate(${isOpen ? '180deg' : '0deg'})`,\r\n    transition: 'transform 200ms ease',\r\n    width: sizeStyles.iconSize,\r\n    height: sizeStyles.iconSize,\r\n    color: disabled ? '#6b7280' : '#94a3b8',\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className=\"selector-container\"\r\n      style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}\r\n    >\r\n      {label && (\r\n        <label\r\n          className=\"selector-label\"\r\n          style={{\r\n            fontSize: '0.875rem',\r\n            fontWeight: '600',\r\n            color: 'var(--selector-label-color, #cbd5e1)',\r\n            textTransform: 'uppercase',\r\n            letterSpacing: '0.05em',\r\n          }}\r\n        >\r\n          {label}\r\n        </label>\r\n      )}\r\n      <div ref={selectorRef} style={{ position: 'relative' }}>\r\n        <div\r\n          className={`selector ${className}`}\r\n          style={selectorStyle}\r\n          onClick={() => !disabled && setIsOpen(!isOpen)}\r\n          onKeyDown={handleKeyDown}\r\n          tabIndex={disabled ? -1 : 0}\r\n          role=\"combobox\"\r\n          aria-expanded={isOpen}\r\n          aria-haspopup=\"listbox\"\r\n          {...props}\r\n        >\r\n          <span\r\n            style={{\r\n              color: selectedOption\r\n                ? statusStyles.color\r\n                : 'var(--selector-placeholder-text, #9ca3af)',\r\n              overflow: 'hidden',\r\n              textOverflow: 'ellipsis',\r\n              whiteSpace: 'nowrap',\r\n            }}\r\n          >\r\n            {selectedOption ? selectedOption.label : placeholder}\r\n          </span>\r\n\r\n          {/* Arrow Icon */}\r\n          <svg style={arrowStyle} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\r\n          </svg>\r\n        </div>\r\n\r\n        {/* Dropdown */}\r\n        {isOpen && (\r\n          <div ref={dropdownRef} style={dropdownStyle} role=\"listbox\">\r\n            {options.map((option, index) => (\r\n              <div\r\n                key={option.value}\r\n                style={optionStyle(option, index)}\r\n                onClick={() => {\r\n                  if (!option.disabled) {\r\n                    onChange(option.value);\r\n                    setIsOpen(false);\r\n                    setFocusedIndex(-1);\r\n                  }\r\n                }}\r\n                onMouseEnter={() => !option.disabled && setFocusedIndex(index)}\r\n                role=\"option\"\r\n                aria-selected={option.value === value}\r\n                aria-disabled={option.disabled}\r\n                title={option.description}\r\n              >\r\n                <div\r\n                  style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}\r\n                >\r\n                  <span>{option.label}</span>\r\n                  {option.value === value && (\r\n                    <svg\r\n                      style={{ width: '1rem', height: '1rem', color: '#3b82f6' }}\r\n                      fill=\"currentColor\"\r\n                      viewBox=\"0 0 20 20\"\r\n                    >\r\n                      <path\r\n                        fillRule=\"evenodd\"\r\n                        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\"\r\n                        clipRule=\"evenodd\"\r\n                      />\r\n                    </svg>\r\n                  )}\r\n                </div>\r\n                {option.description && (\r\n                  <div\r\n                    style={{\r\n                      fontSize: '0.75rem',\r\n                      color: '#9ca3af',\r\n                      marginTop: '0.25rem',\r\n                      fontWeight: 'normal',\r\n                    }}\r\n                  >\r\n                    {option.description}\r\n                  </div>\r\n                )}\r\n              </div>\r\n            ))}\r\n          </div>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n","import React, { useState } from 'react';\r\nimport { Selector, SelectorOption } from './Selector';\r\nimport { ValueEntry } from './TestValueEntry';\r\nimport { Button } from './Button';\r\n\r\nexport interface ModeConfig {\r\n  /** Units for this mode */\r\n  unit?: string;\r\n  /** Label for the primary setpoint */\r\n  label?: string;\r\n  /** Minimum value for primary setpoint */\r\n  min?: number;\r\n  /** Maximum value for primary setpoint */\r\n  max?: number;\r\n  /** Precision for primary setpoint */\r\n  precision?: number;\r\n  /** Whether this mode has a second setpoint (like ramp time) */\r\n  hasSecondSetpoint?: boolean;\r\n  /** Label for the second setpoint */\r\n  secondLabel?: string;\r\n  /** Units for the second setpoint */\r\n  secondUnit?: string;\r\n  /** Min value for second setpoint */\r\n  secondMin?: number;\r\n  /** Max value for second setpoint */\r\n  secondMax?: number;\r\n  /** Precision for second setpoint */\r\n  secondPrecision?: number;\r\n}\r\n\r\nexport interface ControlPanelProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Panel title/identifier */\r\n  title: string;\r\n  /** Currently selected mode */\r\n  selectedMode: string;\r\n  /** Available mode options */\r\n  modeOptions: SelectorOption[];\r\n  /** Callback when mode changes */\r\n  onModeChange: (mode: string) => void;\r\n  /** Current setpoint value */\r\n  setpointValue: number | string;\r\n  /** Callback when setpoint changes */\r\n  onSetpointChange: (value: number | string) => void;\r\n  /** Current second setpoint value (for ramp mode, etc.) */\r\n  secondSetpointValue?: number | string;\r\n  /** Callback when second setpoint changes */\r\n  onSecondSetpointChange?: (value: number | string) => void;\r\n  /** Configuration for each mode */\r\n  modeConfigs?: Record<string, ModeConfig>;\r\n  /** Default unit when no mode config is found */\r\n  defaultUnit?: string;\r\n  /** Default label when no mode config is found */\r\n  defaultLabel?: string;\r\n  /** Default min when no mode config is found */\r\n  defaultMin?: number;\r\n  /** Default max when no mode config is found */\r\n  defaultMax?: number;\r\n  /** Default precision when no mode config is found */\r\n  defaultPrecision?: number;\r\n  /** Status state for the entire panel */\r\n  status?: 'normal' | 'alarm' | 'warning' | 'disabled';\r\n  /** Whether the panel is collapsed */\r\n  collapsed?: boolean;\r\n  /** Callback when collapse state changes */\r\n  onCollapseChange?: (collapsed: boolean) => void;\r\n  /** Panel size variant */\r\n  size?: 'small' | 'medium' | 'large';\r\n  /** Whether setpoint is read-only */\r\n  setpointReadOnly?: boolean;\r\n  /** Whether to show start/stop buttons */\r\n  showStartStopButtons?: boolean;\r\n  /** Whether the process is currently running */\r\n  isRunning?: boolean;\r\n  /** Callback when start button is clicked */\r\n  onStart?: () => void;\r\n  /** Callback when stop button is clicked */\r\n  onStop?: () => void;\r\n  /** Custom start button text */\r\n  startButtonText?: string;\r\n  /** Custom stop button text */\r\n  stopButtonText?: string;\r\n}\r\n\r\nexport const ControlPanel: React.FC<ControlPanelProps> = ({\r\n  title,\r\n  selectedMode,\r\n  modeOptions,\r\n  onModeChange,\r\n  setpointValue,\r\n  onSetpointChange,\r\n  secondSetpointValue,\r\n  onSecondSetpointChange,\r\n  modeConfigs = {},\r\n  defaultUnit = 'Units',\r\n  defaultLabel = 'Setpoint',\r\n  defaultMin = 0,\r\n  defaultMax = 100,\r\n  defaultPrecision = 2,\r\n  status = 'normal',\r\n  collapsed = false,\r\n  onCollapseChange,\r\n  size = 'medium',\r\n  setpointReadOnly = false,\r\n  showStartStopButtons = false,\r\n  isRunning = false,\r\n  onStart,\r\n  onStop,\r\n  startButtonText = 'Start',\r\n  stopButtonText = 'Stop',\r\n  className = '',\r\n  ...props\r\n}) => {\r\n  const [isExpanded, setIsExpanded] = useState(!collapsed);\r\n\r\n  const toggleExpanded = () => {\r\n    const newExpanded = !isExpanded;\r\n    setIsExpanded(newExpanded);\r\n    onCollapseChange?.(!newExpanded);\r\n  };\r\n\r\n  // Get current mode configuration\r\n  const currentModeConfig = modeConfigs[selectedMode] || {};\r\n  const currentUnit = currentModeConfig.unit || defaultUnit;\r\n  const currentLabel = currentModeConfig.label || defaultLabel;\r\n  const currentMin = currentModeConfig.min ?? defaultMin;\r\n  const currentMax = currentModeConfig.max ?? defaultMax;\r\n  const currentPrecision = currentModeConfig.precision ?? defaultPrecision;\r\n  const hasSecondSetpoint = currentModeConfig.hasSecondSetpoint || false;\r\n\r\n  // Size-based styling\r\n  const getSizeStyles = () => {\r\n    switch (size) {\r\n      case 'small':\r\n        return {\r\n          padding: '1rem',\r\n          titleSize: '1rem',\r\n          gap: '0.75rem',\r\n        };\r\n      case 'large':\r\n        return {\r\n          padding: '1.5rem',\r\n          titleSize: '1.5rem',\r\n          gap: '1.25rem',\r\n        };\r\n      default:\r\n        return {\r\n          padding: '1.25rem',\r\n          titleSize: '1.125rem',\r\n          gap: '1rem',\r\n        };\r\n    }\r\n  };\r\n\r\n  // Status-based styling with CSS custom properties for theme override\r\n  const getStatusStyles = () => {\r\n    switch (status) {\r\n      case 'alarm':\r\n        return {\r\n          borderColor: 'var(--control-panel-alarm-border, #ef4444)',\r\n          backgroundColor: 'var(--control-panel-alarm-bg, rgba(239, 68, 68, 0.1))',\r\n          titleColor: 'var(--control-panel-alarm-text, #fecaca)',\r\n          boxShadow: 'var(--control-panel-alarm-shadow, 0 0 20px rgba(239, 68, 68, 0.3))',\r\n          glowEffect: 'var(--control-panel-alarm-glow, 0 0 30px rgba(239, 68, 68, 0.2))',\r\n        };\r\n      case 'warning':\r\n        return {\r\n          borderColor: 'var(--control-panel-warning-border, #f59e0b)',\r\n          backgroundColor: 'var(--control-panel-warning-bg, rgba(245, 158, 11, 0.1))',\r\n          titleColor: 'var(--control-panel-warning-text, #fed7aa)',\r\n          boxShadow: 'var(--control-panel-warning-shadow, 0 0 20px rgba(245, 158, 11, 0.3))',\r\n          glowEffect: 'var(--control-panel-warning-glow, 0 0 30px rgba(245, 158, 11, 0.2))',\r\n        };\r\n      case 'disabled':\r\n        return {\r\n          borderColor: 'var(--control-panel-disabled-border, #6b7280)',\r\n          backgroundColor: 'var(--control-panel-disabled-bg, rgba(107, 114, 128, 0.1))',\r\n          titleColor: 'var(--control-panel-disabled-text, #9ca3af)',\r\n          boxShadow: 'var(--control-panel-disabled-shadow, 0 8px 32px rgba(0, 0, 0, 0.2))',\r\n          glowEffect: 'var(--control-panel-disabled-glow, none)',\r\n        };\r\n      default:\r\n        return {\r\n          borderColor: 'var(--control-panel-normal-border, #64748b)',\r\n          backgroundColor: 'var(--control-panel-normal-bg, rgba(30, 41, 59, 0.9))',\r\n          titleColor: 'var(--control-panel-normal-text, #f1f5f9)',\r\n          boxShadow: 'var(--control-panel-normal-shadow, 0 8px 32px rgba(0, 0, 0, 0.3))',\r\n          glowEffect: 'var(--control-panel-normal-glow, 0 0 20px rgba(59, 130, 246, 0.1))',\r\n        };\r\n    }\r\n  };\r\n\r\n  const sizeStyles = getSizeStyles();\r\n  const statusStyles = getStatusStyles();\r\n\r\n  const panelStyle: React.CSSProperties = {\r\n    border: '2px solid',\r\n    borderRadius: '1.5rem',\r\n    backdropFilter: 'blur(12px)',\r\n    transition: 'all 400ms cubic-bezier(0.4, 0, 0.2, 1)',\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    minWidth: '300px',\r\n    maxWidth: '400px',\r\n    minHeight: '400px',\r\n    width: '100%',\r\n    ...statusStyles,\r\n    boxShadow: isExpanded ? statusStyles.glowEffect : statusStyles.boxShadow,\r\n  };\r\n\r\n  const headerStyle: React.CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'space-between',\r\n    padding: sizeStyles.padding,\r\n    cursor: onCollapseChange ? 'pointer' : 'default',\r\n    borderBottom: isExpanded ? `1px solid ${statusStyles.borderColor}40` : 'none',\r\n    transition: 'all 300ms ease',\r\n  };\r\n\r\n  const titleStyle: React.CSSProperties = {\r\n    fontSize: sizeStyles.titleSize,\r\n    fontWeight: 'bold',\r\n    color: statusStyles.titleColor,\r\n    fontFamily:\r\n      'ui-monospace, SFMono-Regular, \"SF Mono\", Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',\r\n    letterSpacing: '0.05em',\r\n    margin: 0,\r\n  };\r\n\r\n  const contentStyle: React.CSSProperties = {\r\n    padding: isExpanded ? sizeStyles.padding : '0',\r\n    paddingTop: isExpanded ? sizeStyles.padding : '0',\r\n    maxHeight: isExpanded ? '500px' : '0',\r\n    opacity: isExpanded ? 1 : 0,\r\n    overflow: 'hidden',\r\n    transition: 'all 400ms cubic-bezier(0.4, 0, 0.2, 1)',\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    gap: sizeStyles.gap,\r\n    justifyContent: 'space-between',\r\n    flex: 1,\r\n  };\r\n\r\n  const chevronStyle: React.CSSProperties = {\r\n    width: '1.5rem',\r\n    height: '1.5rem',\r\n    color: statusStyles.titleColor,\r\n    transform: `rotate(${isExpanded ? '180deg' : '0deg'})`,\r\n    transition: 'transform 300ms ease',\r\n    opacity: onCollapseChange ? 1 : 0.3,\r\n  };\r\n\r\n  const statusBadgeStyle: React.CSSProperties = {\r\n    position: 'absolute',\r\n    top: '0.5rem',\r\n    right: '0.5rem',\r\n    width: '0.75rem',\r\n    height: '0.75rem',\r\n    borderRadius: '50%',\r\n    backgroundColor:\r\n      status === 'alarm'\r\n        ? '#ef4444'\r\n        : status === 'warning'\r\n          ? '#f59e0b'\r\n          : status === 'disabled'\r\n            ? '#6b7280'\r\n            : '#22c55e',\r\n    boxShadow: `0 0 10px ${status === 'alarm' ? '#ef4444' : status === 'warning' ? '#f59e0b' : status === 'disabled' ? '#6b7280' : '#22c55e'}80`,\r\n    animation: status === 'alarm' ? 'pulse 2s infinite' : 'none',\r\n  };\r\n\r\n  return (\r\n    <div style={panelStyle} className={`control-panel glass-card ${className}`} {...props}>\r\n      {/* Status Badge */}\r\n      <div style={statusBadgeStyle} />\r\n\r\n      {/* Header */}\r\n      <div style={headerStyle} onClick={onCollapseChange ? toggleExpanded : undefined}>\r\n        <h3 style={titleStyle}>{title}</h3>\r\n        {onCollapseChange && (\r\n          <svg style={chevronStyle} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\r\n          </svg>\r\n        )}\r\n      </div>\r\n\r\n      {/* Content */}\r\n      <div style={contentStyle}>\r\n        {/* Mode Selector */}\r\n        <div>\r\n          <Selector\r\n            value={selectedMode}\r\n            onChange={onModeChange}\r\n            options={modeOptions}\r\n            label=\"Control Mode\"\r\n            status={status}\r\n            size={size === 'small' ? 'small' : size === 'large' ? 'large' : 'medium'}\r\n            disabled={status === 'disabled'}\r\n          />\r\n        </div>\r\n\r\n        {/* Primary Setpoint Value Entry */}\r\n        <div>\r\n          <ValueEntry\r\n            value={setpointValue}\r\n            onChange={onSetpointChange}\r\n            label={currentLabel}\r\n            unit={currentUnit}\r\n            min={currentMin}\r\n            max={currentMax}\r\n            precision={currentPrecision}\r\n            status={status}\r\n            readOnly={setpointReadOnly || status === 'disabled'}\r\n            disabled={status === 'disabled'}\r\n          />\r\n        </div>\r\n\r\n        {/* Second Setpoint (for ramp mode, etc.) */}\r\n        {hasSecondSetpoint && onSecondSetpointChange && (\r\n          <div>\r\n            <ValueEntry\r\n              value={secondSetpointValue || 0}\r\n              onChange={onSecondSetpointChange}\r\n              label={currentModeConfig.secondLabel || 'Time'}\r\n              unit={currentModeConfig.secondUnit || 'sec'}\r\n              min={currentModeConfig.secondMin ?? 0}\r\n              max={currentModeConfig.secondMax ?? 999}\r\n              precision={currentModeConfig.secondPrecision ?? 0}\r\n              status={status}\r\n              readOnly={setpointReadOnly || status === 'disabled'}\r\n              disabled={status === 'disabled'}\r\n            />\r\n          </div>\r\n        )}\r\n\r\n        {/* Start/Stop Buttons */}\r\n        {showStartStopButtons && (onStart || onStop) && (\r\n          <div style={{ display: 'flex', gap: '0.75rem' }}>\r\n            {onStart && (\r\n              <Button\r\n                variant=\"primary\"\r\n                onClick={onStart}\r\n                disabled={isRunning || status === 'disabled'}\r\n                style={{\r\n                  flex: 1,\r\n                  fontSize: '0.875rem',\r\n                  padding: '0.75rem 1rem',\r\n                  backgroundColor: isRunning ? '#6b7280' : undefined,\r\n                }}\r\n              >\r\n                {startButtonText}\r\n              </Button>\r\n            )}\r\n            {onStop && (\r\n              <Button\r\n                variant=\"secondary\"\r\n                onClick={onStop}\r\n                disabled={!isRunning || status === 'disabled'}\r\n                style={{\r\n                  flex: 1,\r\n                  fontSize: '0.875rem',\r\n                  padding: '0.75rem 1rem',\r\n                  backgroundColor: !isRunning ? '#6b7280' : '#dc2626',\r\n                  borderColor: !isRunning ? '#6b7280' : '#dc2626',\r\n                }}\r\n              >\r\n                {stopButtonText}\r\n              </Button>\r\n            )}\r\n          </div>\r\n        )}\r\n\r\n        {/* Additional Info Row */}\r\n        <div\r\n          className=\"control-panel-info\"\r\n          style={{\r\n            display: 'flex',\r\n            justifyContent: 'space-between',\r\n            alignItems: 'center',\r\n            padding: '0.5rem 0',\r\n            fontSize: '0.75rem',\r\n            color: 'var(--control-panel-info-text, #9ca3af)',\r\n            borderTop: `1px solid ${statusStyles.borderColor}20`,\r\n            fontFamily:\r\n              'ui-monospace, SFMono-Regular, \"SF Mono\", Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',\r\n          }}\r\n        >\r\n          <span>Mode: {selectedMode.toUpperCase()}</span>\r\n          <div style={{ display: 'flex', gap: '1rem' }}>\r\n            <span>\r\n              SP: {String(setpointValue)}\r\n              {currentUnit}\r\n            </span>\r\n            {hasSecondSetpoint && secondSetpointValue && (\r\n              <span>\r\n                {currentModeConfig.secondLabel}: {String(secondSetpointValue)}\r\n                {currentModeConfig.secondUnit}\r\n              </span>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n","import React, { createContext, useContext, useState, useEffect } from 'react';\r\n\r\ntype Theme = 'modern' | 'hmi';\r\n\r\ninterface ThemeContextType {\r\n  theme: Theme;\r\n  toggleTheme: () => void;\r\n  setTheme: (theme: Theme) => void;\r\n}\r\n\r\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\r\n\r\nexport const useTheme = () => {\r\n  const context = useContext(ThemeContext);\r\n  if (!context) {\r\n    throw new Error('useTheme must be used within a ThemeProvider');\r\n  }\r\n  return context;\r\n};\r\n\r\ninterface ThemeProviderProps {\r\n  children: React.ReactNode;\r\n}\r\n\r\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {\r\n  const [theme, setThemeState] = useState<Theme>('modern');\r\n\r\n  useEffect(() => {\r\n    // Apply theme classes to document body\r\n    document.body.className = '';\r\n    document.body.classList.add(`theme-${theme}`);\r\n\r\n    // Also apply to html element for global styling\r\n    document.documentElement.className = '';\r\n    document.documentElement.classList.add(`theme-${theme}`);\r\n  }, [theme]);\r\n\r\n  const toggleTheme = () => {\r\n    setTheme(theme === 'modern' ? 'hmi' : 'modern');\r\n  };\r\n\r\n  const setTheme = (newTheme: Theme) => {\r\n    setThemeState(newTheme);\r\n  };\r\n\r\n  return (\r\n    <ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>\r\n      {children}\r\n    </ThemeContext.Provider>\r\n  );\r\n};\r\n","import React from 'react';\r\nimport { useTheme } from './ThemeContext';\r\n\r\nexport interface ThemeToggleProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Size of the toggle */\r\n  size?: 'small' | 'medium' | 'large';\r\n  /** Position of the toggle */\r\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'inline';\r\n}\r\n\r\nexport const ThemeToggle: React.FC<ThemeToggleProps> = ({\r\n  size = 'medium',\r\n  position = 'top-right',\r\n  className = '',\r\n  ...props\r\n}) => {\r\n  const { theme, toggleTheme } = useTheme();\r\n\r\n  const sizeStyles = {\r\n    small: { padding: '0.5rem 1rem', fontSize: '0.75rem' },\r\n    medium: { padding: '0.75rem 1.5rem', fontSize: '0.875rem' },\r\n    large: { padding: '1rem 2rem', fontSize: '1rem' },\r\n  };\r\n\r\n  const positionStyles = {\r\n    'top-left': { position: 'fixed' as const, top: '1rem', left: '1rem', zIndex: 1000 },\r\n    'top-right': { position: 'fixed' as const, top: '1rem', right: '1rem', zIndex: 1000 },\r\n    'bottom-left': { position: 'fixed' as const, bottom: '1rem', left: '1rem', zIndex: 1000 },\r\n    'bottom-right': { position: 'fixed' as const, bottom: '1rem', right: '1rem', zIndex: 1000 },\r\n    inline: { position: 'relative' as const },\r\n  };\r\n\r\n  const baseStyle: React.CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    gap: '0.75rem',\r\n    cursor: 'pointer',\r\n    borderRadius: '0.5rem',\r\n    border: '2px solid',\r\n    fontFamily:\r\n      'ui-monospace, SFMono-Regular, \"SF Mono\", Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',\r\n    fontWeight: 600,\r\n    textTransform: 'uppercase',\r\n    letterSpacing: '0.05em',\r\n    transition: 'all 0.2s ease',\r\n    userSelect: 'none',\r\n    ...sizeStyles[size],\r\n    ...positionStyles[position],\r\n  };\r\n\r\n  const modernStyle: React.CSSProperties = {\r\n    ...baseStyle,\r\n    background: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%)',\r\n    borderColor: 'rgba(59, 130, 246, 0.4)',\r\n    color: '#ffffff',\r\n    boxShadow: '0 8px 32px rgba(59, 130, 246, 0.3)',\r\n  };\r\n\r\n  const hmiStyle: React.CSSProperties = {\r\n    ...baseStyle,\r\n    backgroundColor: '#666666',\r\n    borderColor: '#999999',\r\n    color: '#ffffff',\r\n    boxShadow: 'none',\r\n  };\r\n\r\n  const currentStyle = theme === 'modern' ? modernStyle : hmiStyle;\r\n\r\n  const toggleStyle: React.CSSProperties = {\r\n    position: 'relative',\r\n    width: '3rem',\r\n    height: '1.5rem',\r\n    borderRadius: '0.75rem',\r\n    transition: 'all 0.2s ease',\r\n    backgroundColor: theme === 'modern' ? '#3b82f6' : '#808080',\r\n    border: `2px solid ${theme === 'modern' ? '#2563eb' : '#666666'}`,\r\n  };\r\n\r\n  const thumbStyle: React.CSSProperties = {\r\n    position: 'absolute',\r\n    top: '0.125rem',\r\n    left: theme === 'modern' ? '0.125rem' : '1.375rem',\r\n    width: '1rem',\r\n    height: '1rem',\r\n    borderRadius: '50%',\r\n    backgroundColor: '#ffffff',\r\n    transition: 'all 0.2s ease',\r\n    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',\r\n  };\r\n\r\n  return (\r\n    <div style={currentStyle} onClick={toggleTheme} className={className} {...props}>\r\n      <span>{theme === 'modern' ? '🎨 Modern' : '🏭 HMI'}</span>\r\n      <div style={toggleStyle}>\r\n        <div style={thumbStyle} />\r\n      </div>\r\n      <span style={{ fontSize: '0.75rem', opacity: 0.8 }}>\r\n        {theme === 'modern' ? 'Industrial Design' : 'High Performance'}\r\n      </span>\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":"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","names":["jsx","jsx","jsxs","useState","jsx","jsxs","selectedOption","useState","jsx","jsxs","useState","useState","useEffect","jsx","jsx","jsxs"]}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@procaaso/alphinity-ui-components",
+  "version": "1.0.0",
+  "access": "public",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "A pilet library for Alphinity branded systems",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "lint": "eslint src --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit",
+    "dev": "vite --config vite.demo.config.ts",
+    "build:demo": "vite build --config vite.demo.config.ts"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "alphinity"
+  ],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.37.0",
+    "@procaaso/pc-piral-instance": "0.8.4",
+    "@procaaso/procaaso-views-client": "^1.0.17",
+    "@tailwindcss/postcss": "^4.1.14",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "@typescript-eslint/eslint-plugin": "^8.46.0",
+    "@typescript-eslint/parser": "^8.46.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.37.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.0",
+    "eslint-plugin-react-refresh": "^0.4.23",
+    "globals": "^16.4.0",
+    "jsdom": "^27.0.0",
+    "piral-cli": "^0.14.29",
+    "piral-cli-webpack5": "^0.14.29",
+    "postcss": "^8.5.6",
+    "prettier": "^3.6.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^4.1.14",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.0",
+    "vite": "^5.4.0",
+    "vitest": "^3.2.4"
+  }
+}