@zendir/ui 0.5.0 → 0.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../src/react/core/inputs/Input.tsx"],"sourcesContent":["/**\n * @zendir/ui - Input Component\n * \n * Text input field following Astro UX Design System with Zendir purple accents.\n * \n * Astro UX Compliance:\n * - Stacked inputs left-justified\n * - Consistent spacing\n * - Help text for validation (not placeholder)\n * - Required/optional indicators\n * - States: default, hover, focus, invalid, disabled\n * \n * Zendir Enhancements:\n * - Purple focus glow\n * - Smooth transitions\n * - Modern glassmorphism effects\n * \n * @example\n * ```tsx\n * <Input label=\"Spacecraft ID\" placeholder=\"Enter ID...\" />\n * <Input label=\"Password\" type=\"password\" />\n * <Input label=\"Search\" icon={<Icon name=\"search\" />} />\n * <Input label=\"Email\" error=\"Invalid email format\" />\n * ```\n */\n\nimport React, { memo, forwardRef, useState, useId } from 'react';\nimport { useTheme } from '../../theme';\nimport { classNames, safeAccentText, type StatusLevel } from '../../utils';\nimport { useBreakpoint } from '../layout/useBreakpoint';\n\nexport type InputSize = 'small' | 'medium' | 'large';\n\n/** Label placement relative to the input field */\nexport type LabelPlacement = 'above' | 'outlined';\n\nexport interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  /** Label text or ReactNode (supports rich content like tooltip icons) */\n  label?: React.ReactNode;\n  /** Helper text below input */\n  helperText?: string;\n  /** Error message (shows error state) */\n  error?: string;\n  /** Size variant */\n  size?: InputSize;\n  /** Status for styling */\n  status?: StatusLevel;\n  /** Icon at start of input */\n  icon?: React.ReactNode;\n  /** Icon at end of input */\n  iconEnd?: React.ReactNode;\n  /** Full width */\n  fullWidth?: boolean;\n  /** Required indicator */\n  required?: boolean;\n  /** Optional indicator (shows \"optional\" text) */\n  optional?: boolean;\n  /** Custom className */\n  className?: string;\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}\n\nexport const Input = memo(forwardRef<HTMLInputElement, InputProps>(function Input(\n  {\n    label,\n    helperText,\n    error,\n    size = 'medium',\n    status,\n    icon,\n    iconEnd,\n    fullWidth = false,\n    required,\n    optional,\n    disabled,\n    className = '',\n    id: propId,\n    style,\n    onFocus,\n    onBlur,\n    labelPlacement = 'outlined',\n    type = 'text',\n    autoComplete,\n    inputMode,\n    onPaste: onPasteUser,\n    ...rest\n  },\n  ref\n): React.ReactElement {\n  // Mobile: email keyboard when type is email (industry standard).\n  const resolvedInputMode = inputMode ?? (type === 'email' ? 'email' : undefined);\n  const { tokens, theme } = useTheme();\n  const { isMobile } = useBreakpoint();\n  const [focused, setFocused] = useState(false);\n  const [hovered, setHovered] = useState(false);\n  const generatedId = useId();\n  const inputId = propId ?? generatedId;\n\n  // Trim pasted content for password, email, and username (industry standard: avoid auth/validation failures).\n  const shouldTrimOnPaste = type === 'password' || type === 'email' || autoComplete === 'email' || autoComplete === 'username';\n  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    if (shouldTrimOnPaste) {\n      const pasted = e.clipboardData.getData('text');\n      const trimmed = pasted.trim();\n      if (trimmed !== pasted) {\n        e.preventDefault();\n        const input = e.currentTarget;\n        const start = input.selectionStart ?? 0;\n        const end = input.selectionEnd ?? 0;\n        const cur = ((rest as { value?: string }).value ?? input.value) ?? '';\n        const newValue = cur.slice(0, start) + trimmed + cur.slice(end);\n        rest.onChange?.({ target: { ...input, value: newValue } } as React.ChangeEvent<HTMLInputElement>);\n        requestAnimationFrame(() => {\n          input.setSelectionRange(start + trimmed.length, start + trimmed.length);\n        });\n      }\n    }\n    onPasteUser?.(e);\n  };\n\n  // Trim on blur for email/username so \" user@example.com \" becomes \"user@example.com\" when leaving the field.\n  const shouldTrimOnBlur = type === 'email' || autoComplete === 'email' || autoComplete === 'username';\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (shouldTrimOnBlur) {\n      const input = e.currentTarget;\n      const cur = input.value;\n      const trimmed = cur.trim();\n      if (trimmed !== cur && rest.onChange) {\n        rest.onChange({ target: { ...input, value: trimmed } } as React.ChangeEvent<HTMLInputElement>);\n      }\n    }\n    setFocused(false);\n    onBlur?.(e);\n  };\n  \n  // Transparent theme detection (purple-hue transparent bg)\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const _transparentInputBg = tokens.colors.interactive.transparentInputBg;\n  \n  const hasError = !!error;\n  const isOutlined = labelPlacement === 'outlined';\n  \n  // Determine border color based on state\n  const getBorder = () => {\n    if (hasError) return tokens.borders.input.error;\n    if (status) return `${tokens.borders.width.thin} solid ${tokens.colors.status[status]}`;\n    if (focused) return tokens.borders.input.focus;\n    if (hovered && !disabled) return tokens.borders.input.hover;\n    return tokens.borders.input.default;\n  };\n  \n  const sizeConfig = {\n    small: {\n      padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n      fontSize: tokens.typography.fontSize.xs,\n      height: tokens.elementSize.sm,\n      iconSize: 14,\n      labelSize: '0.6875rem',\n      outlinedLabelSize: '0.625rem',\n      inputPaddingLeft: 10,\n    },\n    medium: {\n      padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,\n      fontSize: tokens.typography.fontSize.sm,\n      height: tokens.elementSize.md,\n      iconSize: 18,\n      labelSize: '0.75rem',\n      outlinedLabelSize: '0.6875rem',\n      inputPaddingLeft: 12,\n    },\n    large: {\n      padding: `${tokens.spacing.smd} ${tokens.spacing.md}`,\n      fontSize: tokens.typography.fontSize.base,\n      height: tokens.elementSize.lg,\n      iconSize: 20,\n      labelSize: '0.875rem',\n      outlinedLabelSize: '0.75rem',\n      inputPaddingLeft: 16,\n    },\n  };\n  \n  const config = sizeConfig[size];\n  const controlHeight = isMobile ? '44px' : config.height;\n  \n  // Focus glow effect\n  const focusGlow = focused && !hasError\n    ? tokens.borders.focusRing.default\n    : hasError && focused\n    ? `0 0 0 3px ${tokens.colors.status.critical}20`\n    : 'none';\n  \n  // Background for the outlined label \"notch\" (must be opaque to mask the border)\n  const labelBg = isTransparentTheme\n    ? tokens.colors.background.base\n    : tokens.colors.background.surface;\n  \n  // Shared label content (text + required/optional indicators)\n  const labelContent = (\n    <>\n      {label}\n      {required && (\n        <span style={{ color: tokens.colors.status.critical, marginLeft: '2px' }}>*</span>\n      )}\n      {optional && (\n        <span style={{ \n          color: tokens.colors.text.tertiary, \n          fontWeight: 400,\n          fontStyle: 'italic',\n        }}>\n          {' '}(optional)\n        </span>\n      )}\n    </>\n  );\n  \n  return (\n    <div\n      className={classNames('zendir-input-wrapper', className)}\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: tokens.spacing.xs,\n        width: fullWidth ? '100%' : 'auto',\n        minWidth: fullWidth ? undefined : (isMobile ? '100%' : '200px'),\n        ...style,\n      }}\n    >\n      {/* Label: 'above' variant — sits above the input with gap */}\n      {label && !isOutlined && (\n        <label\n          htmlFor={inputId}\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            gap: tokens.spacing.xs,\n            fontSize: config.labelSize,\n            fontWeight: 500,\n            color: tokens.colors.text.secondary,\n            letterSpacing: '0.01em',\n          }}\n        >\n          {labelContent}\n        </label>\n      )}\n      \n      <div\n        style={{\n          position: 'relative',\n          display: 'flex',\n          alignItems: 'center',\n        }}\n        onMouseEnter={() => setHovered(true)}\n        onMouseLeave={() => setHovered(false)}\n      >\n        {/* Label: 'outlined' variant — positioned on the input border */}\n        {label && isOutlined && (\n          <label\n            htmlFor={inputId}\n            style={{\n              position: 'absolute',\n              top: 0,\n              left: icon ? '34px' : `${config.inputPaddingLeft - 6}px`,\n              transform: 'translateY(-50%)',\n              backgroundColor: labelBg,\n              padding: `0 ${tokens.spacing.xs}`,\n              fontSize: config.outlinedLabelSize,\n              fontWeight: 500,\n              color: focused\n                ? (hasError ? tokens.colors.status.critical : tokens.colors.accent.primary)\n                : hasError\n                  ? tokens.colors.status.critical\n                  : tokens.colors.text.secondary,\n              letterSpacing: '0.01em',\n              zIndex: 1,\n              pointerEvents: 'none',\n              transition: 'color 200ms cubic-bezier(0.4, 0, 0.2, 1)',\n              lineHeight: 1.2,\n              whiteSpace: 'nowrap',\n            }}\n          >\n            {labelContent}\n          </label>\n        )}\n        \n        {icon && (\n          <span\n            style={{\n              position: 'absolute',\n              left: tokens.spacing.smd,\n              display: 'flex',\n              alignItems: 'center',\n              color: focused ? safeAccentText(tokens.colors.accent.primary) : tokens.colors.text.tertiary,\n              pointerEvents: 'none',\n              transition: tokens.animation.fast,\n            }}\n          >\n            {icon}\n          </span>\n        )}\n        \n        <input\n          ref={ref}\n          id={inputId}\n          disabled={disabled}\n          required={required}\n          aria-invalid={hasError}\n          aria-describedby={helperText || error ? `${inputId}-helper` : undefined}\n          onFocus={(e) => {\n            setFocused(true);\n            onFocus?.(e);\n          }}\n          onBlur={handleBlur}\n          onPaste={handlePaste}\n          type={type}\n          autoComplete={autoComplete}\n          inputMode={resolvedInputMode}\n          style={{\n            width: '100%',\n            height: controlHeight,\n            padding: config.padding,\n            paddingLeft: icon ? '40px' : config.padding,\n            paddingRight: iconEnd ? '40px' : config.padding,\n            fontSize: config.fontSize,\n            fontFamily: tokens.typography.fontFamily.primary,\n            color: tokens.colors.text.primary,\n            backgroundColor: isTransparentTheme ? 'rgba(10, 15, 25, 0.4)' : tokens.colors.background.surface,\n            border: getBorder(),\n            borderRadius: tokens.borderRadius.md,\n            outline: 'none',\n            transition: 'all 200ms cubic-bezier(0.4, 0, 0.2, 1)',\n            cursor: disabled ? 'not-allowed' : 'text',\n            opacity: disabled ? 0.5 : 1,\n            boxShadow: focusGlow,\n          }}\n          {...rest}\n        />\n        \n        {iconEnd && (\n          <span\n            style={{\n              position: 'absolute',\n              right: tokens.spacing.smd,\n              display: 'flex',\n              alignItems: 'center',\n              color: tokens.colors.text.tertiary,\n              cursor: 'pointer',\n            }}\n          >\n            {iconEnd}\n          </span>\n        )}\n      </div>\n      \n      {(helperText || error) && (\n        <span\n          id={`${inputId}-helper`}\n          role={hasError ? 'alert' : undefined}\n          style={{\n            fontSize: '0.6875rem',\n            fontWeight: hasError ? 500 : 400,\n            color: hasError ? tokens.colors.status.critical : tokens.colors.text.tertiary,\n            display: 'flex',\n            alignItems: 'center',\n            gap: tokens.spacing.xs,\n          }}\n        >\n          {hasError && (\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill={tokens.colors.status.critical} aria-hidden=\"true\" focusable=\"false\">\n              <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/>\n            </svg>\n          )}\n          {error || helperText}\n        </span>\n      )}\n    </div>\n  );\n}));\n\nexport default Input;\n"],"names":["Input"],"mappings":";;;;;AAmEO,MAAM,QAAQ,KAAK,WAAyC,SAASA,OAC1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACL,GACA,KACoB;AAEpB,QAAM,oBAAoB,cAAc,SAAS,UAAU,UAAU;AACrE,QAAM,EAAE,QAAQ,MAAA,IAAU,SAAA;AAC1B,QAAM,EAAE,SAAA,IAAa,cAAA;AACrB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,cAAc,MAAA;AACpB,QAAM,UAAU,UAAU;AAG1B,QAAM,oBAAoB,SAAS,cAAc,SAAS,WAAW,iBAAiB,WAAW,iBAAiB;AAClH,QAAM,cAAc,CAAC,MAA8C;;AACjE,QAAI,mBAAmB;AACrB,YAAM,SAAS,EAAE,cAAc,QAAQ,MAAM;AAC7C,YAAM,UAAU,OAAO,KAAA;AACvB,UAAI,YAAY,QAAQ;AACtB,UAAE,eAAA;AACF,cAAM,QAAQ,EAAE;AAChB,cAAM,QAAQ,MAAM,kBAAkB;AACtC,cAAM,MAAM,MAAM,gBAAgB;AAClC,cAAM,MAAQ,KAA4B,SAAS,MAAM,SAAU;AACnE,cAAM,WAAW,IAAI,MAAM,GAAG,KAAK,IAAI,UAAU,IAAI,MAAM,GAAG;AAC9D,mBAAK,aAAL,8BAAgB,EAAE,QAAQ,EAAE,GAAG,OAAO,OAAO,SAAA;AAC7C,8BAAsB,MAAM;AAC1B,gBAAM,kBAAkB,QAAQ,QAAQ,QAAQ,QAAQ,QAAQ,MAAM;AAAA,QACxE,CAAC;AAAA,MACH;AAAA,IACF;AACA,+CAAc;AAAA,EAChB;AAGA,QAAM,mBAAmB,SAAS,WAAW,iBAAiB,WAAW,iBAAiB;AAC1F,QAAM,aAAa,CAAC,MAA0C;AAC5D,QAAI,kBAAkB;AACpB,YAAM,QAAQ,EAAE;AAChB,YAAM,MAAM,MAAM;AAClB,YAAM,UAAU,IAAI,KAAA;AACpB,UAAI,YAAY,OAAO,KAAK,UAAU;AACpC,aAAK,SAAS,EAAE,QAAQ,EAAE,GAAG,OAAO,OAAO,QAAA,GAAkD;AAAA,MAC/F;AAAA,IACF;AACA,eAAW,KAAK;AAChB,qCAAS;AAAA,EACX;AAGA,QAAM,qBAAqB,UAAU,iBAAiB,UAAU,sBAAsB,UAAU;AACpE,SAAO,OAAO,YAAY;AAEtD,QAAM,WAAW,CAAC,CAAC;AACnB,QAAM,aAAa,mBAAmB;AAGtC,QAAM,YAAY,MAAM;AACtB,QAAI,SAAU,QAAO,OAAO,QAAQ,MAAM;AAC1C,QAAI,OAAQ,QAAO,GAAG,OAAO,QAAQ,MAAM,IAAI,UAAU,OAAO,OAAO,OAAO,MAAM,CAAC;AACrF,QAAI,QAAS,QAAO,OAAO,QAAQ,MAAM;AACzC,QAAI,WAAW,CAAC,SAAU,QAAO,OAAO,QAAQ,MAAM;AACtD,WAAO,OAAO,QAAQ,MAAM;AAAA,EAC9B;AAEA,QAAM,aAAa;AAAA,IACjB,OAAO;AAAA,MACL,SAAS,GAAG,OAAO,QAAQ,EAAE,IAAI,OAAO,QAAQ,EAAE;AAAA,MAClD,UAAU,OAAO,WAAW,SAAS;AAAA,MACrC,QAAQ,OAAO,YAAY;AAAA,MAC3B,UAAU;AAAA,MACV,WAAW;AAAA,MACX,mBAAmB;AAAA,MACnB,kBAAkB;AAAA,IAAA;AAAA,IAEpB,QAAQ;AAAA,MACN,SAAS,GAAG,OAAO,QAAQ,EAAE,IAAI,OAAO,QAAQ,GAAG;AAAA,MACnD,UAAU,OAAO,WAAW,SAAS;AAAA,MACrC,QAAQ,OAAO,YAAY;AAAA,MAC3B,UAAU;AAAA,MACV,WAAW;AAAA,MACX,mBAAmB;AAAA,MACnB,kBAAkB;AAAA,IAAA;AAAA,IAEpB,OAAO;AAAA,MACL,SAAS,GAAG,OAAO,QAAQ,GAAG,IAAI,OAAO,QAAQ,EAAE;AAAA,MACnD,UAAU,OAAO,WAAW,SAAS;AAAA,MACrC,QAAQ,OAAO,YAAY;AAAA,MAC3B,UAAU;AAAA,MACV,WAAW;AAAA,MACX,mBAAmB;AAAA,MACnB,kBAAkB;AAAA,IAAA;AAAA,EACpB;AAGF,QAAM,SAAS,WAAW,IAAI;AAC9B,QAAM,gBAAgB,WAAW,SAAS,OAAO;AAGjD,QAAM,YAAY,WAAW,CAAC,WAC1B,OAAO,QAAQ,UAAU,UACzB,YAAY,UACZ,aAAa,OAAO,OAAO,OAAO,QAAQ,OAC1C;AAGJ,QAAM,UAAU,qBACZ,OAAO,OAAO,WAAW,OACzB,OAAO,OAAO,WAAW;AAG7B,QAAM,eACJ,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA;AAAA,IACA,YACC,oBAAC,QAAA,EAAK,OAAO,EAAE,OAAO,OAAO,OAAO,OAAO,UAAU,YAAY,MAAA,GAAS,UAAA,KAAC;AAAA,IAE5E,YACC,qBAAC,QAAA,EAAK,OAAO;AAAA,MACX,OAAO,OAAO,OAAO,KAAK;AAAA,MAC1B,YAAY;AAAA,MACZ,WAAW;AAAA,IAAA,GAEV,UAAA;AAAA,MAAA;AAAA,MAAI;AAAA,IAAA,EAAA,CACP;AAAA,EAAA,GAEJ;AAGF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,wBAAwB,SAAS;AAAA,MACvD,OAAO;AAAA,QACL,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK,OAAO,QAAQ;AAAA,QACpB,OAAO,YAAY,SAAS;AAAA,QAC5B,UAAU,YAAY,SAAa,WAAW,SAAS;AAAA,QACvD,GAAG;AAAA,MAAA;AAAA,MAIJ,UAAA;AAAA,QAAA,SAAS,CAAC,cACT;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT,OAAO;AAAA,cACL,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,KAAK,OAAO,QAAQ;AAAA,cACpB,UAAU,OAAO;AAAA,cACjB,YAAY;AAAA,cACZ,OAAO,OAAO,OAAO,KAAK;AAAA,cAC1B,eAAe;AAAA,YAAA;AAAA,YAGhB,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAIL;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,SAAS;AAAA,cACT,YAAY;AAAA,YAAA;AAAA,YAEd,cAAc,MAAM,WAAW,IAAI;AAAA,YACnC,cAAc,MAAM,WAAW,KAAK;AAAA,YAGnC,UAAA;AAAA,cAAA,SAAS,cACR;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,SAAS;AAAA,kBACT,OAAO;AAAA,oBACL,UAAU;AAAA,oBACV,KAAK;AAAA,oBACL,MAAM,OAAO,SAAS,GAAG,OAAO,mBAAmB,CAAC;AAAA,oBACpD,WAAW;AAAA,oBACX,iBAAiB;AAAA,oBACjB,SAAS,KAAK,OAAO,QAAQ,EAAE;AAAA,oBAC/B,UAAU,OAAO;AAAA,oBACjB,YAAY;AAAA,oBACZ,OAAO,UACF,WAAW,OAAO,OAAO,OAAO,WAAW,OAAO,OAAO,OAAO,UACjE,WACE,OAAO,OAAO,OAAO,WACrB,OAAO,OAAO,KAAK;AAAA,oBACzB,eAAe;AAAA,oBACf,QAAQ;AAAA,oBACR,eAAe;AAAA,oBACf,YAAY;AAAA,oBACZ,YAAY;AAAA,oBACZ,YAAY;AAAA,kBAAA;AAAA,kBAGb,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAIJ,QACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,OAAO;AAAA,oBACL,UAAU;AAAA,oBACV,MAAM,OAAO,QAAQ;AAAA,oBACrB,SAAS;AAAA,oBACT,YAAY;AAAA,oBACZ,OAAO,UAAU,eAAe,OAAO,OAAO,OAAO,OAAO,IAAI,OAAO,OAAO,KAAK;AAAA,oBACnF,eAAe;AAAA,oBACf,YAAY,OAAO,UAAU;AAAA,kBAAA;AAAA,kBAG9B,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAIL;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA,IAAI;AAAA,kBACJ;AAAA,kBACA;AAAA,kBACA,gBAAc;AAAA,kBACd,oBAAkB,cAAc,QAAQ,GAAG,OAAO,YAAY;AAAA,kBAC9D,SAAS,CAAC,MAAM;AACd,+BAAW,IAAI;AACf,uDAAU;AAAA,kBACZ;AAAA,kBACA,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA,WAAW;AAAA,kBACX,OAAO;AAAA,oBACL,OAAO;AAAA,oBACP,QAAQ;AAAA,oBACR,SAAS,OAAO;AAAA,oBAChB,aAAa,OAAO,SAAS,OAAO;AAAA,oBACpC,cAAc,UAAU,SAAS,OAAO;AAAA,oBACxC,UAAU,OAAO;AAAA,oBACjB,YAAY,OAAO,WAAW,WAAW;AAAA,oBACzC,OAAO,OAAO,OAAO,KAAK;AAAA,oBAC1B,iBAAiB,qBAAqB,0BAA0B,OAAO,OAAO,WAAW;AAAA,oBACzF,QAAQ,UAAA;AAAA,oBACR,cAAc,OAAO,aAAa;AAAA,oBAClC,SAAS;AAAA,oBACT,YAAY;AAAA,oBACZ,QAAQ,WAAW,gBAAgB;AAAA,oBACnC,SAAS,WAAW,MAAM;AAAA,oBAC1B,WAAW;AAAA,kBAAA;AAAA,kBAEZ,GAAG;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGL,WACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,OAAO;AAAA,oBACL,UAAU;AAAA,oBACV,OAAO,OAAO,QAAQ;AAAA,oBACtB,SAAS;AAAA,oBACT,YAAY;AAAA,oBACZ,OAAO,OAAO,OAAO,KAAK;AAAA,oBAC1B,QAAQ;AAAA,kBAAA;AAAA,kBAGT,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH;AAAA,UAAA;AAAA,QAAA;AAAA,SAIF,cAAc,UACd;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,GAAG,OAAO;AAAA,YACd,MAAM,WAAW,UAAU;AAAA,YAC3B,OAAO;AAAA,cACL,UAAU;AAAA,cACV,YAAY,WAAW,MAAM;AAAA,cAC7B,OAAO,WAAW,OAAO,OAAO,OAAO,WAAW,OAAO,OAAO,KAAK;AAAA,cACrE,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,KAAK,OAAO,QAAQ;AAAA,YAAA;AAAA,YAGrB,UAAA;AAAA,cAAA,YACC,oBAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAM,OAAO,OAAO,OAAO,UAAU,eAAY,QAAO,WAAU,SAChH,UAAA,oBAAC,QAAA,EAAK,GAAE,mGAAA,CAAkG,EAAA,CAC5G;AAAA,cAED,SAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC,CAAC;"}
+{"version":3,"file":"Input.js","names":[],"sources":["../../../../src/react/core/inputs/Input.tsx"],"sourcesContent":["/**\n * @zendir/ui - Input Component\n *\n * Text input field following Astro UX Design System with Zendir purple accents.\n *\n * Astro UX Compliance:\n * - Stacked inputs left-justified\n * - Consistent spacing\n * - Help text for validation (not placeholder)\n * - Required/optional indicators\n * - States: default, hover, focus, invalid, disabled\n *\n * Zendir Enhancements:\n * - Purple focus glow\n * - Smooth transitions\n * - Modern glassmorphism effects\n *\n * @example\n * ```tsx\n * <Input label=\"Spacecraft ID\" placeholder=\"Enter ID...\" />\n * <Input label=\"Password\" type=\"password\" />\n * <Input label=\"Search\" icon={<Icon name=\"search\" />} />\n * <Input label=\"Email\" error=\"Invalid email format\" />\n * ```\n */\n\nimport React, { memo, forwardRef, useState, useId } from \"react\";\nimport { useTheme } from \"../../theme\";\nimport { classNames, safeAccentText, type StatusLevel } from \"../../utils\";\nimport { useBreakpoint } from \"../layout/useBreakpoint\";\n\nexport type InputSize = \"small\" | \"medium\" | \"large\";\n\n/** Label placement relative to the input field */\nexport type LabelPlacement = \"above\" | \"outlined\";\n\nexport interface InputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  \"size\"\n> {\n  /** Label text or ReactNode (supports rich content like tooltip icons) */\n  label?: React.ReactNode;\n  /** Helper text below input */\n  helperText?: string;\n  /** Error message (shows error state) */\n  error?: string;\n  /** Size variant */\n  size?: InputSize;\n  /** Status for styling */\n  status?: StatusLevel;\n  /** Icon at start of input */\n  icon?: React.ReactNode;\n  /** Icon at end of input */\n  iconEnd?: React.ReactNode;\n  /** Full width */\n  fullWidth?: boolean;\n  /** Required indicator */\n  required?: boolean;\n  /** Optional indicator (shows \"optional\" text) */\n  optional?: boolean;\n  /** Custom className */\n  className?: string;\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}\n\nexport const Input = memo(\n  forwardRef<HTMLInputElement, InputProps>(function Input(\n    {\n      label,\n      helperText,\n      error,\n      size = \"medium\",\n      status,\n      icon,\n      iconEnd,\n      fullWidth = false,\n      required,\n      optional,\n      disabled,\n      className = \"\",\n      id: propId,\n      style,\n      onFocus,\n      onBlur,\n      labelPlacement = \"outlined\",\n      type = \"text\",\n      autoComplete,\n      inputMode,\n      onPaste: onPasteUser,\n      ...rest\n    },\n    ref,\n  ): React.ReactElement {\n    // Mobile: email keyboard when type is email (industry standard).\n    const resolvedInputMode =\n      inputMode ?? (type === \"email\" ? \"email\" : undefined);\n    const { tokens, theme } = useTheme();\n    const { isMobile } = useBreakpoint();\n    const [focused, setFocused] = useState(false);\n    const [hovered, setHovered] = useState(false);\n    const generatedId = useId();\n    const inputId = propId ?? generatedId;\n\n    // Trim pasted content for password, email, and username (industry standard: avoid auth/validation failures).\n    const shouldTrimOnPaste =\n      type === \"password\" ||\n      type === \"email\" ||\n      autoComplete === \"email\" ||\n      autoComplete === \"username\";\n    const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n      if (shouldTrimOnPaste) {\n        const pasted = e.clipboardData.getData(\"text\");\n        const trimmed = pasted.trim();\n        if (trimmed !== pasted) {\n          e.preventDefault();\n          const input = e.currentTarget;\n          const start = input.selectionStart ?? 0;\n          const end = input.selectionEnd ?? 0;\n          const cur = (rest as { value?: string }).value ?? input.value ?? \"\";\n          const newValue = cur.slice(0, start) + trimmed + cur.slice(end);\n          rest.onChange?.({\n            target: { ...input, value: newValue },\n          } as React.ChangeEvent<HTMLInputElement>);\n          requestAnimationFrame(() => {\n            input.setSelectionRange(\n              start + trimmed.length,\n              start + trimmed.length,\n            );\n          });\n        }\n      }\n      onPasteUser?.(e);\n    };\n\n    // Trim on blur for email/username so \" user@example.com \" becomes \"user@example.com\" when leaving the field.\n    const shouldTrimOnBlur =\n      type === \"email\" ||\n      autoComplete === \"email\" ||\n      autoComplete === \"username\";\n    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n      if (shouldTrimOnBlur) {\n        const input = e.currentTarget;\n        const cur = input.value;\n        const trimmed = cur.trim();\n        if (trimmed !== cur && rest.onChange) {\n          rest.onChange({\n            target: { ...input, value: trimmed },\n          } as React.ChangeEvent<HTMLInputElement>);\n        }\n      }\n      setFocused(false);\n      onBlur?.(e);\n    };\n\n    // Transparent theme detection (purple-hue transparent bg)\n    const isTransparentTheme =\n      theme === \"transparent\" ||\n      theme === \"transparent-bold\" ||\n      theme === \"transparent-minimal\";\n    const _transparentInputBg = tokens.colors.interactive.transparentInputBg;\n\n    const hasError = !!error;\n    const isOutlined = labelPlacement === \"outlined\";\n\n    // Determine border color based on state\n    const getBorder = () => {\n      if (hasError) return tokens.borders.input.error;\n      if (status)\n        return `${tokens.borders.width.thin} solid ${tokens.colors.status[status]}`;\n      if (focused) return tokens.borders.input.focus;\n      if (hovered && !disabled) return tokens.borders.input.hover;\n      return tokens.borders.input.default;\n    };\n\n    const sizeConfig = {\n      small: {\n        padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n        fontSize: tokens.typography.fontSize.xs,\n        height: tokens.elementSize.sm,\n        iconSize: 14,\n        labelSize: \"0.6875rem\",\n        outlinedLabelSize: \"0.625rem\",\n        inputPaddingLeft: 10,\n      },\n      medium: {\n        padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,\n        fontSize: tokens.typography.fontSize.sm,\n        height: tokens.elementSize.md,\n        iconSize: 18,\n        labelSize: \"0.75rem\",\n        outlinedLabelSize: \"0.6875rem\",\n        inputPaddingLeft: 12,\n      },\n      large: {\n        padding: `${tokens.spacing.smd} ${tokens.spacing.md}`,\n        fontSize: tokens.typography.fontSize.base,\n        height: tokens.elementSize.lg,\n        iconSize: 20,\n        labelSize: \"0.875rem\",\n        outlinedLabelSize: \"0.75rem\",\n        inputPaddingLeft: 16,\n      },\n    };\n\n    const config = sizeConfig[size];\n    const controlHeight = isMobile ? \"44px\" : config.height;\n\n    // Focus glow effect\n    const focusGlow =\n      focused && !hasError\n        ? tokens.borders.focusRing.default\n        : hasError && focused\n          ? `0 0 0 3px ${tokens.colors.status.critical}20`\n          : \"none\";\n\n    // Background for the outlined label \"notch\" (must be opaque to mask the border)\n    const labelBg = isTransparentTheme\n      ? tokens.colors.background.base\n      : tokens.colors.background.surface;\n\n    // Shared label content (text + required/optional indicators)\n    const labelContent = (\n      <>\n        {label}\n        {required && (\n          <span\n            style={{ color: tokens.colors.status.critical, marginLeft: \"2px\" }}\n          >\n            *\n          </span>\n        )}\n        {optional && (\n          <span\n            style={{\n              color: tokens.colors.text.tertiary,\n              fontWeight: 400,\n              fontStyle: \"italic\",\n            }}\n          >\n            {\" \"}\n            (optional)\n          </span>\n        )}\n      </>\n    );\n\n    return (\n      <div\n        className={classNames(\"zendir-input-wrapper\", className)}\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: tokens.spacing.xs,\n          width: fullWidth ? \"100%\" : \"auto\",\n          minWidth: fullWidth ? undefined : isMobile ? \"100%\" : \"200px\",\n          ...style,\n        }}\n      >\n        {/* Label: 'above' variant — sits above the input with gap */}\n        {label && !isOutlined && (\n          <label\n            htmlFor={inputId}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: tokens.spacing.xs,\n              fontSize: config.labelSize,\n              fontWeight: 500,\n              color: tokens.colors.text.secondary,\n              letterSpacing: \"0.01em\",\n            }}\n          >\n            {labelContent}\n          </label>\n        )}\n\n        <div\n          style={{\n            position: \"relative\",\n            display: \"flex\",\n            alignItems: \"center\",\n          }}\n          onMouseEnter={() => setHovered(true)}\n          onMouseLeave={() => setHovered(false)}\n        >\n          {/* Label: 'outlined' variant — positioned on the input border */}\n          {label && isOutlined && (\n            <label\n              htmlFor={inputId}\n              style={{\n                position: \"absolute\",\n                top: 0,\n                left: icon ? \"34px\" : `${config.inputPaddingLeft - 6}px`,\n                transform: \"translateY(-50%)\",\n                backgroundColor: labelBg,\n                padding: `0 ${tokens.spacing.xs}`,\n                fontSize: config.outlinedLabelSize,\n                fontWeight: 500,\n                color: focused\n                  ? hasError\n                    ? tokens.colors.status.critical\n                    : tokens.colors.accent.primary\n                  : hasError\n                    ? tokens.colors.status.critical\n                    : tokens.colors.text.secondary,\n                letterSpacing: \"0.01em\",\n                zIndex: 1,\n                pointerEvents: \"none\",\n                transition: \"color 200ms cubic-bezier(0.4, 0, 0.2, 1)\",\n                lineHeight: 1.2,\n                whiteSpace: \"nowrap\",\n              }}\n            >\n              {labelContent}\n            </label>\n          )}\n\n          {icon && (\n            <span\n              style={{\n                position: \"absolute\",\n                left: tokens.spacing.smd,\n                display: \"flex\",\n                alignItems: \"center\",\n                color: focused\n                  ? safeAccentText(tokens.colors.accent.primary)\n                  : tokens.colors.text.tertiary,\n                pointerEvents: \"none\",\n                transition: tokens.animation.fast,\n              }}\n            >\n              {icon}\n            </span>\n          )}\n\n          <input\n            ref={ref}\n            id={inputId}\n            disabled={disabled}\n            required={required}\n            aria-invalid={hasError}\n            aria-describedby={\n              helperText || error ? `${inputId}-helper` : undefined\n            }\n            onFocus={(e) => {\n              setFocused(true);\n              onFocus?.(e);\n            }}\n            onBlur={handleBlur}\n            onPaste={handlePaste}\n            type={type}\n            autoComplete={autoComplete}\n            inputMode={resolvedInputMode}\n            style={{\n              width: \"100%\",\n              height: controlHeight,\n              padding: config.padding,\n              paddingLeft: icon ? \"40px\" : config.padding,\n              paddingRight: iconEnd ? \"40px\" : config.padding,\n              fontSize: config.fontSize,\n              fontFamily: tokens.typography.fontFamily.primary,\n              color: tokens.colors.text.primary,\n              backgroundColor: isTransparentTheme\n                ? \"rgba(10, 15, 25, 0.4)\"\n                : tokens.colors.background.surface,\n              border: getBorder(),\n              borderRadius: tokens.borderRadius.md,\n              outline: \"none\",\n              transition: \"all 200ms cubic-bezier(0.4, 0, 0.2, 1)\",\n              cursor: disabled ? \"not-allowed\" : \"text\",\n              opacity: disabled ? 0.5 : 1,\n              boxShadow: focusGlow,\n            }}\n            {...rest}\n          />\n\n          {iconEnd && (\n            <span\n              style={{\n                position: \"absolute\",\n                right: tokens.spacing.smd,\n                display: \"flex\",\n                alignItems: \"center\",\n                color: tokens.colors.text.tertiary,\n                cursor: \"pointer\",\n              }}\n            >\n              {iconEnd}\n            </span>\n          )}\n        </div>\n\n        {(helperText || error) && (\n          <span\n            id={`${inputId}-helper`}\n            role={hasError ? \"alert\" : undefined}\n            style={{\n              fontSize: \"0.6875rem\",\n              fontWeight: hasError ? 500 : 400,\n              color: hasError\n                ? tokens.colors.status.critical\n                : tokens.colors.text.tertiary,\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: tokens.spacing.xs,\n            }}\n          >\n            {hasError && (\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 24 24\"\n                fill={tokens.colors.status.critical}\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" />\n              </svg>\n            )}\n            {error || helperText}\n          </span>\n        )}\n      </div>\n    );\n  }),\n);\n\nexport default Input;\n"],"mappings":"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"}

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

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
-
-export type LimitsState = 'red_low' | 'yellow_low' | 'green' | 'yellow_high' | 'red_high' | 'blue' | 'stale';
+export type LimitsState = "red_low" | "yellow_low" | "green" | "yellow_high" | "red_high" | "blue" | "stale";
 export interface LimitsBarProps {
     /** Current value */
     value: number;

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

@@ -1,200 +1,275 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useMemo } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/inputs/LimitsBar.tsx
+/**
+* @zendir/ui - LimitsBar Component
+*
+* Visual limits indicator for telemetry monitoring and spacecraft health assessment.
+* Displays a horizontal bar with colored zones (red-low, yellow-low, green, yellow-high, red-high)
+* and a marker showing the current value position within the range.
+*
+* Supports:
+* - 5-zone limits (red-low, yellow-low, green/normal, yellow-high, red-high)
+* - 3-zone limits (low, nominal, high)
+* - Blue zone for "out of range" / stale
+* - Animated value transitions
+* - Compact and full display modes
+* - Value label with units
+* - Configurable thresholds
+*
+* Astro UX Compliance:
+* - Uses official Astro status colors
+* - Consistent with Astro monitoring patterns
+*
+* @example
+* ```tsx
+* <LimitsBar
+*   value={72.5}
+*   redLow={10} yellowLow={25} greenLow={40}
+*   greenHigh={80} yellowHigh={90} redHigh={100}
+*   label="Temperature" unit="°C"
+* />
+* ```
+*/
 function getLimitsState(value, redLow, yellowLow, greenLow, greenHigh, yellowHigh, redHigh) {
-  if (redLow !== void 0 && value < redLow) return "red_low";
-  if (yellowLow !== void 0 && value < yellowLow) return "yellow_low";
-  if (greenLow !== void 0 && value < greenLow) return "yellow_low";
-  if (redHigh !== void 0 && value > redHigh) return "red_high";
-  if (yellowHigh !== void 0 && value > yellowHigh) return "yellow_high";
-  if (greenHigh !== void 0 && value > greenHigh) return "yellow_high";
-  return "green";
+	if (redLow !== void 0 && value < redLow) return "red_low";
+	if (yellowLow !== void 0 && value < yellowLow) return "yellow_low";
+	if (greenLow !== void 0 && value < greenLow) return "yellow_low";
+	if (redHigh !== void 0 && value > redHigh) return "red_high";
+	if (yellowHigh !== void 0 && value > yellowHigh) return "yellow_high";
+	if (greenHigh !== void 0 && value > greenHigh) return "yellow_high";
+	return "green";
 }
