@alfadocs/ui-kit-debug 1.132.0 → 1.134.0

package/dist/_chunks/patient-card-DTh3QTyS.js

@@ -0,0 +1,125 @@
+import { jsx as s, jsxs as u } from "react/jsx-runtime";
+import { useRef as f, useEffect as x, forwardRef as y } from "react";
+import { C as p } from "./card-n6W6LW-N.js";
+import { F as C } from "./finished-terminal-unDnXT4j.js";
+function w({
+  component: e,
+  title: t,
+  description: d,
+  eyebrow: n,
+  headerAction: r,
+  children: a,
+  footer: l,
+  headingLevel: o = 1,
+  focusOnMount: m = !1,
+  focusKey: c,
+  privacy: b = !1,
+  className: h
+}) {
+  const v = f(null);
+  x(() => {
+    var i;
+    m && ((i = v.current) == null || i.focus({ preventScroll: !0 }));
+  }, []);
+  const g = f(c);
+  x(() => {
+    var i;
+    g.current !== c && (g.current = c, (i = v.current) == null || i.focus({ preventScroll: !0 }));
+  }, [c]);
+  const N = o === 1 ? "h1" : "h2";
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      "data-component": e,
+      "data-privacy": b ? "masked" : void 0,
+      className: h,
+      children: /* @__PURE__ */ u(p, { variant: "elevated", className: "ds:w-full", children: [
+        /* @__PURE__ */ s(p.Body, { children: /* @__PURE__ */ u("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: [
+          r ? /* @__PURE__ */ s("div", { className: "ds:flex ds:justify-end", children: r }) : null,
+          /* @__PURE__ */ u("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+            n ? /* @__PURE__ */ s("p", { className: "type-meta ds:m-0 ds:text-[color:var(--muted-foreground)]", children: n }) : null,
+            /* @__PURE__ */ s(
+              N,
+              {
+                ref: v,
+                tabIndex: -1,
+                className: o === 1 ? "type-title-page ds:m-0 ds:text-foreground ds:outline-none" : "type-title-card ds:m-0 ds:text-foreground ds:outline-none",
+                children: t
+              }
+            ),
+            d ? /* @__PURE__ */ s("div", { className: "type-body-sm ds:m-0 ds:text-[color:var(--muted-foreground)]", children: d }) : null
+          ] }),
+          a
+        ] }) }),
+        l ? /* @__PURE__ */ s(p.Footer, { children: l }) : null
+      ] })
+    }
+  );
+}
+function E({
+  component: e,
+  icon: t,
+  title: d,
+  body: n,
+  action: r,
+  below: a,
+  focusOnMount: l = !1,
+  privacy: o = !1,
+  className: m
+}) {
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      "data-component": e,
+      "data-privacy": o ? "masked" : void 0,
+      className: ["ds:flex ds:flex-1 ds:flex-col", m].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ s(
+          C,
+          {
+            icon: t,
+            title: d,
+            body: n,
+            action: r,
+            autoCloseSeconds: r ? void 0 : 0,
+            focusOnMount: l
+          }
+        ),
+        a ? /* @__PURE__ */ s("div", { className: "ds:mx-auto ds:w-full ds:max-w-[28rem] ds:ps-[var(--spacing-lg)] ds:pe-[var(--spacing-lg)] ds:pb-[var(--spacing-lg)]", children: a }) : null
+      ]
+    }
+  );
+}
+const T = 'type-body-sm ds:relative ds:inline-flex ds:cursor-pointer ds:items-center ds:rounded-[var(--radius-sm)] ds:border-0 ds:bg-transparent ds:p-0 ds:text-[var(--foreground)] ds:underline ds:underline-offset-4 ds:before:absolute ds:before:inset-x-0 ds:before:inset-y-[calc((var(--min-target-size)-100%)/-2)] ds:before:content-[""] ds:focus-visible:outline-solid ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]', P = y(({ action: e, onClick: t, children: d }, n) => /* @__PURE__ */ s(
+  "button",
+  {
+    ref: n,
+    type: "button",
+    "data-action": e,
+    className: T,
+    onClick: t,
+    children: d
+  }
+));
+P.displayName = "PatientTextAction";
+function F({ children: e }) {
+  return /* @__PURE__ */ s("p", { className: "type-meta ds:m-0 ds:text-[color:var(--muted-foreground)]", children: e });
+}
+function B(e, t, d) {
+  const n = f({ error: e, submitting: t }), r = f(d);
+  x(() => {
+    r.current = d;
+    const a = n.current;
+    if (n.current = { error: e, submitting: t }, !e) return;
+    const l = e !== a.error, o = a.submitting && !t;
+    (l || o) && r.current();
+  }, [e, t, d]);
+}
+export {
+  w as P,
+  P as a,
+  E as b,
+  F as c,
+  B as u
+};
+//# sourceMappingURL=patient-card-DTh3QTyS.js.map

