@titan-design/react-ui 0.2.6 → 0.3.0

package/dist/chunk-TOD2WQBG.mjs

@@ -0,0 +1,1048 @@
+import { getValidatedElevation, getBaseSurfaceColor, getElevationSurface, getElevationShadow } from './chunk-P7TSQUN6.mjs';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { useState, useMemo, useSyncExternalStore, Fragment as Fragment$1 } from 'react';
+import { View, Pressable, Text } from 'react-native';
+import { Fragment, jsx as jsx$1, jsxs as jsxs$1 } from 'react/jsx-runtime';
+export { Fragment } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function getTheme() {
+  if (typeof document === "undefined") return "dark";
+  return document.documentElement.classList.contains("light") ? "light" : "dark";
+}
+var listeners = [];
+function subscribe(listener) {
+  listeners = [...listeners, listener];
+  if (typeof document !== "undefined" && listeners.length === 1) {
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "attributes" && mutation.attributeName === "class") {
+          listeners.forEach((l) => l());
+        }
+      }
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+    subscribe._observer = observer;
+  }
+  return () => {
+    listeners = listeners.filter((l) => l !== listener);
+    if (listeners.length === 0 && subscribe._observer) {
+      subscribe._observer.disconnect();
+      subscribe._observer = null;
+    }
+  };
+}
+function getSnapshot() {
+  return getTheme();
+}
+function getServerSnapshot() {
+  return "dark";
+}
+function useTheme() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+function wrapJsx(fn) {
+  return function(type, props, ...rest) {
+    if (props && typeof props.className === "string" && props.className) {
+      const cn2 = props.className;
+      const cssStyle = { $$css: true, [cn2]: cn2 };
+      const existing = props.style;
+      props = {
+        ...props,
+        style: existing ? [cssStyle, existing] : cssStyle
+      };
+      delete props.className;
+    }
+    return fn(type, props, ...rest);
+  };
+}
+var jsx = wrapJsx(jsx$1);
+var jsxs = wrapJsx(jsxs$1);
+
+// src/components/ui/card/Card.tsx
+var variantStyles = {
+  elevated: "",
+  // Will be set dynamically via elevation system
+  outline: "border-2 border-border-strong",
+  // Thicker border with stronger contrast
+  filled: "",
+  // Will be set dynamically via elevation system
+  accent: "border border-border",
+  subtle: "border border-border-subtle"
+};
+function Card({
+  variant = "elevated",
+  elevation = 2,
+  isInteractive = false,
+  isLoading = false,
+  onPress,
+  borderColor,
+  bgColor,
+  accentColor,
+  accentWidth,
+  className,
+  children,
+  style,
+  skeletonHasHeader = true,
+  skeletonHasFooter = false,
+  skeletonContentLines = 3,
+  ...props
+}) {
+  const isClickable = isInteractive || !!onPress;
+  const [isHovered, setIsHovered] = useState(false);
+  const theme = useTheme();
+  const elevationLevel = useMemo(() => {
+    const validated = getValidatedElevation("card", elevation);
+    if (variant === "outline" || variant === "accent" || variant === "subtle") {
+      return 1;
+    }
+    return validated;
+  }, [variant, elevation]);
+  const baseColor = useMemo(() => getBaseSurfaceColor(theme), [theme]);
+  const surfaceColor = useMemo(() => {
+    if ((variant === "outline" || variant === "accent") && theme === "light") {
+      return "#FAFAFA";
+    }
+    if (variant === "subtle") {
+      return getElevationSurface(baseColor, 0, theme);
+    }
+    return getElevationSurface(baseColor, elevationLevel, theme);
+  }, [baseColor, elevationLevel, theme, variant]);
+  const shadowStyle = useMemo(() => {
+    const shouldHover = isHovered && isClickable;
+    return getElevationShadow(baseColor, elevationLevel, theme, shouldHover);
+  }, [baseColor, elevationLevel, theme, isHovered, isClickable]);
+  const cardContent = isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    skeletonHasHeader && /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(View, { className: "h-5 w-1/3 bg-interactive-disabled rounded" }),
+      /* @__PURE__ */ jsx(View, { className: "mt-2 h-4 w-2/3 bg-interactive-disabled rounded" })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: Array.from({ length: skeletonContentLines }).map((_, i) => /* @__PURE__ */ jsx(
+      View,
+      {
+        className: cn(
+          "h-4 bg-interactive-disabled rounded",
+          i < skeletonContentLines - 1 ? "mb-2 w-full" : "w-4/5"
+        )
+      },
+      i
+    )) }),
+    skeletonHasFooter && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(View, { className: "h-9 w-24 bg-interactive-disabled rounded" }) })
+  ] }) : children;
+  const baseClassName = cn(
+    "rounded-lg overflow-hidden relative",
+    // Apply variant styles, but only use default border color if no custom borderColor
+    variant === "outline" ? borderColor ? "border-2" : variantStyles[variant] : variantStyles[variant],
+    // Remove Tailwind shadow classes - we're using elevation shadows via style prop
+    isClickable && "web:cursor-pointer web:transition-all web:duration-150",
+    isClickable && "web:hover:-translate-y-0.5 active:scale-[0.99]",
+    isLoading && "pointer-events-none animate-pulse",
+    className
+  );
+  const accentStyle = useMemo(() => variant === "accent" ? {
+    borderLeftWidth: accentWidth ?? 3,
+    borderLeftColor: accentColor ?? "var(--color-brand-primary)"
+  } : {}, [variant, accentWidth, accentColor]);
+  const mergedStyle = useMemo(() => {
+    const elevationStyle = {
+      backgroundColor: bgColor || surfaceColor,
+      borderRadius: 8,
+      overflow: "hidden",
+      ...shadowStyle,
+      ...accentStyle
+    };
+    if (borderColor) {
+      elevationStyle.borderColor = borderColor;
+    }
+    if (!style) return elevationStyle;
+    return [elevationStyle, style];
+  }, [style, surfaceColor, shadowStyle, borderColor, bgColor, accentStyle]);
+  if (isClickable) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress,
+        onHoverIn: () => setIsHovered(true),
+        onHoverOut: () => setIsHovered(false),
+        accessibilityRole: "button",
+        className: baseClassName,
+        style: mergedStyle,
+        ...props,
+        children: cardContent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(View, { className: baseClassName, style: mergedStyle, ...props, children: cardContent });
+}
+function CardHeader({ children, className }) {
+  return /* @__PURE__ */ jsx(View, { className: cn("px-6 py-6", className), children });
+}
+function CardTitle({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      accessibilityRole: "header",
+      className: cn("text-lg font-semibold text-text-primary font-heading", className),
+      children
+    }
+  );
+}
+function CardDescription({ children, className }) {
+  return /* @__PURE__ */ jsx(Text, { className: cn("mt-1.5 text-sm text-text-secondary", className), children });
+}
+function CardContent({ children, className }) {
+  return /* @__PURE__ */ jsx(View, { className: cn("px-6 py-4", className), children });
+}
+function CardFooter({ children, className }) {
+  return /* @__PURE__ */ jsx(View, { className: cn("px-6 py-4 flex-row items-center gap-2", className), children });
+}
+function CardSkeleton({
+  hasHeader = true,
+  hasFooter = false,
+  contentLines = 3,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(Card, { variant: "elevated", elevation: 2, className: cn("animate-pulse", className), children: [
+    hasHeader && /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(View, { className: "h-5 w-1/3 bg-interactive-disabled rounded" }),
+      /* @__PURE__ */ jsx(View, { className: "mt-2 h-4 w-2/3 bg-interactive-disabled rounded" })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: Array.from({ length: contentLines }).map((_, i) => /* @__PURE__ */ jsx(
+      View,
+      {
+        className: cn(
+          "h-4 bg-interactive-disabled rounded",
+          i < contentLines - 1 ? "mb-2 w-full" : "w-4/5"
+        )
+      },
+      i
+    )) }),
+    hasFooter && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(View, { className: "h-9 w-24 bg-interactive-disabled rounded" }) })
+  ] });
+}
+var sizeStyles = {
+  xs: "w-1 h-1",
+  sm: "w-1.5 h-1.5",
+  md: "w-2 h-2",
+  lg: "w-2.5 h-2.5"
+};
+var colorStyles = {
+  default: "bg-text-tertiary",
+  primary: "bg-brand-primary",
+  success: "bg-status-success",
+  error: "bg-status-error",
+  warning: "bg-status-warning",
+  info: "bg-status-info"
+};
+function Indicator({
+  size = "sm",
+  color = "default",
+  customColor,
+  glow = false,
+  ring = false,
+  className,
+  style,
+  ...props
+}) {
+  const dynamicStyle = {
+    ...typeof style === "object" ? style : {},
+    ...customColor ? { backgroundColor: customColor } : {},
+    ...glow && !customColor ? {} : {},
+    ...glow && customColor ? { boxShadow: `0 0 6px ${customColor}` } : {}
+  };
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn(
+        "rounded-full shrink-0",
+        sizeStyles[size],
+        !customColor && colorStyles[color],
+        ring && "border-2 border-background-base",
+        glow && !customColor && color === "success" && "shadow-[0_0_6px_rgba(20,184,166,0.6)]",
+        glow && !customColor && color === "error" && "shadow-[0_0_6px_rgba(239,68,68,0.6)]",
+        glow && !customColor && color === "warning" && "shadow-[0_0_6px_rgba(245,158,11,0.6)]",
+        glow && !customColor && color === "primary" && "shadow-[0_0_6px_rgba(255,121,0,0.6)]",
+        className
+      ),
+      style: Object.keys(dynamicStyle).length > 0 ? dynamicStyle : style,
+      ...props
+    }
+  );
+}
+var variantColorStyles = {
+  solid: {
+    default: "bg-border-strong text-text-inverse",
+    primary: "bg-brand-primary text-text-inverse",
+    secondary: "bg-brand-secondary text-text-inverse",
+    success: "bg-status-success text-text-inverse",
+    error: "bg-status-error text-text-inverse",
+    warning: "bg-status-warning text-text-inverse",
+    info: "bg-status-info text-text-inverse"
+  },
+  subtle: {
+    default: "bg-surface-raised text-text-secondary",
+    primary: "bg-brand-primary-subtle text-brand-primary",
+    secondary: "bg-brand-secondary-subtle text-brand-secondary",
+    success: "bg-status-success-subtle text-status-success",
+    error: "bg-status-error-subtle text-status-error",
+    warning: "bg-status-warning-subtle text-status-warning",
+    info: "bg-status-info-subtle text-status-info"
+  },
+  outline: {
+    default: "border border-border-strong text-text-secondary",
+    primary: "border border-brand-primary text-brand-primary",
+    secondary: "border border-brand-secondary text-brand-secondary",
+    success: "border border-status-success text-status-success",
+    error: "border border-status-error text-status-error",
+    warning: "border border-status-warning text-status-warning",
+    info: "border border-status-info text-status-info"
+  }
+};
+var sizeStyles2 = {
+  sm: "px-1.5 py-0.5 text-xs",
+  md: "px-2 py-0.5 text-xs",
+  lg: "px-2.5 py-1 text-sm"
+};
+function Badge({
+  variant = "subtle",
+  color = "default",
+  size = "md",
+  dot,
+  dotColor,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      className: cn(
+        "inline-flex items-center justify-center rounded-full font-medium",
+        variantColorStyles[variant][color],
+        sizeStyles2[size],
+        className
+      ),
+      ...props,
+      children: [
+        dot && /* @__PURE__ */ jsx(
+          Indicator,
+          {
+            size: "xs",
+            color: dotColor ?? (color === "default" || color === "secondary" ? "default" : color),
+            className: "mr-0.5"
+          }
+        ),
+        typeof children === "string" ? /* @__PURE__ */ jsx(Text, { className: "text-inherit font-medium", children }) : children
+      ]
+    }
+  );
+}
+function BadgeText({ children, className }) {
+  return /* @__PURE__ */ jsx(Text, { className: cn("text-inherit font-medium", className), children });
+}
+var solidVariantColors = {
+  success: "#14B8A6",
+  warning: "#FFB020",
+  error: "#D14343",
+  neutral: "#6B7280"
+};
+var ringVariantStyles = {
+  "on-track": {
+    backgroundColor: "rgba(20,184,166,0.15)",
+    borderWidth: 1,
+    borderColor: "rgba(20,184,166,0.3)"
+  },
+  deviation: {
+    backgroundColor: "rgba(245,158,11,0.15)",
+    borderWidth: 1,
+    borderColor: "rgba(245,158,11,0.25)"
+  },
+  future: {
+    backgroundColor: "rgba(107,114,128,0.1)",
+    borderWidth: 1,
+    borderStyle: "dashed",
+    borderColor: "rgba(107,114,128,0.2)"
+  }
+};
+var glowStyles = {
+  success: { boxShadow: "0 0 4px rgba(20,184,166,0.4)" },
+  warning: { boxShadow: "0 0 4px rgba(245,158,11,0.4)" },
+  error: { boxShadow: "0 0 4px rgba(239,68,68,0.4)" },
+  neutral: { boxShadow: "0 0 4px rgba(107,114,128,0.4)" },
+  "on-track": { boxShadow: "0 0 4px rgba(20,184,166,0.4)" },
+  deviation: { boxShadow: "0 0 4px rgba(245,158,11,0.4)" },
+  future: { boxShadow: "0 0 4px rgba(107,114,128,0.4)" }
+};
+var iconChars = {
+  check: "\u2713",
+  exclamation: "!",
+  dash: "\u2014"
+};
+var iconColors = {
+  success: "#0A5C52",
+  warning: "#6B4000",
+  error: "#5C1A1A",
+  neutral: "#D1D5DB",
+  "on-track": "#14B8A6",
+  deviation: "#FFB020",
+  future: "#6B7280"
+};
+var sizeDimensions = {
+  sm: { size: 8, showIcon: false },
+  md: { size: 18, showIcon: true }
+};
+function isSolidVariant(variant) {
+  return variant in solidVariantColors;
+}
+function StatusDot({
+  variant,
+  icon,
+  size = "sm",
+  glow,
+  label,
+  className,
+  ...props
+}) {
+  const config = sizeDimensions[size];
+  const solid = isSolidVariant(variant);
+  const ring = ringVariantStyles[variant];
+  const glowStyle = glow ? glowStyles[variant] : null;
+  const dot = /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        {
+          width: config.size,
+          height: config.size,
+          borderRadius: 9999,
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0
+        },
+        solid ? { backgroundColor: solidVariantColors[variant] } : void 0,
+        ring ? ring : void 0,
+        glowStyle ? glowStyle : void 0
+      ],
+      accessibilityRole: "image",
+      accessibilityLabel: `${variant} status`,
+      testID: "status-dot",
+      children: config.showIcon && icon && /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: {
+            fontSize: 11,
+            lineHeight: 11,
+            fontWeight: "900",
+            color: iconColors[variant]
+          },
+          accessibilityElementsHidden: true,
+          children: iconChars[icon]
+        }
+      )
+    }
+  );
+  if (label) {
+    return /* @__PURE__ */ jsxs(
+      View,
+      {
+        className,
+        style: { flexDirection: "row", alignItems: "center", gap: 6 },
+        accessibilityLabel: `${variant} status: ${label}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(View, { accessibilityElementsHidden: true, children: dot }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: { fontSize: 12, lineHeight: 16, color: "#9CA3AF" },
+              accessibilityElementsHidden: true,
+              children: label
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(View, { className, ...props, children: dot });
+}
+var BRAND_PRIMARY = "#FF7900";
+function normalizeData(data, height) {
+  if (data.length === 0) return [];
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  return data.map((v) => height - (v - min) / range * height);
+}
+function normalizeValue(value, data, height) {
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  return height - (value - min) / range * height;
+}
+function Sparkline({
+  data,
+  width = 80,
+  height = 30,
+  color,
+  showDots = false,
+  referenceLines,
+  highlightLast = false,
+  className,
+  ...props
+}) {
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        style: { width, height },
+        className,
+        testID: "sparkline-empty",
+        accessibilityLabel: "Sparkline chart, no data",
+        ...props
+      }
+    );
+  }
+  const resolvedColor = color ?? BRAND_PRIMARY;
+  const normalized = normalizeData(data, height);
+  const stepX = data.length > 1 ? width / (data.length - 1) : 0;
+  const dotSize = 3;
+  const highlightSize = 6;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: { width, height, position: "relative" },
+      className: cn(className),
+      accessibilityRole: "image",
+      accessibilityLabel: `Sparkline chart with ${data.length} data points`,
+      testID: "sparkline",
+      ...props,
+      children: [
+        referenceLines?.map((line, i) => {
+          const y = normalizeValue(line.value, data, height);
+          return /* @__PURE__ */ jsx(
+            View,
+            {
+              style: [
+                {
+                  position: "absolute",
+                  top: y,
+                  left: 0,
+                  right: 0,
+                  opacity: 0.6
+                },
+                line.dashed ? {
+                  height: 0,
+                  borderStyle: "dashed",
+                  borderTopWidth: 1,
+                  borderTopColor: line.color
+                } : {
+                  height: 1,
+                  backgroundColor: line.color
+                }
+              ],
+              accessibilityElementsHidden: true,
+              testID: `sparkline-reference-${i}`,
+              children: line.label && /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: {
+                    position: "absolute",
+                    right: 0,
+                    top: -10,
+                    fontSize: 7,
+                    color: line.color,
+                    opacity: 1
+                  },
+                  testID: `sparkline-reference-label-${i}`,
+                  children: line.label
+                }
+              )
+            },
+            `ref-${i}`
+          );
+        }),
+        normalized.map((y, i) => {
+          if (i === 0) return null;
+          const prevY = normalized[i - 1];
+          const x1 = (i - 1) * stepX;
+          const x2 = i * stepX;
+          const dx = x2 - x1;
+          const dy = y - prevY;
+          const length = Math.sqrt(dx * dx + dy * dy);
+          const angle = Math.atan2(dy, dx) * (180 / Math.PI);
+          return /* @__PURE__ */ jsx(
+            View,
+            {
+              style: {
+                position: "absolute",
+                left: x1,
+                top: prevY,
+                width: length,
+                height: 1.5,
+                backgroundColor: resolvedColor,
+                transformOrigin: "0 0",
+                transform: [{ rotate: `${angle}deg` }]
+              },
+              accessibilityElementsHidden: true,
+              testID: `sparkline-segment-${i}`
+            },
+            `line-${i}`
+          );
+        }),
+        (showDots || highlightLast) && normalized.map((y, i) => {
+          const isLast = i === data.length - 1;
+          const shouldShow = showDots || highlightLast && isLast;
+          if (!shouldShow) return null;
+          const size = highlightLast && isLast ? highlightSize : dotSize;
+          return /* @__PURE__ */ jsx(
+            View,
+            {
+              style: {
+                position: "absolute",
+                left: i * stepX - size / 2,
+                top: y - size / 2,
+                width: size,
+                height: size,
+                borderRadius: size / 2,
+                backgroundColor: resolvedColor
+              },
+              accessibilityElementsHidden: true,
+              testID: `sparkline-dot-${i}`
+            },
+            `dot-${i}`
+          );
+        })
+      ]
+    }
+  );
+}
+var BRAND_PRIMARY2 = "#FF7900";
+var BRAND_PRIMARY_DARK = "#C45E00";
+var BRAND_PRIMARY_LIGHT = "#FFB066";
+var TEXT_PRIMARY = "var(--color-text-primary)";
+var TEXT_SECONDARY = "var(--color-text-secondary)";
+var TEXT_TERTIARY = "var(--color-text-tertiary)";
+var SUCCESS = "#14B8A6";
+var WARNING = "#FFB020";
+var ERROR = "#D14343";
+var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY2, BRAND_PRIMARY_LIGHT];
+var CARD_GRADIENT = "linear-gradient(135deg, var(--color-surface-elevated) 0%, var(--color-surface-raised) 100%)";
+var GAUGE_GRADIENT = "linear-gradient(90deg, rgba(20,184,166,0.25) 0%, rgba(255,176,32,0.25) 50%, rgba(209,67,67,0.25) 100%)";
+var STATUS_VARIANTS = {
+  success: { bg: "rgba(20,184,166,0.15)", border: "rgba(20,184,166,0.3)", text: SUCCESS },
+  warning: { bg: "rgba(255,176,32,0.15)", border: "rgba(255,176,32,0.3)", text: WARNING },
+  error: { bg: "rgba(209,67,67,0.15)", border: "rgba(209,67,67,0.25)", text: ERROR }
+};
+function clamp01(value) {
+  if (!Number.isFinite(value)) return 0;
+  if (value < 0) return 0;
+  if (value > 1) return 1;
+  return value;
+}
+function getGaugeZoneColor(level) {
+  if (level >= 0.7) return ERROR;
+  if (level >= 0.4) return WARNING;
+  return SUCCESS;
+}
+function renderCoachingText(text, highlights) {
+  if (!highlights || highlights.length === 0) return text;
+  const escaped = highlights.filter(Boolean).map((h) => h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+  if (escaped.length === 0) return text;
+  const regex = new RegExp(`(${escaped.join("|")})`, "g");
+  return text.split(regex).map(
+    (part, index) => highlights.includes(part) ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: { fontWeight: "700", color: TEXT_PRIMARY },
+        children: part
+      },
+      `${part}-${index}`
+    ) : /* @__PURE__ */ jsx(Fragment$1, { children: part }, `t-${index}`)
+  );
+}
+function StatusPill({ badge }) {
+  const colors = STATUS_VARIANTS[badge.variant];
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      className: "flex-row items-center",
+      style: {
+        gap: 5,
+        paddingVertical: 3,
+        paddingHorizontal: 8,
+        borderRadius: 4,
+        borderWidth: 1,
+        backgroundColor: colors.bg,
+        borderColor: colors.border
+      },
+      testID: "meso-status-card-badge",
+      children: [
+        /* @__PURE__ */ jsx(View, { accessibilityElementsHidden: true, children: /* @__PURE__ */ jsx(StatusDot, { variant: badge.variant, size: "sm" }) }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              fontSize: 10,
+              fontFamily: "Inter, sans-serif",
+              fontWeight: "700",
+              letterSpacing: 0.3,
+              color: colors.text
+            },
+            children: badge.label
+          }
+        )
+      ]
+    }
+  );
+}
+function MetricCell({ metric }) {
+  return /* @__PURE__ */ jsxs(View, { style: { width: "48%" }, testID: "meso-status-card-metric", children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: {
+          fontSize: 10,
+          fontFamily: "Inter, sans-serif",
+          fontWeight: "600",
+          letterSpacing: 0.5,
+          textTransform: "uppercase",
+          color: TEXT_TERTIARY
+        },
+        children: metric.label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: {
+          marginTop: 2,
+          fontSize: 13,
+          fontFamily: "Inter, sans-serif",
+          fontWeight: "600",
+          color: TEXT_PRIMARY
+        },
+        children: metric.value
+      }
+    )
+  ] });
+}
+function Gauge({ gauge }) {
+  const level = clamp01(gauge.level);
+  const percentage = Math.round(level * 100);
+  const markerColor = getGaugeZoneColor(level);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: { gap: 6 },
+      accessibilityRole: "progressbar",
+      accessibilityValue: { min: 0, max: 100, now: percentage },
+      accessibilityLabel: `${gauge.label}: ${percentage}%`,
+      "aria-valuenow": percentage,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      testID: "meso-status-card-gauge",
+      children: [
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            className: "flex-row items-center justify-between",
+            accessibilityElementsHidden: true,
+            children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: {
+                    fontSize: 10,
+                    fontFamily: "Inter, sans-serif",
+                    fontWeight: "500",
+                    letterSpacing: 0.5,
+                    textTransform: "uppercase",
+                    color: TEXT_SECONDARY
+                  },
+                  children: gauge.label
+                }
+              ),
+              gauge.sublabel != null && /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: {
+                    fontSize: 10,
+                    fontFamily: "Inter, sans-serif",
+                    fontWeight: "500",
+                    color: TEXT_TERTIARY
+                  },
+                  children: gauge.sublabel
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            style: {
+              height: 8,
+              borderRadius: 4,
+              position: "relative",
+              backgroundImage: GAUGE_GRADIENT
+            },
+            accessibilityElementsHidden: true,
+            children: [
+              /* @__PURE__ */ jsx(
+                View,
+                {
+                  style: {
+                    position: "absolute",
+                    left: "50%",
+                    top: 0,
+                    bottom: 0,
+                    width: 1,
+                    marginLeft: -0.5,
+                    backgroundColor: "rgba(255,255,255,0.3)"
+                  },
+                  testID: "meso-status-card-gauge-center"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                View,
+                {
+                  style: {
+                    position: "absolute",
+                    left: `${percentage}%`,
+                    top: -3,
+                    marginLeft: -7,
+                    width: 14,
+                    height: 14,
+                    borderRadius: 9999,
+                    borderWidth: 2,
+                    borderColor: TEXT_PRIMARY,
+                    backgroundColor: markerColor,
+                    boxShadow: "0 0 4px rgba(0,0,0,0.5)"
+                  },
+                  testID: "meso-status-card-gauge-marker"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function MesoStatusCard({
+  mesoName,
+  mesoSubtitle,
+  statusBadge,
+  metrics,
+  gauges,
+  coaching,
+  nextTarget,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      variant: "outline",
+      elevation: 1,
+      borderColor: BRAND_PRIMARY_DARK,
+      className,
+      style: {
+        borderColor: BRAND_PRIMARY_DARK,
+        borderWidth: 1,
+        backgroundImage: CARD_GRADIENT
+      },
+      role: "article",
+      "aria-label": `Mesocycle status for ${mesoName}`,
+      testID: "meso-status-card",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            className: "flex-row",
+            style: { position: "absolute", top: 0, left: 0, right: 0, height: 3, zIndex: 1 },
+            accessibilityElementsHidden: true,
+            testID: "meso-status-card-accent",
+            children: ACCENT_STOPS.map((color) => /* @__PURE__ */ jsx(View, { style: { flex: 1, backgroundColor: color } }, color))
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { style: { padding: 14, gap: 14 }, testID: "meso-status-card-body", children: [
+          /* @__PURE__ */ jsxs(View, { testID: "meso-status-card-header", children: [
+            /* @__PURE__ */ jsxs(
+              View,
+              {
+                className: "flex-row items-center justify-between",
+                style: { gap: 8 },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      style: {
+                        flexShrink: 1,
+                        fontSize: 15,
+                        fontFamily: '"Space Grotesk", sans-serif',
+                        fontWeight: "700",
+                        color: TEXT_PRIMARY
+                      },
+                      testID: "meso-status-card-name",
+                      children: mesoName
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(StatusPill, { badge: statusBadge })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: {
+                  marginTop: 4,
+                  fontSize: 12,
+                  fontFamily: "Inter, sans-serif",
+                  color: TEXT_SECONDARY
+                },
+                testID: "meso-status-card-subtitle",
+                children: mesoSubtitle
+              }
+            )
+          ] }),
+          metrics.length > 0 && /* @__PURE__ */ jsx(
+            View,
+            {
+              className: "flex-row flex-wrap",
+              style: { gap: 8 },
+              testID: "meso-status-card-metrics",
+              children: metrics.map((metric, index) => /* @__PURE__ */ jsx(MetricCell, { metric }, `${metric.label}-${index}`))
+            }
+          ),
+          gauges.length > 0 && /* @__PURE__ */ jsx(View, { style: { gap: 12 }, testID: "meso-status-card-gauges", children: gauges.map((gauge, index) => /* @__PURE__ */ jsx(Gauge, { gauge }, `${gauge.label}-${index}`)) }),
+          coaching != null && /* @__PURE__ */ jsx(
+            View,
+            {
+              style: {
+                backgroundColor: "rgba(255,176,32,0.06)",
+                borderWidth: 1,
+                borderColor: "rgba(255,176,32,0.15)",
+                borderRadius: 8,
+                paddingVertical: 10,
+                paddingHorizontal: 12
+              },
+              testID: "meso-status-card-coaching",
+              children: /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: {
+                    fontSize: 12,
+                    lineHeight: 17,
+                    fontFamily: "Inter, sans-serif",
+                    color: TEXT_SECONDARY
+                  },
+                  children: renderCoachingText(coaching.text, coaching.highlights)
+                }
+              )
+            }
+          ),
+          nextTarget != null && /* @__PURE__ */ jsxs(
+            View,
+            {
+              className: "flex-row items-center",
+              style: {
+                gap: 8,
+                backgroundColor: "rgba(20,184,166,0.06)",
+                borderWidth: 1,
+                borderColor: "rgba(20,184,166,0.2)",
+                borderRadius: 8,
+                paddingVertical: 10,
+                paddingHorizontal: 12
+              },
+              testID: "meso-status-card-next-target",
+              children: [
+                /* @__PURE__ */ jsx(Text, { style: { fontSize: 14, color: SUCCESS }, accessibilityElementsHidden: true, children: nextTarget.icon }),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    style: {
+                      flexShrink: 1,
+                      fontSize: 12,
+                      fontFamily: "Inter, sans-serif",
+                      fontWeight: "600",
+                      color: SUCCESS
+                    },
+                    children: nextTarget.text
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/theme/workout-tokens.ts
+var WORKOUT_TOKENS = {
+  // Canonical 4-band performance scale — the single source for BOTH the
+  // VelocityStrip zone bars and the SetRow RPE color (TD-03.43). The direction
+  // is intentionally inverted between the two consumers: for velocity, green =
+  // fastest/best; for RPE, green = easiest. Each component maps its own
+  // thresholds onto these four colors. Kept as vivid data-viz values (distinct
+  // from the muted status tokens) and theme-independent, so — like the heatmap
+  // scale below — they are consumed inline as a JS import rather than CSS vars.
+  // A JS import also resolves on native RN, unlike var(--…) strings.
+  scale: {
+    green: "#2ed573",
+    yellow: "#ffd43b",
+    orange: "#ffa502",
+    red: "#ff4757"
+  },
+  // BodyMap volume heatmap scale (drive dynamic SVG fills, so inline values).
+  // Maps weekly-volume status against MEV/MAV/MRV landmarks to a fill color.
+  heatmap: {
+    none: "#E0E0E0",
+    // gray — no training data
+    under: "#4A90D9",
+    // cool blue — below MEV
+    maintenance: "#F5C842",
+    // warm yellow — MEV to MAV
+    productive: "#4CAF50",
+    // green — MAV to MRV
+    approaching: "#FFA502",
+    // orange — near MRV
+    over: "#FF6B35"
+    // red-orange — over MRV
+  },
+  // Badge border-radius (rounded-sm is 4px, we need 2px)
+  badgeRadius: 2,
+  // Surface and border colors were removed here: those flip with the theme, so
+  // components use the CSS custom properties (var(--color-surface-*/border-*))
+  // directly. Only theme-independent data-viz values remain below.
+  // Intensity bar specific
+  intensity: {
+    track: "#333333",
+    over1: "#D14343",
+    over2: "#A62626",
+    over3: "#7A1C1C",
+    targetLine: "rgba(33, 150, 243, 0.5)",
+    atTargetGlow: "0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)"
+  },
+  // Placeholder strip
+  placeholder: {
+    fill: "#3A3A3A"
+  },
+  // Deviation bar
+  deviation: {
+    track: "#333333"
+  }
+};
+
+export { Badge, BadgeText, Card, CardContent, CardDescription, CardFooter, CardHeader, CardSkeleton, CardTitle, Indicator, MesoStatusCard, Sparkline, StatusDot, WORKOUT_TOKENS, cn, jsx, jsxs };
+//# sourceMappingURL=chunk-TOD2WQBG.mjs.map
+//# sourceMappingURL=chunk-TOD2WQBG.mjs.map