@blinkdotnew/mobile-ui 2.0.0-alpha.1 → 2.0.0-alpha.10

package/dist/index.mjs

@@ -1,347 +1,206 @@
 // src/config/tamagui.config.ts
+import { defaultConfig } from "@tamagui/config/v5";
 import { createTamagui } from "tamagui";
-
-// src/config/tokens.ts
-import { createTokens } from "tamagui";
-var tokens = createTokens({
-  color: {
-    white: "#FFFFFF",
-    black: "#000000",
-    transparent: "transparent"
-  },
-  space: {
-    0: 0,
-    0.5: 2,
-    1: 4,
-    1.5: 6,
-    2: 8,
-    2.5: 10,
-    3: 12,
-    3.5: 14,
-    4: 16,
-    5: 20,
-    6: 24,
-    7: 28,
-    8: 32,
-    9: 36,
-    10: 40,
-    12: 48,
-    16: 64,
-    true: 16,
-    "-1": -4,
-    "-2": -8,
-    "-3": -12,
-    "-4": -16
-  },
-  size: {
-    0: 0,
-    1: 4,
-    2: 8,
-    3: 12,
-    4: 16,
-    5: 20,
-    6: 24,
-    7: 28,
-    8: 32,
-    9: 36,
-    10: 40,
-    11: 44,
-    12: 48,
-    14: 56,
-    16: 64,
-    20: 80,
-    true: 44
-  },
-  radius: {
-    0: 0,
-    1: 2,
-    2: 4,
-    3: 6,
-    4: 8,
-    5: 10,
-    6: 12,
-    7: 16,
-    8: 20,
-    9: 24,
-    10: 9999,
-    true: 12
-  },
-  zIndex: {
-    0: 0,
-    1: 100,
-    2: 200,
-    3: 300,
-    4: 400,
-    5: 500
-  }
-});
-
-// src/config/themes.ts
-var oceanLight = {
-  background: "#FFFFFF",
-  backgroundHover: "#F8FAFC",
-  backgroundPress: "#F1F5F9",
-  color: "#0F172A",
-  colorHover: "#1E293B",
-  colorPress: "#334155",
-  primary: "#0D9488",
-  primaryHover: "#0F766E",
-  primaryPress: "#115E59",
-  secondary: "#F0F9FF",
-  secondaryHover: "#E0F2FE",
-  secondaryPress: "#BAE6FD",
-  accent: "#2DD4BF",
-  surface: "#F8FAFC",
-  surfaceHover: "#F1F5F9",
-  card: "#FFFFFF",
-  cardHover: "#F8FAFC",
-  border: "#E2E8F0",
-  borderHover: "#CBD5E1",
-  textPrimary: "#0F172A",
-  textSecondary: "#475569",
-  textMuted: "#94A3B8",
-  textInverse: "#FFFFFF",
-  error: "#EF4444",
-  errorHover: "#DC2626",
-  success: "#10B981",
-  successHover: "#059669",
-  warning: "#F59E0B",
-  warningHover: "#D97706",
-  highlight: "#0D9488",
-  overlay: "rgba(0,0,0,0.5)",
-  shadowColor: "rgba(0,0,0,0.1)"
-};
-var oceanDark = {
-  background: "#0F172A",
-  backgroundHover: "#1E293B",
-  backgroundPress: "#334155",
-  color: "#F8FAFC",
-  colorHover: "#E2E8F0",
-  colorPress: "#CBD5E1",
-  primary: "#14B8A6",
-  primaryHover: "#2DD4BF",
-  primaryPress: "#0D9488",
-  secondary: "#1E293B",
-  secondaryHover: "#334155",
-  secondaryPress: "#475569",
-  accent: "#2DD4BF",
-  surface: "#1E293B",
-  surfaceHover: "#334155",
-  card: "#1E293B",
-  cardHover: "#334155",
-  border: "#334155",
-  borderHover: "#475569",
-  textPrimary: "#F8FAFC",
-  textSecondary: "#94A3B8",
-  textMuted: "#64748B",
-  textInverse: "#0F172A",
-  error: "#F87171",
-  errorHover: "#EF4444",
-  success: "#34D399",
-  successHover: "#10B981",
-  warning: "#FBBF24",
-  warningHover: "#F59E0B",
-  highlight: "#14B8A6",
-  overlay: "rgba(0,0,0,0.7)",
-  shadowColor: "rgba(0,0,0,0.3)"
-};
-var themes = {
-  light: oceanLight,
-  dark: oceanDark
-};
-
-// src/config/fonts.ts
-import { createFont } from "tamagui";
-var outfitFont = createFont({
-  family: "Outfit, System",
-  size: {
-    1: 11,
-    2: 12,
-    3: 13,
-    4: 14,
-    5: 15,
-    6: 16,
-    7: 18,
-    8: 20,
-    9: 22,
-    10: 28,
-    11: 36,
-    12: 48,
-    true: 15
-  },
-  lineHeight: {
-    1: 16,
-    2: 18,
-    3: 20,
-    4: 22,
-    5: 23,
-    6: 24,
-    7: 26,
-    8: 28,
-    9: 30,
-    10: 36,
-    11: 44,
-    12: 56,
-    true: 23
-  },
-  weight: {
-    1: "400",
-    2: "500",
-    3: "600",
-    4: "700",
-    5: "800",
-    true: "400"
-  },
-  letterSpacing: {
-    1: 0,
-    2: -0.2,
-    3: -0.4,
-    4: -0.6,
-    true: 0
-  }
-});
-
-// src/config/tamagui.config.ts
 var blinkConfig = createTamagui({
-  tokens,
-  themes,
-  fonts: {
-    heading: outfitFont,
-    body: outfitFont
-  },
-  media: {
-    xs: { maxWidth: 660 },
-    sm: { maxWidth: 860 },
-    md: { maxWidth: 980 },
-    lg: { maxWidth: 1120 },
-    gtSm: { minWidth: 861 },
-    short: { maxHeight: 820 }
-  },
-  shorthands: {
-    px: "paddingHorizontal",
-    py: "paddingVertical",
-    mx: "marginHorizontal",
-    my: "marginVertical",
-    bg: "backgroundColor",
-    br: "borderRadius",
-    f: "flex",
-    w: "width",
-    h: "height"
-  }
+  ...defaultConfig
 });
 