package/dist/_chunks/patient-card-DTh3QTyS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"patient-card-DTh3QTyS.js","sources":["../../src/patterns/patient-sign-in/patient-card.tsx"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* Internal pieces shared by the patient sign-in screens. Not exported   */\n/* from the pattern's index.                                              */\n/* -------------------------------------------------------------------- */\n\nimport { forwardRef, useEffect, useRef, type ReactNode } from 'react';\nimport { Card } from '../../components/card';\nimport {\n  FinishedTerminal,\n  type FinishedTerminalAction,\n} from '../../components/finished-terminal';\n\n/** The heading level a card screen renders its title at. */\nexport type PatientHeadingLevel = 1 | 2;\n\nexport interface PatientCardProps {\n  /** Value for the root's `data-component`. */\n  component: string;\n  title: string;\n  description?: ReactNode;\n  /** A short line above the title, for example \"Step 2 of 3\". */\n  eyebrow?: ReactNode;\n  /** A control at the inline end, above the title (the language slot). */\n  headerAction?: ReactNode;\n  children?: ReactNode;\n  footer?: ReactNode;\n  headingLevel?: PatientHeadingLevel;\n  /** Move focus to the title when the card first shows. */\n  focusOnMount?: boolean;\n  /**\n   * When this changes after mount, focus moves to the title again: a step\n   * inside the same card (choose, then confirm) is announced.\n   */\n  focusKey?: string;\n  /** Stamps `data-privacy=\"masked\"` on the root when true. */\n  privacy?: boolean;\n  className?: string;\n}\n\n/**\n * The titled card every sign-in screen wears. The title is the screen's\n * heading; it takes focus only when asked, so a state story or a screen the\n * host mounts with the page does not pull focus.\n */\nexport function PatientCard({\n  component,\n  title,\n  description,\n  eyebrow,\n  headerAction,\n  children,\n  footer,\n  headingLevel = 1,\n  focusOnMount = false,\n  focusKey,\n  privacy = false,\n  className,\n}: PatientCardProps) {\n  const headingRef = useRef<HTMLHeadingElement>(null);\n  // On mount: focus the title only when asked.\n  useEffect(() => {\n    if (focusOnMount) headingRef.current?.focus({ preventScroll: true });\n    // Mount only; later changes of `focusOnMount` pull no focus.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  // After mount: a changed key moves focus. Comparing with the last key (not\n  // a \"first run\" flag) keeps this right under React StrictMode, which runs\n  // every effect twice on mount.\n  const lastKey = useRef(focusKey);\n  useEffect(() => {\n    if (lastKey.current === focusKey) return;\n    lastKey.current = focusKey;\n    headingRef.current?.focus({ preventScroll: true });\n  }, [focusKey]);\n\n  const Heading = headingLevel === 1 ? 'h1' : 'h2';\n  return (\n    <div\n      data-component={component}\n      data-privacy={privacy ? 'masked' : undefined}\n      className={className}\n    >\n      <Card variant=\"elevated\" className=\"ds:w-full\">\n        <Card.Body>\n          <div className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-md)]\">\n            {headerAction ? (\n              <div className=\"ds:flex ds:justify-end\">{headerAction}</div>\n            ) : null}\n            <div className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]\">\n              {eyebrow ? (\n                <p className=\"type-meta ds:m-0 ds:text-[color:var(--muted-foreground)]\">\n                  {eyebrow}\n                </p>\n              ) : null}\n              <Heading\n                ref={headingRef}\n                tabIndex={-1}\n                className={\n                  headingLevel === 1\n                    ? 'type-title-page ds:m-0 ds:text-foreground ds:outline-none'\n                    : 'type-title-card ds:m-0 ds:text-foreground ds:outline-none'\n                }\n              >\n                {title}\n              </Heading>\n              {description ? (\n                <div className=\"type-body-sm ds:m-0 ds:text-[color:var(--muted-foreground)]\">\n                  {description}\n                </div>\n              ) : null}\n            </div>\n            {children}\n          </div>\n        </Card.Body>\n        {footer ? <Card.Footer>{footer}</Card.Footer> : null}\n      </Card>\n    </div>\n  );\n}\n\nexport interface PatientEndScreenProps {\n  /** Value for the root's `data-component`. */\n  component: string;\n  icon: ReactNode;\n  title: string;\n  body: ReactNode;\n  /** The one button. No button when absent. */\n  action?: FinishedTerminalAction;\n  /** Shown under the card, for example a notice. */\n  below?: ReactNode;\n  /** Move focus to the title on mount. Default false. */\n  focusOnMount?: boolean;\n  /** Stamps `data-privacy=\"masked\"` on the root when true. */\n  privacy?: boolean;\n  className?: string;\n}\n\n/**\n * Every end screen of this pattern: `FinishedTerminal` in its button-only\n * mode (no countdown, no automatic move), inside the pattern's own root.\n */\nexport function PatientEndScreen({\n  component,\n  icon,\n  title,\n  body,\n  action,\n  below,\n  focusOnMount = false,\n  privacy = false,\n  className,\n}: PatientEndScreenProps) {\n  return (\n    <div\n      data-component={component}\n      data-privacy={privacy ? 'masked' : undefined}\n      className={['ds:flex ds:flex-1 ds:flex-col', className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <FinishedTerminal\n        icon={icon}\n        title={title}\n        body={body}\n        action={action}\n        autoCloseSeconds={action ? undefined : 0}\n        focusOnMount={focusOnMount}\n      />\n      {below ? (\n        <div className=\"ds:mx-auto ds:w-full ds:max-w-[28rem] ds:ps-[var(--spacing-lg)] ds:pe-[var(--spacing-lg)] ds:pb-[var(--spacing-lg)]\">\n          {below}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n// A text action takes the foreground colour and an underline: the kit\n// `link` button paints --primary, which falls just below AA on a dark card\n// (see AuthTextLink). The `before` box makes the target 44px high without\n// moving the text.\nconst TEXT_ACTION_CLASS =\n  'type-body-sm ds:relative ds:inline-flex ds:cursor-pointer ds:items-center ds:rounded-[var(--radius-sm)] ds:border-0 ds:bg-transparent ds:p-0 ds:text-[var(--foreground)] ds:underline ds:underline-offset-4 ds:before:absolute ds:before:inset-x-0 ds:before:inset-y-[calc((var(--min-target-size)-100%)/-2)] ds:before:content-[\"\"] ds:focus-visible:outline-solid ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]';\n\nexport interface PatientTextActionProps {\n  /** Emitted as `data-action`. */\n  action: string;\n  onClick: () => void;\n  children: ReactNode;\n}\n\n/** A quiet text action in a card: \"Back\", \"Forgot your PIN?\". */\nexport const PatientTextAction = forwardRef<\n  HTMLButtonElement,\n  PatientTextActionProps\n>(({ action, onClick, children }, ref) => (\n  <button\n    ref={ref}\n    type=\"button\"\n    data-action={action}\n    className={TEXT_ACTION_CLASS}\n    onClick={onClick}\n  >\n    {children}\n  </button>\n));\nPatientTextAction.displayName = 'PatientTextAction';\n\n/** A muted note under a card's content. */\nexport function PatientNote({ children }: { children: ReactNode }) {\n  return (\n    <p className=\"type-meta ds:m-0 ds:text-[color:var(--muted-foreground)]\">\n      {children}\n    </p>\n  );\n}\n\n/**\n * Runs `onResult` when the host reports an error after a try: the error\n * arrives, or the host finishes checking (`submitting` goes true to false)\n * with the error still set. Never on mount, so a state story pulls no\n * focus. The kit counts nothing: it only watches the props change.\n */\nexport function useAfterResult(\n  error: unknown,\n  submitting: boolean,\n  onResult: () => void,\n) {\n  const previous = useRef({ error, submitting });\n  const callback = useRef(onResult);\n  useEffect(() => {\n    callback.current = onResult;\n    const before = previous.current;\n    previous.current = { error, submitting };\n    if (!error) return;\n    const arrived = error !== before.error;\n    const settled = before.submitting && !submitting;\n    if (arrived || settled) callback.current();\n  }, [error, submitting, onResult]);\n}\n"],"names":["PatientCard","component","title","description","eyebrow","headerAction","children","footer","headingLevel","focusOnMount","focusKey","privacy","className","headingRef","useRef","useEffect","_a","lastKey","Heading","jsx","jsxs","Card","PatientEndScreen","icon","body","action","below","FinishedTerminal","TEXT_ACTION_CLASS","PatientTextAction","forwardRef","onClick","ref","PatientNote","useAfterResult","error","submitting","onResult","previous","callback","before","arrived","settled"],"mappings":"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"}