@blinkdotnew/mobile-ui 2.0.0-alpha.11 → 2.0.0-alpha.12

package/dist/index.mjs

@@ -13,11 +13,11 @@ import {
   SizableStack,
   ThemeableStack,
   Frame,
-  XStack as XStack27,
-  YStack as YStack32,
+  XStack as XStack37,
+  YStack as YStack41,
   ZStack,
-  ScrollView as ScrollView5,
-  Circle as Circle8,
+  ScrollView as ScrollView7,
+  Circle as Circle9,
   Square,
   Spacer,
   EnsureFlexed,
@@ -38,11 +38,11 @@ import {
   H6 as H62,
   Heading,
   Paragraph,
-  SizableText as SizableText34,
+  SizableText as SizableText44,
   Text,
   Label,
-  Button as Button8,
-  Input as Input3,
+  Button as Button11,
+  Input as Input5,
   TextArea,
   Switch as Switch2,
   Checkbox,
@@ -54,14 +54,14 @@ import {
   Card as Card2,
   Avatar as Avatar2,
   Separator as Separator5,
-  Image as Image6,
+  Image as Image9,
   Progress,
   Spinner as Spinner2,
   ListItem as ListItem2,
   Anchor,
   Sheet as Sheet3,
   Dialog,
-  AlertDialog as AlertDialog2,
+  AlertDialog as AlertDialog3,
   Popover as Popover2,
   Tooltip,
   TooltipSimple,
@@ -89,7 +89,7 @@ import {
   addTheme,
   updateTheme,
   replaceTheme,
-  styled as styled12,
+  styled as styled13,
   withStaticProperties as withStaticProperties2,
   isWeb,
   isClient,
@@ -1035,78 +1035,137 @@ function Container({ children, maxWidth = 500, centered = true, padding = "$4" }
 }
 
 // src/patterns/PaywallScreen.tsx
-import { Button as Button3, SizableText as SizableText17, XStack as XStack10, YStack as YStack14, Circle as Circle2 } from "tamagui";
+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 { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+function useCountdown(minutes) {
+  const [seconds, setSeconds] = useState5((minutes ?? 0) * 60);
+  useEffect3(() => {
+    if (!minutes) return;
+    setSeconds(minutes * 60);
+    const id = setInterval(() => setSeconds((s) => s > 0 ? s - 1 : 0), 1e3);
+    return () => clearInterval(id);
+  }, [minutes]);
+  const mm = String(Math.floor(seconds / 60)).padStart(2, "0");
+  const ss = String(seconds % 60).padStart(2, "0");
+  return { display: `${mm}:${ss}`, expired: seconds <= 0 };
+}
+function PlanCard({ plan, selected, onPress }) {
+  return /* @__PURE__ */ jsxs13(
+    YStack14,
+    {
+      flex: 1,
+      padding: "$3",
+      borderRadius: "$5",
+      borderWidth: 2,
+      borderColor: selected ? "$color9" : "$color5",
+      backgroundColor: selected ? "$color3" : "$color1",
+      pressStyle: { scale: 0.97, opacity: 0.9 },
+      animation: "quick",
+      onPress,
+      cursor: "pointer",
+      position: "relative",
+      gap: "$1.5",
+      alignItems: "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__ */ 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 }) })
+      ]
+    }
+  );
+}
 function PaywallScreen({
-  title = "Upgrade Your Experience",
-  subtitle = "Choose the plan that works for you",
+  title = "Unlock Premium",
+  subtitle,
+  features = [],
   plans,
   selectedPlan,
   onSelectPlan,
   onContinue,
+  onClose,
   onRestore,
-  continueLabel = "Continue"
+  onTerms,
+  onPrivacy,
+  continueLabel = "Continue",
+  reassurance = "Cancel anytime",
+  hero,
+  socialProof,
+  countdownMinutes,
+  badge
 }) {
-  return /* @__PURE__ */ jsxs13(YStack14, { flex: 1, padding: "$4", gap: "$5", backgroundColor: "$background", children: [
-    /* @__PURE__ */ jsxs13(YStack14, { gap: "$2", paddingTop: "$6", children: [
-      /* @__PURE__ */ jsx20(SizableText17, { size: "$9", fontWeight: "700", textAlign: "center", children: title }),
-      /* @__PURE__ */ jsx20(SizableText17, { size: "$4", color: "$color10", textAlign: "center", children: subtitle })
-    ] }),
-    /* @__PURE__ */ jsx20(YStack14, { gap: "$3", flex: 1, children: plans.map((plan) => /* @__PURE__ */ jsxs13(
+  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: [
+    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: [
+      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 }),
+        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)) })
+    ] }) }),
+    /* @__PURE__ */ jsxs13(
       YStack14,
       {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
         padding: "$4",
-        borderRadius: "$5",
-        borderWidth: 2,
-        borderColor: selectedPlan === plan.id ? "$color9" : "$color4",
-        backgroundColor: selectedPlan === plan.id ? "$color2" : "$color1",
-        pressStyle: { scale: 0.98 },
-        onPress: () => onSelectPlan?.(plan.id),
-        cursor: "pointer",
+        paddingBottom: "$6",
+        backgroundColor: "$background",
+        borderTopWidth: 1,
+        borderTopColor: "$color4",
+        gap: "$2.5",
         children: [
-          /* @__PURE__ */ jsxs13(XStack10, { justifyContent: "space-between", alignItems: "center", children: [
-            /* @__PURE__ */ jsxs13(YStack14, { children: [
-              /* @__PURE__ */ jsx20(SizableText17, { size: "$5", fontWeight: "600", children: plan.name }),
-              /* @__PURE__ */ jsxs13(XStack10, { alignItems: "baseline", gap: "$1", children: [
-                /* @__PURE__ */ jsx20(SizableText17, { size: "$8", fontWeight: "700", children: plan.price }),
-                /* @__PURE__ */ jsxs13(SizableText17, { size: "$3", color: "$color9", children: [
-                  "/",
-                  plan.period
-                ] })
-              ] })
-            ] }),
-            plan.popular && /* @__PURE__ */ jsx20(YStack14, { backgroundColor: "$color9", paddingHorizontal: "$2", paddingVertical: "$1", borderRadius: "$10", children: /* @__PURE__ */ jsx20(SizableText17, { size: "$1", color: "$color1", fontWeight: "600", children: "POPULAR" }) })
-          ] }),
-          /* @__PURE__ */ jsx20(YStack14, { gap: "$2", paddingTop: "$3", children: plan.features.map((feature, i) => /* @__PURE__ */ jsxs13(XStack10, { gap: "$2", alignItems: "center", children: [
-            /* @__PURE__ */ jsx20(Circle2, { size: 6, backgroundColor: "$green9" }),
-            /* @__PURE__ */ jsx20(SizableText17, { size: "$3", color: "$color11", children: feature })
-          ] }, i)) })
+          /* @__PURE__ */ jsx20(
+            Button3,
+            {
+              size: "$5",
+              backgroundColor: "$color9",
+              color: "$color1",
+              onPress: onContinue,
+              pressStyle: { backgroundColor: "$color8", scale: 0.98 },
+              animation: "quick",
+              borderRadius: "$10",
+              fontWeight: "700",
+              children: continueLabel
+            }
+          ),
+          reassurance && /* @__PURE__ */ jsx20(SizableText17, { size: "$2", color: "$color9", textAlign: "center", children: reassurance }),
+          /* @__PURE__ */ jsxs13(XStack10, { justifyContent: "center", gap: "$3", children: [
+            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" })
+          ] })
         ]
-      },
-      plan.id
-    )) }),
-    /* @__PURE__ */ jsxs13(YStack14, { gap: "$3", paddingBottom: "$4", children: [
-      /* @__PURE__ */ jsx20(
-        Button3,
-        {
-          size: "$5",
-          backgroundColor: "$color9",
-          color: "$color1",
-          onPress: onContinue,
-          hoverStyle: { backgroundColor: "$color10" },
-          pressStyle: { backgroundColor: "$color8" },
-          borderRadius: "$5",
-          children: continueLabel
-        }
-      ),
-      onRestore && /* @__PURE__ */ jsx20(Button3, { size: "$3", chromeless: true, onPress: onRestore, children: /* @__PURE__ */ jsx20(SizableText17, { size: "$3", color: "$color9", children: "Restore Purchases" }) })
-    ] })
+      }
+    )
   ] });
 }
 
 // src/patterns/OnboardingCarousel.tsx
