@sneekin/ui 0.1.2 → 0.2.1

package/dist/index.mjs

@@ -135,21 +135,129 @@ function useSneekOtp(handlers) {
   };
 }
 
+// src/component.tsx
+import {
+  useEffect,
+  useId,
+  useState
+} from "react";
+
+// src/theme.ts
+var SNEEK_STYLE_ID = "sneek-otp-styles";
+var SNEEK_ACCENT_DARK = "#f86513";
+var SNEEK_ACCENT_LIGHT = "#b83f06";
+function buildStyles(accent) {
+  const darkAccent = accent ?? SNEEK_ACCENT_DARK;
+  const lightAccent = accent ?? SNEEK_ACCENT_LIGHT;
+  const light = `
+    --sneek-surface: #ffffff;
+    --sneek-surface-2: #f4f1ed;
+    --sneek-border: #e3ddd5;
+    --sneek-text: #1c1917;
+    --sneek-text-muted: #57534e;
+    --sneek-accent: ${lightAccent};
+    --sneek-accent-soft: color-mix(in srgb, ${lightAccent} 12%, transparent);
+    --sneek-accent-contrast: #ffffff;
+    --sneek-danger: #b0242a;
+    --sneek-shadow: 0 3px 3px -2px rgb(0 0 0 / 0.10), 0 3px 4px rgb(0 0 0 / 0.07),
+      0 1px 8px rgb(0 0 0 / 0.06);`;
+  const dark = `
+    --sneek-surface: #17150f;
+    --sneek-surface-2: #201d16;
+    --sneek-border: rgba(255, 255, 255, 0.08);
+    --sneek-text: #faf8f6;
+    --sneek-text-muted: #a8a29b;
+    --sneek-accent: ${darkAccent};
+    --sneek-accent-soft: color-mix(in srgb, ${darkAccent} 16%, transparent);
+    --sneek-accent-contrast: #1a0d04;
+    --sneek-danger: #d43a3c;
+    --sneek-shadow: none;`;
+  return `
+.sneek-otp {${light}
+  --sneek-ease: cubic-bezier(0, 0, 0.2, 1);
+}
+@media (prefers-color-scheme: dark) {
+  .sneek-otp:not([data-theme="light"]) {${dark}
+  }
+}
+.sneek-otp[data-theme="dark"] {${dark}
+}
+.sneek-otp[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 {
+  outline: 2px solid var(--sneek-accent);
+  outline-offset: 2px;
+}
+.sneek-otp-input:focus {
+  border-color: var(--sneek-accent);
+}
+.sneek-otp-button:not(:disabled):hover {
+  filter: brightness(1.08);
+}
+.sneek-otp-link:not(:disabled):hover {
+  text-decoration: underline;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sneek-otp * { transition-duration: 0.01ms !important; }
+}
+`;
+}
+
 // src/component.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+var CODE_LENGTH = 6;
