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

package/dist/index.mjs

@@ -1,347 +1,96 @@
 // 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/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",
+    variant: "default",
     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",
-    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 +105,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 +142,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 +217,651 @@ 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/Separator.tsx
+import { Separator as TamaguiSeparator, styled as styled9 } from "tamagui";
+var Separator2 = styled9(TamaguiSeparator, {
+  name: "BlinkSeparator"
+});
+
+// src/interface/Badge.tsx
+import { styled as styled10, SizableText as SizableText5, View as View4 } from "tamagui";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var BadgeFrame = styled10(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 = styled10(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/layouts/StepPageLayout.tsx
+import { SizableText as SizableText6, YStack as YStack3 } from "tamagui";
+import { jsx as jsx6, jsxs as jsxs4 } 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 })
+    ] }) }),
+    /* @__PURE__ */ jsx6(YStack3, { paddingTop: "$5", gap: "$4", children }),
+    bottom && /* @__PURE__ */ jsx6(YStack3, { paddingTop: "$4", children: bottom })
+  ] });
+}
+
+// src/layouts/ScreenLayout.tsx
+import { styled as styled11, YStack as YStack4 } from "tamagui";
+var ScreenLayout = styled11(YStack4, {
+  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 SizableText7, YStack as YStack5 } from "tamagui";
+import { jsx as jsx7, jsxs as jsxs5 } 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 })
+    ] }),
+    children
+  ] });
 }
