@titan-design/react-ui 0.1.0 → 0.2.5

package/dist/index.mjs

@@ -1,14 +1,33 @@
-import { semanticColorsDark, getHoverColors, getValidatedElevation, getBaseSurfaceColor, getElevationSurface, getElevationShadow, getGlowShadow, neumorphicShadows } from './chunk-MGW37MPO.mjs';
-export { buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, discreteRainbow, elevationSystem, getBaseSurfaceColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isDark, lightThemeCSSVars, lighten, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, shadowColors } from './chunk-MGW37MPO.mjs';
-import { Pressable, ActivityIndicator, Text, View, TextInput, StyleSheet, Platform, Image, Modal as Modal$1, ScrollView } from 'react-native';
+import { semanticColorsDark, __require, getHoverColors, getValidatedElevation, getBaseSurfaceColor, getElevationSurface, getElevationShadow, getGlowShadow, neumorphicShadows } from './chunk-UXVRPOME.mjs';
+export { applyThemePreset, audiobookPreset, buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultPreset, discreteRainbow, elevationSystem, getBaseSurfaceColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isDark, lightThemeCSSVars, lighten, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, shadowColors } from './chunk-UXVRPOME.mjs';
+import { Pressable, ActivityIndicator, Text, View, TextInput, Platform, StyleSheet, Image, Modal as Modal$1, ScrollView } from 'react-native';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React24, { forwardRef, useState, createContext, useMemo, useContext, useRef, useCallback, useEffect, useSyncExternalStore } from 'react';
+import { jsx as jsx$1, jsxs as jsxs$1, Fragment } from 'react/jsx-runtime';
+import React24, { forwardRef, useState, createContext, useMemo, useContext, useRef, useEffect, useCallback, useSyncExternalStore } from 'react';
 
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+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/alert/Alert.tsx
 var statusColors = {
   success: {
     subtle: "bg-status-success-subtle",
@@ -99,6 +118,48 @@ function AlertTitle({ children, className }) {
 function AlertDescription({ children, className }) {
   return /* @__PURE__ */ jsx(Text, { className: cn("text-sm text-text-secondary", className), children });
 }
+var textColorMap = {
+  solid: {
+    primary: "#FFFFFF",
+    secondary: "#FFFFFF",
+    success: "#FFFFFF",
+    error: "#FFFFFF",
+    warning: "#FFFFFF",
+    info: "#FFFFFF"
+  },
+  outline: {
+    primary: semanticColorsDark["brand-primary"],
+    secondary: semanticColorsDark["brand-secondary"],
+    success: semanticColorsDark["status-success"],
+    error: semanticColorsDark["status-error"],
+    warning: semanticColorsDark["status-warning"],
+    info: semanticColorsDark["status-info"]
+  },
+  ghost: {
+    primary: semanticColorsDark["brand-primary"],
+    secondary: semanticColorsDark["brand-secondary"],
+    success: semanticColorsDark["status-success"],
+    error: semanticColorsDark["status-error"],
+    warning: semanticColorsDark["status-warning"],
+    info: semanticColorsDark["status-info"]
+  },
+  link: {
+    primary: semanticColorsDark["brand-primary"],
+    secondary: semanticColorsDark["brand-secondary"],
+    success: semanticColorsDark["status-success"],
+    error: semanticColorsDark["status-error"],
+    warning: semanticColorsDark["status-warning"],
+    info: semanticColorsDark["status-info"]
+  }
+};
+var borderColorMap = {
+  primary: semanticColorsDark["brand-primary"],
+  secondary: semanticColorsDark["brand-secondary"],
+  success: semanticColorsDark["status-success"],
+  error: semanticColorsDark["status-error"],
+  warning: semanticColorsDark["status-warning"],
+  info: semanticColorsDark["status-info"]
+};
 var variantStyles = {
   solid: {
     primary: "bg-brand-primary active:bg-brand-primary-dark active:scale-[0.98] web:hover:bg-brand-primary-dark web:active:scale-[0.98]",
@@ -196,6 +257,12 @@ var Button = forwardRef(function Button2({
   ...props
 }, ref) {
   const disabled = isDisabled || isLoading;
+  const inlineStyle = {
+    color: textColorMap[variant][color]
+  };
+  if (variant === "outline") {
+    inlineStyle.borderColor = borderColorMap[color];
+  }
   return /* @__PURE__ */ jsxs(
     Pressable,
     {
@@ -218,6 +285,7 @@ var Button = forwardRef(function Button2({
         variant === "link" && "px-0 py-0 min-h-0",
         className
       ),
+      style: inlineStyle,
       ...props,
       children: [
         isLoading && /* @__PURE__ */ jsx(
@@ -236,6 +304,7 @@ var Button = forwardRef(function Button2({
               textSizeStyles[size],
               textStyles[variant][color]
             ),
+            style: { color: textColorMap[variant][color] },
             children: loadingText
           }
         ) : children
@@ -437,13 +506,17 @@ function getServerSnapshot() {
 function useTheme() {
   return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
+
+// src/components/ui/card/Card.tsx
 var variantStyles3 = {
   elevated: "",
   // Will be set dynamically via elevation system
   outline: "border-2 border-border-strong",
   // Thicker border with stronger contrast
-  filled: ""
+  filled: "",
   // Will be set dynamically via elevation system
+  accent: "border border-border-default",
+  subtle: "border border-border-subtle"
 };
 function Card({
   variant = "elevated",
@@ -453,6 +526,8 @@ function Card({
   onPress,
   borderColor,
   bgColor,
+  accentColor,
+  accentWidth,
   className,
   children,
   style,
@@ -466,16 +541,19 @@ function Card({
   const theme = useTheme();
   const elevationLevel = useMemo(() => {
     const validated = getValidatedElevation("card", elevation);
-    if (variant === "outline") {
+    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" && theme === "light") {
+    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(() => {
@@ -509,17 +587,24 @@ function Card({
     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,
-      ...shadowStyle
+      borderRadius: 8,
+      overflow: "hidden",
+      ...shadowStyle,
+      ...accentStyle
     };
     if (borderColor) {
       elevationStyle.borderColor = borderColor;
     }
     if (!style) return elevationStyle;
-    return [style, elevationStyle];
-  }, [style, surfaceColor, shadowStyle, borderColor, bgColor]);
+    return [elevationStyle, style];
+  }, [style, surfaceColor, shadowStyle, borderColor, bgColor, accentStyle]);
   if (isClickable) {
     return /* @__PURE__ */ jsx(
       Pressable,
@@ -583,6 +668,57 @@ function CardSkeleton({
     hasFooter && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(View, { className: "h-9 w-24 bg-interactive-disabled rounded" }) })
   ] });
 }
+var sizeStyles3 = {
+  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",
+        sizeStyles3[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
+    }
+  );
+}
+
+// src/components/ui/badge/Badge.tsx
 var variantColorStyles = {
   solid: {
     default: "bg-border-strong text-text-inverse",
@@ -612,7 +748,7 @@ var variantColorStyles = {
     info: "border border-status-info text-status-info"
   }
 };
-var sizeStyles3 = {
+var sizeStyles4 = {
   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"
@@ -621,21 +757,33 @@ function Badge({
   variant = "subtle",
   color = "default",
   size = "md",
+  dot,
+  dotColor,
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     View,
     {
       className: cn(
         "inline-flex items-center justify-center rounded-full font-medium",
         variantColorStyles[variant][color],
-        sizeStyles3[size],
+        sizeStyles4[size],
         className
       ),
       ...props,
-      children: typeof children === "string" ? /* @__PURE__ */ jsx(Text, { className: "text-inherit font-medium", children }) : children
+      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
+      ]
     }
   );
 }
@@ -684,7 +832,33 @@ function Spinner({
     }
   );
 }
-var sizeStyles4 = {
+
+// src/utils/avatar-color.ts
+var AVATAR_COLORS = [
+  "#FF6B6B",
+  "#4ECDC4",
+  "#45B7D1",
+  "#96CEB4",
+  "#FFEAA7",
+  "#DDA0DD",
+  "#98D8C8"
+];
+function avatarColor(name) {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+}
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0][0]?.toUpperCase() ?? "?";
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+
+// src/components/ui/avatar/Avatar.tsx
+var sizeStyles5 = {
   xs: { container: "w-6 h-6", text: "text-xs", image: "w-6 h-6" },
   sm: { container: "w-8 h-8", text: "text-xs", image: "w-8 h-8" },
   md: { container: "w-10 h-10", text: "text-sm", image: "w-10 h-10" },
@@ -697,22 +871,26 @@ function Avatar({
   source,
   fallback,
   alt,
+  colorFromName,
   className,
   ...props
 }) {
-  const styles2 = sizeStyles4[size];
+  const styles2 = sizeStyles5[size];
   const hasImage = source !== void 0;
+  const resolvedFallback = fallback ?? (colorFromName ? getInitials(colorFromName) : void 0);
+  const nameColor = colorFromName ? avatarColor(colorFromName) : void 0;
   return /* @__PURE__ */ jsx(
     View,
     {
       accessibilityRole: "image",
-      accessibilityLabel: alt || fallback || "Avatar",
+      accessibilityLabel: alt || resolvedFallback || "Avatar",
       className: cn(
         "items-center justify-center rounded-full overflow-hidden",
-        "bg-border-strong",
+        !nameColor && "bg-border-strong",
         styles2.container,
         className
       ),
+      style: nameColor ? { backgroundColor: nameColor } : void 0,
       ...props,
       children: hasImage ? /* @__PURE__ */ jsx(
         Image,
@@ -721,7 +899,7 @@ function Avatar({
           className: cn("rounded-full", styles2.image),
           accessibilityLabel: alt
         }
-      ) : fallback ? /* @__PURE__ */ jsx(Text, { className: cn("font-semibold text-text-primary", styles2.text), children: fallback }) : /* @__PURE__ */ jsx(View, { className: "w-full h-full bg-surface-raised" })
+      ) : resolvedFallback ? /* @__PURE__ */ jsx(Text, { className: cn("font-semibold text-text-inverse", styles2.text), children: resolvedFallback }) : /* @__PURE__ */ jsx(View, { className: "w-full h-full bg-surface-raised" })
     }
   );
 }
@@ -770,9 +948,9 @@ function AvatarGroup({
         className: cn(
           "border-2 border-surface-base rounded-full -ml-2",
           "items-center justify-center bg-surface-raised",
-          sizeStyles4[size].container
+          sizeStyles5[size].container
         ),
-        children: /* @__PURE__ */ jsxs(Text, { className: cn("font-semibold text-text-secondary", sizeStyles4[size].text), children: [
+        children: /* @__PURE__ */ jsxs(Text, { className: cn("font-semibold text-text-secondary", sizeStyles5[size].text), children: [
           "+",
           remainingCount
         ] })
@@ -798,7 +976,7 @@ function Divider({
     }
   );
 }
-var sizeStyles5 = {
+var sizeStyles6 = {
   sm: { box: "w-4 h-4", icon: "w-2.5 h-2.5", label: "text-sm" },
   md: { box: "w-5 h-5", icon: "w-3 h-3", label: "text-base" },
   lg: { box: "w-6 h-6", icon: "w-3.5 h-3.5", label: "text-lg" }
@@ -816,7 +994,7 @@ var Checkbox = forwardRef(function Checkbox2({
   className,
   ...props
 }, ref) {
-  const styles2 = sizeStyles5[size];
+  const styles2 = sizeStyles6[size];
   const handlePress = () => {
     if (!isDisabled) {
       onCheckedChange?.(!isChecked);
@@ -884,7 +1062,7 @@ function CheckboxGroup({
     )
   ] });
 }
-var sizeStyles6 = {
+var sizeStyles7 = {
   sm: { track: "w-8 h-4", thumb: "w-3 h-3", translate: "translate-x-4" },
   md: { track: "w-10 h-5", thumb: "w-4 h-4", translate: "translate-x-5" },
   lg: { track: "w-12 h-6", thumb: "w-5 h-5", translate: "translate-x-6" }
@@ -899,7 +1077,7 @@ var Switch = forwardRef(function Switch2({
   className,
   ...props
 }, ref) {
-  const styles2 = sizeStyles6[size];
+  const styles2 = sizeStyles7[size];
   const handlePress = () => {
     if (!isDisabled) {
       onCheckedChange?.(!isChecked);
@@ -949,7 +1127,7 @@ var Switch = forwardRef(function Switch2({
   );
 });
 var ModalContext = createContext({ size: "md", scrollBehavior: "outside" });
-var sizeStyles7 = {
+var sizeStyles8 = {
   xs: "max-w-xs",
   sm: "max-w-sm",
   md: "max-w-md",
@@ -1016,7 +1194,7 @@ function ModalContent({ children, className }) {
         {
           className: cn(
             "bg-surface-elevated rounded-lg shadow-xl w-full",
-            sizeStyles7[size],
+            sizeStyles8[size],
             className
           ),
           children
@@ -1326,7 +1504,7 @@ function TabPanels({ children, className }) {
 function TabPanel({ children, className }) {
   return /* @__PURE__ */ jsx(View, { className: cn("py-4", className), children });
 }
-var colorStyles = {
+var colorStyles2 = {
   default: {
     solid: "bg-neutral-600 text-white",
     subtle: "bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-200",
@@ -1363,7 +1541,7 @@ var colorStyles = {
     outline: "border border-status-info text-status-info"
   }
 };
-var sizeStyles8 = {
+var sizeStyles9 = {
   sm: { container: "px-2 py-0.5 rounded", text: "text-xs", deleteButton: "ml-1 -mr-0.5" },
   md: { container: "px-3 py-1 rounded-md", text: "text-sm", deleteButton: "ml-1.5 -mr-1" },
   lg: { container: "px-4 py-1.5 rounded-md", text: "text-base", deleteButton: "ml-2 -mr-1" }
@@ -1380,7 +1558,7 @@ function Chip({
   children,
   ...props
 }) {
-  const sizes = sizeStyles8[size];
+  const sizes = sizeStyles9[size];
   const isClickable = !!onPress;
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     leftElement && /* @__PURE__ */ jsx(View, { className: "mr-1.5", children: leftElement }),
@@ -1406,7 +1584,7 @@ function Chip({
   const baseClassName = cn(
     "flex-row items-center",
     sizes.container,
-    colorStyles[color][variant],
+    colorStyles2[color][variant],
     isClickable && "web:cursor-pointer web:hover:opacity-80 active:opacity-70",
     isDisabled && "opacity-50 cursor-not-allowed",
     className
@@ -1426,7 +1604,7 @@ function Chip({
   }
   return /* @__PURE__ */ jsx(View, { className: baseClassName, ...props, children: content });
 }
-var colorStyles2 = {
+var colorStyles3 = {
   default: "text-text-link",
   primary: "text-brand-primary",
   secondary: "text-brand-secondary",
@@ -1464,7 +1642,7 @@ function Link({
         {
           className: cn(
             "font-medium",
-            colorStyles2[color],
+            colorStyles3[color],
             underlineStyles[underline],
             isDisabled && "opacity-50 cursor-not-allowed",
             "web:cursor-pointer active:opacity-70",
@@ -1480,8 +1658,16 @@ function Link({
     }
   );
 }
+var createPortal;
+if (Platform.OS === "web") {
+  try {
+    createPortal = __require("react-dom").createPortal;
+  } catch {
+  }
+}
 function Tooltip({
   label,
+  content,
   children,
   placement = "top",
   openDelay = 0,
@@ -1489,11 +1675,48 @@ function Tooltip({
   hasArrow = true,
   isDisabled = false,
   className,
+  usePortal: usePortalProp = false,
   ...props
 }) {
   const [isVisible, setIsVisible] = useState(false);
+  const [portalPos, setPortalPos] = useState(null);
   const openTimeoutRef = useRef(null);
   const closeTimeoutRef = useRef(null);
+  const triggerRef = useRef(null);
+  const isPortalMode = usePortalProp && Platform.OS === "web" && !!createPortal;
+  useEffect(() => {
+    if (!isVisible || !isPortalMode || !triggerRef.current) return;
+    const node = triggerRef.current;
+    const id = requestAnimationFrame(() => {
+      const rect = node.getBoundingClientRect();
+      const gap = 8;
+      const cardinal = placement.split("-")[0];
+      const positions = {
+        top: {
+          top: rect.top - gap,
+          left: rect.left + rect.width / 2,
+          transform: "translate(-50%, -100%)"
+        },
+        bottom: {
+          top: rect.bottom + gap,
+          left: rect.left + rect.width / 2,
+          transform: "translate(-50%, 0%)"
+        },
+        left: {
+          top: rect.top + rect.height / 2,
+          left: rect.left - gap,
+          transform: "translate(-100%, -50%)"
+        },
+        right: {
+          top: rect.top + rect.height / 2,
+          left: rect.right + gap,
+          transform: "translate(0%, -50%)"
+        }
+      };
+      setPortalPos(positions[cardinal] ?? positions.top);
+    });
+    return () => cancelAnimationFrame(id);
+  }, [isVisible, isPortalMode, placement]);
   const clearTimeouts = () => {
     if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current);
     if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
@@ -1535,7 +1758,41 @@ function Tooltip({
     left: "right-full top-1/2 -translate-y-1/2 mr-2",
     right: "left-full top-1/2 -translate-y-1/2 ml-2"
   };
-  return /* @__PURE__ */ jsxs(View, { className: "relative", ...props, children: [
+  const tooltipContent = /* @__PURE__ */ jsxs(View, { className: "bg-neutral-800 px-3 py-2 rounded-md shadow-lg max-w-xs", children: [
+    content ?? /* @__PURE__ */ jsx(Text, { className: "text-white text-sm", children: label }),
+    hasArrow && /* @__PURE__ */ jsx(
+      View,
+      {
+        className: cn(
+          "absolute w-0 h-0 border-4",
+          arrowStyles2[placement]
+        )
+      }
+    )
+  ] });
+  const renderPortalTooltip = () => {
+    if (!isVisible || !isPortalMode || !createPortal) return null;
+    return createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            top: portalPos?.top ?? 0,
+            left: portalPos?.left ?? 0,
+            transform: portalPos?.transform ?? "translate(-50%, -100%)",
+            zIndex: 1e4,
+            pointerEvents: "none"
+          },
+          "data-testid": "tooltip-portal",
+          className,
+          children: tooltipContent
+        }
+      ),
+      document.body
+    );
+  };
+  return /* @__PURE__ */ jsxs(View, { className: "relative", ref: triggerRef, ...props, children: [
     /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -1547,27 +1804,16 @@ function Tooltip({
         children
       }
     ),
-    isVisible && /* @__PURE__ */ jsx(
+    isPortalMode ? renderPortalTooltip() : isVisible && /* @__PURE__ */ jsx(
       View,
       {
         className: cn(
-          "absolute z-50",
+          "absolute z-50 web:animate-fade-in",
           tooltipPositionStyles[placement],
           className
         ),
         pointerEvents: "none",
-        children: /* @__PURE__ */ jsxs(View, { className: "bg-neutral-800 px-3 py-2 rounded-md shadow-lg max-w-xs", children: [
-          /* @__PURE__ */ jsx(Text, { className: "text-white text-sm", children: label }),
-          hasArrow && /* @__PURE__ */ jsx(
-            View,
-            {
-              className: cn(
-                "absolute w-0 h-0 border-4",
-                arrowStyles2[placement]
-              )
-            }
-          )
-        ] })
+        children: tooltipContent
       }
     )
   ] });
@@ -1774,29 +2020,64 @@ var PopoverContext = createContext({
   isOpen: false,
   setIsOpen: () => {
   },
-  placement: "bottom"
+  placement: "bottom",
+  triggerMode: "click",
+  handleHoverIn: () => {
+  },
+  handleHoverOut: () => {
+  }
 });
 function Popover({
   placement = "bottom",
   isOpen: controlledIsOpen,
   onOpenChange,
   closeOnClickOutside = true,
+  triggerMode = "click",
+  closeDelay = 150,
   className,
   children,
   ...props
 }) {
   const [internalIsOpen, setInternalIsOpen] = useState(false);
   const isOpen = controlledIsOpen ?? internalIsOpen;
-  const setIsOpen = (open) => {
+  const closeTimerRef = useRef(null);
+  const setIsOpen = useCallback((open) => {
     if (controlledIsOpen === void 0) {
       setInternalIsOpen(open);
     }
     onOpenChange?.(open);
-  };
-  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value: { isOpen, setIsOpen, placement }, children: /* @__PURE__ */ jsx(View, { className: cn("relative", className), ...props, children }) });
+  }, [controlledIsOpen, onOpenChange]);
+  const handleHoverIn = useCallback(() => {
+    if (triggerMode !== "hover") return;
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+    setIsOpen(true);
+  }, [triggerMode, setIsOpen]);
+  const handleHoverOut = useCallback(() => {
+    if (triggerMode !== "hover") return;
+    closeTimerRef.current = setTimeout(() => {
+      setIsOpen(false);
+      closeTimerRef.current = null;
+    }, closeDelay);
+  }, [triggerMode, closeDelay, setIsOpen]);
+  return /* @__PURE__ */ jsx(
+    PopoverContext.Provider,
+    {
+      value: { isOpen, setIsOpen, placement, triggerMode, handleHoverIn, handleHoverOut },
+      children: /* @__PURE__ */ jsx(View, { className: cn("relative", className), ...props, children })
+    }
+  );
 }
 function PopoverTrigger({ children, className }) {
-  const { isOpen, setIsOpen } = useContext(PopoverContext);
+  const { isOpen, setIsOpen, triggerMode, handleHoverIn, handleHoverOut } = useContext(PopoverContext);
+  const hoverProps = triggerMode === "hover" ? {
+    onHoverIn: handleHoverIn,
+    onHoverOut: handleHoverOut,
+    onMouseEnter: handleHoverIn,
+    onMouseLeave: handleHoverOut
+  } : {};
   return /* @__PURE__ */ jsx(
     Pressable,
     {
@@ -1804,12 +2085,19 @@ function PopoverTrigger({ children, className }) {
       accessibilityRole: "button",
       accessibilityState: { expanded: isOpen },
       className,
+      ...hoverProps,
       children
     }
   );
 }
+var SPACER_STYLES = {
+  top: { left: 0, right: 0, bottom: 0, height: 8, transform: "translateY(100%)" },
+  bottom: { left: 0, right: 0, top: 0, height: 8, transform: "translateY(-100%)" },
+  left: { top: 0, bottom: 0, right: 0, width: 8, transform: "translateX(100%)" },
+  right: { top: 0, bottom: 0, left: 0, width: 8, transform: "translateX(-100%)" }
+};
 function PopoverContent({ children, className }) {
-  const { isOpen, setIsOpen, placement } = useContext(PopoverContext);
+  const { isOpen, setIsOpen, placement, triggerMode, handleHoverIn, handleHoverOut } = useContext(PopoverContext);
   if (!isOpen) return null;
   const placementStyles3 = {
     top: "bottom-full left-0 mb-2",
@@ -1817,6 +2105,12 @@ function PopoverContent({ children, className }) {
     left: "right-full top-0 mr-2",
     right: "left-full top-0 ml-2"
   };
+  const hoverProps = triggerMode === "hover" ? {
+    onHoverIn: handleHoverIn,
+    onHoverOut: handleHoverOut,
+    onMouseEnter: handleHoverIn,
+    onMouseLeave: handleHoverOut
+  } : {};
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Pressable,
@@ -1826,7 +2120,7 @@ function PopoverContent({ children, className }) {
         style: { position: "absolute" }
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       View,
       {
         className: cn(
@@ -1836,7 +2130,23 @@ function PopoverContent({ children, className }) {
           placementStyles3[placement],
           className
         ),
-        children
+        ...hoverProps,
+        children: [
+          triggerMode === "hover" && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                pointerEvents: "auto",
+                background: "transparent",
+                ...SPACER_STYLES[placement]
+              },
+              onMouseEnter: handleHoverIn,
+              onMouseLeave: handleHoverOut
+            }
+          ),
+          children
+        ]
       }
     )
   ] });
@@ -1991,6 +2301,7 @@ function Select({
   isDisabled = false,
   isInvalid = false,
   options,
+  variant = "default",
   className,
   ...props
 }) {
@@ -2039,8 +2350,8 @@ function Select({
         accessibilityState: { expanded: isOpen, disabled: isDisabled },
         className: cn(
           "flex-row items-center justify-between px-4 py-2.5 rounded-md border",
-          "bg-surface-base",
-          isInvalid ? "border-border-input-error" : "border-border-input",
+          variant === "filled" ? "bg-black/30" : "bg-surface-base",
+          isInvalid ? "border-border-input-error" : variant === "filled" ? "border-border-subtle" : "border-border-input",
           !isDisabled && !isInvalid && "web:hover:border-border-input-hover",
           isOpen && "border-border-input-focus",
           isDisabled && "opacity-50 cursor-not-allowed"
@@ -2136,7 +2447,7 @@ var ToolbarButtonContext = createContext({
 var BUTTON_BG = "#3C3C3C";
 var MENU_BG = "#2C2C2C";
 var hoverColors = getHoverColors(BUTTON_BG, "medium");
-var sizeStyles9 = {
+var sizeStyles10 = {
   sm: "px-2 py-1 min-h-[26px]",
   md: "px-2.5 py-1 min-h-[30px]",
   lg: "px-3 py-1.5 min-h-[36px]"
@@ -2213,7 +2524,7 @@ function ToolbarButton({
           "flex-row items-center justify-center rounded",
           "web:transition-all web:duration-150 web:cursor-pointer",
           // Size
-          sizeStyles9[size],
+          sizeStyles10[size],
           // Disabled
           isDisabled && "opacity-40 web:cursor-default web:pointer-events-none",
           className
@@ -2364,7 +2675,7 @@ var sizeConfig = {
   md: { outer: "w-5 h-5", inner: "w-2.5 h-2.5", text: "text-base" },
   lg: { outer: "w-6 h-6", inner: "w-3 h-3", text: "text-lg" }
 };
-var colorStyles3 = {
+var colorStyles4 = {
   primary: { checked: "border-brand-primary bg-brand-primary", unchecked: "border-border-strong" },
   secondary: { checked: "border-brand-secondary bg-brand-secondary", unchecked: "border-border-strong" },
   success: { checked: "border-status-success bg-status-success", unchecked: "border-border-strong" },
@@ -2389,7 +2700,7 @@ function Radio({
   const color = radioColor ?? groupColor ?? "primary";
   const isChecked = selectedValue === value;
   const { outer, inner, text } = sizeConfig[size];
-  const { checked, unchecked } = colorStyles3[color];
+  const { checked, unchecked } = colorStyles4[color];
   const handlePress = () => {
     if (!isDisabled) {
       onChange(value);
@@ -2427,7 +2738,7 @@ function Radio({
     }
   );
 }
-var sizeStyles10 = {
+var sizeStyles11 = {
   left: {
     sm: "w-64",
     md: "w-80",
@@ -2502,7 +2813,7 @@ function Drawer({
             className: cn(
               "absolute bg-surface-elevated shadow-2xl",
               placementStyles[placement],
-              sizeStyles10[placement][size],
+              sizeStyles11[placement][size],
               className
             ),
             accessibilityRole: "dialog",
@@ -2573,12 +2884,12 @@ var colorVarMap = {
   warning: "var(--color-status-warning)",
   info: "var(--color-status-info)"
 };
-var sizeStyles11 = {
+var sizeStyles12 = {
   sm: "h-1",
   md: "h-2",
   lg: "h-3"
 };
-var colorStyles4 = {
+var colorStyles5 = {
   primary: "bg-brand-primary",
   secondary: "bg-brand-secondary",
   success: "bg-status-success",
@@ -2603,6 +2914,8 @@ function Progress({
   showValue = false,
   formatValue = (v, m) => `${Math.round(v / m * 100)}%`,
   label,
+  trackWidth,
+  customColor,
   className,
   ...props
 }) {
@@ -2616,10 +2929,12 @@ function Progress({
       View,
       {
         className: cn(
-          "w-full rounded-full overflow-hidden",
+          "rounded-full overflow-hidden",
+          trackWidth ? void 0 : "w-full",
           trackColorStyles[color],
-          sizeStyles11[size]
+          sizeStyles12[size]
         ),
+        style: trackWidth ? { width: trackWidth } : void 0,
         accessibilityRole: "progressbar",
         accessibilityValue: {
           min: 0,
@@ -2631,10 +2946,13 @@ function Progress({
           {
             className: cn(
               "h-full rounded-full",
-              colorStyles4[color],
+              !customColor && colorStyles5[color],
               isIndeterminate && "animate-pulse w-1/3"
             ),
-            style: isIndeterminate ? void 0 : { width: `${percentage}%` }
+            style: {
+              ...isIndeterminate ? {} : { width: `${percentage}%` },
+              ...customColor ? { backgroundColor: customColor } : {}
+            }
           }
         )
       }
@@ -2654,6 +2972,10 @@ function CircularProgress({
   ...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;
   return /* @__PURE__ */ jsxs(
     View,
     {
@@ -2670,38 +2992,56 @@ function CircularProgress({
         /* @__PURE__ */ jsx(
           View,
           {
-            className: cn(
-              "absolute rounded-full border-4",
-              "border-border-default"
-            ),
-            style: {
-              width: size,
-              height: size,
-              borderWidth: strokeWidth
-            }
+            className: cn(isIndeterminate && "animate-spin"),
+            style: { width: size, height: size },
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: size,
+                height: size,
+                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)" }
+                    }
+                  )
+                ]
+              }
+            )
           }
         ),
-        /* @__PURE__ */ jsx(
-          View,
+        showValue && !isIndeterminate && /* @__PURE__ */ jsx(
+          Text,
           {
-            className: cn(
-              "absolute rounded-full",
-              colorStyles4[color],
-              isIndeterminate && "animate-spin"
-            ),
-            style: {
-              width: size,
-              height: size,
-              borderWidth: strokeWidth,
-              borderColor: "transparent",
-              borderTopColor: colorVarMap[color],
-              borderRightColor: percentage > 25 ? colorVarMap[color] : "transparent",
-              borderBottomColor: percentage > 50 ? colorVarMap[color] : "transparent",
-              borderLeftColor: percentage > 75 ? colorVarMap[color] : "transparent"
-            }
+            className: "text-xs font-semibold text-text-primary absolute",
+            style: { fontSize: Math.max(size * 0.22, 10) },
+            children: formatValue(value, max)
           }
-        ),
-        showValue && !isIndeterminate && /* @__PURE__ */ jsx(Text, { className: "text-xs font-semibold text-text-primary", children: formatValue(value, max) })
+        )
       ]
     }
   );
@@ -2729,7 +3069,7 @@ function ProgressSteps({
           className: cn(
             "rounded-full",
             dot,
-            index <= currentStep ? colorStyles4[color] : "bg-border-strong"
+            index <= currentStep ? colorStyles5[color] : "bg-border-strong"
           )
         }
       ),
@@ -2739,7 +3079,7 @@ function ProgressSteps({
           className: cn(
             "flex-1 mx-1",
             connector,
-            index < currentStep ? colorStyles4[color] : "bg-border-strong"
+            index < currentStep ? colorStyles5[color] : "bg-border-strong"
           )
         }
       )
@@ -3139,12 +3479,12 @@ function Autocomplete({
     )
   ] });
 }
-var sizeStyles12 = {
+var sizeStyles13 = {
   sm: { icon: "w-3.5 h-3.5 text-xs", text: "text-xs" },
   md: { icon: "w-4 h-4 text-sm", text: "text-sm" },
   lg: { icon: "w-5 h-5 text-base", text: "text-base" }
 };
-var colorStyles5 = {
+var colorStyles6 = {
   default: "text-text-tertiary",
   primary: "text-brand-primary",
   secondary: "text-text-secondary",
@@ -3183,7 +3523,7 @@ function HelpTip({
 }) {
   const [internalIsOpen, setInternalIsOpen] = useState(false);
   const isOpen = controlledIsOpen ?? internalIsOpen;
-  const { icon: iconSize, text: textSize } = sizeStyles12[size];
+  const { icon: iconSize, text: textSize } = sizeStyles13[size];
   const handlePress = () => {
     if (controlledIsOpen === void 0) {
       setInternalIsOpen((prev) => !prev);
@@ -3212,12 +3552,12 @@ function HelpTip({
         className: cn(
           "items-center justify-center rounded-full",
           "border border-current",
-          colorStyles5[color],
+          colorStyles6[color],
           iconSize,
           "web:hover:opacity-80 web:cursor-help",
           iconClassName
         ),
-        children: /* @__PURE__ */ jsx(Text, { className: cn("font-semibold", iconSize, colorStyles5[color]), children: iconMap[icon] })
+        children: /* @__PURE__ */ jsx(Text, { className: cn("font-semibold", iconSize, colorStyles6[color]), children: iconMap[icon] })
       }
     ),
     isOpen && /* @__PURE__ */ jsxs(
@@ -3602,6 +3942,63 @@ function ListItemDivider({ inset = true, className, ...props }) {
     }
   );
 }
+var variantColorStyles2 = {
+  subtle: {
+    default: "bg-surface-raised border-border-subtle text-text-secondary",
+    primary: "bg-brand-primary/10 border-brand-primary/25 text-brand-primary",
+    secondary: "bg-brand-secondary/10 border-brand-secondary/25 text-brand-secondary",
+    success: "bg-status-success/10 border-status-success/25 text-status-success",
+    error: "bg-status-error/10 border-status-error/25 text-status-error",
+    warning: "bg-status-warning/10 border-status-warning/25 text-status-warning",
+    info: "bg-status-info/10 border-status-info/25 text-status-info"
+  },
+  outline: {
+    default: "border-border-default text-text-secondary",
+    primary: "border-brand-primary text-brand-primary",
+    secondary: "border-brand-secondary text-brand-secondary",
+    success: "border-status-success text-status-success",
+    error: "border-status-error text-status-error",
+    warning: "border-status-warning text-status-warning",
+    info: "border-status-info text-status-info"
+  }
+};
+var sizeStyles14 = {
+  xs: { container: "px-1 py-px", text: "text-[9px]" },
+  sm: { container: "px-2 py-0.5", text: "text-[10px]" },
+  md: { container: "px-2 py-1", text: "text-[10px]" }
+};
+function Pill({
+  children,
+  variant = "subtle",
+  color = "default",
+  size = "sm",
+  rounded = true,
+  leftElement,
+  onPress,
+  className,
+  ...props
+}) {
+  const containerClasses = cn(
+    "flex-row items-center gap-1 border self-start shrink-0",
+    rounded ? "rounded-full" : "rounded",
+    variantColorStyles2[variant][color],
+    sizeStyles14[size].container,
+    className
+  );
+  const textClasses = cn(
+    "font-heading font-semibold",
+    sizeStyles14[size].text,
+    "text-inherit"
+  );
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    leftElement,
+    typeof children === "string" ? /* @__PURE__ */ jsx(Text, { className: textClasses, children }) : children
+  ] });
+  if (onPress) {
+    return /* @__PURE__ */ jsx(Pressable, { onPress, className: containerClasses, ...props, children: content });
+  }
+  return /* @__PURE__ */ jsx(View, { className: containerClasses, ...props, children: content });
+}
 var variantStyles4 = {
   h1: "font-heading text-5xl font-bold leading-tight",
   h2: "font-heading text-4xl font-bold leading-tight",
@@ -3617,7 +4014,7 @@ var variantStyles4 = {
   overline: "font-body text-xs font-semibold uppercase tracking-widest leading-relaxed",
   button: "font-sans text-sm font-semibold leading-relaxed"
 };
-var colorStyles6 = {
+var colorStyles7 = {
   primary: "text-text-primary",
   secondary: "text-text-secondary",
   tertiary: "text-text-tertiary",
@@ -3674,7 +4071,7 @@ function Typography({
       numberOfLines: numLines,
       className: cn(
         variantStyles4[variant],
-        color !== "inherit" && colorStyles6[color],
+        color !== "inherit" && colorStyles7[color],
         align && alignStyles2[align],
         shouldTruncate && "truncate",
         marginBottomStyles[mb],
@@ -4288,7 +4685,7 @@ function StepContent({ status = "upcoming", className, children }) {
   if (status !== "active") return null;
   return /* @__PURE__ */ jsx(View, { className: cn("ml-11 mt-2 pb-4", className), children });
 }
-var colorStyles7 = {
+var colorStyles8 = {
   primary: "text-text-primary",
   secondary: "text-text-secondary",
   tertiary: "text-text-tertiary",
@@ -4419,10 +4816,10 @@ function DateTime({
   ...props
 }) {
   if (value === null || value === void 0) {
-    return /* @__PURE__ */ jsx(Text, { className: cn(colorStyles7[color], className), ...props, children: fallback });
+    return /* @__PURE__ */ jsx(Text, { className: cn(colorStyles8[color], className), ...props, children: fallback });
   }
   const formattedDate = formatDate(value, format, isUTC);
-  return /* @__PURE__ */ jsx(Text, { className: cn(colorStyles7[color], className), ...props, children: formattedDate });
+  return /* @__PURE__ */ jsx(Text, { className: cn(colorStyles8[color], className), ...props, children: formattedDate });
 }
 function formatDateTime(value, format = "datetime", isUTC = false, fallback = "-") {
   if (value === null || value === void 0) {
@@ -4481,6 +4878,231 @@ function MetricGroup({
     )
   ] }, i)) });
 }
+function RestTimer({
+  totalSeconds,
+  elapsedMs,
+  onSkip,
+  onAddTime,
+  nextSetInfo,
+  visible
+}) {
+  if (!visible) return null;
+  const remainingMs = Math.max(0, totalSeconds * 1e3 - elapsedMs);
+  const remainingSec = Math.ceil(remainingMs / 1e3);
+  const minutes = Math.floor(remainingSec / 60);
+  const seconds = remainingSec % 60;
+  const timeDisplay = `${minutes}:${String(seconds).padStart(2, "0")}`;
+  const progressPct = Math.min(100, elapsedMs / (totalSeconds * 1e3) * 100);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: {
+        width: "100%",
+        backgroundColor: "#1C1C1C",
+        borderTopWidth: 1,
+        borderTopColor: "#1F1F1F",
+        paddingVertical: 12,
+        paddingHorizontal: 16
+      },
+      accessibilityRole: "timer",
+      accessibilityLabel: `Rest timer, ${remainingSec} seconds remaining`,
+      testID: "rest-timer",
+      children: [
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            style: {
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: 8
+            },
+            children: [
+              /* @__PURE__ */ jsxs(View, { style: { flexDirection: "column" }, children: [
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    style: {
+                      fontSize: 11,
+                      fontFamily: "Inter, sans-serif",
+                      fontWeight: "600",
+                      textTransform: "uppercase",
+                      letterSpacing: 1,
+                      color: "#9CA3AF"
+                    },
+                    testID: "rest-timer-label",
+                    children: "REST"
+                  }
+                ),
+                nextSetInfo != null && /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    style: {
+                      fontSize: 11,
+                      fontFamily: "Inter, sans-serif",
+                      color: "#6B7280",
+                      marginTop: 2
+                    },
+                    testID: "rest-timer-next-set",
+                    children: nextSetInfo
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: {
+                    fontSize: 28,
+                    fontFamily: '"Space Grotesk", sans-serif',
+                    fontWeight: "700",
+                    color: "#F3F4F6",
+                    fontVariant: ["tabular-nums"],
+                    letterSpacing: -0.5
+                  },
+                  testID: "rest-timer-time",
+                  children: timeDisplay
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              height: 3,
+              backgroundColor: "#1F1F1F",
+              borderRadius: 2,
+              marginBottom: 12
+            },
+            testID: "rest-timer-progress-track",
+            children: /* @__PURE__ */ jsx(
+              View,
+              {
+                style: {
+                  height: "100%",
+                  backgroundColor: "#FF7900",
+                  borderRadius: 2,
+                  width: `${progressPct}%`
+                },
+                testID: "rest-timer-progress-fill"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 8 }, children: [
+          /* @__PURE__ */ jsx(
+            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(
+                Text,
+                {
+                  style: {
+                    fontSize: 11,
+                    fontFamily: "Inter, sans-serif",
+                    fontWeight: "600",
+                    color: "#9CA3AF"
+                  },
+                  children: "+30s"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            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(
+                Text,
+                {
+                  style: {
+                    fontSize: 11,
+                    fontFamily: "Inter, sans-serif",
+                    fontWeight: "600",
+                    color: "#FF7900"
+                  },
+                  children: "Skip"
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var DEFAULTS = {
+  label: "SS",
+  color: "#FF7900",
+  bgBase: "#101010"
+};
+function SupersetWrapper({
+  label = DEFAULTS.label,
+  color = DEFAULTS.color,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: {
+        position: "relative",
+        borderLeftWidth: 3,
+        borderLeftColor: color,
+        paddingLeft: 8,
+        marginHorizontal: 12,
+        marginBottom: 8,
+        overflow: "visible"
+      },
+      accessibilityRole: "group",
+      accessibilityLabel: `Superset: ${label}`,
+      testID: "superset-wrapper",
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              position: "absolute",
+              top: -1,
+              left: -3,
+              fontSize: 9,
+              fontFamily: "Inter, sans-serif",
+              fontWeight: "700",
+              backgroundColor: color,
+              color: DEFAULTS.bgBase,
+              paddingVertical: 2,
+              paddingHorizontal: 6,
+              borderBottomRightRadius: 4,
+              letterSpacing: 0.5,
+              zIndex: 2
+            },
+            testID: "superset-label",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(View, { style: { gap: 2 }, testID: "superset-children", children })
+      ]
+    }
+  );
+}
 
 // src/utils/colors.ts
 function getStatusColor(status) {
@@ -4629,6 +5251,6 @@ function composeValidators(...validators) {
   };
 }
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertDescription, AlertTitle, Autocomplete, Avatar, AvatarBadge, AvatarGroup, Badge, BadgeText, BreadcrumbItem, Breadcrumbs, Button, ButtonIcon, ButtonSpinner, ButtonText, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardSkeleton, CardTitle, Checkbox, CheckboxGroup, Chip, CircularProgress, Collapse, CollapseButton, CollapseContent, DataRow, DateTime, Divider, Drawer, DrawerBody, DrawerFooter, DrawerHeader, EmptyState, FormActions, FormField, FormRow, FormSection, HStack, Heading, HelpTip, IconBox, Input, InputGroup, Label, LabelWithHelp, Link, ListItem, ListItemContent, ListItemDivider, ListItemIcon, ListItemTrailing, Menu, MenuDivider, MenuGroup, MenuItem, MenuList, MenuTrigger, Metric, MetricGroup, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalTitle, Overline, Paragraph, PasswordInput, Popover, PopoverCloseButton, PopoverContent, PopoverTrigger, Progress, ProgressSteps, Radio, RadioGroup, Section, SectionContent, SectionHeader, Select, Sidebar, SidebarContent, SidebarDivider, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, Skeleton, SkeletonCard, SkeletonCircle, SkeletonListItem, SkeletonText, Spinner, Stack, Step, StepContent, StepIndicator, StepLabel, Stepper, Surface, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TablePagination, TableRow, Tabs, Toast, ToastProvider, ToolbarButton, ToolbarButtonGroup, Tooltip, Typography, VStack, alpha, cn, composeValidators, createFieldId, formatDateTime, getContrastText, getFieldAriaProps, getFieldValidationProps, getLuminance, getResultColor, getStatusColor, hasMaxLength, hasMinLength, isEmpty, isValidEmail, useTable, useToast, useToolbarButton, validationRules };
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertDescription, AlertTitle, Autocomplete, Avatar, AvatarBadge, AvatarGroup, Badge, BadgeText, BreadcrumbItem, Breadcrumbs, Button, ButtonIcon, ButtonSpinner, ButtonText, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardSkeleton, CardTitle, Checkbox, CheckboxGroup, Chip, CircularProgress, Collapse, CollapseButton, CollapseContent, DataRow, DateTime, Divider, Drawer, DrawerBody, DrawerFooter, DrawerHeader, EmptyState, FormActions, FormField, FormRow, FormSection, HStack, Heading, HelpTip, IconBox, Indicator, Input, InputGroup, Label, LabelWithHelp, Link, ListItem, ListItemContent, ListItemDivider, ListItemIcon, ListItemTrailing, Menu, MenuDivider, MenuGroup, MenuItem, MenuList, MenuTrigger, Metric, MetricGroup, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalTitle, Overline, Paragraph, PasswordInput, Pill, Popover, PopoverCloseButton, PopoverContent, PopoverTrigger, Progress, ProgressSteps, Radio, RadioGroup, RestTimer, Section, SectionContent, SectionHeader, Select, Sidebar, SidebarContent, SidebarDivider, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, Skeleton, SkeletonCard, SkeletonCircle, SkeletonListItem, SkeletonText, Spinner, Stack, StepContent, StepIndicator, StepLabel, Stepper, Step as StepperStep, SupersetWrapper, Surface, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TablePagination, TableRow, Tabs, Toast, ToastProvider, ToolbarButton, ToolbarButtonGroup, Tooltip, Typography, VStack, alpha, cn, composeValidators, createFieldId, formatDateTime, getContrastText, getFieldAriaProps, getFieldValidationProps, getLuminance, getResultColor, getStatusColor, hasMaxLength, hasMinLength, isEmpty, isValidEmail, useTable, useToast, useToolbarButton, validationRules };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map