@sincpro/mobile-ui 3.0.1 → 3.2.0

package/dist/Navigation/Navigation.AppBar.js

@@ -1,126 +1,562 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
+import { CountBadge } from "../Display/count-badge.js";
 import GradientSurface from "../Display/Display.GradientSurface.js";
 import Icon from "../Display/Display.Icon.js";
 import { Pattern } from "../Display/Display.Pattern.js";
 import Pressable from "../primitives/Pressable.js";
 import { useTheme } from "../theme/index.js";
+import { ON_DARK_SURFACE } from "../theme/on-dark-surface.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { StyleSheet, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+
 /** Fallback for the `tone="dark"` hero surface when the theme has no `bg.inverse` token. */
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 const HERO_DARK_FALLBACK = "#0E1714";
 /**
  * "Contained" icon-button for the AppBar: circular touch area with a subtle surface
  * (merge of Material 3 state-layer + iOS 26 contained button). Optional badge.
  * With `label`, renders a text pill CTA instead (for "Editar"/"Nuevo"/"Guardar").
  */
-function AppBarAction({ icon, label, onPress, badge, accessibilityLabel, tone = "plain", onDark = false, bare = false, testID, }) {
-    const theme = useTheme();
-    const bg = bare
-        ? "transparent"
-        : onDark
-            ? "rgba(255,255,255,0.14)"
-            : tone === "tinted"
-                ? theme.accent // solid brand-gold squircle (FAB-style)
-                : theme.bg.card;
-    const iconColor = tone === "tinted"
-        ? theme.text.onAccent // dark token on green surface
-        : onDark
-            ? "#FFFFFF" // always white on tone="dark"/gradient surfaces; icon.inverse flips dark in dark-mode
-            : theme.icon.primary;
-    // Plain (white) squircle gets a hairline so it reads as a contained button on a light bar.
-    const showBorder = !bare && !onDark && tone !== "tinted";
-    // Labeled (text) action → a pill CTA. Distinct from the icon-only circle; use for
-    // primary/secondary header actions like "Editar", "Nuevo", "Guardar".
-    if (label) {
-        return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel ?? label, accessibilityRole: "button", className: "flex-row items-center justify-center gap-1.5", hitSlop: 6, onPress: onPress, style: {
-                minHeight: 48,
-                minWidth: 48,
-                paddingHorizontal: 14,
-                paddingVertical: 8,
-                borderRadius: 999,
-                backgroundColor: bg,
-                ...(showBorder ? { borderWidth: 1, borderColor: theme.border.light } : null),
-            }, testID: testID, children: [icon ? _jsx(Icon, { color: iconColor, name: icon, size: 16 }) : null, _jsx(Typography.Text, { semibold: true, style: { color: iconColor, flexShrink: 1 }, variant: "bodySmall", children: label })] }));
+function AppBarAction(t0) {
+  const $ = _c(40);
+  const {
+    icon,
+    label,
+    onPress,
+    badge,
+    accessibilityLabel,
+    tone: t1,
+    onDark: t2,
+    bare: t3,
+    testID
+  } = t0;
+  const tone = t1 === undefined ? "plain" : t1;
+  const onDark = t2 === undefined ? false : t2;
+  const bare = t3 === undefined ? false : t3;
+  const theme = useTheme();
+  const bg = bare ? "transparent" : onDark ? ON_DARK_SURFACE.glass : tone === "tinted" ? theme.accent : theme.bg.card;
+  const iconColor = tone === "tinted" ? theme.text.onAccent : onDark ? ON_DARK_SURFACE.ink : theme.icon.primary;
+  const showBorder = !bare && !onDark && tone !== "tinted";
+  if (label) {
+    const t4 = accessibilityLabel ?? label;
+    let t5;
+    if ($[0] !== showBorder || $[1] !== theme) {
+      t5 = showBorder ? {
+        borderWidth: 1,
+        borderColor: theme.border.light
+      } : null;
+      $[0] = showBorder;
+      $[1] = theme;
+      $[2] = t5;
+    } else {
+      t5 = $[2];
+    }
+    let t6;
+    if ($[3] !== bg || $[4] !== t5) {
+      t6 = {
+        minHeight: 48,
+        minWidth: 48,
+        paddingHorizontal: 14,
+        paddingVertical: 8,
+        borderRadius: 999,
+        backgroundColor: bg,
+        ...t5
+      };
+      $[3] = bg;
+      $[4] = t5;
+      $[5] = t6;
+    } else {
+      t6 = $[5];
+    }
+    let t7;
+    if ($[6] !== icon || $[7] !== iconColor) {
+      t7 = icon ? _jsx(Icon, {
+        color: iconColor,
+        name: icon,
+        size: 16
+      }) : null;
+      $[6] = icon;
+      $[7] = iconColor;
+      $[8] = t7;
+    } else {
+      t7 = $[8];
+    }
+    let t8;
+    if ($[9] !== iconColor) {
+      t8 = {
+        color: iconColor,
+        flexShrink: 1
+      };
+      $[9] = iconColor;
+      $[10] = t8;
+    } else {
+      t8 = $[10];
     }
-    return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel, accessibilityRole: "button", className: "items-center justify-center", hitSlop: 6, onPress: onPress, style: {
-            width: 48,
-            height: 48,
-            borderRadius: 12,
-            backgroundColor: bg,
-            ...(showBorder ? { borderWidth: 1, borderColor: theme.border.light } : null),
-        }, testID: testID, children: [_jsx(Icon, { color: iconColor, name: icon ?? "circle", size: bare ? 24 : 20 }), badge != null ? (_jsx(View, { className: "absolute bg-danger rounded-full min-w-[16px] h-4 px-1 items-center justify-center", style: { top: -2, right: -2, borderWidth: 2, borderColor: theme.bg.card }, children: _jsx(Typography.Text, { style: { color: theme.text.inverse, fontSize: 9, lineHeight: 11 }, children: badge }) })) : null] }));
+    let t9;
+    if ($[11] !== label || $[12] !== t8) {
+      t9 = _jsx(Typography.Text, {
+        semibold: true,
+        style: t8,
+        variant: "bodySmall",
+        children: label
+      });
+      $[11] = label;
+      $[12] = t8;
+      $[13] = t9;
+    } else {
+      t9 = $[13];
+    }
+    let t10;
+    if ($[14] !== onPress || $[15] !== t4 || $[16] !== t6 || $[17] !== t7 || $[18] !== t9 || $[19] !== testID) {
+      t10 = _jsxs(Pressable, {
+        accessibilityLabel: t4,
+        accessibilityRole: "button",
+        className: "flex-row items-center justify-center gap-1.5",
+        hitSlop: 6,
+        onPress: onPress,
+        style: t6,
+        testID: testID,
+        children: [t7, t9]
+      });
+      $[14] = onPress;
+      $[15] = t4;
+      $[16] = t6;
+      $[17] = t7;
+      $[18] = t9;
+      $[19] = testID;
+      $[20] = t10;
+    } else {
+      t10 = $[20];
+    }
+    return t10;
+  }
+  let t4;
+  if ($[21] !== showBorder || $[22] !== theme) {
+    t4 = showBorder ? {
+      borderWidth: 1,
+      borderColor: theme.border.light
+    } : null;
+    $[21] = showBorder;
+    $[22] = theme;
+    $[23] = t4;
+  } else {
+    t4 = $[23];
+  }
+  let t5;
+  if ($[24] !== bg || $[25] !== t4) {
+    t5 = {
+      width: 48,
+      height: 48,
+      borderRadius: 12,
+      backgroundColor: bg,
+      ...t4
+    };
+    $[24] = bg;
+    $[25] = t4;
+    $[26] = t5;
+  } else {
+    t5 = $[26];
+  }
+  const t6 = icon ?? "circle";
+  const t7 = bare ? 24 : 20;
+  let t8;
+  if ($[27] !== iconColor || $[28] !== t6 || $[29] !== t7) {
+    t8 = _jsx(Icon, {
+      color: iconColor,
+      name: t6,
+      size: t7
+    });
+    $[27] = iconColor;
+    $[28] = t6;
+    $[29] = t7;
+    $[30] = t8;
+  } else {
+    t8 = $[30];
+  }
+  let t9;
+  if ($[31] !== badge) {
+    t9 = badge != null ? _jsx(CountBadge, {
+      anchor: {
+        top: -4,
+        right: -4
+      },
+      count: badge
+    }) : null;
+    $[31] = badge;
+    $[32] = t9;
+  } else {
+    t9 = $[32];
+  }
+  let t10;
+  if ($[33] !== accessibilityLabel || $[34] !== onPress || $[35] !== t5 || $[36] !== t8 || $[37] !== t9 || $[38] !== testID) {
+    t10 = _jsxs(Pressable, {
+      accessibilityLabel: accessibilityLabel,
+      accessibilityRole: "button",
+      className: "items-center justify-center",
+      hitSlop: 6,
+      onPress: onPress,
+      style: t5,
+      testID: testID,
+      children: [t8, t9]
+    });
+    $[33] = accessibilityLabel;
+    $[34] = onPress;
+    $[35] = t5;
+    $[36] = t8;
+    $[37] = t9;
+    $[38] = testID;
+    $[39] = t10;
+  } else {
+    t10 = $[39];
+  }
+  return t10;
 }