-function Avatar({ uri, name, size = "md", ...props }) {
-  if (uri) {
-    return /* @__PURE__ */ jsx2(AvatarFrame, { size, ...props, children: /* @__PURE__ */ jsx2(
-      Image,
-      {
-        source: { uri },
-        style: { width: "100%", height: "100%" },
-        resizeMode: "cover"
+
+// src/layouts/ListItem.tsx
+import { styled as styled12, 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 = styled12(XStack3, {
+  name: "BlinkListItem",
+  alignItems: "center",
+  gap: "$3",
+  padding: "$3",
+  borderRadius: "$3",
+  variants: {
+    pressable: {
+      true: {
+        cursor: "pointer",
+        hoverStyle: { backgroundColor: "$color2" },
+        pressStyle: { backgroundColor: "$color3", opacity: 0.9 }
       }
-    ) });
+    }
   }
-  return /* @__PURE__ */ jsx2(AvatarFrame, { size, ...props, children: /* @__PURE__ */ jsx2(AvatarInitials, { size, children: name ? getInitials(name) : "?" }) });
+});
+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 })
+    ] }),
+    right
+  ] });
+}
+
+// src/layouts/Divider.tsx
+import { Separator as Separator3, SizableText as SizableText9, XStack as XStack4 } from "tamagui";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function Divider({ label }) {
+  if (!label) return /* @__PURE__ */ jsx9(Separator3, { borderColor: "$color4" });
+  return /* @__PURE__ */ jsxs7(XStack4, { alignItems: "center", gap: "$3", children: [
+    /* @__PURE__ */ jsx9(Separator3, { flex: 1, borderColor: "$color4" }),
+    /* @__PURE__ */ jsx9(SizableText9, { size: "$2", color: "$color9", children: label }),
+    /* @__PURE__ */ jsx9(Separator3, { flex: 1, borderColor: "$color4" })
+  ] });
+}
+
+// src/layouts/KeyboardStickyFooter.tsx
+import { YStack as YStack7 } from "tamagui";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function KeyboardStickyFooter({ children, offset }) {
+  return /* @__PURE__ */ jsx10(YStack7, { maxWidth: 500, alignSelf: "center", paddingTop: "$8", paddingBottom: "$4", style: { paddingBottom: offset }, 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";
+function PaywallScreen({
+  title = "Upgrade Your Experience",
+  subtitle = "Choose the plan that works for you",
+  plans,
+  selectedPlan,
+  onSelectPlan,
+  onContinue,
+  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 })
+    ] }),
+    /* @__PURE__ */ jsx11(YStack8, { gap: "$3", flex: 1, children: plans.map((plan) => /* @__PURE__ */ jsxs8(
+      YStack8,
+      {
+        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__ */ 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: [
+                  "/",
+                  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" }) })
+          ] }),
+          /* @__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 })
+          ] }, i)) })
+        ]
+      },
+      plan.id
+    )) }),
+    /* @__PURE__ */ jsxs8(YStack8, { gap: "$3", paddingBottom: "$4", children: [
+      /* @__PURE__ */ jsx11(
+        Button3,
+        {
+          size: "$5",
+          backgroundColor: "$color9",
+          color: "$color1",
+          onPress: onContinue,
+          hoverStyle: { backgroundColor: "$color10" },
+          pressStyle: { backgroundColor: "$color8" },
+          borderRadius: "$5",
+          children: continueLabel
+        }
+      ),
+      onRestore && /* @__PURE__ */ jsx11(Button3, { size: "$3", chromeless: true, onPress: onRestore, children: /* @__PURE__ */ jsx11(SizableText10, { 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";
+function OnboardingCarousel({
+  steps,
+  onComplete,
+  onSkip,
+  completeLabel = "Get Started",
+  skipLabel = "Skip",
+  nextLabel = "Next"
+}) {
+  const [current, setCurrent] = useState2(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 })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs9(YStack9, { gap: "$4", paddingBottom: "$6", children: [
+      /* @__PURE__ */ jsx12(XStack6, { justifyContent: "center", gap: "$2", children: steps.map((_, i) => /* @__PURE__ */ jsx12(
+        Circle3,
+        {
+          size: 8,
+          backgroundColor: i === current ? "$color9" : "$color4",
+          animation: "quick"
+        },
+        i
+      )) }),
+      /* @__PURE__ */ jsx12(
+        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 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";
+function ChatBubble({ message, showAvatar = true }) {
+  const isUser = message.sender === "user";
+  return /* @__PURE__ */ jsxs10(
+    XStack7,
+    {
+      alignSelf: isUser ? "flex-end" : "flex-start",
+      maxWidth: "80%",
+      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,
+          {
+            backgroundColor: isUser ? "$color9" : "$color3",
+            paddingHorizontal: "$3",
+            paddingVertical: "$2.5",
+            borderRadius: "$5",
+            borderBottomRightRadius: isUser ? "$2" : "$5",
+            borderBottomLeftRadius: isUser ? "$5" : "$2",
+            gap: "$1",
+            children: [
+              /* @__PURE__ */ jsx13(SizableText12, { size: "$4", color: isUser ? "$color1" : "$color12", children: message.text }),
+              message.timestamp && /* @__PURE__ */ jsx13(SizableText12, { size: "$1", color: isUser ? "$color3" : "$color9", alignSelf: "flex-end", children: message.timestamp })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/patterns/SettingsScreen.tsx
+import { Separator as Separator4, SizableText as SizableText13, Switch, XStack as XStack8, YStack as YStack11 } from "tamagui";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+function SettingsItemRow({ item }) {
+  return /* @__PURE__ */ jsxs11(
+    XStack8,
+    {
+      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__ */ 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.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" })
+      ]
+    }
+  );
+}
+function SettingsScreen({ sections, header }) {
+  return /* @__PURE__ */ jsxs11(YStack11, { 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,
+        {
+          size: "$2",
+          fontWeight: "600",
+          color: "$color9",
+          paddingHorizontal: "$4",
+          paddingBottom: "$2",
+          textTransform: "uppercase",
+          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(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";
+function EmptyState({ icon, title, description, actionLabel, onAction }) {
+  return /* @__PURE__ */ jsxs12(YStack12, { 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 })
+    ] }),
+    actionLabel && onAction && /* @__PURE__ */ jsx15(
+      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 SizableText15, XStack as XStack9, YStack as YStack13 } from "tamagui";
+import { jsx as jsx16, jsxs as jsxs13 } 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 })
+    ] }),
+    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 })
+    ] }, i)) }),
+    actions
+  ] });
 }
 export {
   Avatar,
+  Badge,
   BlinkText,
   Button,
   Card,
+  ChatBubble,
+  DialogProvider,
+  Divider,
+  EmptyState,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Image2 as Image,
   Input,
-  blinkConfig
+  KeyboardStickyFooter,
+  ListItem,
+  OnboardingCarousel,
+  PageContainer,
+  PageMainContainer,
+  PaywallScreen,
+  Pressable,
+  ProfileHeader,
+  ScreenLayout,
+  Section,
+  SepHeading,
+  Separator2 as Separator,
+  SettingsScreen,
+  StepPageLayout,
+  SubHeading,
+  blinkConfig,
+  dialogConfirm,
+  showError
 };
 //# sourceMappingURL=index.mjs.map