@titan-design/react-ui 0.4.0 → 0.5.0

package/dist/chunk-2SISKTWM.mjs

@@ -1,1027 +0,0 @@
-import { resolveColor, getValidatedElevation, getBaseSurfaceColor, getElevationSurface, getElevationShadow, jsxs, Fragment, jsx } from './chunk-SNVKL5WZ.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';
-
-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);
-}
-
-// 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 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, ${resolveColor("surface-elevated")} 0%, ${resolveColor("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,
-      {
-        className: "text-text-primary",
-        style: { fontWeight: "700" },
-        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,
-      {
-        className: "text-text-tertiary",
-        style: {
-          fontSize: 10,
-          fontFamily: "Inter, sans-serif",
-          fontWeight: "600",
-          letterSpacing: 0.5,
-          textTransform: "uppercase"
-        },
-        children: metric.label
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Text,
-      {
-        className: "text-text-primary",
-        style: {
-          marginTop: 2,
-          fontSize: 13,
-          fontFamily: "Inter, sans-serif",
-          fontWeight: "600"
-        },
-        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,
-                {
-                  className: "text-text-secondary",
-                  style: {
-                    fontSize: 10,
-                    fontFamily: "Inter, sans-serif",
-                    fontWeight: "500",
-                    letterSpacing: 0.5,
-                    textTransform: "uppercase"
-                  },
-                  children: gauge.label
-                }
-              ),
-              gauge.sublabel != null && /* @__PURE__ */ jsx(
-                Text,
-                {
-                  className: "text-text-tertiary",
-                  style: {
-                    fontSize: 10,
-                    fontFamily: "Inter, sans-serif",
-                    fontWeight: "500"
-                  },
-                  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,
-                {
-                  className: "border-text-primary",
-                  style: {
-                    position: "absolute",
-                    left: `${percentage}%`,
-                    top: -3,
-                    marginLeft: -7,
-                    width: 14,
-                    height: 14,
-                    borderRadius: 9999,
-                    borderWidth: 2,
-                    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,
-                    {
-                      className: "text-text-primary",
-                      style: {
-                        flexShrink: 1,
-                        fontSize: 15,
-                        fontFamily: '"Space Grotesk", sans-serif',
-                        fontWeight: "700"
-                      },
-                      testID: "meso-status-card-name",
-                      children: mesoName
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(StatusPill, { badge: statusBadge })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Text,
-              {
-                className: "text-text-secondary",
-                style: {
-                  marginTop: 4,
-                  fontSize: 12,
-                  fontFamily: "Inter, sans-serif"
-                },
-                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,
-                {
-                  className: "text-text-secondary",
-                  style: {
-                    fontSize: 12,
-                    lineHeight: 17,
-                    fontFamily: "Inter, sans-serif"
-                  },
-                  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 };
-//# sourceMappingURL=chunk-2SISKTWM.mjs.map
-//# sourceMappingURL=chunk-2SISKTWM.mjs.map