-const LimitsBar = memo(function LimitsBar2({
-  value,
-  redLow: redLowProp,
-  yellowLow: yellowLowProp,
-  greenLow: greenLowProp,
-  greenHigh: greenHighProp,
-  yellowHigh: yellowHighProp,
-  redHigh: redHighProp,
-  min: minProp,
-  max: maxProp,
-  label,
-  unit,
-  stale = false,
-  compact = false,
-  showValue = true,
-  showThresholds = false,
-  showLower = true,
-  showUpper = true,
-  width = "100%",
-  barHeight: barHeightProp,
-  statusOverride,
-  className = ""
-}) {
-  const redLow = showLower ? redLowProp : void 0;
-  const yellowLow = showLower ? yellowLowProp : void 0;
-  const greenLow = showLower ? greenLowProp : void 0;
-  const greenHigh = showUpper ? greenHighProp : void 0;
-  const yellowHigh = showUpper ? yellowHighProp : void 0;
-  const redHigh = showUpper ? redHighProp : void 0;
-  const { tokens } = useTheme();
-  const softStatusColors = useMemo(() => ({
-    normal: tokens.colors.status.normal,
-    caution: tokens.colors.status.caution,
-    serious: tokens.colors.status.serious,
-    critical: tokens.colors.status.critical,
-    off: tokens.colors.status.off,
-    standby: tokens.colors.status.standby
-  }), [tokens]);
-  const barHeight = barHeightProp ?? (compact ? 12 : 20);
-  useMemo(() => {
-    const rl = redLow ?? -Infinity;
-    const yl = yellowLow ?? redLow ?? -Infinity;
-    const gl = greenLow ?? yellowLow ?? redLow ?? -Infinity;
-    const gh = greenHigh ?? yellowHigh ?? redHigh ?? Infinity;
-    const yh = yellowHigh ?? redHigh ?? Infinity;
-    const rh = redHigh ?? Infinity;
-    return { rl, yl, gl, gh, yh, rh };
-  }, [redLow, yellowLow, greenLow, greenHigh, yellowHigh, redHigh]);
-  const rangeMin = minProp ?? (redLow !== void 0 ? redLow - (redHigh !== void 0 ? (redHigh - redLow) * 0.1 : 10) : 0);
-  const rangeMax = maxProp ?? (redHigh !== void 0 ? redHigh + (redLow !== void 0 ? (redHigh - redLow) * 0.1 : 10) : 100);
-  const range = rangeMax - rangeMin;
-  const status = stale ? "stale" : statusOverride ?? getLimitsState(value, redLow, yellowLow, greenLow, greenHigh, yellowHigh, redHigh);
-  const statusColors = {
-    red_low: softStatusColors.critical,
-    red_high: softStatusColors.critical,
-    yellow_low: softStatusColors.caution,
-    yellow_high: softStatusColors.caution,
-    green: softStatusColors.normal,
-    blue: softStatusColors.standby,
-    stale: softStatusColors.off
-  };
-  const valuePercent = range > 0 ? Math.max(0, Math.min(100, (value - rangeMin) / range * 100)) : 50;
-  const zones = useMemo(() => {
-    const segs = [];
-    const toPercent = (v) => Math.max(0, Math.min(100, (v - rangeMin) / range * 100));
-    const critical = softStatusColors.critical;
-    const caution = softStatusColors.caution;
-    const normal = softStatusColors.normal;
-    if (redLow !== void 0) {
-      segs.push({ start: 0, end: toPercent(redLow), color: `${critical}66` });
-    }
-    if (yellowLow !== void 0) {
-      const s = redLow !== void 0 ? toPercent(redLow) : 0;
-      segs.push({ start: s, end: toPercent(yellowLow), color: `${caution}66` });
-    }
-    {
-      const s = yellowLow !== void 0 ? toPercent(yellowLow) : redLow !== void 0 ? toPercent(redLow) : 0;
-      const e = yellowHigh !== void 0 ? toPercent(yellowHigh) : redHigh !== void 0 ? toPercent(redHigh) : 100;
-      segs.push({ start: s, end: e, color: `${normal}44` });
-    }
-    if (yellowHigh !== void 0) {
-      const e = redHigh !== void 0 ? toPercent(redHigh) : 100;
-      segs.push({ start: toPercent(yellowHigh), end: e, color: `${caution}66` });
-    }
-    if (redHigh !== void 0) {
-      segs.push({ start: toPercent(redHigh), end: 100, color: `${critical}66` });
-    }
-    return segs;
-  }, [redLow, yellowLow, yellowHigh, redHigh, rangeMin, range, softStatusColors]);
-  const markerColor = statusColors[status];
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `limits-bar ${className}`,
-      role: "meter",
-      "aria-valuenow": value,
-      "aria-valuemin": rangeMin,
-      "aria-valuemax": rangeMax,
-      "aria-label": label ? `${label}: ${value}${unit ? " " + unit : ""}` : `${value}${unit ? " " + unit : ""}`,
-      style: { width, fontFamily: tokens.typography.fontFamily.primary },
-      children: [
-        (label || showValue) && !compact && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: tokens.spacing.xs, fontSize: tokens.typography.fontSize.sm }, children: [
-          label && /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.secondary, fontWeight: tokens.typography.fontWeight.medium }, children: label }),
-          showValue && /* @__PURE__ */ jsxs("span", { style: { color: markerColor, fontWeight: tokens.typography.fontWeight.medium, fontFamily: tokens.typography.fontFamily.mono }, children: [
-            typeof value === "number" ? value.toFixed(2) : value,
-            unit && /* @__PURE__ */ jsx("span", { style: { fontSize: tokens.typography.fontSize.xxs, marginLeft: tokens.spacing.xxs, color: tokens.colors.text.muted }, children: unit })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { style: {
-          position: "relative",
-          height: barHeight,
-          borderRadius: tokens.borderRadius.full,
-          background: tokens.colors.background.base,
-          border: `1px solid ${tokens.colors.border.muted}`,
-          overflow: "hidden"
-        }, children: [
-          zones.map((z, i) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                left: `${z.start}%`,
-                width: `${z.end - z.start}%`,
-                height: "100%",
-                background: z.color
-              }
-            },
-            i
-          )),
-          /* @__PURE__ */ jsx("div", { style: {
-            position: "absolute",
-            left: `${valuePercent}%`,
-            top: 0,
-            bottom: 0,
-            width: compact ? 3 : 4,
-            marginLeft: compact ? -1.5 : -2,
-            background: markerColor,
-            borderRadius: tokens.borderRadius.sm,
-            boxShadow: `0 0 8px ${markerColor}66, 0 0 3px ${markerColor}44`,
-            transition: "left 300ms cubic-bezier(0.4, 0, 0.2, 1), background 300ms ease"
-          } }),
-          compact && showValue && /* @__PURE__ */ jsxs("div", { style: {
-            position: "absolute",
-            right: tokens.spacing.xs,
-            top: "50%",
-            transform: "translateY(-50%)",
-            fontSize: tokens.typography.fontSize.micro,
-            fontWeight: tokens.typography.fontWeight.medium,
-            color: markerColor,
-            fontFamily: tokens.typography.fontFamily.mono,
-            textShadow: `0 0 4px ${tokens.colors.background.base}`
-          }, children: [
-            typeof value === "number" ? value.toFixed(1) : value,
-            unit || ""
-          ] })
-        ] }),
-        showThresholds && !compact && /* @__PURE__ */ jsx("div", { style: { position: "relative", height: 14, marginTop: tokens.spacing.xxs }, children: [
-          { val: redLow, color: softStatusColors.critical },
-          { val: yellowLow, color: softStatusColors.caution },
-          { val: greenHigh ?? yellowHigh, color: softStatusColors.caution },
-          { val: redHigh, color: softStatusColors.critical }
-        ].filter((t) => t.val !== void 0).map((t, i) => {
-          const pct = range > 0 ? (t.val - rangeMin) / range * 100 : 0;
-          return /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-label": `Threshold: ${t.val}`,
-              style: {
-                position: "absolute",
-                left: `${pct}%`,
-                transform: "translateX(-50%)",
-                fontSize: tokens.typography.fontSize.micro,
-                color: t.color,
-                fontFamily: tokens.typography.fontFamily.mono
-              },
-              children: t.val
-            },
-            i
-          );
-        }) })
-      ]
-    }
-  );
+var LimitsBar = memo(function LimitsBar({ value, redLow: redLowProp, yellowLow: yellowLowProp, greenLow: greenLowProp, greenHigh: greenHighProp, yellowHigh: yellowHighProp, redHigh: redHighProp, min: minProp, max: maxProp, label, unit, stale = false, compact = false, showValue = true, showThresholds = false, showLower = true, showUpper = true, width = "100%", barHeight: barHeightProp, statusOverride, className = "" }) {
+	const redLow = showLower ? redLowProp : void 0;
+	const yellowLow = showLower ? yellowLowProp : void 0;
+	const greenLow = showLower ? greenLowProp : void 0;
+	const greenHigh = showUpper ? greenHighProp : void 0;
+	const yellowHigh = showUpper ? yellowHighProp : void 0;
+	const redHigh = showUpper ? redHighProp : void 0;
+	const { tokens } = useTheme();
+	const softStatusColors = useMemo(() => ({
+		normal: tokens.colors.status.normal,
+		caution: tokens.colors.status.caution,
+		serious: tokens.colors.status.serious,
+		critical: tokens.colors.status.critical,
+		off: tokens.colors.status.off,
+		standby: tokens.colors.status.standby
+	}), [tokens]);
+	const barHeight = barHeightProp ?? (compact ? 12 : 20);
+	useMemo(() => {
+		return {
+			rl: redLow ?? -Infinity,
+			yl: yellowLow ?? redLow ?? -Infinity,
+			gl: greenLow ?? yellowLow ?? redLow ?? -Infinity,
+			gh: greenHigh ?? yellowHigh ?? redHigh ?? Infinity,
+			yh: yellowHigh ?? redHigh ?? Infinity,
+			rh: redHigh ?? Infinity
+		};
+	}, [
+		redLow,
+		yellowLow,
+		greenLow,
+		greenHigh,
+		yellowHigh,
+		redHigh
+	]);
+	const rangeMin = minProp ?? (redLow !== void 0 ? redLow - (redHigh !== void 0 ? (redHigh - redLow) * .1 : 10) : 0);
+	const rangeMax = maxProp ?? (redHigh !== void 0 ? redHigh + (redLow !== void 0 ? (redHigh - redLow) * .1 : 10) : 100);
+	const range = rangeMax - rangeMin;
+	const status = stale ? "stale" : statusOverride ?? getLimitsState(value, redLow, yellowLow, greenLow, greenHigh, yellowHigh, redHigh);
+	const statusColors = {
+		red_low: softStatusColors.critical,
+		red_high: softStatusColors.critical,
+		yellow_low: softStatusColors.caution,
+		yellow_high: softStatusColors.caution,
+		green: softStatusColors.normal,
+		blue: softStatusColors.standby,
+		stale: softStatusColors.off
+	};
+	const valuePercent = range > 0 ? Math.max(0, Math.min(100, (value - rangeMin) / range * 100)) : 50;
+	const zones = useMemo(() => {
+		const segs = [];
+		const toPercent = (v) => Math.max(0, Math.min(100, (v - rangeMin) / range * 100));
+		const critical = softStatusColors.critical;
+		const caution = softStatusColors.caution;
+		const normal = softStatusColors.normal;
+		if (redLow !== void 0) segs.push({
+			start: 0,
+			end: toPercent(redLow),
+			color: `${critical}66`
+		});
+		if (yellowLow !== void 0) {
+			const s = redLow !== void 0 ? toPercent(redLow) : 0;
+			segs.push({
+				start: s,
+				end: toPercent(yellowLow),
+				color: `${caution}66`
+			});
+		}
+		{
+			const s = yellowLow !== void 0 ? toPercent(yellowLow) : redLow !== void 0 ? toPercent(redLow) : 0;
+			const e = yellowHigh !== void 0 ? toPercent(yellowHigh) : redHigh !== void 0 ? toPercent(redHigh) : 100;
+			segs.push({
+				start: s,
+				end: e,
+				color: `${normal}44`
+			});
+		}
+		if (yellowHigh !== void 0) {
+			const e = redHigh !== void 0 ? toPercent(redHigh) : 100;
+			segs.push({
+				start: toPercent(yellowHigh),
+				end: e,
+				color: `${caution}66`
+			});
+		}
+		if (redHigh !== void 0) segs.push({
+			start: toPercent(redHigh),
+			end: 100,
+			color: `${critical}66`
+		});
+		return segs;
+	}, [
+		redLow,
+		yellowLow,
+		yellowHigh,
+		redHigh,
+		rangeMin,
+		range,
+		softStatusColors
+	]);
+	const markerColor = statusColors[status];
+	return /* @__PURE__ */ jsxs("div", {
+		className: `limits-bar ${className}`,
+		role: "meter",
+		"aria-valuenow": value,
+		"aria-valuemin": rangeMin,
+		"aria-valuemax": rangeMax,
+		"aria-label": label ? `${label}: ${value}${unit ? " " + unit : ""}` : `${value}${unit ? " " + unit : ""}`,
+		style: {
+			width,
+			fontFamily: tokens.typography.fontFamily.primary
+		},
+		children: [
+			(label || showValue) && !compact && /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					justifyContent: "space-between",
+					marginBottom: tokens.spacing.xs,
+					fontSize: tokens.typography.fontSize.sm
+				},
+				children: [label && /* @__PURE__ */ jsx("span", {
+					style: {
+						color: tokens.colors.text.secondary,
+						fontWeight: tokens.typography.fontWeight.medium
+					},
+					children: label
+				}), showValue && /* @__PURE__ */ jsxs("span", {
+					style: {
+						color: markerColor,
+						fontWeight: tokens.typography.fontWeight.medium,
+						fontFamily: tokens.typography.fontFamily.mono
+					},
+					children: [typeof value === "number" ? value.toFixed(2) : value, unit && /* @__PURE__ */ jsx("span", {
+						style: {
+							fontSize: tokens.typography.fontSize.xxs,
+							marginLeft: tokens.spacing.xxs,
+							color: tokens.colors.text.muted
+						},
+						children: unit
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					position: "relative",
+					height: barHeight,
+					borderRadius: tokens.borderRadius.full,
+					background: tokens.colors.background.base,
+					border: `1px solid ${tokens.colors.border.muted}`,
+					overflow: "hidden"
+				},
+				children: [
+					zones.map((z, i) => /* @__PURE__ */ jsx("div", { style: {
+						position: "absolute",
+						left: `${z.start}%`,
+						width: `${z.end - z.start}%`,
+						height: "100%",
+						background: z.color
+					} }, i)),
+					/* @__PURE__ */ jsx("div", { style: {
+						position: "absolute",
+						left: `${valuePercent}%`,
+						top: 0,
+						bottom: 0,
+						width: compact ? 3 : 4,
+						marginLeft: compact ? -1.5 : -2,
+						background: markerColor,
+						borderRadius: tokens.borderRadius.sm,
+						boxShadow: `0 0 8px ${markerColor}66, 0 0 3px ${markerColor}44`,
+						transition: "left 300ms cubic-bezier(0.4, 0, 0.2, 1), background 300ms ease"
+					} }),
+					compact && showValue && /* @__PURE__ */ jsxs("div", {
+						style: {
+							position: "absolute",
+							right: tokens.spacing.xs,
+							top: "50%",
+							transform: "translateY(-50%)",
+							fontSize: tokens.typography.fontSize.micro,
+							fontWeight: tokens.typography.fontWeight.medium,
+							color: markerColor,
+							fontFamily: tokens.typography.fontFamily.mono,
+							textShadow: `0 0 4px ${tokens.colors.background.base}`
+						},
+						children: [typeof value === "number" ? value.toFixed(1) : value, unit || ""]
+					})
+				]
+			}),
+			showThresholds && !compact && /* @__PURE__ */ jsx("div", {
+				style: {
+					position: "relative",
+					height: 14,
+					marginTop: tokens.spacing.xxs
+				},
+				children: [
+					{
+						val: redLow,
+						color: softStatusColors.critical
+					},
+					{
+						val: yellowLow,
+						color: softStatusColors.caution
+					},
+					{
+						val: greenHigh ?? yellowHigh,
+						color: softStatusColors.caution
+					},
+					{
+						val: redHigh,
+						color: softStatusColors.critical
+					}
+				].filter((t) => t.val !== void 0).map((t, i) => {
+					const pct = range > 0 ? (t.val - rangeMin) / range * 100 : 0;
+					return /* @__PURE__ */ jsx("span", {
+						"aria-label": `Threshold: ${t.val}`,
+						style: {
+							position: "absolute",
+							left: `${pct}%`,
+							transform: "translateX(-50%)",
+							fontSize: tokens.typography.fontSize.micro,
+							color: t.color,
+							fontFamily: tokens.typography.fontFamily.mono
+						},
+						children: t.val
+					}, i);
+				})
+			})
+		]
+	});
 });
-export {
-  LimitsBar
-};
-//# sourceMappingURL=LimitsBar.js.map
+//#endregion
+export { LimitsBar, LimitsBar as default };
+
+//# sourceMappingURL=LimitsBar.js.map