@sneekin/ui 0.2.1 → 0.3.0

package/dist/index.js

@@ -20,10 +20,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  COUNTRIES: () => COUNTRIES,
+  DEFAULT_COUNTRY_ISO2: () => DEFAULT_COUNTRY_ISO2,
   SNEEK_ACCENT_DARK: () => SNEEK_ACCENT_DARK,
   SNEEK_ACCENT_LIGHT: () => SNEEK_ACCENT_LIGHT,
   SneekOtpLogin: () => SneekOtpLogin,
+  countryByDialPrefix: () => countryByDialPrefix,
+  countryByIso2: () => countryByIso2,
   createFetchHandlers: () => createFetchHandlers,
+  detectCountryFromLocale: () => detectCountryFromLocale,
+  flagEmoji: () => flagEmoji,
   formatChannels: () => formatChannels,
   initialOtpState: () => initialOtpState,
   otpReducer: () => otpReducer,
@@ -169,8 +175,340 @@ function useSneekOtp(handlers) {
 }
 
 // src/component.tsx
+var import_react3 = require("react");
+
+// src/country-picker.tsx
 var import_react2 = require("react");
 
+// src/countries.ts
+function flagFromIso2(iso2) {
+  const A = 127462;
+  const codePoints = [...iso2.toUpperCase()].map((c) => A + (c.charCodeAt(0) - 65));
+  return String.fromCodePoint(...codePoints);
+}
+var RAW = [
+  ["US", "United States", "1"],
+  ["CA", "Canada", "1"],
+  ["GB", "United Kingdom", "44"],
+  ["IN", "India", "91"],
+  ["AU", "Australia", "61"],
+  ["DE", "Germany", "49"],
+  ["FR", "France", "33"],
+  ["IT", "Italy", "39"],
+  ["ES", "Spain", "34"],
+  ["PT", "Portugal", "351"],
+  ["NL", "Netherlands", "31"],
+  ["BE", "Belgium", "32"],
+  ["CH", "Switzerland", "41"],
+  ["AT", "Austria", "43"],
+  ["SE", "Sweden", "46"],
+  ["NO", "Norway", "47"],
+  ["DK", "Denmark", "45"],
+  ["FI", "Finland", "358"],
+  ["IE", "Ireland", "353"],
+  ["IS", "Iceland", "354"],
+  ["PL", "Poland", "48"],
+  ["CZ", "Czechia", "420"],
+  ["SK", "Slovakia", "421"],
+  ["HU", "Hungary", "36"],
+  ["RO", "Romania", "40"],
+  ["BG", "Bulgaria", "359"],
+  ["GR", "Greece", "30"],
+  ["TR", "Turkiye", "90"],
+  ["RU", "Russia", "7"],
+  ["UA", "Ukraine", "380"],
+  ["BY", "Belarus", "375"],
+  ["LT", "Lithuania", "370"],
+  ["LV", "Latvia", "371"],
+  ["EE", "Estonia", "372"],
+  ["HR", "Croatia", "385"],
+  ["RS", "Serbia", "381"],
+  ["SI", "Slovenia", "386"],
+  ["CY", "Cyprus", "357"],
+  ["MT", "Malta", "356"],
+  ["LU", "Luxembourg", "352"],
+  ["CN", "China", "86"],
+  ["JP", "Japan", "81"],
+  ["KR", "South Korea", "82"],
+  ["HK", "Hong Kong", "852"],
+  ["TW", "Taiwan", "886"],
+  ["MO", "Macau", "853"],
+  ["SG", "Singapore", "65"],
+  ["MY", "Malaysia", "60"],
+  ["ID", "Indonesia", "62"],
+  ["TH", "Thailand", "66"],
+  ["VN", "Vietnam", "84"],
+  ["PH", "Philippines", "63"],
+  ["PK", "Pakistan", "92"],
+  ["BD", "Bangladesh", "880"],
+  ["LK", "Sri Lanka", "94"],
+  ["NP", "Nepal", "977"],
+  ["MM", "Myanmar", "95"],
+  ["KH", "Cambodia", "855"],
+  ["LA", "Laos", "856"],
+  ["MN", "Mongolia", "976"],
+  ["KZ", "Kazakhstan", "7"],
+  ["UZ", "Uzbekistan", "998"],
+  ["AE", "United Arab Emirates", "971"],
+  ["SA", "Saudi Arabia", "966"],
+  ["QA", "Qatar", "974"],
+  ["KW", "Kuwait", "965"],
+  ["BH", "Bahrain", "973"],
+  ["OM", "Oman", "968"],
+  ["JO", "Jordan", "962"],
+  ["LB", "Lebanon", "961"],
+  ["IL", "Israel", "972"],
+  ["IQ", "Iraq", "964"],
+  ["IR", "Iran", "98"],
+  ["EG", "Egypt", "20"],
+  ["ZA", "South Africa", "27"],
+  ["NG", "Nigeria", "234"],
+  ["KE", "Kenya", "254"],
+  ["GH", "Ghana", "233"],
+  ["ET", "Ethiopia", "251"],
+  ["TZ", "Tanzania", "255"],
+  ["UG", "Uganda", "256"],
+  ["MA", "Morocco", "212"],
+  ["DZ", "Algeria", "213"],
+  ["TN", "Tunisia", "216"],
+  ["BR", "Brazil", "55"],
+  ["MX", "Mexico", "52"],
+  ["AR", "Argentina", "54"],
+  ["CL", "Chile", "56"],
+  ["CO", "Colombia", "57"],
+  ["PE", "Peru", "51"],
+  ["VE", "Venezuela", "58"],
+  ["EC", "Ecuador", "593"],
+  ["UY", "Uruguay", "598"],
+  ["PY", "Paraguay", "595"],
+  ["BO", "Bolivia", "591"],
+  ["CR", "Costa Rica", "506"],
+  ["PA", "Panama", "507"],
+  ["DO", "Dominican Republic", "1"],
+  ["GT", "Guatemala", "502"],
+  ["NZ", "New Zealand", "64"],
+  ["FJ", "Fiji", "679"]
+];
+var COUNTRIES = RAW.map(([iso2, name, dial]) => ({
+  iso2,
+  name,
+  dial
+}));
+var DEFAULT_COUNTRY_ISO2 = "IN";
+function flagEmoji(iso2) {
+  return flagFromIso2(iso2);
+}
+function countryByIso2(iso2) {
+  return COUNTRIES.find((c) => c.iso2 === iso2);
+}
+function countryByDialPrefix(digits) {
+  for (const len of [3, 2, 1]) {
+    const prefix = digits.slice(0, len);
+    if (prefix.length < len) continue;
+    const match = COUNTRIES.find((c) => c.dial === prefix);
+    if (match) return match;
+  }
+  return void 0;
+}
+function detectCountryFromLocale() {
+  if (typeof navigator === "undefined") return void 0;
+  const locales = navigator.languages ?? [navigator.language];
+  for (const locale of locales) {
+    const match = /-([A-Z]{2})$/.exec(locale ?? "");
+    if (match) {
+      const found = countryByIso2(match[1]);
+      if (found) return found;
+    }
+  }
+  return void 0;
+}
+
+// src/country-picker.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ChevronDown() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      d: "M2 3.5 5 6.5 8 3.5",
+      stroke: "currentColor",
+      strokeWidth: "1.4",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function CountryPicker({ country, onSelect, disabled }) {
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  const [query, setQuery] = (0, import_react2.useState)("");
+  const rootRef = (0, import_react2.useRef)(null);
+  const searchRef = (0, import_react2.useRef)(null);
+  const uid = (0, import_react2.useId)();
+  (0, import_react2.useEffect)(() => {
+    if (!open) return;
+    searchRef.current?.focus();
+    const onDocPointerDown = (event) => {
+      if (rootRef.current && !rootRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDocPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onDocPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  const q = query.trim().toLowerCase();
+  const filtered = q ? COUNTRIES.filter(
+    (c) => c.name.toLowerCase().includes(q) || c.dial.includes(q.replace(/^\+/, ""))
+  ) : COUNTRIES;
+  const listId = `${uid}-country-list`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: rootRef, style: { position: "relative", flexShrink: 0 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "sneek-otp-country-chip",
+        onClick: () => setOpen((o) => !o),
+        disabled,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          height: "100%",
+          padding: "0 10px 0 14px",
+          border: "none",
+          borderRadius: "12px 0 0 12px",
+          background: "transparent",
+          color: "var(--sneek-text)",
+          fontSize: 15,
+          cursor: disabled ? "not-allowed" : "pointer"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 18, lineHeight: 1 }, children: flagEmoji(country.iso2) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { color: "var(--sneek-text-muted)" }, children: [
+            "+",
+            country.dial
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "var(--sneek-text-muted)" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, {}) })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        role: "presentation",
+        style: {
+          position: "absolute",
+          top: "calc(100% + 6px)",
+          left: 0,
+          zIndex: 10,
+          width: 260,
+          maxWidth: "80vw",
+          border: "1px solid var(--sneek-border)",
+          borderRadius: 12,
+          background: "var(--sneek-surface)",
+          boxShadow: "var(--sneek-shadow), 0 8px 24px rgb(0 0 0 / 0.12)",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              ref: searchRef,
+              value: query,
+              onChange: (e) => setQuery(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && filtered[0]) {
+                  onSelect(filtered[0]);
+                  setOpen(false);
+                  setQuery("");
+                }
+              },
+              placeholder: "Search country or code",
+              "aria-controls": listId,
+              role: "combobox",
+              "aria-expanded": open,
+              style: {
+                width: "100%",
+                padding: "10px 12px",
+                border: "none",
+                borderBottom: "1px solid var(--sneek-border)",
+                background: "transparent",
+                color: "var(--sneek-text)",
+                fontSize: 14,
+                outline: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              id: listId,
+              role: "listbox",
+              style: { maxHeight: 240, overflowY: "auto", padding: 6 },
+              children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "p",
+                {
+                  style: {
+                    padding: "8px 10px",
+                    fontSize: 13,
+                    color: "var(--sneek-text-muted)"
+                  },
+                  children: "No match."
+                }
+              ) : filtered.map((c) => {
+                const optionStyle = {
+                  display: "flex",
+                  width: "100%",
+                  alignItems: "center",
+                  gap: 10,
+                  padding: "8px 10px",
+                  border: "none",
+                  borderRadius: 8,
+                  background: c.iso2 === country.iso2 ? "var(--sneek-surface-2)" : "transparent",
+                  color: "var(--sneek-text)",
+                  fontSize: 14,
+                  textAlign: "left",
+                  cursor: "pointer"
+                };
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": c.iso2 === country.iso2,
+                    onClick: () => {
+                      onSelect(c);
+                      setOpen(false);
+                      setQuery("");
+                    },
+                    style: optionStyle,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 17, lineHeight: 1 }, children: flagEmoji(c.iso2) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { flex: 1 }, children: c.name }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { color: "var(--sneek-text-muted)" }, children: [
+                        "+",
+                        c.dial
+                      ] })
+                    ]
+                  },
+                  c.iso2
+                );
+              })
+            }
+          )
+        ]
+      }
+    ) : null
+  ] });
+}
+
 // src/theme.ts
 var SNEEK_STYLE_ID = "sneek-otp-styles";
 var SNEEK_ACCENT_DARK = "#f86513";
