@zendir/ui 0.1.0

package/dist/react/core/Input.js

@@ -0,0 +1,288 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { memo, forwardRef, useState, useId } from "react";
+import { safeAccentText, classNames } from "../utils/index.js";
+import { useBreakpoint } from "./layout/useBreakpoint.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const Input = memo(forwardRef(function Input2({
+  label,
+  helperText,
+  error,
+  size = "medium",
+  status,
+  icon,
+  iconEnd,
+  fullWidth = false,
+  required,
+  optional,
+  disabled,
+  className = "",
+  id: propId,
+  style,
+  onFocus,
+  onBlur,
+  labelPlacement = "outlined",
+  type = "text",
+  autoComplete,
+  inputMode,
+  onPaste: onPasteUser,
+  ...rest
+}, ref) {
+  const resolvedInputMode = inputMode ?? (type === "email" ? "email" : void 0);
+  const { tokens, theme } = useTheme();
+  const { isMobile } = useBreakpoint();
+  const [focused, setFocused] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const generatedId = useId();
+  const inputId = propId ?? generatedId;
+  const shouldTrimOnPaste = type === "password" || type === "email" || autoComplete === "email" || autoComplete === "username";
+  const handlePaste = (e) => {
+    var _a;
+    if (shouldTrimOnPaste) {
+      const pasted = e.clipboardData.getData("text");
+      const trimmed = pasted.trim();
+      if (trimmed !== pasted) {
+        e.preventDefault();
+        const input = e.currentTarget;
+        const start = input.selectionStart ?? 0;
+        const end = input.selectionEnd ?? 0;
+        const cur = rest.value ?? input.value ?? "";
+        const newValue = cur.slice(0, start) + trimmed + cur.slice(end);
+        (_a = rest.onChange) == null ? void 0 : _a.call(rest, { target: { ...input, value: newValue } });
+        requestAnimationFrame(() => {
+          input.setSelectionRange(start + trimmed.length, start + trimmed.length);
+        });
+      }
+    }
+    onPasteUser == null ? void 0 : onPasteUser(e);
+  };
+  const shouldTrimOnBlur = type === "email" || autoComplete === "email" || autoComplete === "username";
+  const handleBlur = (e) => {
+    if (shouldTrimOnBlur) {
+      const input = e.currentTarget;
+      const cur = input.value;
+      const trimmed = cur.trim();
+      if (trimmed !== cur && rest.onChange) {
+        rest.onChange({ target: { ...input, value: trimmed } });
+      }
+    }
+    setFocused(false);
+    onBlur == null ? void 0 : onBlur(e);
+  };
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  tokens.colors.interactive.transparentInputBg;
+  const hasError = !!error;
+  const isOutlined = labelPlacement === "outlined";
+  const getBorder = () => {
+    if (hasError) return tokens.borders.input.error;
+    if (status) return `${tokens.borders.width.thin} solid ${tokens.colors.status[status]}`;
+    if (focused) return tokens.borders.input.focus;
+    if (hovered && !disabled) return tokens.borders.input.hover;
+    return tokens.borders.input.default;
+  };
+  const sizeConfig = {
+    small: {
+      padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+      fontSize: tokens.typography.fontSize.xs,
+      height: tokens.elementSize.sm,
+      iconSize: 14,
+      labelSize: "0.6875rem",
+      outlinedLabelSize: "0.625rem",
+      inputPaddingLeft: 10
+    },
+    medium: {
+      padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
+      fontSize: tokens.typography.fontSize.sm,
+      height: tokens.elementSize.md,
+      iconSize: 18,
+      labelSize: "0.75rem",
+      outlinedLabelSize: "0.6875rem",
+      inputPaddingLeft: 12
+    },
+    large: {
+      padding: `${tokens.spacing.smd} ${tokens.spacing.md}`,
+      fontSize: tokens.typography.fontSize.base,
+      height: tokens.elementSize.lg,
+      iconSize: 20,
+      labelSize: "0.875rem",
+      outlinedLabelSize: "0.75rem",
+      inputPaddingLeft: 16
+    }
+  };
+  const config = sizeConfig[size];
+  const controlHeight = isMobile ? "44px" : config.height;
+  const focusGlow = focused && !hasError ? tokens.borders.focusRing.default : hasError && focused ? `0 0 0 3px ${tokens.colors.status.critical}20` : "none";
+  const labelBg = isTransparentTheme ? tokens.colors.background.base : tokens.colors.background.surface;
+  const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    label,
+    required && /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.status.critical, marginLeft: "2px" }, children: "*" }),
+    optional && /* @__PURE__ */ jsxs("span", { style: {
+      color: tokens.colors.text.tertiary,
+      fontWeight: 400,
+      fontStyle: "italic"
+    }, children: [
+      " ",
+      "(optional)"
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames("zendir-input-wrapper", className),
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacing.xs,
+        width: fullWidth ? "100%" : "auto",
+        minWidth: fullWidth ? void 0 : isMobile ? "100%" : "200px",
+        ...style
+      },
+      children: [
+        label && !isOutlined && /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: inputId,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: tokens.spacing.xs,
+              fontSize: config.labelSize,
+              fontWeight: 500,
+              color: tokens.colors.text.secondary,
+              letterSpacing: "0.01em"
+            },
+            children: labelContent
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "relative",
+              display: "flex",
+              alignItems: "center"
+            },
+            onMouseEnter: () => setHovered(true),
+            onMouseLeave: () => setHovered(false),
+            children: [
+              label && isOutlined && /* @__PURE__ */ jsx(
+                "label",
+                {
+                  htmlFor: inputId,
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: icon ? "34px" : `${config.inputPaddingLeft - 6}px`,
+                    transform: "translateY(-50%)",
+                    backgroundColor: labelBg,
+                    padding: `0 ${tokens.spacing.xs}`,
+                    fontSize: config.outlinedLabelSize,
+                    fontWeight: 500,
+                    color: focused ? hasError ? tokens.colors.status.critical : tokens.colors.accent.primary : hasError ? tokens.colors.status.critical : tokens.colors.text.secondary,
+                    letterSpacing: "0.01em",
+                    zIndex: 1,
+                    pointerEvents: "none",
+                    transition: "color 200ms cubic-bezier(0.4, 0, 0.2, 1)",
+                    lineHeight: 1.2,
+                    whiteSpace: "nowrap"
+                  },
+                  children: labelContent
+                }
+              ),
+              icon && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    left: tokens.spacing.smd,
+                    display: "flex",
+                    alignItems: "center",
+                    color: focused ? safeAccentText(tokens.colors.accent.primary) : tokens.colors.text.tertiary,
+                    pointerEvents: "none",
+                    transition: tokens.animation.fast
+                  },
+                  children: icon
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref,
+                  id: inputId,
+                  disabled,
+                  required,
+                  "aria-invalid": hasError,
+                  "aria-describedby": helperText || error ? `${inputId}-helper` : void 0,
+                  onFocus: (e) => {
+                    setFocused(true);
+                    onFocus == null ? void 0 : onFocus(e);
+                  },
+                  onBlur: handleBlur,
+                  onPaste: handlePaste,
+                  type,
+                  autoComplete,
+                  inputMode: resolvedInputMode,
+                  style: {
+                    width: "100%",
+                    height: controlHeight,
+                    padding: config.padding,
+                    paddingLeft: icon ? "40px" : config.padding,
+                    paddingRight: iconEnd ? "40px" : config.padding,
+                    fontSize: config.fontSize,
+                    fontFamily: tokens.typography.fontFamily.primary,
+                    color: tokens.colors.text.primary,
+                    backgroundColor: isTransparentTheme ? "rgba(10, 15, 25, 0.4)" : tokens.colors.background.surface,
+                    border: getBorder(),
+                    borderRadius: tokens.borderRadius.md,
+                    outline: "none",
+                    transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1)",
+                    cursor: disabled ? "not-allowed" : "text",
+                    opacity: disabled ? 0.5 : 1,
+                    boxShadow: focusGlow
+                  },
+                  ...rest
+                }
+              ),
+              iconEnd && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    right: tokens.spacing.smd,
+                    display: "flex",
+                    alignItems: "center",
+                    color: tokens.colors.text.tertiary,
+                    cursor: "pointer"
+                  },
+                  children: iconEnd
+                }
+              )
+            ]
+          }
+        ),
+        (helperText || error) && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            id: `${inputId}-helper`,
+            role: hasError ? "alert" : void 0,
+            style: {
+              fontSize: "0.6875rem",
+              fontWeight: hasError ? 500 : 400,
+              color: hasError ? tokens.colors.status.critical : tokens.colors.text.tertiary,
+              display: "flex",
+              alignItems: "center",
+              gap: tokens.spacing.xs
+            },
+            children: [
+              hasError && /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: tokens.colors.status.critical, "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("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" }) }),
+              error || helperText
+            ]
+          }
+        )
+      ]
+    }
+  );
+}));
+export {
+  Input
+};
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../src/react/core/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":"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"}

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

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+
+export type LimitsState = 'red_low' | 'yellow_low' | 'green' | 'yellow_high' | 'red_high' | 'blue' | 'stale';
+export interface LimitsBarProps {
+    /** Current value */
+    value: number;
+    /** Red low threshold (minimum critical) */
+    redLow?: number;
+    /** Yellow low threshold (minimum warning) */
+    yellowLow?: number;
+    /** Green low threshold (start of nominal) */
+    greenLow?: number;
+    /** Green high threshold (end of nominal) */
+    greenHigh?: number;
+    /** Yellow high threshold (maximum warning) */
+    yellowHigh?: number;
+    /** Red high threshold (maximum critical) */
+    redHigh?: number;
+    /** Overall min for the bar (defaults to redLow - 10%) */
+    min?: number;
+    /** Overall max for the bar (defaults to redHigh + 10%) */
+    max?: number;
+    /** Label text */
+    label?: string;
+    /** Unit string */
+    unit?: string;
+    /** Whether the value is stale / not updating */
+    stale?: boolean;
+    /** Compact mode (thinner bar, less text) */
+    compact?: boolean;
+    /** Show the numeric value on the bar */
+    showValue?: boolean;
+    /** Show limit threshold labels */
+    showThresholds?: boolean;
+    /** Width (default: '100%') */
+    width?: number | string;
+    /** Height of the bar (default: 20 for normal, 12 for compact) */
+    barHeight?: number;
+    /** Custom status override (forces a specific status regardless of value) */
+    statusOverride?: LimitsState;
+    /** Called when status changes */
+    onStatusChange?: (status: LimitsState, value: number) => void;
+    /** When false, lower-limit zones (red-low, yellow-low, green-low) are hidden even if threshold values are provided */
+    showLower?: boolean;
+    /** When false, upper-limit zones (green-high, yellow-high, red-high) are hidden even if threshold values are provided */
+    showUpper?: boolean;
+    /** CSS class */
+    className?: string;
+}
+export declare const LimitsBar: React.NamedExoticComponent<LimitsBarProps>;
+export default LimitsBar;

