@alfadocs/ui-kit 1.82.0 → 1.84.0

package/dist/_chunks/login-dev-card-DYwbL5sD.js

@@ -0,0 +1,385 @@
+import { jsxs as f, jsx as s } from "react/jsx-runtime";
+import { forwardRef as ge, useId as k, useState as l, useEffect as me, useRef as ce } from "react";
+import { useTranslation as ze } from "react-i18next";
+import { c as B } from "./index-D2ZczOXr.js";
+import { E as Pe, i as Te } from "./email-input-C7THAwh2.js";
+import { B as he } from "./button-DohK_Ak_.js";
+import { C as je } from "./checkbox-BjDv-r3o.js";
+import { C as b } from "./card-BA4Ig_kn.js";
+import { T as De } from "./text-input-CaG9ApoE.js";
+import { E as He } from "./error-summary-mGxIyDAY.js";
+import { F as ue } from "./form-field-CyHfOVKF.js";
+import { P as Oe } from "./password-input-BokZ_rnT.js";
+import { i as $e } from "./is-development-CLUAnsU7.js";
+import { i as ve } from "./safe-href-5dbsfbQn.js";
+import { u as _e, w as Ge } from "./use-state-backed-input-DhRQo6gM.js";
+import { u as We, a as Je, A as Ke, b as Qe, d as _, E as Ue, c as Xe } from "./auth-form-parts-B3GWChvG.js";
+import { u as Ye, b as Ze, a as Ve } from "./use-registration-submit-CLGHxwoT.js";
+import { M as es } from "./matrix-rain-sDOUUwZp.js";
+import { a as ss } from "./error-page-illustration-BdJLuMdV.js";
+const W = ["email", "password"], rs = B(
+  "ds:flex ds:w-full ds:flex-col ds:items-center ds:justify-center ds:gap-[var(--spacing-lg)] ds:text-start ds:text-[var(--foreground)] ds:lg:flex-row ds:lg:items-stretch"
+), fe = B("ds:w-full ds:max-w-[400px]"), as = B(
+  "ds:flex ds:flex-wrap ds:justify-center ds:gap-x-[var(--spacing-lg)] ds:gap-y-[var(--spacing-lg)]"
+), G = (a) => a && ve(a) ? a : void 0, ts = (a) => Object.values(a).some(Boolean), os = (a) => W.some((m) => !!a[m]), pe = (a) => W.find((m) => a[m]) ?? (a.form ? "password" : void 0), ns = ge(
+  ({
+    title: a,
+    description: m,
+    headingLevel: w = 1,
+    showLogo: L = !0,
+    logoMotion: R = "assemble",
+    children: x,
+    initialValues: t,
+    allowUsername: F = !1,
+    errors: u,
+    forgotPasswordHref: d,
+    showRememberMe: A = !1,
+    registerDoctorHref: be,
+    registerPatientHref: we,
+    submitLabel: xe,
+    submitting: Fe = !1,
+    onSubmit: N,
+    fieldNames: o,
+    action: ye,
+    hiddenFields: Me,
+    devCard: J,
+    className: Ee,
+    ...Ce
+  }, Ie) => {
+    const { t: n } = ze("ui"), K = k(), S = k(), ke = k(), q = (e) => `${ke}-${e}`, i = o !== void 0, [p, g] = l(() => (t == null ? void 0 : t.email) ?? ""), [y, M] = l(""), [Q, Be] = l(
+      () => (t == null ? void 0 : t.rememberMe) === !0
+    ), z = A || !!(o != null && o.rememberMe), U = i && z && !(o != null && o.rememberMe);
+    me(() => {
+      U && $e() && console.warn(
+        "LoginForm: the remember-me box is shown but `fieldNames.rememberMe` is not set, so the server will not read it."
+      );
+    }, [U]);
+    const [Le, X] = l(() => ({ email: !!(t != null && t.email) })), [Re, Y] = l(!1), [Z, V] = l(
+      () => u ?? {}
+    ), P = (e) => X(
+      (r) => r[e] ? r : { ...r, [e]: !0 }
+    ), T = (e) => V(
+      (r) => r[e] ? { ...r, [e]: void 0 } : r
+    ), E = ce(null), j = ce(null), C = _e(p, E), ee = () => {
+      M(""), X((e) => ({ ...e, password: !1 }));
+    }, se = () => {
+      var v, le;
+      const e = ((v = E.current) == null ? void 0 : v.value) ?? p;
+      e.trim() !== e && Ge(E.current, e.trim());
+      const r = {
+        email: e.trim(),
+        password: ((le = j.current) == null ? void 0 : le.value) ?? y,
+        rememberMe: z && Q
+      };
+      return r.email !== p && g(r.email), r.password !== y && M(r.password), r;
+    }, re = (e) => {
+      const r = e.trim();
+      return r === "" || (!F || /[@\uFF20\uFE6B]/.test(r)) && !Te(r);
+    }, ae = {
+      email: re(p),
+      password: y === ""
+    }, te = (e) => Re || Le[e] === !0, Ae = {
+      email: te("email") && ae.email ? p.trim() === "" ? n("loginForm.emailRequired") : n("inputs.email.invalid") : void 0,
+      password: te("password") && ae.password ? n("loginForm.passwordRequired") : void 0
+    }, I = (e) => Z[e] ?? Ae[e], [oe] = l(
+      () => os(u ?? {})
+    ), c = Ye(
+      W,
+      I,
+      oe
+    ), [D, ne] = l(() => {
+      const e = oe ? void 0 : pe(u ?? {});
+      return e ? { target: e } : null;
+    });
+    me(() => {
+      var e;
+      D && ((e = (D.target === "email" ? E : j).current) == null || e.focus());
+    }, [D]);
+    const de = Ze({
+      errors: u,
+      submitting: Fe,
+      native: i,
+      captcha: !1,
+      firstProblem: () => {
+        const e = se();
+        return re(e.email) ? "email" : e.password === "" ? "password" : void 0;
+      },
+      onRefused: (e) => {
+        Y(!0), c.open(() => ne({ target: e }));
+      },
+      // Only a React host gets here: a native post is the browser's own.
+      deliver: () => N == null ? void 0 : N(se()),
+      onAnswer: (e) => {
+        const r = e;
+        V(r), ts(r) && (ee(), Y(!1), c.open(() => {
+          const v = pe(r);
+          v && ne({ target: v });
+        }));
+      },
+      // The page came back from the browser's cache as it was left: the
+      // password must not come back with it.
+      onRestore: ee
+    }), { busy: H } = de, Ne = We("LoginForm", i, ye), ie = G(d), O = G(be), $ = G(we), Se = Je(
+      "LoginForm",
+      i,
+      o,
+      Me
+    ), h = Z.form, qe = Ve(
+      h,
+      c.listed.length > 0
+    );
+    return /* @__PURE__ */ f(
+      "div",
+      {
+        ref: Ie,
+        ...Ce,
+        "data-component": "login-form",
+        className: rs({ className: Ee }),
+        children: [
+          /* @__PURE__ */ s("div", { className: fe(), children: /* @__PURE__ */ s(b, { variant: "elevated", className: "ds:h-full", children: /* @__PURE__ */ f(b.Body, { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]", children: [
+            /* @__PURE__ */ s(
+              Ke,
+              {
+                id: K,
+                title: a ?? n("loginForm.title"),
+                description: m,
+                level: w,
+                showLogo: L,
+                logoMotion: R
+              }
+            ),
+            x ? /* @__PURE__ */ s(
+              "div",
+              {
+                "data-slot": "host-content",
+                className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]",
+                children: x
+              }
+            ) : null,
+            /* @__PURE__ */ f(
+              "form",
+              {
+                noValidate: !0,
+                method: "post",
+                action: Ne,
+                "aria-labelledby": K,
+                "aria-busy": H || void 0,
+                onSubmit: de.handleSubmit,
+                className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]",
+                children: [
+                  /* @__PURE__ */ s(
+                    He,
+                    {
+                      ref: c.ref,
+                      headingLevel: w + 1,
+                      "aria-describedby": h ? S : void 0,
+                      errors: c.listed.map((e) => ({
+                        field: e,
+                        message: I(e) ?? "",
+                        targetId: q(e)
+                      }))
+                    }
+                  ),
+                  h && /* @__PURE__ */ s(
+                    Qe,
+                    {
+                      id: S,
+                      announce: qe,
+                      children: h
+                    }
+                  ),
+                  /* @__PURE__ */ s(
+                    ue,
+                    {
+                      id: q("email"),
+                      label: n("loginForm.email"),
+                      required: !0,
+                      error: I("email"),
+                      announceError: !c.lists("email"),
+                      "data-field": "email",
+                      children: F ? (
+                        // A plain text field: a type="email" field holding a
+                        // username is "invalid" to a screen reader, whatever
+                        // `noValidate` says.
+                        /* @__PURE__ */ s(
+                          De,
+                          {
+                            ref: C.ref,
+                            name: i ? o.email : "email",
+                            type: "text",
+                            inputMode: "email",
+                            autoComplete: "username",
+                            autoCapitalize: "none",
+                            autoCorrect: "off",
+                            spellCheck: !1,
+                            onChange: C.quiet((e) => {
+                              g(e.target.value), T("email");
+                            }),
+                            onBlur: (e) => {
+                              const r = e.target.value.trim();
+                              g(r), r !== "" && P("email");
+                            }
+                          }
+                        )
+                      ) : /* @__PURE__ */ s(
+                        Pe,
+                        {
+                          ref: C.ref,
+                          name: i ? o.email : "email",
+                          autoComplete: "username",
+                          disableBuiltInValidation: !0,
+                          onChange: C.quiet((e) => {
+                            g(e.target.value), T("email");
+                          }),
+                          onBlur: (e) => {
+                            const r = e.target.value.trim();
+                            g(r), r !== "" && P("email");
+                          }
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ s(
+                    ue,
+                    {
+                      id: q("password"),
+                      label: n("loginForm.password"),
+                      required: !0,
+                      error: I("password"),
+                      announceError: !c.lists("password"),
+                      "data-field": "password",
+                      children: /* @__PURE__ */ s(
+                        Oe,
+                        {
+                          ref: j,
+                          name: i ? o.password : "password",
+                          autoComplete: "current-password",
+                          "aria-describedby": h ? S : void 0,
+                          value: y,
+                          onChange: (e) => {
+                            M(e.target.value), T("password");
+                          },
+                          onBlur: (e) => {
+                            M(e.target.value), e.target.value !== "" && P("password");
+                          }
+                        }
+                      )
+                    }
+                  ),
+                  ie && /* @__PURE__ */ s(
+                    _,
+                    {
+                      href: ie,
+                      action: "forgot-password",
+                      align: "end",
+                      children: n("loginForm.forgot")
+                    }
+                  ),
+                  z && /* @__PURE__ */ s("div", { "data-field": "remember-me", children: /* @__PURE__ */ s(
+                    je,
+                    {
+                      name: i && o.rememberMe || "rememberMe",
+                      checked: Q,
+                      onCheckedChange: (e) => Be(e === !0),
+                      label: n("loginForm.rememberMe")
+                    }
+                  ) }),
+                  /* @__PURE__ */ s(Ue, { fields: Se }),
+                  /* @__PURE__ */ s(
+                    he,
+                    {
+                      type: "submit",
+                      intent: "primary",
+                      size: "lg",
+                      loading: H,
+                      className: "ds:w-full",
+                      "data-action": "submit",
+                      children: xe ?? n("loginForm.submit")
+                    }
+                  )
+                ]
+              }
+            ),
+            (O || $) && /* @__PURE__ */ f(
+              "div",
+              {
+                "data-slot": "register-links",
+                className: as(),
+                children: [
+                  O && /* @__PURE__ */ s(_, { href: O, action: "register-doctor", children: n("signedOutHeader.registerDoctor") }),
+                  $ && /* @__PURE__ */ s(_, { href: $, action: "register-patient", children: n("signedOutHeader.registerPatient") })
+                ]
+              }
+            ),
+            /* @__PURE__ */ s(Xe, { busy: H })
+          ] }) }) }),
+          J ? /* @__PURE__ */ s("div", { className: fe(), children: J }) : null
+        ]
+      }
+    );
+  }
+);
+ns.displayName = "LoginForm";
+const ds = B("ds:h-full ds:w-full"), is = ge(
+  ({ title: a, options: m, headingLevel: w = 2, className: L, ...R }, x) => {
+    const t = k(), F = `h${w}`, u = m.filter((d) => ve(d.href));
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        ref: x,
+        ...R,
+        "data-component": "login-dev-card",
+        className: ds({ className: L }),
+        children: /* @__PURE__ */ f(
+          b,
+          {
+            variant: "elevated",
+            "aria-labelledby": t,
+            className: "ds:relative ds:isolate ds:flex ds:h-full ds:flex-col ds:overflow-hidden",
+            children: [
+              /* @__PURE__ */ s("div", { className: "ds:absolute ds:inset-0 ds:z-0 ds:[display:var(--accessible-off,block)]", children: /* @__PURE__ */ s(
+                es,
+                {
+                  glyphs: "hex",
+                  decay: "fast",
+                  mask: "center",
+                  maskRadius: "xl",
+                  className: "ds:size-full"
+                }
+              ) }),
+              /* @__PURE__ */ s(b.Header, { className: "ds:relative ds:z-[1]", children: /* @__PURE__ */ f("div", { className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-sm)] ds:text-center", children: [
+                /* @__PURE__ */ s("div", { className: "ds:[&>div]:w-24", children: /* @__PURE__ */ s(ss, { mood: "melt" }) }),
+                /* @__PURE__ */ s(
+                  F,
+                  {
+                    id: t,
+                    className: "type-title-card ds:text-[var(--foreground)]",
+                    children: a
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ s(b.Body, { className: "ds:relative ds:z-[1] ds:flex ds:flex-1 ds:flex-col ds:justify-center", children: /* @__PURE__ */ s("div", { className: "ds:mt-[var(--spacing-md)] ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: u.map((d, A) => /* @__PURE__ */ s(
+                he,
+                {
+                  asChild: !0,
+                  intent: "primary",
+                  startIcon: d.icon,
+                  className: "ds:min-h-[var(--min-target-size)] ds:w-full",
+                  children: /* @__PURE__ */ s("a", { href: d.href, "data-action": "dev-login", children: d.label })
+                },
+                `${A}:${d.href}`
+              )) }) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+is.displayName = "LoginDevCard";
+export {
+  W as L,
+  is as a,
+  ns as b
+};
+//# sourceMappingURL=login-dev-card-DYwbL5sD.js.map

package/dist/agent-catalog.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "packageVersion": "1.82.0",
+  "packageVersion": "1.84.0",
   "components": [
     {
       "kind": "component",
@@ -20249,7 +20249,7 @@
         {
           "name": "sign_in",
           "safety": "write",
-          "description": "Sign in (`data-action=\"submit\"`). The person types the email and the password themselves; the form does not submit until the email is a valid address and the password is not empty; it lists what is wrong in its error summary and moves focus there. The host then signs the person in: through its `onSubmit` handler, or as a native form post to its own field names.",
+          "description": "Sign in (`data-action=\"submit\"`). The person types the email and the password themselves; the form does not submit until the email field is filled in and the password is not empty; text with an `@` must be a valid email address, and text without one is accepted as a username only when the host sets `allowUsername`; it lists what is wrong in its error summary and moves focus there. The host then signs the person in: through its `onSubmit` handler, or as a native form post to its own field names.",
           "descriptionKey": "ui.agent.loginForm.workflows.signIn",
           "uiActions": [],
           "apiActions": [

package/dist/agent-i18n/en.json

@@ -1897,7 +1897,7 @@
     "loginForm": {
       "workflows": {
         "readForm": "Read the sign-in form and what is wrong with it. Each field sits in a wrapper with `data-field` (`email`, `password`, and `remember-me` when the host turns it on). A field with a problem has `aria-invalid=\"true\"` on its control and its message in a `data-slot=\"error\"` element inside the wrapper. After a refused submit the fields with a problem are also listed in `data-component=\"error-summary\"` at the top of the form, one item per field (`data-error-field`). A message about the whole form, such as a refused sign-in, is in `data-field=\"form\"`; it never says which of the two values was wrong. Never read or repeat the password.",
-        "signIn": "Sign in (`data-action=\"submit\"`). The person types the email and the password themselves; the form does not submit until the email is a valid address and the password is not empty; it lists what is wrong in its error summary and moves focus there. The host then signs the person in: through its `onSubmit` handler, or as a native form post to its own field names.",
+        "signIn": "Sign in (`data-action=\"submit\"`). The person types the email and the password themselves; the form does not submit until the email field is filled in and the password is not empty; text with an `@` must be a valid email address, and text without one is accepted as a username only when the host sets `allowUsername`; it lists what is wrong in its error summary and moves focus there. The host then signs the person in: through its `onSubmit` handler, or as a native form post to its own field names.",
         "rememberMe": "Tick or untick \"Remember me on this computer\" (`data-field=\"remember-me\"`, a checkbox, unticked by default). Present only when the host turns it on. It reports the choice to the host, which decides what it means; it changes nothing until the form is submitted.",
         "forgotPassword": "Go to the page that asks for a password reset link (`data-action=\"forgot-password\"`). Present only when the host gives its address.",
         "register": "Go to a registration page: `data-action=\"register-doctor\"` or `data-action=\"register-patient\"`, under the sign-in button. Each is present only when the host gives its address.",

package/dist/components/booking/index.js

@@ -1,4 +1,4 @@
-import { B as A, C as R, O as a, b as s } from "../../_chunks/booking-dsgiuhKg.js";
+import { B as A, C as R, O as a, b as s } from "../../_chunks/booking-CsA9IIkg.js";
 export {
   A as Booking,
   R as CONFIRMATION_CHANNEL_ORDER,

package/dist/components/booking/step-focus.d.ts

@@ -6,4 +6,17 @@
  * repaired focus visible, which is the point of moving it.
  */
 export declare const stepRegionFocusClasses: string;
+/**
+ * True when movement should be instant: the patient asked for reduced motion,
+ * or the theme turned animation off (`.theme-accessible`, a zero
+ * `--animation-duration`).
+ */
+export declare function motionIsOff(root: HTMLElement | null): boolean;
+/**
+ * Brings `element` into view with one smooth scroll, and only when part of it
+ * is hidden: a step that is already on screen does not move. A host with a
+ * sticky header sets `scroll-margin-top` on the booking, which both the
+ * visibility check and the scroll respect. Instant when motion is off.
+ */
+export declare function glideIntoView(element: HTMLElement | null, block: ScrollLogicalPosition): void;
 //# sourceMappingURL=step-focus.d.ts.map

package/dist/index.js

@@ -217,7 +217,7 @@ import { V as tf, v as nf } from "./_chunks/voice-control-panel-BziKE-KK.js";
 import { A as mf } from "./_chunks/anamnesis-card-BcadMmEM.js";
 import { D as df, F as Af, a as ff, M as cf, b as Sf, e as gf, f as Cf, g as Tf, c as xf, m as uf, r as Pf, v as Ef } from "./_chunks/muscle-scheme-C66WlCxG.js";
 import { A as Rf, a as _f, b as bf, c as Nf, d as Df, e as Of, C as Ff, f as Lf, g as hf, D as Mf, h as yf, E as kf, L as Bf, O as Gf, P as vf, i as Hf, j as Wf, k as wf, l as Uf, R as Vf, S as Kf, m as Yf, n as Xf, o as qf, p as zf, q as jf, r as Qf, s as Zf, t as Jf, u as $f, v as ac, w as ec, x as sc, y as rc, z as oc, B as tc, F as nc } from "./_chunks/optical-prescription-CMM1Y6Xg.js";
-import { B as pc, C as mc, O as lc, b as dc } from "./_chunks/booking-dsgiuhKg.js";
+import { B as pc, C as mc, O as lc, b as dc } from "./_chunks/booking-CsA9IIkg.js";
 import { C as fc, c as cc, r as Sc } from "./_chunks/calendar-ClB-jWH1.js";
 import { C as Cc } from "./_chunks/calendar-event-card-DXAYWH6k.js";
 import { R as xc, a as uc } from "./_chunks/resource-chip-DB5jDwUO.js";
@@ -267,7 +267,7 @@ import { E as eu, a as su, b as ru, e as ou, r as tu } from "./_chunks/error-pag
 import { E as iu } from "./_chunks/error-page-illustration-BdJLuMdV.js";
 import { F as mu, a as lu } from "./_chunks/forgot-password-form-BQPvDS7i.js";
 import { A as Au, a as fu, H as cu, b as Su, u as gu } from "./_chunks/help-me-write-templates-BJSf24xS.js";
-import { L as Tu, a as xu, b as uu } from "./_chunks/login-dev-card-CvLHj-_N.js";
+import { L as Tu, a as xu, b as uu } from "./_chunks/login-dev-card-DYwbL5sD.js";
 import { C as Eu, M as Iu, P as Ru } from "./_chunks/marketplace-app-shell-vON3WhD0.js";
 import { P as bu } from "./_chunks/payment-automation-upsell-D1YdO1xY.js";
 import { R as Du, a as Ou } from "./_chunks/registration-form-DmP3YUfp.js";

package/dist/patterns/login-form/index.js

@@ -1,4 +1,4 @@
-import { L, a as r, b as s } from "../../_chunks/login-dev-card-CvLHj-_N.js";
+import { L, a as r, b as s } from "../../_chunks/login-dev-card-DYwbL5sD.js";
 export {
   L as LOGIN_FORM_FIELDS,
   r as LoginDevCard,

package/dist/patterns/login-form/login-form.d.ts

@@ -53,6 +53,13 @@ export interface LoginFormProps extends Omit<HTMLAttributes<HTMLDivElement>, 'ti
      * it is posted. Keep any heading inside it below the card's own level.
      */
     children?: ReactNode;
+    /**
+     * For hosts whose server also signs people in by a username. The first
+     * field is still labelled "Email", but text without an "@" is accepted as
+     * a username: it only has to be filled in. Text with an "@" must be a
+     * valid email address, as when this is off. Default false.
+     */
+    allowUsername?: boolean;
     /** The email to show when the form opens, such as the one last used,
      *  and whether "Remember me" starts ticked (default false). Read once.
      *  There is never an initial password. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfadocs/ui-kit",
-  "version": "1.82.0",
+  "version": "1.84.0",
   "type": "module",
   "description": "AlfaDocs shared design system — tokens, components, patterns, and translations for platform, booking, and alfascribe.",
   "license": "BUSL-1.1",