@@ -216,31 +554,50 @@ function buildStyles(accent) {
 .sneek-otp *, .sneek-otp *::before, .sneek-otp *::after { box-sizing: border-box; }
 .sneek-otp-input:focus-visible,
 .sneek-otp-button:focus-visible,
-.sneek-otp-link:focus-visible {
+.sneek-otp-link:focus-visible,
+.sneek-otp-country-chip:focus-visible,
+.sneek-otp-brand-link:focus-visible {
   outline: 2px solid var(--sneek-accent);
   outline-offset: 2px;
 }
 .sneek-otp-input:focus {
   border-color: var(--sneek-accent);
 }
+.sneek-otp-phone-field:focus-within {
+  border-color: var(--sneek-accent);
+}
 .sneek-otp-button:not(:disabled):hover {
   filter: brightness(1.08);
 }
 .sneek-otp-link:not(:disabled):hover {
   text-decoration: underline;
 }
+.sneek-otp-country-chip:not(:disabled):hover {
+  filter: brightness(1.08);
+}
+.sneek-otp-brand-link:hover {
+  color: var(--sneek-accent);
+}
 @media (prefers-reduced-motion: reduce) {
   .sneek-otp * { transition-duration: 0.01ms !important; }
 }
+@keyframes sneek-otp-caret {
+  0%, 45% { opacity: 1; }
+  50%, 100% { opacity: 0; }
+}
+.sneek-otp-caret {
+  animation: sneek-otp-caret 1s step-end infinite;
+}
 `;
 }
 
 // src/component.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var CODE_LENGTH = 6;
 var RESEND_SECONDS = 30;
+var MAX_NATIONAL_DIGITS = 12;
 function SneekMark() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "svg",
     {
       width: "36",
@@ -250,8 +607,8 @@ function SneekMark() {
       role: "img",
       "aria-label": "Sneek",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21.3 1 29.3 16H13.3L21.3 1Z", fill: "var(--sneek-accent)" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2.7 17.5H18.7L10.7 31 2.7 17.5Z", fill: "var(--sneek-accent)" })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21.3 1 29.3 16H13.3L21.3 1Z", fill: "var(--sneek-accent)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M2.7 17.5H18.7L10.7 31 2.7 17.5Z", fill: "var(--sneek-accent)" })
       ]
     }
   );
@@ -261,8 +618,10 @@ function SneekOtpLogin(props) {
     title = "Sign in",
     verifyTitle = "Enter the code",
     subtitle = "Enter your email or phone. We will send you a code.",
-    identifierLabel = "Email or mobile",
-    identifierPlaceholder = "you@company.com or +91\u2026",
+    identifierMode = "both",
+    defaultCountry,
+    identifierLabel,
+    identifierPlaceholder,
     theme = "auto",
     accentColor,
     logo,
@@ -272,12 +631,49 @@ function SneekOtpLogin(props) {
     ...handlers
   } = props;
   const otp = useSneekOtp(handlers);
-  const uid = (0, import_react2.useId)();
-  const [resendIn, setResendIn] = (0, import_react2.useState)(0);
+  const uid = (0, import_react3.useId)();
+  const [resendIn, setResendIn] = (0, import_react3.useState)(0);
+  const [codeFocused, setCodeFocused] = (0, import_react3.useState)(false);
+  const [mode, setMode] = (0, import_react3.useState)(
+    identifierMode === "email" ? "email" : "phone"
+  );
+  const [country, setCountry] = (0, import_react3.useState)(
+    () => defaultCountry && countryByIso2(defaultCountry) || countryByIso2(DEFAULT_COUNTRY_ISO2)
+  );
+  const [nationalNumber, setNationalNumber] = (0, import_react3.useState)("");
   const identifierId = `${uid}-identifier`;
   const codeId = `${uid}-code`;
   const statusId = `${uid}-status`;
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
+    if (defaultCountry) return;
+    const guess = detectCountryFromLocale();
+    if (guess) setCountry(guess);
+  }, []);
+  const onCountrySelect = (next) => {
+    setCountry(next);
+    otp.setIdentifier(`+${next.dial}${nationalNumber}`);
+  };
+  const onNationalNumberChange = (raw) => {
+    let digits = raw.replace(/\D/g, "").slice(0, MAX_NATIONAL_DIGITS + 3);
+    let effectiveCountry = country;
+    if (raw.trim().startsWith("+")) {
+      const guess = countryByDialPrefix(digits);
+      if (guess && digits.startsWith(guess.dial)) {
+        effectiveCountry = guess;
+        digits = digits.slice(guess.dial.length);
+      }
+    }
+    digits = digits.slice(0, MAX_NATIONAL_DIGITS);
+    if (effectiveCountry !== country) setCountry(effectiveCountry);
+    setNationalNumber(digits);
+    otp.setIdentifier(`+${effectiveCountry.dial}${digits}`);
+  };
+  const switchMode = (next) => {
+    setMode(next);
+    setNationalNumber("");
+    otp.setIdentifier("");
+  };
+  (0, import_react3.useEffect)(() => {
     if (typeof document === "undefined") return;
     let el = document.getElementById(SNEEK_STYLE_ID);
     if (!el) {
@@ -295,15 +691,15 @@ function SneekOtpLogin(props) {
     event.preventDefault();
     void otp.verify();
   };
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (otp.step === "verify") setResendIn(RESEND_SECONDS);
   }, [otp.step]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (resendIn <= 0) return;
     const timer = setTimeout(() => setResendIn((n) => n - 1), 1e3);
     return () => clearTimeout(timer);
   }, [resendIn]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (otp.step === "verify" && otp.code.length === CODE_LENGTH && !otp.isBusy) {
       void otp.verify();
     }
@@ -357,7 +753,7 @@ function SneekOtpLogin(props) {
     fontSize: 14,
     color: "var(--sneek-text-muted)"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
       className: className ? `sneek-otp ${className}` : "sneek-otp",
@@ -376,8 +772,8 @@ function SneekOtpLogin(props) {
         ...style
       },
       children: [
-        logo === null ? null : logo ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SneekMark, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        logo === null ? null : logo ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SneekMark, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "h1",
           {
             style: {
@@ -390,7 +786,7 @@ function SneekOtpLogin(props) {
             children: otp.step === "verify" ? verifyTitle : title
           }
         ),
-        otp.step === "verify" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        otp.step === "verify" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           "p",
           {
             style: {
@@ -402,9 +798,9 @@ function SneekOtpLogin(props) {
             children: [
               "Sent to",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "var(--sneek-text)" }, children: otp.identifier }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "var(--sneek-text)" }, children: otp.identifier }),
               " \xB7 ",
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 "button",
                 {
                   type: "button",
@@ -417,7 +813,7 @@ function SneekOtpLogin(props) {
               )
             ]
           }
-        ) : subtitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ) : subtitle ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "p",
           {
             style: {
@@ -429,7 +825,7 @@ function SneekOtpLogin(props) {
             children: subtitle
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "status", "aria-live": "polite", id: statusId, style: { marginTop: 32 }, children: otp.error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { role: "status", "aria-live": "polite", id: statusId, style: { marginTop: 32 }, children: otp.error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "div",
           {
             role: "alert",
@@ -441,32 +837,99 @@ function SneekOtpLogin(props) {
             children: otp.error
           }
         ) : null }),
-        otp.step === "identify" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        otp.step === "identify" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           "form",
           {
             onSubmit: onIdentifySubmit,
             style: { display: "flex", flexDirection: "column", gap: 16, marginTop: 16 },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: label, htmlFor: identifierId, children: [
-                identifierLabel,
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "input",
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { style: { ...label, gap: 0 }, htmlFor: identifierId, children: identifierLabel ?? (mode === "phone" ? "Mobile number" : "Email address") }),
+                identifierMode === "both" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
                   {
-                    id: identifierId,
-                    className: "sneek-otp-input",
-                    type: "text",
-                    value: otp.identifier,
-                    onChange: (e) => otp.setIdentifier(e.target.value),
-                    placeholder: identifierPlaceholder,
-                    autoComplete: "username",
-                    autoFocus: true,
-                    required: true,
-                    "aria-describedby": statusId,
-                    style: input
+                    type: "button",
+                    className: "sneek-otp-link",
+                    onClick: () => switchMode(mode === "phone" ? "email" : "phone"),
+                    disabled: otp.isBusy,
+                    style: { ...link, fontSize: 13 },
+                    children: mode === "phone" ? "Use email instead" : "Use phone instead"
                   }
-                )
+                ) : null
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              mode === "phone" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                "div",
+                {
+                  className: "sneek-otp-phone-field",
+                  style: {
+                    display: "flex",
+                    alignItems: "stretch",
+                    border: "1px solid var(--sneek-border)",
+                    borderRadius: 12,
+                    background: "var(--sneek-surface-2)",
+                    transition: "border-color 200ms var(--sneek-ease)"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      CountryPicker,
+                      {
+                        country,
+                        onSelect: onCountrySelect,
+                        disabled: otp.isBusy
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        style: {
+                          width: 1,
+                          margin: "9px 0",
+                          background: "var(--sneek-border)"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "input",
+                      {
+                        id: identifierId,
+                        type: "tel",
+                        inputMode: "tel",
+                        autoComplete: "tel-national",
+                        value: nationalNumber,
+                        onChange: (e) => onNationalNumberChange(e.target.value),
+                        placeholder: "Mobile number",
+                        autoFocus: true,
+                        required: true,
+                        "aria-describedby": statusId,
+                        style: {
+                          ...input,
+                          flex: 1,
+                          border: "none",
+                          background: "transparent",
+                          borderRadius: 0
+                        }
+                      }
+                    )
+                  ]
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "input",
+                {
+                  id: identifierId,
+                  className: "sneek-otp-input",
+                  type: "email",
+                  value: otp.identifier,
+                  onChange: (e) => otp.setIdentifier(e.target.value),
+                  placeholder: identifierPlaceholder ?? "you@company.com",
+                  autoComplete: "email",
+                  autoFocus: true,
+                  required: true,
+                  "aria-describedby": statusId,
+                  style: input
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 "button",
                 {
                   type: "submit",
@@ -478,43 +941,90 @@ function SneekOtpLogin(props) {
               )
             ]
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           "form",
           {
             onSubmit: onVerifySubmit,
             style: { display: "flex", flexDirection: "column", gap: 16, marginTop: 16 },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: { ...label, marginBottom: -8 }, htmlFor: codeId, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { style: { ...label, marginBottom: -8 }, htmlFor: codeId, children: [
                 CODE_LENGTH,
                 "-digit code"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "input",
-                {
-                  id: codeId,
-                  className: "sneek-otp-input",
-                  type: "text",
-                  inputMode: "numeric",
-                  pattern: "[0-9]*",
-                  autoComplete: "one-time-code",
-                  maxLength: CODE_LENGTH,
-                  value: otp.code,
-                  onChange: (e) => otp.setCode(e.target.value.replace(/\D/g, "").slice(0, CODE_LENGTH)),
-                  autoFocus: true,
-                  required: true,
-                  "aria-describedby": statusId,
-                  style: {
-                    ...input,
-                    fontSize: 24,
-                    lineHeight: "32px",
-                    textAlign: "center",
-                    letterSpacing: "0.4em",
-                    textIndent: "0.4em",
-                    padding: "14px"
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { position: "relative" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "input",
+                  {
+                    id: codeId,
+                    className: "sneek-otp-code-input",
+                    type: "text",
+                    inputMode: "numeric",
+                    pattern: "[0-9]*",
+                    autoComplete: "one-time-code",
+                    maxLength: CODE_LENGTH,
+                    value: otp.code,
+                    onChange: (e) => otp.setCode(
+                      e.target.value.replace(/\D/g, "").slice(0, CODE_LENGTH)
+                    ),
+                    onFocus: () => setCodeFocused(true),
+                    onBlur: () => setCodeFocused(false),
+                    autoFocus: true,
+                    required: true,
+                    "aria-describedby": statusId,
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      width: "100%",
+                      height: "100%",
+                      opacity: 0,
+                      caretColor: "transparent",
+                      cursor: "text"
+                    }
                   }
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "div",
+                  {
+                    className: "sneek-otp-code-cells",
+                    "aria-hidden": "true",
+                    style: { display: "flex", gap: 10 },
+                    children: Array.from({ length: CODE_LENGTH }).map((_, i) => {
+                      const digit = otp.code[i];
+                      const isActive = codeFocused && i === otp.code.length;
+                      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        "div",
+                        {
+                          "data-active": isActive,
+                          style: {
+                            flex: 1,
+                            height: 44,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            fontSize: 22,
+                            color: "var(--sneek-text)",
+                            borderBottom: `2px solid ${isActive ? "var(--sneek-accent)" : "var(--sneek-border)"}`,
+                            transition: "border-color 200ms var(--sneek-ease)"
+                          },
+                          children: digit ?? (isActive ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            "span",
+                            {
+                              className: "sneek-otp-caret",
+                              style: {
+                                width: 2,
+                                height: 22,
+                                background: "var(--sneek-accent)"
+                              }
+                            }
+                          ) : null)
+                        },
+                        i
+                      );
+                    })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 "button",
                 {
                   type: "submit",
@@ -527,7 +1037,7 @@ function SneekOtpLogin(props) {
                   children: otp.isVerifying ? "Verifying\u2026" : "Verify"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { textAlign: "center" }, children: resendIn > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { textAlign: "center" }, children: resendIn > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                 "span",
                 {
                   style: {
@@ -540,7 +1050,7 @@ function SneekOtpLogin(props) {
                     "s"
                   ]
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 "button",
                 {
                   type: "button",
@@ -554,7 +1064,7 @@ function SneekOtpLogin(props) {
             ]
           }
         ),
-        showBranding ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        showBranding ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           "p",
           {
             style: {
@@ -564,7 +1074,26 @@ function SneekOtpLogin(props) {
               lineHeight: "16px",
               color: "var(--sneek-text-muted)"
             },
-            children: "Secured by Sneek"
+            children: [
+              "Secured by",
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "a",
+                {
+                  href: "https://sneek.in",
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "sneek-otp-brand-link",
+                  style: {
+                    color: "inherit",
+                    textDecoration: "underline",
+                    textUnderlineOffset: 2,
+                    transition: "color 200ms var(--sneek-ease)"
+                  },
+                  children: "Sneek"
+                }
+              )
+            ]
           }
         ) : null
       ]