@titan-design/react-ui 0.1.0 → 0.2.5

package/dist/index.js

@@ -10,10 +10,34 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React24__default = /*#__PURE__*/_interopDefault(React24);
 
-// src/components/ui/alert/Alert.tsx
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.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(jsxRuntime.jsx);
+var jsxs = wrapJsx(jsxRuntime.jsxs);
+
+// src/components/ui/alert/Alert.tsx
 var statusColors = {
   success: {
     subtle: "bg-status-success-subtle",
@@ -62,7 +86,7 @@ function Alert({
 }) {
   const colors = statusColors[status];
   const isSolid = variant === "solid";
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
       accessibilityRole: "alert",
@@ -73,7 +97,7 @@ function Alert({
       ),
       ...props,
       children: [
-        showIcon && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "mr-3 mt-0.5", children: icon || /* @__PURE__ */ jsxRuntime.jsx(
+        showIcon && /* @__PURE__ */ jsx(reactNative.View, { className: "mr-3 mt-0.5", children: icon || /* @__PURE__ */ jsx(
           reactNative.Text,
           {
             className: cn(
@@ -83,15 +107,15 @@ function Alert({
             children: defaultIcons[status]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "flex-1", children }),
-        onClose && /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1", children }),
+        onClose && /* @__PURE__ */ jsx(
           reactNative.Pressable,
           {
             onPress: onClose,
             accessibilityRole: "button",
             accessibilityLabel: "Close alert",
             className: "ml-2 p-1 rounded web:hover:bg-black/10 active:bg-black/20",
-            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("text-lg", isSolid ? "text-white/70" : "text-text-secondary"), children: "\xD7" })
+            children: /* @__PURE__ */ jsx(reactNative.Text, { className: cn("text-lg", isSolid ? "text-white/70" : "text-text-secondary"), children: "\xD7" })
           }
         )
       ]
@@ -99,10 +123,10 @@ function Alert({
   );
 }
 function AlertTitle({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("font-semibold text-text-primary mb-1", className), children });
+  return /* @__PURE__ */ jsx(reactNative.Text, { className: cn("font-semibold text-text-primary mb-1", className), children });
 }
 function AlertDescription({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("text-sm text-text-secondary", className), children });
+  return /* @__PURE__ */ jsx(reactNative.Text, { className: cn("text-sm text-text-secondary", className), children });
 }
 
 // src/theme/tokens/primitives.ts
@@ -830,6 +854,50 @@ var buttonSizes = {
 function getSemanticColors(mode) {
   return mode === "dark" ? semanticColorsDark : semanticColorsLight;
 }
+
+// src/components/ui/button/Button.tsx
+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]",
@@ -927,7 +995,13 @@ var Button = React24.forwardRef(function Button2({
   ...props
 }, ref) {
   const disabled = isDisabled || isLoading;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const inlineStyle = {
+    color: textColorMap[variant][color]
+  };
+  if (variant === "outline") {
+    inlineStyle.borderColor = borderColorMap[color];
+  }
+  return /* @__PURE__ */ jsxs(
     reactNative.Pressable,
     {
       ref,
@@ -949,9 +1023,10 @@ var Button = React24.forwardRef(function Button2({
         variant === "link" && "px-0 py-0 min-h-0",
         className
       ),
+      style: inlineStyle,
       ...props,
       children: [
-        isLoading && /* @__PURE__ */ jsxRuntime.jsx(
+        isLoading && /* @__PURE__ */ jsx(
           reactNative.ActivityIndicator,
           {
             size: "small",
@@ -959,7 +1034,7 @@ var Button = React24.forwardRef(function Button2({
             className: "mr-2"
           }
         ),
-        isLoading && loadingText ? /* @__PURE__ */ jsxRuntime.jsx(
+        isLoading && loadingText ? /* @__PURE__ */ jsx(
           reactNative.Text,
           {
             className: cn(
@@ -967,6 +1042,7 @@ var Button = React24.forwardRef(function Button2({
               textSizeStyles[size],
               textStyles[variant][color]
             ),
+            style: { color: textColorMap[variant][color] },
             children: loadingText
           }
         ) : children
@@ -975,13 +1051,13 @@ var Button = React24.forwardRef(function Button2({
   );
 });
 function ButtonText({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("font-semibold text-inherit", className), children });
+  return /* @__PURE__ */ jsx(reactNative.Text, { className: cn("font-semibold text-inherit", className), children });
 }
 function ButtonIcon({ as: Icon, size = 16, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Icon, { size, className: cn("text-inherit", className) });
+  return /* @__PURE__ */ jsx(Icon, { size, className: cn("text-inherit", className) });
 }
 function ButtonSpinner({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { size: "small", className: cn("text-inherit", className) });
+  return /* @__PURE__ */ jsx(reactNative.ActivityIndicator, { size: "small", className: cn("text-inherit", className) });
 }
 var sizeStyles2 = {
   sm: "h-8 px-3 text-sm",
@@ -1044,12 +1120,12 @@ var Input = React24.forwardRef(function Input2({
   };
   const showError = isInvalid && errorMessage;
   const showHelper = !showError && helperText;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("w-full", className), children: [
-    label && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { className: "mb-1.5 text-sm font-medium text-text-primary", children: [
+  return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("w-full", className), children: [
+    label && /* @__PURE__ */ jsxs(reactNative.Text, { className: "mb-1.5 text-sm font-medium text-text-primary", children: [
       label,
-      isRequired && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-status-error ml-0.5", children: "*" })
+      isRequired && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-status-error ml-0.5", children: "*" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxs(
       reactNative.View,
       {
         className: cn(
@@ -1062,8 +1138,8 @@ var Input = React24.forwardRef(function Input2({
           isDisabled && "opacity-40 cursor-not-allowed"
         ),
         children: [
-          leftElement && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("pl-3 pr-1", multiline && "pt-3"), children: leftElement }),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          leftElement && /* @__PURE__ */ jsx(reactNative.View, { className: cn("pl-3 pr-1", multiline && "pt-3"), children: leftElement }),
+          /* @__PURE__ */ jsx(
             reactNative.TextInput,
             {
               ref,
@@ -1088,35 +1164,35 @@ var Input = React24.forwardRef(function Input2({
               ...props
             }
           ),
-          rightElement && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("pl-1 pr-3", multiline && "pt-3"), children: rightElement })
+          rightElement && /* @__PURE__ */ jsx(reactNative.View, { className: cn("pl-1 pr-3", multiline && "pt-3"), children: rightElement })
         ]
       }
     ),
-    showHelper && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "mt-1.5 text-xs text-text-secondary", children: helperText }),
-    showError && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "mt-1.5 text-xs text-status-error", children: errorMessage })
+    showHelper && /* @__PURE__ */ jsx(reactNative.Text, { className: "mt-1.5 text-xs text-text-secondary", children: helperText }),
+    showError && /* @__PURE__ */ jsx(reactNative.Text, { className: "mt-1.5 text-xs text-status-error", children: errorMessage })
   ] });
 });
 function InputGroup({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("flex-col gap-4", className), children });
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("flex-col gap-4", className), children });
 }
 var PasswordInput = React24.forwardRef(function PasswordInput2({ showIcon, hideIcon, ...props }, ref) {
   const [isVisible, setIsVisible] = React24.useState(false);
   const toggleVisibility = () => setIsVisible(!isVisible);
-  const defaultShowIcon = /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "w-5 h-5 items-center justify-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "w-3 h-3 rounded-full border-2 border-text-secondary" }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "absolute w-1.5 h-1.5 rounded-full bg-text-secondary" })
+  const defaultShowIcon = /* @__PURE__ */ jsxs(reactNative.View, { className: "w-5 h-5 items-center justify-center", children: [
+    /* @__PURE__ */ jsx(reactNative.View, { className: "w-3 h-3 rounded-full border-2 border-text-secondary" }),
+    /* @__PURE__ */ jsx(reactNative.View, { className: "absolute w-1.5 h-1.5 rounded-full bg-text-secondary" })
   ] });
-  const defaultHideIcon = /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "w-5 h-5 items-center justify-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "w-3 h-3 rounded-full border-2 border-text-secondary" }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "absolute w-1.5 h-1.5 rounded-full bg-text-secondary" }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "absolute w-5 h-0.5 bg-text-secondary rotate-45" })
+  const defaultHideIcon = /* @__PURE__ */ jsxs(reactNative.View, { className: "w-5 h-5 items-center justify-center", children: [
+    /* @__PURE__ */ jsx(reactNative.View, { className: "w-3 h-3 rounded-full border-2 border-text-secondary" }),
+    /* @__PURE__ */ jsx(reactNative.View, { className: "absolute w-1.5 h-1.5 rounded-full bg-text-secondary" }),
+    /* @__PURE__ */ jsx(reactNative.View, { className: "absolute w-5 h-0.5 bg-text-secondary rotate-45" })
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     Input,
     {
       ref,
       secureTextEntry: !isVisible,
-      rightElement: /* @__PURE__ */ jsxRuntime.jsx(
+      rightElement: /* @__PURE__ */ jsx(
         reactNative.Pressable,
         {
           onPress: toggleVisibility,
@@ -1902,6 +1978,169 @@ function getGlowShadow(color, intensity = "medium") {
     }
   });
 }
+
+// src/theme/presets/apply.ts
+function colorKeyToVar(key) {
+  return `--color-${key}`;
+}
+function applyColorOverrides(colors, root) {
+  for (const [key, value] of Object.entries(colors)) {
+    if (value !== void 0) {
+      root.style.setProperty(colorKeyToVar(key), value);
+    }
+  }
+}
+function applyFontOverrides(fonts, root) {
+  const fontVarMap = {
+    sans: "--font-family-sans",
+    body: "--font-family-body",
+    heading: "--font-family-heading",
+    mono: "--font-family-mono"
+  };
+  for (const [key, value] of Object.entries(fonts)) {
+    if (value !== void 0 && fontVarMap[key]) {
+      root.style.setProperty(fontVarMap[key], value);
+    }
+  }
+}
+function injectFontImport(url) {
+  if (typeof document === "undefined") return;
+  const existing = document.querySelector(`link[href="${url}"]`);
+  if (existing) return;
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = url;
+  document.head.appendChild(link);
+}
+function applyThemePreset(preset) {
+  if (typeof document === "undefined") {
+    return () => {
+    };
+  }
+  const root = document.documentElement;
+  const removals = [];
+  if (preset.fontImport) {
+    injectFontImport(preset.fontImport);
+  }
+  const isLight = root.classList.contains("light");
+  const modeColors = isLight ? preset.colors?.light : preset.colors?.dark;
+  if (modeColors) {
+    const previousValues = {};
+    for (const key of Object.keys(modeColors)) {
+      previousValues[colorKeyToVar(key)] = root.style.getPropertyValue(colorKeyToVar(key)) || null;
+    }
+    applyColorOverrides(modeColors, root);
+    removals.push(() => {
+      for (const [varName, prev] of Object.entries(previousValues)) {
+        if (prev === null) {
+          root.style.removeProperty(varName);
+        } else {
+          root.style.setProperty(varName, prev);
+        }
+      }
+    });
+  }
+  if (preset.fonts) {
+    applyFontOverrides(preset.fonts, root);
+  }
+  if (preset.rootClasses) {
+    for (const cls of preset.rootClasses) {
+      root.classList.add(cls);
+    }
+    removals.push(() => {
+      for (const cls of preset.rootClasses) {
+        root.classList.remove(cls);
+      }
+    });
+  }
+  return () => {
+    for (const remove of removals) {
+      remove();
+    }
+  };
+}
+
+// src/theme/presets/default.ts
+var defaultPreset = {
+  name: "default",
+  description: "Titan Design System default theme \u2014 orange accent, steel secondary"
+};
+
+// src/theme/presets/audiobook.ts
+var audiobookPreset = {
+  name: "audiobook",
+  description: "Warm copper/patina theme with editorial typography",
+  fontImport: "https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,600;0,700;1,400&family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap",
+  fonts: {
+    sans: "'Outfit', 'Avenir', 'Avenir Next', system-ui, sans-serif",
+    body: "'Outfit', 'Avenir', 'Avenir Next', system-ui, sans-serif",
+    heading: "'Newsreader', 'Libre Baskerville', Georgia, serif",
+    mono: "'JetBrains Mono', 'SF Mono', 'Fira Code', monospace"
+  },
+  colors: {
+    dark: {
+      // Brand: Copper accent
+      "brand-primary": "#d4782a",
+      "brand-primary-light": "#e8944a",
+      "brand-primary-dark": "#9a4a15",
+      "brand-primary-subtle": "rgba(212, 120, 42, 0.12)",
+      "brand-primary-hover": "#e8944a",
+      "brand-primary-active": "#f5b070",
+      // Brand secondary: Patina/verdigris
+      "brand-secondary": "#3a9b8a",
+      "brand-secondary-light": "#55baa7",
+      "brand-secondary-dark": "#1f5c52",
+      "brand-secondary-subtle": "rgba(58, 155, 138, 0.12)",
+      "brand-secondary-hover": "#55baa7",
+      "brand-secondary-active": "#7ed4c4",
+      "on-brand-primary": "#FFFFFF",
+      "on-brand-secondary": "#FFFFFF",
+      // Status colors (audiobook's warmer status palette)
+      "status-success": "#5fb870",
+      "status-error": "#d85c4a",
+      "status-warning": "#d4a43a",
+      "status-info": "#5a8fd4",
+      // Text: warm off-whites
+      "text-primary": "#f4f3f1",
+      "text-secondary": "#b5b3af",
+      "text-tertiary": "#7a7875",
+      // Surfaces: warm charcoals (not pure gray)
+      "surface-base": "#101114",
+      "surface-elevated": "#15171c",
+      "surface-raised": "#1a1d24",
+      "surface-overlay": "#15171c",
+      "surface-input": "#15171c",
+      // Backgrounds
+      "background-base": "#0a0b0d",
+      "background-default": "#101114",
+      "background-subtle": "#1a1d24",
+      // Borders
+      "border-default": "rgba(255, 255, 255, 0.06)",
+      "border-subtle": "rgba(255, 255, 255, 0.03)",
+      "border-strong": "#2d323d",
+      "border-focus": "#d4782a",
+      "border-input": "#2d323d",
+      "border-input-hover": "#454c5c",
+      "border-input-focus": "#d4782a",
+      "border-input-error": "#d85c4a",
+      // Interactive
+      "interactive-hover": "rgba(255, 255, 255, 0.04)",
+      "interactive-focus": "rgba(255, 255, 255, 0.12)",
+      "interactive-active": "rgba(255, 255, 255, 0.16)",
+      "interactive-selected": "rgba(255, 255, 255, 0.08)",
+      "divider": "rgba(255, 255, 255, 0.06)",
+      // Glow RGB values for shadow utilities
+      "brand-primary-rgb": "212, 120, 42",
+      "brand-secondary-rgb": "58, 155, 138",
+      "status-success-rgb": "95, 184, 112",
+      "status-error-rgb": "216, 92, 74",
+      "status-warning-rgb": "212, 164, 58",
+      "status-info-rgb": "90, 143, 212",
+      "background-base-rgb": "10, 11, 13"
+    }
+  },
+  rootClasses: ["atmosphere-warm", "grain"]
+};
 function getTheme() {
   if (typeof document === "undefined") return "dark";
   return document.documentElement.classList.contains("light") ? "light" : "dark";
@@ -1940,13 +2179,17 @@ function getServerSnapshot() {
 function useTheme() {
   return React24.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",
@@ -1956,6 +2199,8 @@ function Card({
   onPress,
   borderColor,
   bgColor,
+  accentColor,
+  accentWidth,
   className,
   children,
   style,
@@ -1969,28 +2214,31 @@ function Card({
   const theme = useTheme();
   const elevationLevel = React24.useMemo(() => {
     const validated = getValidatedElevation("card", elevation);
-    if (variant === "outline") {
+    if (variant === "outline" || variant === "accent" || variant === "subtle") {
       return 1;
     }
     return validated;
   }, [variant, elevation]);
   const baseColor = React24.useMemo(() => getBaseSurfaceColor(theme), [theme]);
   const surfaceColor = React24.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 = React24.useMemo(() => {
     const shouldHover = isHovered && isClickable;
     return getElevationShadow(baseColor, elevationLevel, theme, shouldHover);
   }, [baseColor, elevationLevel, theme, isHovered, isClickable]);
-  const cardContent = isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    skeletonHasHeader && /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "h-5 w-1/3 bg-interactive-disabled rounded" }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "mt-2 h-4 w-2/3 bg-interactive-disabled rounded" })
+  const cardContent = isLoading ? /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+    skeletonHasHeader && /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(reactNative.View, { className: "h-5 w-1/3 bg-interactive-disabled rounded" }),
+      /* @__PURE__ */ jsx(reactNative.View, { className: "mt-2 h-4 w-2/3 bg-interactive-disabled rounded" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: Array.from({ length: skeletonContentLines }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsx(CardContent, { children: Array.from({ length: skeletonContentLines }).map((_, i) => /* @__PURE__ */ jsx(
       reactNative.View,
       {
         className: cn(
@@ -2000,7 +2248,7 @@ function Card({
       },
       i
     )) }),
-    skeletonHasFooter && /* @__PURE__ */ jsxRuntime.jsx(CardFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "h-9 w-24 bg-interactive-disabled rounded" }) })
+    skeletonHasFooter && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(reactNative.View, { className: "h-9 w-24 bg-interactive-disabled rounded" }) })
   ] }) : children;
   const baseClassName = cn(
     "rounded-lg overflow-hidden relative",
@@ -2012,19 +2260,26 @@ function Card({
     isLoading && "pointer-events-none animate-pulse",
     className
   );
+  const accentStyle = React24.useMemo(() => variant === "accent" ? {
+    borderLeftWidth: accentWidth ?? 3,
+    borderLeftColor: accentColor ?? "var(--color-brand-primary)"
+  } : {}, [variant, accentWidth, accentColor]);
   const mergedStyle = React24.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__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsx(
       reactNative.Pressable,
       {
         onPress,
@@ -2038,13 +2293,13 @@ function Card({
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: baseClassName, style: mergedStyle, ...props, children: cardContent });
+  return /* @__PURE__ */ jsx(reactNative.View, { className: baseClassName, style: mergedStyle, ...props, children: cardContent });
 }
 function CardHeader({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("px-6 py-6", className), children });
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("px-6 py-6", className), children });
 }
 function CardTitle({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.Text,
     {
       accessibilityRole: "header",
@@ -2054,13 +2309,13 @@ function CardTitle({ children, className }) {
   );
 }
 function CardDescription({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("mt-1.5 text-sm text-text-secondary", className), children });
+  return /* @__PURE__ */ jsx(reactNative.Text, { className: cn("mt-1.5 text-sm text-text-secondary", className), children });
 }
 function CardContent({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("px-6 py-4", className), children });
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("px-6 py-4", className), children });
 }
 function CardFooter({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("px-6 py-4 flex-row items-center gap-2", className), children });
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("px-6 py-4 flex-row items-center gap-2", className), children });
 }
 function CardSkeleton({
   hasHeader = true,
@@ -2068,12 +2323,12 @@ function CardSkeleton({
   contentLines = 3,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { variant: "elevated", elevation: 2, className: cn("animate-pulse", className), children: [
-    hasHeader && /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "h-5 w-1/3 bg-interactive-disabled rounded" }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "mt-2 h-4 w-2/3 bg-interactive-disabled rounded" })
+  return /* @__PURE__ */ jsxs(Card, { variant: "elevated", elevation: 2, className: cn("animate-pulse", className), children: [
+    hasHeader && /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(reactNative.View, { className: "h-5 w-1/3 bg-interactive-disabled rounded" }),
+      /* @__PURE__ */ jsx(reactNative.View, { className: "mt-2 h-4 w-2/3 bg-interactive-disabled rounded" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: Array.from({ length: contentLines }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsx(CardContent, { children: Array.from({ length: contentLines }).map((_, i) => /* @__PURE__ */ jsx(
       reactNative.View,
       {
         className: cn(
@@ -2083,9 +2338,60 @@ function CardSkeleton({
       },
       i
     )) }),
-    hasFooter && /* @__PURE__ */ jsxRuntime.jsx(CardFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "h-9 w-24 bg-interactive-disabled rounded" }) })
+    hasFooter && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(reactNative.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(
+    reactNative.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",
@@ -2115,7 +2421,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"
@@ -2124,26 +2430,38 @@ function Badge({
   variant = "subtle",
   color = "default",
   size = "md",
+  dot,
+  dotColor,
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxs(
     reactNative.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__ */ jsxRuntime.jsx(reactNative.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(reactNative.Text, { className: "text-inherit font-medium", children }) : children
+      ]
     }
   );
 }
 function BadgeText({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("text-inherit font-medium", className), children });
+  return /* @__PURE__ */ jsx(reactNative.Text, { className: cn("text-inherit font-medium", className), children });
 }
 var sizeMap = {
   sm: "small",
@@ -2170,14 +2488,14 @@ function Spinner({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       accessibilityRole: "progressbar",
       accessibilityLabel: label,
       className: cn("items-center justify-center", containerSizes[size], className),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsx(
         reactNative.ActivityIndicator,
         {
           size: sizeMap[size],
@@ -2187,7 +2505,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" },
@@ -2200,31 +2544,35 @@ function Avatar({
   source,
   fallback,
   alt,
+  colorFromName,
   className,
   ...props
 }) {
-  const styles2 = sizeStyles4[size];
+  const styles2 = sizeStyles5[size];
   const hasImage = source !== void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const resolvedFallback = fallback ?? (colorFromName ? getInitials(colorFromName) : void 0);
+  const nameColor = colorFromName ? avatarColor(colorFromName) : void 0;
+  return /* @__PURE__ */ jsx(
     reactNative.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__ */ jsxRuntime.jsx(
+      children: hasImage ? /* @__PURE__ */ jsx(
         reactNative.Image,
         {
           source,
           className: cn("rounded-full", styles2.image),
           accessibilityLabel: alt
         }
-      ) : fallback ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("font-semibold text-text-primary", styles2.text), children: fallback }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "w-full h-full bg-surface-raised" })
+      ) : resolvedFallback ? /* @__PURE__ */ jsx(reactNative.Text, { className: cn("font-semibold text-text-inverse", styles2.text), children: resolvedFallback }) : /* @__PURE__ */ jsx(reactNative.View, { className: "w-full h-full bg-surface-raised" })
     }
   );
 }
@@ -2235,7 +2583,7 @@ var badgeColors = {
   default: "bg-border-strong"
 };
 function AvatarBadge({ color = "success", className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       className: cn(
@@ -2255,8 +2603,8 @@ function AvatarGroup({
   const childArray = React24__default.default.Children.toArray(children);
   const visibleChildren = max ? childArray.slice(0, max) : childArray;
   const remainingCount = max ? Math.max(0, childArray.length - max) : 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex-row", className), children: [
-    visibleChildren.map((child, index) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("flex-row", className), children: [
+    visibleChildren.map((child, index) => /* @__PURE__ */ jsx(
       reactNative.View,
       {
         className: cn(
@@ -2267,15 +2615,15 @@ function AvatarGroup({
       },
       index
     )),
-    remainingCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+    remainingCount > 0 && /* @__PURE__ */ jsx(
       reactNative.View,
       {
         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__ */ jsxRuntime.jsxs(reactNative.Text, { className: cn("font-semibold text-text-secondary", sizeStyles4[size].text), children: [
+        children: /* @__PURE__ */ jsxs(reactNative.Text, { className: cn("font-semibold text-text-secondary", sizeStyles5[size].text), children: [
           "+",
           remainingCount
         ] })
@@ -2288,7 +2636,7 @@ function Divider({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       accessibilityRole: "none",
@@ -2301,7 +2649,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" }
@@ -2319,13 +2667,13 @@ var Checkbox = React24.forwardRef(function Checkbox2({
   className,
   ...props
 }, ref) {
-  const styles2 = sizeStyles5[size];
+  const styles2 = sizeStyles6[size];
   const handlePress = () => {
     if (!isDisabled) {
       onCheckedChange?.(!isChecked);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxs(
     reactNative.Pressable,
     {
       ref,
@@ -2344,7 +2692,7 @@ var Checkbox = React24.forwardRef(function Checkbox2({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxs(
           reactNative.View,
           {
             className: cn(
@@ -2355,14 +2703,14 @@ var Checkbox = React24.forwardRef(function Checkbox2({
               !isDisabled && "web:hover:border-brand-primary"
             ),
             children: [
-              isChecked && !isIndeterminate && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("bg-white rounded-sm", styles2.icon), children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-brand-primary font-bold text-center leading-none", children: "\u2713" }) }),
-              isIndeterminate && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("bg-white h-0.5 w-2/3 rounded") })
+              isChecked && !isIndeterminate && /* @__PURE__ */ jsx(reactNative.View, { className: cn("bg-white rounded-sm", styles2.icon), children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-brand-primary font-bold text-center leading-none", children: "\u2713" }) }),
+              isIndeterminate && /* @__PURE__ */ jsx(reactNative.View, { className: cn("bg-white h-0.5 w-2/3 rounded") })
             ]
           }
         ),
-        (label || helperText) && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "flex-1", children: [
-          label && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("text-text-primary font-medium", styles2.label), children: label }),
-          helperText && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-xs text-text-secondary mt-0.5", children: helperText })
+        (label || helperText) && /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-1", children: [
+          label && /* @__PURE__ */ jsx(reactNative.Text, { className: cn("text-text-primary font-medium", styles2.label), children: label }),
+          helperText && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-xs text-text-secondary mt-0.5", children: helperText })
         ] })
       ]
     }
@@ -2374,9 +2722,9 @@ function CheckboxGroup({
   orientation = "vertical",
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("gap-1", className), children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-sm font-medium text-text-primary mb-2", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("gap-1", className), children: [
+    label && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-sm font-medium text-text-primary mb-2", children: label }),
+    /* @__PURE__ */ jsx(
       reactNative.View,
       {
         className: cn(
@@ -2387,7 +2735,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" }
@@ -2402,13 +2750,13 @@ var Switch = React24.forwardRef(function Switch2({
   className,
   ...props
 }, ref) {
-  const styles2 = sizeStyles6[size];
+  const styles2 = sizeStyles7[size];
   const handlePress = () => {
     if (!isDisabled) {
       onCheckedChange?.(!isChecked);
     }
   };
-  const switchElement = /* @__PURE__ */ jsxRuntime.jsx(
+  const switchElement = /* @__PURE__ */ jsx(
     reactNative.View,
     {
       className: cn(
@@ -2416,7 +2764,7 @@ var Switch = React24.forwardRef(function Switch2({
         styles2.track,
         isChecked ? "bg-brand-primary" : "bg-border-strong"
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsx(
         reactNative.View,
         {
           className: cn(
@@ -2428,7 +2776,7 @@ var Switch = React24.forwardRef(function Switch2({
       )
     }
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxs(
     reactNative.Pressable,
     {
       ref,
@@ -2444,15 +2792,15 @@ var Switch = React24.forwardRef(function Switch2({
       ),
       ...props,
       children: [
-        label && labelPosition === "left" && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-text-primary font-medium", children: label }),
+        label && labelPosition === "left" && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-primary font-medium", children: label }),
         switchElement,
-        label && labelPosition === "right" && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-text-primary font-medium", children: label })
+        label && labelPosition === "right" && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-primary font-medium", children: label })
       ]
     }
   );
 });
 var ModalContext = React24.createContext({ size: "md", scrollBehavior: "outside" });
-var sizeStyles7 = {
+var sizeStyles8 = {
   xs: "max-w-xs",
   sm: "max-w-sm",
   md: "max-w-md",
@@ -2477,7 +2825,7 @@ function Modal({
       onClose();
     }
   };
-  const backdropContent = /* @__PURE__ */ jsxRuntime.jsx(
+  const backdropContent = /* @__PURE__ */ jsx(
     reactNative.Pressable,
     {
       onPress: handleBackdropPress,
@@ -2489,7 +2837,7 @@ function Modal({
       children
     }
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(ModalContext.Provider, { value: { onClose, size, scrollBehavior }, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(ModalContext.Provider, { value: { onClose, size, scrollBehavior }, children: /* @__PURE__ */ jsx(
     reactNative.Modal,
     {
       visible: isOpen,
@@ -2497,7 +2845,7 @@ function Modal({
       animationType,
       onRequestClose: onClose,
       ...props,
-      children: scrollBehavior === "outside" ? /* @__PURE__ */ jsxRuntime.jsx(
+      children: scrollBehavior === "outside" ? /* @__PURE__ */ jsx(
         reactNative.ScrollView,
         {
           contentContainerStyle: { flexGrow: 1 },
@@ -2510,16 +2858,16 @@ function Modal({
 }
 function ModalContent({ children, className }) {
   const { size } = React24.useContext(ModalContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.Pressable,
     {
       onPress: (e) => e.stopPropagation(),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsx(
         reactNative.View,
         {
           className: cn(
             "bg-surface-elevated rounded-lg shadow-xl w-full",
-            sizeStyles7[size],
+            sizeStyles8[size],
             className
           ),
           children
@@ -2529,10 +2877,10 @@ function ModalContent({ children, className }) {
   );
 }
 function ModalHeader({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("flex-row items-center justify-between px-6 py-4 border-b border-divider", className), children });
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("flex-row items-center justify-between px-6 py-4 border-b border-divider", className), children });
 }
 function ModalTitle({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.Text,
     {
       accessibilityRole: "header",
@@ -2543,7 +2891,7 @@ function ModalTitle({ children, className }) {
 }
 function ModalCloseButton({ className }) {
   const { onClose } = React24.useContext(ModalContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.Pressable,
     {
       onPress: onClose,
@@ -2553,14 +2901,14 @@ function ModalCloseButton({ className }) {
         "p-1 rounded-md web:hover:bg-interactive-hover active:bg-interactive-active",
         className
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-text-secondary text-xl leading-none", children: "\xD7" })
+      children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-secondary text-xl leading-none", children: "\xD7" })
     }
   );
 }
 function ModalBody({ children, maxHeight, className }) {
   const { scrollBehavior } = React24.useContext(ModalContext);
   if (scrollBehavior === "inside") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsx(
       reactNative.ScrollView,
       {
         className: cn("px-6 py-4", className),
@@ -2570,10 +2918,10 @@ function ModalBody({ children, maxHeight, className }) {
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("px-6 py-4", className), children });
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("px-6 py-4", className), children });
 }
 function ModalFooter({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("flex-row items-center justify-end gap-2 px-6 py-4 border-t border-divider", className), children });
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("flex-row items-center justify-end gap-2 px-6 py-4 border-t border-divider", className), children });
 }
 function Skeleton({
   variant = "text",
@@ -2603,7 +2951,7 @@ function Skeleton({
     if (width && !height) finalHeight = width;
     if (height && !width) finalWidth = height;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       accessibilityRole: "none",
@@ -2633,7 +2981,7 @@ function SkeletonText({
   animation = "pulse",
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("gap-2", className), style: { gap }, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("gap-2", className), style: { gap }, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
     Skeleton,
     {
       variant: "text",
@@ -2648,7 +2996,7 @@ function SkeletonCircle({
   animation = "pulse",
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     Skeleton,
     {
       variant: "circle",
@@ -2666,8 +3014,8 @@ function SkeletonCard({
   animation = "pulse",
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("rounded-lg overflow-hidden bg-surface-elevated", className), children: [
-    hasImage && /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("rounded-lg overflow-hidden bg-surface-elevated", className), children: [
+    hasImage && /* @__PURE__ */ jsx(
       Skeleton,
       {
         variant: "rect",
@@ -2676,9 +3024,9 @@ function SkeletonCard({
         animation
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "p-4 gap-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "text", width: "70%", animation }),
-      /* @__PURE__ */ jsxRuntime.jsx(SkeletonText, { lines, animation })
+    /* @__PURE__ */ jsxs(reactNative.View, { className: "p-4 gap-3", children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "70%", animation }),
+      /* @__PURE__ */ jsx(SkeletonText, { lines, animation })
     ] })
   ] });
 }
@@ -2689,9 +3037,9 @@ function SkeletonListItem({
   animation = "pulse",
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex-row items-center gap-3 p-3", className), children: [
-    hasAvatar && /* @__PURE__ */ jsxRuntime.jsx(SkeletonCircle, { size: avatarSize, animation }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonText, { lines, animation }) })
+  return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("flex-row items-center gap-3 p-3", className), children: [
+    hasAvatar && /* @__PURE__ */ jsx(SkeletonCircle, { size: avatarSize, animation }),
+    /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1", children: /* @__PURE__ */ jsx(SkeletonText, { lines, animation }) })
   ] });
 }
 var TabsContext = React24.createContext({
@@ -2719,7 +3067,7 @@ function Tabs({
     }
     onChange?.(newIndex);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { activeIndex, setActiveIndex, variant, orientation }, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeIndex, setActiveIndex, variant, orientation }, children: /* @__PURE__ */ jsx(
     reactNative.View,
     {
       className: cn(
@@ -2738,7 +3086,7 @@ function TabList({ children, className }) {
     enclosed: "bg-surface-raised rounded-lg p-1",
     "soft-rounded": "bg-surface-raised rounded-full p-1"
   };
-  const content = /* @__PURE__ */ jsxRuntime.jsx(
+  const content = /* @__PURE__ */ jsx(
     reactNative.View,
     {
       className: cn(
@@ -2755,7 +3103,7 @@ function TabList({ children, className }) {
     }
   );
   if (orientation === "horizontal") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsx(
       reactNative.ScrollView,
       {
         horizontal: true,
@@ -2791,7 +3139,7 @@ function Tab({
       isActive ? "bg-brand-primary text-white" : "text-text-secondary web:hover:text-text-primary"
     )
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.Pressable,
     {
       accessibilityRole: "tab",
@@ -2804,7 +3152,7 @@ function Tab({
         isDisabled && "opacity-50 cursor-not-allowed",
         className
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsx(
         reactNative.Text,
         {
           className: cn(
@@ -2819,7 +3167,7 @@ function Tab({
 }
 function TabPanels({ children, className }) {
   const { activeIndex } = React24.useContext(TabsContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("flex-1", className), children: React24__default.default.Children.map(children, (child, index) => {
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("flex-1", className), children: React24__default.default.Children.map(children, (child, index) => {
     if (React24__default.default.isValidElement(child) && index === activeIndex) {
       return child;
     }
@@ -2827,9 +3175,9 @@ function TabPanels({ children, className }) {
   }) });
 }
 function TabPanel({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("py-4", className), children });
+  return /* @__PURE__ */ jsx(reactNative.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",
@@ -2866,7 +3214,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" }
@@ -2883,12 +3231,12 @@ function Chip({
   children,
   ...props
 }) {
-  const sizes = sizeStyles8[size];
+  const sizes = sizeStyles9[size];
   const isClickable = !!onPress;
-  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    leftElement && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "mr-1.5", children: leftElement }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("font-medium", sizes.text), children }),
-    onDelete && /* @__PURE__ */ jsxRuntime.jsx(
+  const content = /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+    leftElement && /* @__PURE__ */ jsx(reactNative.View, { className: "mr-1.5", children: leftElement }),
+    /* @__PURE__ */ jsx(reactNative.Text, { className: cn("font-medium", sizes.text), children }),
+    onDelete && /* @__PURE__ */ jsx(
       reactNative.Pressable,
       {
         onPress: (e) => {
@@ -2902,20 +3250,20 @@ function Chip({
           sizes.deleteButton,
           "rounded-full p-0.5 web:hover:bg-black/10 active:bg-black/20"
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-xs leading-none", children: "\xD7" })
+        children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-xs leading-none", children: "\xD7" })
       }
     )
   ] });
   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
   );
   if (isClickable) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsx(
       reactNative.Pressable,
       {
         onPress,
@@ -2927,9 +3275,9 @@ function Chip({
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: baseClassName, ...props, children: content });
+  return /* @__PURE__ */ jsx(reactNative.View, { className: baseClassName, ...props, children: content });
 }
-var colorStyles2 = {
+var colorStyles3 = {
   default: "text-text-link",
   primary: "text-brand-primary",
   secondary: "text-brand-secondary",
@@ -2955,19 +3303,19 @@ function Link({
     if (isDisabled) return;
     onPress?.();
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.Pressable,
     {
       onPress: handlePress,
       disabled: isDisabled,
       accessibilityRole: "link",
       accessibilityHint: isExternal ? "Opens in new window" : void 0,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxs(
         reactNative.Text,
         {
           className: cn(
             "font-medium",
-            colorStyles2[color],
+            colorStyles3[color],
             underlineStyles[underline],
             isDisabled && "opacity-50 cursor-not-allowed",
             "web:cursor-pointer active:opacity-70",
@@ -2983,8 +3331,16 @@ function Link({
     }
   );
 }
+var createPortal;
+if (reactNative.Platform.OS === "web") {
+  try {
+    createPortal = __require("react-dom").createPortal;
+  } catch {
+  }
+}
 function Tooltip({
   label,
+  content,
   children,
   placement = "top",
   openDelay = 0,
@@ -2992,11 +3348,48 @@ function Tooltip({
   hasArrow = true,
   isDisabled = false,
   className,
+  usePortal: usePortalProp = false,
   ...props
 }) {
   const [isVisible, setIsVisible] = React24.useState(false);
+  const [portalPos, setPortalPos] = React24.useState(null);
   const openTimeoutRef = React24.useRef(null);
   const closeTimeoutRef = React24.useRef(null);
+  const triggerRef = React24.useRef(null);
+  const isPortalMode = usePortalProp && reactNative.Platform.OS === "web" && !!createPortal;
+  React24.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);
@@ -3038,8 +3431,42 @@ 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__ */ jsxRuntime.jsxs(reactNative.View, { className: "relative", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+  const tooltipContent = /* @__PURE__ */ jsxs(reactNative.View, { className: "bg-neutral-800 px-3 py-2 rounded-md shadow-lg max-w-xs", children: [
+    content ?? /* @__PURE__ */ jsx(reactNative.Text, { className: "text-white text-sm", children: label }),
+    hasArrow && /* @__PURE__ */ jsx(
+      reactNative.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(reactNative.View, { className: "relative", ref: triggerRef, ...props, children: [
+    /* @__PURE__ */ jsx(
       reactNative.Pressable,
       {
         onHoverIn: show,
@@ -3050,27 +3477,16 @@ function Tooltip({
         children
       }
     ),
-    isVisible && /* @__PURE__ */ jsxRuntime.jsx(
+    isPortalMode ? renderPortalTooltip() : isVisible && /* @__PURE__ */ jsx(
       reactNative.View,
       {
         className: cn(
-          "absolute z-50",
+          "absolute z-50 web:animate-fade-in",
           tooltipPositionStyles[placement],
           className
         ),
         pointerEvents: "none",
-        children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "bg-neutral-800 px-3 py-2 rounded-md shadow-lg max-w-xs", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-white text-sm", children: label }),
-          hasArrow && /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.View,
-            {
-              className: cn(
-                "absolute w-0 h-0 border-4",
-                arrowStyles2[placement]
-              )
-            }
-          )
-        ] })
+        children: tooltipContent
       }
     )
   ] });
@@ -3097,11 +3513,11 @@ function Collapse({
     }
     onToggle?.(newState);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(CollapseContext.Provider, { value: { isOpen, toggle }, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("w-full", className), ...props, children }) });
+  return /* @__PURE__ */ jsx(CollapseContext.Provider, { value: { isOpen, toggle }, children: /* @__PURE__ */ jsx(reactNative.View, { className: cn("w-full", className), ...props, children }) });
 }
 function CollapseButton({ children, className }) {
   const { isOpen, toggle } = React24.useContext(CollapseContext);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxs(
     reactNative.Pressable,
     {
       onPress: toggle,
@@ -3114,7 +3530,7 @@ function CollapseButton({ children, className }) {
       ),
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("text-text-secondary transition-transform", isOpen && "rotate-180"), children: "\u25BC" })
+        /* @__PURE__ */ jsx(reactNative.Text, { className: cn("text-text-secondary transition-transform", isOpen && "rotate-180"), children: "\u25BC" })
       ]
     }
   );
@@ -3122,7 +3538,7 @@ function CollapseButton({ children, className }) {
 function CollapseContent({ children, className }) {
   const { isOpen } = React24.useContext(CollapseContext);
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("overflow-hidden", className), children });
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("overflow-hidden", className), children });
 }
 var AccordionContext = React24.createContext({
   openIndices: /* @__PURE__ */ new Set(),
@@ -3152,7 +3568,7 @@ function Accordion({
       return newSet;
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: { openIndices, toggleIndex, allowMultiple }, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("w-full divide-y divide-border-default", className), ...props, children: React24__default.default.Children.map(children, (child, index) => {
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { openIndices, toggleIndex, allowMultiple }, children: /* @__PURE__ */ jsx(reactNative.View, { className: cn("w-full divide-y divide-border-default", className), ...props, children: React24__default.default.Children.map(children, (child, index) => {
     if (React24__default.default.isValidElement(child)) {
       return React24__default.default.cloneElement(child, { index });
     }
@@ -3162,7 +3578,7 @@ function Accordion({
 function AccordionItem({ index = 0, children, className }) {
   const { openIndices, toggleIndex } = React24.useContext(AccordionContext);
   const isOpen = openIndices.has(index);
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className, children: React24__default.default.Children.map(children, (child) => {
+  return /* @__PURE__ */ jsx(reactNative.View, { className, children: React24__default.default.Children.map(children, (child) => {
     if (React24__default.default.isValidElement(child)) {
       return React24__default.default.cloneElement(child, {
         isOpen,
@@ -3178,7 +3594,7 @@ function AccordionButton({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxs(
     reactNative.Pressable,
     {
       onPress: onToggle,
@@ -3190,15 +3606,15 @@ function AccordionButton({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-text-primary font-medium", children }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("text-text-secondary transition-transform", isOpen && "rotate-180"), children: "\u25BC" })
+        /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-primary font-medium", children }),
+        /* @__PURE__ */ jsx(reactNative.Text, { className: cn("text-text-secondary transition-transform", isOpen && "rotate-180"), children: "\u25BC" })
       ]
     }
   );
 }
 function AccordionPanel({ isOpen = false, children, className }) {
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("pb-4 px-1", className), children });
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("pb-4 px-1", className), children });
 }
 function Breadcrumbs({
   separator = "/",
@@ -3214,19 +3630,19 @@ function Breadcrumbs({
     const lastItems = items.slice(-Math.floor(maxItems / 2));
     displayItems = [
       firstItem,
-      /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbEllipsis, {}, "ellipsis"),
+      /* @__PURE__ */ jsx(BreadcrumbEllipsis, {}, "ellipsis"),
       ...lastItems
     ];
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       accessibilityRole: "none",
       className: cn("flex-row items-center flex-wrap", className),
       ...props,
-      children: displayItems.map((child, index) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "flex-row items-center", children: [
+      children: displayItems.map((child, index) => /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", children: [
         child,
-        index < displayItems.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "mx-2 text-text-tertiary text-sm", children: separator })
+        index < displayItems.length - 1 && /* @__PURE__ */ jsx(reactNative.Text, { className: "mx-2 text-text-tertiary text-sm", children: separator })
       ] }, index))
     }
   );
@@ -3239,7 +3655,7 @@ function BreadcrumbItem({
   children
 }) {
   if (isCurrentPage) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsx(
       reactNative.Text,
       {
         accessibilityRole: "text",
@@ -3249,13 +3665,13 @@ function BreadcrumbItem({
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.Pressable,
     {
       onPress,
       accessibilityRole: "link",
       accessibilityHint: href,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsx(
         reactNative.Text,
         {
           className: cn(
@@ -3271,48 +3687,90 @@ function BreadcrumbItem({
   );
 }
 function BreadcrumbEllipsis() {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-sm text-text-tertiary", children: "..." });
+  return /* @__PURE__ */ jsx(reactNative.Text, { className: "text-sm text-text-tertiary", children: "..." });
 }
 var PopoverContext = React24.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] = React24.useState(false);
   const isOpen = controlledIsOpen ?? internalIsOpen;
-  const setIsOpen = (open) => {
+  const closeTimerRef = React24.useRef(null);
+  const setIsOpen = React24.useCallback((open) => {
     if (controlledIsOpen === void 0) {
       setInternalIsOpen(open);
     }
     onOpenChange?.(open);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(PopoverContext.Provider, { value: { isOpen, setIsOpen, placement }, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("relative", className), ...props, children }) });
+  }, [controlledIsOpen, onOpenChange]);
+  const handleHoverIn = React24.useCallback(() => {
+    if (triggerMode !== "hover") return;
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+    setIsOpen(true);
+  }, [triggerMode, setIsOpen]);
+  const handleHoverOut = React24.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(reactNative.View, { className: cn("relative", className), ...props, children })
+    }
+  );
 }
 function PopoverTrigger({ children, className }) {
-  const { isOpen, setIsOpen } = React24.useContext(PopoverContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const { isOpen, setIsOpen, triggerMode, handleHoverIn, handleHoverOut } = React24.useContext(PopoverContext);
+  const hoverProps = triggerMode === "hover" ? {
+    onHoverIn: handleHoverIn,
+    onHoverOut: handleHoverOut,
+    onMouseEnter: handleHoverIn,
+    onMouseLeave: handleHoverOut
+  } : {};
+  return /* @__PURE__ */ jsx(
     reactNative.Pressable,
     {
       onPress: () => setIsOpen(!isOpen),
       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 } = React24.useContext(PopoverContext);
+  const { isOpen, setIsOpen, placement, triggerMode, handleHoverIn, handleHoverOut } = React24.useContext(PopoverContext);
   if (!isOpen) return null;
   const placementStyles3 = {
     top: "bottom-full left-0 mb-2",
@@ -3320,8 +3778,14 @@ function PopoverContent({ children, className }) {
     left: "right-full top-0 mr-2",
     right: "left-full top-0 ml-2"
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+  const hoverProps = triggerMode === "hover" ? {
+    onHoverIn: handleHoverIn,
+    onHoverOut: handleHoverOut,
+    onMouseEnter: handleHoverIn,
+    onMouseLeave: handleHoverOut
+  } : {};
+  return /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsx(
       reactNative.Pressable,
       {
         onPress: () => setIsOpen(false),
@@ -3329,7 +3793,7 @@ function PopoverContent({ children, className }) {
         style: { position: "absolute" }
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxs(
       reactNative.View,
       {
         className: cn(
@@ -3339,14 +3803,30 @@ 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
+        ]
       }
     )
   ] });
 }
 function PopoverCloseButton({ children, className }) {
   const { setIsOpen } = React24.useContext(PopoverContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.Pressable,
     {
       onPress: () => setIsOpen(false),
@@ -3380,11 +3860,11 @@ function Menu({
     onOpenChange?.(open);
   };
   const closeMenu = () => setIsOpen(false);
-  return /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value: { isOpen, setIsOpen, closeMenu }, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("relative", className), ...props, children }) });
+  return /* @__PURE__ */ jsx(MenuContext.Provider, { value: { isOpen, setIsOpen, closeMenu }, children: /* @__PURE__ */ jsx(reactNative.View, { className: cn("relative", className), ...props, children }) });
 }
 function MenuTrigger({ children, className }) {
   const { isOpen, setIsOpen } = React24.useContext(MenuContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.Pressable,
     {
       onPress: () => setIsOpen(!isOpen),
@@ -3398,8 +3878,8 @@ function MenuTrigger({ children, className }) {
 function MenuList({ children, className }) {
   const { isOpen, setIsOpen } = React24.useContext(MenuContext);
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsx(
       reactNative.Pressable,
       {
         onPress: () => setIsOpen(false),
@@ -3407,7 +3887,7 @@ function MenuList({ children, className }) {
         style: { position: "absolute" }
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsx(
       reactNative.View,
       {
         className: cn(
@@ -3436,7 +3916,7 @@ function MenuItem({
     onPress?.();
     closeMenu();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxs(
     reactNative.Pressable,
     {
       onPress: handlePress,
@@ -3450,8 +3930,8 @@ function MenuItem({
         className
       ),
       children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "mr-3", children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        icon && /* @__PURE__ */ jsx(reactNative.View, { className: "mr-3", children: icon }),
+        /* @__PURE__ */ jsx(
           reactNative.Text,
           {
             className: cn(
@@ -3466,11 +3946,11 @@ function MenuItem({
   );
 }
 function MenuDivider({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("h-px bg-border-default my-1", className) });
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("h-px bg-border-default my-1", className) });
 }
 function MenuGroup({ label, children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "px-4 py-2 text-xs font-semibold text-text-secondary uppercase", children: label }),
+  return /* @__PURE__ */ jsxs(reactNative.View, { className, children: [
+    label && /* @__PURE__ */ jsx(reactNative.Text, { className: "px-4 py-2 text-xs font-semibold text-text-secondary uppercase", children: label }),
     children
   ] });
 }
@@ -3494,6 +3974,7 @@ function Select({
   isDisabled = false,
   isInvalid = false,
   options,
+  variant = "default",
   className,
   ...props
 }) {
@@ -3532,8 +4013,8 @@ function Select({
     }
   };
   const hasValue = isMulti ? values.length > 0 : value !== null && value !== void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.Provider, { value: { value, isMulti, isOpen, setIsOpen, selectValue, isSelected }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("relative w-full", className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: { value, isMulti, isOpen, setIsOpen, selectValue, isSelected }, children: /* @__PURE__ */ jsxs(reactNative.View, { className: cn("relative w-full", className), ...props, children: [
+    /* @__PURE__ */ jsxs(
       reactNative.Pressable,
       {
         onPress: () => !isDisabled && setIsOpen(!isOpen),
@@ -3542,14 +4023,14 @@ 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"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsx(
             reactNative.Text,
             {
               className: cn(
@@ -3559,8 +4040,8 @@ function Select({
               children: getDisplayValue()
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "flex-row items-center gap-2", children: [
-            hasValue && /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center gap-2", children: [
+            hasValue && /* @__PURE__ */ jsx(
               reactNative.Pressable,
               {
                 onPress: (e) => {
@@ -3568,16 +4049,16 @@ function Select({
                   clearValue();
                 },
                 className: "p-1",
-                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-text-secondary text-xs", children: "\xD7" })
+                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-secondary text-xs", children: "\xD7" })
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("text-text-secondary", isOpen && "rotate-180"), children: "\u25BC" })
+            /* @__PURE__ */ jsx(reactNative.Text, { className: cn("text-text-secondary", isOpen && "rotate-180"), children: "\u25BC" })
           ] })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+    isOpen && /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsx(
         reactNative.Pressable,
         {
           onPress: () => setIsOpen(false),
@@ -3585,7 +4066,7 @@ function Select({
           style: { position: "absolute" }
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsx(
         reactNative.View,
         {
           className: cn(
@@ -3593,7 +4074,7 @@ function Select({
             "bg-surface-elevated rounded-md shadow-lg border border-border-default",
             "max-h-60 overflow-hidden"
           ),
-          children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { className: "py-1", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectOption, { option }, option.value)) })
+          children: /* @__PURE__ */ jsx(reactNative.ScrollView, { className: "py-1", children: options.map((option) => /* @__PURE__ */ jsx(SelectOption, { option }, option.value)) })
         }
       )
     ] })
@@ -3602,7 +4083,7 @@ function Select({
 function SelectOption({ option }) {
   const { selectValue, isSelected, isMulti } = React24.useContext(SelectContext);
   const selected = isSelected(option.value);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxs(
     reactNative.Pressable,
     {
       onPress: () => !option.isDisabled && selectValue(option.value),
@@ -3616,17 +4097,17 @@ function SelectOption({ option }) {
         option.isDisabled && "opacity-50 cursor-not-allowed"
       ),
       children: [
-        isMulti && /* @__PURE__ */ jsxRuntime.jsx(
+        isMulti && /* @__PURE__ */ jsx(
           reactNative.View,
           {
             className: cn(
               "w-4 h-4 mr-3 rounded border",
               selected ? "bg-brand-primary border-brand-primary" : "border-border-strong"
             ),
-            children: selected && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-white text-xs text-center", children: "\u2713" })
+            children: selected && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-white text-xs text-center", children: "\u2713" })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("text-sm", selected && !isMulti ? "text-brand-primary font-medium" : "text-text-primary"), children: option.label })
+        /* @__PURE__ */ jsx(reactNative.Text, { className: cn("text-sm", selected && !isMulti ? "text-brand-primary font-medium" : "text-text-primary"), children: option.label })
       ]
     }
   );
@@ -3639,7 +4120,7 @@ var ToolbarButtonContext = React24.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]"
@@ -3699,8 +4180,8 @@ function ToolbarButton({
       };
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(ToolbarButtonContext.Provider, { value: { isOpen, setIsOpen }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "relative", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsx(ToolbarButtonContext.Provider, { value: { isOpen, setIsOpen }, children: /* @__PURE__ */ jsxs(reactNative.View, { className: "relative", ...props, children: [
+    /* @__PURE__ */ jsxs(
       reactNative.Pressable,
       {
         onPress: handlePress,
@@ -3716,7 +4197,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
@@ -3728,7 +4209,7 @@ function ToolbarButton({
           }
         ],
         children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "w-5 h-5 items-center justify-center", children: React24__default.default.isValidElement(icon) ? React24__default.default.cloneElement(icon, {
+          icon && /* @__PURE__ */ jsx(reactNative.View, { className: "w-5 h-5 items-center justify-center", children: React24__default.default.isValidElement(icon) ? React24__default.default.cloneElement(icon, {
             size: 20,
             width: 20,
             height: 20,
@@ -3739,7 +4220,7 @@ function ToolbarButton({
               height: 20
             }
           }) : icon }),
-          showLabel && /* @__PURE__ */ jsxRuntime.jsx(
+          showLabel && /* @__PURE__ */ jsx(
             reactNative.Text,
             {
               className: cn(
@@ -3755,8 +4236,8 @@ function ToolbarButton({
         ]
       }
     ),
-    menuContent && isOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+    menuContent && isOpen && /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsx(
         reactNative.Pressable,
         {
           onPress: handleClose,
@@ -3764,7 +4245,7 @@ function ToolbarButton({
           className: "z-40"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsx(
         reactNative.View,
         {
           className: cn(
@@ -3801,7 +4282,7 @@ function ToolbarButtonGroup({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       className: cn(
@@ -3839,7 +4320,7 @@ function RadioGroup({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.Provider, { value: { value, onChange, name, isDisabled, size, color }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { value, onChange, name, isDisabled, size, color }, children: /* @__PURE__ */ jsxs(
     reactNative.View,
     {
       className: cn(className),
@@ -3847,8 +4328,8 @@ function RadioGroup({
       accessibilityLabel: label,
       ...props,
       children: [
-        label && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-sm font-medium text-text-primary mb-2", children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        label && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-sm font-medium text-text-primary mb-2", children: label }),
+        /* @__PURE__ */ jsx(
           reactNative.View,
           {
             className: cn(
@@ -3867,7 +4348,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" },
@@ -3892,13 +4373,13 @@ 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);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxs(
     reactNative.Pressable,
     {
       onPress: handlePress,
@@ -3912,7 +4393,7 @@ function Radio({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsx(
           reactNative.View,
           {
             className: cn(
@@ -3922,15 +4403,15 @@ function Radio({
               isChecked ? checked : unchecked,
               !isDisabled && !isChecked && "web:hover:border-brand-primary"
             ),
-            children: isChecked && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("rounded-full bg-white", inner) })
+            children: isChecked && /* @__PURE__ */ jsx(reactNative.View, { className: cn("rounded-full bg-white", inner) })
           }
         ),
-        children && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("ml-2 text-text-primary", text), children })
+        children && /* @__PURE__ */ jsx(reactNative.Text, { className: cn("ml-2 text-text-primary", text), children })
       ]
     }
   );
 }
-var sizeStyles10 = {
+var sizeStyles11 = {
   left: {
     sm: "w-64",
     md: "w-80",
@@ -3984,46 +4465,46 @@ function Drawer({
       onClose();
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.Modal,
     {
       visible: isOpen,
       transparent: true,
       animationType: "fade",
       onRequestClose: onClose,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "flex-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-1", children: [
+        /* @__PURE__ */ jsx(
           reactNative.Pressable,
           {
             onPress: handleOverlayPress,
             className: "absolute inset-0 bg-black/50"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxs(
           reactNative.View,
           {
             className: cn(
               "absolute bg-surface-elevated shadow-2xl",
               placementStyles[placement],
-              sizeStyles10[placement][size],
+              sizeStyles11[placement][size],
               className
             ),
             accessibilityRole: "dialog",
             ...props,
             children: [
-              (title || showCloseButton) && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "flex-row items-center justify-between px-4 py-3 border-b border-border-default", children: [
-                title && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-lg font-semibold text-text-primary", children: title }),
-                showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
+              (title || showCloseButton) && /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center justify-between px-4 py-3 border-b border-border-default", children: [
+                title && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-lg font-semibold text-text-primary", children: title }),
+                showCloseButton && /* @__PURE__ */ jsx(
                   reactNative.Pressable,
                   {
                     onPress: onClose,
                     className: "p-2 -m-2 rounded-full web:hover:bg-interactive-hover",
                     accessibilityLabel: "Close drawer",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-text-secondary text-xl", children: "\xD7" })
+                    children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-secondary text-xl", children: "\xD7" })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "flex-1", children })
+              /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1", children })
             ]
           }
         )
@@ -4032,7 +4513,7 @@ function Drawer({
   );
 }
 function DrawerHeader({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       className: cn("px-4 py-3 border-b border-border-default", className),
@@ -4043,7 +4524,7 @@ function DrawerHeader({ className, children, ...props }) {
 }
 function DrawerBody({ scrollable = true, className, children, ...props }) {
   if (scrollable) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsx(
       reactNative.ScrollView,
       {
         className: cn("flex-1 p-4", className),
@@ -4052,10 +4533,10 @@ function DrawerBody({ scrollable = true, className, children, ...props }) {
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("flex-1 p-4", className), ...props, children });
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("flex-1 p-4", className), ...props, children });
 }
 function DrawerFooter({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       className: cn(
@@ -4076,12 +4557,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",
@@ -4106,38 +4587,45 @@ function Progress({
   showValue = false,
   formatValue = (v, m) => `${Math.round(v / m * 100)}%`,
   label,
+  trackWidth,
+  customColor,
   className,
   ...props
 }) {
   const percentage = Math.min(Math.max(value / max * 100, 0), 100);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("w-full", className), ...props, children: [
-    (label || showValue) && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "flex-row justify-between items-center mb-1", children: [
-      label && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-sm text-text-secondary", children: label }),
-      showValue && !isIndeterminate && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-sm font-medium text-text-primary", children: formatValue(value, max) })
+  return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("w-full", className), ...props, children: [
+    (label || showValue) && /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row justify-between items-center mb-1", children: [
+      label && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-sm text-text-secondary", children: label }),
+      showValue && !isIndeterminate && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-sm font-medium text-text-primary", children: formatValue(value, max) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsx(
       reactNative.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,
           max,
           now: isIndeterminate ? void 0 : value
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
+        children: /* @__PURE__ */ jsx(
           reactNative.View,
           {
             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 } : {}
+            }
           }
         )
       }
@@ -4157,7 +4645,11 @@ function CircularProgress({
   ...props
 }) {
   const percentage = Math.min(Math.max(value / max * 100, 0), 100);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference - percentage / 100 * circumference;
+  const center = size / 2;
+  return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
       className: cn("items-center justify-center", className),
@@ -4170,41 +4662,59 @@ function CircularProgress({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsx(
           reactNative.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__ */ jsxRuntime.jsx(
-          reactNative.View,
+        showValue && !isIndeterminate && /* @__PURE__ */ jsx(
+          reactNative.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__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-xs font-semibold text-text-primary", children: formatValue(value, max) })
+        )
       ]
     }
   );
@@ -4224,30 +4734,30 @@ function ProgressSteps({
   ...props
 }) {
   const { dot, connector } = stepSizeStyles[size];
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("w-full", className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "flex-row items-center", children: Array.from({ length: totalSteps }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(React24__default.default.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("w-full", className), ...props, children: [
+    /* @__PURE__ */ jsx(reactNative.View, { className: "flex-row items-center", children: Array.from({ length: totalSteps }).map((_, index) => /* @__PURE__ */ jsxs(React24__default.default.Fragment, { children: [
+      /* @__PURE__ */ jsx(
         reactNative.View,
         {
           className: cn(
             "rounded-full",
             dot,
-            index <= currentStep ? colorStyles4[color] : "bg-border-strong"
+            index <= currentStep ? colorStyles5[color] : "bg-border-strong"
           )
         }
       ),
-      index < totalSteps - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+      index < totalSteps - 1 && /* @__PURE__ */ jsx(
         reactNative.View,
         {
           className: cn(
             "flex-1 mx-1",
             connector,
-            index < currentStep ? colorStyles4[color] : "bg-border-strong"
+            index < currentStep ? colorStyles5[color] : "bg-border-strong"
           )
         }
       )
     ] }, index)) }),
-    labels && labels.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "flex-row mt-2", children: labels.map((label, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    labels && labels.length > 0 && /* @__PURE__ */ jsx(reactNative.View, { className: "flex-row mt-2", children: labels.map((label, index) => /* @__PURE__ */ jsx(
       reactNative.Text,
       {
         className: cn(
@@ -4298,9 +4808,9 @@ function ToastProvider({
   const removeAllToasts = React24.useCallback(() => {
     setToasts([]);
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { toasts, addToast, removeToast, removeAllToasts }, children: [
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toasts, addToast, removeToast, removeAllToasts }, children: [
     children,
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsx(
       reactNative.View,
       {
         className: cn(
@@ -4308,7 +4818,7 @@ function ToastProvider({
           positionStyles[position]
         ),
         pointerEvents: "box-none",
-        children: toasts.map((toast) => /* @__PURE__ */ jsxRuntime.jsx(
+        children: toasts.map((toast) => /* @__PURE__ */ jsx(
           ToastItem,
           {
             ...toast,
@@ -4374,7 +4884,7 @@ function ToastItem({
       return () => clearTimeout(timer);
     }
   }, [duration, onClose]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       className: cn(
@@ -4383,19 +4893,19 @@ function ToastItem({
         border
       ),
       accessibilityRole: "alert",
-      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex-row items-start p-3", bg), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("w-6 h-6 items-center justify-center mr-3"), children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("text-lg", iconColors[status]), children: icon }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "flex-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-sm font-semibold text-text-primary", children: title }),
-          description && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-sm text-text-secondary mt-0.5", children: description })
+      children: /* @__PURE__ */ jsxs(reactNative.View, { className: cn("flex-row items-start p-3", bg), children: [
+        /* @__PURE__ */ jsx(reactNative.View, { className: cn("w-6 h-6 items-center justify-center mr-3"), children: /* @__PURE__ */ jsx(reactNative.Text, { className: cn("text-lg", iconColors[status]), children: icon }) }),
+        /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-1", children: [
+          /* @__PURE__ */ jsx(reactNative.Text, { className: "text-sm font-semibold text-text-primary", children: title }),
+          description && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-sm text-text-secondary mt-0.5", children: description })
         ] }),
-        isClosable && /* @__PURE__ */ jsxRuntime.jsx(
+        isClosable && /* @__PURE__ */ jsx(
           reactNative.Pressable,
           {
             onPress: onClose,
             className: "p-1 -m-1 rounded web:hover:bg-interactive-hover",
             accessibilityLabel: "Close toast",
-            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-text-tertiary text-lg", children: "\xD7" })
+            children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-tertiary text-lg", children: "\xD7" })
           }
         )
       ] })
@@ -4413,7 +4923,7 @@ function Toast({
   ...props
 }) {
   const { bg, border, icon } = statusStyles[status];
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       className: cn(
@@ -4424,19 +4934,19 @@ function Toast({
       ),
       accessibilityRole: "alert",
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex-row items-start p-3", bg), children: [
-        showIcon && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "w-6 h-6 items-center justify-center mr-3", children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("text-lg", iconColors[status]), children: icon }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "flex-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-sm font-semibold text-text-primary", children: title }),
-          description && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-sm text-text-secondary mt-0.5", children: description })
+      children: /* @__PURE__ */ jsxs(reactNative.View, { className: cn("flex-row items-start p-3", bg), children: [
+        showIcon && /* @__PURE__ */ jsx(reactNative.View, { className: "w-6 h-6 items-center justify-center mr-3", children: /* @__PURE__ */ jsx(reactNative.Text, { className: cn("text-lg", iconColors[status]), children: icon }) }),
+        /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-1", children: [
+          /* @__PURE__ */ jsx(reactNative.Text, { className: "text-sm font-semibold text-text-primary", children: title }),
+          description && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-sm text-text-secondary mt-0.5", children: description })
         ] }),
-        isClosable && onClose && /* @__PURE__ */ jsxRuntime.jsx(
+        isClosable && onClose && /* @__PURE__ */ jsx(
           reactNative.Pressable,
           {
             onPress: onClose,
             className: "p-1 -m-1 rounded web:hover:bg-interactive-hover",
             accessibilityLabel: "Close toast",
-            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-text-tertiary text-lg", children: "\xD7" })
+            children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-tertiary text-lg", children: "\xD7" })
           }
         )
       ] })
@@ -4524,13 +5034,13 @@ function Autocomplete({
   const showMinCharsMessage = inputValue.length > 0 && inputValue.length < minChars;
   const showNoResults = !isLoading && inputValue.length >= minChars && filteredOptions.length === 0;
   const showOptions = isOpen && !showMinCharsMessage && filteredOptions.length > 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("w-full", className), ...props, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { className: "text-sm font-medium text-text-primary mb-1", children: [
+  return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("w-full", className), ...props, children: [
+    label && /* @__PURE__ */ jsxs(reactNative.Text, { className: "text-sm font-medium text-text-primary mb-1", children: [
       label,
-      isRequired && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-status-error ml-0.5", children: "*" })
+      isRequired && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-status-error ml-0.5", children: "*" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxs(reactNative.View, { className: "relative", children: [
+      /* @__PURE__ */ jsxs(
         reactNative.View,
         {
           className: cn(
@@ -4541,7 +5051,7 @@ function Autocomplete({
             isDisabled && "opacity-50"
           ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsx(
               reactNative.TextInput,
               {
                 value: inputValue,
@@ -4558,20 +5068,20 @@ function Autocomplete({
                 ...inputProps
               }
             ),
-            isClearable && value && !isDisabled && /* @__PURE__ */ jsxRuntime.jsx(
+            isClearable && value && !isDisabled && /* @__PURE__ */ jsx(
               reactNative.Pressable,
               {
                 onPress: handleClear,
                 className: "p-2",
                 accessibilityLabel: "Clear selection",
-                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-text-tertiary", children: "\xD7" })
+                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-tertiary", children: "\xD7" })
               }
             ),
-            isLoading && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-text-tertiary animate-spin", children: "\u27F3" }) })
+            isLoading && /* @__PURE__ */ jsx(reactNative.View, { className: "p-2", children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-tertiary animate-spin", children: "\u27F3" }) })
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      isOpen && /* @__PURE__ */ jsx(
         reactNative.View,
         {
           className: cn(
@@ -4579,15 +5089,15 @@ function Autocomplete({
             "bg-surface-elevated rounded-md shadow-lg border border-border-default",
             "max-h-60 overflow-hidden"
           ),
-          children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.ScrollView, { className: "py-1", children: [
-            showMinCharsMessage && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "px-3 py-2 text-sm text-text-tertiary", children: minCharsText || `Type at least ${minChars} characters` }),
-            isLoading && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "px-3 py-2 text-sm text-text-tertiary", children: loadingText }),
-            showNoResults && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "px-3 py-2 text-sm text-text-tertiary", children: noOptionsText }),
+          children: /* @__PURE__ */ jsxs(reactNative.ScrollView, { className: "py-1", children: [
+            showMinCharsMessage && /* @__PURE__ */ jsx(reactNative.Text, { className: "px-3 py-2 text-sm text-text-tertiary", children: minCharsText || `Type at least ${minChars} characters` }),
+            isLoading && /* @__PURE__ */ jsx(reactNative.Text, { className: "px-3 py-2 text-sm text-text-tertiary", children: loadingText }),
+            showNoResults && /* @__PURE__ */ jsx(reactNative.Text, { className: "px-3 py-2 text-sm text-text-tertiary", children: noOptionsText }),
             showOptions && filteredOptions.map((option, index) => {
               const isHighlighted = index === highlightedIndex;
               const isSelected = option.value === value;
               if (renderOption) {
-                return /* @__PURE__ */ jsxRuntime.jsx(
+                return /* @__PURE__ */ jsx(
                   reactNative.Pressable,
                   {
                     onPress: () => handleSelectOption(option),
@@ -4597,7 +5107,7 @@ function Autocomplete({
                   String(option.value)
                 );
               }
-              return /* @__PURE__ */ jsxRuntime.jsxs(
+              return /* @__PURE__ */ jsxs(
                 reactNative.Pressable,
                 {
                   onPress: () => handleSelectOption(option),
@@ -4610,7 +5120,7 @@ function Autocomplete({
                     !option.isDisabled && "web:hover:bg-interactive-hover"
                   ),
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
+                    /* @__PURE__ */ jsx(
                       reactNative.Text,
                       {
                         className: cn(
@@ -4620,7 +5130,7 @@ function Autocomplete({
                         children: option.label
                       }
                     ),
-                    option.description && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-xs text-text-tertiary mt-0.5", children: option.description })
+                    option.description && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-xs text-text-tertiary mt-0.5", children: option.description })
                   ]
                 },
                 String(option.value)
@@ -4630,7 +5140,7 @@ function Autocomplete({
         }
       )
     ] }),
-    (helperText || errorMessage) && /* @__PURE__ */ jsxRuntime.jsx(
+    (helperText || errorMessage) && /* @__PURE__ */ jsx(
       reactNative.Text,
       {
         className: cn(
@@ -4642,12 +5152,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",
@@ -4686,7 +5196,7 @@ function HelpTip({
 }) {
   const [internalIsOpen, setInternalIsOpen] = React24.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);
@@ -4702,8 +5212,8 @@ function HelpTip({
       setInternalIsOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("relative inline-flex", className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("relative inline-flex", className), ...props, children: [
+    /* @__PURE__ */ jsx(
       reactNative.Pressable,
       {
         onPress: handlePress,
@@ -4715,15 +5225,15 @@ 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__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("font-semibold", iconSize, colorStyles5[color]), children: iconMap[icon] })
+        children: /* @__PURE__ */ jsx(reactNative.Text, { className: cn("font-semibold", iconSize, colorStyles6[color]), children: iconMap[icon] })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+    isOpen && /* @__PURE__ */ jsxs(
       reactNative.View,
       {
         className: cn(
@@ -4736,8 +5246,8 @@ function HelpTip({
         ),
         style: { maxWidth },
         children: [
-          typeof content === "string" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("text-text-primary", textSize), children: content }) : content,
-          hasArrow && /* @__PURE__ */ jsxRuntime.jsx(
+          typeof content === "string" ? /* @__PURE__ */ jsx(reactNative.Text, { className: cn("text-text-primary", textSize), children: content }) : content,
+          hasArrow && /* @__PURE__ */ jsx(
             reactNative.View,
             {
               className: cn(
@@ -4760,12 +5270,12 @@ function LabelWithHelp({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex-row items-center gap-1", className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { className: "text-sm font-medium text-text-primary", children: [
+  return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("flex-row items-center gap-1", className), ...props, children: [
+    /* @__PURE__ */ jsxs(reactNative.Text, { className: "text-sm font-medium text-text-primary", children: [
       label,
-      isRequired && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-status-error ml-0.5", children: "*" })
+      isRequired && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-status-error ml-0.5", children: "*" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(HelpTip, { content: helpContent, size: helpSize })
+    /* @__PURE__ */ jsx(HelpTip, { content: helpContent, size: helpSize })
   ] });
 }
 var labelSizeStyles = {
@@ -4793,7 +5303,7 @@ function FormField({
   const fieldId = React24__default.default.useId();
   const helperId = `${fieldId}-helper`;
   const errorId = `${fieldId}-error`;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
       className: cn(
@@ -4804,7 +5314,7 @@ function FormField({
       ),
       ...props,
       children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(
+        label && /* @__PURE__ */ jsxs(
           reactNative.View,
           {
             className: cn(
@@ -4813,7 +5323,7 @@ function FormField({
             ),
             style: isHorizontal && labelWidth ? { width: labelWidth } : void 0,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
+              /* @__PURE__ */ jsxs(
                 reactNative.Text,
                 {
                   className: cn(
@@ -4822,15 +5332,15 @@ function FormField({
                   ),
                   children: [
                     label,
-                    isRequired && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-status-error ml-0.5", children: "*" })
+                    isRequired && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-status-error ml-0.5", children: "*" })
                   ]
                 }
               ),
-              helpContent && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "ml-1", children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-text-tertiary text-xs", children: "\u2139" }) })
+              helpContent && /* @__PURE__ */ jsx(reactNative.View, { className: "ml-1", children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-tertiary text-xs", children: "\u2139" }) })
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn(isHorizontal && "flex-1"), children: [
+        /* @__PURE__ */ jsxs(reactNative.View, { className: cn(isHorizontal && "flex-1"), children: [
           React24__default.default.Children.map(children, (child) => {
             if (React24__default.default.isValidElement(child)) {
               const childProps = child.props;
@@ -4848,7 +5358,7 @@ function FormField({
             }
             return child;
           }),
-          (helperText || errorMessage) && /* @__PURE__ */ jsxRuntime.jsx(
+          (helperText || errorMessage) && /* @__PURE__ */ jsx(
             reactNative.Text,
             {
               id: isInvalid ? errorId : helperId,
@@ -4871,7 +5381,7 @@ function FormSection({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
       className: cn("w-full", className),
@@ -4879,11 +5389,11 @@ function FormSection({
       accessibilityLabel: title,
       ...props,
       children: [
-        (title || description) && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "mb-4", children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-lg font-semibold text-text-primary", children: title }),
-          description && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-sm text-text-secondary mt-1", children: description })
+        (title || description) && /* @__PURE__ */ jsxs(reactNative.View, { className: "mb-4", children: [
+          title && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-lg font-semibold text-text-primary", children: title }),
+          description && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-sm text-text-secondary mt-1", children: description })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "gap-4", children })
+        /* @__PURE__ */ jsx(reactNative.View, { className: "gap-4", children })
       ]
     }
   );
@@ -4900,7 +5410,7 @@ function FormActions({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       className: cn(
@@ -4925,7 +5435,7 @@ function FormRow({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       className: cn("flex-row items-start", gapStyles3[gap], className),
@@ -4968,7 +5478,7 @@ function Stack({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       className: cn(
@@ -4985,30 +5495,30 @@ function Stack({
   );
 }
 function HStack(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Stack, { ...props, className: cn("flex-row", props.className) });
+  return /* @__PURE__ */ jsx(Stack, { ...props, className: cn("flex-row", props.className) });
 }
 function VStack(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Stack, { ...props, className: cn("flex-col", props.className) });
+  return /* @__PURE__ */ jsx(Stack, { ...props, className: cn("flex-col", props.className) });
 }
 function Section({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("mb-6", className), ...props, children });
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("mb-6", className), ...props, children });
 }
 function SectionHeader({ title, subtitle, trailing, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex-row items-center justify-between mb-3 px-1", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "flex-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-sm font-semibold text-text-secondary uppercase tracking-wider", children: title }),
-      subtitle && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-xs text-text-tertiary mt-0.5", children: subtitle })
+  return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("flex-row items-center justify-between mb-3 px-1", className), children: [
+    /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-1", children: [
+      /* @__PURE__ */ jsx(reactNative.Text, { className: "text-sm font-semibold text-text-secondary uppercase tracking-wider", children: title }),
+      subtitle && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-xs text-text-tertiary mt-0.5", children: subtitle })
     ] }),
-    trailing && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { children: trailing })
+    trailing && /* @__PURE__ */ jsx(reactNative.View, { children: trailing })
   ] });
 }
 function SectionContent({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn(className), ...props, children });
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn(className), ...props, children });
 }
 function DataRow({ label, value, valueClassName, className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex-row items-center justify-between py-2", className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-sm text-text-secondary", children: label }),
-    typeof value === "string" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("text-sm font-medium text-text-primary", valueClassName), children: value }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn(valueClassName), children: value })
+  return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("flex-row items-center justify-between py-2", className), ...props, children: [
+    /* @__PURE__ */ jsx(reactNative.Text, { className: "text-sm text-text-secondary", children: label }),
+    typeof value === "string" ? /* @__PURE__ */ jsx(reactNative.Text, { className: cn("text-sm font-medium text-text-primary", valueClassName), children: value }) : /* @__PURE__ */ jsx(reactNative.View, { className: cn(valueClassName), children: value })
   ] });
 }
 var colorClasses = {
@@ -5034,12 +5544,12 @@ function IconBox({
 }) {
   const colors = colorClasses[color];
   const sizes = sizeClasses[size];
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       className: cn("items-center justify-center", colors.bg, sizes.box, className),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: sizes.iconSize, className: colors.icon })
+      children: /* @__PURE__ */ jsx(Icon, { size: sizes.iconSize, className: colors.icon })
     }
   );
 }
@@ -5057,7 +5567,7 @@ function Surface({
   const surfaceColor = getElevationSurface(baseColor, elevation, theme);
   const shadowStyle = getElevationShadow(baseColor, elevation, theme);
   const glowStyle = glowColor ? getGlowShadow(glowColor, glowIntensity) : {};
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       className: cn("rounded-2xl", className),
@@ -5075,7 +5585,7 @@ function Surface({
 function ListItem({ className, children, onPress, ...props }) {
   const Container = onPress ? reactNative.Pressable : reactNative.View;
   const containerProps = onPress ? { onPress, ...props } : props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     Container,
     {
       className: cn("flex-row items-center py-3 px-4 min-h-[48px]", className),
@@ -5085,19 +5595,19 @@ function ListItem({ className, children, onPress, ...props }) {
   );
 }
 function ListItemIcon({ icon: Icon, className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("mr-3 items-center justify-center", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 20, className: "text-text-secondary" }) });
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("mr-3 items-center justify-center", className), ...props, children: /* @__PURE__ */ jsx(Icon, { size: 20, className: "text-text-secondary" }) });
 }
 function ListItemContent({ title, subtitle, className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex-1 justify-center", className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-sm font-medium text-text-primary", children: title }),
-    subtitle && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-xs text-text-secondary mt-0.5", children: subtitle })
+  return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("flex-1 justify-center", className), ...props, children: [
+    /* @__PURE__ */ jsx(reactNative.Text, { className: "text-sm font-medium text-text-primary", children: title }),
+    subtitle && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-xs text-text-secondary mt-0.5", children: subtitle })
   ] });
 }
 function ListItemTrailing({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("ml-3 items-center justify-center", className), ...props, children });
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("ml-3 items-center justify-center", className), ...props, children });
 }
 function ListItemDivider({ inset = true, className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       className: cn("h-px bg-divider", inset ? "ml-14" : "", className),
@@ -5105,6 +5615,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(jsxRuntime.Fragment, { children: [
+    leftElement,
+    typeof children === "string" ? /* @__PURE__ */ jsx(reactNative.Text, { className: textClasses, children }) : children
+  ] });
+  if (onPress) {
+    return /* @__PURE__ */ jsx(reactNative.Pressable, { onPress, className: containerClasses, ...props, children: content });
+  }
+  return /* @__PURE__ */ jsx(reactNative.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",
@@ -5120,7 +5687,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",
@@ -5170,14 +5737,14 @@ function Typography({
   } else if (shouldTruncate) {
     numLines = 1;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.Text,
     {
       accessibilityRole: isHeading ? "header" : "text",
       numberOfLines: numLines,
       className: cn(
         variantStyles4[variant],
-        color !== "inherit" && colorStyles6[color],
+        color !== "inherit" && colorStyles7[color],
         align && alignStyles2[align],
         shouldTruncate && "truncate",
         marginBottomStyles[mb],
@@ -5190,19 +5757,19 @@ function Typography({
 }
 function Heading({ level = 1, ...props }) {
   const variant = `h${level}`;
-  return /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant, ...props });
+  return /* @__PURE__ */ jsx(Typography, { variant, ...props });
 }
 function Paragraph({ small = false, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: small ? "body2" : "body1", ...props });
+  return /* @__PURE__ */ jsx(Typography, { variant: small ? "body2" : "body1", ...props });
 }
 function Caption(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", ...props });
+  return /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", ...props });
 }
 function Label(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "subtitle2", ...props });
+  return /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", ...props });
 }
 function Overline(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "overline", color: "secondary", ...props });
+  return /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "secondary", ...props });
 }
 var SidebarContext = React24.createContext({
   isCollapsed: false
@@ -5218,7 +5785,7 @@ function Sidebar({
   ...props
 }) {
   const currentWidth = isCollapsed ? collapsedWidth : width;
-  return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: { isCollapsed, activeItem, onItemSelect }, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { isCollapsed, activeItem, onItemSelect }, children: /* @__PURE__ */ jsx(
     reactNative.View,
     {
       style: { width: currentWidth },
@@ -5232,10 +5799,10 @@ function Sidebar({
   ) });
 }
 function SidebarHeader({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("px-4 py-4 border-b border-border-subtle", className), children });
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("px-4 py-4 border-b border-border-subtle", className), children });
 }
 function SidebarContent({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.ScrollView,
     {
       className: cn("flex-1", className),
@@ -5245,13 +5812,13 @@ function SidebarContent({ children, className }) {
   );
 }
 function SidebarFooter({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("px-2 py-4 border-t border-border-subtle", className), children });
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("px-2 py-4 border-t border-border-subtle", className), children });
 }
 function SidebarSection({ title, children, className }) {
   const { isCollapsed } = React24.useContext(SidebarContext);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("px-2 py-2", className), children: [
-    title && !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "px-3 py-2 text-xs font-semibold uppercase tracking-wider text-text-tertiary", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "gap-0.5", children })
+  return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("px-2 py-2", className), children: [
+    title && !isCollapsed && /* @__PURE__ */ jsx(reactNative.Text, { className: "px-3 py-2 text-xs font-semibold uppercase tracking-wider text-text-tertiary", children: title }),
+    /* @__PURE__ */ jsx(reactNative.View, { className: "gap-0.5", children })
   ] });
 }
 function SidebarItem({
@@ -5271,7 +5838,7 @@ function SidebarItem({
     onItemSelect?.(id);
     onPress?.(e);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxs(
     reactNative.Pressable,
     {
       accessibilityRole: "button",
@@ -5286,7 +5853,7 @@ function SidebarItem({
       ),
       ...props,
       children: [
-        Icon && /* @__PURE__ */ jsxRuntime.jsx(
+        Icon && /* @__PURE__ */ jsx(
           Icon,
           {
             size: 20,
@@ -5295,8 +5862,8 @@ function SidebarItem({
             )
           }
         ),
-        !isCollapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+        !isCollapsed && /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsx(
             reactNative.Text,
             {
               numberOfLines: 1,
@@ -5307,15 +5874,15 @@ function SidebarItem({
               children: label
             }
           ),
-          badge && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "ml-auto", children: badge }),
-          hasChildren && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-text-tertiary ml-1", children: isExpanded ? "\u25BC" : "\u25B6" })
+          badge && /* @__PURE__ */ jsx(reactNative.View, { className: "ml-auto", children: badge }),
+          hasChildren && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-tertiary ml-1", children: isExpanded ? "\u25BC" : "\u25B6" })
         ] })
       ]
     }
   );
 }
 function SidebarDivider({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("h-px mx-4 my-2 bg-border-subtle", className) });
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("h-px mx-4 my-2 bg-border-subtle", className) });
 }
 var TableContext = React24.createContext({
   sortDirection: null,
@@ -5338,7 +5905,7 @@ function Table({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     TableContext.Provider,
     {
       value: {
@@ -5351,12 +5918,12 @@ function Table({
         selectable,
         allRowIds: rowIds
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "w-full min-w-full", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(TableLoadingSkeleton, { rowCount: loadingRowCount }) : children }) }) })
+      children: /* @__PURE__ */ jsx(reactNative.View, { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsx(reactNative.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ jsx(reactNative.View, { className: "w-full min-w-full", children: isLoading ? /* @__PURE__ */ jsx(TableLoadingSkeleton, { rowCount: loadingRowCount }) : children }) }) })
     }
   );
 }
 function TableHeader({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       accessibilityRole: "none",
@@ -5366,7 +5933,7 @@ function TableHeader({ children, className }) {
   );
 }
 function TableBody({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityRole: "none", className, children });
+  return /* @__PURE__ */ jsx(reactNative.View, { accessibilityRole: "none", className, children });
 }
 function TableRow({
   isSelected = false,
@@ -5375,7 +5942,7 @@ function TableRow({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       accessibilityRole: "none",
@@ -5413,8 +5980,8 @@ function TableHeaderCell({
     center: "justify-center",
     right: "justify-end"
   };
-  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+  const content = /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsx(
       reactNative.Text,
       {
         className: cn(
@@ -5424,10 +5991,10 @@ function TableHeaderCell({
         children
       }
     ),
-    isSortable && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("ml-1 text-xs", isSorted ? "text-text-primary" : "text-text-tertiary"), children: isSorted ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u2195" })
+    isSortable && /* @__PURE__ */ jsx(reactNative.Text, { className: cn("ml-1 text-xs", isSorted ? "text-text-primary" : "text-text-tertiary"), children: isSorted ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u2195" })
   ] });
   if (isSortable) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsx(
       reactNative.Pressable,
       {
         accessibilityRole: "button",
@@ -5445,7 +6012,7 @@ function TableHeaderCell({
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       style: width ? { width } : { flex: 1 },
@@ -5470,7 +6037,7 @@ function TableCell({
     center: "items-center",
     right: "items-end"
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       style: width ? { width } : { flex: 1 },
@@ -5480,7 +6047,7 @@ function TableCell({
         className
       ),
       ...props,
-      children: typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-sm text-text-primary", children }) : children
+      children: typeof children === "string" ? /* @__PURE__ */ jsx(reactNative.Text, { className: "text-sm text-text-primary", children }) : children
     }
   );
 }
@@ -5498,7 +6065,7 @@ function TablePagination({
   const endItem = Math.min((page + 1) * pageSize, totalItems);
   const canGoPrevious = page > 0;
   const canGoNext = page < totalPages - 1;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
       className: cn(
@@ -5506,9 +6073,9 @@ function TablePagination({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "flex-row items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-sm text-text-secondary", children: "Rows per page:" }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "flex-row gap-1", children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center gap-2", children: [
+          /* @__PURE__ */ jsx(reactNative.Text, { className: "text-sm text-text-secondary", children: "Rows per page:" }),
+          /* @__PURE__ */ jsx(reactNative.View, { className: "flex-row gap-1", children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(
             reactNative.Pressable,
             {
               onPress: () => onPageSizeChange?.(size),
@@ -5516,7 +6083,7 @@ function TablePagination({
                 "px-2 py-1 rounded",
                 pageSize === size ? "bg-brand-primary-subtle text-brand-primary" : "text-text-secondary web:hover:bg-interactive-hover"
               ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
+              children: /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
                   className: cn(
@@ -5530,16 +6097,16 @@ function TablePagination({
             size
           )) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "flex-row items-center gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { className: "text-sm text-text-secondary", children: [
+        /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center gap-4", children: [
+          /* @__PURE__ */ jsxs(reactNative.Text, { className: "text-sm text-text-secondary", children: [
             startItem,
             "-",
             endItem,
             " of ",
             totalItems
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "flex-row gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row gap-1", children: [
+            /* @__PURE__ */ jsx(
               reactNative.Pressable,
               {
                 disabled: !canGoPrevious,
@@ -5549,10 +6116,10 @@ function TablePagination({
                   "p-2 rounded",
                   canGoPrevious ? "web:hover:bg-interactive-hover active:bg-interactive-active" : "opacity-50"
                 ),
-                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-text-secondary", children: "\u2190" })
+                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-secondary", children: "\u2190" })
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsx(
               reactNative.Pressable,
               {
                 disabled: !canGoNext,
@@ -5562,7 +6129,7 @@ function TablePagination({
                   "p-2 rounded",
                   canGoNext ? "web:hover:bg-interactive-hover active:bg-interactive-active" : "opacity-50"
                 ),
-                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-text-secondary", children: "\u2192" })
+                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-secondary", children: "\u2192" })
               }
             )
           ] })
@@ -5626,9 +6193,9 @@ function useTable({
   };
 }
 function TableLoadingSkeleton({ rowCount }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(TableRow, { isHoverable: false, children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "h-4 w-20 bg-interactive-disabled rounded animate-pulse" }) }, i)) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: Array.from({ length: rowCount }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { isHoverable: false, children: [1, 2, 3, 4].map((colIndex) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "flex-1 px-4 py-3.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { isHoverable: false, children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx(reactNative.View, { className: "h-4 w-20 bg-interactive-disabled rounded animate-pulse" }) }, i)) }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableRow, { isHoverable: false, children: [1, 2, 3, 4].map((colIndex) => /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1 px-4 py-3.5", children: /* @__PURE__ */ jsx(
       reactNative.View,
       {
         className: "h-4 bg-interactive-disabled rounded animate-pulse",
@@ -5645,7 +6212,7 @@ function EmptyState({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
       className: cn(
@@ -5654,10 +6221,10 @@ function EmptyState({
       ),
       ...props,
       children: [
-        Icon && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "mb-4 p-4 rounded-full bg-background-subtle", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 32, className: "text-text-tertiary" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-lg font-semibold text-text-primary text-center mb-2", children: title }),
-        description && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-sm text-text-secondary text-center max-w-xs mb-6", children: description }),
-        action && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "mt-2", children: action })
+        Icon && /* @__PURE__ */ jsx(reactNative.View, { className: "mb-4 p-4 rounded-full bg-background-subtle", children: /* @__PURE__ */ jsx(Icon, { size: 32, className: "text-text-tertiary" }) }),
+        /* @__PURE__ */ jsx(reactNative.Text, { className: "text-lg font-semibold text-text-primary text-center mb-2", children: title }),
+        description && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-sm text-text-secondary text-center max-w-xs mb-6", children: description }),
+        action && /* @__PURE__ */ jsx(reactNative.View, { className: "mt-2", children: action })
       ]
     }
   );
@@ -5673,7 +6240,7 @@ function Stepper({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(StepperContext.Provider, { value: { activeStep, orientation }, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(StepperContext.Provider, { value: { activeStep, orientation }, children: /* @__PURE__ */ jsx(
     reactNative.View,
     {
       className: cn(
@@ -5683,9 +6250,9 @@ function Stepper({
       ...props,
       children: React24__default.default.Children.map(children, (child, index) => {
         if (React24__default.default.isValidElement(child)) {
-          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
             React24__default.default.cloneElement(child, { index }),
-            index < React24__default.default.Children.count(children) - 1 && /* @__PURE__ */ jsxRuntime.jsx(StepConnector, { index })
+            index < React24__default.default.Children.count(children) - 1 && /* @__PURE__ */ jsx(StepConnector, { index })
           ] });
         }
         return child;
@@ -5697,7 +6264,7 @@ function StepConnector({ index }) {
   const { activeStep, orientation } = React24.useContext(StepperContext);
   const isCompleted = index < activeStep;
   if (orientation === "horizontal") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsx(
       reactNative.View,
       {
         className: cn(
@@ -5707,7 +6274,7 @@ function StepConnector({ index }) {
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       className: cn(
@@ -5720,7 +6287,7 @@ function StepConnector({ index }) {
 function Step({ index = 0, status, className, children }) {
   const { activeStep, orientation } = React24.useContext(StepperContext);
   const derivedStatus = status || (index < activeStep ? "completed" : index === activeStep ? "active" : "upcoming");
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       className: cn(
@@ -5751,7 +6318,7 @@ function StepIndicator({
     upcoming: "bg-surface-base border-border-strong",
     error: "bg-status-error border-status-error"
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.View,
     {
       className: cn(
@@ -5759,7 +6326,7 @@ function StepIndicator({
         statusStyles2[status],
         className
       ),
-      children: icon || /* @__PURE__ */ jsxRuntime.jsx(
+      children: icon || /* @__PURE__ */ jsx(
         reactNative.Text,
         {
           className: cn(
@@ -5774,7 +6341,7 @@ function StepIndicator({
 }
 function StepLabel({ status = "upcoming", className, children }) {
   const { orientation } = React24.useContext(StepperContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     reactNative.Text,
     {
       className: cn(
@@ -5789,9 +6356,9 @@ function StepLabel({ status = "upcoming", className, children }) {
 }
 function StepContent({ status = "upcoming", className, children }) {
   if (status !== "active") return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("ml-11 mt-2 pb-4", className), children });
+  return /* @__PURE__ */ jsx(reactNative.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",
@@ -5922,10 +6489,10 @@ function DateTime({
   ...props
 }) {
   if (value === null || value === void 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn(colorStyles7[color], className), ...props, children: fallback });
+    return /* @__PURE__ */ jsx(reactNative.Text, { className: cn(colorStyles8[color], className), ...props, children: fallback });
   }
   const formattedDate = formatDate(value, format, isUTC);
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn(colorStyles7[color], className), ...props, children: formattedDate });
+  return /* @__PURE__ */ jsx(reactNative.Text, { className: cn(colorStyles8[color], className), ...props, children: formattedDate });
 }
 function formatDateTime(value, format = "datetime", isUTC = false, fallback = "-") {
   if (value === null || value === void 0) {
@@ -5958,13 +6525,13 @@ function Metric({
   ...props
 }) {
   const styles2 = sizeConfig2[size];
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("items-center", className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "flex-row items-baseline gap-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn(styles2.value, "text-text-primary"), children: value }),
-      unit && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn(styles2.unit, "text-text-tertiary"), children: unit }),
-      trend && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn(styles2.unit, trendColors[trend]), children: trendArrows[trend] })
+  return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("items-center", className), ...props, children: [
+    /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-baseline gap-1", children: [
+      /* @__PURE__ */ jsx(reactNative.Text, { className: cn(styles2.value, "text-text-primary"), children: value }),
+      unit && /* @__PURE__ */ jsx(reactNative.Text, { className: cn(styles2.unit, "text-text-tertiary"), children: unit }),
+      trend && /* @__PURE__ */ jsx(reactNative.Text, { className: cn(styles2.unit, trendColors[trend]), children: trendArrows[trend] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn(styles2.label, "text-text-secondary mt-1"), children: label })
+    /* @__PURE__ */ jsx(reactNative.Text, { className: cn(styles2.label, "text-text-secondary mt-1"), children: label })
   ] });
 }
 function MetricGroup({
@@ -5973,9 +6540,9 @@ function MetricGroup({
   ...props
 }) {
   const items = React24__default.default.Children.toArray(children);
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("flex-row items-center", className), ...props, children: items.map((child, i) => /* @__PURE__ */ jsxRuntime.jsxs(React24__default.default.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "flex-1 items-center", children: child }),
-    i < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("flex-row items-center", className), ...props, children: items.map((child, i) => /* @__PURE__ */ jsxs(React24__default.default.Fragment, { children: [
+    /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1 items-center", children: child }),
+    i < items.length - 1 && /* @__PURE__ */ jsx(
       reactNative.View,
       {
         className: "w-px h-8 bg-divider mx-2",
@@ -5984,6 +6551,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(
+    reactNative.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(
+          reactNative.View,
+          {
+            style: {
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: 8
+            },
+            children: [
+              /* @__PURE__ */ jsxs(reactNative.View, { style: { flexDirection: "column" }, children: [
+                /* @__PURE__ */ jsx(
+                  reactNative.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(
+                  reactNative.Text,
+                  {
+                    style: {
+                      fontSize: 11,
+                      fontFamily: "Inter, sans-serif",
+                      color: "#6B7280",
+                      marginTop: 2
+                    },
+                    testID: "rest-timer-next-set",
+                    children: nextSetInfo
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                reactNative.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(
+          reactNative.View,
+          {
+            style: {
+              height: 3,
+              backgroundColor: "#1F1F1F",
+              borderRadius: 2,
+              marginBottom: 12
+            },
+            testID: "rest-timer-progress-track",
+            children: /* @__PURE__ */ jsx(
+              reactNative.View,
+              {
+                style: {
+                  height: "100%",
+                  backgroundColor: "#FF7900",
+                  borderRadius: 2,
+                  width: `${progressPct}%`
+                },
+                testID: "rest-timer-progress-fill"
+              }
+            )
+          }
+        ),
+        /* @__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,
+                {
+                  style: {
+                    fontSize: 11,
+                    fontFamily: "Inter, sans-serif",
+                    fontWeight: "600",
+                    color: "#9CA3AF"
+                  },
+                  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: "#FF7900"
+                  },
+                  children: "Skip"
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var DEFAULTS = {
+  label: "SS",
+  color: "#FF7900",
+  bgBase: "#101010"
+};
+function SupersetWrapper({
+  label = DEFAULTS.label,
+  color = DEFAULTS.color,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    reactNative.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(
+          reactNative.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(reactNative.View, { style: { gap: 2 }, testID: "superset-children", children })
+      ]
+    }
+  );
+}
 
 // src/utils/colors.ts
 function getStatusColor(status) {
@@ -6182,6 +6974,7 @@ exports.HStack = HStack;
 exports.Heading = Heading;
 exports.HelpTip = HelpTip;
 exports.IconBox = IconBox;
+exports.Indicator = Indicator;
 exports.Input = Input;
 exports.InputGroup = InputGroup;
 exports.Label = Label;
@@ -6210,6 +7003,7 @@ exports.ModalTitle = ModalTitle;
 exports.Overline = Overline;
 exports.Paragraph = Paragraph;
 exports.PasswordInput = PasswordInput;
+exports.Pill = Pill;
 exports.Popover = Popover;
 exports.PopoverCloseButton = PopoverCloseButton;
 exports.PopoverContent = PopoverContent;
@@ -6218,6 +7012,7 @@ exports.Progress = Progress;
 exports.ProgressSteps = ProgressSteps;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
+exports.RestTimer = RestTimer;
 exports.Section = Section;
 exports.SectionContent = SectionContent;
 exports.SectionHeader = SectionHeader;
@@ -6236,11 +7031,12 @@ exports.SkeletonListItem = SkeletonListItem;
 exports.SkeletonText = SkeletonText;
 exports.Spinner = Spinner;
 exports.Stack = Stack;
-exports.Step = Step;
 exports.StepContent = StepContent;
 exports.StepIndicator = StepIndicator;
 exports.StepLabel = StepLabel;
 exports.Stepper = Stepper;
+exports.StepperStep = Step;
+exports.SupersetWrapper = SupersetWrapper;
 exports.Surface = Surface;
 exports.Switch = Switch;
 exports.Tab = Tab;
@@ -6263,6 +7059,8 @@ exports.Tooltip = Tooltip;
 exports.Typography = Typography;
 exports.VStack = VStack;
 exports.alpha = alpha;
+exports.applyThemePreset = applyThemePreset;
+exports.audiobookPreset = audiobookPreset;
 exports.buttonSizes = buttonSizes;
 exports.cn = cn;
 exports.componentElevationRanges = componentElevationRanges;
@@ -6275,6 +7073,7 @@ exports.createRaisedHoverShadow = createRaisedHoverShadow;
 exports.createRaisedShadow = createRaisedShadow;
 exports.darkThemeCSSVars = darkThemeCSSVars;
 exports.darken = darken;
+exports.defaultPreset = defaultPreset;
 exports.discreteRainbow = discreteRainbow;
 exports.elevationSystem = elevationSystem;
 exports.formatDateTime = formatDateTime;