@titan-design/react-ui 0.7.0 → 0.8.0

package/dist/pages.js

@@ -35,6 +35,8 @@ var primitiveColors = {
     900: "#111827"},
   // Charcoal scale (dark backgrounds)
   charcoal: {
+    0: "#6E6E6E",
+    100: "#4C4C4C",
     200: "#3C3C3C",
     300: "#2C2C2C",
     400: "#1F1F1F",
@@ -606,6 +608,14 @@ var EXPANDED_ENCODED_PCT = 45;
 var EXPANDED_HEIGHT = 60;
 var FIXED_MAX_VELOCITY = 1.15;
 var BARE_STUB_HEIGHT = 3;
+var HERO_HEIGHT = 220;
+var HERO_LABEL_HEADROOM = 20;
+var HERO_BAR_GAP = 8;
+var HERO_BAR_MAX_WIDTH = 52;
+var HERO_BAR_RADIUS = 5;
+var HERO_MIN_BAR_HEIGHT = 4;
+var HERO_PENDING_COLOR = primitiveColors.charcoal[100];
+var HERO_REFERENCE_COLOR = primitiveColors.charcoal[0];
 function scaleDenominator(scale, maxVelocity) {
   return scale === "fixed" ? FIXED_MAX_VELOCITY : maxVelocity * 1.15;
 }
@@ -633,6 +643,183 @@ function usePrefersReducedMotion() {
 var ANIMATION_DURATION = 400;
 var ANIMATION_EASING = reactNative.Easing.bezier(0.22, 1, 0.36, 1);
 var POP_EASING = reactNative.Easing.bezier(0.34, 1.56, 0.64, 1);
+function useLiveRepPop(active, liveRepIndex, liveVelocity, isNewPeak) {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [liveScale] = react.useState(() => new reactNative.Animated.Value(1));
+  react.useEffect(() => {
+    if (!active || liveRepIndex == null || liveVelocity == null) return;
+    if (prefersReducedMotion) {
+      liveScale.setValue(1);
+      return;
+    }
+    if (isNewPeak) {
+      liveScale.setValue(1);
+      reactNative.Animated.sequence([
+        reactNative.Animated.timing(liveScale, {
+          toValue: 1.25,
+          duration: 150,
+          easing: reactNative.Easing.out(reactNative.Easing.quad),
+          useNativeDriver: true
+        }),
+        reactNative.Animated.spring(liveScale, {
+          toValue: 1,
+          friction: 3,
+          tension: 140,
+          useNativeDriver: true
+        })
+      ]).start();
+    } else {
+      liveScale.setValue(0.8);
+      reactNative.Animated.timing(liveScale, {
+        toValue: 1,
+        duration: 300,
+        easing: POP_EASING,
+        useNativeDriver: true
+      }).start();
+    }
+  }, [active, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveScale]);
+  return liveScale;
+}
+function HeroVelocityChart({
+  doneVelocities,
+  barColorFor,
+  scaleDenom,
+  referenceVelocity,
+  liveRepIndex,
+  isNewPeak,
+  targetReps,
+  height,
+  className,
+  viewProps
+}) {
+  const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : void 0;
+  const liveScale = useLiveRepPop(true, liveRepIndex, liveVelocity, isNewPeak);
+  const plotHeight = Math.max(0, height - HERO_LABEL_HEADROOM);
+  const barHeight = (velocity) => scaleDenom > 0 ? Math.max(HERO_MIN_BAR_HEIGHT, Math.min(1, velocity / scaleDenom) * plotHeight) : HERO_MIN_BAR_HEIGHT;
+  const pendingCount = Math.max(0, (targetReps ?? 0) - doneVelocities.length);
+  const referencePx = referenceVelocity > 0 && scaleDenom > 0 ? Math.min(plotHeight, referenceVelocity / scaleDenom * plotHeight) : 0;
+  const repCount = doneVelocities.length;
+  const total = Math.max(repCount, targetReps ?? repCount);
+  const label = referenceVelocity > 0 ? `Velocity chart, ${repCount} of ${total} reps, best ${formatVelocity(referenceVelocity)} meters per second` : `Velocity chart, ${repCount} of ${total} reps`;
+  const { style: externalStyle, ...restProps } = viewProps;
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      className,
+      style: [{ height }, externalStyle],
+      accessibilityRole: "image",
+      accessibilityLabel: label,
+      testID: "velocity-strip-hero",
+      ...restProps,
+      children: /* @__PURE__ */ jsxs(
+        reactNative.View,
+        {
+          style: {
+            flex: 1,
+            flexDirection: "row",
+            alignItems: "flex-end",
+            gap: HERO_BAR_GAP,
+            position: "relative",
+            borderBottomWidth: 2,
+            borderBottomColor: HERO_PENDING_COLOR
+          },
+          children: [
+            referencePx > 0 && /* @__PURE__ */ jsx(
+              reactNative.View,
+              {
+                accessibilityElementsHidden: true,
+                style: {
+                  position: "absolute",
+                  left: 0,
+                  right: 0,
+                  bottom: referencePx,
+                  borderTopWidth: 1,
+                  borderStyle: "dashed",
+                  borderColor: HERO_REFERENCE_COLOR,
+                  pointerEvents: "none"
+                },
+                testID: "velocity-hero-reference"
+              }
+            ),
+            doneVelocities.map((velocity, i) => {
+              const isLive = liveRepIndex === i;
+              return /* @__PURE__ */ jsxs(
+                reactNative.View,
+                {
+                  accessibilityElementsHidden: true,
+                  style: {
+                    flex: 1,
+                    maxWidth: HERO_BAR_MAX_WIDTH,
+                    height: "100%",
+                    alignItems: "center",
+                    justifyContent: "flex-end"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      reactNative.Text,
+                      {
+                        className: "text-text-primary",
+                        style: { fontSize: 12, fontWeight: "800", marginBottom: 4 },
+                        testID: `velocity-label-${i}`,
+                        children: formatVelocity(velocity)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      reactNative.Animated.View,
+                      {
+                        style: [
+                          {
+                            width: "100%",
+                            height: barHeight(velocity),
+                            borderTopLeftRadius: HERO_BAR_RADIUS,
+                            borderTopRightRadius: HERO_BAR_RADIUS,
+                            backgroundColor: barColorFor(velocity)
+                          },
+                          isLive ? { transform: [{ scale: liveScale }] } : null
+                        ],
+                        testID: `velocity-bar-${i}`
+                      }
+                    )
+                  ]
+                },
+                i
+              );
+            }),
+            Array.from({ length: pendingCount }, (_, i) => /* @__PURE__ */ jsx(
+              reactNative.View,
+              {
+                accessibilityElementsHidden: true,
+                style: {
+                  flex: 1,
+                  maxWidth: HERO_BAR_MAX_WIDTH,
+                  height: "100%",
+                  alignItems: "center",
+                  justifyContent: "flex-end"
+                },
+                children: /* @__PURE__ */ jsx(
+                  reactNative.View,
+                  {
+                    style: {
+                      width: "100%",
+                      height: HERO_MIN_BAR_HEIGHT * 3,
+                      borderWidth: 1,
+                      borderStyle: "dashed",
+                      borderColor: HERO_PENDING_COLOR,
+                      borderTopLeftRadius: HERO_BAR_RADIUS,
+                      borderTopRightRadius: HERO_BAR_RADIUS
+                    },
+                    testID: "velocity-slot-todo"
+                  }
+                )
+              },
+              `pending-${i}`
+            ))
+          ]
+        }
+      )
+    }
+  );
+}
 function VelocityStrip({
   velocities,
   set,
@@ -643,6 +830,7 @@ function VelocityStrip({
   onRepPress,
   variant = "expanded",
   height = EXPANDED_HEIGHT,
+  targetReps,
   scale = "peak",
   showNumbers = true,
   showInfo = true,
@@ -668,45 +856,17 @@ function VelocityStrip({
     return SET_STRIP_VARIABLE_COLOR;
   };
   const meanZone = hasZones ? classifyBand(meanVelocity, zones)?.label ?? "" : getVelocityZoneName(meanVelocity);
-  const prefersReducedMotion = usePrefersReducedMotion();
   const [heightAnim] = react.useState(() => new reactNative.Animated.Value(expanded ? height : 3));
   const [labelOpacity] = react.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
   const [infoOpacity] = react.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
-  const [liveScale] = react.useState(() => new reactNative.Animated.Value(1));
   const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : void 0;
   const isNewPeak = liveVelocity != null && maxVelocity > 0 && liveVelocity === maxVelocity;
-  react.useEffect(() => {
-    if (variant !== "expanded" || !framed || liveRepIndex == null || liveVelocity == null) return;
-    if (prefersReducedMotion) {
-      liveScale.setValue(1);
-      return;
-    }
-    if (isNewPeak) {
-      liveScale.setValue(1);
-      reactNative.Animated.sequence([
-        reactNative.Animated.timing(liveScale, {
-          toValue: 1.25,
-          duration: 150,
-          easing: reactNative.Easing.out(reactNative.Easing.quad),
-          useNativeDriver: true
-        }),
-        reactNative.Animated.spring(liveScale, {
-          toValue: 1,
-          friction: 3,
-          tension: 140,
-          useNativeDriver: true
-        })
-      ]).start();
-    } else {
-      liveScale.setValue(0.8);
-      reactNative.Animated.timing(liveScale, {
-        toValue: 1,
-        duration: 300,
-        easing: POP_EASING,
-        useNativeDriver: true
-      }).start();
-    }
-  }, [variant, framed, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveScale]);
+  const liveScale = useLiveRepPop(
+    variant === "expanded" && framed,
+    liveRepIndex,
+    liveVelocity,
+    isNewPeak
+  );
   react.useEffect(() => {
     if (variant !== "expanded" || !framed) return;
     reactNative.Animated.parallel([
@@ -733,6 +893,24 @@ function VelocityStrip({
   if (set == null && velocities == null) return null;
   const repCount = doneVelocities.length;
   const miniLabel = set ? setAccessibilityLabel(set, repCount) : `Velocity strip, ${repCount} reps`;
+  if (variant === "hero") {
+    const heroHeight = height === EXPANDED_HEIGHT ? HERO_HEIGHT : height;
+    return /* @__PURE__ */ jsx(
+      HeroVelocityChart,
+      {
+        doneVelocities,
+        barColorFor,
+        scaleDenom,
+        referenceVelocity: maxVelocity,
+        liveRepIndex,
+        isNewPeak,
+        targetReps,
+        height: heroHeight,
+        className,
+        viewProps: props
+      }
+    );
+  }
   if (variant === "mini") {
     const { style: externalStyle, ...restProps } = props;
     return /* @__PURE__ */ jsx(
@@ -2993,9 +3171,270 @@ function useTimer(options = {}) {
   const done = durationMs != null && elapsedMs >= durationMs;
   return { elapsedMs, remainingMs, progress, label, done };
 }
+var colorVarMap = {
+  primary: "var(--color-brand-primary)",
+  secondary: "var(--color-brand-secondary)",
+  success: "var(--color-status-success)",
+  error: "var(--color-status-error)",
+  warning: "var(--color-status-warning)",
+  info: "var(--color-status-info)"
+};
+function CircularProgress({
+  value = 0,
+  max = 100,
+  isIndeterminate = false,
+  size = 48,
+  strokeWidth = 4,
+  color = "primary",
+  showValue = false,
+  formatValue: formatValue2 = (v, m) => `${Math.round(v / m * 100)}%`,
+  children,
+  fill = false,
+  className,
+  ...props
+}) {
+  const percentage = Math.min(Math.max(value / max * 100, 0), 100);
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference - percentage / 100 * circumference;
+  const center = size / 2;
+  const boxStyle = fill ? { width: "100%", aspectRatio: 1 } : { width: size, height: size };
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      className: cn("items-center justify-center", className),
+      style: boxStyle,
+      accessibilityRole: "progressbar",
+      accessibilityValue: {
+        min: 0,
+        max,
+        now: isIndeterminate ? void 0 : value
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(reactNative.View, { className: cn(isIndeterminate && "animate-spin"), style: boxStyle, children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "100%",
+            height: "100%",
+            viewBox: `0 0 ${size} ${size}`,
+            style: { position: "absolute" },
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: center,
+                  cy: center,
+                  r: radius,
+                  fill: "none",
+                  stroke: "var(--color-border-default)",
+                  strokeWidth
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: center,
+                  cy: center,
+                  r: radius,
+                  fill: "none",
+                  stroke: colorVarMap[color],
+                  strokeWidth,
+                  strokeLinecap: "round",
+                  strokeDasharray: circumference,
+                  strokeDashoffset: isIndeterminate ? circumference * 0.75 : strokeDashoffset,
+                  transform: `rotate(-90 ${center} ${center})`,
+                  style: { transition: "stroke-dashoffset 300ms cubic-bezier(0.22, 1, 0.36, 1)" }
+                }
+              )
+            ]
+          }
+        ) }),
+        children != null ? /* @__PURE__ */ jsx(
+          reactNative.View,
+          {
+            style: {
+              position: "absolute",
+              alignItems: "center",
+              justifyContent: "center",
+              pointerEvents: "none"
+            },
+            children
+          }
+        ) : showValue && !isIndeterminate && /* @__PURE__ */ jsx(
+          reactNative.Text,
+          {
+            className: "text-xs font-semibold text-text-primary absolute",
+            style: { fontSize: Math.max(size * 0.22, 10) },
+            children: formatValue2(value, max)
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/custom/CircularTimer/CircularTimer.tsx
+function CircularTimer({
+  durationMs,
+  elapsedMs,
+  mode = "down",
+  size = 160,
+  strokeWidth = 8,
+  fill = false,
+  color = "primary",
+  doneLabel,
+  doneColor = "success",
+  controls,
+  accessibilityLabel: accessibilityLabel2,
+  testID
+}) {
+  const { remainingMs, progress, label, done } = useTimer({ mode, durationMs, elapsedMs });
+  const isDone = done && mode === "down";
+  const showDone = isDone && doneLabel != null;
+  const remainingFrac = durationMs > 0 ? Math.max(0, Math.min(1, remainingMs / durationMs)) : 0;
+  const arc = mode === "down" ? showDone ? 1 : remainingFrac : progress;
+  const ringColor = showDone ? doneColor : color;
+  const remainingSec = Math.ceil(Math.max(0, remainingMs) / 1e3);
+  const a11y = accessibilityLabel2 ?? (isDone ? "Timer complete" : `${remainingSec} seconds remaining`);
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      style: { alignItems: "center", gap: 16 },
+      accessibilityRole: "timer",
+      accessibilityLabel: a11y,
+      testID: testID ?? "circular-timer",
+      children: [
+        /* @__PURE__ */ jsx(
+          CircularProgress,
+          {
+            value: arc,
+            max: 1,
+            size,
+            strokeWidth,
+            fill,
+            color: ringColor,
+            accessibilityLabel: "Timer ring",
+            testID: "circular-timer-ring",
+            children: /* @__PURE__ */ jsx(
+              reactNative.Text,
+              {
+                className: showDone ? void 0 : "text-text-primary",
+                style: {
+                  fontSize: Math.round(size * (showDone ? 0.28 : 0.24)),
+                  fontFamily: '"Space Grotesk", sans-serif',
+                  fontWeight: "800",
+                  fontVariant: ["tabular-nums"],
+                  letterSpacing: showDone ? 1 : -1,
+                  ...showDone ? { color: colorVarMap[doneColor] } : null
+                },
+                testID: "circular-timer-label",
+                children: showDone ? doneLabel : label
+              }
+            )
+          }
+        ),
+        controls
+      ]
+    }
+  );
+}
 
 // src/components/custom/Workout/RestTimer.tsx
 var BRAND_PRIMARY3 = getSemanticColors("dark")["brand-primary"];
+var RING_DEFAULT_SIZE = 180;
+function RestActions({ onAddTime, onSkip }) {
+  return /* @__PURE__ */ jsxs(reactNative.View, { style: { flexDirection: "row", gap: 8 }, children: [
+    /* @__PURE__ */ jsx(
+      reactNative.Pressable,
+      {
+        onPress: onAddTime,
+        style: {
+          backgroundColor: "rgba(255,255,255,0.06)",
+          paddingVertical: 8,
+          paddingHorizontal: 20,
+          borderRadius: 8
+        },
+        accessibilityRole: "button",
+        accessibilityLabel: "Add 30 seconds",
+        testID: "rest-timer-add-time",
+        children: /* @__PURE__ */ jsx(
+          reactNative.Text,
+          {
+            className: "text-text-secondary",
+            style: { fontSize: 11, fontFamily: "Inter, sans-serif", fontWeight: "600" },
+            children: "+30s"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      reactNative.Pressable,
+      {
+        onPress: onSkip,
+        style: {
+          backgroundColor: "rgba(255,121,0,0.12)",
+          paddingVertical: 8,
+          paddingHorizontal: 20,
+          borderRadius: 8
+        },
+        accessibilityRole: "button",
+        accessibilityLabel: "Skip rest",
+        testID: "rest-timer-skip",
+        children: /* @__PURE__ */ jsx(
+          reactNative.Text,
+          {
+            style: {
+              fontSize: 11,
+              fontFamily: "Inter, sans-serif",
+              fontWeight: "600",
+              color: BRAND_PRIMARY3
+            },
+            children: "Skip"
+          }
+        )
+      }
+    )
+  ] });
+}
+function RestTimerRing({
+  totalSeconds,
+  elapsedMs,
+  remainingSec,
+  done,
+  size,
+  nextSetInfo,
+  displayOnly,
+  onSkip,
+  onAddTime
+}) {
+  const a11yLabel = done ? "Rest complete, next set ready" : `Rest timer, ${Math.max(0, remainingSec)} seconds remaining`;
+  return /* @__PURE__ */ jsxs(reactNative.View, { style: { alignItems: "center", gap: 16 }, testID: "rest-timer", children: [
+    /* @__PURE__ */ jsx(
+      CircularTimer,
+      {
+        durationMs: totalSeconds * 1e3,
+        elapsedMs,
+        mode: "down",
+        size,
+        doneLabel: "GO",
+        doneColor: "success",
+        accessibilityLabel: a11yLabel,
+        controls: !displayOnly ? /* @__PURE__ */ jsx(RestActions, { onAddTime, onSkip }) : void 0,
+        testID: "rest-timer-ring"
+      }
+    ),
+    nextSetInfo != null && /* @__PURE__ */ jsx(
+      reactNative.Text,
+      {
+        className: "text-text-tertiary",
+        style: { fontSize: 13, fontFamily: "Inter, sans-serif" },
+        testID: "rest-timer-next-set",
+        children: nextSetInfo
+      }
+    )
+  ] });
+}
 function RestTimer({
   totalSeconds,
   elapsedMs,
@@ -3003,12 +3442,15 @@ function RestTimer({
   onAddTime,
   nextSetInfo,
   visible,
-  displayOnly = false
+  displayOnly = false,
+  variant = "bar",
+  size = RING_DEFAULT_SIZE
 }) {
   const {
     remainingMs,
     progress,
-    label: timeDisplay
+    label: timeDisplay,
+    done
   } = useTimer({
     mode: "down",
     durationMs: totalSeconds * 1e3,
@@ -3017,6 +3459,22 @@ function RestTimer({
   const remainingSec = Math.ceil(remainingMs / 1e3);
   const progressPct = progress * 100;
   if (!visible) return null;
+  if (variant === "ring") {
+    return /* @__PURE__ */ jsx(
+      RestTimerRing,
+      {
+        totalSeconds,
+        elapsedMs,
+        remainingSec,
+        done,
+        size,
+        nextSetInfo,
+        displayOnly,
+        onSkip,
+        onAddTime
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
@@ -3114,62 +3572,7 @@ function RestTimer({
             )
           }
         ),
-        !displayOnly && /* @__PURE__ */ jsxs(reactNative.View, { style: { flexDirection: "row", gap: 8 }, children: [
-          /* @__PURE__ */ jsx(
-            reactNative.Pressable,
-            {
-              onPress: onAddTime,
-              style: {
-                backgroundColor: "rgba(255,255,255,0.06)",
-                paddingVertical: 8,
-                paddingHorizontal: 20,
-                borderRadius: 8
-              },
-              accessibilityRole: "button",
-              accessibilityLabel: "Add 30 seconds",
-              testID: "rest-timer-add-time",
-              children: /* @__PURE__ */ jsx(
-                reactNative.Text,
-                {
-                  className: "text-text-secondary",
-                  style: {
-                    fontSize: 11,
-                    fontFamily: "Inter, sans-serif",
-                    fontWeight: "600"
-                  },
-                  children: "+30s"
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            reactNative.Pressable,
-            {
-              onPress: onSkip,
-              style: {
-                backgroundColor: "rgba(255,121,0,0.12)",
-                paddingVertical: 8,
-                paddingHorizontal: 20,
-                borderRadius: 8
-              },
-              accessibilityRole: "button",
-              accessibilityLabel: "Skip rest",
-              testID: "rest-timer-skip",
-              children: /* @__PURE__ */ jsx(
-                reactNative.Text,
-                {
-                  style: {
-                    fontSize: 11,
-                    fontFamily: "Inter, sans-serif",
-                    fontWeight: "600",
-                    color: BRAND_PRIMARY3
-                  },
-                  children: "Skip"
-                }
-              )
-            }
-          )
-        ] })
+        !displayOnly && /* @__PURE__ */ jsx(RestActions, { onAddTime, onSkip })
       ]
     }
   );