+// src/index.ts
+import { defaultConfig as defaultConfig2 } from "@tamagui/config/v5";
+import {
+  View as View6,
+  Stack,
+  SizableStack,
+  ThemeableStack,
+  Frame,
+  XStack as XStack27,
+  YStack as YStack32,
+  ZStack,
+  ScrollView as ScrollView5,
+  Circle as Circle8,
+  Square,
+  Spacer,
+  EnsureFlexed,
+  Group,
+  XGroup,
+  YGroup,
+  Header,
+  Footer,
+  Main,
+  Nav,
+  Article,
+  Aside,
+  H1 as H12,
+  H2 as H22,
+  H3 as H32,
+  H4 as H42,
+  H5 as H52,
+  H6 as H62,
+  Heading,
+  Paragraph,
+  SizableText as SizableText34,
+  Text,
+  Label,
+  Button as Button8,
+  Input as Input3,
+  TextArea,
+  Switch as Switch2,
+  Checkbox,
+  Slider,
+  RadioGroup,
+  Select,
+  Fieldset,
+  Form,
+  Card as Card2,
+  Avatar as Avatar2,
+  Separator as Separator5,
+  Image as Image6,
+  Progress,
+  Spinner as Spinner2,
+  ListItem as ListItem2,
+  Anchor,
+  Sheet as Sheet3,
+  Dialog,
+  AlertDialog as AlertDialog2,
+  Popover as Popover2,
+  Tooltip,
+  TooltipSimple,
+  Portal,
+  PortalHost,
+  PortalItem,
+  PortalProvider,
+  Tabs,
+  Accordion,
+  ToggleGroup,
+  AnimatePresence,
+  Adapt,
+  VisuallyHidden,
+  Unspaced,
+  Theme,
+  TamaguiProvider,
+  TamaguiProvider as TamaguiProvider2,
+  createTamagui as createTamagui2,
+  createFont,
+  createMedia,
+  createTheme,
+  createTokens,
+  createVariable,
+  createStyledContext,
+  addTheme,
+  updateTheme,
+  replaceTheme,
+  styled as styled12,
+  withStaticProperties as withStaticProperties2,
+  isWeb,
+  isClient,
+  getConfig,
+  getToken,
+  getTokens,
+  getTokenValue,
+  composeRefs,
+  composeEventHandlers,
+  useTheme,
+  useMedia,
+  useThemeName,
+  useControllableState,
+  useEvent,
+  useForceUpdate,
+  useIsomorphicLayoutEffect,
+  useComposedRefs,
+  useWindowDimensions,
+  useDidFinishSSR,
+  useDebounce,
+  useDebounceValue,
+  usePresence,
+  useIsPresent
+} from "tamagui";
+
 // src/primitives/Button.tsx
