@blinkdotnew/mobile-ui 2.0.0-alpha.14 → 2.0.0-alpha.16

package/dist/index.mjs

@@ -13,11 +13,11 @@ import {
   SizableStack,
   ThemeableStack,
   Frame,
-  XStack as XStack42,
-  YStack as YStack47,
+  XStack as XStack44,
+  YStack as YStack49,
   ZStack,
   ScrollView as ScrollView7,
-  Circle as Circle9,
+  Circle as Circle11,
   Square,
   Spacer,
   EnsureFlexed,
@@ -38,10 +38,10 @@ import {
   H6 as H62,
   Heading,
   Paragraph,
-  SizableText as SizableText49,
+  SizableText as SizableText51,
   Text,
   Label,
-  Button as Button12,
+  Button as Button13,
   Input as Input5,
   TextArea,
   Switch as Switch3,
@@ -1036,7 +1036,7 @@ function Container({ children, maxWidth = 500, centered = true, padding = "$4" }
 
 // src/patterns/PaywallScreen.tsx
 import { useState as useState5, useEffect as useEffect3 } from "react";
-import { Button as Button3, SizableText as SizableText17, XStack as XStack10, YStack as YStack14, ScrollView as ScrollView2 } from "tamagui";
+import { Button as Button3, Circle as Circle2, SizableText as SizableText17, XStack as XStack10, YStack as YStack14, ScrollView as ScrollView2 } from "tamagui";
 import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 function useCountdown(minutes) {
   const [seconds, setSeconds] = useState5((minutes ?? 0) * 60);
@@ -1050,39 +1050,93 @@ function useCountdown(minutes) {
   const ss = String(seconds % 60).padStart(2, "0");
   return { display: `${mm}:${ss}`, expired: seconds <= 0 };
 }
-function PlanCard({ plan, selected, onPress }) {
+function normalizeFeature(feature) {
+  return typeof feature === "string" ? { title: feature } : feature;
+}
+function ComparisonIcon({ enabled }) {
+  return /* @__PURE__ */ jsx20(Circle2, { size: 22, backgroundColor: enabled ? "$green3" : "$color4", children: /* @__PURE__ */ jsx20(SizableText17, { size: "$2", color: enabled ? "$green10" : "$color8", fontWeight: "700", children: enabled ? "\u2713" : "\u2014" }) });
+}
+function TestimonialCard({ testimonial }) {
+  return /* @__PURE__ */ jsxs13(YStack14, { flex: 1, minWidth: 220, backgroundColor: "$color2", borderRadius: "$6", padding: "$3", gap: "$2", children: [
+    /* @__PURE__ */ jsxs13(SizableText17, { size: "$3", color: "$color11", children: [
+      "\u201C",
+      testimonial.quote,
+      "\u201D"
+    ] }),
+    /* @__PURE__ */ jsxs13(YStack14, { children: [
+      /* @__PURE__ */ jsx20(SizableText17, { size: "$2", fontWeight: "700", children: testimonial.author }),
+      testimonial.meta ? /* @__PURE__ */ jsx20(SizableText17, { size: "$2", color: "$color10", children: testimonial.meta }) : null
+    ] })
+  ] });
+}
+function CreatorHeader({ creator }) {
+  return /* @__PURE__ */ jsxs13(XStack10, { alignItems: "center", justifyContent: "center", gap: "$3", children: [
+    creator.avatar ? /* @__PURE__ */ jsx20(
+      YStack14,
+      {
+        width: 72,
+        height: 72,
+        borderRadius: "$10",
+        overflow: "hidden",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "$color3",
+        children: creator.avatar
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs13(YStack14, { alignItems: "center", gap: "$1", children: [
+      /* @__PURE__ */ jsx20(SizableText17, { size: "$6", fontWeight: "800", children: creator.name }),
+      creator.meta ? /* @__PURE__ */ jsx20(SizableText17, { size: "$3", color: "$color10", children: creator.meta }) : null
+    ] })
+  ] });
+}
+function PlanCard({
+  plan,
+  selected,
+  onPress,
+  stacked,
+  dark
+}) {
   return /* @__PURE__ */ jsxs13(
     YStack14,
     {
-      flex: 1,
+      flex: stacked ? void 0 : 1,
+      width: stacked ? "100%" : void 0,
       padding: "$3",
       borderRadius: "$5",
       borderWidth: 2,
-      borderColor: selected ? "$color9" : "$color5",
-      backgroundColor: selected ? "$color3" : "$color1",
+      borderColor: selected ? "$color9" : dark ? "$color6" : "$color5",
+      backgroundColor: selected ? "$color3" : dark ? "$color2" : "$color1",
       pressStyle: { scale: 0.97, opacity: 0.9 },
       animation: "quick",
       onPress,
       cursor: "pointer",
       position: "relative",
       gap: "$1.5",
-      alignItems: "center",
+      alignItems: stacked ? "flex-start" : "center",
       children: [
         plan.popular && /* @__PURE__ */ jsx20(YStack14, { position: "absolute", top: -10, backgroundColor: "$color9", paddingHorizontal: "$2", paddingVertical: 2, borderRadius: "$10", children: /* @__PURE__ */ jsx20(SizableText17, { size: "$1", color: "white", fontWeight: "700", children: "BEST VALUE" }) }),
         plan.savings && /* @__PURE__ */ jsx20(YStack14, { position: "absolute", top: plan.popular ? -24 : -10, right: 6, backgroundColor: "$green9", paddingHorizontal: "$1.5", paddingVertical: 2, borderRadius: "$10", children: /* @__PURE__ */ jsx20(SizableText17, { size: "$1", color: "white", fontWeight: "700", children: plan.savings }) }),
-        /* @__PURE__ */ jsx20(SizableText17, { size: "$2", fontWeight: "600", color: "$color11", paddingTop: plan.popular ? "$1" : 0, children: plan.name }),
-        /* @__PURE__ */ jsx20(SizableText17, { size: "$7", fontWeight: "800", children: plan.price }),
+        /* @__PURE__ */ jsx20(SizableText17, { size: "$2", fontWeight: "600", color: dark ? "$color12" : "$color11", paddingTop: plan.popular ? "$1" : 0, children: plan.name }),
+        plan.tagline ? /* @__PURE__ */ jsx20(SizableText17, { size: "$2", color: "$color10", children: plan.tagline }) : null,
+        /* @__PURE__ */ jsx20(SizableText17, { size: "$7", fontWeight: "800", color: dark ? "$color12" : void 0, children: plan.price }),
         /* @__PURE__ */ jsxs13(SizableText17, { size: "$2", color: "$color9", children: [
           "/",
           plan.period
         ] }),
         plan.pricePerWeek && /* @__PURE__ */ jsx20(SizableText17, { size: "$1", color: "$color10", children: plan.pricePerWeek }),
-        plan.trial && /* @__PURE__ */ jsx20(YStack14, { backgroundColor: "$green3", paddingHorizontal: "$2", paddingVertical: 2, borderRadius: "$10", marginTop: "$1", children: /* @__PURE__ */ jsx20(SizableText17, { size: "$1", color: "$green9", fontWeight: "700", children: plan.trial }) })
+        plan.trial && /* @__PURE__ */ jsx20(YStack14, { backgroundColor: "$green3", paddingHorizontal: "$2", paddingVertical: 2, borderRadius: "$10", marginTop: "$1", children: /* @__PURE__ */ jsx20(SizableText17, { size: "$1", color: "$green9", fontWeight: "700", children: plan.trial }) }),
+        stacked && plan.features?.length ? /* @__PURE__ */ jsx20(YStack14, { gap: "$1", width: "100%", paddingTop: "$1", children: plan.features.map((feature) => /* @__PURE__ */ jsxs13(XStack10, { gap: "$2", alignItems: "center", children: [
+          /* @__PURE__ */ jsx20(SizableText17, { size: "$2", color: "$green9", children: "\u2713" }),
+          /* @__PURE__ */ jsx20(SizableText17, { size: "$2", color: "$color10", children: feature })
+        ] }, feature)) }) : null
       ]
     }
   );
 }
 function PaywallScreen({
+  variant = "default",
+  eyebrow,
   title = "Unlock Premium",
   subtitle,
   features = [],
@@ -1099,29 +1153,71 @@ function PaywallScreen({
   hero,
   socialProof,
   countdownMinutes,
-  badge
+  badge,
+  comparisonRows = [],
+  testimonials = [],
+  creator,
+  topSlot,
+  footerSlot
 }) {
   const selected = selectedPlan ?? plans.find((p) => p.popular)?.id ?? plans[0]?.id;
   const countdown = useCountdown(countdownMinutes);
-  return /* @__PURE__ */ jsxs13(YStack14, { flex: 1, backgroundColor: "$background", children: [
+  const dark = variant === "immersive-dark";
+  const stackedPlans = variant === "comparison" || variant === "creator-sheet";
+  const backgroundColor = dark ? "$color1" : "$background";
+  const toneColor = dark ? "$color12" : "$color11";
+  const mutedColor = dark ? "$color10" : "$color10";
+  return /* @__PURE__ */ jsxs13(YStack14, { flex: 1, backgroundColor, children: [
     onClose && /* @__PURE__ */ jsx20(XStack10, { position: "absolute", top: "$4", right: "$4", zIndex: 10, children: /* @__PURE__ */ jsx20(Button3, { size: "$3", circular: true, chromeless: true, onPress: onClose, pressStyle: { opacity: 0.6 }, children: /* @__PURE__ */ jsx20(SizableText17, { size: "$5", color: "$color9", children: "\u2715" }) }) }),
     /* @__PURE__ */ jsx20(ScrollView2, { flex: 1, contentContainerStyle: { paddingBottom: 220 }, children: /* @__PURE__ */ jsxs13(YStack14, { padding: "$4", gap: "$4", paddingTop: "$8", children: [
+      topSlot,
+      creator && variant === "creator-sheet" ? /* @__PURE__ */ jsx20(CreatorHeader, { creator }) : null,
       hero && /* @__PURE__ */ jsx20(YStack14, { alignItems: "center", paddingVertical: "$3", children: hero }),
       badge && /* @__PURE__ */ jsx20(XStack10, { justifyContent: "center", children: /* @__PURE__ */ jsx20(YStack14, { backgroundColor: "$color9", paddingHorizontal: "$3", paddingVertical: "$1", borderRadius: "$10", children: /* @__PURE__ */ jsx20(SizableText17, { size: "$2", color: "white", fontWeight: "700", children: badge }) }) }),
       /* @__PURE__ */ jsxs13(YStack14, { gap: "$1.5", alignItems: "center", children: [
-        /* @__PURE__ */ jsx20(SizableText17, { size: "$9", fontWeight: "800", textAlign: "center", children: title }),
-        subtitle && /* @__PURE__ */ jsx20(SizableText17, { size: "$4", color: "$color10", textAlign: "center", children: subtitle }),
+        eyebrow ? /* @__PURE__ */ jsx20(SizableText17, { size: "$2", fontWeight: "700", color: "$color9", textTransform: "uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ jsx20(SizableText17, { size: "$9", fontWeight: "800", textAlign: "center", color: toneColor, children: title }),
+        subtitle && /* @__PURE__ */ jsx20(SizableText17, { size: "$4", color: mutedColor, textAlign: "center", children: subtitle }),
         socialProof && /* @__PURE__ */ jsx20(SizableText17, { size: "$3", color: "$color9", fontWeight: "600", textAlign: "center", children: socialProof })
       ] }),
       countdownMinutes && !countdown.expired && /* @__PURE__ */ jsxs13(XStack10, { justifyContent: "center", padding: "$2", backgroundColor: "$red3", borderRadius: "$4", alignSelf: "center", paddingHorizontal: "$4", gap: "$2", alignItems: "center", children: [
         /* @__PURE__ */ jsx20(SizableText17, { size: "$2", color: "$red9", fontWeight: "600", children: "Offer ends in" }),
         /* @__PURE__ */ jsx20(SizableText17, { size: "$5", color: "$red9", fontWeight: "800", fontFamily: "$mono", children: countdown.display })
       ] }),
-      features.length > 0 && /* @__PURE__ */ jsx20(YStack14, { gap: "$2.5", paddingHorizontal: "$2", children: features.map((f, i) => /* @__PURE__ */ jsxs13(XStack10, { gap: "$2.5", alignItems: "center", children: [
-        /* @__PURE__ */ jsx20(SizableText17, { size: "$4", color: "$green9", children: "\u2713" }),
-        /* @__PURE__ */ jsx20(SizableText17, { size: "$4", color: "$color11", flex: 1, children: f })
-      ] }, i)) }),
-      /* @__PURE__ */ jsx20(XStack10, { gap: "$3", paddingTop: "$1", children: plans.map((plan) => /* @__PURE__ */ jsx20(PlanCard, { plan, selected: selected === plan.id, onPress: () => onSelectPlan?.(plan.id) }, plan.id)) })
+      features.length > 0 && /* @__PURE__ */ jsx20(YStack14, { gap: "$2.5", paddingHorizontal: "$2", children: features.map((feature, i) => {
+        const item = normalizeFeature(feature);
+        return /* @__PURE__ */ jsxs13(XStack10, { gap: "$2.5", alignItems: "center", children: [
+          /* @__PURE__ */ jsx20(YStack14, { minWidth: 24, alignItems: "center", children: item.icon ?? /* @__PURE__ */ jsx20(SizableText17, { size: "$4", color: "$green9", children: "\u2713" }) }),
+          /* @__PURE__ */ jsxs13(YStack14, { flex: 1, gap: "$1", children: [
+            /* @__PURE__ */ jsx20(SizableText17, { size: "$4", color: toneColor, flex: 1, children: item.title }),
+            item.description ? /* @__PURE__ */ jsx20(SizableText17, { size: "$2", color: mutedColor, children: item.description }) : null
+          ] })
+        ] }, i);
+      }) }),
+      variant === "social-proof" && testimonials.length > 0 ? /* @__PURE__ */ jsx20(ScrollView2, { horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ jsx20(XStack10, { gap: "$3", children: testimonials.map((testimonial, index) => /* @__PURE__ */ jsx20(TestimonialCard, { testimonial }, `${testimonial.author}-${index}`)) }) }) : null,
+      variant === "comparison" && comparisonRows.length > 0 ? /* @__PURE__ */ jsxs13(YStack14, { backgroundColor: dark ? "$color2" : "$color1", borderRadius: "$6", padding: "$3", gap: "$2", borderWidth: 1, borderColor: "$color4", children: [
+        /* @__PURE__ */ jsxs13(XStack10, { alignItems: "center", children: [
+          /* @__PURE__ */ jsx20(SizableText17, { flex: 1, size: "$2", fontWeight: "700", color: "$color10", children: "Feature" }),
+          /* @__PURE__ */ jsx20(SizableText17, { width: 64, size: "$2", fontWeight: "700", textAlign: "center", color: "$color10", children: "Free" }),
+          /* @__PURE__ */ jsx20(SizableText17, { width: 84, size: "$2", fontWeight: "700", textAlign: "center", color: "$color10", children: "Premium" })
+        ] }),
+        comparisonRows.map((row) => /* @__PURE__ */ jsxs13(XStack10, { alignItems: "center", paddingVertical: "$1.5", children: [
+          /* @__PURE__ */ jsx20(SizableText17, { flex: 1, size: "$3", color: toneColor, children: row.label }),
+          /* @__PURE__ */ jsx20(XStack10, { width: 64, justifyContent: "center", children: /* @__PURE__ */ jsx20(ComparisonIcon, { enabled: row.free }) }),
+          /* @__PURE__ */ jsx20(XStack10, { width: 84, justifyContent: "center", children: /* @__PURE__ */ jsx20(ComparisonIcon, { enabled: row.premium }) })
+        ] }, row.label))
+      ] }) : null,
+      /* @__PURE__ */ jsx20(XStack10, { gap: "$3", paddingTop: "$1", flexWrap: "wrap", children: plans.map((plan) => /* @__PURE__ */ jsx20(
+        PlanCard,
+        {
+          plan,
+          selected: selected === plan.id,
+          onPress: () => onSelectPlan?.(plan.id),
+          stacked: stackedPlans,
+          dark
+        },
+        plan.id
+      )) })
     ] }) }),
     /* @__PURE__ */ jsxs13(
       YStack14,
@@ -1132,7 +1228,7 @@ function PaywallScreen({
         right: 0,
         padding: "$4",
         paddingBottom: "$6",
-        backgroundColor: "$background",
+        backgroundColor,
         borderTopWidth: 1,
         borderTopColor: "$color4",
         gap: "$2.5",
@@ -1156,7 +1252,8 @@ function PaywallScreen({
             onRestore && /* @__PURE__ */ jsx20(SizableText17, { size: "$2", color: "$color8", onPress: onRestore, pressStyle: { opacity: 0.6 }, children: "Restore" }),
             onTerms && /* @__PURE__ */ jsx20(SizableText17, { size: "$2", color: "$color8", onPress: onTerms, pressStyle: { opacity: 0.6 }, children: "Terms" }),
             onPrivacy && /* @__PURE__ */ jsx20(SizableText17, { size: "$2", color: "$color8", onPress: onPrivacy, pressStyle: { opacity: 0.6 }, children: "Privacy" })
-          ] })
+          ] }),
+          footerSlot
         ]
       }
     )
@@ -1165,34 +1262,79 @@ function PaywallScreen({
 
 // src/patterns/OnboardingCarousel.tsx
 import { useState as useState6 } from "react";
-import { Button as Button4, SizableText as SizableText18, XStack as XStack11, YStack as YStack15, Circle as Circle2 } from "tamagui";
+import { Button as Button4, SizableText as SizableText18, XStack as XStack11, YStack as YStack15, Circle as Circle3 } from "tamagui";
 import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 function OnboardingCarousel({
   steps,
+  variant = "default",
+  brand,
+  topLeading,
   onComplete,
   onSkip,
   completeLabel = "Get Started",
   skipLabel = "Skip",
-  nextLabel = "Next"
+  nextLabel = "Next",
+  footerSlot
 }) {
   const [current, setCurrent] = useState6(0);
+  if (steps.length === 0) {
+    return /* @__PURE__ */ jsx21(YStack15, { flex: 1, backgroundColor: "$background", padding: "$4", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx21(SizableText18, { size: "$5", color: "$color10", textAlign: "center", children: "Add at least one onboarding step." }) });
+  }
   const isLast = current === steps.length - 1;
   const step = steps[current];
-  return /* @__PURE__ */ jsxs14(YStack15, { flex: 1, backgroundColor: "$background", padding: "$4", justifyContent: "space-between", children: [
-    /* @__PURE__ */ jsx21(XStack11, { justifyContent: "flex-end", paddingTop: "$4", children: !isLast && onSkip && /* @__PURE__ */ jsx21(Button4, { chromeless: true, onPress: onSkip, children: /* @__PURE__ */ jsx21(SizableText18, { size: "$4", color: "$color9", children: skipLabel }) }) }),
+  const hero = step?.hero ?? step?.icon;
+  const isEditorial = variant === "editorial";
+  const isSelection = variant === "selection-step";
+  const isPermission = variant === "permission-prompt";
+  const topPadding = isEditorial ? "$6" : "$4";
+  const titleSize = isEditorial ? "$10" : "$9";
+  const backgroundColor = variant === "calm-gradient" ? "$color2" : "$background";
+  const heroBackground = isPermission ? "$color3" : isSelection ? "$color1" : "$color2";
+  const heroRadius = variant === "card-tilt" || isSelection ? "$8" : "$10";
+  const buttonTone = variant === "editorial" ? "$color12" : "$color9";
+  return /* @__PURE__ */ jsxs14(YStack15, { flex: 1, backgroundColor, padding: "$4", justifyContent: "space-between", children: [
+    step?.background ? /* @__PURE__ */ jsx21(YStack15, { position: "absolute", left: 0, right: 0, top: 0, bottom: 0, children: step.background }) : null,
+    /* @__PURE__ */ jsxs14(XStack11, { justifyContent: "space-between", alignItems: "center", paddingTop: topPadding, children: [
+      /* @__PURE__ */ jsx21(XStack11, { minWidth: 40, children: topLeading }),
+      brand ? /* @__PURE__ */ jsx21(YStack15, { alignItems: "center", flex: 1, children: brand }) : /* @__PURE__ */ jsx21(YStack15, { flex: 1 }),
+      !isLast && onSkip && /* @__PURE__ */ jsx21(Button4, { chromeless: true, onPress: onSkip, children: /* @__PURE__ */ jsx21(SizableText18, { size: "$4", color: "$color9", children: skipLabel }) })
+    ] }),
     /* @__PURE__ */ jsxs14(YStack15, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$5", paddingHorizontal: "$4", children: [
-      step?.icon && /* @__PURE__ */ jsx21(Circle2, { size: 120, backgroundColor: "$color2", alignItems: "center", justifyContent: "center", children: step.icon }),
+      hero ? variant === "card-tilt" || isSelection ? /* @__PURE__ */ jsx21(
+        YStack15,
+        {
+          width: "100%",
+          maxWidth: 340,
+          minHeight: 260,
+          borderRadius: heroRadius,
+          backgroundColor: heroBackground,
+          padding: "$3",
+          alignItems: "center",
+          justifyContent: "center",
+          borderWidth: variant === "card-tilt" ? 3 : 1,
+          borderColor: "$color4",
+          shadowColor: "$shadowColor",
+          shadowOpacity: 0.14,
+          shadowRadius: 18,
+          shadowOffset: { width: 0, height: 10 },
+          style: variant === "card-tilt" ? { transform: [{ rotate: "-5deg" }] } : void 0,
+          children: hero
+        }
+      ) : /* @__PURE__ */ jsx21(Circle3, { size: isPermission ? 140 : 120, backgroundColor: heroBackground, alignItems: "center", justifyContent: "center", children: hero }) : null,
       /* @__PURE__ */ jsxs14(YStack15, { gap: "$3", alignItems: "center", children: [
-        /* @__PURE__ */ jsx21(SizableText18, { size: "$9", fontWeight: "700", textAlign: "center", children: step?.title }),
+        step?.eyebrow ? /* @__PURE__ */ jsx21(SizableText18, { size: "$2", color: "$color9", fontWeight: "700", textTransform: "uppercase", children: step.eyebrow }) : null,
+        /* @__PURE__ */ jsx21(SizableText18, { size: titleSize, fontWeight: "700", textAlign: "center", children: step?.title }),
         /* @__PURE__ */ jsx21(SizableText18, { size: "$4", color: "$color10", textAlign: "center", maxWidth: 300, children: step?.description })
       ] })
     ] }),
     /* @__PURE__ */ jsxs14(YStack15, { gap: "$3", paddingBottom: "$2", children: [
       /* @__PURE__ */ jsx21(XStack11, { justifyContent: "center", gap: "$2", children: steps.map((_, i) => /* @__PURE__ */ jsx21(
-        Circle2,
+        Circle3,
         {
-          size: 8,
+          size: variant === "card-tilt" ? 10 : 8,
+          width: i === current && variant !== "default" ? 24 : void 0,
           backgroundColor: i === current ? "$color9" : "$color4",
+          borderRadius: "$10",
           animation: "quick"
         },
         i
@@ -1201,21 +1343,22 @@ function OnboardingCarousel({
         Button4,
         {
           size: "$5",
-          backgroundColor: "$color9",
+          backgroundColor: buttonTone,
           color: "$color1",
-          borderRadius: "$5",
-          hoverStyle: { backgroundColor: "$color10" },
+          borderRadius: variant === "editorial" ? "$10" : "$5",
+          hoverStyle: { backgroundColor: variant === "editorial" ? "$color11" : "$color10" },
           pressStyle: { backgroundColor: "$color8" },
           onPress: () => isLast ? onComplete?.() : setCurrent((c) => c + 1),
-          children: isLast ? completeLabel : nextLabel
+          children: isLast ? step?.ctaLabel ?? completeLabel : step?.ctaLabel ?? nextLabel
         }
-      )
+      ),
+      footerSlot
     ] })
   ] });
 }
 
 // src/patterns/ChatBubble.tsx
-import { SizableText as SizableText19, XStack as XStack12, YStack as YStack16, Circle as Circle3, Image as Image3 } from "tamagui";
+import { SizableText as SizableText19, XStack as XStack12, YStack as YStack16, Circle as Circle4, Image as Image3 } from "tamagui";
 import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 function ChatBubble({ message, showAvatar = true }) {
   const isUser = message.sender === "user";
@@ -1227,7 +1370,7 @@ function ChatBubble({ message, showAvatar = true }) {
       gap: "$2",
       flexDirection: isUser ? "row-reverse" : "row",
       children: [
-        showAvatar && !isUser && /* @__PURE__ */ jsx22(Circle3, { size: 32, backgroundColor: "$color4", overflow: "hidden", children: message.avatar ? /* @__PURE__ */ jsx22(Image3, { source: { uri: message.avatar }, width: 32, height: 32, objectFit: "cover" }) : /* @__PURE__ */ jsx22(SizableText19, { size: "$2", fontWeight: "600", color: "$color11", children: message.senderName?.[0]?.toUpperCase() ?? "?" }) }),
+        showAvatar && !isUser && /* @__PURE__ */ jsx22(Circle4, { size: 32, backgroundColor: "$color4", overflow: "hidden", children: message.avatar ? /* @__PURE__ */ jsx22(Image3, { source: { uri: message.avatar }, width: 32, height: 32, objectFit: "cover" }) : /* @__PURE__ */ jsx22(SizableText19, { size: "$2", fontWeight: "600", color: "$color11", children: message.senderName?.[0]?.toUpperCase() ?? "?" }) }),
         /* @__PURE__ */ jsxs15(
           YStack16,
           {
@@ -1326,11 +1469,11 @@ function EmptyState({ icon, title, description, actionLabel, onAction }) {
 }
 
 // src/patterns/ProfileHeader.tsx
-import { Circle as Circle4, Image as Image4, SizableText as SizableText22, XStack as XStack14, YStack as YStack19 } from "tamagui";
+import { Circle as Circle5, Image as Image4, SizableText as SizableText22, XStack as XStack14, YStack as YStack19 } from "tamagui";
 import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 function ProfileHeader({ name, subtitle, avatar, stats, actions }) {
   return /* @__PURE__ */ jsxs18(YStack19, { alignItems: "center", gap: "$4", paddingVertical: "$6", paddingHorizontal: "$4", children: [
-    /* @__PURE__ */ jsx25(Circle4, { size: 80, backgroundColor: "$color4", overflow: "hidden", children: avatar ? /* @__PURE__ */ jsx25(Image4, { source: { uri: avatar }, width: 80, height: 80, objectFit: "cover" }) : /* @__PURE__ */ jsx25(SizableText22, { size: "$9", fontWeight: "700", color: "$color11", children: name[0]?.toUpperCase() ?? "?" }) }),
+    /* @__PURE__ */ jsx25(Circle5, { size: 80, backgroundColor: "$color4", overflow: "hidden", children: avatar ? /* @__PURE__ */ jsx25(Image4, { source: { uri: avatar }, width: 80, height: 80, objectFit: "cover" }) : /* @__PURE__ */ jsx25(SizableText22, { size: "$9", fontWeight: "700", color: "$color11", children: name[0]?.toUpperCase() ?? "?" }) }),
     /* @__PURE__ */ jsxs18(YStack19, { alignItems: "center", gap: "$1", children: [
       /* @__PURE__ */ jsx25(SizableText22, { size: "$7", fontWeight: "700", children: name }),
       subtitle && /* @__PURE__ */ jsx25(SizableText22, { size: "$4", color: "$color10", children: subtitle })
@@ -1419,65 +1562,150 @@ function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], d
 
 // src/patterns/LoginScreen.tsx
 import { useState as useState7 } from "react";
-import { Button as Button6, SizableText as SizableText25, Spinner, XStack as XStack17, YStack as YStack22 } from "tamagui";
-import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
-function LoginScreen({ title = "Welcome", subtitle = "Sign in to continue", logo, providers = [], onProviderPress, showEmailForm, onEmailSubmit, onForgotPassword, onCreateAccount, onTerms, onPrivacy, loading }) {
+import { Button as Button6, Circle as Circle6, SizableText as SizableText25, Spinner, XStack as XStack17, YStack as YStack22 } from "tamagui";
+import { Fragment as Fragment2, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+function GoogleIcon({ size = 20 }) {
+  return /* @__PURE__ */ jsx28(XStack17, { width: size, height: size, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx28(SizableText25, { fontSize: size, lineHeight: size, fontWeight: "700", color: "#4285F4", children: "G" }) });
+}
+function AppleIcon({ size = 20 }) {
+  return /* @__PURE__ */ jsx28(XStack17, { width: size, height: size, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx28(SizableText25, { fontSize: size * 0.85, lineHeight: size, color: "$color1", children: "\uF8FF" }) });
+}
+function GitHubIcon({ size = 20 }) {
+  return /* @__PURE__ */ jsx28(Circle6, { size, backgroundColor: "$color1", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx28(SizableText25, { fontSize: size * 0.6, lineHeight: size, fontWeight: "900", color: "$color12", textAlign: "center", children: "GH" }) });
+}
+function MicrosoftIcon({ size = 20 }) {
+  const half = Math.floor(size * 0.4);
+  const gap = 2;
+  return /* @__PURE__ */ jsxs21(YStack22, { width: size, height: size, alignItems: "center", justifyContent: "center", children: [
+    /* @__PURE__ */ jsxs21(XStack17, { gap, children: [
+      /* @__PURE__ */ jsx28(YStack22, { width: half, height: half, backgroundColor: "#F25022" }),
+      /* @__PURE__ */ jsx28(YStack22, { width: half, height: half, backgroundColor: "#7FBA00" })
+    ] }),
+    /* @__PURE__ */ jsxs21(XStack17, { gap, children: [
+      /* @__PURE__ */ jsx28(YStack22, { width: half, height: half, backgroundColor: "#00A4EF" }),
+      /* @__PURE__ */ jsx28(YStack22, { width: half, height: half, backgroundColor: "#FFB900" })
+    ] })
+  ] });
+}
+var BRAND_ICON_MAP = {
+  google: GoogleIcon,
+  apple: AppleIcon,
+  github: GitHubIcon,
+  microsoft: MicrosoftIcon,
+  custom: ({ size = 20 }) => /* @__PURE__ */ jsx28(Circle6, { size, backgroundColor: "$color4", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx28(SizableText25, { fontSize: size * 0.6, color: "$color10", children: "\u2022" }) })
+};
+var BRAND_STYLES = {
+  google: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12" },
+  apple: { backgroundColor: "$color12", borderColor: "$color12", textColor: "$color1" },
+  github: { backgroundColor: "$color12", borderColor: "$color12", textColor: "$color1" },
+  microsoft: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12" },
+  custom: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12" }
+};
+function ProviderBadge({ provider }) {
+  const brand = provider.brand ?? "custom";
+  if (provider.icon) return /* @__PURE__ */ jsx28(Fragment2, { children: provider.icon });
+  const IconComponent = BRAND_ICON_MAP[brand];
+  return /* @__PURE__ */ jsx28(IconComponent, { size: 22 });
+}
+function LoginScreen({
+  variant = "default",
+  title = "Welcome",
+  subtitle = "Sign in to continue",
+  logo,
+  providers = [],
+  hero,
+  backgroundSlot,
+  footerSlot,
+  providerButtonStyle = "brand",
+  onProviderPress,
+  showEmailForm,
+  onEmailSubmit,
+  onForgotPassword,
+  onCreateAccount,
+  onTerms,
+  onPrivacy,
+  loading
+}) {
   const [email, setEmail] = useState7("");
   const [password, setPassword] = useState7("");
+  const isEditorial = variant === "editorial";
+  const isCenteredCard = variant === "centered-card";
   return /* @__PURE__ */ jsxs21(YStack22, { flex: 1, padding: "$4", gap: "$5", backgroundColor: "$background", justifyContent: "center", children: [
-    /* @__PURE__ */ jsxs21(YStack22, { alignItems: "center", gap: "$2", children: [
-      logo && /* @__PURE__ */ jsx28(YStack22, { paddingBottom: "$3", children: logo }),
-      /* @__PURE__ */ jsx28(SizableText25, { size: "$9", fontWeight: "700", textAlign: "center", children: title }),
-      /* @__PURE__ */ jsx28(SizableText25, { size: "$4", color: "$color10", textAlign: "center", children: subtitle })
-    ] }),
-    providers.length > 0 && /* @__PURE__ */ jsx28(YStack22, { gap: "$2.5", children: providers.map((p) => /* @__PURE__ */ jsx28(
-      Button6,
+    backgroundSlot ? /* @__PURE__ */ jsx28(YStack22, { position: "absolute", left: 0, right: 0, top: 0, bottom: 0, children: backgroundSlot }) : null,
+    /* @__PURE__ */ jsxs21(
+      YStack22,
       {
-        size: "$5",
-        borderWidth: 1.5,
-        borderColor: "$color5",
-        backgroundColor: "$color1",
-        borderRadius: "$4",
-        disabled: loading,
-        onPress: () => onProviderPress?.(p.id),
-        hoverStyle: { backgroundColor: "$color2" },
-        pressStyle: { backgroundColor: "$color3" },
-        children: /* @__PURE__ */ jsxs21(XStack17, { alignItems: "center", gap: "$2", children: [
-          p.icon,
-          /* @__PURE__ */ jsx28(SizableText25, { size: "$4", fontWeight: "500", children: p.name })
-        ] })
-      },
-      p.id
-    )) }),
-    showEmailForm && providers.length > 0 && /* @__PURE__ */ jsx28(Divider, { label: "or" }),
-    showEmailForm && /* @__PURE__ */ jsxs21(YStack22, { gap: "$3", children: [
-      /* @__PURE__ */ jsx28(Input, { label: "Email", placeholder: "your@email.com", value: email, onChangeText: setEmail, keyboardType: "email-address", autoCapitalize: "none" }),
-      /* @__PURE__ */ jsx28(Input, { label: "Password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", value: password, onChangeText: setPassword, secureTextEntry: true }),
-      onForgotPassword && /* @__PURE__ */ jsx28(XStack17, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx28(SizableText25, { size: "$3", color: "$color9", onPress: onForgotPassword, children: "Forgot password?" }) }),
-      /* @__PURE__ */ jsx28(
-        Button6,
-        {
-          size: "$5",
-          backgroundColor: "$color9",
-          color: "$color1",
-          borderRadius: "$5",
-          disabled: loading,
-          onPress: () => onEmailSubmit?.(email, password),
-          hoverStyle: { backgroundColor: "$color10" },
-          pressStyle: { backgroundColor: "$color8" },
-          icon: loading ? /* @__PURE__ */ jsx28(Spinner, { size: "small", color: "$color1" }) : void 0,
-          children: "Sign In"
-        }
-      ),
-      onCreateAccount && /* @__PURE__ */ jsx28(Button6, { size: "$3", chromeless: true, onPress: onCreateAccount, children: /* @__PURE__ */ jsx28(SizableText25, { size: "$3", color: "$color9", children: "Create Account" }) })
-    ] }),
-    (onTerms || onPrivacy) && /* @__PURE__ */ jsx28(YStack22, { paddingTop: "$2", alignItems: "center", children: /* @__PURE__ */ jsxs21(SizableText25, { size: "$2", color: "$color8", textAlign: "center", children: [
-      "By continuing you agree to our",
-      " ",
-      onTerms && /* @__PURE__ */ jsx28(SizableText25, { size: "$2", color: "$color9", onPress: onTerms, children: "Terms of Service" }),
-      onTerms && onPrivacy && " & ",
-      onPrivacy && /* @__PURE__ */ jsx28(SizableText25, { size: "$2", color: "$color9", onPress: onPrivacy, children: "Privacy Policy" })
-    ] }) })
+        gap: "$5",
+        backgroundColor: isCenteredCard ? "$color1" : "transparent",
+        borderRadius: isCenteredCard ? "$7" : void 0,
+        padding: isCenteredCard ? "$4" : void 0,
+        borderWidth: isCenteredCard ? 1 : 0,
+        borderColor: isCenteredCard ? "$color4" : void 0,
+        children: [
+          /* @__PURE__ */ jsxs21(YStack22, { alignItems: "center", gap: "$2", children: [
+            logo && /* @__PURE__ */ jsx28(YStack22, { paddingBottom: "$3", children: logo }),
+            hero ? /* @__PURE__ */ jsx28(YStack22, { paddingBottom: "$2", children: hero }) : null,
+            /* @__PURE__ */ jsx28(SizableText25, { size: isEditorial ? "$10" : "$9", fontWeight: "700", textAlign: "center", fontFamily: isEditorial ? "$heading" : void 0, children: title }),
+            /* @__PURE__ */ jsx28(SizableText25, { size: "$4", color: "$color10", textAlign: "center", children: subtitle })
+          ] }),
+          providers.length > 0 && /* @__PURE__ */ jsx28(YStack22, { gap: "$2.5", children: providers.map((p) => /* @__PURE__ */ jsx28(
+            Button6,
+            {
+              size: "$5",
+              borderWidth: 1.5,
+              borderColor: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].borderColor : "$color5",
+              backgroundColor: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].backgroundColor : "$color1",
+              borderRadius: isEditorial ? "$6" : "$4",
+              disabled: loading,
+              onPress: () => onProviderPress?.(p.id),
+              hoverStyle: { backgroundColor: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].backgroundColor : "$color2" },
+              pressStyle: { backgroundColor: "$color3" },
+              children: /* @__PURE__ */ jsxs21(XStack17, { alignItems: "center", justifyContent: "space-between", width: "100%", gap: "$2", children: [
+                /* @__PURE__ */ jsxs21(XStack17, { alignItems: "center", gap: "$2.5", children: [
+                  /* @__PURE__ */ jsx28(ProviderBadge, { provider: p }),
+                  /* @__PURE__ */ jsxs21(YStack22, { alignItems: "flex-start", children: [
+                    /* @__PURE__ */ jsx28(SizableText25, { size: "$4", fontWeight: "600", color: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].textColor : void 0, children: p.name }),
+                    p.description ? /* @__PURE__ */ jsx28(SizableText25, { size: "$2", color: "$color10", children: p.description }) : null
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx28(SizableText25, { size: "$4", color: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].textColor : "$color9", children: "\u2192" })
+              ] })
+            },
+            p.id
+          )) }),
+          showEmailForm && providers.length > 0 && /* @__PURE__ */ jsx28(Divider, { label: "or" }),
+          showEmailForm && /* @__PURE__ */ jsxs21(YStack22, { gap: "$3", children: [
+            /* @__PURE__ */ jsx28(Input, { label: "Email", placeholder: "your@email.com", value: email, onChangeText: setEmail, keyboardType: "email-address", autoCapitalize: "none" }),
+            /* @__PURE__ */ jsx28(Input, { label: "Password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", value: password, onChangeText: setPassword, secureTextEntry: true }),
+            onForgotPassword && /* @__PURE__ */ jsx28(XStack17, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx28(SizableText25, { size: "$3", color: "$color9", onPress: onForgotPassword, children: "Forgot password?" }) }),
+            /* @__PURE__ */ jsx28(
+              Button6,
+              {
+                size: "$5",
+                backgroundColor: "$color9",
+                color: "$color1",
+                borderRadius: "$5",
+                disabled: loading,
+                onPress: () => onEmailSubmit?.(email, password),
+                hoverStyle: { backgroundColor: "$color10" },
+                pressStyle: { backgroundColor: "$color8" },
+                icon: loading ? /* @__PURE__ */ jsx28(Spinner, { size: "small", color: "$color1" }) : void 0,
+                children: "Sign In"
+              }
+            ),
+            onCreateAccount && /* @__PURE__ */ jsx28(Button6, { size: "$3", chromeless: true, onPress: onCreateAccount, children: /* @__PURE__ */ jsx28(SizableText25, { size: "$3", color: "$color9", children: "Create Account" }) })
+          ] }),
+          (onTerms || onPrivacy) && /* @__PURE__ */ jsx28(YStack22, { paddingTop: "$2", alignItems: "center", children: /* @__PURE__ */ jsxs21(SizableText25, { size: "$2", color: "$color8", textAlign: "center", children: [
+            "By continuing you agree to our",
+            " ",
+            onTerms && /* @__PURE__ */ jsx28(SizableText25, { size: "$2", color: "$color9", onPress: onTerms, children: "Terms of Service" }),
+            onTerms && onPrivacy && " & ",
+            onPrivacy && /* @__PURE__ */ jsx28(SizableText25, { size: "$2", color: "$color9", onPress: onPrivacy, children: "Privacy Policy" })
+          ] }) }),
+          footerSlot
+        ]
+      }
+    )
   ] });
 }
 
@@ -1679,7 +1907,7 @@ function NotificationBanner({ title, message, variant = "info", onPress, onDismi
 }
 
 // src/patterns/ProgressSteps.tsx
-import { Circle as Circle5, SizableText as SizableText31, XStack as XStack23, YStack as YStack27 } from "tamagui";
+import { Circle as Circle7, SizableText as SizableText31, XStack as XStack23, YStack as YStack27 } from "tamagui";
 import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 function ProgressSteps({ steps, currentStep, variant = "dots" }) {
   if (variant === "bar") {
@@ -1691,7 +1919,7 @@ function ProgressSteps({ steps, currentStep, variant = "dots" }) {
   }
   return /* @__PURE__ */ jsx35(XStack23, { alignItems: "center", justifyContent: "center", gap: "$0", children: steps.map((label, i) => /* @__PURE__ */ jsxs27(XStack23, { alignItems: "center", gap: "$0", children: [
     /* @__PURE__ */ jsxs27(YStack27, { alignItems: "center", gap: "$1.5", children: [
-      /* @__PURE__ */ jsx35(Circle5, { size: variant === "numbered" ? 28 : 10, backgroundColor: i <= currentStep ? "$color9" : "$color4", animation: "quick", children: variant === "numbered" && /* @__PURE__ */ jsx35(SizableText31, { size: "$2", fontWeight: "600", color: i <= currentStep ? "$color1" : "$color8", children: i + 1 }) }),
+      /* @__PURE__ */ jsx35(Circle7, { size: variant === "numbered" ? 28 : 10, backgroundColor: i <= currentStep ? "$color9" : "$color4", animation: "quick", children: variant === "numbered" && /* @__PURE__ */ jsx35(SizableText31, { size: "$2", fontWeight: "600", color: i <= currentStep ? "$color1" : "$color8", children: i + 1 }) }),
       /* @__PURE__ */ jsx35(SizableText31, { size: "$1", color: i <= currentStep ? "$color11" : "$color8", numberOfLines: 1, children: label })
     ] }),
     i < steps.length - 1 && /* @__PURE__ */ jsx35(YStack27, { height: 2, width: 32, backgroundColor: i < currentStep ? "$color9" : "$color4", marginBottom: "$4" })
@@ -1701,11 +1929,11 @@ function ProgressSteps({ steps, currentStep, variant = "dots" }) {
 // src/patterns/SwipeableRow.tsx
 import { useState as useState8 } from "react";
 import { Button as Button7, SizableText as SizableText32, XStack as XStack24, YStack as YStack28 } from "tamagui";
-import { Fragment as Fragment2, jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
 function SwipeableRow({ children, leftActions, rightActions }) {
   const [showActions, setShowActions] = useState8(false);
   const actions = [...leftActions ?? [], ...rightActions ?? []];
-  if (actions.length === 0) return /* @__PURE__ */ jsx36(Fragment2, { children });
+  if (actions.length === 0) return /* @__PURE__ */ jsx36(Fragment3, { children });
   return /* @__PURE__ */ jsxs28(YStack28, { children: [
     /* @__PURE__ */ jsx36(YStack28, { onLongPress: () => setShowActions((v) => !v), pressStyle: { opacity: 0.9 }, children }),
     showActions && /* @__PURE__ */ jsx36(XStack24, { gap: "$2", padding: "$2", animation: "quick", enterStyle: { opacity: 0, scale: 0.95 }, children: actions.map((action) => /* @__PURE__ */ jsx36(
@@ -1779,7 +2007,7 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
 
 // src/patterns/Carousel.tsx
 import { Children as Children2, useState as useState9 } from "react";
-import { Circle as Circle6, XStack as XStack26, YStack as YStack30 } from "tamagui";
+import { Circle as Circle8, XStack as XStack26, YStack as YStack30 } from "tamagui";
 import { ScrollView as ScrollView4 } from "react-native";
 import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
 function Carousel({ children, gap = "$3", snapToInterval, showIndicators = false }) {
@@ -1801,7 +2029,7 @@ function Carousel({ children, gap = "$3", snapToInterval, showIndicators = false
         children
       }
     ),
-    showIndicators && count > 1 && /* @__PURE__ */ jsx38(XStack26, { justifyContent: "center", gap: "$1.5", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx38(Circle6, { size: 6, backgroundColor: i === activeIndex ? "$color9" : "$color4", animation: "quick" }, i)) })
+    showIndicators && count > 1 && /* @__PURE__ */ jsx38(XStack26, { justifyContent: "center", gap: "$1.5", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx38(Circle8, { size: 6, backgroundColor: i === activeIndex ? "$color9" : "$color4", animation: "quick" }, i)) })
   ] });
 }
 
@@ -2092,7 +2320,7 @@ function AuthorRow({ author, role, avatar }) {
     ] })
   ] });
 }
-function TestimonialCard({ quote, author, role, avatar, rating, variant = "card" }) {
+function TestimonialCard2({ quote, author, role, avatar, rating, variant = "card" }) {
   if (variant === "minimal") {
     return /* @__PURE__ */ jsxs34(YStack35, { gap: "$3", paddingVertical: "$2", children: [
       /* @__PURE__ */ jsx43(Stars2, { count: rating }),
@@ -2479,7 +2707,7 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
 }
 
 // src/patterns/AvatarGroup.tsx
-import { Circle as Circle7, Image as Image8, SizableText as SizableText42, XStack as XStack35 } from "tamagui";
+import { Circle as Circle9, Image as Image8, SizableText as SizableText42, XStack as XStack35 } from "tamagui";
 import { jsx as jsx48, jsxs as jsxs39 } from "react/jsx-runtime";
 function getInitials(name) {
   if (!name) return "?";
@@ -2487,7 +2715,7 @@ function getInitials(name) {
 }
 function AvatarItem({ uri, name, color, size }) {
   return /* @__PURE__ */ jsx48(
-    Circle7,
+    Circle9,
     {
       size,
       backgroundColor: color ?? "$color4",
@@ -2506,7 +2734,7 @@ function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
   return /* @__PURE__ */ jsxs39(XStack35, { alignItems: "center", children: [
     visible.map((avatar, i) => /* @__PURE__ */ jsx48(XStack35, { marginLeft: i === 0 ? 0 : -overlap, zIndex: visible.length - i, children: /* @__PURE__ */ jsx48(AvatarItem, { ...avatar, size }) }, i)),
     remaining > 0 && /* @__PURE__ */ jsx48(XStack35, { marginLeft: -overlap, zIndex: 0, children: /* @__PURE__ */ jsx48(
-      Circle7,
+      Circle9,
       {
         size,
         backgroundColor: "$color6",
@@ -2525,7 +2753,7 @@ function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
 
 // src/patterns/SwipeCards.tsx
 import { useState as useState13, useCallback as useCallback6 } from "react";
-import { Circle as Circle8, SizableText as SizableText43, XStack as XStack36, YStack as YStack39 } from "tamagui";
+import { Circle as Circle10, SizableText as SizableText43, XStack as XStack36, YStack as YStack39 } from "tamagui";
 import { jsx as jsx49, jsxs as jsxs40 } from "react/jsx-runtime";
 var STACK_SIZE = 3;
 var CARD_OFFSETS = [
@@ -2629,7 +2857,7 @@ function SwipeCards({
     }) }) }),
     /* @__PURE__ */ jsxs40(XStack36, { justifyContent: "center", gap: "$6", paddingBottom: "$4", children: [
       /* @__PURE__ */ jsx49(
-        Circle8,
+        Circle10,
         {
           size: 60,
           backgroundColor: "$red3",
@@ -2644,7 +2872,7 @@ function SwipeCards({
         }
       ),
       /* @__PURE__ */ jsx49(
-        Circle8,
+        Circle10,
         {
           size: 60,
           backgroundColor: "$green3",
@@ -3137,41 +3365,45 @@ function UserPreferences({ sections }) {
 }
 
 // src/patterns/BlinkSelect.tsx
-import { Select, Adapt, Sheet as Sheet3, SizableText as SizableText48 } from "tamagui";
+import { Select, Adapt, Sheet as Sheet3, YStack as YStack45, SizableText as SizableText48 } from "tamagui";
 import { jsx as jsx55, jsxs as jsxs45 } from "react/jsx-runtime";
 function BlinkSelect({
   items,
   value,
   onValueChange,
   placeholder = "Select...",
+  label,
   size = "$4",
   disabled,
   width = "100%"
 }) {
-  return /* @__PURE__ */ jsxs45(
-    Select,
-    {
-      value,
-      onValueChange,
-      disablePreventBodyScroll: true,
-      ...disabled ? { disabled: true } : {},
-      children: [
-        /* @__PURE__ */ jsx55(Select.Trigger, { width, iconAfter: () => /* @__PURE__ */ jsx55(SizableText48, { children: "\u25BC" }), size, children: /* @__PURE__ */ jsx55(Select.Value, { placeholder }) }),
-        /* @__PURE__ */ jsx55(Adapt, { when: "maxMd", platform: "touch", children: /* @__PURE__ */ jsxs45(Sheet3, { modal: true, dismissOnSnapToBottom: true, snapPointsMode: "fit", children: [
-          /* @__PURE__ */ jsx55(Sheet3.Frame, { padding: "$4", children: /* @__PURE__ */ jsx55(Adapt.Contents, {}) }),
-          /* @__PURE__ */ jsx55(Sheet3.Overlay, {})
-        ] }) }),
-        /* @__PURE__ */ jsxs45(Select.Content, { zIndex: 2e5, children: [
-          /* @__PURE__ */ jsx55(Select.ScrollUpButton, { alignItems: "center", justifyContent: "center", height: "$3", children: /* @__PURE__ */ jsx55(SizableText48, { children: "\u25B2" }) }),
-          /* @__PURE__ */ jsx55(Select.Viewport, { minWidth: 200, children: /* @__PURE__ */ jsx55(Select.Group, { children: items.map((item, i) => /* @__PURE__ */ jsxs45(Select.Item, { index: i, value: item.value, children: [
-            /* @__PURE__ */ jsx55(Select.ItemText, { children: item.label }),
-            /* @__PURE__ */ jsx55(Select.ItemIndicator, { marginLeft: "auto", children: /* @__PURE__ */ jsx55(SizableText48, { children: "\u2713" }) })
-          ] }, item.value)) }) }),
-          /* @__PURE__ */ jsx55(Select.ScrollDownButton, { alignItems: "center", justifyContent: "center", height: "$3", children: /* @__PURE__ */ jsx55(SizableText48, { children: "\u25BC" }) })
-        ] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs45(YStack45, { gap: "$1.5", width, children: [
+    label ? /* @__PURE__ */ jsx55(SizableText48, { size: "$3", fontWeight: "600", children: label }) : null,
+    /* @__PURE__ */ jsxs45(
+      Select,
+      {
+        value,
+        onValueChange,
+        disablePreventBodyScroll: true,
+        ...disabled ? { disabled: true } : {},
+        children: [
+          /* @__PURE__ */ jsx55(Select.Trigger, { width: "100%", iconAfter: () => /* @__PURE__ */ jsx55(SizableText48, { children: "\u25BC" }), size, children: /* @__PURE__ */ jsx55(Select.Value, { placeholder }) }),
+          /* @__PURE__ */ jsx55(Adapt, { when: "maxMd", platform: "touch", children: /* @__PURE__ */ jsxs45(Sheet3, { modal: true, dismissOnSnapToBottom: true, snapPointsMode: "fit", children: [
+            /* @__PURE__ */ jsx55(Sheet3.Frame, { padding: "$4", children: /* @__PURE__ */ jsx55(Adapt.Contents, {}) }),
+            /* @__PURE__ */ jsx55(Sheet3.Overlay, {})
+          ] }) }),
+          /* @__PURE__ */ jsxs45(Select.Content, { zIndex: 2e5, children: [
+            /* @__PURE__ */ jsx55(Select.ScrollUpButton, { alignItems: "center", justifyContent: "center", height: "$3", children: /* @__PURE__ */ jsx55(SizableText48, { children: "\u25B2" }) }),
+            /* @__PURE__ */ jsx55(Select.Viewport, { minWidth: 200, children: /* @__PURE__ */ jsx55(Select.Group, { children: items.map((item, i) => /* @__PURE__ */ jsxs45(Select.Item, { index: i, value: item.value, children: [
+              /* @__PURE__ */ jsx55(Select.ItemText, { children: item.label }),
+              /* @__PURE__ */ jsx55(Select.ItemIndicator, { marginLeft: "auto", children: /* @__PURE__ */ jsx55(SizableText48, { children: "\u2713" }) })
+            ] }, item.value)) }) }),
+            /* @__PURE__ */ jsx55(Select.ScrollDownButton, { alignItems: "center", justifyContent: "center", height: "$3", children: /* @__PURE__ */ jsx55(SizableText48, { children: "\u25BC" }) })
+          ] })
+        ]
+      }
+    )
+  ] });
 }
 
 // src/patterns/BlinkDialog.tsx
@@ -3266,6 +3498,154 @@ function BlinkPopover({
     )
   ] });
 }
+
+// src/patterns/ImmersiveMediaScreen.tsx
+import { Button as Button12, SizableText as SizableText49, XStack as XStack42, YStack as YStack47 } from "tamagui";
+import { jsx as jsx58, jsxs as jsxs48 } from "react/jsx-runtime";
+function ImmersiveMediaScreen({
+  variant = "reel",
+  media,
+  title,
+  subtitle,
+  topLeft,
+  topCenter,
+  topRight,
+  actions = [],
+  bottomMeta,
+  inputPlaceholder,
+  onInputPress,
+  sheetContent
+}) {
+  const showSheet = variant === "sheet";
+  return /* @__PURE__ */ jsxs48(YStack47, { flex: 1, backgroundColor: "$color1", children: [
+    /* @__PURE__ */ jsxs48(YStack47, { flex: 1, position: "relative", children: [
+      media,
+      /* @__PURE__ */ jsxs48(XStack42, { position: "absolute", top: "$5", left: "$4", right: "$4", justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsx58(XStack42, { minWidth: 56, children: topLeft }),
+        /* @__PURE__ */ jsx58(YStack47, { alignItems: "center", flex: 1, children: topCenter }),
+        /* @__PURE__ */ jsx58(XStack42, { minWidth: 56, justifyContent: "flex-end", children: topRight })
+      ] }),
+      actions.length > 0 ? /* @__PURE__ */ jsx58(YStack47, { position: "absolute", right: "$3", bottom: showSheet ? "$20" : "$10", gap: "$3", alignItems: "center", children: actions.map((action) => /* @__PURE__ */ jsxs48(YStack47, { gap: "$1", alignItems: "center", onPress: action.onPress, children: [
+        /* @__PURE__ */ jsx58(
+          YStack47,
+          {
+            width: 44,
+            height: 44,
+            borderRadius: "$10",
+            backgroundColor: "rgba(0,0,0,0.55)",
+            alignItems: "center",
+            justifyContent: "center",
+            children: action.icon ?? /* @__PURE__ */ jsx58(SizableText49, { size: "$5", color: "white", children: "\u2022" })
+          }
+        ),
+        action.value ? /* @__PURE__ */ jsx58(SizableText49, { size: "$2", color: "white", children: action.value }) : null,
+        action.label ? /* @__PURE__ */ jsx58(SizableText49, { size: "$1", color: "rgba(255,255,255,0.8)", children: action.label }) : null
+      ] }, action.id)) }) : null,
+      /* @__PURE__ */ jsxs48(YStack47, { position: "absolute", left: "$4", right: "$4", bottom: showSheet ? "$20" : "$6", gap: "$2", children: [
+        title ? /* @__PURE__ */ jsx58(SizableText49, { size: "$6", fontWeight: "800", color: "white", children: title }) : null,
+        subtitle ? /* @__PURE__ */ jsx58(SizableText49, { size: "$3", color: "rgba(255,255,255,0.82)", children: subtitle }) : null,
+        bottomMeta,
+        variant === "story" && inputPlaceholder ? /* @__PURE__ */ jsx58(
+          XStack42,
+          {
+            onPress: onInputPress,
+            alignItems: "center",
+            paddingHorizontal: "$4",
+            paddingVertical: "$3",
+            borderRadius: "$10",
+            backgroundColor: "rgba(255,255,255,0.14)",
+            borderWidth: 1,
+            borderColor: "rgba(255,255,255,0.25)",
+            children: /* @__PURE__ */ jsx58(SizableText49, { size: "$3", color: "rgba(255,255,255,0.82)", children: inputPlaceholder })
+          }
+        ) : null
+      ] })
+    ] }),
+    showSheet ? /* @__PURE__ */ jsxs48(YStack47, { padding: "$4", gap: "$3", backgroundColor: "$background", borderTopLeftRadius: "$8", borderTopRightRadius: "$8", marginTop: -18, children: [
+      /* @__PURE__ */ jsx58(XStack42, { alignSelf: "center", width: 48, height: 5, borderRadius: "$10", backgroundColor: "$color5" }),
+      sheetContent,
+      inputPlaceholder ? /* @__PURE__ */ jsx58(Button12, { size: "$5", backgroundColor: "$color9", color: "$color1", onPress: onInputPress, children: inputPlaceholder }) : null
+    ] }) : null
+  ] });
+}
+
+// src/patterns/FinanceDashboard.tsx
+import { SizableText as SizableText50, XStack as XStack43, YStack as YStack48 } from "tamagui";
+import { jsx as jsx59, jsxs as jsxs49 } from "react/jsx-runtime";
+function FinanceDashboard({
+  title = "Overview",
+  balanceLabel = "Available balance",
+  balance,
+  rangeLabel,
+  metrics = [],
+  quickActions = [],
+  sections = [],
+  chartSlot,
+  topRight
+}) {
+  return /* @__PURE__ */ jsxs49(YStack48, { flex: 1, backgroundColor: "$background", padding: "$4", gap: "$4", children: [
+    /* @__PURE__ */ jsxs49(XStack43, { justifyContent: "space-between", alignItems: "center", paddingTop: "$4", children: [
+      /* @__PURE__ */ jsxs49(YStack48, { gap: "$1", children: [
+        /* @__PURE__ */ jsx59(SizableText50, { size: "$6", fontWeight: "700", children: title }),
+        rangeLabel ? /* @__PURE__ */ jsx59(SizableText50, { size: "$2", color: "$color9", children: rangeLabel }) : null
+      ] }),
+      topRight
+    ] }),
+    /* @__PURE__ */ jsxs49(YStack48, { backgroundColor: "$color1", borderRadius: "$7", padding: "$4", gap: "$2", borderWidth: 1, borderColor: "$color4", children: [
+      /* @__PURE__ */ jsx59(SizableText50, { size: "$3", color: "$color10", children: balanceLabel }),
+      /* @__PURE__ */ jsx59(SizableText50, { size: "$11", fontWeight: "800", children: balance }),
+      chartSlot ? /* @__PURE__ */ jsx59(YStack48, { marginTop: "$2", children: chartSlot }) : null
+    ] }),
+    metrics.length > 0 ? /* @__PURE__ */ jsx59(XStack43, { gap: "$3", flexWrap: "wrap", children: metrics.map((metric) => /* @__PURE__ */ jsxs49(YStack48, { flex: 1, minWidth: 120, backgroundColor: "$color1", borderRadius: "$6", padding: "$3", gap: "$1", borderWidth: 1, borderColor: "$color4", children: [
+      /* @__PURE__ */ jsx59(SizableText50, { size: "$2", color: "$color10", children: metric.label }),
+      /* @__PURE__ */ jsx59(SizableText50, { size: "$7", fontWeight: "800", children: metric.value }),
+      metric.change ? /* @__PURE__ */ jsx59(SizableText50, { size: "$2", color: "$color9", children: metric.change }) : null
+    ] }, metric.label)) }) : null,
+    quickActions.length > 0 ? /* @__PURE__ */ jsx59(XStack43, { gap: "$3", flexWrap: "wrap", children: quickActions.map((action) => /* @__PURE__ */ jsxs49(
+      YStack48,
+      {
+        flex: 1,
+        minWidth: 88,
+        backgroundColor: "$color1",
+        borderRadius: "$6",
+        padding: "$3",
+        gap: "$2",
+        alignItems: "center",
+        justifyContent: "center",
+        borderWidth: 1,
+        borderColor: "$color4",
+        onPress: action.onPress,
+        children: [
+          /* @__PURE__ */ jsx59(YStack48, { width: 36, height: 36, borderRadius: "$10", backgroundColor: "$color3", alignItems: "center", justifyContent: "center", children: action.icon ?? /* @__PURE__ */ jsx59(SizableText50, { size: "$4", children: "\u2022" }) }),
+          /* @__PURE__ */ jsx59(SizableText50, { size: "$2", textAlign: "center", children: action.label })
+        ]
+      },
+      action.id
+    )) }) : null,
+    /* @__PURE__ */ jsx59(YStack48, { gap: "$3", children: sections.map((section, index) => /* @__PURE__ */ jsxs49(YStack48, { backgroundColor: "$color1", borderRadius: "$6", borderWidth: 1, borderColor: "$color4", overflow: "hidden", children: [
+      /* @__PURE__ */ jsx59(XStack43, { padding: "$3", justifyContent: "space-between", alignItems: "center", children: /* @__PURE__ */ jsx59(SizableText50, { size: "$4", fontWeight: "700", children: section.title }) }),
+      /* @__PURE__ */ jsx59(YStack48, { children: section.rows.map((row, index2) => /* @__PURE__ */ jsxs49(
+        XStack43,
+        {
+          padding: "$3",
+          gap: "$3",
+          alignItems: "center",
+          borderTopWidth: index2 === 0 ? 0 : 1,
+          borderTopColor: "$color4",
+          children: [
+            row.leading ? /* @__PURE__ */ jsx59(YStack48, { width: 32, height: 32, borderRadius: "$8", backgroundColor: "$color3", alignItems: "center", justifyContent: "center", children: row.leading }) : null,
+            /* @__PURE__ */ jsxs49(YStack48, { flex: 1, children: [
+              /* @__PURE__ */ jsx59(SizableText50, { size: "$3", fontWeight: "600", children: row.title }),
+              row.subtitle ? /* @__PURE__ */ jsx59(SizableText50, { size: "$2", color: "$color10", children: row.subtitle }) : null
+            ] }),
+            row.value ? /* @__PURE__ */ jsx59(SizableText50, { size: "$3", color: "$color11", children: row.value }) : null
+          ]
+        },
+        row.id
+      )) })
+    ] }, section.id ?? `${section.title}-${index}`)) })
+  ] });
+}
 export {
   Accordion,
   ActionSheet,
@@ -3294,14 +3674,14 @@ export {
   BlinkToggleGroup,
   BlinkTooltip,
   BottomSheet,
-  Button12 as Button,
+  Button13 as Button,
   Card2 as Card,
   Carousel,
   ChatBubble,
   Checkbox,
   Chip,
   ChipGroup,
-  Circle9 as Circle,
+  Circle11 as Circle,
   ConfirmDialog,
   Container,
   CountdownBanner,
@@ -3314,6 +3694,7 @@ export {
   EnsureFlexed,
   EventCard,
   Fieldset,
+  FinanceDashboard,
   FloatingActionButton,
   Footer,
   Form,
@@ -3333,6 +3714,7 @@ export {
   ICONS,
   Icon,
   Image2 as Image,
+  ImmersiveMediaScreen,
   Input5 as Input,
   KeyboardStickyFooter,
   Label,
@@ -3373,7 +3755,7 @@ export {
   SettingsScreen,
   Sheet5 as Sheet,
   SizableStack,
-  SizableText49 as SizableText,
+  SizableText51 as SizableText,
   Skeleton,
   Slider2 as Slider,
   Spacer,
@@ -3391,7 +3773,7 @@ export {
   Image9 as TamaguiImage,
   ListItem2 as TamaguiListItem,
   TamaguiProvider,
-  TestimonialCard,
+  TestimonialCard2 as TestimonialCard,
   Text,
   TextArea,
   Theme2 as Theme,
@@ -3404,9 +3786,9 @@ export {
   View7 as View,
   VisuallyHidden,
   XGroup,
-  XStack42 as XStack,
+  XStack44 as XStack,
   YGroup,
-  YStack47 as YStack,
+  YStack49 as YStack,
   ZStack,
   addTheme,
   blinkConfig,