@skiddph/prui 0.1.0

package/dist/pages.js

@@ -0,0 +1,806 @@
+import { jsx as e, jsxs as a, Fragment as $ } from "react/jsx-runtime";
+import * as v from "react";
+import { Button as S } from "./core/button.js";
+import { Input as P, Textarea as G } from "./core/input.js";
+import { Label as C } from "./core/label.js";
+import { Loader2 as Y, LogOut as H, Inbox as K, AlertTriangle as U, FileQuestion as W } from "lucide-react";
+import { cn as z } from "./core/cn.js";
+import { Card as Q, CardHeader as J, CardTitle as X, CardDescription as Z, CardContent as _, CardFooter as k, Avatar as ee } from "./core/card.js";
+import { Switch as te } from "./core/switch.js";
+function j({ title: t, description: r, brand: o, width: n = "max-w-sm", children: d, footer: i }) {
+  return /* @__PURE__ */ e("div", { className: "prui-page flex min-h-[100dvh] items-center justify-center bg-[var(--prui-background)] p-4", children: /* @__PURE__ */ a("div", { className: z("w-full", n), children: [
+    o ? /* @__PURE__ */ a("div", { className: "mb-6 flex items-center justify-center gap-2", "data-testid": "page-brand", children: [
+      o.mark ? /* @__PURE__ */ e("img", { src: o.mark, alt: "", className: "h-8 w-8 rounded-[var(--prui-radius-1)] object-cover" }) : null,
+      /* @__PURE__ */ e("span", { className: "text-lg font-semibold text-[var(--prui-fg)]", children: o.name })
+    ] }) : null,
+    /* @__PURE__ */ a("div", { className: "rounded-[var(--prui-radius)] border border-[var(--prui-line)] bg-[var(--prui-surface)] p-6", children: [
+      /* @__PURE__ */ a("div", { className: "mb-4 flex flex-col gap-1 text-center", children: [
+        /* @__PURE__ */ e("h1", { className: "text-lg font-semibold text-[var(--prui-fg)]", children: t }),
+        r ? /* @__PURE__ */ e("p", { className: "text-sm text-[var(--prui-dim)]", children: r }) : null
+      ] }),
+      d,
+      i ? /* @__PURE__ */ e("div", { className: "mt-4 text-center text-sm text-[var(--prui-dim)]", children: i }) : null
+    ] })
+  ] }) });
+}
+function F({ error: t }) {
+  return t ? /* @__PURE__ */ e(
+    "p",
+    {
+      role: "alert",
+      "data-testid": "page-error",
+      className: "mb-3 rounded-[var(--prui-radius)] border border-[var(--prui-danger)]/40 bg-[var(--prui-danger)]/10 px-3 py-2 text-sm text-[var(--prui-danger)]",
+      children: t
+    }
+  ) : null;
+}
+function ae({ loading: t, children: r }) {
+  return /* @__PURE__ */ a($, { children: [
+    t ? /* @__PURE__ */ e(Y, { className: "h-4 w-4 animate-spin", "aria-hidden": !0 }) : null,
+    r
+  ] });
+}
+function T({ providers: t }) {
+  return !t || t.length === 0 ? null : /* @__PURE__ */ a("div", { className: "mt-4", "data-testid": "oauth-providers", children: [
+    /* @__PURE__ */ a("div", { className: "relative my-3", children: [
+      /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ e("span", { className: "w-full border-t border-[var(--prui-line)]" }) }),
+      /* @__PURE__ */ e("div", { className: "relative flex justify-center text-xs", children: /* @__PURE__ */ e("span", { className: "bg-[var(--prui-surface)] px-2 text-[var(--prui-dim)]", children: "or continue with" }) })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-2 gap-2", children: t.map((r) => {
+      const o = r.icon;
+      return /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          onClick: (n) => {
+            var i;
+            const d = (i = t.find((p) => p.id === r.id)) == null ? void 0 : i.onClick;
+            d == null || d(), n.preventDefault();
+          },
+          className: "inline-flex h-9 items-center justify-center gap-2 rounded-[var(--prui-radius)] border border-[var(--prui-line)] bg-[var(--prui-background)] text-sm text-[var(--prui-fg)] hover:border-[var(--prui-dim)] cursor-pointer",
+          children: [
+            o ? /* @__PURE__ */ e(o, { className: "h-4 w-4", "aria-hidden": !0 }) : null,
+            r.label
+          ]
+        },
+        r.id
+      );
+    }) })
+  ] });
+}
+const A = [
+  { name: "email", label: "Email", type: "email", required: !0, autoComplete: "email" },
+  { name: "password", label: "Password", type: "password", required: !0, autoComplete: "current-password" }
+], re = [
+  { name: "name", label: "Name", type: "text", required: !0, autoComplete: "name" },
+  { name: "email", label: "Email", type: "email", required: !0, autoComplete: "email" },
+  { name: "password", label: "Password", type: "password", required: !0, autoComplete: "new-password" }
+];
+function ne({
+  onSubmit: t,
+  fields: r,
+  extraFields: o,
+  links: n,
+  oauth: d,
+  brand: i,
+  submitLabel: p = "Sign in",
+  loading: c = !1,
+  error: x,
+  className: g
+}) {
+  const s = { email: !0, password: !0, remember: !1, ...r }, m = [
+    ...s.email !== !1 ? [A[0]] : [],
+    ...s.password !== !1 ? [A[1]] : [],
+    ...o ?? []
+  ], [f, y] = v.useState({}), [w, N] = v.useState(!1), [h, B] = v.useState(!1);
+  return /* @__PURE__ */ a(j, { title: "Welcome back", description: "Sign in to your account", brand: i, className: g, children: [
+    /* @__PURE__ */ e(F, { error: x }),
+    /* @__PURE__ */ a("form", { onSubmit: async (l) => {
+      l.preventDefault();
+      try {
+        const u = t == null ? void 0 : t({ ...f, remember: String(w) });
+        u && typeof u.then == "function" && (B(!0), await u);
+      } finally {
+        B(!1);
+      }
+    }, className: "flex flex-col gap-3", "data-testid": "login-form", children: [
+      m.map((l) => /* @__PURE__ */ a("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ a(C, { htmlFor: `login-${l.name}`, children: [
+          l.label,
+          l.required ? /* @__PURE__ */ e("span", { className: "ml-0.5 text-[var(--prui-danger)]", children: "*" }) : null
+        ] }),
+        /* @__PURE__ */ e(
+          P,
+          {
+            id: `login-${l.name}`,
+            type: l.type ?? "text",
+            placeholder: l.placeholder,
+            autoComplete: l.autoComplete,
+            required: l.required,
+            disabled: c || h,
+            value: f[l.name] ?? "",
+            onChange: (u) => y((b) => ({ ...b, [l.name]: u.target.value }))
+          }
+        )
+      ] }, l.name)),
+      s.remember ? /* @__PURE__ */ a("label", { className: "flex items-center gap-2 text-sm text-[var(--prui-dim)]", "data-testid": "login-remember", children: [
+        /* @__PURE__ */ e(
+          "input",
+          {
+            type: "checkbox",
+            checked: w,
+            onChange: (l) => N(l.target.checked),
+            className: "h-4 w-4 accent-[var(--prui-brand)]"
+          }
+        ),
+        "Remember me"
+      ] }) : null,
+      /* @__PURE__ */ e(S, { type: "submit", variant: "primary", loading: c || h, "data-testid": "login-submit", children: /* @__PURE__ */ e(ae, { loading: c || h, children: p }) })
+    ] }),
+    /* @__PURE__ */ e(T, { providers: d }),
+    (n == null ? void 0 : n.forgot) !== !1 && (n != null && n.forgot) ? /* @__PURE__ */ e("div", { className: "mt-3 text-center", children: /* @__PURE__ */ e("a", { href: n.forgot.href, className: "text-sm text-[var(--prui-brand)] hover:underline", children: n.forgot.label ?? "Forgot password?" }) }) : null,
+    (n == null ? void 0 : n.register) !== !1 && (n != null && n.register) ? /* @__PURE__ */ a("div", { className: "mt-1 text-center text-sm text-[var(--prui-dim)]", children: [
+      "No account?",
+      " ",
+      /* @__PURE__ */ e("a", { href: n.register.href, className: "text-[var(--prui-brand)] hover:underline", children: n.register.label ?? "Register" })
+    ] }) : null
+  ] });
+}
+const Ce = {
+  name: "LoginPage",
+  props: [
+    { name: "onSubmit", type: "(values) => void | Promise<void>", default: null, control: "none" },
+    { name: "fields", type: "{ email?, password?, remember? }", default: "all except remember", control: "object" },
+    { name: "links", type: "{ forgot?, register? }", default: "undefined", control: "object" },
+    { name: "oauth", type: "OAuthProvider[]", default: "undefined", control: "object" },
+    { name: "brand", type: "{ name, mark?, href? }", default: "undefined", control: "object" },
+    { name: "loading", type: "boolean", default: "false", control: "boolean" },
+    { name: "error", type: "string | null", default: "null", control: "text" }
+  ]
+};
+function le({
+  onSubmit: t,
+  fields: r,
+  extraFields: o,
+  links: n,
+  oauth: d,
+  brand: i,
+  submitLabel: p = "Create account",
+  loading: c = !1,
+  error: x
+}) {
+  const g = { name: !0, email: !0, password: !0, confirm: !1, ...r }, m = [...re.filter(
+    (l) => l.name === "name" ? g.name !== !1 : l.name === "email" ? g.email !== !1 : g.password !== !1
+  ), ...o ?? []], [f, y] = v.useState({}), [w, N] = v.useState(""), [h, B] = v.useState(!1);
+  return /* @__PURE__ */ a(j, { title: "Create your account", description: "Get started in minutes", brand: i, width: "max-w-md", children: [
+    /* @__PURE__ */ e(F, { error: x }),
+    /* @__PURE__ */ a("form", { onSubmit: async (l) => {
+      l.preventDefault();
+      try {
+        const u = t == null ? void 0 : t({ ...f, confirm: w });
+        u && typeof u.then == "function" && (B(!0), await u);
+      } finally {
+        B(!1);
+      }
+    }, className: "flex flex-col gap-3", "data-testid": "register-form", children: [
+      m.map((l) => /* @__PURE__ */ a("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ a(C, { htmlFor: `register-${l.name}`, children: [
+          l.label,
+          l.required ? /* @__PURE__ */ e("span", { className: "ml-0.5 text-[var(--prui-danger)]", children: "*" }) : null
+        ] }),
+        /* @__PURE__ */ e(
+          P,
+          {
+            id: `register-${l.name}`,
+            type: l.type ?? "text",
+            placeholder: l.placeholder,
+            autoComplete: l.autoComplete,
+            required: l.required,
+            disabled: c || h,
+            value: f[l.name] ?? "",
+            onChange: (u) => y((b) => ({ ...b, [l.name]: u.target.value }))
+          }
+        )
+      ] }, l.name)),
+      g.confirm ? /* @__PURE__ */ a("div", { className: "flex flex-col gap-1.5", "data-testid": "register-confirm", children: [
+        /* @__PURE__ */ a(C, { htmlFor: "register-confirm-password", children: [
+          "Confirm password",
+          /* @__PURE__ */ e("span", { className: "ml-0.5 text-[var(--prui-danger)]", children: "*" })
+        ] }),
+        /* @__PURE__ */ e(
+          P,
+          {
+            id: "register-confirm-password",
+            type: "password",
+            autoComplete: "new-password",
+            required: !0,
+            disabled: c || h,
+            value: w,
+            onChange: (l) => N(l.target.value)
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ e(S, { type: "submit", variant: "primary", loading: c || h, "data-testid": "register-submit", children: p })
+    ] }),
+    /* @__PURE__ */ e(T, { providers: d }),
+    n != null && n.login ? /* @__PURE__ */ a("div", { className: "mt-3 text-center text-sm text-[var(--prui-dim)]", "data-testid": "register-login-link", children: [
+      "Already have an account?",
+      " ",
+      /* @__PURE__ */ e("a", { href: n.login.href, className: "text-[var(--prui-brand)] hover:underline", children: n.login.label ?? "Sign in" })
+    ] }) : null
+  ] });
+}
+const Se = {
+  name: "RegisterPage",
+  props: [
+    { name: "onSubmit", type: "(values) => void | Promise<void>", default: null, control: "none" },
+    { name: "fields", type: "{ name?, email?, password?, confirm? }", default: "name, email, password", control: "object" },
+    { name: "links", type: "{ login? }", default: "undefined", control: "object" },
+    { name: "oauth", type: "OAuthProvider[]", default: "undefined", control: "object" },
+    { name: "brand", type: "BrandConfig", default: "undefined", control: "object" },
+    { name: "loading", type: "boolean", default: "false", control: "boolean" },
+    { name: "error", type: "string | null", default: "null", control: "text" }
+  ]
+};
+function oe({
+  onSubmit: t,
+  links: r,
+  brand: o,
+  submitLabel: n = "Send reset link",
+  loading: d = !1,
+  error: i,
+  sent: p = !1
+}) {
+  const [c, x] = v.useState(""), [g, s] = v.useState(!1);
+  return /* @__PURE__ */ a(j, { title: "Forgot your password?", description: "Enter your email and we send you a reset link", brand: o, children: [
+    /* @__PURE__ */ e(F, { error: i }),
+    p ? /* @__PURE__ */ e("p", { "data-testid": "forgot-sent", className: "rounded-[var(--prui-radius)] border border-[var(--prui-ok)]/40 bg-[var(--prui-ok)]/10 px-3 py-3 text-center text-sm text-[var(--prui-ok)]", children: "Check your email for the reset link." }) : /* @__PURE__ */ a("form", { onSubmit: async (f) => {
+      f.preventDefault();
+      try {
+        const y = t == null ? void 0 : t({ email: c });
+        y && typeof y.then == "function" && (s(!0), await y);
+      } finally {
+        s(!1);
+      }
+    }, className: "flex flex-col gap-3", "data-testid": "forgot-form", children: [
+      /* @__PURE__ */ a("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ a(C, { htmlFor: "forgot-email", children: [
+          "Email",
+          /* @__PURE__ */ e("span", { className: "ml-0.5 text-[var(--prui-danger)]", children: "*" })
+        ] }),
+        /* @__PURE__ */ e(
+          P,
+          {
+            id: "forgot-email",
+            type: "email",
+            autoComplete: "email",
+            required: !0,
+            placeholder: "you@example.com",
+            disabled: d || g,
+            value: c,
+            onChange: (f) => x(f.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(S, { type: "submit", variant: "primary", loading: d || g, "data-testid": "forgot-submit", children: n })
+    ] }),
+    (r == null ? void 0 : r.login) !== !1 && (r != null && r.login) ? /* @__PURE__ */ e("div", { className: "mt-3 text-center text-sm", children: /* @__PURE__ */ e("a", { href: r.login.href, className: "text-[var(--prui-brand)] hover:underline", children: r.login.label ?? "Back to sign in" }) }) : null
+  ] });
+}
+const je = {
+  name: "ForgotPasswordPage",
+  props: [
+    { name: "onSubmit", type: "({ email }) => void | Promise<void>", default: null, control: "none" },
+    { name: "links", type: "{ login?, register? }", default: "undefined", control: "object" },
+    { name: "brand", type: "BrandConfig", default: "undefined", control: "object" },
+    { name: "loading", type: "boolean", default: "false", control: "boolean" },
+    { name: "error", type: "string | null", default: "null", control: "text" },
+    { name: "sent", type: "boolean", default: "false", control: "boolean" }
+  ]
+};
+function ie({
+  onSubmit: t,
+  fields: r,
+  links: o,
+  brand: n,
+  submitLabel: d = "Reset password",
+  loading: i = !1,
+  error: p
+}) {
+  const c = { password: !0, confirm: !0, ...r }, [x, g] = v.useState({ password: "", confirm: "" }), [s, m] = v.useState(!1);
+  return /* @__PURE__ */ a(j, { title: "Choose a new password", description: "Your new password must be different from previous ones", brand: n, children: [
+    /* @__PURE__ */ e(F, { error: p }),
+    /* @__PURE__ */ a("form", { onSubmit: async (y) => {
+      y.preventDefault();
+      try {
+        const w = t == null ? void 0 : t({ ...x });
+        w && typeof w.then == "function" && (m(!0), await w);
+      } finally {
+        m(!1);
+      }
+    }, className: "flex flex-col gap-3", "data-testid": "reset-form", children: [
+      c.password !== !1 ? /* @__PURE__ */ a("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ a(C, { htmlFor: "reset-password", children: [
+          "New password",
+          /* @__PURE__ */ e("span", { className: "ml-0.5 text-[var(--prui-danger)]", children: "*" })
+        ] }),
+        /* @__PURE__ */ e(
+          P,
+          {
+            id: "reset-password",
+            type: "password",
+            autoComplete: "new-password",
+            required: !0,
+            disabled: i || s,
+            value: x.password,
+            onChange: (y) => g((w) => ({ ...w, password: y.target.value }))
+          }
+        )
+      ] }) : null,
+      c.confirm !== !1 ? /* @__PURE__ */ a("div", { className: "flex flex-col gap-1.5", "data-testid": "reset-confirm", children: [
+        /* @__PURE__ */ a(C, { htmlFor: "reset-confirm", children: [
+          "Confirm password",
+          /* @__PURE__ */ e("span", { className: "ml-0.5 text-[var(--prui-danger)]", children: "*" })
+        ] }),
+        /* @__PURE__ */ e(
+          P,
+          {
+            id: "reset-confirm",
+            type: "password",
+            autoComplete: "new-password",
+            required: !0,
+            disabled: i || s,
+            value: x.confirm,
+            onChange: (y) => g((w) => ({ ...w, confirm: y.target.value }))
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ e(S, { type: "submit", variant: "primary", loading: i || s, "data-testid": "reset-submit", children: d })
+    ] }),
+    (o == null ? void 0 : o.login) !== !1 && (o != null && o.login) ? /* @__PURE__ */ e("div", { className: "mt-3 text-center text-sm", children: /* @__PURE__ */ e("a", { href: o.login.href, className: "text-[var(--prui-brand)] hover:underline", children: o.login.label ?? "Back to sign in" }) }) : null
+  ] });
+}
+const Be = {
+  name: "ResetPasswordPage",
+  props: [
+    { name: "onSubmit", type: "({ password, confirm }) => void | Promise<void>", default: null, control: "none" },
+    { name: "fields", type: "{ password?, confirm? }", default: "both shown", control: "object" },
+    { name: "links", type: "{ login? }", default: "undefined", control: "object" },
+    { name: "brand", type: "BrandConfig", default: "undefined", control: "object" },
+    { name: "loading", type: "boolean", default: "false", control: "boolean" },
+    { name: "error", type: "string | null", default: "null", control: "text" }
+  ]
+};
+function se({
+  onSubmit: t,
+  length: r = 6,
+  title: o = "Enter verification code",
+  description: n = "We sent a code to your email",
+  brand: d,
+  submitLabel: i = "Verify",
+  loading: p = !1,
+  error: c,
+  onResend: x,
+  resendLabel: g = "Resend code"
+}) {
+  const [s, m] = v.useState(() => Array.from({ length: r }, () => "")), f = v.useRef([]), y = s.join(""), w = (l, u) => {
+    var D, M;
+    const b = u.replace(/\D/g, "");
+    if (b.length > 1) {
+      const R = b.slice(0, r - l).split("");
+      m((V) => {
+        const L = [...V];
+        return R.forEach((I, O) => {
+          L[l + O] = I;
+        }), L;
+      });
+      const q = Math.min(l + R.length, r - 1);
+      (D = f.current[q]) == null || D.focus();
+      return;
+    }
+    m((R) => {
+      const q = [...R];
+      return q[l] = b, q;
+    }), b && l < r - 1 && ((M = f.current[l + 1]) == null || M.focus());
+  }, N = (l, u) => {
+    var b;
+    u.key === "Backspace" && !s[l] && l > 0 && ((b = f.current[l - 1]) == null || b.focus());
+  }, [h, B] = v.useState(!1);
+  return /* @__PURE__ */ a(j, { title: o, description: n, brand: d, children: [
+    /* @__PURE__ */ e(F, { error: c }),
+    /* @__PURE__ */ a("form", { onSubmit: async (l) => {
+      l.preventDefault();
+      try {
+        const u = t == null ? void 0 : t(y);
+        u && typeof u.then == "function" && (B(!0), await u);
+      } finally {
+        B(!1);
+      }
+    }, className: "flex flex-col gap-4", "data-testid": "otp-form", children: [
+      /* @__PURE__ */ e("div", { className: "flex justify-center gap-2", role: "group", "aria-label": "Verification code", children: s.map((l, u) => /* @__PURE__ */ e(
+        P,
+        {
+          ref: (b) => {
+            f.current[u] = b;
+          },
+          type: "text",
+          inputMode: "numeric",
+          autoComplete: "one-time-code",
+          maxLength: r,
+          "aria-label": `Digit ${u + 1}`,
+          className: "h-11 w-10 text-center text-lg",
+          disabled: p || h,
+          value: l,
+          onChange: (b) => w(u, b.target.value),
+          onKeyDown: (b) => N(u, b)
+        },
+        u
+      )) }),
+      /* @__PURE__ */ e(S, { type: "submit", variant: "primary", loading: p || h, "data-testid": "otp-submit", children: i })
+    ] }),
+    x ? /* @__PURE__ */ e("div", { className: "mt-3 text-center text-sm", children: /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: () => void x(),
+        className: "text-[var(--prui-brand)] hover:underline cursor-pointer",
+        children: g
+      }
+    ) }) : null
+  ] });
+}
+const Fe = {
+  name: "OtpPage",
+  props: [
+    { name: "onSubmit", type: "(code: string) => void | Promise<void>", default: null, control: "none" },
+    { name: "length", type: "number", default: "6", control: "number" },
+    { name: "brand", type: "BrandConfig", default: "undefined", control: "object" },
+    { name: "loading", type: "boolean", default: "false", control: "boolean" },
+    { name: "error", type: "string | null", default: "null", control: "text" },
+    { name: "onResend", type: "() => void | Promise<void>", default: null, control: "none" }
+  ]
+};
+function de({ onLogout: t, brand: r, message: o, loading: n = !1 }) {
+  return v.useEffect(() => {
+    t && t();
+  }, [t]), /* @__PURE__ */ e(j, { title: "Signing out", brand: r, width: "max-w-xs", children: /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-3 py-4 text-[var(--prui-dim)]", "data-testid": "logout-page", children: [
+    /* @__PURE__ */ e(H, { className: "h-6 w-6", "aria-hidden": !0 }),
+    /* @__PURE__ */ e("p", { className: "text-sm text-center", children: o ?? (n ? "Signing you out..." : "You have been signed out.") })
+  ] }) });
+}
+const Re = {
+  name: "LogoutPage",
+  props: [
+    { name: "onLogout", type: "() => void | Promise<void>", default: null, control: "none" },
+    { name: "brand", type: "BrandConfig", default: "undefined", control: "object" },
+    { name: "message", type: "ReactNode", default: "generic", control: "text" },
+    { name: "loading", type: "boolean", default: "false", control: "boolean" }
+  ]
+};
+function ce({
+  title: t = "Page not found",
+  description: r = "The page you are looking for does not exist or has been moved.",
+  homeHref: o = "/",
+  onGoHome: n,
+  brand: d
+}) {
+  return /* @__PURE__ */ e(j, { title: t, description: r, brand: d, width: "max-w-md", children: /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-4 py-4", "data-testid": "notfound-page", children: [
+    /* @__PURE__ */ e(W, { className: "h-10 w-10 text-[var(--prui-dim)]", "aria-hidden": !0 }),
+    /* @__PURE__ */ e("code", { className: "text-3xl font-bold text-[var(--prui-fg)]", children: "404" }),
+    n ? /* @__PURE__ */ e(S, { variant: "primary", onClick: n, "data-testid": "notfound-home", children: "Go home" }) : /* @__PURE__ */ e(S, { variant: "primary", asChild: !0, "data-testid": "notfound-home", children: /* @__PURE__ */ e("a", { href: o, children: "Go home" }) })
+  ] }) });
+}
+const qe = {
+  name: "NotFoundPage",
+  props: [
+    { name: "title", type: "string", default: "'Page not found'", control: "text" },
+    { name: "description", type: "ReactNode", default: "generic", control: "text" },
+    { name: "homeHref", type: "string", default: "'/'", control: "text" },
+    { name: "onGoHome", type: "() => void", default: null, control: "none" },
+    { name: "brand", type: "BrandConfig", default: "undefined", control: "object" }
+  ]
+};
+function ue({
+  title: t = "Something went wrong",
+  error: r,
+  onRetry: o,
+  retryLabel: n = "Try again",
+  brand: d
+}) {
+  const i = r instanceof Error ? r.message : typeof r == "string" ? r : void 0;
+  return /* @__PURE__ */ e(j, { title: t, brand: d, width: "max-w-md", children: /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-4 py-4", "data-testid": "error-page", children: [
+    /* @__PURE__ */ e(U, { className: "h-10 w-10 text-[var(--prui-warn)]", "aria-hidden": !0 }),
+    i ? /* @__PURE__ */ e("p", { role: "alert", className: "rounded-[var(--prui-radius)] border border-[var(--prui-warn)]/40 bg-[var(--prui-warn)]/10 px-3 py-2 text-sm text-[var(--prui-warn)]", children: i }) : /* @__PURE__ */ e("p", { className: "text-sm text-[var(--prui-dim)]", children: "An unexpected error occurred." }),
+    o ? /* @__PURE__ */ e(S, { variant: "primary", onClick: o, "data-testid": "error-retry", children: n }) : null
+  ] }) });
+}
+const Ee = {
+  name: "ErrorPage",
+  props: [
+    { name: "title", type: "string", default: "'Something went wrong'", control: "text" },
+    { name: "error", type: "unknown", default: null, control: "text" },
+    { name: "onRetry", type: "() => void", default: null, control: "none" },
+    { name: "retryLabel", type: "string", default: "'Try again'", control: "text" },
+    { name: "brand", type: "BrandConfig", default: "undefined", control: "object" }
+  ]
+};
+function De({
+  title: t = "Nothing here yet",
+  description: r,
+  icon: o = K,
+  action: n,
+  className: d
+}) {
+  return /* @__PURE__ */ a("div", { className: d ?? "flex flex-col items-center justify-center gap-3 rounded-[var(--prui-radius)] border border-dashed border-[var(--prui-line)] px-6 py-12 text-center", "data-testid": "empty-state", children: [
+    /* @__PURE__ */ e(o, { className: "h-8 w-8 text-[var(--prui-dim)]", "aria-hidden": !0 }),
+    /* @__PURE__ */ a("div", { children: [
+      /* @__PURE__ */ e("p", { className: "text-sm font-medium text-[var(--prui-fg)]", children: t }),
+      r ? /* @__PURE__ */ e("p", { className: "mt-1 text-sm text-[var(--prui-dim)]", children: r }) : null
+    ] }),
+    n
+  ] });
+}
+const Me = {
+  name: "EmptyState",
+  props: [
+    { name: "title", type: "string", default: "'Nothing here yet'", control: "text" },
+    { name: "description", type: "ReactNode", default: null, control: "text" },
+    { name: "icon", type: "LucideIcon", default: "Inbox", control: "icon" },
+    { name: "action", type: "ReactNode", default: null, control: "none" }
+  ]
+};
+function me({
+  profile: t = {},
+  onSubmit: r,
+  fields: o,
+  onSignOut: n,
+  signOutLabel: d = "Sign out",
+  brand: i,
+  submitLabel: p = "Save profile",
+  loading: c = !1,
+  error: x
+}) {
+  const g = { name: !0, email: !0, bio: !0, ...o }, [s, m] = v.useState({
+    name: t.name ?? "",
+    email: t.email ?? "",
+    bio: t.bio ?? ""
+  }), [f, y] = v.useState(!1);
+  return /* @__PURE__ */ a(j, { title: "Your profile", brand: i, width: "max-w-lg", children: [
+    /* @__PURE__ */ e(F, { error: x }),
+    /* @__PURE__ */ a("form", { onSubmit: async (N) => {
+      N.preventDefault();
+      try {
+        const h = r == null ? void 0 : r({ ...s });
+        h && typeof h.then == "function" && (y(!0), await h);
+      } finally {
+        y(!1);
+      }
+    }, className: "flex flex-col gap-4", "data-testid": "profile-form", children: [
+      /* @__PURE__ */ a("div", { className: "flex items-center gap-3", "data-testid": "profile-avatar", children: [
+        /* @__PURE__ */ e(ee, { src: t.avatar, alt: s.name || "User", size: "lg" }),
+        /* @__PURE__ */ e("div", { className: "text-sm text-[var(--prui-dim)]", children: s.email || "No email" })
+      ] }),
+      g.name !== !1 ? /* @__PURE__ */ a("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ e(C, { htmlFor: "profile-name", children: "Name" }),
+        /* @__PURE__ */ e(
+          P,
+          {
+            id: "profile-name",
+            disabled: c || f,
+            value: s.name,
+            onChange: (N) => m((h) => ({ ...h, name: N.target.value }))
+          }
+        )
+      ] }) : null,
+      g.email !== !1 ? /* @__PURE__ */ a("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ e(C, { htmlFor: "profile-email", children: "Email" }),
+        /* @__PURE__ */ e(
+          P,
+          {
+            id: "profile-email",
+            type: "email",
+            disabled: c || f,
+            value: s.email,
+            onChange: (N) => m((h) => ({ ...h, email: N.target.value }))
+          }
+        )
+      ] }) : null,
+      g.bio !== !1 ? /* @__PURE__ */ a("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ e(C, { htmlFor: "profile-bio", children: "Bio" }),
+        /* @__PURE__ */ e(
+          G,
+          {
+            id: "profile-bio",
+            rows: 3,
+            disabled: c || f,
+            value: s.bio,
+            onChange: (N) => m((h) => ({ ...h, bio: N.target.value }))
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
+        n ? /* @__PURE__ */ e(S, { type: "button", variant: "ghost", onClick: n, children: d }) : /* @__PURE__ */ e("span", {}),
+        /* @__PURE__ */ e(S, { type: "submit", variant: "primary", loading: c || f, "data-testid": "profile-submit", children: p })
+      ] })
+    ] })
+  ] });
+}
+const Le = {
+  name: "ProfilePage",
+  props: [
+    { name: "profile", type: "{ name?, email?, avatar?, bio? }", default: "{}", control: "object" },
+    { name: "onSubmit", type: "(values) => void | Promise<void>", default: null, control: "none" },
+    { name: "fields", type: "{ name?, email?, bio? }", default: "all shown", control: "object" },
+    { name: "onSignOut", type: "() => void", default: null, control: "none" },
+    { name: "brand", type: "BrandConfig", default: "undefined", control: "object" },
+    { name: "loading", type: "boolean", default: "false", control: "boolean" },
+    { name: "error", type: "string | null", default: "null", control: "text" }
+  ]
+};
+function pe({ title: t = "Settings", toggles: r = [], brand: o }) {
+  return /* @__PURE__ */ e(j, { title: t, brand: o, width: "max-w-lg", children: /* @__PURE__ */ a(Q, { children: [
+    /* @__PURE__ */ a(J, { children: [
+      /* @__PURE__ */ e(X, { children: "Preferences" }),
+      /* @__PURE__ */ e(Z, { children: "Changes apply immediately." })
+    ] }),
+    /* @__PURE__ */ e(_, { className: "flex flex-col divide-y divide-[var(--prui-line)]", children: r.length === 0 ? /* @__PURE__ */ e("p", { className: "py-3 text-sm text-[var(--prui-dim)]", children: "No settings available." }) : r.map((n) => /* @__PURE__ */ e(fe, { toggle: n }, n.id)) }),
+    /* @__PURE__ */ e(k, { className: "justify-end", children: /* @__PURE__ */ a("span", { className: "text-xs text-[var(--prui-dim)]", "data-testid": "settings-page", children: [
+      r.length,
+      " setting",
+      r.length === 1 ? "" : "s"
+    ] }) })
+  ] }) });
+}
+function fe({ toggle: t }) {
+  const [r, o] = v.useState(t.defaultChecked ?? !1), n = t.checked !== void 0, d = n ? t.checked : r;
+  return /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-4 py-3 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ a("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ e("p", { className: "text-sm font-medium text-[var(--prui-fg)]", children: t.label }),
+      t.description ? /* @__PURE__ */ e("p", { className: "text-xs text-[var(--prui-dim)]", children: t.description }) : null
+    ] }),
+    /* @__PURE__ */ e(
+      te,
+      {
+        "aria-label": t.label,
+        checked: d,
+        onChange: (i) => {
+          var p;
+          n || o(i), (p = t.onChange) == null || p.call(t, i);
+        }
+      }
+    )
+  ] });
+}
+const Ae = {
+  name: "SettingsPage",
+  props: [
+    { name: "title", type: "string", default: "'Settings'", control: "text" },
+    { name: "toggles", type: "SettingsToggle[]", default: "[]", control: "object" },
+    { name: "brand", type: "BrandConfig", default: "undefined", control: "object" }
+  ]
+};
+function he({
+  onSubmit: t,
+  brand: r,
+  description: o = "Create the first administrator account for this instance.",
+  loading: n = !1,
+  error: d
+}) {
+  const [i, p] = v.useState({ name: "", email: "", password: "" }), [c, x] = v.useState(!1);
+  return /* @__PURE__ */ a(j, { title: "Set up admin", description: o, brand: r, width: "max-w-md", children: [
+    /* @__PURE__ */ e(F, { error: d }),
+    /* @__PURE__ */ a("form", { onSubmit: async (s) => {
+      s.preventDefault();
+      try {
+        const m = t == null ? void 0 : t({ ...i });
+        m && typeof m.then == "function" && (x(!0), await m);
+      } finally {
+        x(!1);
+      }
+    }, className: "flex flex-col gap-3", "data-testid": "adminsetup-form", children: [
+      /* @__PURE__ */ a("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ a(C, { htmlFor: "admin-name", children: [
+          "Name",
+          /* @__PURE__ */ e("span", { className: "ml-0.5 text-[var(--prui-danger)]", children: "*" })
+        ] }),
+        /* @__PURE__ */ e(
+          P,
+          {
+            id: "admin-name",
+            required: !0,
+            autoComplete: "name",
+            disabled: n || c,
+            value: i.name,
+            onChange: (s) => p((m) => ({ ...m, name: s.target.value }))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ a(C, { htmlFor: "admin-email", children: [
+          "Email",
+          /* @__PURE__ */ e("span", { className: "ml-0.5 text-[var(--prui-danger)]", children: "*" })
+        ] }),
+        /* @__PURE__ */ e(
+          P,
+          {
+            id: "admin-email",
+            type: "email",
+            required: !0,
+            autoComplete: "email",
+            disabled: n || c,
+            value: i.email,
+            onChange: (s) => p((m) => ({ ...m, email: s.target.value }))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ a(C, { htmlFor: "admin-password", children: [
+          "Password",
+          /* @__PURE__ */ e("span", { className: "ml-0.5 text-[var(--prui-danger)]", children: "*" })
+        ] }),
+        /* @__PURE__ */ e(
+          P,
+          {
+            id: "admin-password",
+            type: "password",
+            required: !0,
+            autoComplete: "new-password",
+            disabled: n || c,
+            value: i.password,
+            onChange: (s) => p((m) => ({ ...m, password: s.target.value }))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(S, { type: "submit", variant: "primary", loading: n || c, "data-testid": "adminsetup-submit", children: "Create admin" })
+    ] })
+  ] });
+}
+const Te = {
+  name: "AdminSetup",
+  props: [
+    { name: "onSubmit", type: "(values) => void | Promise<void>", default: null, control: "none" },
+    { name: "brand", type: "BrandConfig", default: "undefined", control: "object" },
+    { name: "description", type: "ReactNode", default: "generic", control: "text" },
+    { name: "loading", type: "boolean", default: "false", control: "boolean" },
+    { name: "error", type: "string | null", default: "null", control: "text" }
+  ]
+}, Ve = {
+  login: ne,
+  register: le,
+  forgotPassword: oe,
+  resetPassword: ie,
+  otp: se,
+  logout: de,
+  notFound: ce,
+  error: ue,
+  profile: me,
+  settings: pe,
+  adminSetup: he
+};
+export {
+  he as AdminSetup,
+  De as EmptyState,
+  ue as ErrorPage,
+  oe as ForgotPasswordPage,
+  ne as LoginPage,
+  de as LogoutPage,
+  ce as NotFoundPage,
+  se as OtpPage,
+  Ve as PagesRegistry,
+  me as ProfilePage,
+  le as RegisterPage,
+  ie as ResetPasswordPage,
+  pe as SettingsPage,
+  Te as adminSetupPropsMeta,
+  Me as emptyStatePropsMeta,
+  Ee as errorPagePropsMeta,
+  je as forgotPasswordPagePropsMeta,
+  Ce as loginPagePropsMeta,
+  Re as logoutPagePropsMeta,
+  qe as notFoundPagePropsMeta,
+  Fe as otpPagePropsMeta,
+  Le as profilePagePropsMeta,
+  Se as registerPagePropsMeta,
+  Be as resetPasswordPagePropsMeta,
+  Ae as settingsPagePropsMeta
+};