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

package/dist/index.js

@@ -1666,18 +1666,48 @@ function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], d
 var import_react9 = require("react");
 var import_tamagui36 = require("tamagui");
 var import_jsx_runtime28 = require("react/jsx-runtime");
+function GoogleIcon({ size = 20 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.XStack, { width: size, height: size, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.SizableText, { fontSize: size, lineHeight: size, fontWeight: "700", color: "#4285F4", children: "G" }) });
+}
+function AppleIcon({ size = 20 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.XStack, { width: size, height: size, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.SizableText, { fontSize: size * 0.85, lineHeight: size, color: "$color1", children: "\uF8FF" }) });
+}
+function GitHubIcon({ size = 20 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.Circle, { size, backgroundColor: "$color1", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.SizableText, { fontSize: size * 0.6, lineHeight: size, fontWeight: "900", color: "$color12", textAlign: "center", children: "GH" }) });
+}
+function MicrosoftIcon({ size = 20 }) {
+  const half = Math.floor(size * 0.4);
+  const gap = 2;
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui36.YStack, { width: size, height: size, alignItems: "center", justifyContent: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui36.XStack, { gap, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.YStack, { width: half, height: half, backgroundColor: "#F25022" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.YStack, { width: half, height: half, backgroundColor: "#7FBA00" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui36.XStack, { gap, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.YStack, { width: half, height: half, backgroundColor: "#00A4EF" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.YStack, { width: half, height: half, backgroundColor: "#FFB900" })
+    ] })
+  ] });
+}
+var BRAND_ICON_MAP = {
+  google: GoogleIcon,
+  apple: AppleIcon,
+  github: GitHubIcon,
+  microsoft: MicrosoftIcon,
+  custom: ({ size = 20 }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.Circle, { size, backgroundColor: "$color4", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.SizableText, { fontSize: size * 0.6, color: "$color10", children: "\u2022" }) })
+};
 var BRAND_STYLES = {
-  google: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12", label: "G" },
-  apple: { backgroundColor: "$color12", borderColor: "$color12", textColor: "$color1", label: "\uF8FF" },
-  github: { backgroundColor: "$color12", borderColor: "$color12", textColor: "$color1", label: "\u25CE" },
-  microsoft: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12", label: "\u25A0" },
-  custom: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12", label: "\u2022" }
+  google: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12" },
+  apple: { backgroundColor: "$color12", borderColor: "$color12", textColor: "$color1" },
+  github: { backgroundColor: "$color12", borderColor: "$color12", textColor: "$color1" },
+  microsoft: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12" },
+  custom: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12" }
 };
-function ProviderBadge({ provider, buttonStyle }) {
+function ProviderBadge({ provider }) {
   const brand = provider.brand ?? "custom";
-  const tone = BRAND_STYLES[brand];
   if (provider.icon) return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: provider.icon });
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.Circle, { size: 28, backgroundColor: buttonStyle === "brand" ? "$color2" : "$color3", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.SizableText, { size: "$3", fontWeight: "700", color: tone.textColor, children: tone.label }) });
+  const IconComponent = BRAND_ICON_MAP[brand];
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconComponent, { size: 22 });
 }
 function LoginScreen({
   variant = "default",
@@ -1734,7 +1764,7 @@ function LoginScreen({
               pressStyle: { backgroundColor: "$color3" },
               children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui36.XStack, { alignItems: "center", justifyContent: "space-between", width: "100%", gap: "$2", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui36.XStack, { alignItems: "center", gap: "$2.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ProviderBadge, { provider: p, buttonStyle: providerButtonStyle }),
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ProviderBadge, { provider: p }),
                   /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui36.YStack, { alignItems: "flex-start", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.SizableText, { size: "$4", fontWeight: "600", color: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].textColor : void 0, children: p.name }),
                     p.description ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.SizableText, { size: "$2", color: "$color10", children: p.description }) : null