@blinkdotnew/mobile-ui 2.0.0-alpha.5 → 2.0.0-alpha.7

package/dist/index.mjs

@@ -8,11 +8,14 @@ var blinkConfig = createTamagui({
 // src/index.ts
 import {
   View as View6,
-  XStack as XStack10,
-  YStack as YStack14,
+  XStack as XStack26,
+  YStack as YStack32,
   ZStack,
-  ScrollView,
-  Circle as Circle6,
+  ScrollView as ScrollView5,
+  Circle as Circle8,
+  Square,
+  XGroup,
+  YGroup,
   H1 as H12,
   H2 as H22,
   H3 as H32,
@@ -20,28 +23,40 @@ import {
   H5 as H52,
   H6 as H62,
   Paragraph,
-  SizableText as SizableText16,
+  SizableText as SizableText34,
   Text,
-  Button as Button6,
-  Input as Input2,
+  Label,
+  Button as Button8,
+  Input as Input3,
   TextArea,
   Switch as Switch2,
   Checkbox,
   Slider,
   RadioGroup,
   Select,
-  Label,
+  Fieldset,
   Card as Card2,
   Avatar as Avatar2,
-  Separator as Separator4,
-  Image as Image5,
+  Separator as Separator5,
+  Image as Image6,
   Progress,
-  Spinner,
-  Sheet,
+  Spinner as Spinner2,
+  ListItem as ListItem2,
+  Sheet as Sheet3,
   Dialog,
   AlertDialog as AlertDialog2,
-  Popover,
+  Popover as Popover2,
   Tooltip,
+  TooltipSimple,
+  Tabs,
+  Accordion,
+  ToggleGroup,
+  Adapt,
+  PortalProvider,
+  VisuallyHidden,
+  Unspaced,
+  Anchor,
+  Form,
   Theme,
   TamaguiProvider,
   styled as styled12,
@@ -523,23 +538,282 @@ function Badge({ children, variant = "default" }) {
   return /* @__PURE__ */ jsx5(BadgeFrame, { variant, children: /* @__PURE__ */ jsx5(BadgeText, { children }) });
 }
 
+// src/interface/Icon.tsx
+import { SizableText as SizableText6 } from "tamagui";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ICONS = {
+  home: "\u2302",
+  search: "\u2315",
+  back: "\u2039",
+  forward: "\u203A",
+  close: "\u2715",
+  menu: "\u2630",
+  more: "\u22EF",
+  plus: "+",
+  minus: "\u2212",
+  check: "\u2713",
+  star: "\u2605",
+  starOutline: "\u2606",
+  heart: "\u2665",
+  heartOutline: "\u2661",
+  share: "\u2934",
+  edit: "\u270E",
+  trash: "\u232B",
+  copy: "\u2398",
+  chat: "\u{1F4AC}",
+  mail: "\u2709",
+  bell: "\u{1F514}",
+  bellOff: "\u{1F515}",
+  send: "\u27A4",
+  play: "\u25B6",
+  pause: "\u23F8",
+  camera: "\u{1F4F7}",
+  image: "\u{1F5BC}",
+  info: "\u2139",
+  warning: "\u26A0",
+  error: "\u2715",
+  success: "\u2713",
+  loading: "\u27F3",
+  user: "\u{1F464}",
+  users: "\u{1F465}",
+  settings: "\u2699",
+  lock: "\u{1F512}",
+  unlock: "\u{1F513}",
+  arrowUp: "\u2191",
+  arrowDown: "\u2193",
+  arrowLeft: "\u2190",
+  arrowRight: "\u2192",
+  chevronUp: "\u2303",
+  chevronDown: "\u2304",
+  chevronLeft: "\u2039",
+  chevronRight: "\u203A"
+};
+function Icon({ name, size = 20, color = "$color12" }) {
+  return /* @__PURE__ */ jsx6(SizableText6, { fontSize: size, lineHeight: size, color, textAlign: "center", width: size, height: size, children: ICONS[name] });
+}
+
+// src/interface/BlinkAccordion.tsx
+import { useState as useState2 } from "react";
+import { Separator as Separator2, SizableText as SizableText7, XStack as XStack3, YStack as YStack3 } from "tamagui";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function BlinkAccordion({ items, defaultOpen, allowMultiple = false }) {
+  const [openIds, setOpenIds] = useState2(defaultOpen ?? []);
+  const toggle = (id) => {
+    setOpenIds((prev) => {
+      if (prev.includes(id)) return prev.filter((i) => i !== id);
+      return allowMultiple ? [...prev, id] : [id];
+    });
+  };
+  return /* @__PURE__ */ jsx7(YStack3, { children: items.map((item, index) => {
+    const isOpen = openIds.includes(item.id);
+    return /* @__PURE__ */ jsxs4(YStack3, { children: [
+      index > 0 && /* @__PURE__ */ jsx7(Separator2, { borderColor: "$borderColor" }),
+      /* @__PURE__ */ jsxs4(
+        XStack3,
+        {
+          paddingVertical: "$3",
+          paddingHorizontal: "$2",
+          justifyContent: "space-between",
+          alignItems: "center",
+          pressStyle: { opacity: 0.7 },
+          onPress: () => toggle(item.id),
+          cursor: "pointer",
+          children: [
+            /* @__PURE__ */ jsx7(SizableText7, { size: "$4", fontWeight: "600", children: item.title }),
+            /* @__PURE__ */ jsx7(SizableText7, { size: "$3", color: "$color10", children: isOpen ? "\u2303" : "\u2304" })
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsx7(YStack3, { paddingHorizontal: "$2", paddingBottom: "$3", children: item.content })
+    ] }, item.id);
+  }) });
+}
+
+// src/interface/BlinkTabs.tsx
+import { useState as useState3 } from "react";
+import { ScrollView } from "react-native";
+import { SizableText as SizableText8, XStack as XStack4, YStack as YStack4 } from "tamagui";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function BlinkTabs({ tabs, activeTab, onTabChange, variant = "underline" }) {
+  const [internalActive, setInternalActive] = useState3(tabs[0]?.key ?? "");
+  const current = activeTab ?? internalActive;
+  const handlePress = (key) => {
+    if (!activeTab) setInternalActive(key);
+    onTabChange?.(key);
+  };
+  return /* @__PURE__ */ jsx8(YStack4, { children: /* @__PURE__ */ jsx8(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ jsx8(XStack4, { gap: "$2", paddingHorizontal: "$2", paddingBottom: "$2", children: tabs.map((tab) => {
+    const isActive = tab.key === current;
+    return /* @__PURE__ */ jsx8(
+      YStack4,
+      {
+        paddingVertical: "$2",
+        paddingHorizontal: "$3",
+        borderRadius: variant === "pill" ? "$4" : "$0",
+        backgroundColor: variant === "pill" && isActive ? "$color9" : "transparent",
+        borderBottomWidth: variant === "underline" ? 2 : 0,
+        borderBottomColor: variant === "underline" && isActive ? "$color9" : "transparent",
+        pressStyle: { opacity: 0.7 },
+        onPress: () => handlePress(tab.key),
+        cursor: "pointer",
+        children: /* @__PURE__ */ jsx8(
+          SizableText8,
+          {
+            size: "$3",
+            fontWeight: isActive ? "600" : "400",
+            color: variant === "pill" && isActive ? "$color1" : isActive ? "$color12" : "$color10",
+            children: tab.label
+          }
+        )
+      },
+      tab.key
+    );
+  }) }) }) });
+}
+
+// src/interface/BlinkToggleGroup.tsx
+import { SizableText as SizableText9, XStack as XStack5 } from "tamagui";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var sizeMap = { sm: "$2", md: "$3", lg: "$4" };
+function BlinkToggleGroup({ options, value, onValueChange, size = "md" }) {
+  const textSize = sizeMap[size];
+  return /* @__PURE__ */ jsx9(XStack5, { borderRadius: "$4", overflow: "hidden", backgroundColor: "$color2", children: options.map((option, index) => {
+    const isActive = option.value === value;
+    return /* @__PURE__ */ jsx9(
+      XStack5,
+      {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        paddingVertical: "$2",
+        paddingHorizontal: "$3",
+        backgroundColor: isActive ? "$color9" : "$color2",
+        borderLeftWidth: index > 0 ? 1 : 0,
+        borderLeftColor: isActive ? "$color9" : "$color4",
+        pressStyle: { opacity: 0.7 },
+        onPress: () => onValueChange(option.value),
+        cursor: "pointer",
+        children: /* @__PURE__ */ jsx9(SizableText9, { size: textSize, fontWeight: isActive ? "600" : "400", color: isActive ? "$color1" : "$color11", children: option.label })
+      },
+      option.value
+    );
+  }) });
+}
+
+// src/interface/BlinkToast.tsx
+import { useState as useState4, useCallback, useEffect as useEffect2, createContext, useContext } from "react";
+import { SizableText as SizableText10, YStack as YStack5 } from "tamagui";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var ToastContext = createContext(null);
+var variantColors = {
+  default: "$color9",
+  success: "$green9",
+  error: "$red9",
+  warning: "$yellow9"
+};
+var globalToastShow = null;
+var toast = (message, variant, duration) => {
+  if (globalToastShow) globalToastShow(message, variant, duration);
+  else console.warn("BlinkToastProvider not mounted");
+};
+function BlinkToastProvider({ children }) {
+  const [toasts, setToasts] = useState4([]);
+  const show = useCallback((message, variant = "default", duration = 3e3) => {
+    const id = Math.random().toString(36).slice(2, 9);
+    setToasts((prev) => [...prev, { id, message, variant, duration }]);
+    setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), duration);
+  }, []);
+  useEffect2(() => {
+    globalToastShow = show;
+    return () => {
+      globalToastShow = null;
+    };
+  }, [show]);
+  return /* @__PURE__ */ jsxs5(ToastContext.Provider, { value: { show }, children: [
+    children,
+    /* @__PURE__ */ jsx10(YStack5, { position: "absolute", top: 60, left: 0, right: 0, alignItems: "center", gap: "$2", pointerEvents: "none", zIndex: 1e5, children: toasts.map((t) => /* @__PURE__ */ jsx10(
+      YStack5,
+      {
+        backgroundColor: variantColors[t.variant ?? "default"],
+        paddingHorizontal: "$4",
+        paddingVertical: "$2.5",
+        borderRadius: "$4",
+        enterStyle: { opacity: 0, y: -10 },
+        exitStyle: { opacity: 0, y: -10 },
+        opacity: 1,
+        y: 0,
+        animation: "quick",
+        children: /* @__PURE__ */ jsx10(SizableText10, { size: "$3", color: "white", fontWeight: "600", children: t.message })
+      },
+      t.id
+    )) })
+  ] });
+}
+function useBlinkToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useBlinkToast must be used within BlinkToastProvider");
+  return ctx;
+}
+
+// src/interface/FormField.tsx
+import { SizableText as SizableText11, YStack as YStack6 } from "tamagui";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+function FormField({ label, error, helperText, required, children }) {
+  return /* @__PURE__ */ jsxs6(YStack6, { gap: "$1.5", children: [
+    label && /* @__PURE__ */ jsxs6(SizableText11, { size: "$3", fontWeight: "600", color: "$color11", children: [
+      label,
+      required && /* @__PURE__ */ jsx11(SizableText11, { color: "$red9", children: " *" })
+    ] }),
+    children,
+    helperText && !error && /* @__PURE__ */ jsx11(SizableText11, { size: "$2", color: "$color9", children: helperText }),
+    error && /* @__PURE__ */ jsx11(SizableText11, { size: "$2", color: "$red9", children: error })
+  ] });
+}
+
+// src/interface/Tooltip.tsx
+import { Popover, SizableText as SizableText12 } from "tamagui";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+function BlinkTooltip({ content, children, side = "top" }) {
+  return /* @__PURE__ */ jsxs7(Popover, { size: "$2", placement: side, children: [
+    /* @__PURE__ */ jsx12(Popover.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxs7(
+      Popover.Content,
+      {
+        backgroundColor: "$color11",
+        borderRadius: "$2",
+        paddingHorizontal: "$2.5",
+        paddingVertical: "$1.5",
+        elevate: true,
+        enterStyle: { opacity: 0, y: side === "bottom" ? -4 : 4 },
+        exitStyle: { opacity: 0, y: side === "bottom" ? -4 : 4 },
+        opacity: 1,
+        y: 0,
+        animation: "quick",
+        children: [
+          /* @__PURE__ */ jsx12(Popover.Arrow, { backgroundColor: "$color11", size: "$1" }),
+          /* @__PURE__ */ jsx12(SizableText12, { size: "$2", color: "$color1", children: content })
+        ]
+      }
+    )
+  ] });
+}
+
 // src/layouts/StepPageLayout.tsx
-import { SizableText as SizableText6, YStack as YStack3 } from "tamagui";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { SizableText as SizableText13, YStack as YStack7 } from "tamagui";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function StepPageLayout({ title, description, children, bottom }) {
-  return /* @__PURE__ */ jsxs4(YStack3, { flex: 1, padding: "$4", maxWidth: 500, marginHorizontal: "auto", width: "100%", children: [
-    /* @__PURE__ */ jsx6(YStack3, { gap: "$5", children: /* @__PURE__ */ jsxs4(YStack3, { gap: "$2", children: [
-      /* @__PURE__ */ jsx6(SizableText6, { size: "$8", fontWeight: "700", children: title }),
-      description && /* @__PURE__ */ jsx6(SizableText6, { size: "$5", fontWeight: "400", color: "$color10", children: description })
+  return /* @__PURE__ */ jsxs8(YStack7, { flex: 1, padding: "$4", maxWidth: 500, marginHorizontal: "auto", width: "100%", children: [
+    /* @__PURE__ */ jsx13(YStack7, { gap: "$5", children: /* @__PURE__ */ jsxs8(YStack7, { gap: "$2", children: [
+      /* @__PURE__ */ jsx13(SizableText13, { size: "$8", fontWeight: "700", children: title }),
+      description && /* @__PURE__ */ jsx13(SizableText13, { size: "$5", fontWeight: "400", color: "$color10", children: description })
     ] }) }),
-    /* @__PURE__ */ jsx6(YStack3, { paddingTop: "$5", gap: "$4", children }),
-    bottom && /* @__PURE__ */ jsx6(YStack3, { paddingTop: "$4", children: bottom })
+    /* @__PURE__ */ jsx13(YStack7, { paddingTop: "$5", gap: "$4", children }),
+    bottom && /* @__PURE__ */ jsx13(YStack7, { paddingTop: "$4", children: bottom })
   ] });
 }
 
 // src/layouts/ScreenLayout.tsx
-import { styled as styled10, YStack as YStack4 } from "tamagui";
-var ScreenLayout = styled10(YStack4, {
+import { styled as styled10, YStack as YStack8 } from "tamagui";
+var ScreenLayout = styled10(YStack8, {
   name: "BlinkScreenLayout",
   flex: 1,
   backgroundColor: "$background",
@@ -557,22 +831,22 @@ var ScreenLayout = styled10(YStack4, {
 });
 
 // src/layouts/Section.tsx
-import { SizableText as SizableText7, YStack as YStack5 } from "tamagui";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { SizableText as SizableText14, YStack as YStack9 } from "tamagui";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function Section({ title, description, children, gap = "$3" }) {
-  return /* @__PURE__ */ jsxs5(YStack5, { gap, children: [
-    title && /* @__PURE__ */ jsxs5(YStack5, { gap: "$1", children: [
-      /* @__PURE__ */ jsx7(SizableText7, { size: "$5", fontWeight: "600", color: "$color12", children: title }),
-      description && /* @__PURE__ */ jsx7(SizableText7, { size: "$3", color: "$color9", children: description })
+  return /* @__PURE__ */ jsxs9(YStack9, { gap, children: [
+    title && /* @__PURE__ */ jsxs9(YStack9, { gap: "$1", children: [
+      /* @__PURE__ */ jsx14(SizableText14, { size: "$5", fontWeight: "600", color: "$color12", children: title }),
+      description && /* @__PURE__ */ jsx14(SizableText14, { size: "$3", color: "$color9", children: description })
     ] }),
     children
   ] });
 }
 
 // src/layouts/ListItem.tsx
-import { styled as styled11, SizableText as SizableText8, XStack as XStack3, YStack as YStack6, View as View5 } from "tamagui";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var ListItemFrame = styled11(XStack3, {
+import { styled as styled11, SizableText as SizableText15, XStack as XStack6, YStack as YStack10, View as View5 } from "tamagui";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var ListItemFrame = styled11(XStack6, {
   name: "BlinkListItem",
   alignItems: "center",
   gap: "$3",
@@ -589,38 +863,67 @@ var ListItemFrame = styled11(XStack3, {
   }
 });
 function ListItem({ icon, title, subtitle, right, onPress }) {
-  return /* @__PURE__ */ jsxs6(ListItemFrame, { pressable: !!onPress, onPress, children: [
-    icon && /* @__PURE__ */ jsx8(View5, { children: icon }),
-    /* @__PURE__ */ jsxs6(YStack6, { flex: 1, gap: "$1", children: [
-      /* @__PURE__ */ jsx8(SizableText8, { size: "$4", fontWeight: "500", color: "$color12", children: title }),
-      subtitle && /* @__PURE__ */ jsx8(SizableText8, { size: "$2", color: "$color9", children: subtitle })
+  return /* @__PURE__ */ jsxs10(ListItemFrame, { pressable: !!onPress, onPress, children: [
+    icon && /* @__PURE__ */ jsx15(View5, { children: icon }),
+    /* @__PURE__ */ jsxs10(YStack10, { flex: 1, gap: "$1", children: [
+      /* @__PURE__ */ jsx15(SizableText15, { size: "$4", fontWeight: "500", color: "$color12", children: title }),
+      subtitle && /* @__PURE__ */ jsx15(SizableText15, { size: "$2", color: "$color9", children: subtitle })
     ] }),
     right
   ] });
 }
 
 // src/layouts/Divider.tsx
-import { Separator as Separator2, SizableText as SizableText9, XStack as XStack4 } from "tamagui";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Separator as Separator3, SizableText as SizableText16, XStack as XStack7 } from "tamagui";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 function Divider({ label }) {
-  if (!label) return /* @__PURE__ */ jsx9(Separator2, { borderColor: "$color4" });
-  return /* @__PURE__ */ jsxs7(XStack4, { alignItems: "center", gap: "$3", children: [
-    /* @__PURE__ */ jsx9(Separator2, { flex: 1, borderColor: "$color4" }),
-    /* @__PURE__ */ jsx9(SizableText9, { size: "$2", color: "$color9", children: label }),
-    /* @__PURE__ */ jsx9(Separator2, { flex: 1, borderColor: "$color4" })
+  if (!label) return /* @__PURE__ */ jsx16(Separator3, { borderColor: "$color4" });
+  return /* @__PURE__ */ jsxs11(XStack7, { alignItems: "center", gap: "$3", children: [
+    /* @__PURE__ */ jsx16(Separator3, { flex: 1, borderColor: "$color4" }),
+    /* @__PURE__ */ jsx16(SizableText16, { size: "$2", color: "$color9", children: label }),
+    /* @__PURE__ */ jsx16(Separator3, { flex: 1, borderColor: "$color4" })
   ] });
 }
 
 // src/layouts/KeyboardStickyFooter.tsx
-import { YStack as YStack7 } from "tamagui";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { YStack as YStack11 } from "tamagui";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function KeyboardStickyFooter({ children, offset }) {
-  return /* @__PURE__ */ jsx10(YStack7, { maxWidth: 500, alignSelf: "center", paddingTop: "$8", paddingBottom: "$4", style: { paddingBottom: offset }, children });
+  return /* @__PURE__ */ jsx17(YStack11, { maxWidth: 500, alignSelf: "center", paddingTop: "$8", paddingBottom: "$4", style: { paddingBottom: offset }, children });
+}
+
+// src/layouts/SafeArea.tsx
+import { YStack as YStack12 } from "tamagui";
+import { jsx as jsx18 } from "react/jsx-runtime";
+function SafeArea({ children, edges = ["top", "bottom"] }) {
+  return /* @__PURE__ */ jsx18(
+    YStack12,
+    {
+      flex: 1,
+      backgroundColor: "$background",
+      paddingTop: edges.includes("top") ? "$6" : void 0,
+      paddingBottom: edges.includes("bottom") ? "$6" : void 0,
+      paddingLeft: edges.includes("left") ? "$4" : void 0,
+      paddingRight: edges.includes("right") ? "$4" : void 0,
+      children
+    }
+  );
+}
+
+// src/layouts/Grid.tsx
+import { XStack as XStack8, YStack as YStack13 } from "tamagui";
+import { jsx as jsx19 } from "react/jsx-runtime";
+function Grid({ children, columns = 2, gap = "$3" }) {
+  const childWidth = `${100 / columns}%`;
+  return /* @__PURE__ */ jsx19(XStack8, { flexWrap: "wrap", gap, children: Array.isArray(children) ? children.map((child, i) => /* @__PURE__ */ jsx19(YStack13, { width: childWidth, flexBasis: childWidth, children: child }, i)) : children });
+}
+function Container({ children, maxWidth = 500, centered = true }) {
+  return /* @__PURE__ */ jsx19(YStack13, { width: "100%", maxWidth, alignSelf: centered ? "center" : void 0, children });
 }
 
 // src/patterns/PaywallScreen.tsx
-import { Button as Button3, SizableText as SizableText10, XStack as XStack5, YStack as YStack8, Circle as Circle2 } from "tamagui";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Button as Button3, SizableText as SizableText17, XStack as XStack9, YStack as YStack14, Circle as Circle2 } from "tamagui";
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 function PaywallScreen({
   title = "Upgrade Your Experience",
   subtitle = "Choose the plan that works for you",
@@ -631,13 +934,13 @@ function PaywallScreen({
   onRestore,
   continueLabel = "Continue"
 }) {
-  return /* @__PURE__ */ jsxs8(YStack8, { flex: 1, padding: "$4", gap: "$5", backgroundColor: "$background", children: [
-    /* @__PURE__ */ jsxs8(YStack8, { gap: "$2", paddingTop: "$6", children: [
-      /* @__PURE__ */ jsx11(SizableText10, { size: "$9", fontWeight: "700", textAlign: "center", children: title }),
-      /* @__PURE__ */ jsx11(SizableText10, { size: "$4", color: "$color10", textAlign: "center", children: subtitle })
+  return /* @__PURE__ */ jsxs12(YStack14, { flex: 1, padding: "$4", gap: "$5", backgroundColor: "$background", children: [
+    /* @__PURE__ */ jsxs12(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__ */ jsx11(YStack8, { gap: "$3", flex: 1, children: plans.map((plan) => /* @__PURE__ */ jsxs8(
-      YStack8,
+    /* @__PURE__ */ jsx20(YStack14, { gap: "$3", flex: 1, children: plans.map((plan) => /* @__PURE__ */ jsxs12(
+      YStack14,
       {
         padding: "$4",
         borderRadius: "$5",
@@ -648,29 +951,29 @@ function PaywallScreen({
         onPress: () => onSelectPlan?.(plan.id),
         cursor: "pointer",
         children: [
-          /* @__PURE__ */ jsxs8(XStack5, { justifyContent: "space-between", alignItems: "center", children: [
-            /* @__PURE__ */ jsxs8(YStack8, { children: [
-              /* @__PURE__ */ jsx11(SizableText10, { size: "$5", fontWeight: "600", children: plan.name }),
-              /* @__PURE__ */ jsxs8(XStack5, { alignItems: "baseline", gap: "$1", children: [
-                /* @__PURE__ */ jsx11(SizableText10, { size: "$8", fontWeight: "700", children: plan.price }),
-                /* @__PURE__ */ jsxs8(SizableText10, { size: "$3", color: "$color9", children: [
+          /* @__PURE__ */ jsxs12(XStack9, { justifyContent: "space-between", alignItems: "center", children: [
+            /* @__PURE__ */ jsxs12(YStack14, { children: [
+              /* @__PURE__ */ jsx20(SizableText17, { size: "$5", fontWeight: "600", children: plan.name }),
+              /* @__PURE__ */ jsxs12(XStack9, { alignItems: "baseline", gap: "$1", children: [
+                /* @__PURE__ */ jsx20(SizableText17, { size: "$8", fontWeight: "700", children: plan.price }),
+                /* @__PURE__ */ jsxs12(SizableText17, { size: "$3", color: "$color9", children: [
                   "/",
                   plan.period
                 ] })
               ] })
             ] }),
-            plan.popular && /* @__PURE__ */ jsx11(YStack8, { backgroundColor: "$color9", paddingHorizontal: "$2", paddingVertical: "$1", borderRadius: "$10", children: /* @__PURE__ */ jsx11(SizableText10, { size: "$1", color: "$color1", fontWeight: "600", children: "POPULAR" }) })
+            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__ */ jsx11(YStack8, { gap: "$2", paddingTop: "$3", children: plan.features.map((feature, i) => /* @__PURE__ */ jsxs8(XStack5, { gap: "$2", alignItems: "center", children: [
-            /* @__PURE__ */ jsx11(Circle2, { size: 6, backgroundColor: "$green9" }),
-            /* @__PURE__ */ jsx11(SizableText10, { size: "$3", color: "$color11", children: feature })
+          /* @__PURE__ */ jsx20(YStack14, { gap: "$2", paddingTop: "$3", children: plan.features.map((feature, i) => /* @__PURE__ */ jsxs12(XStack9, { gap: "$2", alignItems: "center", children: [
+            /* @__PURE__ */ jsx20(Circle2, { size: 6, backgroundColor: "$green9" }),
+            /* @__PURE__ */ jsx20(SizableText17, { size: "$3", color: "$color11", children: feature })
           ] }, i)) })
         ]
       },
       plan.id
     )) }),
-    /* @__PURE__ */ jsxs8(YStack8, { gap: "$3", paddingBottom: "$4", children: [
-      /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsxs12(YStack14, { gap: "$3", paddingBottom: "$4", children: [
+      /* @__PURE__ */ jsx20(
         Button3,
         {
           size: "$5",
@@ -683,15 +986,15 @@ function PaywallScreen({
           children: continueLabel
         }
       ),
-      onRestore && /* @__PURE__ */ jsx11(Button3, { size: "$3", chromeless: true, onPress: onRestore, children: /* @__PURE__ */ jsx11(SizableText10, { size: "$3", color: "$color9", children: "Restore Purchases" }) })
+      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 useState2 } from "react";
-import { Button as Button4, SizableText as SizableText11, XStack as XStack6, YStack as YStack9, Circle as Circle3 } from "tamagui";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useState as useState5 } from "react";
+import { Button as Button4, SizableText as SizableText18, XStack as XStack10, YStack as YStack15, Circle as Circle3 } from "tamagui";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 function OnboardingCarousel({
   steps,
   onComplete,
@@ -700,20 +1003,20 @@ function OnboardingCarousel({
   skipLabel = "Skip",
   nextLabel = "Next"
 }) {
-  const [current, setCurrent] = useState2(0);
+  const [current, setCurrent] = useState5(0);
   const isLast = current === steps.length - 1;
   const step = steps[current];
-  return /* @__PURE__ */ jsxs9(YStack9, { flex: 1, backgroundColor: "$background", padding: "$4", justifyContent: "space-between", children: [
-    /* @__PURE__ */ jsx12(XStack6, { justifyContent: "flex-end", paddingTop: "$4", children: !isLast && onSkip && /* @__PURE__ */ jsx12(Button4, { chromeless: true, onPress: onSkip, children: /* @__PURE__ */ jsx12(SizableText11, { size: "$4", color: "$color9", children: skipLabel }) }) }),
-    /* @__PURE__ */ jsxs9(YStack9, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$5", paddingHorizontal: "$4", children: [
-      step?.icon && /* @__PURE__ */ jsx12(Circle3, { size: 120, backgroundColor: "$color2", alignItems: "center", justifyContent: "center", children: step.icon }),
-      /* @__PURE__ */ jsxs9(YStack9, { gap: "$3", alignItems: "center", children: [
-        /* @__PURE__ */ jsx12(SizableText11, { size: "$9", fontWeight: "700", textAlign: "center", children: step?.title }),
-        /* @__PURE__ */ jsx12(SizableText11, { size: "$4", color: "$color10", textAlign: "center", maxWidth: 300, children: step?.description })
+  return /* @__PURE__ */ jsxs13(YStack15, { flex: 1, backgroundColor: "$background", padding: "$4", justifyContent: "space-between", children: [
+    /* @__PURE__ */ jsx21(XStack10, { 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__ */ jsxs13(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 }),
+      /* @__PURE__ */ jsxs13(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 })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs9(YStack9, { gap: "$3", paddingBottom: "$2", children: [
-      /* @__PURE__ */ jsx12(XStack6, { justifyContent: "center", gap: "$2", children: steps.map((_, i) => /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsxs13(YStack15, { gap: "$3", paddingBottom: "$2", children: [
+      /* @__PURE__ */ jsx21(XStack10, { justifyContent: "center", gap: "$2", children: steps.map((_, i) => /* @__PURE__ */ jsx21(
         Circle3,
         {
           size: 8,
@@ -722,7 +1025,7 @@ function OnboardingCarousel({
         },
         i
       )) }),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx21(
         Button4,
         {
           size: "$5",
@@ -740,21 +1043,21 @@ function OnboardingCarousel({
 }
 
 // src/patterns/ChatBubble.tsx
-import { SizableText as SizableText12, XStack as XStack7, YStack as YStack10, Circle as Circle4, Image as Image3 } from "tamagui";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { SizableText as SizableText19, XStack as XStack11, YStack as YStack16, Circle as Circle4, Image as Image3 } from "tamagui";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 function ChatBubble({ message, showAvatar = true }) {
   const isUser = message.sender === "user";
-  return /* @__PURE__ */ jsxs10(
-    XStack7,
+  return /* @__PURE__ */ jsxs14(
+    XStack11,
     {
       alignSelf: isUser ? "flex-end" : "flex-start",
       maxWidth: "75%",
       gap: "$2",
       flexDirection: isUser ? "row-reverse" : "row",
       children: [
-        showAvatar && !isUser && /* @__PURE__ */ jsx13(Circle4, { size: 32, backgroundColor: "$color4", overflow: "hidden", children: message.avatar ? /* @__PURE__ */ jsx13(Image3, { source: { uri: message.avatar }, width: 32, height: 32, objectFit: "cover" }) : /* @__PURE__ */ jsx13(SizableText12, { size: "$2", fontWeight: "600", color: "$color11", children: message.senderName?.[0]?.toUpperCase() ?? "?" }) }),
-        /* @__PURE__ */ jsxs10(
-          YStack10,
+        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__ */ jsxs14(
+          YStack16,
           {
             backgroundColor: isUser ? "$color9" : "$color3",
             paddingHorizontal: "$3",
@@ -764,8 +1067,8 @@ function ChatBubble({ message, showAvatar = true }) {
             borderBottomLeftRadius: isUser ? "$5" : "$2",
             gap: "$1",
             children: [
-              /* @__PURE__ */ jsx13(SizableText12, { size: "$3", color: isUser ? "$color1" : "$color12", children: message.text }),
-              message.timestamp && /* @__PURE__ */ jsx13(SizableText12, { size: "$1", color: isUser ? "$color3" : "$color9", alignSelf: "flex-end", children: message.timestamp })
+              /* @__PURE__ */ jsx22(SizableText19, { size: "$3", color: isUser ? "$color1" : "$color12", children: message.text }),
+              message.timestamp && /* @__PURE__ */ jsx22(SizableText19, { size: "$1", color: isUser ? "$color3" : "$color9", alignSelf: "flex-end", children: message.timestamp })
             ]
           }
         )
@@ -775,11 +1078,11 @@ function ChatBubble({ message, showAvatar = true }) {
 }
 
 // src/patterns/SettingsScreen.tsx
-import { Separator as Separator3, SizableText as SizableText13, Switch, XStack as XStack8, YStack as YStack11 } from "tamagui";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Separator as Separator4, SizableText as SizableText20, Switch, XStack as XStack12, YStack as YStack17 } from "tamagui";
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 function SettingsItemRow({ item }) {
-  return /* @__PURE__ */ jsxs11(
-    XStack8,
+  return /* @__PURE__ */ jsxs15(
+    XStack12,
     {
       alignItems: "center",
       gap: "$3",
@@ -790,22 +1093,22 @@ function SettingsItemRow({ item }) {
       onPress: item.onPress,
       cursor: item.onPress ? "pointer" : void 0,
       children: [
-        item.icon && /* @__PURE__ */ jsx14(YStack11, { width: 24, alignItems: "center", children: item.icon }),
-        /* @__PURE__ */ jsxs11(YStack11, { flex: 1, gap: "$1", children: [
-          /* @__PURE__ */ jsx14(SizableText13, { size: "$4", fontWeight: "500", children: item.title }),
-          item.subtitle && /* @__PURE__ */ jsx14(SizableText13, { size: "$2", color: "$color9", children: item.subtitle })
+        item.icon && /* @__PURE__ */ jsx23(YStack17, { width: 24, alignItems: "center", children: item.icon }),
+        /* @__PURE__ */ jsxs15(YStack17, { flex: 1, gap: "$1", children: [
+          /* @__PURE__ */ jsx23(SizableText20, { size: "$4", fontWeight: "500", children: item.title }),
+          item.subtitle && /* @__PURE__ */ jsx23(SizableText20, { size: "$2", color: "$color9", children: item.subtitle })
         ] }),
-        item.type === "toggle" ? /* @__PURE__ */ jsx14(Switch, { size: "$3", checked: item.value, onCheckedChange: item.onValueChange, children: /* @__PURE__ */ jsx14(Switch.Thumb, { animation: "quick" }) }) : item.right ? item.right : item.onPress && /* @__PURE__ */ jsx14(SizableText13, { size: "$5", color: "$color8", children: "\u203A" })
+        item.type === "toggle" ? /* @__PURE__ */ jsx23(Switch, { size: "$3", checked: item.value, onCheckedChange: item.onValueChange, children: /* @__PURE__ */ jsx23(Switch.Thumb, { animation: "quick" }) }) : item.right ? item.right : item.onPress && /* @__PURE__ */ jsx23(SizableText20, { size: "$5", color: "$color8", children: "\u203A" })
       ]
     }
   );
 }
 function SettingsScreen({ sections, header }) {
-  return /* @__PURE__ */ jsxs11(YStack11, { flex: 1, backgroundColor: "$background", children: [
+  return /* @__PURE__ */ jsxs15(YStack17, { flex: 1, backgroundColor: "$background", children: [
     header,
-    /* @__PURE__ */ jsx14(YStack11, { gap: "$4", paddingVertical: "$2", children: sections.map((section, si) => /* @__PURE__ */ jsxs11(YStack11, { children: [
-      section.title && /* @__PURE__ */ jsx14(
-        SizableText13,
+    /* @__PURE__ */ jsx23(YStack17, { gap: "$4", paddingVertical: "$2", children: sections.map((section, si) => /* @__PURE__ */ jsxs15(YStack17, { children: [
+      section.title && /* @__PURE__ */ jsx23(
+        SizableText20,
         {
           size: "$2",
           fontWeight: "600",
@@ -816,25 +1119,25 @@ function SettingsScreen({ sections, header }) {
           children: section.title
         }
       ),
-      /* @__PURE__ */ jsx14(YStack11, { backgroundColor: "$color1", borderRadius: "$4", marginHorizontal: "$3", overflow: "hidden", children: section.items.map((item, ii) => /* @__PURE__ */ jsxs11(YStack11, { children: [
-        /* @__PURE__ */ jsx14(SettingsItemRow, { item }),
-        ii < section.items.length - 1 && /* @__PURE__ */ jsx14(Separator3, { borderColor: "$color3", marginLeft: "$12" })
+      /* @__PURE__ */ jsx23(YStack17, { backgroundColor: "$color1", borderRadius: "$4", marginHorizontal: "$3", overflow: "hidden", children: section.items.map((item, ii) => /* @__PURE__ */ jsxs15(YStack17, { children: [
+        /* @__PURE__ */ jsx23(SettingsItemRow, { item }),
+        ii < section.items.length - 1 && /* @__PURE__ */ jsx23(Separator4, { borderColor: "$color3", marginLeft: "$12" })
       ] }, item.id)) })
     ] }, si)) })
   ] });
 }
 
 // src/patterns/EmptyState.tsx
-import { Button as Button5, SizableText as SizableText14, YStack as YStack12 } from "tamagui";
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Button as Button5, SizableText as SizableText21, YStack as YStack18 } from "tamagui";
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 function EmptyState({ icon, title, description, actionLabel, onAction }) {
-  return /* @__PURE__ */ jsxs12(YStack12, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$4", padding: "$6", children: [
+  return /* @__PURE__ */ jsxs16(YStack18, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$4", padding: "$6", children: [
     icon,
-    /* @__PURE__ */ jsxs12(YStack12, { gap: "$2", alignItems: "center", children: [
-      /* @__PURE__ */ jsx15(SizableText14, { size: "$6", fontWeight: "600", textAlign: "center", children: title }),
-      description && /* @__PURE__ */ jsx15(SizableText14, { size: "$4", color: "$color9", textAlign: "center", maxWidth: 280, children: description })
+    /* @__PURE__ */ jsxs16(YStack18, { gap: "$2", alignItems: "center", children: [
+      /* @__PURE__ */ jsx24(SizableText21, { size: "$6", fontWeight: "600", textAlign: "center", children: title }),
+      description && /* @__PURE__ */ jsx24(SizableText21, { size: "$4", color: "$color9", textAlign: "center", maxWidth: 280, children: description })
     ] }),
-    actionLabel && onAction && /* @__PURE__ */ jsx15(
+    actionLabel && onAction && /* @__PURE__ */ jsx24(
       Button5,
       {
         size: "$4",
@@ -851,89 +1154,582 @@ function EmptyState({ icon, title, description, actionLabel, onAction }) {
 }
 
 // src/patterns/ProfileHeader.tsx
-import { Circle as Circle5, Image as Image4, SizableText as SizableText15, XStack as XStack9, YStack as YStack13 } from "tamagui";
-import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Circle as Circle5, Image as Image4, SizableText as SizableText22, XStack as XStack13, YStack as YStack19 } from "tamagui";
+import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
 function ProfileHeader({ name, subtitle, avatar, stats, actions }) {
-  return /* @__PURE__ */ jsxs13(YStack13, { alignItems: "center", gap: "$4", paddingVertical: "$6", paddingHorizontal: "$4", children: [
-    /* @__PURE__ */ jsx16(Circle5, { size: 80, backgroundColor: "$color4", overflow: "hidden", children: avatar ? /* @__PURE__ */ jsx16(Image4, { source: { uri: avatar }, width: 80, height: 80, objectFit: "cover" }) : /* @__PURE__ */ jsx16(SizableText15, { size: "$9", fontWeight: "700", color: "$color11", children: name[0]?.toUpperCase() ?? "?" }) }),
-    /* @__PURE__ */ jsxs13(YStack13, { alignItems: "center", gap: "$1", children: [
-      /* @__PURE__ */ jsx16(SizableText15, { size: "$7", fontWeight: "700", children: name }),
-      subtitle && /* @__PURE__ */ jsx16(SizableText15, { size: "$4", color: "$color10", children: subtitle })
+  return /* @__PURE__ */ jsxs17(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__ */ jsxs17(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 })
     ] }),
-    stats && stats.length > 0 && /* @__PURE__ */ jsx16(XStack9, { gap: "$6", children: stats.map((stat, i) => /* @__PURE__ */ jsxs13(YStack13, { alignItems: "center", gap: "$1", children: [
-      /* @__PURE__ */ jsx16(SizableText15, { size: "$6", fontWeight: "700", children: stat.value }),
-      /* @__PURE__ */ jsx16(SizableText15, { size: "$2", color: "$color9", children: stat.label })
+    stats && stats.length > 0 && /* @__PURE__ */ jsx25(XStack13, { gap: "$6", children: stats.map((stat, i) => /* @__PURE__ */ jsxs17(YStack19, { alignItems: "center", gap: "$1", children: [
+      /* @__PURE__ */ jsx25(SizableText22, { size: "$6", fontWeight: "700", children: stat.value }),
+      /* @__PURE__ */ jsx25(SizableText22, { size: "$2", color: "$color9", children: stat.label })
     ] }, i)) }),
     actions
   ] });
 }
+
+// src/patterns/AppHeader.tsx
+import { SizableText as SizableText23, XStack as XStack14, YStack as YStack20 } from "tamagui";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+function AppHeader({ title, subtitle, variant = "simple", onBack, avatar, left, right, transparent, borderless }) {
+  const leftContent = (() => {
+    if (variant === "back") return /* @__PURE__ */ jsx26(SizableText23, { size: "$6", paddingRight: "$2", onPress: onBack, pressStyle: { opacity: 0.6 }, cursor: "pointer", children: "\u2039" });
+    if (variant === "profile") return /* @__PURE__ */ jsx26(Avatar, { uri: avatar, name: title, size: "sm" });
+    if (variant === "centered") return left ?? null;
+    return null;
+  })();
+  const rightContent = variant === "profile" || variant === "centered" ? right ?? null : null;
+  return /* @__PURE__ */ jsx26(
+    YStack20,
+    {
+      paddingTop: "$6",
+      backgroundColor: transparent ? "transparent" : "$background",
+      borderBottomWidth: borderless ? 0 : 1,
+      borderBottomColor: "$borderColor",
+      children: /* @__PURE__ */ jsxs18(XStack14, { height: 56, alignItems: "center", paddingHorizontal: "$4", gap: "$3", children: [
+        leftContent,
+        /* @__PURE__ */ jsxs18(YStack20, { flex: 1, alignItems: variant === "centered" ? "center" : "flex-start", children: [
+          /* @__PURE__ */ jsx26(SizableText23, { size: "$6", fontWeight: "700", numberOfLines: 1, children: title }),
+          subtitle && /* @__PURE__ */ jsx26(SizableText23, { size: "$2", color: "$color9", numberOfLines: 1, children: subtitle })
+        ] }),
+        rightContent
+      ] })
+    }
+  );
+}
+
+// src/patterns/BottomSheet.tsx
+import { Sheet, SizableText as SizableText24, XStack as XStack15, YStack as YStack21 } from "tamagui";
+import { ScrollView as ScrollView2 } from "react-native";
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], dismissOnSnapToBottom = true, showHandle = true, showClose = false }) {
+  return /* @__PURE__ */ jsxs19(Sheet, { modal: true, open, onOpenChange, snapPoints, dismissOnSnapToBottom, animation: "medium", children: [
+    /* @__PURE__ */ jsx27(Sheet.Overlay, { animation: "lazy", enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } }),
+    showHandle && /* @__PURE__ */ jsx27(Sheet.Handle, {}),
+    /* @__PURE__ */ jsxs19(Sheet.Frame, { borderTopLeftRadius: "$6", borderTopRightRadius: "$6", backgroundColor: "$background", children: [
+      (title || showClose) && /* @__PURE__ */ jsxs19(XStack15, { paddingHorizontal: "$4", paddingTop: "$3", paddingBottom: "$2", alignItems: "center", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsx27(SizableText24, { size: "$6", fontWeight: "600", flexShrink: 1, children: title }),
+        showClose && /* @__PURE__ */ jsx27(
+          XStack15,
+          {
+            width: 28,
+            height: 28,
+            borderRadius: "$10",
+            backgroundColor: "$color4",
+            alignItems: "center",
+            justifyContent: "center",
+            pressStyle: { opacity: 0.7 },
+            onPress: () => onOpenChange(false),
+            children: /* @__PURE__ */ jsx27(SizableText24, { size: "$3", color: "$color10", fontWeight: "600", children: "\u2715" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx27(ScrollView2, { contentContainerStyle: { paddingBottom: 40 }, children: /* @__PURE__ */ jsx27(YStack21, { padding: "$4", children }) })
+    ] })
+  ] });
+}
+
+// src/patterns/LoginScreen.tsx
+import { useState as useState6 } from "react";
+import { Button as Button6, SizableText as SizableText25, Spinner, XStack as XStack16, YStack as YStack22 } from "tamagui";
+import { jsx as jsx28, jsxs as jsxs20 } 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("");
+  return /* @__PURE__ */ jsxs20(YStack22, { flex: 1, padding: "$4", gap: "$5", backgroundColor: "$background", justifyContent: "center", children: [
+    /* @__PURE__ */ jsxs20(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,
+      {
+        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__ */ jsxs20(XStack16, { 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__ */ jsxs20(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(XStack16, { 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__ */ jsxs20(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" })
+    ] }) })
+  ] });
+}
+
+// src/patterns/TabBar.tsx
+import { SizableText as SizableText26, XStack as XStack17, YStack as YStack23 } from "tamagui";
+import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
+  return /* @__PURE__ */ jsx29(XStack17, { height: 56, borderTopWidth: 1, borderTopColor: "$borderColor", backgroundColor: "$background", paddingBottom: "$2", children: tabs.map((tab) => {
+    const active = tab.id === activeTab;
+    return /* @__PURE__ */ jsxs21(
+      YStack23,
+      {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "$1",
+        pressStyle: { opacity: 0.6 },
+        onPress: () => onTabPress(tab.id),
+        children: [
+          tab.icon && /* @__PURE__ */ jsx29(SizableText26, { size: "$5", color: active ? "$color9" : "$color8", children: tab.icon }),
+          showLabels && /* @__PURE__ */ jsx29(SizableText26, { size: "$1", color: active ? "$color9" : "$color8", fontWeight: active ? "600" : "400", children: tab.label })
+        ]
+      },
+      tab.id
+    );
+  }) });
+}
+
+// src/patterns/SearchBar.tsx
+import { Input as Input2, SizableText as SizableText27, XStack as XStack18 } from "tamagui";
+import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
+function SearchBar({ value, onChangeText, placeholder = "Search\u2026", onFilter, onCancel, autoFocus }) {
+  return /* @__PURE__ */ jsxs22(XStack18, { height: 44, borderRadius: "$10", backgroundColor: "$color2", alignItems: "center", paddingHorizontal: "$3", gap: "$2", children: [
+    /* @__PURE__ */ jsx30(SizableText27, { size: "$4", color: "$color8", children: "\u2315" }),
+    /* @__PURE__ */ jsx30(
+      Input2,
+      {
+        flex: 1,
+        size: "$4",
+        value,
+        onChangeText,
+        placeholder,
+        placeholderTextColor: "$color8",
+        backgroundColor: "transparent",
+        borderWidth: 0,
+        autoFocus
+      }
+    ),
+    onFilter && /* @__PURE__ */ jsx30(SizableText27, { size: "$4", color: "$color9", pressStyle: { opacity: 0.6 }, onPress: onFilter, children: "\u2ACF" }),
+    onCancel && /* @__PURE__ */ jsx30(SizableText27, { size: "$3", color: "$color9", pressStyle: { opacity: 0.6 }, onPress: onCancel, children: "Cancel" })
+  ] });
+}
+
+// src/patterns/FloatingActionButton.tsx
+import { SizableText as SizableText28, XStack as XStack19 } from "tamagui";
+import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
+var sizes = { sm: 44, md: 56, lg: 68 };
+var positionStyles = {
+  "bottom-right": { right: 20 },
+  "bottom-center": { left: "50%", marginLeft: -28 },
+  "bottom-left": { left: 20 }
+};
+function FloatingActionButton({ icon, label, onPress, position = "bottom-right", size = "md" }) {
+  const dim = sizes[size];
+  return /* @__PURE__ */ jsxs23(
+    XStack19,
+    {
+      position: "absolute",
+      bottom: 32,
+      ...positionStyles[position],
+      height: dim,
+      minWidth: dim,
+      borderRadius: label ? "$6" : "$10",
+      backgroundColor: "$color9",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "$2",
+      paddingHorizontal: label ? "$4" : 0,
+      elevation: 4,
+      pressStyle: { scale: 0.95, opacity: 0.9 },
+      onPress,
+      children: [
+        icon && /* @__PURE__ */ jsx31(SizableText28, { color: "$color1", children: icon }),
+        label && /* @__PURE__ */ jsx31(SizableText28, { color: "$color1", size: "$4", fontWeight: "600", children: label })
+      ]
+    }
+  );
+}
+
+// src/patterns/ActionSheet.tsx
+import { Sheet as Sheet2, SizableText as SizableText29, XStack as XStack20, YStack as YStack24 } from "tamagui";
+import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
+function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel = "Cancel" }) {
+  return /* @__PURE__ */ jsxs24(Sheet2, { modal: true, open, onOpenChange, snapPoints: [50], dismissOnSnapToBottom: true, animation: "medium", children: [
+    /* @__PURE__ */ jsx32(Sheet2.Overlay, { animation: "lazy", enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } }),
+    /* @__PURE__ */ jsx32(Sheet2.Handle, {}),
+    /* @__PURE__ */ jsxs24(Sheet2.Frame, { borderTopLeftRadius: "$6", borderTopRightRadius: "$6", backgroundColor: "$background", children: [
+      title && /* @__PURE__ */ jsx32(SizableText29, { size: "$3", color: "$color8", textAlign: "center", paddingTop: "$3", paddingBottom: "$1", children: title }),
+      /* @__PURE__ */ jsx32(YStack24, { paddingHorizontal: "$3", paddingTop: "$2", children: items.map((item) => /* @__PURE__ */ jsxs24(
+        XStack20,
+        {
+          height: 52,
+          alignItems: "center",
+          gap: "$3",
+          paddingHorizontal: "$3",
+          borderRadius: "$4",
+          pressStyle: { backgroundColor: "$color3" },
+          onPress: () => {
+            onSelect(item.id);
+            onOpenChange(false);
+          },
+          children: [
+            item.icon && /* @__PURE__ */ jsx32(SizableText29, { size: "$5", children: item.icon }),
+            /* @__PURE__ */ jsx32(
+              SizableText29,
+              {
+                size: "$5",
+                flex: 1,
+                color: item.destructive ? "$red9" : "$color12",
+                fontWeight: item.destructive ? "600" : "400",
+                children: item.label
+              }
+            )
+          ]
+        },
+        item.id
+      )) }),
+      /* @__PURE__ */ jsx32(YStack24, { paddingHorizontal: "$3", paddingVertical: "$3", borderTopWidth: 1, borderTopColor: "$borderColor", marginTop: "$2", children: /* @__PURE__ */ jsx32(
+        XStack20,
+        {
+          height: 48,
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: "$4",
+          pressStyle: { backgroundColor: "$color3" },
+          onPress: () => onOpenChange(false),
+          children: /* @__PURE__ */ jsx32(SizableText29, { size: "$5", fontWeight: "600", color: "$color9", children: cancelLabel })
+        }
+      ) })
+    ] })
+  ] });
+}
+
+// src/patterns/Skeleton.tsx
+import { YStack as YStack25 } from "tamagui";
+import { jsx as jsx33 } from "react/jsx-runtime";
+function Skeleton({ width, height, borderRadius, variant = "rectangular" }) {
+  const size = variant === "circular" ? height ?? 40 : height;
+  const w = variant === "text" ? width ?? "100%" : width;
+  const h = variant === "text" ? height ?? 16 : size;
+  const r = variant === "circular" ? 9999 : borderRadius ?? 8;
+  return /* @__PURE__ */ jsx33(YStack25, { width: w, height: h, borderRadius: r, backgroundColor: "$color3", opacity: 0.6, animation: "slow", enterStyle: { opacity: 0.3 }, exitStyle: { opacity: 0.3 } });
+}
+
+// src/patterns/NotificationBanner.tsx
+import { SizableText as SizableText30, XStack as XStack21, YStack as YStack26 } from "tamagui";
+import { jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
+var variantColors2 = {
+  info: { bg: "$blue3", text: "$blue11" },
+  success: { bg: "$green3", text: "$green11" },
+  warning: { bg: "$yellow3", text: "$yellow11" },
+  error: { bg: "$red3", text: "$red11" }
+};
+function NotificationBanner({ title, message, variant = "info", onPress, onDismiss, icon }) {
+  const colors = variantColors2[variant];
+  return /* @__PURE__ */ jsxs25(
+    XStack21,
+    {
+      backgroundColor: colors.bg,
+      padding: "$3",
+      borderRadius: "$4",
+      gap: "$3",
+      alignItems: "flex-start",
+      onPress,
+      pressStyle: onPress ? { opacity: 0.8 } : void 0,
+      children: [
+        icon && /* @__PURE__ */ jsx34(YStack26, { paddingTop: "$0.5", children: icon }),
+        /* @__PURE__ */ jsxs25(YStack26, { flex: 1, gap: "$1", children: [
+          /* @__PURE__ */ jsx34(SizableText30, { size: "$4", fontWeight: "600", color: colors.text, children: title }),
+          message && /* @__PURE__ */ jsx34(SizableText30, { size: "$3", color: colors.text, opacity: 0.8, children: message })
+        ] }),
+        onDismiss && /* @__PURE__ */ jsx34(SizableText30, { size: "$3", color: colors.text, opacity: 0.6, onPress: onDismiss, padding: "$1", children: "\u2715" })
+      ]
+    }
+  );
+}
+
+// src/patterns/ProgressSteps.tsx
+import { Circle as Circle6, SizableText as SizableText31, XStack as XStack22, YStack as YStack27 } from "tamagui";
+import { jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
+function ProgressSteps({ steps, currentStep, variant = "dots" }) {
+  if (variant === "bar") {
+    const progress = steps.length > 1 ? currentStep / (steps.length - 1) * 100 : 100;
+    return /* @__PURE__ */ jsxs26(YStack27, { gap: "$2", children: [
+      /* @__PURE__ */ jsx35(YStack27, { height: 4, backgroundColor: "$color4", borderRadius: 2, overflow: "hidden", children: /* @__PURE__ */ jsx35(YStack27, { height: 4, width: `${progress}%`, backgroundColor: "$color9", borderRadius: 2, animation: "quick" }) }),
+      /* @__PURE__ */ jsx35(XStack22, { justifyContent: "space-between", children: steps.map((label, i) => /* @__PURE__ */ jsx35(SizableText31, { size: "$2", color: i <= currentStep ? "$color9" : "$color8", children: label }, i)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx35(XStack22, { alignItems: "center", justifyContent: "center", gap: "$0", children: steps.map((label, i) => /* @__PURE__ */ jsxs26(XStack22, { alignItems: "center", gap: "$0", children: [
+    /* @__PURE__ */ jsxs26(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(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" })
+  ] }, i)) });
+}
+
+// src/patterns/SwipeableRow.tsx
+import { useState as useState7 } from "react";
+import { Button as Button7, SizableText as SizableText32, XStack as XStack23, YStack as YStack28 } from "tamagui";
+import { Fragment as Fragment2, jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
+function SwipeableRow({ children, leftActions, rightActions }) {
+  const [showActions, setShowActions] = useState7(false);
+  const actions = [...leftActions ?? [], ...rightActions ?? []];
+  if (actions.length === 0) return /* @__PURE__ */ jsx36(Fragment2, { children });
+  return /* @__PURE__ */ jsxs27(YStack28, { children: [
+    /* @__PURE__ */ jsx36(YStack28, { onLongPress: () => setShowActions((v) => !v), pressStyle: { opacity: 0.9 }, children }),
+    showActions && /* @__PURE__ */ jsx36(XStack23, { gap: "$2", padding: "$2", animation: "quick", enterStyle: { opacity: 0, scale: 0.95 }, children: actions.map((action) => /* @__PURE__ */ jsx36(
+      Button7,
+      {
+        flex: 1,
+        size: "$3",
+        backgroundColor: action.color,
+        borderRadius: "$3",
+        onPress: () => {
+          action.onPress();
+          setShowActions(false);
+        },
+        children: /* @__PURE__ */ jsx36(SizableText32, { size: "$2", fontWeight: "600", color: "white", children: action.label })
+      },
+      action.id
+    )) })
+  ] });
+}
+
+// src/patterns/MediaCard.tsx
+import { Image as Image5, SizableText as SizableText33, XStack as XStack24, YStack as YStack29 } from "tamagui";
+import { LinearGradient } from "tamagui/linear-gradient";
+import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio = 16 / 9, onPress, badge }) {
+  return /* @__PURE__ */ jsx37(
+    YStack29,
+    {
+      borderRadius: "$4",
+      overflow: "hidden",
+      onPress,
+      pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
+      animation: "quick",
+      children: /* @__PURE__ */ jsxs28(YStack29, { aspectRatio, children: [
+        /* @__PURE__ */ jsx37(Image5, { source: { uri: image }, width: "100%", height: "100%", objectFit: "cover" }),
+        overlay === "gradient" && /* @__PURE__ */ jsx37(
+          LinearGradient,
+          {
+            colors: ["transparent", "rgba(0,0,0,0.7)"],
+            start: [0, 0],
+            end: [0, 1],
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: "60%"
+          }
+        ),
+        overlay === "dark" && /* @__PURE__ */ jsx37(YStack29, { position: "absolute", fullscreen: true, backgroundColor: "rgba(0,0,0,0.4)" }),
+        badge && /* @__PURE__ */ jsx37(
+          XStack24,
+          {
+            position: "absolute",
+            top: "$2",
+            right: "$2",
+            backgroundColor: "$color9",
+            paddingHorizontal: "$2",
+            paddingVertical: "$1",
+            borderRadius: "$2",
+            children: /* @__PURE__ */ jsx37(SizableText33, { size: "$1", fontWeight: "600", color: "$color1", children: badge })
+          }
+        ),
+        /* @__PURE__ */ jsxs28(YStack29, { position: "absolute", bottom: 0, left: 0, right: 0, padding: "$3", gap: "$1", children: [
+          /* @__PURE__ */ jsx37(SizableText33, { size: "$5", fontWeight: "600", color: "white", children: title }),
+          subtitle && /* @__PURE__ */ jsx37(SizableText33, { size: "$3", color: "rgba(255,255,255,0.8)", children: subtitle })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/patterns/Carousel.tsx
+import { Children, useState as useState8 } from "react";
+import { Circle as Circle7, XStack as XStack25, YStack as YStack30 } from "tamagui";
+import { ScrollView as ScrollView3 } from "react-native";
+import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
+function Carousel({ children, gap = "$3", snapToInterval, showIndicators = false }) {
+  const [activeIndex, setActiveIndex] = useState8(0);
+  const count = Children.count(children);
+  const gapPx = gap === "$2" ? 8 : gap === "$3" ? 12 : 16;
+  return /* @__PURE__ */ jsxs29(YStack30, { gap: "$3", children: [
+    /* @__PURE__ */ jsx38(
+      ScrollView3,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        snapToInterval,
+        decelerationRate: "fast",
+        contentContainerStyle: { gap: gapPx, paddingHorizontal: 16 },
+        onMomentumScrollEnd: (e) => {
+          if (snapToInterval) setActiveIndex(Math.round(e.nativeEvent.contentOffset.x / snapToInterval));
+        },
+        children
+      }
+    ),
+    showIndicators && count > 1 && /* @__PURE__ */ jsx38(XStack25, { justifyContent: "center", gap: "$1.5", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx38(Circle7, { 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 { jsx as jsx39 } from "react/jsx-runtime";
+function PullToRefresh({ children, onRefresh, refreshing = false }) {
+  return /* @__PURE__ */ jsx39(
+    ScrollView4,
+    {
+      contentContainerStyle: { flexGrow: 1 },
+      refreshControl: /* @__PURE__ */ jsx39(RefreshControl, { refreshing, onRefresh }),
+      children: /* @__PURE__ */ jsx39(YStack31, { flex: 1, children })
+    }
+  );
+}
 export {
+  Accordion,
+  ActionSheet,
+  Adapt,
   AlertDialog2 as AlertDialog,
+  Anchor,
+  AppHeader,
   Avatar2 as Avatar,
   Badge,
+  BlinkAccordion,
   Avatar as BlinkAvatar,
   Button as BlinkButton,
   Card as BlinkCard,
   Input as BlinkInput,
+  BlinkTabs,
   BlinkText,
-  Button6 as Button,
+  BlinkToastProvider,
+  BlinkToggleGroup,
+  BlinkTooltip,
+  BottomSheet,
+  Button8 as Button,
   Card2 as Card,
+  Carousel,
   ChatBubble,
   Checkbox,
-  Circle6 as Circle,
+  Circle8 as Circle,
+  Container,
   Dialog,
   DialogProvider,
   Divider,
   EmptyState,
+  Fieldset,
+  FloatingActionButton,
+  Form,
+  FormField,
+  Grid,
   H12 as H1,
   H22 as H2,
   H32 as H3,
   H42 as H4,
   H52 as H5,
   H62 as H6,
+  ICONS,
+  Icon,
   Image2 as Image,
-  Input2 as Input,
+  Input3 as Input,
   KeyboardStickyFooter,
   Label,
   ListItem,
+  LoginScreen,
+  MediaCard,
+  NotificationBanner,
   OnboardingCarousel,
   PageContainer,
   PageMainContainer,
   Paragraph,
   PaywallScreen,
-  Popover,
+  Popover2 as Popover,
+  PortalProvider,
   Pressable,
   ProfileHeader,
   Progress,
+  ProgressSteps,
+  PullToRefresh,
   RadioGroup,
+  SafeArea,
   ScreenLayout,
-  ScrollView,
+  ScrollView5 as ScrollView,
+  SearchBar,
   Section,
   Select,
   SepHeading,
-  Separator4 as Separator,
+  Separator5 as Separator,
   SettingsScreen,
-  Sheet,
-  SizableText16 as SizableText,
+  Sheet3 as Sheet,
+  SizableText34 as SizableText,
+  Skeleton,
   Slider,
-  Spinner,
+  Spinner2 as Spinner,
+  Square,
   StepPageLayout,
   SubHeading,
+  SwipeableRow,
   Switch2 as Switch,
-  Image5 as TamaguiImage,
+  TabBar,
+  Tabs,
+  Image6 as TamaguiImage,
+  ListItem2 as TamaguiListItem,
   TamaguiProvider,
   Text,
   TextArea,
   Theme,
+  ToggleGroup,
   Tooltip,
+  TooltipSimple,
+  Unspaced,
   View6 as View,
-  XStack10 as XStack,
-  YStack14 as YStack,
+  VisuallyHidden,
+  XGroup,
+  XStack26 as XStack,
+  YGroup,
+  YStack32 as YStack,
   ZStack,
   blinkConfig,
   dialogConfirm,
   showError,
   styled12 as styled,
+  toast,
+  useBlinkToast,
   useMedia,
   useTheme,
   useThemeName,