@optare/react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1510 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AccountButton: () => AccountButton,
+  DEFAULT_AUTH_METHODS: () => import_client2.DEFAULT_AUTH_METHODS,
+  DEFAULT_OPTARE_ORIGIN: () => import_client2.DEFAULT_OPTARE_ORIGIN,
+  DEFAULT_PRIMARY: () => DEFAULT_PRIMARY,
+  DEFAULT_RADIUS: () => DEFAULT_RADIUS,
+  ForgotPassword: () => ForgotPassword,
+  OptareConfigError: () => import_client2.OptareConfigError,
+  OptareProvider: () => OptareProvider,
+  ResetPassword: () => ResetPassword,
+  SignIn: () => SignIn,
+  SignUp: () => SignUp,
+  SocialButtons: () => SocialButtons,
+  TwoFactorChallenge: () => TwoFactorChallenge,
+  brandingToCssVars: () => brandingToCssVars,
+  checkPassword: () => checkPassword,
+  contrastText: () => contrastText,
+  createReactAuthClient: () => createReactAuthClient,
+  isValidEmail: () => isValidEmail,
+  notifySessionChanged: () => notifySessionChanged,
+  resolveOptareConfig: () => import_client2.resolveOptareConfig,
+  safeColor: () => safeColor,
+  safeLength: () => safeLength,
+  useActiveOrganization: () => useActiveOrganization,
+  useAuthMethods: () => useAuthMethods,
+  useBranding: () => useBranding,
+  useOptare: () => useOptare,
+  useOptareAuth: () => useOptareAuth,
+  useOptareConfig: () => useOptareConfig,
+  useSession: () => useSession,
+  useSignOut: () => useSignOut,
+  useUser: () => useUser,
+  validateSignIn: () => validateSignIn,
+  validateSignUp: () => validateSignUp
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/context.tsx
+var import_react2 = require("react");
+var import_client = require("@optare/client");
+
+// src/auth-client.ts
+var import_react = require("better-auth/react");
+var import_plugins = require("better-auth/client/plugins");
+function optarePlugins() {
+  return [
+    (0, import_plugins.organizationClient)(),
+    (0, import_plugins.twoFactorClient)(),
+    (0, import_plugins.emailOTPClient)(),
+    (0, import_plugins.magicLinkClient)(),
+    (0, import_plugins.multiSessionClient)(),
+    (0, import_plugins.jwtClient)()
+  ];
+}
+function createReactAuthClient(options) {
+  return (0, import_react.createAuthClient)({
+    baseURL: options.bootstrap.baseURL,
+    fetchOptions: {
+      ...options.fetch ? { customFetchImpl: options.fetch } : {},
+      headers: {
+        "x-optare-publishable-key": options.publishableKey,
+        ...options.headers
+      }
+    },
+    plugins: [...optarePlugins()]
+  });
+}
+
+// src/theme.ts
+var DEFAULT_PRIMARY = "#4f46e5";
+var DEFAULT_RADIUS = "10px";
+var CSS_COLOR = /^#(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+var CSS_LENGTH = /^-?\d+(?:\.\d+)?(?:px|rem|em|%)$/;
+function safeColor(value, fallback) {
+  return value && CSS_COLOR.test(value.trim()) ? value.trim() : fallback;
+}
+function safeLength(value, fallback) {
+  const v = (value ?? "").trim();
+  if (CSS_LENGTH.test(v)) return v;
+  if (/^\d+$/.test(v)) return `${v}px`;
+  return fallback;
+}
+function normalizeHex(hex) {
+  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec(hex.trim());
+  if (!m) return null;
+  let h = m[1];
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  return `#${h.slice(0, 6)}`;
+}
+function relativeLuminance(hex) {
+  const n = normalizeHex(hex);
+  if (!n) return 0;
+  const int = parseInt(n.slice(1), 16);
+  const chan = [int >> 16 & 255, int >> 8 & 255, int & 255].map((v) => {
+    const s2 = v / 255;
+    return s2 <= 0.03928 ? s2 / 12.92 : ((s2 + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * chan[0] + 0.7152 * chan[1] + 0.0722 * chan[2];
+}
+function contrastText(hex) {
+  const bg = relativeLuminance(hex);
+  const whiteTextRatio = (1 + 0.05) / (bg + 0.05);
+  const darkTextRatio = (bg + 0.05) / (relativeLuminance("#111827") + 0.05);
+  return darkTextRatio >= whiteTextRatio ? "#111827" : "#ffffff";
+}
+function brandingToCssVars(branding) {
+  const primary = safeColor(branding?.primaryColor, DEFAULT_PRIMARY);
+  const radius = safeLength(branding?.radius, DEFAULT_RADIUS);
+  return {
+    "--optare-primary": primary,
+    "--optare-primary-text": contrastText(primary),
+    // A translucent wash of the primary for hover/focus rings — layered over
+    // white it reads as a tint without needing a second colour from branding.
+    "--optare-primary-soft": "color-mix(in srgb, var(--optare-primary) 12%, #ffffff)",
+    "--optare-ring": "color-mix(in srgb, var(--optare-primary) 35%, transparent)",
+    "--optare-radius": radius,
+    "--optare-bg": "#ffffff",
+    "--optare-bg-subtle": "#f9fafb",
+    "--optare-fg": "#111827",
+    "--optare-fg-muted": "#4b5563",
+    "--optare-muted": "#6b7280",
+    "--optare-border": "#e5e7eb",
+    "--optare-border-strong": "#d1d5db",
+    "--optare-error": "#dc2626",
+    "--optare-error-soft": "#fef2f2",
+    "--optare-success": "#059669",
+    "--optare-shadow": "0 1px 2px rgba(16,24,40,0.04), 0 8px 24px rgba(16,24,40,0.08)",
+    "--optare-font": 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
+  };
+}
+
+// src/context.tsx
+var OptareContext = (0, import_react2.createContext)(null);
+function OptareProvider(props) {
+  const {
+    publishableKey,
+    bootstrap: bootstrapProp,
+    baseURL,
+    configURL,
+    fetch: fetchImpl,
+    headers,
+    loadingFallback,
+    errorFallback,
+    children
+  } = props;
+  const [bootstrap, setBootstrap] = (0, import_react2.useState)(
+    bootstrapProp ?? null
+  );
+  const [status, setStatus] = (0, import_react2.useState)(
+    bootstrapProp ? "ready" : "loading"
+  );
+  const [error, setError] = (0, import_react2.useState)(null);
+  const [attempt, setAttempt] = (0, import_react2.useState)(0);
+  (0, import_react2.useEffect)(() => {
+    if (bootstrapProp) {
+      setBootstrap(bootstrapProp);
+      setStatus("ready");
+      setError(null);
+      return;
+    }
+    let cancelled = false;
+    setStatus("loading");
+    setError(null);
+    (0, import_client.resolveOptareConfig)({ publishableKey, baseURL, configURL, fetch: fetchImpl }).then((resolved) => {
+      if (cancelled) return;
+      setBootstrap(resolved);
+      setStatus("ready");
+    }).catch((err) => {
+      if (cancelled) return;
+      setError(
+        err instanceof Error ? err : new import_client.OptareConfigError("Failed to resolve Optare config")
+      );
+      setStatus("error");
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [publishableKey, baseURL, configURL, fetchImpl, bootstrapProp, attempt]);
+  const authRef = (0, import_react2.useRef)(
+    null
+  );
+  const auth = (0, import_react2.useMemo)(() => {
+    if (!bootstrap) return null;
+    const cached = authRef.current;
+    if (cached && cached.baseURL === bootstrap.baseURL) return cached.client;
+    const client = createReactAuthClient({
+      bootstrap,
+      publishableKey,
+      fetch: fetchImpl,
+      headers
+    });
+    authRef.current = { baseURL: bootstrap.baseURL, client };
+    return client;
+  }, [bootstrap, publishableKey, fetchImpl, headers]);
+  const retry = (0, import_react2.useMemo)(() => () => setAttempt((n) => n + 1), []);
+  const value = (0, import_react2.useMemo)(
+    () => ({
+      status,
+      error,
+      bootstrap,
+      branding: bootstrap?.branding ?? null,
+      project: bootstrap?.project ?? null,
+      authMethods: bootstrap?.authMethods ?? import_client.DEFAULT_AUTH_METHODS,
+      cssVars: brandingToCssVars(bootstrap?.branding ?? null),
+      auth,
+      publishableKey,
+      retry
+    }),
+    [status, error, bootstrap, auth, publishableKey, retry]
+  );
+  let body = children;
+  if (status === "loading" && loadingFallback !== void 0) body = loadingFallback;
+  if (status === "error" && errorFallback !== void 0 && error) {
+    body = typeof errorFallback === "function" ? errorFallback(error, retry) : errorFallback;
+  }
+  return (0, import_react2.createElement)(OptareContext.Provider, { value }, body);
+}
+function useOptare() {
+  const ctx = (0, import_react2.useContext)(OptareContext);
+  if (!ctx) {
+    throw new Error("useOptare must be used inside <OptareProvider>");
+  }
+  return ctx;
+}
+function useOptareAuth() {
+  const { auth, status, error } = useOptare();
+  if (!auth) {
+    throw new Error(
+      status === "error" ? `Optare provider failed to initialise: ${error?.message ?? "unknown error"}` : "Optare provider is still resolving \u2014 gate on `useOptare().status === 'ready'`"
+    );
+  }
+  return auth;
+}
+function useOptareConfig() {
+  const { bootstrap, project, branding, status } = useOptare();
+  return { bootstrap, project, branding, status };
+}
+function useBranding() {
+  return useOptare().branding;
+}
+function useAuthMethods() {
+  return useOptare().authMethods;
+}
+
+// src/hooks.ts
+var import_react3 = require("react");
+
+// src/session.ts
+var listeners = /* @__PURE__ */ new Set();
+function subscribeSessionChanged(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+function notifySessionChanged() {
+  for (const l of [...listeners]) l();
+}
+
+// src/hooks.ts
+function useSession() {
+  const { auth, status } = useOptare();
+  const [data, setData] = (0, import_react3.useState)(null);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const [isPending, setIsPending] = (0, import_react3.useState)(true);
+  const [tick, setTick] = (0, import_react3.useState)(0);
+  const refetch = (0, import_react3.useCallback)(() => setTick((n) => n + 1), []);
+  (0, import_react3.useEffect)(() => subscribeSessionChanged(refetch), [refetch]);
+  (0, import_react3.useEffect)(() => {
+    if (status === "error") {
+      setIsPending(false);
+      return;
+    }
+    if (!auth) return;
+    let cancelled = false;
+    setIsPending(true);
+    Promise.resolve(auth.getSession()).then((res) => {
+      if (cancelled) return;
+      const r = res;
+      setData(r?.data ?? null);
+      setError(r?.error ? new Error(r.error.message ?? "Session error") : null);
+    }).catch((err) => {
+      if (!cancelled) setError(err instanceof Error ? err : new Error(String(err)));
+    }).finally(() => {
+      if (!cancelled) setIsPending(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [auth, status, tick]);
+  (0, import_react3.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const onFocus = () => refetch();
+    window.addEventListener("focus", onFocus);
+    return () => window.removeEventListener("focus", onFocus);
+  }, [refetch]);
+  return (0, import_react3.useMemo)(
+    () => ({
+      data,
+      user: data?.user ?? null,
+      isPending,
+      isAuthenticated: !!data,
+      error,
+      refetch
+    }),
+    [data, isPending, error, refetch]
+  );
+}
+function useUser() {
+  return useSession().user;
+}
+function useSignOut() {
+  const { auth } = useOptare();
+  const [isPending, setIsPending] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const signOut = (0, import_react3.useCallback)(async () => {
+    if (!auth) return;
+    setIsPending(true);
+    setError(null);
+    try {
+      await auth.signOut();
+      notifySessionChanged();
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+      throw err;
+    } finally {
+      setIsPending(false);
+    }
+  }, [auth]);
+  return { signOut, isPending, error };
+}
+function useActiveOrganization() {
+  const { auth } = useOptare();
+  const { data } = useSession();
+  const [isPending, setIsPending] = (0, import_react3.useState)(false);
+  const activeOrganizationId = data?.session?.activeOrganizationId ?? null;
+  const setActive = (0, import_react3.useCallback)(
+    async (organizationId) => {
+      if (!auth) return;
+      setIsPending(true);
+      try {
+        await auth.organization.setActive({ organizationId });
+        notifySessionChanged();
+      } finally {
+        setIsPending(false);
+      }
+    },
+    [auth]
+  );
+  return { activeOrganizationId, setActive, isPending };
+}
+
+// src/validation.ts
+var EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function isValidEmail(value) {
+  return EMAIL_RE.test(value.trim());
+}
+function checkPassword(value, min = 8) {
+  if (value.length === 0) return { ok: false, score: 0, message: "Password is required" };
+  if (value.length < min)
+    return { ok: false, score: 1, message: `Use at least ${min} characters` };
+  let score = 1;
+  if (value.length >= 12) score++;
+  if (/[a-z]/.test(value) && /[A-Z]/.test(value)) score++;
+  if (/\d/.test(value)) score++;
+  if (/[^A-Za-z0-9]/.test(value)) score++;
+  return { ok: true, score: Math.min(score, 4), message: null };
+}
+function validateSignIn(fields) {
+  const errors = {};
+  if (!isValidEmail(fields.email)) errors.email = "Enter a valid email address";
+  if (fields.password.length === 0) errors.password = "Password is required";
+  return errors;
+}
+function validateSignUp(fields, passwordMin = 8) {
+  const errors = {};
+  if (fields.name.trim().length === 0) errors.name = "Name is required";
+  if (!isValidEmail(fields.email)) errors.email = "Enter a valid email address";
+  const pw = checkPassword(fields.password, passwordMin);
+  if (!pw.ok && pw.message) errors.password = pw.message;
+  return errors;
+}
+
+// src/components/SignIn.tsx
+var import_react6 = require("react");
+
+// src/ui.tsx
+var import_react4 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var base = {
+  card: {
+    boxSizing: "border-box",
+    width: "100%",
+    maxWidth: 400,
+    padding: 28,
+    background: "var(--optare-bg)",
+    color: "var(--optare-fg)",
+    border: "1px solid var(--optare-border)",
+    borderRadius: "var(--optare-radius)",
+    boxShadow: "var(--optare-shadow)",
+    fontFamily: "var(--optare-font)",
+    fontSize: 14,
+    lineHeight: 1.5,
+    WebkitFontSmoothing: "antialiased",
+    display: "flex",
+    flexDirection: "column",
+    gap: 20
+  },
+  header: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 6,
+    textAlign: "center"
+  },
+  logo: { height: 32, maxWidth: 160, objectFit: "contain", marginBottom: 2 },
+  brandName: {
+    fontSize: 13,
+    fontWeight: 600,
+    letterSpacing: 0.2,
+    color: "var(--optare-fg-muted)",
+    textTransform: "uppercase"
+  },
+  title: {
+    margin: 0,
+    fontSize: 19,
+    fontWeight: 650,
+    color: "var(--optare-fg)"
+  },
+  subtitle: {
+    margin: 0,
+    fontSize: 13.5,
+    color: "var(--optare-muted)"
+  },
+  field: { display: "flex", flexDirection: "column", gap: 6 },
+  label: { fontSize: 13, fontWeight: 550, color: "var(--optare-fg)" },
+  input: {
+    boxSizing: "border-box",
+    width: "100%",
+    padding: "10px 12px",
+    fontSize: 14,
+    fontFamily: "inherit",
+    color: "var(--optare-fg)",
+    background: "var(--optare-bg)",
+    border: "1px solid var(--optare-border-strong)",
+    borderRadius: "var(--optare-radius)",
+    outline: "none",
+    transition: "border-color 120ms, box-shadow 120ms"
+  },
+  fieldError: { fontSize: 12, color: "var(--optare-error)" },
+  button: {
+    boxSizing: "border-box",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    width: "100%",
+    padding: "10px 16px",
+    fontSize: 14,
+    fontWeight: 600,
+    fontFamily: "inherit",
+    lineHeight: 1.2,
+    cursor: "pointer",
+    color: "var(--optare-primary-text)",
+    background: "var(--optare-primary)",
+    border: "1px solid transparent",
+    borderRadius: "var(--optare-radius)",
+    transition: "filter 120ms, opacity 120ms"
+  },
+  buttonSecondary: {
+    color: "var(--optare-fg)",
+    background: "var(--optare-bg)",
+    border: "1px solid var(--optare-border-strong)"
+  },
+  buttonDisabled: { opacity: 0.55, cursor: "not-allowed" },
+  alert: {
+    padding: "9px 12px",
+    fontSize: 13,
+    borderRadius: "var(--optare-radius)",
+    background: "var(--optare-error-soft)",
+    color: "var(--optare-error)",
+    border: "1px solid color-mix(in srgb, var(--optare-error) 30%, transparent)"
+  },
+  notice: {
+    padding: "9px 12px",
+    fontSize: 13,
+    borderRadius: "var(--optare-radius)",
+    background: "var(--optare-bg-subtle)",
+    color: "var(--optare-fg-muted)",
+    border: "1px solid var(--optare-border)"
+  },
+  link: {
+    background: "none",
+    border: "none",
+    padding: 0,
+    font: "inherit",
+    fontSize: 13,
+    color: "var(--optare-primary)",
+    cursor: "pointer",
+    textDecoration: "none",
+    fontWeight: 550
+  },
+  footer: { fontSize: 13, color: "var(--optare-muted)", textAlign: "center" },
+  divider: {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    fontSize: 12,
+    color: "var(--optare-muted)"
+  },
+  dividerRule: { flex: 1, height: 1, background: "var(--optare-border)" },
+  socialGrid: { display: "grid", gap: 8 },
+  spinner: {
+    display: "inline-block",
+    width: 14,
+    height: 14,
+    border: "2px solid currentColor",
+    borderTopColor: "transparent",
+    borderRadius: "50%",
+    animation: "optare-spin 0.6s linear infinite"
+  }
+};
+function SpinnerKeyframes() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: "@keyframes optare-spin{to{transform:rotate(360deg)}}" });
+}
+function Spinner() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SpinnerKeyframes, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, style: base.spinner })
+  ] });
+}
+function Card(props) {
+  const { cssVars } = useOptare();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: props.className,
+      style: { ...cssVars, ...base.card, ...props.style },
+      children: props.children
+    }
+  );
+}
+function BrandHeader(props) {
+  const { branding } = useOptare();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: base.header, children: [
+    branding?.logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: branding.logoUrl, alt: branding.name, style: base.logo }) : branding?.name ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: base.brandName, children: branding.name }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: base.title, children: props.title }),
+    props.subtitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: base.subtitle, children: props.subtitle }) : null
+  ] });
+}
+var TextInput = (0, import_react4.forwardRef)(function TextInput2({ label, error, hint, id, onFocus, onBlur, ...rest }, ref) {
+  const inputId = id ?? `optare-${label.toLowerCase().replace(/\s+/g, "-")}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: base.field, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: inputId, style: base.label, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        ref,
+        id: inputId,
+        style: {
+          ...base.input,
+          ...error ? { borderColor: "var(--optare-error)" } : null
+        },
+        "aria-invalid": error ? true : void 0,
+        onFocus: (e) => {
+          if (!error) {
+            e.currentTarget.style.borderColor = "var(--optare-primary)";
+            e.currentTarget.style.boxShadow = "0 0 0 3px var(--optare-ring)";
+          }
+          onFocus?.(e);
+        },
+        onBlur: (e) => {
+          e.currentTarget.style.borderColor = error ? "var(--optare-error)" : "var(--optare-border-strong)";
+          e.currentTarget.style.boxShadow = "none";
+          onBlur?.(e);
+        },
+        ...rest
+      }
+    ),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: base.fieldError, children: error }) : hint ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { ...base.subtitle, fontSize: 12 }, children: hint }) : null
+  ] });
+});
+function Button({
+  variant = "primary",
+  busy = false,
+  style,
+  disabled,
+  children,
+  ...rest
+}) {
+  const isDisabled = disabled || busy;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      style: {
+        ...base.button,
+        ...variant === "secondary" ? base.buttonSecondary : null,
+        ...isDisabled ? base.buttonDisabled : null,
+        ...style
+      },
+      disabled: isDisabled,
+      onMouseEnter: (e) => {
+        if (!isDisabled) e.currentTarget.style.filter = "brightness(0.94)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.filter = "none";
+      },
+      ...rest,
+      children: [
+        busy ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {}) : null,
+        children
+      ]
+    }
+  );
+}
+function Alert({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "alert", style: base.alert, children });
+}
+function Notice({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: base.notice, children });
+}
+function LinkButton(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", style: { ...base.link, ...props.style }, ...props });
+}
+function Footer({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: base.footer, children });
+}
+function Divider({ children }) {
+  if (!children) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: base.dividerRule });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: base.divider, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: base.dividerRule }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: base.dividerRule })
+  ] });
+}
+
+// src/components/SocialButtons.tsx
+var import_react5 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var MARKS = {
+  google: {
+    name: "Google",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 48 48", "aria-hidden": true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "#EA4335", d: "M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.6 2.4 30.2 0 24 0 14.6 0 6.5 5.4 2.6 13.2l7.8 6.1C12.2 13.3 17.6 9.5 24 9.5z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "#4285F4", d: "M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.6 3-2.3 5.5-4.9 7.2l7.6 5.9c4.4-4.1 7.1-10.1 7.1-17.6z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "#FBBC05", d: "M10.4 28.3c-.5-1.5-.8-3.1-.8-4.8s.3-3.3.8-4.8l-7.8-6.1C.9 15.9 0 19.8 0 23.5s.9 7.6 2.6 10.9l7.8-6.1z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "#34A853", d: "M24 47c6.2 0 11.5-2 15.3-5.5l-7.6-5.9c-2.1 1.4-4.8 2.3-7.7 2.3-6.4 0-11.8-3.8-13.6-9.3l-7.8 6.1C6.5 41.6 14.6 47 24 47z" })
+    ] })
+  },
+  github: {
+    name: "GitHub",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 .5A11.5 11.5 0 0 0 .5 12c0 5.08 3.29 9.39 7.86 10.91.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.53-1.34-1.3-1.7-1.3-1.7-1.06-.72.08-.71.08-.71 1.17.08 1.79 1.2 1.79 1.2 1.04 1.78 2.73 1.27 3.4.97.1-.76.41-1.27.74-1.56-2.55-.29-5.24-1.28-5.24-5.68 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.8 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.12 3.05.74.81 1.18 1.83 1.18 3.09 0 4.41-2.69 5.38-5.25 5.67.42.36.8 1.08.8 2.18v3.23c0 .31.21.67.8.56A11.5 11.5 0 0 0 23.5 12 11.5 11.5 0 0 0 12 .5z" }) })
+  },
+  microsoft: {
+    name: "Microsoft",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 23 23", "aria-hidden": true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "#F25022", d: "M1 1h10v10H1z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "#7FBA00", d: "M12 1h10v10H12z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "#00A4EF", d: "M1 12h10v10H1z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "#FFB900", d: "M12 12h10v10H12z" })
+    ] })
+  },
+  facebook: {
+    name: "Facebook",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "#1877F2", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.95.93-1.95 1.89v2.26h3.32l-.53 3.49h-2.79V24C19.61 23.1 24 18.1 24 12.07z" }) })
+  },
+  twitter: {
+    name: "X",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18.9 1.15h3.68l-8.04 9.19L24 22.85h-7.41l-5.8-7.58-6.64 7.58H.46l8.6-9.83L0 1.15h7.6l5.24 6.93 6.06-6.93zm-1.29 19.5h2.04L6.49 3.24H4.3l13.31 17.41z" }) })
+  }
+};
+function SocialButtons(props) {
+  const { auth, status } = useOptare();
+  const { social } = useAuthMethods();
+  const [pending, setPending] = (0, import_react5.useState)(null);
+  const providers = (props.only ?? social).filter((p) => social.includes(p));
+  if (providers.length === 0) return null;
+  const verb = props.label ?? "Continue with";
+  const nameOnly = providers.length > 1;
+  const ready = status === "ready" && !!auth;
+  async function go(provider) {
+    if (!auth) return;
+    setPending(provider);
+    try {
+      await auth.signIn.social({
+        provider,
+        callbackURL: props.callbackURL ?? (typeof window !== "undefined" ? window.location.href : void 0),
+        errorCallbackURL: props.errorCallbackURL
+      });
+    } catch {
+      setPending(null);
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    props.divider !== false ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Divider, { children: props.dividerLabel ?? "or" }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gap: 8,
+          gridTemplateColumns: providers.length > 1 ? "1fr 1fr" : "1fr"
+        },
+        children: providers.map((p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          Button,
+          {
+            type: "button",
+            variant: "secondary",
+            busy: pending === p,
+            disabled: !ready || pending !== null && pending !== p,
+            onClick: () => go(p),
+            style: { fontWeight: 550 },
+            children: [
+              pending === p ? null : MARKS[p].icon,
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: nameOnly ? MARKS[p].name : `${verb} ${MARKS[p].name}` })
+            ]
+          },
+          p
+        ))
+      }
+    )
+  ] });
+}
+
+// src/components/SignIn.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function SignIn(props) {
+  const { auth, status } = useOptare();
+  const methods = useAuthMethods();
+  const allowMagicLink = (props.allowMagicLink ?? methods.magicLink) && methods.magicLink;
+  const allowEmailOtp = (props.allowEmailOtp ?? methods.emailOtp) && methods.emailOtp;
+  const allowSocial = props.allowSocial ?? true;
+  const allowSso = (props.allowSso ?? methods.sso) && methods.sso;
+  const callbackURL = props.callbackURL ?? (typeof window !== "undefined" ? window.location.href : void 0);
+  const [mode, setMode] = (0, import_react6.useState)("password");
+  const [email, setEmail] = (0, import_react6.useState)("");
+  const [password, setPassword] = (0, import_react6.useState)("");
+  const [otp, setOtp] = (0, import_react6.useState)("");
+  const [otpSent, setOtpSent] = (0, import_react6.useState)(false);
+  const [fieldErrors, setFieldErrors] = (0, import_react6.useState)({});
+  const [formError, setFormError] = (0, import_react6.useState)(null);
+  const [busy, setBusy] = (0, import_react6.useState)(false);
+  const [magicLinkSent, setMagicLinkSent] = (0, import_react6.useState)(false);
+  const ready = status === "ready" && !!auth;
+  function resetTransient() {
+    setFormError(null);
+    setFieldErrors({});
+  }
+  function switchMode(next) {
+    setMode(next);
+    setOtp("");
+    setOtpSent(false);
+    resetTransient();
+  }
+  async function onSubmit(e) {
+    e.preventDefault();
+    if (!auth) return;
+    setFormError(null);
+    if (mode === "sso") {
+      const errs2 = isValidEmail(email) ? {} : { email: "Enter your work email address" };
+      setFieldErrors(errs2);
+      if (Object.keys(errs2).length) return;
+      setBusy(true);
+      try {
+        const res = await auth.signIn.sso({
+          email,
+          callbackURL
+        });
+        if (res?.error) {
+          setFormError(
+            res.error.message ?? "We couldn't find a single sign-on provider for that email domain."
+          );
+        }
+      } catch (err) {
+        setFormError(err instanceof Error ? err.message : "SSO sign-in failed");
+      } finally {
+        setBusy(false);
+      }
+      return;
+    }
+    if (mode === "magic-link") {
+      const errs2 = isValidEmail(email) ? {} : { email: "Enter a valid email address" };
+      setFieldErrors(errs2);
+      if (Object.keys(errs2).length) return;
+      setBusy(true);
+      try {
+        const res = await auth.signIn.magicLink({ email, callbackURL });
+        if (res.error) {
+          setFormError(res.error.message ?? "Could not send the link");
+        } else {
+          setMagicLinkSent(true);
+        }
+      } catch (err) {
+        setFormError(err instanceof Error ? err.message : "Could not send the link");
+      } finally {
+        setBusy(false);
+      }
+      return;
+    }
+    if (mode === "email-otp") {
+      if (!otpSent) {
+        const errs3 = isValidEmail(email) ? {} : { email: "Enter a valid email address" };
+        setFieldErrors(errs3);
+        if (Object.keys(errs3).length) return;
+        setBusy(true);
+        try {
+          const res = await auth.emailOtp.sendVerificationOtp({ email, type: "sign-in" });
+          if (res.error) {
+            setFormError(res.error.message ?? "Could not send the code");
+          } else {
+            setOtpSent(true);
+          }
+        } catch (err) {
+          setFormError(err instanceof Error ? err.message : "Could not send the code");
+        } finally {
+          setBusy(false);
+        }
+        return;
+      }
+      const errs2 = otp.trim().length >= 4 ? {} : { otp: "Enter the code from your email" };
+      setFieldErrors(errs2);
+      if (Object.keys(errs2).length) return;
+      setBusy(true);
+      try {
+        const res = await auth.signIn.emailOtp({ email, otp: otp.trim() });
+        if (res.error) {
+          setFormError(res.error.message ?? "That code didn't work");
+          return;
+        }
+        if (res.data?.twoFactorRedirect) return props.onTwoFactor?.();
+        notifySessionChanged();
+        if (props.onSuccess) props.onSuccess();
+        else if (props.redirectTo && typeof window !== "undefined")
+          window.location.assign(props.redirectTo);
+      } catch (err) {
+        setFormError(err instanceof Error ? err.message : "Sign-in failed");
+      } finally {
+        setBusy(false);
+      }
+      return;
+    }
+    const errs = validateSignIn({ email, password });
+    setFieldErrors(errs);
+    if (Object.keys(errs).length) return;
+    setBusy(true);
+    try {
+      const res = await auth.signIn.email({
+        email,
+        password,
+        callbackURL
+      });
+      if (res.error) {
+        setFormError(res.error.message ?? "Incorrect email or password");
+        return;
+      }
+      if (res.data?.twoFactorRedirect) {
+        props.onTwoFactor?.();
+        if (!props.onTwoFactor) setFormError("Two-factor authentication is required to continue.");
+        return;
+      }
+      notifySessionChanged();
+      if (props.onSuccess) props.onSuccess();
+      else if (props.redirectTo && typeof window !== "undefined")
+        window.location.assign(props.redirectTo);
+    } catch (err) {
+      setFormError(err instanceof Error ? err.message : "Sign-in failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+  if (magicLinkSent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Card, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BrandHeader, { title: "Check your email", subtitle: `We sent a sign-in link to ${email}.` }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LinkButton, { onClick: () => {
+        setMagicLinkSent(false);
+        switchMode("password");
+      }, children: "Back to sign in" }) })
+    ] });
+  }
+  const submitLabel = busy ? "Please wait\u2026" : mode === "magic-link" ? "Email me a link" : mode === "email-otp" ? otpSent ? "Sign in" : "Email me a code" : mode === "sso" ? "Continue with SSO" : "Sign in";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Card, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BrandHeader, { title: props.title ?? "Sign in", subtitle: props.subtitle }),
+    allowSocial ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SocialButtons, { callbackURL, divider: false }) : null,
+    allowSocial && methods.social.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Divider, { children: "or" }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { onSubmit, noValidate: true, style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+      formError ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Alert, { children: formError }) : null,
+      mode === "email-otp" && otpSent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Notice, { children: [
+          "Enter the 6-digit code we emailed to ",
+          email,
+          "."
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          TextInput,
+          {
+            label: "Code",
+            inputMode: "numeric",
+            autoComplete: "one-time-code",
+            value: otp,
+            onChange: (e) => setOtp(e.currentTarget.value),
+            error: fieldErrors.otp,
+            disabled: busy
+          }
+        )
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        mode === "sso" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Notice, { children: "Sign in through your organization's identity provider." }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          TextInput,
+          {
+            label: mode === "sso" ? "Work email" : "Email",
+            type: "email",
+            autoComplete: "email",
+            value: email,
+            onChange: (e) => setEmail(e.currentTarget.value),
+            error: fieldErrors.email,
+            disabled: busy
+          }
+        ),
+        mode === "password" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          TextInput,
+          {
+            label: "Password",
+            type: "password",
+            autoComplete: "current-password",
+            value: password,
+            onChange: (e) => setPassword(e.currentTarget.value),
+            error: fieldErrors.password,
+            disabled: busy
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { type: "submit", busy, disabled: !ready, children: submitLabel }),
+      mode === "password" && props.onForgotPassword ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LinkButton, { onClick: props.onForgotPassword, children: "Forgot password?" }) }) : null,
+      allowMagicLink || allowEmailOtp || allowSso ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }, children: [
+        mode !== "password" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LinkButton, { onClick: () => switchMode("password"), children: "Use a password" }) : null,
+        allowMagicLink && mode !== "magic-link" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LinkButton, { onClick: () => switchMode("magic-link"), children: "Email me a link" }) : null,
+        allowEmailOtp && mode !== "email-otp" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LinkButton, { onClick: () => switchMode("email-otp"), children: "Email me a code" }) : null,
+        allowSso && mode !== "sso" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LinkButton, { onClick: () => switchMode("sso"), children: "Single sign-on" }) : null
+      ] }) }) : null
+    ] }),
+    props.footer ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Footer, { children: props.footer }) : null
+  ] });
+}
+
+// src/components/SignUp.tsx
+var import_react7 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function SignUp(props) {
+  const passwordMin = props.passwordMinLength ?? 8;
+  const { auth, status } = useOptare();
+  const methods = useAuthMethods();
+  const allowSocial = props.allowSocial ?? true;
+  const callbackURL = props.callbackURL ?? (typeof window !== "undefined" ? window.location.href : void 0);
+  const [name, setName] = (0, import_react7.useState)("");
+  const [email, setEmail] = (0, import_react7.useState)("");
+  const [password, setPassword] = (0, import_react7.useState)("");
+  const [fieldErrors, setFieldErrors] = (0, import_react7.useState)({});
+  const [formError, setFormError] = (0, import_react7.useState)(null);
+  const [busy, setBusy] = (0, import_react7.useState)(false);
+  const ready = status === "ready" && !!auth;
+  const pwCheck = checkPassword(password, passwordMin);
+  async function onSubmit(e) {
+    e.preventDefault();
+    if (!auth) return;
+    setFormError(null);
+    const errs = validateSignUp({ name, email, password }, passwordMin);
+    setFieldErrors(errs);
+    if (Object.keys(errs).length) return;
+    setBusy(true);
+    try {
+      const res = await auth.signUp.email({
+        name,
+        email,
+        password,
+        callbackURL
+      });
+      if (res.error) {
+        setFormError(res.error.message ?? "Could not create your account");
+        return;
+      }
+      if (res.data && !res.data.token) {
+        props.onVerificationRequired?.(email);
+        if (!props.onVerificationRequired)
+          setFormError("Check your email to confirm your address, then sign in.");
+        return;
+      }
+      notifySessionChanged();
+      if (props.onSuccess) props.onSuccess();
+      else if (props.redirectTo && typeof window !== "undefined")
+        window.location.assign(props.redirectTo);
+    } catch (err) {
+      setFormError(err instanceof Error ? err.message : "Sign-up failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Card, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BrandHeader, { title: props.title ?? "Create your account", subtitle: props.subtitle }),
+    allowSocial ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SocialButtons, { label: "Sign up with", callbackURL, divider: false }) : null,
+    allowSocial && methods.social.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Divider, { children: "or" }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("form", { onSubmit, noValidate: true, style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+      formError ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Alert, { children: formError }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        TextInput,
+        {
+          label: "Name",
+          autoComplete: "name",
+          value: name,
+          onChange: (e) => setName(e.currentTarget.value),
+          error: fieldErrors.name,
+          disabled: busy
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        TextInput,
+        {
+          label: "Email",
+          type: "email",
+          autoComplete: "email",
+          value: email,
+          onChange: (e) => setEmail(e.currentTarget.value),
+          error: fieldErrors.email,
+          disabled: busy
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        TextInput,
+        {
+          label: "Password",
+          type: "password",
+          autoComplete: "new-password",
+          value: password,
+          onChange: (e) => setPassword(e.currentTarget.value),
+          error: fieldErrors.password,
+          disabled: busy
+        }
+      ),
+      password && !fieldErrors.password ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "div",
+        {
+          "aria-hidden": true,
+          style: {
+            height: 4,
+            borderRadius: 2,
+            background: "var(--optare-border)",
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              style: {
+                height: "100%",
+                width: `${pwCheck.score / 4 * 100}%`,
+                background: pwCheck.score >= 3 ? "var(--optare-primary)" : "var(--optare-muted)",
+                transition: "width 150ms"
+              }
+            }
+          )
+        }
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { type: "submit", busy, disabled: !ready, children: busy ? "Creating account\u2026" : "Sign up" })
+    ] }),
+    props.footer ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Footer, { children: props.footer }) : null
+  ] });
+}
+
+// src/components/AccountButton.tsx
+var import_react8 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function initials(nameOrEmail) {
+  const parts = nameOrEmail.trim().split(/\s+/);
+  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
+  return nameOrEmail.slice(0, 2).toUpperCase();
+}
+var s = {
+  wrap: { position: "relative", display: "inline-block", fontFamily: "var(--optare-font)" },
+  trigger: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "6px 10px",
+    background: "var(--optare-bg)",
+    color: "var(--optare-fg)",
+    border: "1px solid var(--optare-border)",
+    borderRadius: "var(--optare-radius)",
+    cursor: "pointer",
+    font: "inherit",
+    fontSize: 14
+  },
+  avatar: {
+    width: 28,
+    height: 28,
+    borderRadius: "50%",
+    background: "var(--optare-primary)",
+    color: "var(--optare-primary-text)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: 12,
+    fontWeight: 700,
+    objectFit: "cover",
+    flexShrink: 0
+  },
+  menu: {
+    position: "absolute",
+    right: 0,
+    marginTop: 6,
+    minWidth: 200,
+    background: "var(--optare-bg)",
+    color: "var(--optare-fg)",
+    border: "1px solid var(--optare-border)",
+    borderRadius: "var(--optare-radius)",
+    boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
+    padding: 6,
+    zIndex: 50
+  },
+  meta: { padding: "8px 10px", borderBottom: "1px solid var(--optare-border)", marginBottom: 4 },
+  name: { fontSize: 14, fontWeight: 600 },
+  email: { fontSize: 12, color: "var(--optare-muted)" },
+  item: {
+    display: "block",
+    width: "100%",
+    textAlign: "left",
+    padding: "8px 10px",
+    background: "none",
+    border: "none",
+    borderRadius: "calc(var(--optare-radius) - 2px)",
+    font: "inherit",
+    fontSize: 13,
+    color: "inherit",
+    cursor: "pointer"
+  }
+};
+function AccountButton(props) {
+  const { cssVars } = useOptare();
+  const { user, isPending, isAuthenticated } = useSession();
+  const { signOut, isPending: signingOut } = useSignOut();
+  const [open, setOpen] = (0, import_react8.useState)(false);
+  const wrapRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
+    if (!open) return;
+    const onDoc = (e) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
+    };
+    const onEsc = (e) => e.key === "Escape" && setOpen(false);
+    document.addEventListener("mousedown", onDoc);
+    document.addEventListener("keydown", onEsc);
+    return () => {
+      document.removeEventListener("mousedown", onDoc);
+      document.removeEventListener("keydown", onEsc);
+    };
+  }, [open]);
+  if (isPending) return null;
+  if (!isAuthenticated || !user) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: props.signInSlot ?? null });
+  const u = user;
+  const display = u.name || u.email || "Account";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref: wrapRef, style: { ...cssVars, ...s.wrap }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "button",
+      {
+        type: "button",
+        style: s.trigger,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: () => setOpen((o) => !o),
+        children: [
+          u.image ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: u.image, alt: "", style: s.avatar }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: s.avatar, children: initials(display) }),
+          !props.compact ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: display }) : null
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { role: "menu", style: s.menu, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: s.meta, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: s.name, children: u.name || "\u2014" }),
+        u.email ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: s.email, children: u.email }) : null
+      ] }),
+      props.menuItems,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          type: "button",
+          role: "menuitem",
+          style: s.item,
+          disabled: signingOut,
+          onClick: async () => {
+            await signOut();
+            setOpen(false);
+            props.onSignedOut?.();
+          },
+          children: signingOut ? "Signing out\u2026" : "Sign out"
+        }
+      )
+    ] }) : null
+  ] });
+}
+
+// src/components/ForgotPassword.tsx
+var import_react9 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function ForgotPassword(props) {
+  const { auth, status } = useOptare();
+  const [email, setEmail] = (0, import_react9.useState)("");
+  const [fieldError, setFieldError] = (0, import_react9.useState)();
+  const [formError, setFormError] = (0, import_react9.useState)(null);
+  const [busy, setBusy] = (0, import_react9.useState)(false);
+  const [sent, setSent] = (0, import_react9.useState)(false);
+  const ready = status === "ready" && !!auth;
+  async function onSubmit(e) {
+    e.preventDefault();
+    if (!auth) return;
+    if (!isValidEmail(email)) {
+      setFieldError("Enter a valid email address");
+      return;
+    }
+    setFieldError(void 0);
+    setFormError(null);
+    setBusy(true);
+    try {
+      const res = await auth.forgetPassword({
+        email,
+        // Absolute by default — the reset link is built on the Optare origin, so
+        // a relative path would drop the user there instead of on this app.
+        redirectTo: props.redirectTo ?? (typeof window !== "undefined" ? `${window.location.origin}/reset-password` : "/reset-password")
+      });
+      if (res?.error && res.error.message && /rate|too many/i.test(res.error.message)) {
+        setFormError(res.error.message);
+      } else {
+        setSent(true);
+      }
+    } catch (err) {
+      setFormError(err instanceof Error ? err.message : "Could not send the email");
+    } finally {
+      setBusy(false);
+    }
+  }
+  if (sent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Card, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        BrandHeader,
+        {
+          title: "Check your email",
+          subtitle: `If an account exists for ${email}, a reset link is on its way.`
+        }
+      ),
+      props.onBack ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LinkButton, { onClick: props.onBack, children: "Back to sign in" }) }) : null
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Card, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      BrandHeader,
+      {
+        title: props.title ?? "Reset your password",
+        subtitle: props.subtitle ?? "We'll email you a link to set a new one."
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("form", { onSubmit, noValidate: true, style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+      formError ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Alert, { children: formError }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        TextInput,
+        {
+          label: "Email",
+          type: "email",
+          autoComplete: "email",
+          value: email,
+          onChange: (e) => setEmail(e.currentTarget.value),
+          error: fieldError,
+          disabled: busy
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button, { type: "submit", busy, disabled: !ready, children: busy ? "Sending\u2026" : "Send reset link" }),
+      props.onBack ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LinkButton, { onClick: props.onBack, children: "Back to sign in" }) }) : null
+    ] }),
+    props.footer ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Footer, { children: props.footer }) : null
+  ] });
+}
+
+// src/components/ResetPassword.tsx
+var import_react10 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function tokenFromUrl() {
+  if (typeof window === "undefined") return null;
+  const q = new URLSearchParams(window.location.search);
+  return q.get("token") || q.get("t") || null;
+}
+function ResetPassword(props) {
+  const { auth, status } = useOptare();
+  const min = props.passwordMinLength ?? 12;
+  const [token, setToken] = (0, import_react10.useState)(props.token ?? null);
+  const [password, setPassword] = (0, import_react10.useState)("");
+  const [confirm, setConfirm] = (0, import_react10.useState)("");
+  const [fieldErrors, setFieldErrors] = (0, import_react10.useState)({});
+  const [formError, setFormError] = (0, import_react10.useState)(null);
+  const [busy, setBusy] = (0, import_react10.useState)(false);
+  const [done, setDone] = (0, import_react10.useState)(false);
+  (0, import_react10.useEffect)(() => {
+    if (!props.token) setToken(tokenFromUrl());
+  }, [props.token]);
+  const ready = status === "ready" && !!auth;
+  const pw = checkPassword(password, min);
+  async function onSubmit(e) {
+    e.preventDefault();
+    if (!auth || !token) return;
+    const errs = {};
+    if (!pw.ok && pw.message) errs.password = pw.message;
+    if (confirm !== password) errs.confirm = "Passwords don't match";
+    setFieldErrors(errs);
+    if (Object.keys(errs).length) return;
+    setFormError(null);
+    setBusy(true);
+    try {
+      const res = await auth.resetPassword({ newPassword: password, token });
+      if (res?.error) {
+        setFormError(res.error.message ?? "That reset link is no longer valid");
+        return;
+      }
+      setDone(true);
+      if (props.onSuccess) props.onSuccess();
+      else if (props.redirectTo && typeof window !== "undefined")
+        window.location.assign(props.redirectTo);
+    } catch (err) {
+      setFormError(err instanceof Error ? err.message : "Could not reset the password");
+    } finally {
+      setBusy(false);
+    }
+  }
+  if (done) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Card, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BrandHeader, { title: "Password updated", subtitle: "You can sign in with your new password now." }),
+      props.onBack ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LinkButton, { onClick: props.onBack, children: "Go to sign in" }) }) : null
+    ] });
+  }
+  if (!token) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Card, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        BrandHeader,
+        {
+          title: "Link expired",
+          subtitle: "This reset link is missing or has already been used. Request a new one."
+        }
+      ),
+      props.onBack ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LinkButton, { onClick: props.onBack, children: "Back to sign in" }) }) : null
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Card, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BrandHeader, { title: props.title ?? "Set a new password" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { onSubmit, noValidate: true, style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+      formError ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Alert, { children: formError }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        TextInput,
+        {
+          label: "New password",
+          type: "password",
+          autoComplete: "new-password",
+          value: password,
+          onChange: (e) => setPassword(e.currentTarget.value),
+          error: fieldErrors.password,
+          disabled: busy
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        TextInput,
+        {
+          label: "Confirm password",
+          type: "password",
+          autoComplete: "new-password",
+          value: confirm,
+          onChange: (e) => setConfirm(e.currentTarget.value),
+          error: fieldErrors.confirm,
+          disabled: busy
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { type: "submit", busy, disabled: !ready, children: busy ? "Saving\u2026" : "Update password" })
+    ] }),
+    props.footer ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Footer, { children: props.footer }) : null
+  ] });
+}
+
+// src/components/TwoFactorChallenge.tsx
+var import_react11 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function TwoFactorChallenge(props) {
+  const { auth, status } = useOptare();
+  const allowBackup = props.allowBackupCode ?? true;
+  const [useBackup, setUseBackup] = (0, import_react11.useState)(false);
+  const [code, setCode] = (0, import_react11.useState)("");
+  const [fieldError, setFieldError] = (0, import_react11.useState)();
+  const [formError, setFormError] = (0, import_react11.useState)(null);
+  const [busy, setBusy] = (0, import_react11.useState)(false);
+  const ready = status === "ready" && !!auth;
+  async function onSubmit(e) {
+    e.preventDefault();
+    if (!auth) return;
+    const trimmed = code.trim().replace(/\s+/g, "");
+    if (trimmed.length < (useBackup ? 8 : 6)) {
+      setFieldError(useBackup ? "Enter a full backup code" : "Enter the 6-digit code");
+      return;
+    }
+    setFieldError(void 0);
+    setFormError(null);
+    setBusy(true);
+    try {
+      const call = useBackup ? auth.twoFactor.verifyBackupCode({ code: trimmed }) : auth.twoFactor.verifyTotp({ code: trimmed });
+      const res = await call;
+      if (res?.error) {
+        setFormError(res.error.message ?? "That code didn't work");
+        return;
+      }
+      notifySessionChanged();
+      if (props.onSuccess) props.onSuccess();
+      else if (props.redirectTo && typeof window !== "undefined")
+        window.location.assign(props.redirectTo);
+    } catch (err) {
+      setFormError(err instanceof Error ? err.message : "Verification failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Card, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      BrandHeader,
+      {
+        title: props.title ?? "Two-factor authentication",
+        subtitle: props.subtitle ?? (useBackup ? "Enter one of your saved backup codes." : "Enter the code from your authenticator app.")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("form", { onSubmit, noValidate: true, style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+      formError ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Alert, { children: formError }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        TextInput,
+        {
+          label: useBackup ? "Backup code" : "Authentication code",
+          inputMode: useBackup ? "text" : "numeric",
+          autoComplete: "one-time-code",
+          value: code,
+          onChange: (e) => setCode(e.currentTarget.value),
+          error: fieldError,
+          disabled: busy
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { type: "submit", busy, disabled: !ready, children: busy ? "Verifying\u2026" : "Verify" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }, children: [
+        allowBackup ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LinkButton, { onClick: () => {
+          setUseBackup((b) => !b);
+          setCode("");
+          setFieldError(void 0);
+        }, children: useBackup ? "Use an authenticator code" : "Use a backup code" }) : null,
+        props.onCancel ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LinkButton, { onClick: props.onCancel, children: "Cancel" }) : null
+      ] }) })
+    ] }),
+    props.footer ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Footer, { children: props.footer }) : null
+  ] });
+}
+
+// src/index.ts
+var import_client2 = require("@optare/client");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AccountButton,
+  DEFAULT_AUTH_METHODS,
+  DEFAULT_OPTARE_ORIGIN,
+  DEFAULT_PRIMARY,
+  DEFAULT_RADIUS,
+  ForgotPassword,
+  OptareConfigError,
+  OptareProvider,
+  ResetPassword,
+  SignIn,
+  SignUp,
+  SocialButtons,
+  TwoFactorChallenge,
+  brandingToCssVars,
+  checkPassword,
+  contrastText,
+  createReactAuthClient,
+  isValidEmail,
+  notifySessionChanged,
+  resolveOptareConfig,
+  safeColor,
+  safeLength,
+  useActiveOrganization,
+  useAuthMethods,
+  useBranding,
+  useOptare,
+  useOptareAuth,
+  useOptareConfig,
+  useSession,
+  useSignOut,
+  useUser,
+  validateSignIn,
+  validateSignUp
+});