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

package/dist/index.mjs

@@ -1564,18 +1564,48 @@ function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], d
 import { useState as useState7 } from "react";
 import { Button as Button6, Circle as Circle6, SizableText as SizableText25, Spinner, XStack as XStack17, YStack as YStack22 } from "tamagui";
 import { Fragment as Fragment2, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+function GoogleIcon({ size = 20 }) {
+  return /* @__PURE__ */ jsx28(XStack17, { width: size, height: size, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx28(SizableText25, { fontSize: size, lineHeight: size, fontWeight: "700", color: "#4285F4", children: "G" }) });
+}
+function AppleIcon({ size = 20 }) {
+  return /* @__PURE__ */ jsx28(XStack17, { width: size, height: size, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx28(SizableText25, { fontSize: size * 0.85, lineHeight: size, color: "$color1", children: "\uF8FF" }) });
+}
+function GitHubIcon({ size = 20 }) {
+  return /* @__PURE__ */ jsx28(Circle6, { size, backgroundColor: "$color1", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx28(SizableText25, { 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__ */ jsxs21(YStack22, { width: size, height: size, alignItems: "center", justifyContent: "center", children: [
+    /* @__PURE__ */ jsxs21(XStack17, { gap, children: [
+      /* @__PURE__ */ jsx28(YStack22, { width: half, height: half, backgroundColor: "#F25022" }),
+      /* @__PURE__ */ jsx28(YStack22, { width: half, height: half, backgroundColor: "#7FBA00" })
+    ] }),
+    /* @__PURE__ */ jsxs21(XStack17, { gap, children: [
+      /* @__PURE__ */ jsx28(YStack22, { width: half, height: half, backgroundColor: "#00A4EF" }),
+      /* @__PURE__ */ jsx28(YStack22, { width: half, height: half, backgroundColor: "#FFB900" })
+    ] })
+  ] });
+}
+var BRAND_ICON_MAP = {
+  google: GoogleIcon,
+  apple: AppleIcon,
+  github: GitHubIcon,
+  microsoft: MicrosoftIcon,
+  custom: ({ size = 20 }) => /* @__PURE__ */ jsx28(Circle6, { size, backgroundColor: "$color4", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx28(SizableText25, { 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__ */ jsx28(Fragment2, { children: provider.icon });
-  return /* @__PURE__ */ jsx28(Circle6, { size: 28, backgroundColor: buttonStyle === "brand" ? "$color2" : "$color3", children: /* @__PURE__ */ jsx28(SizableText25, { size: "$3", fontWeight: "700", color: tone.textColor, children: tone.label }) });
+  const IconComponent = BRAND_ICON_MAP[brand];
+  return /* @__PURE__ */ jsx28(IconComponent, { size: 22 });
 }
 function LoginScreen({
   variant = "default",
@@ -1632,7 +1662,7 @@ function LoginScreen({
               pressStyle: { backgroundColor: "$color3" },
               children: /* @__PURE__ */ jsxs21(XStack17, { alignItems: "center", justifyContent: "space-between", width: "100%", gap: "$2", children: [
                 /* @__PURE__ */ jsxs21(XStack17, { alignItems: "center", gap: "$2.5", children: [
-                  /* @__PURE__ */ jsx28(ProviderBadge, { provider: p, buttonStyle: providerButtonStyle }),
+                  /* @__PURE__ */ jsx28(ProviderBadge, { provider: p }),
                   /* @__PURE__ */ jsxs21(YStack22, { alignItems: "flex-start", children: [
                     /* @__PURE__ */ jsx28(SizableText25, { size: "$4", fontWeight: "600", color: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].textColor : void 0, children: p.name }),
                     p.description ? /* @__PURE__ */ jsx28(SizableText25, { size: "$2", color: "$color10", children: p.description }) : null