@sneekin/ui 0.4.2 → 1.0.0

package/dist/index.mjs

@@ -1,19 +1,20 @@
-// src/use-sneek-otp.ts
+// src/use-sneek-login.ts
 import { useCallback, useReducer } from "react";
 
 // src/state.ts
-var initialOtpState = {
+var initialLoginState = {
   step: "identify",
   status: "idle",
   identifier: "",
   code: "",
   requestId: "",
-  channels: [],
-  expiresInSeconds: 0,
+  channel: null,
+  maskedIdentifier: "",
+  expiresAt: "",
   error: null
 };
 var isBusy = (status) => status !== "idle";
-function otpReducer(state, action) {
+function loginReducer(state, action) {
   switch (action.type) {
     case "set_identifier":
       return { ...state, identifier: action.value, error: null };
@@ -21,16 +22,17 @@ function otpReducer(state, action) {
       return { ...state, code: action.value, error: null };
     case "request_start":
       if (isBusy(state.status)) return state;
-      return { ...state, status: "sending", error: null };
+      return { ...state, status: "requesting", error: null };
     case "request_success":
       return {
         ...state,
         step: "verify",
         status: "idle",
         code: "",
-        requestId: action.result.requestId,
-        channels: action.result.channels ?? [],
-        expiresInSeconds: action.result.expiresInSeconds ?? 0,
+        requestId: action.request.requestId,
+        channel: action.request.channel ?? null,
+        maskedIdentifier: action.request.maskedIdentifier ?? "",
+        expiresAt: action.request.expiresAt ?? "",
         error: null
       };
     case "request_error":
@@ -47,12 +49,13 @@ function otpReducer(state, action) {
         status: "idle",
         code: "",
         requestId: "",
-        channels: [],
-        expiresInSeconds: 0,
+        channel: null,
+        maskedIdentifier: "",
+        expiresAt: "",
         error: null
       };
     case "reset":
-      return { ...initialOtpState };
+      return { ...initialLoginState };
     default:
       return state;
   }
@@ -62,8 +65,8 @@ var CHANNEL_LABELS = {
   whatsapp: "WhatsApp",
   email: "email"
 };
-function formatChannels(channels) {
-  return channels.map((c) => CHANNEL_LABELS[c] ?? c).join(", ");
+function channelLabel(channel) {
+  return CHANNEL_LABELS[channel] ?? channel;
 }
 function toMessage(error, fallback) {
   if (error instanceof Error && error.message) return error.message;
@@ -71,12 +74,12 @@ function toMessage(error, fallback) {
   return fallback;
 }
 
-// src/use-sneek-otp.ts
+// src/use-sneek-login.ts
 var DEFAULT_REQUEST_ERROR = "Could not send the code. Please try again.";
 var DEFAULT_VERIFY_ERROR = "That code was not correct. Please try again.";
-function useSneekOtp(handlers) {
-  const [state, dispatch] = useReducer(otpReducer, initialOtpState);
-  const { requestOtp, verifyOtp, onSuccess, onError } = handlers;
+function useSneekLogin(handlers) {
+  const [state, dispatch] = useReducer(loginReducer, initialLoginState);
+  const { requestVerification, verify, onSuccess, onError } = handlers;
   const setIdentifier = useCallback((value) => {
     dispatch({ type: "set_identifier", value });
   }, []);
@@ -92,18 +95,21 @@ function useSneekOtp(handlers) {
       }
       dispatch({ type: "request_start" });
       try {
-        const result = await requestOtp(trimmed);
-        dispatch({ type: "request_success", result });
+        const request = await requestVerification(trimmed);
+        dispatch({ type: "request_success", request });
       } catch (error) {
         dispatch({ type: "request_error", message: toMessage(error, DEFAULT_REQUEST_ERROR) });
         onError?.(error);
       }
     },
-    [requestOtp, onError]
+    [requestVerification, onError]
+  );
+  const startVerification = useCallback(
+    () => runRequest(state.identifier),
+    [runRequest, state.identifier]
   );
-  const sendOtp = useCallback(() => runRequest(state.identifier), [runRequest, state.identifier]);
   const resend = useCallback(() => runRequest(state.identifier), [runRequest, state.identifier]);
-  const verify = useCallback(async () => {
+  const submitCode = useCallback(async () => {
     const code = state.code.trim();
     if (!code) {
       dispatch({ type: "verify_error", message: "Enter the code you received." });
@@ -111,13 +117,13 @@ function useSneekOtp(handlers) {
     }
     dispatch({ type: "verify_start" });
     try {
-      const result = await verifyOtp({ requestId: state.requestId, code });
+      const result = await verify({ requestId: state.requestId, code });
       onSuccess?.(result);
     } catch (error) {
       dispatch({ type: "verify_error", message: toMessage(error, DEFAULT_VERIFY_ERROR) });
       onError?.(error);
     }
-  }, [verifyOtp, state.code, state.requestId, onSuccess, onError]);
+  }, [verify, state.code, state.requestId, onSuccess, onError]);
   const back = useCallback(() => {
     dispatch({ type: "back_to_identify" });
   }, []);
@@ -125,11 +131,11 @@ function useSneekOtp(handlers) {
     ...state,
     setIdentifier,
     setCode,
-    sendOtp,
-    verify,
+    startVerification,
+    submitCode,
     back,
     resend,
-    isSending: state.status === "sending",
+    isRequesting: state.status === "requesting",
     isVerifying: state.status === "verifying",
     isBusy: state.status !== "idle"
   };
@@ -341,7 +347,7 @@ function CountryPicker({ country, onSelect, disabled }) {
       "button",
       {
         type: "button",
-        className: "sneek-otp-country-chip",
+        className: "sneek-login-country-chip",
         onClick: () => setOpen((o) => !o),
         disabled,
         "aria-haspopup": "listbox",
@@ -480,7 +486,7 @@ function CountryPicker({ country, onSelect, disabled }) {
 }
 
 // src/theme.ts
-var SNEEK_STYLE_ID = "sneek-otp-styles";
+var SNEEK_STYLE_ID = "sneek-login-styles";
 var SNEEK_ACCENT_DARK = "#f86513";
 var SNEEK_ACCENT_LIGHT = "#b83f06";
 function buildStyles(accent) {
@@ -512,56 +518,56 @@ function buildStyles(accent) {
     --sneek-danger: #d43a3c;
     --sneek-shadow: none;`;
   return `
-.sneek-otp {${light}
+.sneek-login {${light}
   --sneek-ease: cubic-bezier(0, 0, 0.2, 1);
 }
 @media (prefers-color-scheme: dark) {
-  .sneek-otp:not([data-theme="light"]) {${dark}
+  .sneek-login:not([data-theme="light"]) {${dark}
   }
 }
-.sneek-otp[data-theme="dark"] {${dark}
+.sneek-login[data-theme="dark"] {${dark}
 }
-.sneek-otp[data-theme="light"] {${light}
+.sneek-login[data-theme="light"] {${light}
 }
-.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-country-chip:focus-visible,
-.sneek-otp-brand-link:focus-visible {
+.sneek-login *, .sneek-login *::before, .sneek-login *::after { box-sizing: border-box; }
+.sneek-login-input:focus-visible,
+.sneek-login-button:focus-visible,
+.sneek-login-link:focus-visible,
+.sneek-login-country-chip:focus-visible,
+.sneek-login-brand-link:focus-visible {
   outline: 2px solid var(--sneek-accent);
   outline-offset: 2px;
 }
-.sneek-otp-input:focus {
+.sneek-login-input:focus {
   border-color: var(--sneek-accent);
 }
-.sneek-otp-phone-field:focus-within {
+.sneek-login-phone-field:focus-within {
   border-color: var(--sneek-accent);
 }
-.sneek-otp-button:not(:disabled):hover {
+.sneek-login-button:not(:disabled):hover {
   filter: brightness(1.08);
 }
-.sneek-otp-link:not(:disabled):hover {
+.sneek-login-link:not(:disabled):hover {
   text-decoration: underline;
 }
-.sneek-otp-country-chip:not(:disabled):hover {
+.sneek-login-country-chip:not(:disabled):hover {
   filter: brightness(1.08);
 }
-.sneek-otp-brand-link {
+.sneek-login-brand-link {
   box-shadow: 0 1px 6px var(--sneek-accent-shadow);
 }
-.sneek-otp-brand-link:hover {
+.sneek-login-brand-link:hover {
   box-shadow: 0 2px 10px var(--sneek-accent-shadow);
 }
 @media (prefers-reduced-motion: reduce) {
-  .sneek-otp * { transition-duration: 0.01ms !important; }
+  .sneek-login * { transition-duration: 0.01ms !important; }
 }
-@keyframes sneek-otp-caret {
+@keyframes sneek-login-caret {
   0%, 45% { opacity: 1; }
   50%, 100% { opacity: 0; }
 }
-.sneek-otp-caret {
-  animation: sneek-otp-caret 1s step-end infinite;
+.sneek-login-caret {
+  animation: sneek-login-caret 1s step-end infinite;
 }
 `;
 }
@@ -605,11 +611,11 @@ function SneekMarkBox() {
     }
   );
 }
-function SneekOtpLogin(props) {
+function SneekLogin(props) {
   const {
     title = "Sign in",
     verifyTitle = "Enter the code",
-    subtitle = "Enter your email or phone. We will send you a code.",
+    subtitle = "Enter your email or phone to continue.",
     identifierMode = "both",
     defaultCountry,
     identifierLabel,
@@ -622,7 +628,7 @@ function SneekOtpLogin(props) {
     className,
     ...handlers
   } = props;
-  const otp = useSneekOtp(handlers);
+  const login = useSneekLogin(handlers);
   const uid = useId2();
   const [resendIn, setResendIn] = useState2(0);
   const [codeFocused, setCodeFocused] = useState2(false);
@@ -638,7 +644,7 @@ function SneekOtpLogin(props) {
   const statusId = `${uid}-status`;
   const onCountrySelect = (next) => {
     setCountry(next);
-    otp.setIdentifier(`+${next.dial}${nationalNumber}`);
+    login.setIdentifier(`+${next.dial}${nationalNumber}`);
   };
   const onNationalNumberChange = (raw) => {
     let digits = raw.replace(/\D/g, "").slice(0, MAX_NATIONAL_DIGITS + 3);
@@ -653,12 +659,12 @@ function SneekOtpLogin(props) {
     digits = digits.slice(0, MAX_NATIONAL_DIGITS);
     if (effectiveCountry !== country) setCountry(effectiveCountry);
     setNationalNumber(digits);
-    otp.setIdentifier(`+${effectiveCountry.dial}${digits}`);
+    login.setIdentifier(`+${effectiveCountry.dial}${digits}`);
   };
   const switchMode = (next) => {
     setMode(next);
     setNationalNumber("");
-    otp.setIdentifier("");
+    login.setIdentifier("");
   };
   useEffect2(() => {
     if (typeof document === "undefined") return;
@@ -672,25 +678,27 @@ function SneekOtpLogin(props) {
   }, [accentColor]);
   const onIdentifySubmit = (event) => {
     event.preventDefault();
-    void otp.sendOtp();
+    void login.startVerification();
   };
   const onVerifySubmit = (event) => {
     event.preventDefault();
-    void otp.verify();
+    void login.submitCode();
   };
   useEffect2(() => {
-    if (otp.step === "verify") setResendIn(RESEND_SECONDS);
-  }, [otp.step]);
+    if (login.step === "verify") setResendIn(RESEND_SECONDS);
+  }, [login.step]);
   useEffect2(() => {
     if (resendIn <= 0) return;
     const timer = setTimeout(() => setResendIn((n) => n - 1), 1e3);
     return () => clearTimeout(timer);
   }, [resendIn]);
   useEffect2(() => {
-    if (otp.step === "verify" && otp.code.length === CODE_LENGTH && !otp.isBusy) {
-      void otp.verify();
+    if (login.step === "verify" && login.code.length === CODE_LENGTH && !login.isBusy) {
+      void login.submitCode();
     }
-  }, [otp.code, otp.step]);
+  }, [login.code, login.step]);
+  const destination = login.maskedIdentifier || login.identifier;
+  const deliveryNotice = login.channel ? `Sent via ${channelLabel(login.channel)} to ${destination}` : `Sent to ${destination}`;
   const label = {
     display: "flex",
     flexDirection: "column",
@@ -718,8 +726,8 @@ function SneekOtpLogin(props) {
     color: "var(--sneek-accent-contrast)",
     fontSize: 15,
     fontWeight: 500,
-    cursor: otp.isBusy ? "not-allowed" : "pointer",
-    opacity: otp.isBusy ? 0.6 : 1,
+    cursor: login.isBusy ? "not-allowed" : "pointer",
+    opacity: login.isBusy ? 0.6 : 1,
     width: "100%",
     transition: "filter 200ms var(--sneek-ease), opacity 200ms var(--sneek-ease)"
   };
@@ -727,7 +735,7 @@ function SneekOtpLogin(props) {
     border: "none",
     background: "transparent",
     color: "var(--sneek-accent)",
-    cursor: otp.isBusy ? "not-allowed" : "pointer",
+    cursor: login.isBusy ? "not-allowed" : "pointer",
     font: "inherit",
     fontSize: 14,
     padding: 0
@@ -743,7 +751,7 @@ function SneekOtpLogin(props) {
   return /* @__PURE__ */ jsxs2(
     "div",
     {
-      className: className ? `sneek-otp ${className}` : "sneek-otp",
+      className: className ? `sneek-login ${className}` : "sneek-login",
       "data-theme": theme === "auto" ? void 0 : theme,
       style: {
         maxWidth: 400,
@@ -770,37 +778,10 @@ function SneekOtpLogin(props) {
               letterSpacing: "-0.01em",
               margin: "16px 0 0"
             },
-            children: otp.step === "verify" ? verifyTitle : title
+            children: login.step === "verify" ? verifyTitle : title
           }
         ),
-        otp.step === "verify" ? /* @__PURE__ */ jsxs2(
-          "p",
-          {
-            style: {
-              fontSize: 14,
-              lineHeight: "20px",
-              color: "var(--sneek-text-muted)",
-              margin: "8px 0 0"
-            },
-            children: [
-              "Sent to",
-              " ",
-              /* @__PURE__ */ jsx2("span", { style: { color: "var(--sneek-text)" }, children: otp.identifier }),
-              " \xB7 ",
-              /* @__PURE__ */ jsx2(
-                "button",
-                {
-                  type: "button",
-                  className: "sneek-otp-link",
-                  onClick: otp.back,
-                  disabled: otp.isBusy,
-                  style: { ...link, fontSize: 14 },
-                  children: "Change"
-                }
-              )
-            ]
-          }
-        ) : subtitle ? /* @__PURE__ */ jsx2(
+        login.step === "identify" && subtitle ? /* @__PURE__ */ jsx2(
           "p",
           {
             style: {
@@ -812,7 +793,7 @@ function SneekOtpLogin(props) {
             children: subtitle
           }
         ) : null,
-        /* @__PURE__ */ jsx2("div", { role: "status", "aria-live": "polite", id: statusId, style: { marginTop: 32 }, children: otp.error ? /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx2("div", { role: "status", "aria-live": "polite", id: statusId, style: { marginTop: 32 }, children: login.error ? /* @__PURE__ */ jsx2(
           "div",
           {
             role: "alert",
@@ -821,10 +802,10 @@ function SneekOtpLogin(props) {
               color: "var(--sneek-danger)",
               borderColor: "var(--sneek-danger)"
             },
-            children: otp.error
+            children: login.error
           }
-        ) : null }),
-        otp.step === "identify" ? /* @__PURE__ */ jsxs2(
+        ) : login.step === "verify" ? /* @__PURE__ */ jsx2("div", { style: notice, children: deliveryNotice }) : null }),
+        login.step === "identify" ? /* @__PURE__ */ jsxs2(
           "form",
           {
             onSubmit: onIdentifySubmit,
@@ -836,9 +817,9 @@ function SneekOtpLogin(props) {
                   "button",
                   {
                     type: "button",
-                    className: "sneek-otp-link",
+                    className: "sneek-login-link",
                     onClick: () => switchMode(mode === "phone" ? "email" : "phone"),
-                    disabled: otp.isBusy,
+                    disabled: login.isBusy,
                     style: { ...link, fontSize: 13 },
                     children: mode === "phone" ? "Use email instead" : "Use phone instead"
                   }
@@ -847,7 +828,7 @@ function SneekOtpLogin(props) {
               mode === "phone" ? /* @__PURE__ */ jsxs2(
                 "div",
                 {
-                  className: "sneek-otp-phone-field",
+                  className: "sneek-login-phone-field",
                   style: {
                     display: "flex",
                     alignItems: "stretch",
@@ -862,7 +843,7 @@ function SneekOtpLogin(props) {
                       {
                         country,
                         onSelect: onCountrySelect,
-                        disabled: otp.isBusy
+                        disabled: login.isBusy
                       }
                     ),
                     /* @__PURE__ */ jsx2(
@@ -904,10 +885,10 @@ function SneekOtpLogin(props) {
                 "input",
                 {
                   id: identifierId,
-                  className: "sneek-otp-input",
+                  className: "sneek-login-input",
                   type: "email",
-                  value: otp.identifier,
-                  onChange: (e) => otp.setIdentifier(e.target.value),
+                  value: login.identifier,
+                  onChange: (e) => login.setIdentifier(e.target.value),
                   placeholder: identifierPlaceholder ?? "you@company.com",
                   autoComplete: "email",
                   autoFocus: true,
@@ -920,10 +901,10 @@ function SneekOtpLogin(props) {
                 "button",
                 {
                   type: "submit",
-                  className: "sneek-otp-button",
-                  disabled: otp.isBusy,
+                  className: "sneek-login-button",
+                  disabled: login.isBusy,
                   style: button,
-                  children: otp.isSending ? "Sending code\u2026" : "Send code"
+                  children: login.isRequesting ? "Working\u2026" : "Continue"
                 }
               )
             ]
@@ -943,14 +924,14 @@ function SneekOtpLogin(props) {
                   "input",
                   {
                     id: codeId,
-                    className: "sneek-otp-code-input",
+                    className: "sneek-login-code-input",
                     type: "text",
                     inputMode: "numeric",
                     pattern: "[0-9]*",
                     autoComplete: "one-time-code",
                     maxLength: CODE_LENGTH,
-                    value: otp.code,
-                    onChange: (e) => otp.setCode(
+                    value: login.code,
+                    onChange: (e) => login.setCode(
                       e.target.value.replace(/\D/g, "").slice(0, CODE_LENGTH)
                     ),
                     onFocus: () => setCodeFocused(true),
@@ -972,12 +953,12 @@ function SneekOtpLogin(props) {
                 /* @__PURE__ */ jsx2(
                   "div",
                   {
-                    className: "sneek-otp-code-cells",
+                    className: "sneek-login-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;
+                      const digit = login.code[i];
+                      const isActive = codeFocused && i === login.code.length;
                       return /* @__PURE__ */ jsx2(
                         "div",
                         {
@@ -996,7 +977,7 @@ function SneekOtpLogin(props) {
                           children: digit ?? (isActive ? /* @__PURE__ */ jsx2(
                             "span",
                             {
-                              className: "sneek-otp-caret",
+                              className: "sneek-login-caret",
                               style: {
                                 width: 2,
                                 height: 22,
@@ -1015,39 +996,57 @@ function SneekOtpLogin(props) {
                 "button",
                 {
                   type: "submit",
-                  className: "sneek-otp-button",
-                  disabled: otp.isBusy || otp.code.length < CODE_LENGTH,
+                  className: "sneek-login-button",
+                  disabled: login.isBusy || login.code.length < CODE_LENGTH,
                   style: {
                     ...button,
-                    opacity: otp.isBusy || otp.code.length < CODE_LENGTH ? 0.6 : 1
+                    opacity: login.isBusy || login.code.length < CODE_LENGTH ? 0.6 : 1
                   },
-                  children: otp.isVerifying ? "Verifying\u2026" : "Verify"
+                  children: login.isVerifying ? "Verifying\u2026" : "Verify"
                 }
               ),
-              /* @__PURE__ */ jsx2("div", { style: { textAlign: "center" }, children: resendIn > 0 ? /* @__PURE__ */ jsxs2(
-                "span",
+              /* @__PURE__ */ jsxs2(
+                "div",
                 {
                   style: {
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    gap: 10,
                     fontSize: 14,
                     color: "var(--sneek-text-muted)"
                   },
                   children: [
-                    "Resend code in ",
-                    resendIn,
-                    "s"
+                    resendIn > 0 ? /* @__PURE__ */ jsxs2("span", { children: [
+                      "Send again in ",
+                      resendIn,
+                      "s"
+                    ] }) : /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        type: "button",
+                        className: "sneek-login-link",
+                        onClick: () => void login.resend(),
+                        disabled: login.isBusy,
+                        style: link,
+                        children: "Send again"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", children: "\xB7" }),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        type: "button",
+                        className: "sneek-login-link",
+                        onClick: login.back,
+                        disabled: login.isBusy,
+                        style: link,
+                        children: "Use a different email or phone"
+                      }
+                    )
                   ]
                 }
-              ) : /* @__PURE__ */ jsx2(
-                "button",
-                {
-                  type: "button",
-                  className: "sneek-otp-link",
-                  onClick: () => void otp.resend(),
-                  disabled: otp.isBusy,
-                  style: link,
-                  children: "Resend code"
-                }
-              ) })
+              )
             ]
           }
         ),
@@ -1070,7 +1069,7 @@ function SneekOtpLogin(props) {
                   href: "https://sneek.in",
                   target: "_blank",
                   rel: "noopener noreferrer",
-                  className: "sneek-otp-brand-link",
+                  className: "sneek-login-brand-link",
                   style: {
                     display: "inline-block",
                     padding: "0 5px",
@@ -1111,11 +1110,11 @@ async function postJson(url, body, options) {
   return await response.json();
 }
 function createFetchHandlers(options = {}) {
-  const requestUrl = options.requestUrl ?? "/api/auth/request-otp";
-  const verifyUrl = options.verifyUrl ?? "/api/auth/verify-otp";
+  const requestUrl = options.requestUrl ?? "/api/auth/request";
+  const verifyUrl = options.verifyUrl ?? "/api/auth/verify";
   return {
-    requestOtp: (identifier) => postJson(requestUrl, { identifier }, options),
-    verifyOtp: (input) => postJson(verifyUrl, input, options)
+    requestVerification: (identifier) => postJson(requestUrl, { identifier }, options),
+    verify: (input) => postJson(verifyUrl, input, options)
   };
 }
 export {
@@ -1123,15 +1122,15 @@ export {
   DEFAULT_COUNTRY_ISO2,
   SNEEK_ACCENT_DARK,
   SNEEK_ACCENT_LIGHT,
-  SneekOtpLogin,
+  SneekLogin,
+  channelLabel,
   countryByDialPrefix,
   countryByIso2,
   createFetchHandlers,
   detectCountryFromLocale,
   flagEmoji,
-  formatChannels,
-  initialOtpState,
-  otpReducer,
-  useSneekOtp
+  initialLoginState,
+  loginReducer,
+  useSneekLogin
 };
 //# sourceMappingURL=index.mjs.map