-import { useState as useState5 } from "react";
-import { Button as Button4, SizableText as SizableText18, XStack as XStack11, YStack as YStack15, Circle as Circle3 } from "tamagui";
+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 { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 function OnboardingCarousel({
   steps,
@@ -1116,13 +1175,13 @@ function OnboardingCarousel({
   skipLabel = "Skip",
   nextLabel = "Next"
 }) {
-  const [current, setCurrent] = useState5(0);
+  const [current, setCurrent] = useState6(0);
   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 }) }) }),
     /* @__PURE__ */ jsxs14(YStack15, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$5", paddingHorizontal: "$4", children: [
-      step?.icon && /* @__PURE__ */ jsx21(Circle3, { size: 120, backgroundColor: "$color2", alignItems: "center", justifyContent: "center", children: step.icon }),
+      step?.icon && /* @__PURE__ */ jsx21(Circle2, { size: 120, backgroundColor: "$color2", alignItems: "center", justifyContent: "center", children: step.icon }),
       /* @__PURE__ */ jsxs14(YStack15, { gap: "$3", alignItems: "center", children: [
         /* @__PURE__ */ jsx21(SizableText18, { size: "$9", fontWeight: "700", textAlign: "center", children: step?.title }),
         /* @__PURE__ */ jsx21(SizableText18, { size: "$4", color: "$color10", textAlign: "center", maxWidth: 300, children: step?.description })
@@ -1130,7 +1189,7 @@ function OnboardingCarousel({
     ] }),
     /* @__PURE__ */ jsxs14(YStack15, { gap: "$3", paddingBottom: "$2", children: [
       /* @__PURE__ */ jsx21(XStack11, { justifyContent: "center", gap: "$2", children: steps.map((_, i) => /* @__PURE__ */ jsx21(
-        Circle3,
+        Circle2,
         {
           size: 8,
           backgroundColor: i === current ? "$color9" : "$color4",
@@ -1156,7 +1215,7 @@ function OnboardingCarousel({
 }
 
 // src/patterns/ChatBubble.tsx
-import { SizableText as SizableText19, XStack as XStack12, YStack as YStack16, Circle as Circle4, Image as Image3 } from "tamagui";
+import { SizableText as SizableText19, XStack as XStack12, YStack as YStack16, Circle as Circle3, 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";
@@ -1168,7 +1227,7 @@ function ChatBubble({ message, showAvatar = true }) {
       gap: "$2",
       flexDirection: isUser ? "row-reverse" : "row",
       children: [
-        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() ?? "?" }) }),
+        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() ?? "?" }) }),
         /* @__PURE__ */ jsxs15(
           YStack16,
           {
@@ -1267,11 +1326,11 @@ function EmptyState({ icon, title, description, actionLabel, onAction }) {
 }
 
 // src/patterns/ProfileHeader.tsx
-import { Circle as Circle5, Image as Image4, SizableText as SizableText22, XStack as XStack14, YStack as YStack19 } from "tamagui";
+import { Circle as Circle4, 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(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__ */ 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__ */ 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 })
@@ -1316,7 +1375,7 @@ function AppHeader({ title, subtitle, variant = "simple", onBack, avatar, left,
 
 // src/patterns/BottomSheet.tsx
 import { Sheet, SizableText as SizableText24, XStack as XStack16, YStack as YStack21 } from "tamagui";
-import { ScrollView as ScrollView2 } from "react-native";
+import { ScrollView as ScrollView3 } from "react-native";
 import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
 function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], dismissOnSnapToBottom = true, showHandle = true, showClose = false, zIndex = 1e5 }) {
   return /* @__PURE__ */ jsxs20(
@@ -1351,7 +1410,7 @@ function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], d
               }
             )
           ] }),
-          /* @__PURE__ */ jsx27(ScrollView2, { contentContainerStyle: { paddingBottom: 40 }, children: /* @__PURE__ */ jsx27(YStack21, { padding: "$4", children }) })
+          /* @__PURE__ */ jsx27(ScrollView3, { contentContainerStyle: { paddingBottom: 40 }, children: /* @__PURE__ */ jsx27(YStack21, { padding: "$4", children }) })
         ] })
       ]
     }
@@ -1359,12 +1418,12 @@ function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], d
 }
 
 // src/patterns/LoginScreen.tsx
-import { useState as useState6 } from "react";
+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 }) {
-  const [email, setEmail] = useState6("");
-  const [password, setPassword] = useState6("");
+  const [email, setEmail] = useState7("");
+  const [password, setPassword] = useState7("");
   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 }),