+
+/**
+ * Gradient + texture surface descriptor for AppBar headers.
+ * Pass as the `background` prop — white text/icons are activated automatically.
+ */
+
 /**
  * Flat, modern top bar (merge of Material 3 + iOS 26): tokenized surface, left-aligned
  * title + subtitle, **contained** icon-buttons (back and actions with a circular area),
  * a `subheader` slot (for SearchBar/Segmented below the title), and a `large` variant.
  * Replaces the gradient look of `Navigation.Header`/`ScreenHeader`.
  */
-function AppBar({ title, subtitle, onBack, leading, actions, subheader, variant = "default", tone = "default", accentBar = false, backVariant = "contained", border = true, safeArea = true, topSpacing, background, bottomDivider, className, testID, }) {
-    const theme = useTheme();
-    const insets = useSafeAreaInsets();
-    const centered = variant === "center";
-    const large = variant === "large";
-    const dark = tone === "dark";
-    const gradient = tone === "gradient";
-    const hasBackground = !!background;
-    // Large variant: back/leading + actions all live ON the big-title row (single cohesive
-    // block — no separate top toolbar that would push the title to a new line). The compact
-    // top toolbar is only for default/center.
-    const largeHasNav = large && (!!onBack || !!leading);
-    const showTopBar = !large;
-    // Colored = any rich surface. `background` alone activates colored mode (white text/icons).
-    const colored = dark || gradient || hasBackground;
-    // gradient (brand gold) → dark text via onAccent. background → textColor prop (default white, since
-    // gradient surfaces are dark). dark tone → white always. text.inverse is NOT used here: it flips to
-    // near-black in dark-mode themes (semantic: "text on light surfaces"), wrong for dark gradient AppBars.
-    const onColoredText = gradient && !hasBackground
-        ? theme.text.onAccent
-        : hasBackground
-            ? (background?.textColor ?? "#FFFFFF")
-            : "#FFFFFF";
-    const titleStyle = colored ? { color: onColoredText } : undefined;
-    const subtitleStyle = gradient && !hasBackground
-        ? { color: theme.text.onAccent, opacity: 0.72 }
-        : colored
-            ? { color: "rgba(255,255,255,0.7)" }
-            : undefined;
-    // Large variant on a plain surface should feel like the page itself (no card surface, no
-    // hairline). Compact variants (default/center) keep the card surface for detail screens.
-    const largePlain = large && !colored;
-    // bottomDivider controls the bottom edge decoration. When not set, fall back to the
-    // legacy border prop (hairline for default/center on plain surfaces).
-    const showBorder = bottomDivider
-        ? bottomDivider === "line"
-        : !colored && !largePlain && border;
-    const showRounded = bottomDivider === "rounded";
-    const showShadow = bottomDivider === "shadow";
-    const showWave = bottomDivider === "wave";
-    return (_jsxs(View, { className: cn(colored ? "" : largePlain ? "bg-bg-page" : "bg-bg-card", showBorder && "border-b border-border-light", className), style: {
-            paddingTop: safeArea ? insets.top : 0,
-            // dark tone without a background → solid inverse bg; background prop → GradientSurface handles it
-            ...(dark && !hasBackground
-                ? { backgroundColor: theme.bg.inverse ?? HERO_DARK_FALLBACK }
-                : null),
-            ...(showRounded
-                ? { borderBottomLeftRadius: 24, borderBottomRightRadius: 24, overflow: "hidden" }
-                : null),
-            ...(showShadow ? theme.shadow.md : null),
-        }, testID: testID, children: [hasBackground ? (_jsx(GradientSurface, { colors: background.colors, end: background.end, padding: "none", preset: background.surface ?? "warm", radius: "none", start: background.start, style: StyleSheet.absoluteFill })) : gradient ? (_jsx(GradientSurface, { colors: theme.gradient.accent, padding: "none", radius: "none", style: StyleSheet.absoluteFill })) : null, background?.pattern ? (_jsx(Pattern, { color: background.patternColor ?? "#FFFFFF", kind: background.pattern, opacity: background.patternOpacity ?? 0.18 })) : null, showTopBar ? (_jsxs(View, { className: "flex-row items-center px-3 gap-2 min-h-[56px]", children: [_jsxs(View, { className: "flex-row items-center gap-2", style: { minWidth: 38 }, children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", bare: backVariant === "plain", icon: "back", onDark: dark || gradient || hasBackground, onPress: onBack })) : null, leading] }), _jsxs(View, { className: cn("flex-1", centered && "items-center"), children: [title ? (_jsx(Typography.Text, { accessibilityRole: "header", className: colored ? "" : "text-text-primary", semibold: true, style: titleStyle, variant: "subtitle", children: title })) : null, subtitle ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-secondary", style: subtitleStyle, variant: "caption", children: subtitle })) : null] }), _jsx(View, { className: "flex-row items-center justify-end gap-2", style: { minWidth: 38 }, children: actions })] })) : null, large && title ? (_jsxs(View, { className: cn("flex-row px-4 pb-3", largeHasNav ? "items-center gap-2" : ""), style: { paddingTop: topSpacing != null ? topSpacing : 8 }, children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", bare: backVariant === "plain", icon: "back", onDark: dark || gradient || hasBackground, onPress: onBack })) : null, leading, accentBar && !largeHasNav ? (_jsx(View, { style: {
-                            width: 4,
-                            marginRight: 10,
-                            marginVertical: 2,
-                            borderRadius: 999,
-                            backgroundColor: theme.accent,
-                        } })) : null, _jsxs(View, { className: "flex-1", children: [_jsx(Typography.Text, { accessibilityRole: "header", className: colored ? "" : "text-text-primary", style: titleStyle, variant: "h2", children: title }), subtitle ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-secondary", style: subtitleStyle, variant: "bodySmall", children: subtitle })) : null] }), actions ? (_jsx(View, { className: cn("flex-row items-center justify-end gap-2 pl-2", largeHasNav ? "" : "self-center"), children: actions })) : null] })) : null, subheader ? _jsx(View, { className: "px-3 pb-3 pt-0.5", children: subheader }) : null, showWave ? (_jsx(View, { style: {
-                    height: 24,
-                    backgroundColor: theme.bg.page,
-                    borderTopLeftRadius: 24,
-                    borderTopRightRadius: 24,
-                } })) : null] }));
+function AppBar(t0) {
+  const $ = _c(78);
+  const {
+    title,
+    subtitle,
+    onBack,
+    leading,
+    actions,
+    subheader,
+    variant: t1,
+    tone: t2,
+    accentBar: t3,
+    backVariant: t4,
+    border: t5,
+    safeArea: t6,
+    topSpacing,
+    background,
+    bottomDivider,
+    className,
+    testID
+  } = t0;
+  const variant = t1 === undefined ? "default" : t1;
+  const tone = t2 === undefined ? "default" : t2;
+  const accentBar = t3 === undefined ? false : t3;
+  const backVariant = t4 === undefined ? "contained" : t4;
+  const border = t5 === undefined ? true : t5;
+  const safeArea = t6 === undefined ? true : t6;
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const centered = variant === "center";
+  const large = variant === "large";
+  const dark = tone === "dark";
+  const gradient = tone === "gradient";
+  const hasBackground = !!background;
+  const largeHasNav = large && (!!onBack || !!leading);
+  const showTopBar = !large;
+  const colored = dark || gradient || hasBackground;
+  const onColoredText = gradient && !hasBackground ? theme.text.onAccent : hasBackground ? background?.textColor ?? ON_DARK_SURFACE.ink : ON_DARK_SURFACE.ink;
+  let t7;
+  if ($[0] !== colored || $[1] !== onColoredText) {
+    t7 = colored ? {
+      color: onColoredText
+    } : undefined;
+    $[0] = colored;
+    $[1] = onColoredText;
+    $[2] = t7;
+  } else {
+    t7 = $[2];
+  }
+  const titleStyle = t7;
+  let t8;
+  if ($[3] !== colored || $[4] !== gradient || $[5] !== hasBackground || $[6] !== theme) {
+    t8 = gradient && !hasBackground ? {
+      color: theme.text.onAccent,
+      opacity: 0.72
+    } : colored ? {
+      color: ON_DARK_SURFACE.muted
+    } : undefined;
+    $[3] = colored;
+    $[4] = gradient;
+    $[5] = hasBackground;
+    $[6] = theme;
+    $[7] = t8;
+  } else {
+    t8 = $[7];
+  }
+  const subtitleStyle = t8;
+  const largePlain = large && !colored;
+  const showBorder = bottomDivider ? bottomDivider === "line" : !colored && !largePlain && border;
+  const showRounded = bottomDivider === "rounded";
+  const showShadow = bottomDivider === "shadow";
+  const showWave = bottomDivider === "wave";
+  const t9 = colored ? "" : largePlain ? "bg-bg-page" : "bg-bg-card";
+  const t10 = showBorder && "border-b border-border-light";
+  let t11;
+  if ($[8] !== className || $[9] !== t10 || $[10] !== t9) {
+    t11 = cn(t9, t10, className);
+    $[8] = className;
+    $[9] = t10;
+    $[10] = t9;
+    $[11] = t11;
+  } else {
+    t11 = $[11];
+  }
+  const t12 = safeArea ? insets.top : 0;
+  let t13;
+  if ($[12] !== dark || $[13] !== hasBackground || $[14] !== theme) {
+    t13 = dark && !hasBackground ? {
+      backgroundColor: theme.bg.inverse ?? HERO_DARK_FALLBACK
+    } : null;
+    $[12] = dark;
+    $[13] = hasBackground;
+    $[14] = theme;
+    $[15] = t13;
+  } else {
+    t13 = $[15];
+  }
+  let t14;
+  if ($[16] !== showRounded) {
+    t14 = showRounded ? {
+      borderBottomLeftRadius: 24,
+      borderBottomRightRadius: 24,
+      overflow: "hidden"
+    } : null;
+    $[16] = showRounded;
+    $[17] = t14;
+  } else {
+    t14 = $[17];
+  }
+  const t15 = showShadow ? theme.shadow.md : null;
+  let t16;
+  if ($[18] !== t12 || $[19] !== t13 || $[20] !== t14 || $[21] !== t15) {
+    t16 = {
+      paddingTop: t12,
+      ...t13,
+      ...t14,
+      ...t15
+    };
+    $[18] = t12;
+    $[19] = t13;
+    $[20] = t14;
+    $[21] = t15;
+    $[22] = t16;
+  } else {
+    t16 = $[22];
+  }
+  let t17;
+  if ($[23] !== background || $[24] !== gradient || $[25] !== hasBackground || $[26] !== theme) {
+    t17 = hasBackground ? _jsx(GradientSurface, {
+      colors: background.colors,
+      end: background.end,
+      padding: "none",
+      preset: background.surface ?? "warm",
+      radius: "none",
+      start: background.start,
+      style: StyleSheet.absoluteFill
+    }) : gradient ? _jsx(GradientSurface, {
+      colors: theme.gradient.accent,
+      padding: "none",
+      radius: "none",
+      style: StyleSheet.absoluteFill
+    }) : null;
+    $[23] = background;
+    $[24] = gradient;
+    $[25] = hasBackground;
+    $[26] = theme;
+    $[27] = t17;
+  } else {
+    t17 = $[27];
+  }
+  let t18;
+  if ($[28] !== background) {
+    t18 = background?.pattern ? _jsx(Pattern, {
+      color: background.patternColor ?? ON_DARK_SURFACE.ink,
+      kind: background.pattern,
+      opacity: background.patternOpacity ?? 0.18
+    }) : null;
+    $[28] = background;
+    $[29] = t18;
+  } else {
+    t18 = $[29];
+  }
+  let t19;
+  if ($[30] !== actions || $[31] !== backVariant || $[32] !== centered || $[33] !== colored || $[34] !== dark || $[35] !== gradient || $[36] !== hasBackground || $[37] !== leading || $[38] !== onBack || $[39] !== showTopBar || $[40] !== subtitle || $[41] !== subtitleStyle || $[42] !== title || $[43] !== titleStyle) {
+    t19 = showTopBar ? _jsxs(View, {
+      className: "flex-row items-center px-3 gap-2 min-h-[56px]",
+      children: [_jsxs(View, {
+        className: "flex-row items-center gap-2",
+        style: {
+          minWidth: 38
+        },
+        children: [onBack ? _jsx(AppBarAction, {
+          accessibilityLabel: "Volver",
+          bare: backVariant === "plain",
+          icon: "back",
+          onDark: dark || gradient || hasBackground,
+          onPress: onBack
+        }) : null, leading]
+      }), _jsxs(View, {
+        className: cn("flex-1", centered && "items-center"),
+        children: [title ? _jsx(Typography.Text, {
+          accessibilityRole: "header",
+          className: colored ? "" : "text-text-primary",
+          semibold: true,
+          style: titleStyle,
+          variant: "subtitle",
+          children: title
+        }) : null, subtitle ? _jsx(Typography.Text, {
+          className: colored ? "" : "text-text-secondary",
+          style: subtitleStyle,
+          variant: "caption",
+          children: subtitle
+        }) : null]
+      }), _jsx(View, {
+        className: "flex-row items-center justify-end gap-2",
+        style: {
+          minWidth: 38
+        },
+        children: actions
+      })]
+    }) : null;
+    $[30] = actions;
+    $[31] = backVariant;
+    $[32] = centered;
+    $[33] = colored;
+    $[34] = dark;
+    $[35] = gradient;
+    $[36] = hasBackground;
+    $[37] = leading;
+    $[38] = onBack;
+    $[39] = showTopBar;
+    $[40] = subtitle;
+    $[41] = subtitleStyle;
+    $[42] = title;
+    $[43] = titleStyle;
+    $[44] = t19;
+  } else {
+    t19 = $[44];
+  }
+  let t20;
+  if ($[45] !== accentBar || $[46] !== actions || $[47] !== backVariant || $[48] !== colored || $[49] !== dark || $[50] !== gradient || $[51] !== hasBackground || $[52] !== large || $[53] !== largeHasNav || $[54] !== leading || $[55] !== onBack || $[56] !== subtitle || $[57] !== subtitleStyle || $[58] !== theme || $[59] !== title || $[60] !== titleStyle || $[61] !== topSpacing) {
+    t20 = large && title ? _jsxs(View, {
+      className: cn("flex-row px-4 pb-3", largeHasNav ? "items-center gap-2" : ""),
+      style: {
+        paddingTop: topSpacing != null ? topSpacing : 8
+      },
+      children: [onBack ? _jsx(AppBarAction, {
+        accessibilityLabel: "Volver",
+        bare: backVariant === "plain",
+        icon: "back",
+        onDark: dark || gradient || hasBackground,
+        onPress: onBack
+      }) : null, leading, accentBar && !largeHasNav ? _jsx(View, {
+        style: {
+          width: 4,
+          marginRight: 10,
+          marginVertical: 2,
+          borderRadius: 999,
+          backgroundColor: theme.accent
+        }
+      }) : null, _jsxs(View, {
+        className: "flex-1",
+        children: [_jsx(Typography.Text, {
+          accessibilityRole: "header",
+          className: colored ? "" : "text-text-primary",
+          style: titleStyle,
+          variant: "h2",
+          children: title
+        }), subtitle ? _jsx(Typography.Text, {
+          className: colored ? "" : "text-text-secondary",
+          style: subtitleStyle,
+          variant: "bodySmall",
+          children: subtitle
+        }) : null]
+      }), actions ? _jsx(View, {
+        className: cn("flex-row items-center justify-end gap-2 pl-2", largeHasNav ? "" : "self-center"),
+        children: actions
+      }) : null]
+    }) : null;
+    $[45] = accentBar;
+    $[46] = actions;
+    $[47] = backVariant;
+    $[48] = colored;
+    $[49] = dark;
+    $[50] = gradient;
+    $[51] = hasBackground;
+    $[52] = large;
+    $[53] = largeHasNav;
+    $[54] = leading;
+    $[55] = onBack;
+    $[56] = subtitle;
+    $[57] = subtitleStyle;
+    $[58] = theme;
+    $[59] = title;
+    $[60] = titleStyle;
+    $[61] = topSpacing;
+    $[62] = t20;
+  } else {
+    t20 = $[62];
+  }
+  let t21;
+  if ($[63] !== subheader) {
+    t21 = subheader ? _jsx(View, {
+      className: "px-3 pb-3 pt-0.5",
+      children: subheader
+    }) : null;
+    $[63] = subheader;
+    $[64] = t21;
+  } else {
+    t21 = $[64];
+  }
+  let t22;
+  if ($[65] !== showWave || $[66] !== theme) {
+    t22 = showWave ? _jsx(View, {
+      style: {
+        height: 24,
+        backgroundColor: theme.bg.page,
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24
+      }
+    }) : null;
+    $[65] = showWave;
+    $[66] = theme;
+    $[67] = t22;
+  } else {
+    t22 = $[67];
+  }
+  let t23;
+  if ($[68] !== t11 || $[69] !== t16 || $[70] !== t17 || $[71] !== t18 || $[72] !== t19 || $[73] !== t20 || $[74] !== t21 || $[75] !== t22 || $[76] !== testID) {
+    t23 = _jsxs(View, {
+      className: t11,
+      style: t16,
+      testID: testID,
+      children: [t17, t18, t19, t20, t21, t22]
+    });
+    $[68] = t11;
+    $[69] = t16;
+    $[70] = t17;
+    $[71] = t18;
+    $[72] = t19;
+    $[73] = t20;
+    $[74] = t21;
+    $[75] = t22;
+    $[76] = testID;
+    $[77] = t23;
+  } else {
+    t23 = $[77];
+  }
+  return t23;
 }
-const AppBarWithAction = Object.assign(AppBar, { Action: AppBarAction });
+const AppBarWithAction = Object.assign(AppBar, {
+  Action: AppBarAction
+});
 export default AppBarWithAction;
 export { AppBarWithAction as AppBar };