+var RESEND_SECONDS = 30;
+function SneekMark() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "36",
+      height: "36",
+      viewBox: "0 0 32 32",
+      fill: "none",
+      role: "img",
+      "aria-label": "Sneek",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M21.3 1 29.3 16H13.3L21.3 1Z", fill: "var(--sneek-accent)" }),
+        /* @__PURE__ */ jsx("path", { d: "M2.7 17.5H18.7L10.7 31 2.7 17.5Z", fill: "var(--sneek-accent)" })
+      ]
+    }
+  );
+}
 function SneekOtpLogin(props) {
   const {
     title = "Sign in",
-    subtitle = "Passwordless login powered by Sneek",
-    identifierLabel = "Email or mobile number",
-    identifierPlaceholder = "you@example.com or +9198xxxxxxxx",
-    accentColor = "#56d3b5",
+    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",
+    theme = "auto",
+    accentColor,
     logo,
+    showBranding = true,
     style,
     className,
     ...handlers
   } = props;
   const otp = useSneekOtp(handlers);
+  const uid = useId();
+  const [resendIn, setResendIn] = useState(0);
+  const identifierId = `${uid}-identifier`;
+  const codeId = `${uid}-code`;
+  const statusId = `${uid}-status`;
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    let el = document.getElementById(SNEEK_STYLE_ID);
+    if (!el) {
+      el = document.createElement("style");
+      el.id = SNEEK_STYLE_ID;
+      document.head.appendChild(el);
+    }
+    el.textContent = buildStyles(accentColor);
+  }, [accentColor]);
   const onIdentifySubmit = (event) => {
     event.preventDefault();
     void otp.sendOtp();
@@ -158,123 +266,278 @@ function SneekOtpLogin(props) {
     event.preventDefault();
     void otp.verify();
   };
-  const inputStyle = {
+  useEffect(() => {
+    if (otp.step === "verify") setResendIn(RESEND_SECONDS);
+  }, [otp.step]);
+  useEffect(() => {
+    if (resendIn <= 0) return;
+    const timer = setTimeout(() => setResendIn((n) => n - 1), 1e3);
+    return () => clearTimeout(timer);
+  }, [resendIn]);
+  useEffect(() => {
+    if (otp.step === "verify" && otp.code.length === CODE_LENGTH && !otp.isBusy) {
+      void otp.verify();
+    }
+  }, [otp.code, otp.step]);
+  const label = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+    fontSize: 14,
+    lineHeight: "20px",
+    color: "var(--sneek-text-muted)"
+  };
+  const input = {
     padding: "12px 14px",
-    border: "1px solid rgba(0,0,0,0.15)",
-    borderRadius: 10,
-    fontSize: "0.95rem",
+    border: "1px solid var(--sneek-border)",
+    borderRadius: 12,
+    background: "var(--sneek-surface-2)",
+    color: "var(--sneek-text)",
+    fontSize: 15,
     width: "100%",
-    boxSizing: "border-box",
-    outline: "none"
+    outline: "none",
+    transition: "border-color 200ms var(--sneek-ease)"
   };
-  const buttonStyle = {
-    marginTop: 4,
-    padding: "12px 14px",
+  const button = {
+    padding: "12px 18px",
     border: "none",
-    borderRadius: 10,
-    background: accentColor,
-    color: "#04231d",
-    fontSize: "1rem",
-    fontWeight: 600,
+    borderRadius: 9999,
+    background: "var(--sneek-accent)",
+    color: "var(--sneek-accent-contrast)",
+    fontSize: 15,
+    fontWeight: 500,
     cursor: otp.isBusy ? "not-allowed" : "pointer",
     opacity: otp.isBusy ? 0.6 : 1,
-    width: "100%"
+    width: "100%",
+    transition: "filter 200ms var(--sneek-ease), opacity 200ms var(--sneek-ease)"
   };
-  const linkStyle = {
+  const link = {
     border: "none",
     background: "transparent",
-    color: accentColor,
-    cursor: "pointer",
+    color: "var(--sneek-accent)",
+    cursor: otp.isBusy ? "not-allowed" : "pointer",
     font: "inherit",
-    fontSize: "0.9rem",
+    fontSize: 14,
     padding: 0
   };
-  const errorStyle = {
-    background: "rgba(255,107,94,0.12)",
-    color: "#c0392b",
+  const notice = {
     padding: "10px 12px",
-    border: "1px solid rgba(255,107,94,0.25)",
-    borderRadius: 8,
-    fontSize: "0.85rem"
+    borderRadius: 12,
+    background: "var(--sneek-surface-2)",
+    border: "1px solid var(--sneek-border)",
+    fontSize: 14,
+    color: "var(--sneek-text-muted)"
   };
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className,
+      className: className ? `sneek-otp ${className}` : "sneek-otp",
+      "data-theme": theme === "auto" ? void 0 : theme,
       style: {
         maxWidth: 400,
         margin: "0 auto",
-        padding: 32,
-        border: "1px solid rgba(0,0,0,0.08)",
+        padding: 24,
+        border: "1px solid var(--sneek-border)",
         borderRadius: 16,
-        fontFamily: "system-ui, -apple-system, sans-serif",
+        background: "var(--sneek-surface)",
+        boxShadow: "var(--sneek-shadow)",
+        color: "var(--sneek-text)",
+        fontFamily: 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
+        lineHeight: 1.5,
         ...style
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", marginBottom: 24 }, children: [
-          logo,
-          /* @__PURE__ */ jsx("h1", { style: { fontSize: "1.4rem", fontWeight: 700, margin: "8px 0 4px" }, children: title }),
-          /* @__PURE__ */ jsx("p", { style: { fontSize: "0.9rem", opacity: 0.7, margin: 0 }, children: subtitle })
-        ] }),
-        otp.step === "identify" ? /* @__PURE__ */ jsxs("form", { onSubmit: onIdentifySubmit, style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
-          otp.error && /* @__PURE__ */ jsx("div", { style: errorStyle, children: otp.error }),
-          /* @__PURE__ */ jsxs("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: "0.85rem" }, children: [
-            identifierLabel,
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "text",
-                value: otp.identifier,
-                onChange: (e) => otp.setIdentifier(e.target.value),
-                placeholder: identifierPlaceholder,
-                autoComplete: "username",
-                autoFocus: true,
-                required: true,
-                style: inputStyle
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("button", { type: "submit", disabled: otp.isBusy, style: buttonStyle, children: otp.isSending ? "Sending code\u2026" : "Send code" })
-        ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: onVerifySubmit, style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
-          otp.error && /* @__PURE__ */ jsx("div", { style: errorStyle, children: otp.error }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                background: "rgba(86,211,181,0.12)",
-                padding: "10px 12px",
-                borderRadius: 8,
-                fontSize: "0.85rem"
-              },
-              children: [
-                otp.channels.length > 0 ? `Code sent via ${formatChannels(otp.channels)}.` : "We sent you a code.",
-                otp.expiresInSeconds > 0 && ` It expires in ${Math.max(1, Math.floor(otp.expiresInSeconds / 60))} min.`
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: "0.85rem" }, children: [
-            "Verification code",
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "text",
-                inputMode: "numeric",
-                autoComplete: "one-time-code",
-                value: otp.code,
-                onChange: (e) => otp.setCode(e.target.value),
-                placeholder: "Enter code",
-                autoFocus: true,
-                required: true,
-                style: inputStyle
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("button", { type: "submit", disabled: otp.isBusy, style: buttonStyle, children: otp.isVerifying ? "Verifying\u2026" : "Verify and sign in" }),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-            /* @__PURE__ */ jsx("button", { type: "button", onClick: otp.back, disabled: otp.isBusy, style: linkStyle, children: "Use a different contact" }),
-            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void otp.resend(), disabled: otp.isBusy, style: linkStyle, children: "Resend code" })
-          ] })
-        ] })
+        logo === null ? null : logo ?? /* @__PURE__ */ jsx(SneekMark, {}),
+        /* @__PURE__ */ jsx(
+          "h1",
+          {
+            style: {
+              fontSize: 21,
+              lineHeight: "28px",
+              fontWeight: 500,
+              letterSpacing: "-0.01em",
+              margin: "16px 0 0"
+            },
+            children: otp.step === "verify" ? verifyTitle : title
+          }
+        ),
+        otp.step === "verify" ? /* @__PURE__ */ jsxs(
+          "p",
+          {
+            style: {
+              fontSize: 14,
+              lineHeight: "20px",
+              color: "var(--sneek-text-muted)",
+              margin: "8px 0 0"
+            },
+            children: [
+              "Sent to",
+              " ",
+              /* @__PURE__ */ jsx("span", { style: { color: "var(--sneek-text)" }, children: otp.identifier }),
+              " \xB7 ",
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "sneek-otp-link",
+                  onClick: otp.back,
+                  disabled: otp.isBusy,
+                  style: { ...link, fontSize: 14 },
+                  children: "Change"
+                }
+              )
+            ]
+          }
+        ) : subtitle ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              fontSize: 14,
+              lineHeight: "20px",
+              color: "var(--sneek-text-muted)",
+              margin: "8px 0 0"
+            },
+            children: subtitle
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", id: statusId, style: { marginTop: 32 }, children: otp.error ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "alert",
+            style: {
+              ...notice,
+              color: "var(--sneek-danger)",
+              borderColor: "var(--sneek-danger)"
+            },
+            children: otp.error
+          }
+        ) : null }),
+        otp.step === "identify" ? /* @__PURE__ */ jsxs(
+          "form",
+          {
+            onSubmit: onIdentifySubmit,
+            style: { display: "flex", flexDirection: "column", gap: 16, marginTop: 16 },
+            children: [
+              /* @__PURE__ */ jsxs("label", { style: label, htmlFor: identifierId, children: [
+                identifierLabel,
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    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
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "submit",
+                  className: "sneek-otp-button",
+                  disabled: otp.isBusy,
+                  style: button,
+                  children: otp.isSending ? "Sending code\u2026" : "Send code"
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(
+          "form",
+          {
+            onSubmit: onVerifySubmit,
+            style: { display: "flex", flexDirection: "column", gap: 16, marginTop: 16 },
+            children: [
+              /* @__PURE__ */ jsxs("label", { style: { ...label, marginBottom: -8 }, htmlFor: codeId, children: [
+                CODE_LENGTH,
+                "-digit code"
+              ] }),
+              /* @__PURE__ */ 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__ */ jsx(
+                "button",
+                {
+                  type: "submit",
+                  className: "sneek-otp-button",
+                  disabled: otp.isBusy || otp.code.length < CODE_LENGTH,
+                  style: {
+                    ...button,
+                    opacity: otp.isBusy || otp.code.length < CODE_LENGTH ? 0.6 : 1
+                  },
+                  children: otp.isVerifying ? "Verifying\u2026" : "Verify"
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { style: { textAlign: "center" }, children: resendIn > 0 ? /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  style: {
+                    fontSize: 14,
+                    color: "var(--sneek-text-muted)"
+                  },
+                  children: [
+                    "Resend code in ",
+                    resendIn,
+                    "s"
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "sneek-otp-link",
+                  onClick: () => void otp.resend(),
+                  disabled: otp.isBusy,
+                  style: link,
+                  children: "Resend code"
+                }
+              ) })
+            ]
+          }
+        ),
+        showBranding ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              margin: "32px 0 0",
+              textAlign: "center",
+              fontSize: 12,
+              lineHeight: "16px",
+              color: "var(--sneek-text-muted)"
+            },
+            children: "Secured by Sneek"
+          }
+        ) : null
       ]
     }
   );
@@ -308,6 +571,8 @@ function createFetchHandlers(options = {}) {
   };
 }
 export {
+  SNEEK_ACCENT_DARK,
+  SNEEK_ACCENT_LIGHT,
   SneekOtpLogin,
   createFetchHandlers,
   formatChannels,