@@ -1620,7 +1679,7 @@ function NotificationBanner({ title, message, variant = "info", onPress, onDismi
 }
 
 // src/patterns/ProgressSteps.tsx
-import { Circle as Circle6, SizableText as SizableText31, XStack as XStack23, YStack as YStack27 } from "tamagui";
+import { Circle as Circle5, 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") {
@@ -1632,7 +1691,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(Circle6, { 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(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(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" })
@@ -1640,11 +1699,11 @@ function ProgressSteps({ steps, currentStep, variant = "dots" }) {
 }
 
 // src/patterns/SwipeableRow.tsx
-import { useState as useState7 } from "react";
+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";
 function SwipeableRow({ children, leftActions, rightActions }) {
-  const [showActions, setShowActions] = useState7(false);
+  const [showActions, setShowActions] = useState8(false);
   const actions = [...leftActions ?? [], ...rightActions ?? []];
   if (actions.length === 0) return /* @__PURE__ */ jsx36(Fragment2, { children });
   return /* @__PURE__ */ jsxs28(YStack28, { children: [
@@ -1719,17 +1778,17 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
 }
 
 // src/patterns/Carousel.tsx
-import { Children as Children2, useState as useState8 } from "react";
-import { Circle as Circle7, XStack as XStack26, YStack as YStack30 } from "tamagui";
-import { ScrollView as ScrollView3 } from "react-native";
+import { Children as Children2, useState as useState9 } from "react";
+import { Circle as Circle6, 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 }) {
-  const [activeIndex, setActiveIndex] = useState8(0);
+  const [activeIndex, setActiveIndex] = useState9(0);
   const count = Children2.count(children);
   const gapPx = gap === "$2" ? 8 : gap === "$3" ? 12 : 16;
   return /* @__PURE__ */ jsxs30(YStack30, { gap: "$3", children: [
     /* @__PURE__ */ jsx38(
-      ScrollView3,
+      ScrollView4,
       {
         horizontal: true,
         showsHorizontalScrollIndicator: false,
@@ -1742,17 +1801,17 @@ 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(Circle7, { 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(Circle6, { size: 6, backgroundColor: i === activeIndex ? "$color9" : "$color4", animation: "quick" }, i)) })
   ] });
 }
 
 // src/patterns/PullToRefresh.tsx
 import { YStack as YStack31 } from "tamagui";
-import { RefreshControl, ScrollView as ScrollView4 } from "react-native";
+import { RefreshControl, ScrollView as ScrollView5 } from "react-native";
 import { jsx as jsx39 } from "react/jsx-runtime";
 function PullToRefresh({ children, onRefresh, refreshing = false }) {
   return /* @__PURE__ */ jsx39(
-    ScrollView4,
+    ScrollView5,
     {
       contentContainerStyle: { flexGrow: 1 },
       refreshControl: /* @__PURE__ */ jsx39(RefreshControl, { refreshing, onRefresh }),
@@ -1760,17 +1819,849 @@ function PullToRefresh({ children, onRefresh, refreshing = false }) {
     }
   );
 }
+
+// src/patterns/ProductCard.tsx
+import { Button as Button8, Image as Image6, SizableText as SizableText34, XStack as XStack27, YStack as YStack32 } from "tamagui";
+import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
+function Stars({ rating = 0 }) {
+  return /* @__PURE__ */ jsx40(XStack27, { gap: "$0.5", children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx40(SizableText34, { size: "$2", color: i < Math.round(rating) ? "$yellow9" : "$color5", children: "\u2605" }, i)) });
+}
+function CardContent2({ title, price, originalPrice, rating, reviewCount, onAddToCart }) {
+  return /* @__PURE__ */ jsxs31(YStack32, { flex: 1, gap: "$1.5", justifyContent: "space-between", children: [
+    /* @__PURE__ */ jsxs31(YStack32, { gap: "$1", children: [
+      /* @__PURE__ */ jsx40(SizableText34, { size: "$4", fontWeight: "600", numberOfLines: 2, children: title }),
+      rating !== void 0 && /* @__PURE__ */ jsxs31(XStack27, { gap: "$1.5", alignItems: "center", children: [
+        /* @__PURE__ */ jsx40(Stars, { rating }),
+        reviewCount !== void 0 && /* @__PURE__ */ jsxs31(SizableText34, { size: "$2", color: "$color9", children: [
+          "(",
+          reviewCount,
+          ")"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs31(XStack27, { alignItems: "center", justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsxs31(XStack27, { gap: "$2", alignItems: "baseline", children: [
+        /* @__PURE__ */ jsx40(SizableText34, { size: "$6", fontWeight: "700", children: price }),
+        originalPrice && /* @__PURE__ */ jsx40(SizableText34, { size: "$3", color: "$color8", textDecorationLine: "line-through", children: originalPrice })
+      ] }),
+      onAddToCart && /* @__PURE__ */ jsx40(
+        Button8,
+        {
+          size: "$3",
+          backgroundColor: "$color9",
+          color: "$color1",
+          borderRadius: "$10",
+          onPress: (e) => {
+            e.stopPropagation?.();
+            onAddToCart();
+          },
+          pressStyle: { backgroundColor: "$color8", scale: 0.95 },
+          animation: "quick",
+          children: "+ Cart"
+        }
+      )
+    ] })
+  ] });
+}
+function ProductCard({ image, title, price, originalPrice, rating, reviewCount, badge, onPress, onAddToCart, variant = "vertical" }) {
+  const isHorizontal = variant === "horizontal";
+  const Wrapper = isHorizontal ? XStack27 : YStack32;
+  return /* @__PURE__ */ jsxs31(
+    Wrapper,
+    {
+      backgroundColor: "$color1",
+      borderRadius: "$5",
+      overflow: "hidden",
+      borderWidth: 1,
+      borderColor: "$color4",
+      onPress,
+      animation: "quick",
+      pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
+      ...isHorizontal ? { height: 140 } : {},
+      children: [
+        /* @__PURE__ */ jsxs31(YStack32, { ...isHorizontal ? { width: 140 } : { aspectRatio: 4 / 3 }, position: "relative", children: [
+          /* @__PURE__ */ jsx40(Image6, { source: { uri: image }, width: "100%", height: "100%", objectFit: "cover" }),
+          badge && /* @__PURE__ */ jsx40(
+            XStack27,
+            {
+              position: "absolute",
+              top: "$2",
+              left: "$2",
+              backgroundColor: "$red9",
+              paddingHorizontal: "$2",
+              paddingVertical: "$1",
+              borderRadius: "$10",
+              children: /* @__PURE__ */ jsx40(SizableText34, { size: "$1", fontWeight: "700", color: "white", children: badge })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx40(YStack32, { flex: 1, padding: "$3", children: /* @__PURE__ */ jsx40(CardContent2, { ...{ title, price, originalPrice, rating, reviewCount, onAddToCart } }) })
+      ]
+    }
+  );
+}
+
+// src/patterns/PricingTable.tsx
+import { Button as Button9, ScrollView as ScrollView6, SizableText as SizableText35, XStack as XStack28, YStack as YStack33 } from "tamagui";
+import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
+function BillingToggle({ annual, onToggle }) {
+  return /* @__PURE__ */ jsx41(XStack28, { alignSelf: "center", backgroundColor: "$color3", borderRadius: "$10", padding: "$1", gap: "$0.5", children: ["Monthly", "Annual"].map((label, i) => {
+    const active = i === 1 ? annual : !annual;
+    return /* @__PURE__ */ jsx41(
+      XStack28,
+      {
+        paddingHorizontal: "$4",
+        paddingVertical: "$2",
+        borderRadius: "$10",
+        backgroundColor: active ? "$color9" : "transparent",
+        onPress: () => onToggle(i === 1),
+        pressStyle: { opacity: 0.8 },
+        animation: "quick",
+        children: /* @__PURE__ */ jsx41(SizableText35, { size: "$3", fontWeight: "600", color: active ? "$color1" : "$color10", children: label })
+      },
+      label
+    );
+  }) });
+}
+function PlanCard2({ plan, selected, onSelect }) {
+  return /* @__PURE__ */ jsxs32(
+    YStack33,
+    {
+      flex: 1,
+      minWidth: 260,
+      padding: "$4",
+      borderRadius: "$5",
+      gap: "$3",
+      borderWidth: 2,
+      borderColor: selected ? "$color9" : plan.popular ? "$color9" : "$color4",
+      backgroundColor: plan.popular ? "$color2" : "$color1",
+      position: "relative",
+      pressStyle: { scale: 0.98 },
+      animation: "quick",
+      onPress: onSelect,
+      children: [
+        plan.popular && /* @__PURE__ */ jsx41(
+          XStack28,
+          {
+            position: "absolute",
+            top: -12,
+            alignSelf: "center",
+            backgroundColor: "$color9",
+            paddingHorizontal: "$3",
+            paddingVertical: "$1",
+            borderRadius: "$10",
+            children: /* @__PURE__ */ jsx41(SizableText35, { size: "$1", fontWeight: "700", color: "$color1", children: "POPULAR" })
+          }
+        ),
+        /* @__PURE__ */ jsxs32(YStack33, { gap: "$1", alignItems: "center", paddingTop: plan.popular ? "$2" : 0, children: [
+          /* @__PURE__ */ jsx41(SizableText35, { size: "$4", fontWeight: "600", color: "$color11", children: plan.name }),
+          plan.description && /* @__PURE__ */ jsx41(SizableText35, { size: "$2", color: "$color9", textAlign: "center", children: plan.description }),
+          /* @__PURE__ */ jsxs32(XStack28, { alignItems: "baseline", gap: "$1", children: [
+            /* @__PURE__ */ jsx41(SizableText35, { size: "$9", fontWeight: "800", children: plan.price }),
+            plan.period && /* @__PURE__ */ jsxs32(SizableText35, { size: "$3", color: "$color9", children: [
+              "/",
+              plan.period
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx41(YStack33, { gap: "$2", flex: 1, children: plan.features.map((f, i) => /* @__PURE__ */ jsxs32(XStack28, { gap: "$2", alignItems: "center", children: [
+          /* @__PURE__ */ jsx41(SizableText35, { size: "$3", color: f.included ? "$green9" : "$color6", children: f.included ? "\u2713" : "\u2717" }),
+          /* @__PURE__ */ jsx41(SizableText35, { size: "$3", color: f.included ? "$color11" : "$color8", flex: 1, children: f.label })
+        ] }, i)) }),
+        /* @__PURE__ */ jsx41(
+          Button9,
+          {
+            size: "$4",
+            borderRadius: "$10",
+            fontWeight: "700",
+            animation: "quick",
+            backgroundColor: selected || plan.popular ? "$color9" : "transparent",
+            color: selected || plan.popular ? "$color1" : "$color11",
+            borderWidth: selected || plan.popular ? 0 : 1,
+            borderColor: "$color7",
+            onPress: onSelect,
+            pressStyle: { scale: 0.97, opacity: 0.9 },
+            children: plan.cta ?? "Get Started"
+          }
+        )
+      ]
+    }
+  );
+}
+function PricingTable({ plans, selectedPlan, onSelectPlan, annual = false, onToggleBilling }) {
+  const selected = selectedPlan ?? plans.find((p) => p.popular)?.id;
+  return /* @__PURE__ */ jsxs32(YStack33, { gap: "$4", children: [
+    onToggleBilling && /* @__PURE__ */ jsx41(BillingToggle, { annual, onToggle: onToggleBilling }),
+    /* @__PURE__ */ jsx41(
+      ScrollView6,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: { gap: 12, paddingHorizontal: 4 },
+        children: plans.map((plan) => /* @__PURE__ */ jsx41(
+          PlanCard2,
+          {
+            plan,
+            selected: selected === plan.id,
+            onSelect: () => onSelectPlan?.(plan.id)
+          },
+          plan.id
+        ))
+      }
+    )
+  ] });
+}
+
+// src/patterns/CountdownBanner.tsx
+import { useState as useState10, useEffect as useEffect4, useRef, useCallback as useCallback2 } from "react";
+import { SizableText as SizableText36, XStack as XStack29, YStack as YStack34 } from "tamagui";
+import { jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
+function useCountdown2(endTime, minutes, onExpire) {
+  const getRemaining = useCallback2(() => {
+    if (endTime) return Math.max(0, Math.floor((endTime.getTime() - Date.now()) / 1e3));
+    return 0;
+  }, [endTime]);
+  const [seconds, setSeconds] = useState10(() => endTime ? getRemaining() : (minutes ?? 0) * 60);
+  const firedRef = useRef(false);
+  useEffect4(() => {
+    if (endTime) setSeconds(getRemaining());
+    else setSeconds((minutes ?? 0) * 60);
+    firedRef.current = false;
+  }, [endTime, minutes, getRemaining]);
+  useEffect4(() => {
+    if (seconds <= 0) return;
+    const id = setInterval(() => {
+      setSeconds((s) => {
+        const next = endTime ? Math.max(0, Math.floor((endTime.getTime() - Date.now()) / 1e3)) : s - 1;
+        if (next <= 0 && !firedRef.current) {
+          firedRef.current = true;
+          onExpire?.();
+        }
+        return Math.max(0, next);
+      });
+    }, 1e3);
+    return () => clearInterval(id);
+  }, [seconds > 0, endTime, onExpire]);
+  const hh = String(Math.floor(seconds / 3600)).padStart(2, "0");
+  const mm = String(Math.floor(seconds % 3600 / 60)).padStart(2, "0");
+  const ss = String(seconds % 60).padStart(2, "0");
+  const display = seconds >= 3600 ? `${hh}:${mm}:${ss}` : `${mm}:${ss}`;
+  return { display, expired: seconds <= 0 };
+}
+function TimeBox({ value }) {
+  return /* @__PURE__ */ jsx42(XStack29, { backgroundColor: "rgba(0,0,0,0.15)", paddingHorizontal: "$2", paddingVertical: "$1", borderRadius: "$3", children: /* @__PURE__ */ jsx42(SizableText36, { size: "$6", fontWeight: "800", color: "white", fontFamily: "$mono", children: value }) });
+}
+function CountdownBanner({ endTime, minutes, label = "Offer ends in", onExpire, variant = "banner" }) {
+  const { display, expired } = useCountdown2(endTime, minutes, onExpire);
+  if (expired) return null;
+  const parts = display.split(":");
+  if (variant === "badge") {
+    return /* @__PURE__ */ jsxs33(XStack29, { backgroundColor: "$red9", paddingHorizontal: "$2.5", paddingVertical: "$1", borderRadius: "$10", gap: "$1.5", alignItems: "center", children: [
+      /* @__PURE__ */ jsx42(SizableText36, { size: "$1", fontWeight: "600", color: "white", children: label }),
+      /* @__PURE__ */ jsx42(SizableText36, { size: "$2", fontWeight: "800", color: "white", fontFamily: "$mono", children: display })
+    ] });
+  }
+  if (variant === "compact") {
+    return /* @__PURE__ */ jsxs33(XStack29, { backgroundColor: "$red3", paddingHorizontal: "$3", paddingVertical: "$2", borderRadius: "$4", gap: "$2", alignItems: "center", alignSelf: "center", children: [
+      /* @__PURE__ */ jsx42(SizableText36, { size: "$3", fontWeight: "600", color: "$red9", children: label }),
+      /* @__PURE__ */ jsx42(SizableText36, { size: "$5", fontWeight: "800", color: "$red9", fontFamily: "$mono", children: display })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs33(YStack34, { backgroundColor: "$red9", paddingVertical: "$3", paddingHorizontal: "$4", gap: "$1.5", alignItems: "center", children: [
+    /* @__PURE__ */ jsx42(SizableText36, { size: "$3", fontWeight: "600", color: "white", opacity: 0.9, children: label }),
+    /* @__PURE__ */ jsx42(XStack29, { gap: "$1.5", alignItems: "center", children: parts.map((p, i) => /* @__PURE__ */ jsxs33(XStack29, { gap: "$1.5", alignItems: "center", children: [
+      i > 0 && /* @__PURE__ */ jsx42(SizableText36, { size: "$6", fontWeight: "800", color: "white", children: ":" }),
+      /* @__PURE__ */ jsx42(TimeBox, { value: p })
+    ] }, i)) })
+  ] });
+}
+
+// src/patterns/TestimonialCard.tsx
+import { Image as Image7, SizableText as SizableText37, XStack as XStack30, YStack as YStack35 } from "tamagui";
+import { jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
+function Stars2({ count = 0 }) {
+  if (!count) return null;
+  return /* @__PURE__ */ jsx43(XStack30, { gap: "$0.5", children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx43(SizableText37, { size: "$3", color: i < Math.round(count) ? "$yellow9" : "$color5", children: "\u2605" }, i)) });
+}
+function AuthorRow({ author, role, avatar }) {
+  return /* @__PURE__ */ jsxs34(XStack30, { gap: "$2.5", alignItems: "center", children: [
+    avatar && /* @__PURE__ */ jsx43(Image7, { source: { uri: avatar }, width: 36, height: 36, borderRadius: 18, objectFit: "cover" }),
+    /* @__PURE__ */ jsxs34(YStack35, { children: [
+      /* @__PURE__ */ jsx43(SizableText37, { size: "$3", fontWeight: "600", children: author }),
+      role && /* @__PURE__ */ jsx43(SizableText37, { size: "$2", color: "$color9", children: role })
+    ] })
+  ] });
+}
+function TestimonialCard({ quote, author, role, avatar, rating, variant = "card" }) {
+  if (variant === "minimal") {
+    return /* @__PURE__ */ jsxs34(YStack35, { gap: "$3", paddingVertical: "$2", children: [
+      /* @__PURE__ */ jsx43(Stars2, { count: rating }),
+      /* @__PURE__ */ jsxs34(SizableText37, { size: "$4", color: "$color11", fontStyle: "italic", lineHeight: 24, children: [
+        '"',
+        quote,
+        '"'
+      ] }),
+      /* @__PURE__ */ jsx43(AuthorRow, { author, role, avatar })
+    ] });
+  }
+  if (variant === "featured") {
+    return /* @__PURE__ */ jsxs34(YStack35, { backgroundColor: "$color3", padding: "$5", borderRadius: "$6", gap: "$4", alignItems: "center", children: [
+      /* @__PURE__ */ jsx43(SizableText37, { size: "$8", color: "$color9", opacity: 0.3, fontWeight: "800", children: '"' }),
+      /* @__PURE__ */ jsx43(Stars2, { count: rating }),
+      /* @__PURE__ */ jsxs34(SizableText37, { size: "$5", color: "$color12", fontStyle: "italic", textAlign: "center", lineHeight: 28, children: [
+        '"',
+        quote,
+        '"'
+      ] }),
+      /* @__PURE__ */ jsx43(AuthorRow, { author, role, avatar })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs34(
+    YStack35,
+    {
+      backgroundColor: "$color1",
+      padding: "$4",
+      borderRadius: "$5",
+      borderWidth: 1,
+      borderColor: "$color4",
+      gap: "$3",
+      children: [
+        /* @__PURE__ */ jsx43(Stars2, { count: rating }),
+        /* @__PURE__ */ jsxs34(SizableText37, { size: "$4", color: "$color11", fontStyle: "italic", lineHeight: 24, children: [
+          '"',
+          quote,
+          '"'
+        ] }),
+        /* @__PURE__ */ jsx43(AuthorRow, { author, role, avatar })
+      ]
+    }
+  );
+}
+
+// src/patterns/ConfirmDialog.tsx
+import { AlertDialog as AlertDialog2, Button as Button10, SizableText as SizableText38, XStack as XStack31, YStack as YStack36 } from "tamagui";
+import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  onCancel,
+  destructive = false,
+  icon
+}) {
+  const handleCancel = () => {
+    onCancel?.();
+    onOpenChange(false);
+  };
+  const handleConfirm = () => {
+    onConfirm?.();
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsx44(AlertDialog2, { open, onOpenChange, children: /* @__PURE__ */ jsxs35(AlertDialog2.Portal, { children: [
+    /* @__PURE__ */ jsx44(
+      AlertDialog2.Overlay,
+      {
+        opacity: 0.5,
+        enterStyle: { opacity: 0 },
+        exitStyle: { opacity: 0 },
+        animation: "quick"
+      },
+      "overlay"
+    ),
+    /* @__PURE__ */ jsx44(
+      AlertDialog2.Content,
+      {
+        bordered: true,
+        elevate: true,
+        width: "90%",
+        maxWidth: 400,
+        enterStyle: { y: -20, opacity: 0, scale: 0.9 },
+        exitStyle: { y: 10, opacity: 0, scale: 0.95 },
+        x: 0,
+        y: 0,
+        scale: 1,
+        opacity: 1,
+        animation: "quick",
+        children: /* @__PURE__ */ jsxs35(YStack36, { gap: "$4", padding: "$4", children: [
+          icon && /* @__PURE__ */ jsx44(YStack36, { alignItems: "center", children: icon }),
+          /* @__PURE__ */ jsxs35(YStack36, { gap: "$2", alignItems: icon ? "center" : "flex-start", children: [
+            /* @__PURE__ */ jsx44(AlertDialog2.Title, { size: "$6", fontWeight: "700", children: title }),
+            description && /* @__PURE__ */ jsx44(
+              AlertDialog2.Description,
+              {
+                size: "$3",
+                color: "$color10",
+                textAlign: icon ? "center" : "left",
+                children: description
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs35(XStack31, { gap: "$3", justifyContent: "flex-end", children: [
+            /* @__PURE__ */ jsx44(
+              Button10,
+              {
+                flex: 1,
+                size: "$4",
+                borderRadius: "$4",
+                variant: "outlined",
+                borderColor: "$color7",
+                onPress: handleCancel,
+                pressStyle: { opacity: 0.7 },
+                animation: "quick",
+                children: /* @__PURE__ */ jsx44(SizableText38, { fontWeight: "600", children: cancelLabel })
+              }
+            ),
+            /* @__PURE__ */ jsx44(
+              Button10,
+              {
+                flex: 1,
+                size: "$4",
+                borderRadius: "$4",
+                backgroundColor: destructive ? "$red9" : "$color9",
+                onPress: handleConfirm,
+                pressStyle: { backgroundColor: destructive ? "$red8" : "$color8", scale: 0.97 },
+                animation: "quick",
+                children: /* @__PURE__ */ jsx44(SizableText38, { fontWeight: "600", color: "white", children: confirmLabel })
+              }
+            )
+          ] })
+        ] })
+      },
+      "content"
+    )
+  ] }) });
+}
+
+// src/patterns/Chip.tsx
+import { useCallback as useCallback3 } from "react";
+import { SizableText as SizableText39, XStack as XStack32 } from "tamagui";
+import { jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
+var sizes2 = { sm: { h: 28, px: "$2", text: "$2" }, md: { h: 34, px: "$3", text: "$3" }, lg: { h: 42, px: "$4", text: "$4" } };
+function Chip({ label, selected, onPress, onRemove, variant = "filled", size = "md", icon, color }) {
+  const s = sizes2[size];
+  const filled = variant === "filled";
+  const active = selected ?? false;
+  const bg = active ? color ?? "$color9" : filled ? "$color3" : "transparent";
+  const border = active ? color ?? "$color9" : "$color6";
+  const fg = active ? "$color1" : "$color11";
+  return /* @__PURE__ */ jsxs36(
+    XStack32,
+    {
+      height: s.h,
+      borderRadius: "$10",
+      paddingHorizontal: s.px,
+      backgroundColor: bg,
+      borderWidth: filled ? 0 : 1,
+      borderColor: border,
+      alignItems: "center",
+      gap: "$1.5",
+      pressStyle: { scale: 0.96, opacity: 0.85 },
+      animation: "quick",
+      onPress,
+      cursor: "pointer",
+      children: [
+        active && /* @__PURE__ */ jsx45(SizableText39, { size: s.text, color: fg, children: "\u2713" }),
+        icon && /* @__PURE__ */ jsx45(SizableText39, { color: fg, children: icon }),
+        /* @__PURE__ */ jsx45(SizableText39, { size: s.text, color: fg, fontWeight: "500", children: label }),
+        onRemove && /* @__PURE__ */ jsx45(
+          SizableText39,
+          {
+            size: "$2",
+            color: fg,
+            opacity: 0.7,
+            pressStyle: { opacity: 1 },
+            onPress: (e) => {
+              e.stopPropagation?.();
+              onRemove();
+            },
+            marginLeft: "$1",
+            children: "\u2715"
+          }
+        )
+      ]
+    }
+  );
+}
+function ChipGroup({ chips, selected = [], onSelectionChange, multiSelect = true, variant, size }) {
+  const toggle = useCallback3((id) => {
+    if (!onSelectionChange) return;
+    const isSelected = selected.includes(id);
+    if (multiSelect) {
+      onSelectionChange(isSelected ? selected.filter((s) => s !== id) : [...selected, id]);
+    } else {
+      onSelectionChange(isSelected ? [] : [id]);
+    }
+  }, [selected, onSelectionChange, multiSelect]);
+  return /* @__PURE__ */ jsx45(XStack32, { flexWrap: "wrap", gap: "$2", children: chips.map((chip) => /* @__PURE__ */ jsx45(
+    Chip,
+    {
+      label: chip.label,
+      icon: chip.icon,
+      selected: selected.includes(chip.id),
+      onPress: () => toggle(chip.id),
+      variant,
+      size
+    },
+    chip.id
+  )) });
+}
+
+// src/patterns/OTPInput.tsx
+import { useCallback as useCallback4, useRef as useRef2 } from "react";
+import { Input as Input3, SizableText as SizableText40, XStack as XStack33, YStack as YStack37 } from "tamagui";
+import { jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
+function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFocus, secureEntry }) {
+  const inputRef = useRef2(null);
+  const digits = value.padEnd(length, " ").slice(0, length);
+  const handleChange = useCallback4((text) => {
+    const cleaned = text.replace(/\D/g, "").slice(0, length);
+    onChange?.(cleaned);
+    if (cleaned.length === length) onComplete?.(cleaned);
+  }, [length, onChange, onComplete]);
+  return /* @__PURE__ */ jsxs37(YStack37, { children: [
+    /* @__PURE__ */ jsx46(XStack33, { gap: "$2", justifyContent: "center", onPress: () => inputRef.current?.focus(), children: Array.from({ length }, (_, i) => {
+      const char = digits[i]?.trim();
+      const focused = value.length === i;
+      return /* @__PURE__ */ jsxs37(
+        YStack37,
+        {
+          width: 48,
+          height: 56,
+          borderRadius: "$3",
+          borderWidth: 2,
+          borderColor: error ? "$red9" : focused ? "$color9" : "$color6",
+          backgroundColor: error ? "$red2" : "$color2",
+          alignItems: "center",
+          justifyContent: "center",
+          animation: "quick",
+          children: [
+            /* @__PURE__ */ jsx46(SizableText40, { size: "$7", fontWeight: "600", color: "$color12", children: char ? secureEntry ? "\u25CF" : char : "" }),
+            focused && /* @__PURE__ */ jsx46(YStack37, { position: "absolute", bottom: 10, width: 20, height: 2, backgroundColor: "$color9", animation: "quick" })
+          ]
+        },
+        i
+      );
+    }) }),
+    /* @__PURE__ */ jsx46(
+      Input3,
+      {
+        ref: inputRef,
+        value,
+        onChangeText: handleChange,
+        keyboardType: "number-pad",
+        maxLength: length,
+        autoFocus,
+        position: "absolute",
+        opacity: 0,
+        width: 1,
+        height: 1
+      }
+    )
+  ] });
+}
+
+// src/patterns/PasswordInput.tsx
+import { useState as useState11, useCallback as useCallback5 } from "react";
+import { Input as Input4, SizableText as SizableText41, XStack as XStack34, YStack as YStack38 } from "tamagui";
+import { jsx as jsx47, jsxs as jsxs38 } from "react/jsx-runtime";
+function getStrength(pw) {
+  if (!pw) return { label: "", color: "$color6", width: "0%" };
+  const score = [pw.length >= 8, /[A-Z]/.test(pw), /[0-9]/.test(pw), /[^A-Za-z0-9]/.test(pw)].filter(Boolean).length;
+  if (score <= 1) return { label: "Weak", color: "$red9", width: "33%" };
+  if (score <= 2) return { label: "Medium", color: "$yellow9", width: "66%" };
+  return { label: "Strong", color: "$green9", width: "100%" };
+}
+function PasswordInput({ value = "", onChangeText, placeholder = "Password", label, error, size = "$4", strengthIndicator }) {
+  const [visible, setVisible] = useState11(false);
+  const toggle = useCallback5(() => setVisible((v) => !v), []);
+  const strength = getStrength(value);
+  return /* @__PURE__ */ jsxs38(YStack38, { gap: "$1.5", children: [
+    label && /* @__PURE__ */ jsx47(SizableText41, { size: "$3", color: "$color11", fontWeight: "500", children: label }),
+    /* @__PURE__ */ jsxs38(
+      XStack34,
+      {
+        borderWidth: 1,
+        borderColor: error ? "$red9" : "$color6",
+        borderRadius: "$3",
+        backgroundColor: "$color2",
+        alignItems: "center",
+        paddingRight: "$2",
+        focusStyle: { borderColor: "$color9" },
+        children: [
+          /* @__PURE__ */ jsx47(
+            Input4,
+            {
+              flex: 1,
+              size,
+              value,
+              onChangeText,
+              placeholder,
+              placeholderTextColor: "$color8",
+              secureTextEntry: !visible,
+              backgroundColor: "transparent",
+              borderWidth: 0
+            }
+          ),
+          /* @__PURE__ */ jsx47(
+            SizableText41,
+            {
+              size: "$4",
+              color: "$color8",
+              paddingHorizontal: "$2",
+              pressStyle: { opacity: 0.6 },
+              onPress: toggle,
+              cursor: "pointer",
+              children: visible ? "\u25C9" : "\u25CE"
+            }
+          )
+        ]
+      }
+    ),
+    strengthIndicator && value.length > 0 && /* @__PURE__ */ jsxs38(YStack38, { gap: "$1", children: [
+      /* @__PURE__ */ jsx47(YStack38, { height: 3, backgroundColor: "$color4", borderRadius: 2, overflow: "hidden", children: /* @__PURE__ */ jsx47(YStack38, { height: 3, width: strength.width, backgroundColor: strength.color, borderRadius: 2, animation: "quick" }) }),
+      /* @__PURE__ */ jsx47(SizableText41, { size: "$1", color: strength.color, children: strength.label })
+    ] }),
+    error && /* @__PURE__ */ jsx47(SizableText41, { size: "$2", color: "$red9", children: error })
+  ] });
+}
+
+// src/patterns/AvatarGroup.tsx
+import { Circle as Circle7, 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 "?";
+  return name.split(" ").map((p) => p[0]).join("").toUpperCase().slice(0, 2);
+}
+function AvatarItem({ uri, name, color, size }) {
+  return /* @__PURE__ */ jsx48(
+    Circle7,
+    {
+      size,
+      backgroundColor: color ?? "$color4",
+      borderWidth: 2,
+      borderColor: "$background",
+      overflow: "hidden",
+      alignItems: "center",
+      justifyContent: "center",
+      children: uri ? /* @__PURE__ */ jsx48(Image8, { source: { uri }, width: size, height: size, objectFit: "cover" }) : /* @__PURE__ */ jsx48(SizableText42, { size: "$2", fontWeight: "600", color: color ? "$color1" : "$color11", children: getInitials(name) })
+    }
+  );
+}
+function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
+  const visible = avatars.slice(0, max);
+  const remaining = avatars.length - max;
+  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,
+      {
+        size,
+        backgroundColor: "$color6",
+        borderWidth: 2,
+        borderColor: "$background",
+        alignItems: "center",
+        justifyContent: "center",
+        children: /* @__PURE__ */ jsxs39(SizableText42, { size: "$2", fontWeight: "600", color: "$color11", children: [
+          "+",
+          remaining
+        ] })
+      }
+    ) })
+  ] });
+}
+
+// src/patterns/SwipeCards.tsx
+import { useState as useState12, useCallback as useCallback6 } from "react";
+import { Circle as Circle8, 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 = [
+  { scale: 1, y: 0, opacity: 1 },
+  { scale: 0.95, y: 8, opacity: 0.9 },
+  { scale: 0.9, y: 16, opacity: 0.8 }
+];
+function SwipeCards({
+  items,
+  renderCard,
+  onSwipeLeft,
+  onSwipeRight,
+  onEmpty,
+  leftLabel = "Nope",
+  rightLabel = "Like",
+  emptyMessage = "No more cards"
+}) {
+  const [index, setIndex] = useState12(0);
+  const [exitDir, setExitDir] = useState12(null);
+  const remaining = items.slice(index);
+  const isEmpty = remaining.length === 0;
+  const handleSwipe = useCallback6((dir) => {
+    if (isEmpty) return;
+    const current = items[index];
+    setExitDir(dir);
+    const timer = setTimeout(() => {
+      setExitDir(null);
+      setIndex((i) => {
+        const next = i + 1;
+        if (next >= items.length) onEmpty?.();
+        return next;
+      });
+      dir === "left" ? onSwipeLeft?.(current) : onSwipeRight?.(current);
+    }, 250);
+    return () => clearTimeout(timer);
+  }, [isEmpty, index, items, onEmpty, onSwipeLeft, onSwipeRight]);
+  if (isEmpty) {
+    return /* @__PURE__ */ jsx49(YStack39, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$3", padding: "$4", children: /* @__PURE__ */ jsx49(SizableText43, { size: "$5", color: "$color8", children: emptyMessage }) });
+  }
+  return /* @__PURE__ */ jsxs40(YStack39, { flex: 1, gap: "$4", children: [
+    /* @__PURE__ */ jsx49(YStack39, { flex: 1, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx49(YStack39, { width: "100%", maxWidth: 340, aspectRatio: 3 / 4, position: "relative", children: remaining.slice(0, STACK_SIZE).reverse().map((item, reverseIdx) => {
+      const stackIdx = Math.min(remaining.length, STACK_SIZE) - 1 - reverseIdx;
+      const isTop = stackIdx === 0;
+      const offset = CARD_OFFSETS[stackIdx] ?? CARD_OFFSETS[2];
+      const exitX = exitDir === "left" ? -400 : exitDir === "right" ? 400 : 0;
+      const exitRotate = exitDir === "left" ? "-15deg" : exitDir === "right" ? "15deg" : "0deg";
+      return /* @__PURE__ */ jsxs40(
+        YStack39,
+        {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          animation: "quick",
+          borderRadius: "$5",
+          overflow: "hidden",
+          backgroundColor: "$background",
+          elevate: isTop,
+          shadowColor: "$shadowColor",
+          shadowRadius: isTop ? 16 : 4,
+          scale: isTop && exitDir ? 1 : offset.scale,
+          opacity: isTop && exitDir ? 0 : offset.opacity,
+          y: isTop && exitDir ? 0 : offset.y,
+          x: isTop ? exitX : 0,
+          rotate: isTop ? exitRotate : "0deg",
+          children: [
+            renderCard(item),
+            isTop && exitDir === "left" && /* @__PURE__ */ jsx49(
+              YStack39,
+              {
+                position: "absolute",
+                top: "$4",
+                right: "$4",
+                borderWidth: 3,
+                borderColor: "$red10",
+                borderRadius: "$3",
+                padding: "$2",
+                rotate: "15deg",
+                children: /* @__PURE__ */ jsx49(SizableText43, { size: "$7", fontWeight: "800", color: "$red10", children: leftLabel.toUpperCase() })
+              }
+            ),
+            isTop && exitDir === "right" && /* @__PURE__ */ jsx49(
+              YStack39,
+              {
+                position: "absolute",
+                top: "$4",
+                left: "$4",
+                borderWidth: 3,
+                borderColor: "$green10",
+                borderRadius: "$3",
+                padding: "$2",
+                rotate: "-15deg",
+                children: /* @__PURE__ */ jsx49(SizableText43, { size: "$7", fontWeight: "800", color: "$green10", children: rightLabel.toUpperCase() })
+              }
+            )
+          ]
+        },
+        item.id
+      );
+    }) }) }),
+    /* @__PURE__ */ jsxs40(XStack36, { justifyContent: "center", gap: "$6", paddingBottom: "$4", children: [
+      /* @__PURE__ */ jsx49(
+        Circle8,
+        {
+          size: 60,
+          backgroundColor: "$red3",
+          borderWidth: 2,
+          borderColor: "$red7",
+          pressStyle: { scale: 0.9, backgroundColor: "$red5" },
+          animation: "quick",
+          onPress: () => handleSwipe("left"),
+          alignItems: "center",
+          justifyContent: "center",
+          children: /* @__PURE__ */ jsx49(SizableText43, { size: "$6", color: "$red10", fontWeight: "700", children: "\u2715" })
+        }
+      ),
+      /* @__PURE__ */ jsx49(
+        Circle8,
+        {
+          size: 60,
+          backgroundColor: "$green3",
+          borderWidth: 2,
+          borderColor: "$green7",
+          pressStyle: { scale: 0.9, backgroundColor: "$green5" },
+          animation: "quick",
+          onPress: () => handleSwipe("right"),
+          alignItems: "center",
+          justifyContent: "center",
+          children: /* @__PURE__ */ jsx49(SizableText43, { size: "$6", color: "$green10", fontWeight: "700", children: "\u2665" })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/patterns/GlassCard.tsx
+import { styled as styled12, YStack as YStack40 } from "tamagui";
+import { jsx as jsx50 } from "react/jsx-runtime";
+var BLUR = { light: 8, medium: 16, heavy: 24 };
+var TINT_BG = {
+  light: "rgba(255,255,255,0.15)",
+  dark: "rgba(0,0,0,0.25)"
+};
+var GlassFrame = styled12(YStack40, {
+  borderWidth: 1,
+  borderColor: "rgba(255,255,255,0.2)",
+  overflow: "hidden"
+});
+function GlassCard({
+  children,
+  intensity = "medium",
+  tint = "light",
+  borderRadius = "$4",
+  padding = "$4",
+  elevated = false
+}) {
+  const blur = BLUR[intensity];
+  return /* @__PURE__ */ jsx50(
+    GlassFrame,
+    {
+      borderRadius,
+      padding,
+      backgroundColor: TINT_BG[tint],
+      elevate: elevated,
+      shadowColor: elevated ? "$shadowColor" : void 0,
+      shadowRadius: elevated ? 20 : void 0,
+      shadowOpacity: elevated ? 0.3 : void 0,
+      style: { backdropFilter: `blur(${blur}px)`, WebkitBackdropFilter: `blur(${blur}px)` },
+      children
+    }
+  );
+}
 export {
   Accordion,
   ActionSheet,
   Adapt,
-  AlertDialog2 as AlertDialog,
+  AlertDialog3 as AlertDialog,
   Anchor,
   AnimatePresence,
   AppHeader,
   Article,
   Aside,
   Avatar2 as Avatar,
+  AvatarGroup,
   Badge,
   BlinkAccordion,
   Avatar as BlinkAvatar,
@@ -1784,13 +2675,17 @@ export {
   BlinkToggleGroup,
   BlinkTooltip,
   BottomSheet,
-  Button8 as Button,
+  Button11 as Button,
   Card2 as Card,
   Carousel,
   ChatBubble,
   Checkbox,
-  Circle8 as Circle,
+  Chip,
+  ChipGroup,
+  Circle9 as Circle,
+  ConfirmDialog,
   Container,
+  CountdownBanner,
   Dialog,
   DialogProvider,
   Divider,
@@ -1802,6 +2697,7 @@ export {
   Form,
   FormField,
   Frame,
+  GlassCard,
   Grid,
   Group,
   H12 as H1,
@@ -1815,7 +2711,7 @@ export {
   ICONS,
   Icon,
   Image2 as Image,
-  Input3 as Input,
+  Input5 as Input,
   KeyboardStickyFooter,
   Label,
   ListItem,
@@ -1824,10 +2720,12 @@ export {
   MediaCard,
   Nav,
   NotificationBanner,
+  OTPInput,
   OnboardingCarousel,
   PageContainer,
   PageMainContainer,
   Paragraph,
+  PasswordInput,
   PaywallScreen,
   Popover2 as Popover,
   Portal,
@@ -1835,6 +2733,8 @@ export {
   PortalItem,
   PortalProvider,
   Pressable,
+  PricingTable,
+  ProductCard,
   ProfileHeader,
   Progress,
   ProgressSteps,
@@ -1842,7 +2742,7 @@ export {
   RadioGroup,
   SafeArea,
   ScreenLayout,
-  ScrollView5 as ScrollView,
+  ScrollView7 as ScrollView,
   SearchBar,
   Section,
   Select,
@@ -1851,7 +2751,7 @@ export {
   SettingsScreen,
   Sheet3 as Sheet,
   SizableStack,
-  SizableText34 as SizableText,
+  SizableText44 as SizableText,
   Skeleton,
   Slider,
   Spacer,
@@ -1860,13 +2760,15 @@ export {
   Stack,
   StepPageLayout,
   SubHeading,
+  SwipeCards,
   SwipeableRow,
   Switch2 as Switch,
   TabBar,
   Tabs,
-  Image6 as TamaguiImage,
+  Image9 as TamaguiImage,
   ListItem2 as TamaguiListItem,
   TamaguiProvider,
+  TestimonialCard,
   Text,
   TextArea,
   Theme,
@@ -1878,9 +2780,9 @@ export {
   View6 as View,
   VisuallyHidden,
   XGroup,
-  XStack27 as XStack,
+  XStack37 as XStack,
   YGroup,
-  YStack32 as YStack,
+  YStack41 as YStack,
   ZStack,
   addTheme,
   blinkConfig,
@@ -1902,7 +2804,7 @@ export {
   isWeb,
   replaceTheme,
   showError,
-  styled12 as styled,
+  styled13 as styled,
   defaultConfig2 as tamaguiDefaultConfig,
   toast,
   updateTheme,