-import { styled, View, Text, withStaticProperties } from "tamagui";
-var ButtonFrame = styled(View, {
-  name: "BlinkButton",
-  tag: "button",
-  alignItems: "center",
-  justifyContent: "center",
-  flexDirection: "row",
-  gap: "$2",
+import { Button as TamaguiButton, styled } from "tamagui";
+var Button = styled(TamaguiButton, {
+  borderWidth: 0,
   cursor: "pointer",
-  pressStyle: { opacity: 0.8, scale: 0.98 },
+  focusVisibleStyle: {
+    outlineWidth: 2,
+    outlineStyle: "solid",
+    outlineColor: "$color8"
+  },
   variants: {
     variant: {
+      default: {
+        backgroundColor: "$color3",
+        hoverStyle: { backgroundColor: "$color4" },
+        pressStyle: { backgroundColor: "$color2", opacity: 0.8 }
+      },
       primary: {
-        backgroundColor: "$primary"
+        backgroundColor: "$color9",
+        color: "$color1",
+        hoverStyle: { backgroundColor: "$color10" },
+        pressStyle: { backgroundColor: "$color8", opacity: 0.9 }
       },
-      secondary: {
-        backgroundColor: "$secondary"
+      outlined: {
+        backgroundColor: "transparent",
+        borderWidth: 2,
+        borderColor: "$color6",
+        hoverStyle: { borderColor: "$color8" },
+        pressStyle: { borderColor: "$color4", opacity: 0.8 }
       },
-      outline: {
+      transparent: {
         backgroundColor: "transparent",
-        borderWidth: 1,
-        borderColor: "$border"
+        hoverStyle: { backgroundColor: "$color2" },
+        pressStyle: { backgroundColor: "$color1", opacity: 0.8 }
       },
-      ghost: {
-        backgroundColor: "transparent"
+      floating: {
+        backgroundColor: "$color4",
+        shadowColor: "$shadow2",
+        shadowRadius: 5,
+        shadowOffset: { height: 2, width: 0 },
+        hoverStyle: { backgroundColor: "$color5" },
+        pressStyle: { backgroundColor: "$color3", opacity: 0.9 }
       },
       destructive: {
-        backgroundColor: "$error"
+        backgroundColor: "$red9",
+        color: "$color1",
+        hoverStyle: { backgroundColor: "$red10" },
+        pressStyle: { backgroundColor: "$red8", opacity: 0.9 }
       }
     },
     size: {
-      sm: {
-        height: "$8",
-        paddingHorizontal: "$3",
-        borderRadius: "$4"
-      },
-      md: {
-        height: "$11",
-        paddingHorizontal: "$4",
-        borderRadius: "$6"
-      },
-      lg: {
-        height: "$14",
-        paddingHorizontal: "$6",
-        borderRadius: "$7"
-      }
+      sm: { height: "$3", paddingHorizontal: "$3", borderRadius: "$3" },
+      md: { height: "$4", paddingHorizontal: "$4", borderRadius: "$4" },
+      lg: { height: "$5", paddingHorizontal: "$5", borderRadius: "$5" }
     },
     fullWidth: {
       true: { width: "100%" }
-    },
-    disabled: {
-      true: { opacity: 0.5, pointerEvents: "none" }
-    }
-  },
-  defaultVariants: {
-    variant: "primary",
-    size: "md"
-  }
-});
-var ButtonText = styled(Text, {
-  name: "BlinkButtonText",
-  fontFamily: "$body",
-  fontWeight: "600",
-  textAlign: "center",
-  variants: {
-    variant: {
-      primary: { color: "$textInverse" },
-      secondary: { color: "$textPrimary" },
-      outline: { color: "$textPrimary" },
-      ghost: { color: "$textPrimary" },
-      destructive: { color: "$textInverse" }
-    },
-    size: {
-      sm: { fontSize: "$3" },
-      md: { fontSize: "$5" },
-      lg: { fontSize: "$6" }
     }
   },
   defaultVariants: {
-    variant: "primary",
+    variant: "default",
     size: "md"
   }
 });
-var Button = withStaticProperties(ButtonFrame, {
-  Text: ButtonText
-});
 
 // src/primitives/Text.tsx
-import { styled as styled2, Text as Text2 } from "tamagui";
-var BlinkText = styled2(Text2, {
+import { SizableText, styled as styled2 } from "tamagui";
+var BlinkText = styled2(SizableText, {
   name: "BlinkText",
-  fontFamily: "$body",
-  color: "$color",
   variants: {
     variant: {
-      display: { fontSize: "$12", fontWeight: "800", letterSpacing: "$4" },
-      h1: { fontSize: "$10", fontWeight: "700", letterSpacing: "$3" },
-      h2: { fontSize: "$9", fontWeight: "700", letterSpacing: "$2" },
-      h3: { fontSize: "$7", fontWeight: "600" },
-      h4: { fontSize: "$6", fontWeight: "600" },
-      body: { fontSize: "$5", fontWeight: "400" },
-      bodySmall: { fontSize: "$4", fontWeight: "400" },
-      caption: { fontSize: "$3", fontWeight: "400", color: "$textSecondary" },
-      small: { fontSize: "$2", fontWeight: "400", color: "$textMuted" },
-      tiny: { fontSize: "$1", fontWeight: "400", color: "$textMuted" }
+      display: { size: "$10", fontWeight: "800" },
+      h1: { size: "$9", fontWeight: "700" },
+      h2: { size: "$8", fontWeight: "700" },
+      h3: { size: "$7", fontWeight: "600" },
+      h4: { size: "$6", fontWeight: "600" },
+      body: { size: "$5", fontWeight: "400" },
+      bodySmall: { size: "$4", fontWeight: "400" },
+      caption: { size: "$3", fontWeight: "400", color: "$color10" },
+      small: { size: "$2", fontWeight: "400", color: "$color9" }
     },
     muted: {
-      true: { color: "$textMuted" }
+      true: { color: "$color9" }
     },
     secondary: {
-      true: { color: "$textSecondary" }
+      true: { color: "$color10" }
     },
     center: {
       true: { textAlign: "center" }
@@ -356,30 +215,30 @@ var BlinkText = styled2(Text2, {
 });
 
 // src/primitives/Card.tsx
-import { styled as styled3, View as View2, withStaticProperties as withStaticProperties2 } from "tamagui";
-var CardFrame = styled3(View2, {
+import { styled as styled3, View, withStaticProperties } from "tamagui";
+var CardFrame = styled3(View, {
   name: "BlinkCard",
-  backgroundColor: "$card",
+  backgroundColor: "$color2",
+  borderRadius: "$4",
   overflow: "hidden",
   variants: {
     variant: {
       flat: {},
       elevated: {
-        shadowColor: "$shadowColor",
+        shadowColor: "$shadow2",
         shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
         shadowRadius: 8,
         elevation: 3
       },
       outlined: {
         borderWidth: 1,
-        borderColor: "$border"
+        borderColor: "$color5"
       }
     },
     size: {
-      sm: { borderRadius: "$4", padding: "$3" },
-      md: { borderRadius: "$6", padding: "$4" },
-      lg: { borderRadius: "$7", padding: "$5" }
+      sm: { borderRadius: "$3", padding: "$3" },
+      md: { borderRadius: "$4", padding: "$4" },
+      lg: { borderRadius: "$5", padding: "$5" }
     },
     pressable: {
       true: {
@@ -393,88 +252,71 @@ var CardFrame = styled3(View2, {
     size: "md"
   }
 });
-var CardHeader = styled3(View2, {
-  name: "BlinkCardHeader",
-  paddingBottom: "$3"
-});
-var CardContent = styled3(View2, {
-  name: "BlinkCardContent"
-});
-var CardFooter = styled3(View2, {
+var CardHeader = styled3(View, { name: "BlinkCardHeader", paddingBottom: "$3" });
+var CardContent = styled3(View, { name: "BlinkCardContent" });
+var CardFooter = styled3(View, {
   name: "BlinkCardFooter",
   paddingTop: "$3",
   flexDirection: "row",
   alignItems: "center",
   gap: "$2"
 });
-var Card = withStaticProperties2(CardFrame, {
+var Card = withStaticProperties(CardFrame, {
   Header: CardHeader,
   Content: CardContent,
   Footer: CardFooter
 });
 
 // src/primitives/Input.tsx
-import { styled as styled4, View as View3, Text as Text3, Input as TamaguiInput } from "tamagui";
+import { Input as TamaguiInput, styled as styled4, View as View2, SizableText as SizableText2 } from "tamagui";
 import { jsx, jsxs } from "react/jsx-runtime";
-var InputFrame = styled4(View3, {
+var InputFrame = styled4(View2, {
   name: "BlinkInputFrame",
   gap: "$1.5"
 });
-var InputLabel = styled4(Text3, {
+var InputLabel = styled4(SizableText2, {
   name: "BlinkInputLabel",
-  fontFamily: "$body",
-  fontSize: "$4",
+  size: "$4",
   fontWeight: "500",
-  color: "$textSecondary"
+  color: "$color11"
 });
 var InputField = styled4(TamaguiInput, {
   name: "BlinkInput",
-  fontFamily: "$body",
-  fontSize: "$5",
-  color: "$color",
-  backgroundColor: "$background",
-  borderWidth: 1,
-  borderColor: "$border",
-  borderRadius: "$6",
-  height: "$14",
-  paddingHorizontal: "$4",
-  placeholderTextColor: "$textMuted",
-  focusStyle: {
-    borderColor: "$primary",
-    borderWidth: 2
+  height: 50,
+  size: "$5",
+  borderWidth: 0.5,
+  borderColor: "$color5",
+  borderRadius: "$4",
+  backgroundColor: "$color1",
+  placeholderTextColor: "$color8",
+  focusVisibleStyle: {
+    outlineWidth: 3,
+    outlineStyle: "solid",
+    outlineColor: "$background04",
+    outlineOffset: 1,
+    borderWidth: 0.5,
+    borderColor: "$color7"
   },
   variants: {
     hasError: {
       true: {
-        borderColor: "$error",
-        focusStyle: { borderColor: "$error" }
+        borderColor: "$red9",
+        focusVisibleStyle: { borderColor: "$red9" }
       }
     },
     variant: {
       default: {},
       filled: {
-        backgroundColor: "$surface",
+        backgroundColor: "$color2",
         borderColor: "transparent",
-        focusStyle: { borderColor: "$primary" }
+        focusVisibleStyle: { borderColor: "$color7" }
       }
     }
   },
-  defaultVariants: {
-    variant: "default"
-  }
-});
-var InputError = styled4(Text3, {
-  name: "BlinkInputError",
-  fontFamily: "$body",
-  fontSize: "$2",
-  color: "$error"
-});
-var InputHint = styled4(Text3, {
-  name: "BlinkInputHint",
-  fontFamily: "$body",
-  fontSize: "$2",
-  color: "$textMuted"
+  defaultVariants: { variant: "default" }
 });
+var InputError = styled4(SizableText2, { name: "BlinkInputError", size: "$2", color: "$red10" });
+var InputHint = styled4(SizableText2, { name: "BlinkInputHint", size: "$2", color: "$color9" });
 function Input({ label, error, hint, ...props }) {
   return /* @__PURE__ */ jsxs(InputFrame, { children: [
     label && /* @__PURE__ */ jsx(InputLabel, { children: label }),
@@ -485,69 +327,1574 @@ function Input({ label, error, hint, ...props }) {
 }
 
 // src/primitives/Avatar.tsx
-import { styled as styled5, View as View4, Text as Text4, Image } from "tamagui";
+import { memo } from "react";
+import { Circle, Image, SizableText as SizableText3 } from "tamagui";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var AvatarFrame = styled5(View4, {
-  name: "BlinkAvatar",
-  alignItems: "center",
-  justifyContent: "center",
-  overflow: "hidden",
-  backgroundColor: "$primary",
+var simpleSizes = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48,
+  xl: 64
+};
+function getSize(size) {
+  if (typeof size === "number") return size;
+  return simpleSizes[size] ?? 40;
+}
+var Avatar = memo(({ uri, name, size: sizeIn = "md" }) => {
+  const size = getSize(sizeIn);
+  return /* @__PURE__ */ jsx2(
+    Circle,
+    {
+      size,
+      overflow: "hidden",
+      backgroundColor: "$color4",
+      alignItems: "center",
+      justifyContent: "center",
+      children: uri ? /* @__PURE__ */ jsx2(
+        Image,
+        {
+          source: { uri },
+          width: size,
+          height: size,
+          objectFit: "cover"
+        }
+      ) : /* @__PURE__ */ jsx2(
+        SizableText3,
+        {
+          size: "$3",
+          fontWeight: "600",
+          color: "$color11",
+          children: name ? name.split(" ").map((p) => p[0]).join("").toUpperCase().slice(0, 2) : "?"
+        }
+      )
+    }
+  );
+});
+
+// src/interface/Headings.tsx
+import { Separator, SizableText as SizableText4, XStack, styled as styled5 } from "tamagui";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var H1 = styled5(SizableText4, {
+  name: "BlinkH1",
+  role: "heading",
+  fontFamily: "$heading",
+  size: "$10",
+  fontWeight: "700"
+});
+var H2 = styled5(SizableText4, {
+  name: "BlinkH2",
+  role: "heading",
+  fontFamily: "$heading",
+  size: "$9",
+  fontWeight: "700"
+});
+var H3 = styled5(SizableText4, {
+  name: "BlinkH3",
+  role: "heading",
+  fontFamily: "$heading",
+  size: "$8",
+  fontWeight: "600"
+});
+var H4 = styled5(SizableText4, {
+  name: "BlinkH4",
+  role: "heading",
+  fontFamily: "$heading",
+  size: "$6",
+  fontWeight: "600"
+});
+var H5 = styled5(SizableText4, {
+  name: "BlinkH5",
+  role: "heading",
+  fontFamily: "$heading",
+  size: "$5",
+  fontWeight: "500"
+});
+var H6 = styled5(SizableText4, {
+  name: "BlinkH6",
+  role: "heading",
+  fontFamily: "$heading",
+  size: "$4",
+  fontWeight: "500"
+});
+var SubHeading = styled5(SizableText4, {
+  name: "BlinkSubHeading",
+  size: "$5",
+  color: "$color10",
+  fontWeight: "300",
+  $lg: { size: "$6" }
+});
+function SepHeading({ children }) {
+  return /* @__PURE__ */ jsxs2(XStack, { marginTop: "$6", marginBottom: "$4", alignItems: "center", gap: "$6", children: [
+    /* @__PURE__ */ jsx3(H3, { size: "$4", color: "$color10", children }),
+    /* @__PURE__ */ jsx3(Separator, { opacity: 0.5 })
+  ] });
+}
+
+// src/interface/PageContainer.tsx
+import { styled as styled6, YStack } from "tamagui";
+var PageContainer = styled6(YStack, {
+  name: "BlinkPageContainer",
+  position: "relative",
+  marginHorizontal: "auto",
+  flex: 1,
+  flexBasis: "auto",
+  paddingHorizontal: "$4",
+  width: "100%",
+  minWidth: 380,
+  $md: { maxWidth: 760 },
+  $lg: { maxWidth: 860 },
+  $xl: { maxWidth: 1140 }
+});
+var PageMainContainer = styled6(PageContainer, {
+  name: "BlinkPageMainContainer",
+  role: "main"
+});
+
+// src/interface/Dialog.tsx
+import { useState, useEffect } from "react";
+import { AlertDialog, Button as Button2, XStack as XStack2, YStack as YStack2 } from "tamagui";
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var globalShowDialog = null;
+function DialogProvider({ children }) {
+  const [state, setState] = useState({
+    type: null,
+    title: "",
+    description: ""
+  });
+  useEffect(() => {
+    globalShowDialog = (newState) => setState({ ...newState, resolve: newState.resolve });
+    return () => {
+      globalShowDialog = null;
+    };
+  }, []);
+  const handleClose = (confirmed) => {
+    if (!state.resolve) return;
+    const resolve = state.resolve;
+    setState({ type: null, title: "", description: "" });
+    resolve(confirmed);
+  };
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsx4(
+      AlertDialog,
+      {
+        open: state.type !== null,
+        onOpenChange: (open) => {
+          if (!open && state.type !== null) handleClose(false);
+        },
+        children: /* @__PURE__ */ jsxs3(AlertDialog.Portal, { children: [
+          /* @__PURE__ */ jsx4(
+            AlertDialog.Overlay,
+            {
+              opacity: 0.5,
+              enterStyle: { opacity: 0 },
+              exitStyle: { opacity: 0 }
+            },
+            "overlay"
+          ),
+          /* @__PURE__ */ jsx4(
+            AlertDialog.Content,
+            {
+              bordered: true,
+              elevate: true,
+              enterStyle: { x: 0, y: -20, opacity: 0, scale: 0.9 },
+              exitStyle: { x: 0, y: 10, opacity: 0, scale: 0.95 },
+              x: 0,
+              scale: 1,
+              opacity: 1,
+              y: 0,
+              width: "90%",
+              maxWidth: 400,
+              children: /* @__PURE__ */ jsxs3(YStack2, { gap: "$4", children: [
+                /* @__PURE__ */ jsx4(AlertDialog.Title, { size: "$6", children: state.title }),
+                /* @__PURE__ */ jsx4(AlertDialog.Description, { size: "$3", color: "$color11", children: state.description }),
+                /* @__PURE__ */ jsx4(XStack2, { gap: "$3", justifyContent: "flex-end", children: state.type === "confirm" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+                  /* @__PURE__ */ jsx4(Button2, { onPress: () => handleClose(false), children: "Cancel" }),
+                  /* @__PURE__ */ jsx4(Button2, { theme: "blue", onPress: () => handleClose(true), children: "Confirm" })
+                ] }) : /* @__PURE__ */ jsx4(Button2, { theme: "blue", onPress: () => handleClose(false), children: "OK" }) })
+              ] })
+            },
+            "content"
+          )
+        ] })
+      }
+    )
+  ] });
+}
+var showError = (error, title = "Error") => {
+  let description = "An unexpected error occurred";
+  if (error instanceof Error) description = error.message;
+  else if (typeof error === "string") description = error;
+  else if (error && typeof error === "object" && "message" in error)
+    description = String(error.message);
+  if (globalShowDialog) globalShowDialog({ type: "error", title, description });
+  else console.error(`${title}: ${description}`);
+};
+var dialogConfirm = async (props) => {
+  const { title = "Confirm", description = "Are you sure?" } = props;
+  if (!globalShowDialog) {
+    console.error("DialogProvider not mounted");
+    return false;
+  }
+  return new Promise((resolve) => {
+    globalShowDialog({ type: "confirm", title, description, resolve });
+  });
+};
+
+// src/interface/Pressable.tsx
+import { styled as styled7, View as View3 } from "tamagui";
+var Pressable = styled7(View3, {
+  name: "BlinkPressable",
+  hitSlop: 10,
+  pressStyle: { opacity: 0.5 }
+});
+
+// src/interface/Image.tsx
+import { styled as styled8, Image as TamaguiImage } from "tamagui";
+var Image2 = styled8(TamaguiImage, {
+  name: "BlinkImage"
+});
+
+// src/interface/Badge.tsx
+import { styled as styled9, SizableText as SizableText5, View as View4 } from "tamagui";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var BadgeFrame = styled9(View4, {
+  name: "BlinkBadge",
+  paddingHorizontal: "$2",
+  paddingVertical: "$1",
+  borderRadius: "$10",
+  backgroundColor: "$color3",
+  alignSelf: "flex-start",
   variants: {
-    size: {
-      xs: { width: 24, height: 24, borderRadius: 12 },
-      sm: { width: 32, height: 32, borderRadius: 16 },
-      md: { width: 40, height: 40, borderRadius: 20 },
-      lg: { width: 48, height: 48, borderRadius: 24 },
-      xl: { width: 64, height: 64, borderRadius: 32 },
-      xxl: { width: 80, height: 80, borderRadius: 40 }
+    variant: {
+      default: { backgroundColor: "$color3" },
+      success: { backgroundColor: "$green3" },
+      warning: { backgroundColor: "$yellow3" },
+      error: { backgroundColor: "$red3" },
+      info: { backgroundColor: "$blue3" }
     }
   },
-  defaultVariants: {
-    size: "md"
-  }
+  defaultVariants: { variant: "default" }
 });
-var AvatarInitials = styled5(Text4, {
-  name: "BlinkAvatarInitials",
-  fontFamily: "$body",
+var BadgeText = styled9(SizableText5, {
+  name: "BlinkBadgeText",
+  size: "$2",
   fontWeight: "600",
-  color: "$textInverse",
+  color: "$color11"
+});
+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, XStack as XStack6, YStack as YStack5 } from "tamagui";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var ToastContext = createContext(null);
+var variantStyles = {
+  default: { bg: "$color3", border: "$color6", icon: "\u2139" },
+  success: { bg: "$green2", border: "$green7", icon: "\u2713" },
+  error: { bg: "$red2", border: "$red7", icon: "\u2715" },
+  warning: { bg: "$yellow2", border: "$yellow7", icon: "!" }
+};
+var globalToastShow = null;
+var toast = (title, options) => {
+  const opts = typeof options === "string" ? { variant: options } : options;
+  if (globalToastShow) globalToastShow(title, opts);
+  else console.warn("BlinkToastProvider not mounted");
+};
+function BlinkToastProvider({ children }) {
+  const [toasts, setToasts] = useState4([]);
+  const show = useCallback((title, options) => {
+    const id = Math.random().toString(36).slice(2, 9);
+    const entry = {
+      id,
+      title,
+      message: options?.message,
+      variant: options?.variant ?? "default",
+      duration: options?.duration ?? 3e3
+    };
+    setToasts((prev) => [...prev, entry]);
+    setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), entry.duration);
+  }, []);
+  useEffect2(() => {
+    globalToastShow = show;
+    return () => {
+      globalToastShow = null;
+    };
+  }, [show]);
+  const dismiss = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  return /* @__PURE__ */ jsxs5(ToastContext.Provider, { value: { show }, children: [
+    children,
+    /* @__PURE__ */ jsx10(
+      YStack5,
+      {
+        position: "absolute",
+        top: 50,
+        left: 0,
+        right: 0,
+        alignItems: "center",
+        gap: "$2",
+        pointerEvents: "box-none",
+        zIndex: 1e5,
+        paddingHorizontal: "$4",
+        children: toasts.map((t) => {
+          const style = variantStyles[t.variant ?? "default"];
+          return /* @__PURE__ */ jsxs5(
+            XStack6,
+            {
+              width: "100%",
+              maxWidth: 400,
+              backgroundColor: style.bg,
+              borderWidth: 1,
+              borderColor: style.border,
+              borderRadius: "$4",
+              paddingHorizontal: "$4",
+              paddingVertical: "$3",
+              gap: "$3",
+              alignItems: "flex-start",
+              enterStyle: { opacity: 0, y: -20, scale: 0.95 },
+              exitStyle: { opacity: 0, y: -20, scale: 0.95 },
+              opacity: 1,
+              y: 0,
+              scale: 1,
+              animation: "quick",
+              pointerEvents: "auto",
+              elevation: 4,
+              children: [
+                /* @__PURE__ */ jsx10(SizableText10, { size: "$4", fontWeight: "700", marginTop: "$0.5", children: style.icon }),
+                /* @__PURE__ */ jsxs5(YStack5, { flex: 1, gap: "$1", children: [
+                  /* @__PURE__ */ jsx10(SizableText10, { size: "$4", fontWeight: "600", color: "$color12", children: t.title }),
+                  t.message && /* @__PURE__ */ jsx10(SizableText10, { size: "$3", color: "$color10", children: t.message })
+                ] }),
+                /* @__PURE__ */ jsx10(
+                  SizableText10,
+                  {
+                    size: "$3",
+                    color: "$color8",
+                    fontWeight: "600",
+                    pressStyle: { opacity: 0.5 },
+                    onPress: () => dismiss(t.id),
+                    cursor: "pointer",
+                    marginTop: "$0.5",
+                    children: "\u2715"
+                  }
+                )
+              ]
+            },
+            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 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__ */ 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__ */ 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 YStack8 } from "tamagui";
+var ScreenLayout = styled10(YStack8, {
+  name: "BlinkScreenLayout",
+  flex: 1,
+  backgroundColor: "$background",
   variants: {
-    size: {
-      xs: { fontSize: 10 },
-      sm: { fontSize: 12 },
-      md: { fontSize: 14 },
-      lg: { fontSize: 18 },
-      xl: { fontSize: 24 },
-      xxl: { fontSize: 30 }
+    padded: {
+      true: { padding: "$4" }
+    },
+    centered: {
+      true: { alignItems: "center", justifyContent: "center" }
+    },
+    safe: {
+      true: { paddingTop: "$6" }
     }
-  },
-  defaultVariants: {
-    size: "md"
   }
 });
-function getInitials(name) {
-  return name.split(" ").map((p) => p[0]).join("").toUpperCase().slice(0, 2);
+
+// src/layouts/Section.tsx
+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__ */ 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 SizableText15, XStack as XStack7, YStack as YStack10, View as View5 } from "tamagui";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var ListItemFrame = styled11(XStack7, {
+  name: "BlinkListItem",
+  alignItems: "center",
+  gap: "$3",
+  padding: "$3",
+  borderRadius: "$3",
+  variants: {
+    pressable: {
+      true: {
+        cursor: "pointer",
+        hoverStyle: { backgroundColor: "$color2" },
+        pressStyle: { backgroundColor: "$color3", opacity: 0.9 }
+      }
+    }
+  }
+});
+function ListItem({ icon, title, subtitle, right, onPress }) {
+  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 Separator3, SizableText as SizableText16, XStack as XStack8 } from "tamagui";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+function Divider({ label }) {
+  if (!label) return /* @__PURE__ */ jsx16(Separator3, { borderColor: "$color4" });
+  return /* @__PURE__ */ jsxs11(XStack8, { 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 YStack11 } from "tamagui";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function KeyboardStickyFooter({ children, offset }) {
+  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 { Children } from "react";
+import { XStack as XStack9, YStack as YStack13 } from "tamagui";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+function Grid({ children, columns = 2, gap = "$3" }) {
+  const items = Children.toArray(children);
+  const rows = [];
+  for (let i = 0; i < items.length; i += columns) {
+    rows.push(items.slice(i, i + columns));
+  }
+  return /* @__PURE__ */ jsx19(YStack13, { gap, children: rows.map((row, ri) => /* @__PURE__ */ jsxs12(XStack9, { gap, children: [
+    row.map((item, ci) => /* @__PURE__ */ jsx19(YStack13, { flex: 1, children: item }, ci)),
+    row.length < columns && Array.from({ length: columns - row.length }).map((_, i) => /* @__PURE__ */ jsx19(YStack13, { flex: 1 }, `pad-${i}`))
+  ] }, ri)) });
+}
+function Container({ children, maxWidth = 500, centered = true, padding = "$4" }) {
+  return /* @__PURE__ */ jsx19(YStack13, { width: "100%", maxWidth, alignSelf: centered ? "center" : void 0, padding, children });
+}
+
+// src/patterns/PaywallScreen.tsx
+import { Button as Button3, SizableText as SizableText17, XStack as XStack10, YStack as YStack14, Circle as Circle2 } from "tamagui";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+function PaywallScreen({
+  title = "Upgrade Your Experience",
+  subtitle = "Choose the plan that works for you",
+  plans,
+  selectedPlan,
+  onSelectPlan,
+  onContinue,
+  onRestore,
+  continueLabel = "Continue"
+}) {
+  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(
+      YStack14,
+      {
+        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",
+        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)) })
+        ]
+      },
+      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 { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+function OnboardingCarousel({
+  steps,
+  onComplete,
+  onSkip,
+  completeLabel = "Get Started",
+  skipLabel = "Skip",
+  nextLabel = "Next"
+}) {
+  const [current, setCurrent] = useState5(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 }),
+      /* @__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 })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs14(YStack15, { gap: "$3", paddingBottom: "$2", children: [
+      /* @__PURE__ */ jsx21(XStack11, { justifyContent: "center", gap: "$2", children: steps.map((_, i) => /* @__PURE__ */ jsx21(
+        Circle3,
+        {
+          size: 8,
+          backgroundColor: i === current ? "$color9" : "$color4",
+          animation: "quick"
+        },
+        i
+      )) }),
+      /* @__PURE__ */ jsx21(
+        Button4,
+        {
+          size: "$5",
+          backgroundColor: "$color9",
+          color: "$color1",
+          borderRadius: "$5",
+          hoverStyle: { backgroundColor: "$color10" },
+          pressStyle: { backgroundColor: "$color8" },
+          onPress: () => isLast ? onComplete?.() : setCurrent((c) => c + 1),
+          children: isLast ? completeLabel : nextLabel
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/patterns/ChatBubble.tsx
+import { SizableText as SizableText19, XStack as XStack12, YStack as YStack16, Circle as Circle4, Image as Image3 } from "tamagui";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+function ChatBubble({ message, showAvatar = true }) {
+  const isUser = message.sender === "user";
+  return /* @__PURE__ */ jsxs15(
+    XStack12,
+    {
+      alignSelf: isUser ? "flex-end" : "flex-start",
+      maxWidth: "75%",
+      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() ?? "?" }) }),
+        /* @__PURE__ */ jsxs15(
+          YStack16,
+          {
+            backgroundColor: isUser ? "$color9" : "$color3",
+            paddingHorizontal: "$3",
+            paddingVertical: "$2.5",
+            borderRadius: "$5",
+            borderBottomRightRadius: isUser ? "$2" : "$5",
+            borderBottomLeftRadius: isUser ? "$5" : "$2",
+            gap: "$1",
+            children: [
+              /* @__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 })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/patterns/SettingsScreen.tsx
+import { Separator as Separator4, SizableText as SizableText20, Switch, XStack as XStack13, YStack as YStack17 } from "tamagui";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+function SettingsItemRow({ item }) {
+  return /* @__PURE__ */ jsxs16(
+    XStack13,
+    {
+      alignItems: "center",
+      gap: "$3",
+      paddingVertical: "$3",
+      paddingHorizontal: "$4",
+      hoverStyle: item.onPress ? { backgroundColor: "$color2" } : void 0,
+      pressStyle: item.onPress ? { backgroundColor: "$color3" } : void 0,
+      onPress: item.onPress,
+      cursor: item.onPress ? "pointer" : void 0,
+      children: [
+        item.icon && /* @__PURE__ */ jsx23(YStack17, { width: 24, alignItems: "center", children: item.icon }),
+        /* @__PURE__ */ jsxs16(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__ */ 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 Avatar({ uri, name, size = "md", ...props }) {
-  if (uri) {
-    return /* @__PURE__ */ jsx2(AvatarFrame, { size, ...props, children: /* @__PURE__ */ jsx2(
-      Image,
+function SettingsScreen({ sections, header }) {
+  return /* @__PURE__ */ jsxs16(YStack17, { flex: 1, backgroundColor: "$background", children: [
+    header,
+    /* @__PURE__ */ jsx23(YStack17, { gap: "$4", paddingVertical: "$2", children: sections.map((section, si) => /* @__PURE__ */ jsxs16(YStack17, { children: [
+      section.title && /* @__PURE__ */ jsx23(
+        SizableText20,
+        {
+          size: "$2",
+          fontWeight: "600",
+          color: "$color9",
+          paddingHorizontal: "$4",
+          paddingBottom: "$2",
+          textTransform: "uppercase",
+          children: section.title
+        }
+      ),
+      /* @__PURE__ */ jsx23(YStack17, { backgroundColor: "$color1", borderRadius: "$4", marginHorizontal: "$3", overflow: "hidden", children: section.items.map((item, ii) => /* @__PURE__ */ jsxs16(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 SizableText21, YStack as YStack18 } from "tamagui";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+function EmptyState({ icon, title, description, actionLabel, onAction }) {
+  return /* @__PURE__ */ jsxs17(YStack18, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$4", padding: "$6", children: [
+    icon,
+    /* @__PURE__ */ jsxs17(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__ */ jsx24(
+      Button5,
+      {
+        size: "$4",
+        backgroundColor: "$color9",
+        color: "$color1",
+        borderRadius: "$4",
+        hoverStyle: { backgroundColor: "$color10" },
+        pressStyle: { backgroundColor: "$color8" },
+        onPress: onAction,
+        children: actionLabel
+      }
+    )
+  ] });
+}
+
+// src/patterns/ProfileHeader.tsx
+import { Circle as Circle5, Image as Image4, SizableText as SizableText22, XStack as XStack14, YStack as YStack19 } from "tamagui";
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+function ProfileHeader({ name, subtitle, avatar, stats, actions }) {
+  return /* @__PURE__ */ jsxs18(YStack19, { alignItems: "center", gap: "$4", paddingVertical: "$6", paddingHorizontal: "$4", children: [
+    /* @__PURE__ */ jsx25(Circle5, { size: 80, backgroundColor: "$color4", overflow: "hidden", children: avatar ? /* @__PURE__ */ jsx25(Image4, { source: { uri: avatar }, width: 80, height: 80, objectFit: "cover" }) : /* @__PURE__ */ jsx25(SizableText22, { size: "$9", fontWeight: "700", color: "$color11", children: name[0]?.toUpperCase() ?? "?" }) }),
+    /* @__PURE__ */ jsxs18(YStack19, { alignItems: "center", gap: "$1", children: [
+      /* @__PURE__ */ jsx25(SizableText22, { size: "$7", fontWeight: "700", children: name }),
+      subtitle && /* @__PURE__ */ jsx25(SizableText22, { size: "$4", color: "$color10", children: subtitle })
+    ] }),
+    stats && stats.length > 0 && /* @__PURE__ */ jsx25(XStack14, { gap: "$6", children: stats.map((stat, i) => /* @__PURE__ */ jsxs18(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 XStack15, YStack as YStack20 } from "tamagui";
+import { jsx as jsx26, jsxs as jsxs19 } 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__ */ jsxs19(XStack15, { height: 56, alignItems: "center", paddingHorizontal: "$4", gap: "$3", children: [
+        leftContent,
+        /* @__PURE__ */ jsxs19(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 XStack16, YStack as YStack21 } from "tamagui";
+import { ScrollView as ScrollView2 } 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 }) {
+  return /* @__PURE__ */ jsxs20(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__ */ jsxs20(Sheet.Frame, { borderTopLeftRadius: "$6", borderTopRightRadius: "$6", backgroundColor: "$background", children: [
+      (title || showClose) && /* @__PURE__ */ jsxs20(XStack16, { 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(
+          XStack16,
+          {
+            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 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("");
+  return /* @__PURE__ */ jsxs21(YStack22, { flex: 1, padding: "$4", gap: "$5", backgroundColor: "$background", justifyContent: "center", children: [
+    /* @__PURE__ */ jsxs21(YStack22, { alignItems: "center", gap: "$2", children: [
+      logo && /* @__PURE__ */ jsx28(YStack22, { paddingBottom: "$3", children: logo }),
+      /* @__PURE__ */ jsx28(SizableText25, { size: "$9", fontWeight: "700", textAlign: "center", children: title }),
+      /* @__PURE__ */ jsx28(SizableText25, { size: "$4", color: "$color10", textAlign: "center", children: subtitle })
+    ] }),
+    providers.length > 0 && /* @__PURE__ */ jsx28(YStack22, { gap: "$2.5", children: providers.map((p) => /* @__PURE__ */ jsx28(
+      Button6,
+      {
+        size: "$5",
+        borderWidth: 1.5,
+        borderColor: "$color5",
+        backgroundColor: "$color1",
+        borderRadius: "$4",
+        disabled: loading,
+        onPress: () => onProviderPress?.(p.id),
+        hoverStyle: { backgroundColor: "$color2" },
+        pressStyle: { backgroundColor: "$color3" },
+        children: /* @__PURE__ */ jsxs21(XStack17, { alignItems: "center", gap: "$2", children: [
+          p.icon,
+          /* @__PURE__ */ jsx28(SizableText25, { size: "$4", fontWeight: "500", children: p.name })
+        ] })
+      },
+      p.id
+    )) }),
+    showEmailForm && providers.length > 0 && /* @__PURE__ */ jsx28(Divider, { label: "or" }),
+    showEmailForm && /* @__PURE__ */ jsxs21(YStack22, { gap: "$3", children: [
+      /* @__PURE__ */ jsx28(Input, { label: "Email", placeholder: "your@email.com", value: email, onChangeText: setEmail, keyboardType: "email-address", autoCapitalize: "none" }),
+      /* @__PURE__ */ jsx28(Input, { label: "Password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", value: password, onChangeText: setPassword, secureTextEntry: true }),
+      onForgotPassword && /* @__PURE__ */ jsx28(XStack17, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx28(SizableText25, { size: "$3", color: "$color9", onPress: onForgotPassword, children: "Forgot password?" }) }),
+      /* @__PURE__ */ jsx28(
+        Button6,
+        {
+          size: "$5",
+          backgroundColor: "$color9",
+          color: "$color1",
+          borderRadius: "$5",
+          disabled: loading,
+          onPress: () => onEmailSubmit?.(email, password),
+          hoverStyle: { backgroundColor: "$color10" },
+          pressStyle: { backgroundColor: "$color8" },
+          icon: loading ? /* @__PURE__ */ jsx28(Spinner, { size: "small", color: "$color1" }) : void 0,
+          children: "Sign In"
+        }
+      ),
+      onCreateAccount && /* @__PURE__ */ jsx28(Button6, { size: "$3", chromeless: true, onPress: onCreateAccount, children: /* @__PURE__ */ jsx28(SizableText25, { size: "$3", color: "$color9", children: "Create Account" }) })
+    ] }),
+    (onTerms || onPrivacy) && /* @__PURE__ */ jsx28(YStack22, { paddingTop: "$2", alignItems: "center", children: /* @__PURE__ */ jsxs21(SizableText25, { size: "$2", color: "$color8", textAlign: "center", children: [
+      "By continuing you agree to our",
+      " ",
+      onTerms && /* @__PURE__ */ jsx28(SizableText25, { size: "$2", color: "$color9", onPress: onTerms, children: "Terms of Service" }),
+      onTerms && onPrivacy && " & ",
+      onPrivacy && /* @__PURE__ */ jsx28(SizableText25, { size: "$2", color: "$color9", onPress: onPrivacy, children: "Privacy Policy" })
+    ] }) })
+  ] });
+}
+
+// src/patterns/TabBar.tsx
+import { SizableText as SizableText26, XStack as XStack18, YStack as YStack23 } from "tamagui";
+import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
+  return /* @__PURE__ */ jsx29(XStack18, { height: 56, borderTopWidth: 1, borderTopColor: "$borderColor", backgroundColor: "$background", paddingBottom: "$2", children: tabs.map((tab) => {
+    const active = tab.id === activeTab;
+    return /* @__PURE__ */ jsxs22(
+      YStack23,
       {
-        source: { uri },
-        style: { width: "100%", height: "100%" },
-        resizeMode: "cover"
+        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 XStack19 } from "tamagui";
+import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+function SearchBar({ value, onChangeText, placeholder = "Search\u2026", onFilter, onCancel, autoFocus }) {
+  return /* @__PURE__ */ jsxs23(XStack19, { 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 XStack20 } from "tamagui";
+import { jsx as jsx31, jsxs as jsxs24 } 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__ */ jsxs24(
+    XStack20,
+    {
+      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 XStack21, YStack as YStack24 } from "tamagui";
+import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
+function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel = "Cancel" }) {
+  return /* @__PURE__ */ jsxs25(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__ */ jsxs25(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__ */ jsxs25(
+        XStack21,
+        {
+          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(
+        XStack21,
+        {
+          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 XStack22, YStack as YStack26 } from "tamagui";
+import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
+var variantColors = {
+  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 = variantColors[variant];
+  return /* @__PURE__ */ jsxs26(
+    XStack22,
+    {
+      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__ */ jsxs26(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 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") {
+    const progress = steps.length > 1 ? currentStep / (steps.length - 1) * 100 : 100;
+    return /* @__PURE__ */ jsxs27(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(XStack23, { justifyContent: "space-between", children: steps.map((label, i) => /* @__PURE__ */ jsx35(SizableText31, { size: "$2", color: i <= currentStep ? "$color9" : "$color8", children: label }, i)) })
+    ] });
   }
-  return /* @__PURE__ */ jsx2(AvatarFrame, { size, ...props, children: /* @__PURE__ */ jsx2(AvatarInitials, { size, children: name ? getInitials(name) : "?" }) });
+  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(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 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 actions = [...leftActions ?? [], ...rightActions ?? []];
+  if (actions.length === 0) return /* @__PURE__ */ jsx36(Fragment2, { children });
+  return /* @__PURE__ */ jsxs28(YStack28, { children: [
+    /* @__PURE__ */ jsx36(YStack28, { onLongPress: () => setShowActions((v) => !v), pressStyle: { opacity: 0.9 }, children }),
+    showActions && /* @__PURE__ */ jsx36(XStack24, { gap: "$2", padding: "$2", animation: "quick", enterStyle: { opacity: 0, scale: 0.95 }, children: actions.map((action) => /* @__PURE__ */ jsx36(
+      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 XStack25, YStack as YStack29 } from "tamagui";
+import { LinearGradient } from "tamagui/linear-gradient";
+import { jsx as jsx37, jsxs as jsxs29 } 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__ */ jsxs29(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(
+          XStack25,
+          {
+            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__ */ jsxs29(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 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 { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
+function Carousel({ children, gap = "$3", snapToInterval, showIndicators = false }) {
+  const [activeIndex, setActiveIndex] = useState8(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,
+      {
+        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(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)) })
+  ] });
+}
+
+// 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 {
-  Avatar,
+  Accordion,
+  ActionSheet,
+  Adapt,
+  AlertDialog2 as AlertDialog,
+  Anchor,
+  AnimatePresence,
+  AppHeader,
+  Article,
+  Aside,
+  Avatar2 as Avatar,
+  Badge,
+  BlinkAccordion,
+  Avatar as BlinkAvatar,
+  Button as BlinkButton,
+  Card as BlinkCard,
+  Input as BlinkInput,
+  TamaguiProvider2 as BlinkProvider,
+  BlinkTabs,
   BlinkText,
-  Button,
-  Card,
-  Input,
-  blinkConfig
+  BlinkToastProvider,
+  BlinkToggleGroup,
+  BlinkTooltip,
+  BottomSheet,
+  Button8 as Button,
+  Card2 as Card,
+  Carousel,
+  ChatBubble,
+  Checkbox,
+  Circle8 as Circle,
+  Container,
+  Dialog,
+  DialogProvider,
+  Divider,
+  EmptyState,
+  EnsureFlexed,
+  Fieldset,
+  FloatingActionButton,
+  Footer,
+  Form,
+  FormField,
+  Frame,
+  Grid,
+  Group,
+  H12 as H1,
+  H22 as H2,
+  H32 as H3,
+  H42 as H4,
+  H52 as H5,
+  H62 as H6,
+  Header,
+  Heading,
+  ICONS,
+  Icon,
+  Image2 as Image,
+  Input3 as Input,
+  KeyboardStickyFooter,
+  Label,
+  ListItem,
+  LoginScreen,
+  Main,
+  MediaCard,
+  Nav,
+  NotificationBanner,
+  OnboardingCarousel,
+  PageContainer,
+  PageMainContainer,
+  Paragraph,
+  PaywallScreen,
+  Popover2 as Popover,
+  Portal,
+  PortalHost,
+  PortalItem,
+  PortalProvider,
+  Pressable,
+  ProfileHeader,
+  Progress,
+  ProgressSteps,
+  PullToRefresh,
+  RadioGroup,
+  SafeArea,
+  ScreenLayout,
+  ScrollView5 as ScrollView,
+  SearchBar,
+  Section,
+  Select,
+  SepHeading,
+  Separator5 as Separator,
+  SettingsScreen,
+  Sheet3 as Sheet,
+  SizableStack,
+  SizableText34 as SizableText,
+  Skeleton,
+  Slider,
+  Spacer,
+  Spinner2 as Spinner,
+  Square,
+  Stack,
+  StepPageLayout,
+  SubHeading,
+  SwipeableRow,
+  Switch2 as Switch,
+  TabBar,
+  Tabs,
+  Image6 as TamaguiImage,
+  ListItem2 as TamaguiListItem,
+  TamaguiProvider,
+  Text,
+  TextArea,
+  Theme,
+  ThemeableStack,
+  ToggleGroup,
+  Tooltip,
+  TooltipSimple,
+  Unspaced,
+  View6 as View,
+  VisuallyHidden,
+  XGroup,
+  XStack27 as XStack,
+  YGroup,
+  YStack32 as YStack,
+  ZStack,
+  addTheme,
+  blinkConfig,
+  composeEventHandlers,
+  composeRefs,
+  createFont,
+  createMedia,
+  createStyledContext,
+  createTamagui2 as createTamagui,
+  createTheme,
+  createTokens,
+  createVariable,
+  dialogConfirm,
+  getConfig,
+  getToken,
+  getTokenValue,
+  getTokens,
+  isClient,
+  isWeb,
+  replaceTheme,
+  showError,
+  styled12 as styled,
+  defaultConfig2 as tamaguiDefaultConfig,
+  toast,
+  updateTheme,
+  useBlinkToast,
+  useComposedRefs,
+  useControllableState,
+  useDebounce,
+  useDebounceValue,
+  useDidFinishSSR,
+  useEvent,
+  useForceUpdate,
+  useIsPresent,
+  useIsomorphicLayoutEffect,
+  useMedia,
+  usePresence,
+  useTheme,
+  useThemeName,
+  useWindowDimensions,
+  withStaticProperties2 as withStaticProperties
 };
 //# sourceMappingURL=index.mjs.map