package/dist/react/core/LimitsBar.js

@@ -0,0 +1,200 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { useTheme } from "../theme/ThemeProvider.js";
+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";
+}
+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
+          );
+        }) })
+      ]
+    }
+  );
+});
+export {
+  LimitsBar
+};
+//# sourceMappingURL=LimitsBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LimitsBar.js","sources":["../../../src/react/core/LimitsBar.tsx"],"sourcesContent":["/**\n * @zendir/ui - LimitsBar Component\n * \n * Visual limits indicator for telemetry monitoring and spacecraft health assessment.\n * Displays a horizontal bar with colored zones (red-low, yellow-low, green, yellow-high, red-high)\n * and a marker showing the current value position within the range.\n * \n * Supports:\n * - 5-zone limits (red-low, yellow-low, green/normal, yellow-high, red-high)\n * - 3-zone limits (low, nominal, high) \n * - Blue zone for \"out of range\" / stale\n * - Animated value transitions\n * - Compact and full display modes\n * - Value label with units\n * - Configurable thresholds\n * \n * Astro UX Compliance:\n * - Uses official Astro status colors\n * - Consistent with Astro monitoring patterns\n * \n * @example\n * ```tsx\n * <LimitsBar\n *   value={72.5}\n *   redLow={10} yellowLow={25} greenLow={40}\n *   greenHigh={80} yellowHigh={90} redHigh={100}\n *   label=\"Temperature\" unit=\"°C\"\n * />\n * ```\n */\n\nimport React, { useMemo, memo } from 'react';\nimport { useTheme } from '../theme';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type LimitsState = 'red_low' | 'yellow_low' | 'green' | 'yellow_high' | 'red_high' | 'blue' | 'stale';\n\nexport interface LimitsBarProps {\n  /** Current value */\n  value: number;\n  /** Red low threshold (minimum critical) */\n  redLow?: number;\n  /** Yellow low threshold (minimum warning) */\n  yellowLow?: number;\n  /** Green low threshold (start of nominal) */\n  greenLow?: number;\n  /** Green high threshold (end of nominal) */\n  greenHigh?: number;\n  /** Yellow high threshold (maximum warning) */\n  yellowHigh?: number;\n  /** Red high threshold (maximum critical) */\n  redHigh?: number;\n  /** Overall min for the bar (defaults to redLow - 10%) */\n  min?: number;\n  /** Overall max for the bar (defaults to redHigh + 10%) */\n  max?: number;\n  /** Label text */\n  label?: string;\n  /** Unit string */\n  unit?: string;\n  /** Whether the value is stale / not updating */\n  stale?: boolean;\n  /** Compact mode (thinner bar, less text) */\n  compact?: boolean;\n  /** Show the numeric value on the bar */\n  showValue?: boolean;\n  /** Show limit threshold labels */\n  showThresholds?: boolean;\n  /** Width (default: '100%') */\n  width?: number | string;\n  /** Height of the bar (default: 20 for normal, 12 for compact) */\n  barHeight?: number;\n  /** Custom status override (forces a specific status regardless of value) */\n  statusOverride?: LimitsState;\n  /** Called when status changes */\n  onStatusChange?: (status: LimitsState, value: number) => void;\n  /** When false, lower-limit zones (red-low, yellow-low, green-low) are hidden even if threshold values are provided */\n  showLower?: boolean;\n  /** When false, upper-limit zones (green-high, yellow-high, red-high) are hidden even if threshold values are provided */\n  showUpper?: boolean;\n  /** CSS class */\n  className?: string;\n}\n\n// =============================================================================\n// Helpers\n// =============================================================================\n\nfunction getLimitsState(\n  value: number,\n  redLow?: number,\n  yellowLow?: number,\n  greenLow?: number,\n  greenHigh?: number,\n  yellowHigh?: number,\n  redHigh?: number,\n): LimitsState {\n  if (redLow !== undefined && value < redLow) return 'red_low';\n  if (yellowLow !== undefined && value < yellowLow) return 'yellow_low';\n  if (greenLow !== undefined && value < greenLow) return 'yellow_low';\n  if (redHigh !== undefined && value > redHigh) return 'red_high';\n  if (yellowHigh !== undefined && value > yellowHigh) return 'yellow_high';\n  if (greenHigh !== undefined && value > greenHigh) return 'yellow_high';\n  return 'green';\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\nexport const LimitsBar = memo(function LimitsBar({\n  value,\n  redLow: redLowProp,\n  yellowLow: yellowLowProp,\n  greenLow: greenLowProp,\n  greenHigh: greenHighProp,\n  yellowHigh: yellowHighProp,\n  redHigh: redHighProp,\n  min: minProp,\n  max: maxProp,\n  label,\n  unit,\n  stale = false,\n  compact = false,\n  showValue = true,\n  showThresholds = false,\n  showLower = true,\n  showUpper = true,\n  width = '100%',\n  barHeight: barHeightProp,\n  statusOverride,\n  className = '',\n}: LimitsBarProps): React.ReactElement {\n  // Mask thresholds based on showLower / showUpper flags\n  const redLow    = showLower ? redLowProp    : undefined;\n  const yellowLow = showLower ? yellowLowProp : undefined;\n  const greenLow  = showLower ? greenLowProp  : undefined;\n  const greenHigh  = showUpper ? greenHighProp  : undefined;\n  const yellowHigh = showUpper ? yellowHighProp : undefined;\n  const redHigh    = showUpper ? redHighProp    : undefined;\n  const { tokens } = useTheme();\n  const softStatusColors = useMemo(() => ({\n    normal: tokens.colors.status.normal,\n    caution: tokens.colors.status.caution,\n    serious: tokens.colors.status.serious,\n    critical: tokens.colors.status.critical,\n    off: tokens.colors.status.off,\n    standby: tokens.colors.status.standby,\n  }), [tokens]);\n\n  const barHeight = barHeightProp ?? (compact ? 12 : 20);\n  \n  const _thresholds = useMemo(() => {\n    const rl = redLow ?? -Infinity;\n    const yl = yellowLow ?? redLow ?? -Infinity;\n    const gl = greenLow ?? yellowLow ?? redLow ?? -Infinity;\n    const gh = greenHigh ?? yellowHigh ?? redHigh ?? Infinity;\n    const yh = yellowHigh ?? redHigh ?? Infinity;\n    const rh = redHigh ?? Infinity;\n    return { rl, yl, gl, gh, yh, rh };\n  }, [redLow, yellowLow, greenLow, greenHigh, yellowHigh, redHigh]);\n\n  const rangeMin = minProp ?? (redLow !== undefined ? redLow - (redHigh !== undefined ? (redHigh - redLow) * 0.1 : 10) : 0);\n  const rangeMax = maxProp ?? (redHigh !== undefined ? redHigh + (redLow !== undefined ? (redHigh - redLow) * 0.1 : 10) : 100);\n  const range = rangeMax - rangeMin;\n\n  const status = stale ? 'stale' : (statusOverride ?? getLimitsState(value, redLow, yellowLow, greenLow, greenHigh, yellowHigh, redHigh));\n\n  const statusColors: Record<LimitsState, string> = {\n    red_low: softStatusColors.critical,\n    red_high: softStatusColors.critical,\n    yellow_low: softStatusColors.caution,\n    yellow_high: softStatusColors.caution,\n    green: softStatusColors.normal,\n    blue: softStatusColors.standby,\n    stale: softStatusColors.off,\n  };\n\n  const valuePercent = range > 0 ? Math.max(0, Math.min(100, ((value - rangeMin) / range) * 100)) : 50;\n\n  // Build zone segments\n  const zones = useMemo(() => {\n    const segs: { start: number; end: number; color: string }[] = [];\n    const toPercent = (v: number) => Math.max(0, Math.min(100, ((v - rangeMin) / range) * 100));\n\n    const critical = softStatusColors.critical;\n    const caution = softStatusColors.caution;\n    const normal = softStatusColors.normal;\n\n    if (redLow !== undefined) {\n      segs.push({ start: 0, end: toPercent(redLow), color: `${critical}66` });\n    }\n    if (yellowLow !== undefined) {\n      const s = redLow !== undefined ? toPercent(redLow) : 0;\n      segs.push({ start: s, end: toPercent(yellowLow), color: `${caution}66` });\n    }\n    {\n      const s = yellowLow !== undefined ? toPercent(yellowLow) : (redLow !== undefined ? toPercent(redLow) : 0);\n      const e = yellowHigh !== undefined ? toPercent(yellowHigh) : (redHigh !== undefined ? toPercent(redHigh) : 100);\n      segs.push({ start: s, end: e, color: `${normal}44` });\n    }\n    if (yellowHigh !== undefined) {\n      const e = redHigh !== undefined ? toPercent(redHigh) : 100;\n      segs.push({ start: toPercent(yellowHigh), end: e, color: `${caution}66` });\n    }\n    if (redHigh !== undefined) {\n      segs.push({ start: toPercent(redHigh), end: 100, color: `${critical}66` });\n    }\n\n    return segs;\n  }, [redLow, yellowLow, yellowHigh, redHigh, rangeMin, range, softStatusColors]);\n\n  const markerColor = statusColors[status];\n\n  return (\n    <div\n      className={`limits-bar ${className}`}\n      role=\"meter\"\n      aria-valuenow={value}\n      aria-valuemin={rangeMin}\n      aria-valuemax={rangeMax}\n      aria-label={label ? `${label}: ${value}${unit ? ' ' + unit : ''}` : `${value}${unit ? ' ' + unit : ''}`}\n      style={{ width, fontFamily: tokens.typography.fontFamily.primary }}\n    >\n      {/* Label row */}\n      {(label || showValue) && !compact && (\n        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: tokens.spacing.xs, fontSize: tokens.typography.fontSize.sm }}>\n          {label && <span style={{ color: tokens.colors.text.secondary, fontWeight: tokens.typography.fontWeight.medium }}>{label}</span>}\n          {showValue && (\n            <span style={{ color: markerColor, fontWeight: tokens.typography.fontWeight.medium, fontFamily: tokens.typography.fontFamily.mono }}>\n              {typeof value === 'number' ? value.toFixed(2) : value}\n              {unit && <span style={{ fontSize: tokens.typography.fontSize.xxs, marginLeft: tokens.spacing.xxs, color: tokens.colors.text.muted }}>{unit}</span>}\n            </span>\n          )}\n        </div>\n      )}\n\n      {/* Bar */}\n      <div style={{\n        position: 'relative',\n        height: barHeight,\n        borderRadius: tokens.borderRadius.full,\n        background: tokens.colors.background.base,\n        border: `1px solid ${tokens.colors.border.muted}`,\n        overflow: 'hidden',\n      }}>\n        {/* Zone segments */}\n        {zones.map((z, i) => (\n          <div\n            key={i}\n            style={{\n              position: 'absolute',\n              left: `${z.start}%`,\n              width: `${z.end - z.start}%`,\n              height: '100%',\n              background: z.color,\n            }}\n          />\n        ))}\n\n        {/* Value marker */}\n        <div style={{\n          position: 'absolute',\n          left: `${valuePercent}%`,\n          top: 0,\n          bottom: 0,\n          width: compact ? 3 : 4,\n          marginLeft: compact ? -1.5 : -2,\n          background: markerColor,\n          borderRadius: tokens.borderRadius.sm,\n          boxShadow: `0 0 8px ${markerColor}66, 0 0 3px ${markerColor}44`,\n          transition: 'left 300ms cubic-bezier(0.4, 0, 0.2, 1), background 300ms ease',\n        }} />\n\n        {/* Compact label */}\n        {compact && showValue && (\n          <div style={{\n            position: 'absolute',\n            right: tokens.spacing.xs,\n            top: '50%',\n            transform: 'translateY(-50%)',\n            fontSize: tokens.typography.fontSize.micro,\n            fontWeight: tokens.typography.fontWeight.medium,\n            color: markerColor,\n            fontFamily: tokens.typography.fontFamily.mono,\n            textShadow: `0 0 4px ${tokens.colors.background.base}`,\n          }}>\n            {typeof value === 'number' ? value.toFixed(1) : value}{unit || ''}\n          </div>\n        )}\n      </div>\n\n      {/* Threshold labels */}\n      {showThresholds && !compact && (\n        <div style={{ position: 'relative', height: 14, marginTop: tokens.spacing.xxs }}>\n          {[\n            { val: redLow, color: softStatusColors.critical },\n            { val: yellowLow, color: softStatusColors.caution },\n            { val: greenHigh ?? yellowHigh, color: softStatusColors.caution },\n            { val: redHigh, color: softStatusColors.critical },\n          ].filter(t => t.val !== undefined).map((t, i) => {\n            const pct = range > 0 ? ((t.val! - rangeMin) / range) * 100 : 0;\n            return (\n              <span\n                key={i}\n                aria-label={`Threshold: ${t.val}`}\n                style={{\n                  position: 'absolute',\n                  left: `${pct}%`,\n                  transform: 'translateX(-50%)',\n                  fontSize: tokens.typography.fontSize.micro,\n                  color: t.color,\n                  fontFamily: tokens.typography.fontFamily.mono,\n                }}\n              >\n                {t.val}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default LimitsBar;\n"],"names":["LimitsBar"],"mappings":"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"}