@alfadocs/ui-kit 1.67.0 → 1.68.0

package/dist/_chunks/{periodontal-risk-chart-CPy7CNFe.js → periodontal-risk-chart-B7S9OmPC.js}

@@ -1,10 +1,11 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { forwardRef as T, useId as $, useMemo as S } from "react";
-import { c as _ } from "./index-D2ZczOXr.js";
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import { forwardRef as I, useId as S, useMemo as _ } from "react";
+import { c as D } from "./index-D2ZczOXr.js";
 import { useTranslation as j } from "react-i18next";
 import { B as w } from "./badge-BUk4RjTS.js";
-import { C as N } from "./card-BA4Ig_kn.js";
+import { C } from "./card-BA4Ig_kn.js";
 import { u as M } from "./registry-DvAUVLHh.js";
+import { a as A } from "./format-number-DdzqwMs1.js";
 const B = {
   id: "periodontal-risk-chart",
   capabilities: [],
@@ -35,36 +36,36 @@ const B = {
       description: "Sourced from the id prop."
     }
   }
-}, A = [
+}, O = [
   "bleeding",
   "pockets",
   "toothLoss",
   "boneLossAge",
   "smoking",
   "systemic"
-], D = {
+], U = {
   low: 0.4,
   moderate: 0.7,
   high: 1
 };
-function te(o) {
+function re(o) {
   return o === "high" ? 2 : o === "moderate" ? 1 : 0;
 }
-function x(o, l, s) {
-  return o >= s ? "high" : o >= l ? "moderate" : "low";
+function x(o, l, a) {
+  return o >= a ? "high" : o >= l ? "moderate" : "low";
 }
-const U = {
+const K = {
   none: "low",
   former: "low",
   light: "moderate",
   moderate: "high",
   heavy: "high"
 };
-function K(o) {
-  const l = [], s = (e, d, a) => l.push({ factor: e, level: d, radius: D[d], valueText: a });
+function W(o) {
+  const l = [], a = (e, d, i) => l.push({ factor: e, level: d, radius: U[d], valueText: i });
   {
     const e = o.bleedingPercent;
-    s(
+    a(
       "bleeding",
       e == null ? "low" : x(e, 10, 26),
       e == null ? null : `${Math.round(e)}%`
@@ -72,7 +73,7 @@ function K(o) {
   }
   {
     const e = o.pocketsOver5mm;
-    s(
+    a(
       "pockets",
       e == null ? "low" : x(e, 5, 9),
       e == null ? null : String(e)
@@ -80,7 +81,7 @@ function K(o) {
   }
   {
     const e = o.toothLoss;
-    s(
+    a(
       "toothLoss",
       e == null ? "low" : x(e, 5, 9),
       e == null ? null : String(e)
@@ -89,69 +90,69 @@ function K(o) {
   {
     const e = o.boneLossPercent, d = o.ageYears;
     if (e == null || d == null || d <= 0)
-      s("boneLossAge", "low", null);
+      a("boneLossAge", "low", null);
     else {
-      const a = e / d;
-      s(
+      const i = e / d;
+      a(
         "boneLossAge",
-        a > 1 ? "high" : a >= 0.5 ? "moderate" : "low",
-        a.toFixed(2)
+        i > 1 ? "high" : i >= 0.5 ? "moderate" : "low",
+        i.toFixed(2)
       );
     }
   }
   {
     const e = o.smoking;
-    s("smoking", e == null ? "low" : U[e], e ?? null);
+    a("smoking", e == null ? "low" : K[e], e ?? null);
   }
   {
     const e = o.systemic;
-    s("systemic", e ? "high" : "low", e == null ? null : e ? "yes" : "no");
+    a("systemic", e ? "high" : "low", e == null ? null : e ? "yes" : "no");
   }
   const g = l.filter((e) => e.level === "high").length, p = l.filter((e) => e.level === "moderate").length, y = g > 0 || p >= 2 ? "high" : p === 1 ? "moderate" : "low";
   return { factors: l, overall: y };
 }
-const f = 240, W = _("ds:w-full ds:text-[color:var(--foreground)]", {
+const f = 240, z = D("ds:w-full ds:text-[color:var(--foreground)]", {
   variants: {
     surface: { flat: "", elevated: "" }
   },
   defaultVariants: { surface: "elevated" }
 }), k = f / 2, h = f / 2 - 16;
 function v(o, l) {
-  const s = (-90 + o * 60) * Math.PI / 180;
-  return { x: k + l * Math.cos(s), y: k + l * Math.sin(s) };
+  const a = (-90 + o * 60) * Math.PI / 180;
+  return { x: k + l * Math.cos(a), y: k + l * Math.sin(a) };
 }
 function u(o) {
-  return A.map((l, s) => {
-    const g = v(s, h * o);
+  return O.map((l, a) => {
+    const g = v(a, h * o);
     return `${g.x.toFixed(1)},${g.y.toFixed(1)}`;
   }).join(" ");
 }
-const C = {
+const F = {
   low: "success",
   moderate: "warning",
   high: "error"
-}, z = {
+}, G = {
   low: "Low",
   moderate: "Moderate",
   high: "High"
-}, G = {
+}, H = {
   bleeding: "Bleeding on probing",
   pockets: "Residual pockets ≥5 mm",
   toothLoss: "Tooth loss",
   boneLossAge: "Bone loss / age",
   smoking: "Smoking",
   systemic: "Systemic / genetic"
-}, H = T(
+}, q = I(
   ({
     inputs: o,
     surface: l = "elevated",
-    locale: s,
+    locale: a,
     "aria-label": g,
     id: p,
     className: y,
     ...e
   }, d) => {
-    const { t: a, i18n: O } = j("ui"), E = $(), F = s ?? O.language ?? "en", c = S(() => K(o), [o]);
+    const { t: i, i18n: E } = j("ui"), P = S(), b = a ?? E.language ?? "en", c = _(() => W(o), [o]);
     M(
       B,
       {
@@ -162,46 +163,53 @@ const C = {
       },
       p
     );
-    const P = c.factors.map((t, n) => {
-      const i = v(n, h * t.radius);
-      return `${i.x.toFixed(1)},${i.y.toFixed(1)}`;
-    }).join(" "), b = (t) => a(`periodontalRiskChart.level.${t}`, {
-      defaultValue: z[t]
-    }), V = (t, n) => {
-      if (n == null)
-        return a("periodontalRiskChart.valueUnset", "not recorded");
+    const V = c.factors.map((t, r) => {
+      const n = v(r, h * t.radius);
+      return `${n.x.toFixed(1)},${n.y.toFixed(1)}`;
+    }).join(" "), L = (t) => i(`periodontalRiskChart.level.${t}`, {
+      defaultValue: G[t]
+    }), T = (t, r) => {
+      if (r == null)
+        return i("periodontalRiskChart.valueUnset", "not recorded");
       if (t === "smoking")
-        return a(`periodontalRiskChart.smoking.${n}`, { defaultValue: n });
+        return i(`periodontalRiskChart.smoking.${r}`, { defaultValue: r });
       if (t === "systemic")
-        return a(`periodontalRiskChart.systemic.${n}`, { defaultValue: n });
+        return i(`periodontalRiskChart.systemic.${r}`, { defaultValue: r });
+      if (t === "boneLossAge") {
+        const n = Number.parseFloat(r);
+        return Number.isFinite(n) ? A(n, b, {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2
+        }) : r;
+      }
       if (t === "bleeding") {
-        const i = Number.parseFloat(n);
-        if (Number.isFinite(i))
+        const n = Number.parseFloat(r);
+        if (Number.isFinite(n))
           try {
-            return a("periodontalRiskChart.percent", {
-              value: new Intl.NumberFormat(F, {
+            return i("periodontalRiskChart.percent", {
+              value: A(n, b, {
                 maximumFractionDigits: 0
-              }).format(i),
+              }),
               defaultValue: "{{value}}%"
             });
           } catch {
-            return n;
+            return r;
           }
       }
-      return n;
-    }, L = a("periodontalRiskChart.heading", "Periodontal risk"), I = g ?? L, R = /* @__PURE__ */ m("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: [
+      return r;
+    }, R = i("periodontalRiskChart.heading", "Periodontal risk"), $ = g ?? R, N = /* @__PURE__ */ m("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: [
       /* @__PURE__ */ m("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ s(
           "h2",
           {
-            id: E,
+            id: P,
             className: "type-title-card ds:m-0 ds:text-[color:var(--foreground)]",
-            children: L
+            children: R
           }
         ),
         /* @__PURE__ */ m("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)]", children: [
-          /* @__PURE__ */ r("span", { className: "type-meta ds:text-[color:var(--muted-foreground)]", children: a("periodontalRiskChart.overall.label", "Overall") }),
-          /* @__PURE__ */ r(w, { variant: C[c.overall], size: "sm", children: b(c.overall) })
+          /* @__PURE__ */ s("span", { className: "type-meta ds:text-[color:var(--muted-foreground)]", children: i("periodontalRiskChart.overall.label", "Overall") }),
+          /* @__PURE__ */ s(w, { variant: F[c.overall], size: "sm", children: L(c.overall) })
         ] })
       ] }),
       /* @__PURE__ */ m("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-lg)]", children: [
@@ -213,7 +221,7 @@ const C = {
             "aria-hidden": "true",
             focusable: "false",
             children: [
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ s(
                 "polygon",
                 {
                   points: u(1),
@@ -221,7 +229,7 @@ const C = {
                   fillOpacity: 0.1
                 }
               ),
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ s(
                 "polygon",
                 {
                   points: u(0.7),
@@ -229,7 +237,7 @@ const C = {
                   fillOpacity: 0.12
                 }
               ),
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ s(
                 "polygon",
                 {
                   points: u(0.4),
@@ -237,7 +245,7 @@ const C = {
                   fillOpacity: 0.14
                 }
               ),
-              [1, 0.7, 0.4].map((t) => /* @__PURE__ */ r(
+              [1, 0.7, 0.4].map((t) => /* @__PURE__ */ s(
                 "polygon",
                 {
                   points: u(t),
@@ -247,25 +255,25 @@ const C = {
                 },
                 t
               )),
-              A.map((t, n) => {
-                const i = v(n, h);
-                return /* @__PURE__ */ r(
+              O.map((t, r) => {
+                const n = v(r, h);
+                return /* @__PURE__ */ s(
                   "line",
                   {
                     x1: k,
                     y1: k,
-                    x2: i.x,
-                    y2: i.y,
+                    x2: n.x,
+                    y2: n.y,
                     stroke: "var(--border)",
                     strokeWidth: 1
                   },
-                  n
+                  r
                 );
               }),
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ s(
                 "polygon",
                 {
-                  points: P,
+                  points: V,
                   fill: "var(--primary)",
                   fillOpacity: 0.18,
                   stroke: "var(--primary)",
@@ -273,13 +281,13 @@ const C = {
                   strokeLinejoin: "round"
                 }
               ),
-              c.factors.map((t, n) => {
-                const i = v(n, h * t.radius);
-                return /* @__PURE__ */ r(
+              c.factors.map((t, r) => {
+                const n = v(r, h * t.radius);
+                return /* @__PURE__ */ s(
                   "circle",
                   {
-                    cx: i.x,
-                    cy: i.y,
+                    cx: n.x,
+                    cy: n.y,
                     r: 3,
                     fill: "var(--primary)"
                   },
@@ -289,46 +297,46 @@ const C = {
             ]
           }
         ),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ s(
           "dl",
           {
             className: "type-body-sm ds:grid ds:min-w-[12rem] ds:flex-1 ds:grid-cols-[auto_1fr] ds:gap-x-[var(--spacing-md)] ds:gap-y-[var(--spacing-2xs)] ds:m-0",
-            "aria-label": a("periodontalRiskChart.factors.label", "Risk factors"),
+            "aria-label": i("periodontalRiskChart.factors.label", "Risk factors"),
             children: c.factors.map((t) => /* @__PURE__ */ m("div", { className: "ds:contents", children: [
-              /* @__PURE__ */ r("dt", { className: "ds:text-[color:var(--muted-foreground)]", children: a(`periodontalRiskChart.factor.${t.factor}`, {
-                defaultValue: G[t.factor]
+              /* @__PURE__ */ s("dt", { className: "ds:text-[color:var(--muted-foreground)]", children: i(`periodontalRiskChart.factor.${t.factor}`, {
+                defaultValue: H[t.factor]
               }) }),
               /* @__PURE__ */ m("dd", { className: "ds:m-0 ds:flex ds:items-center ds:gap-[var(--spacing-2xs)]", children: [
-                /* @__PURE__ */ r(w, { variant: C[t.level], size: "sm", children: b(t.level) }),
-                /* @__PURE__ */ r("span", { className: "type-meta ds:text-[color:var(--muted-foreground)]", children: V(t.factor, t.valueText) })
+                /* @__PURE__ */ s(w, { variant: F[t.level], size: "sm", children: L(t.level) }),
+                /* @__PURE__ */ s("span", { className: "type-meta ds:text-[color:var(--muted-foreground)]", children: T(t.factor, t.valueText) })
               ] })
             ] }, t.factor))
           }
         )
       ] })
     ] });
-    return /* @__PURE__ */ r(
+    return /* @__PURE__ */ s(
       "div",
       {
         ref: d,
         role: "group",
-        "aria-label": I,
+        "aria-label": $,
         "data-component": "periodontal-risk-chart",
         "data-component-id": p,
         id: p,
-        className: W({ surface: l, className: y }),
+        className: z({ surface: l, className: y }),
         ...e,
-        children: l === "elevated" ? /* @__PURE__ */ r(N, { variant: "elevated", children: /* @__PURE__ */ r(N.Body, { children: R }) }) : R
+        children: l === "elevated" ? /* @__PURE__ */ s(C, { variant: "elevated", children: /* @__PURE__ */ s(C.Body, { children: N }) }) : N
       }
     );
   }
 );
-H.displayName = "PeriodontalRiskChart";
+q.displayName = "PeriodontalRiskChart";
 export {
-  A as P,
-  H as a,
-  K as c,
+  O as P,
+  q as a,
+  W as c,
   B as p,
-  te as r
+  re as r
 };
-//# sourceMappingURL=periodontal-risk-chart-CPy7CNFe.js.map
+//# sourceMappingURL=periodontal-risk-chart-B7S9OmPC.js.map

package/dist/_chunks/practice-profile-hero-qfrsFQI_.js

@@ -0,0 +1,236 @@
+import { jsxs as i, jsx as e, Fragment as j } from "react/jsx-runtime";
+import { forwardRef as A, useId as B, useState as z, useEffect as S, useMemo as E, useRef as K } from "react";
+import { c as M } from "./index-D2ZczOXr.js";
+import { A as b } from "./avatar-BPiPL7ND.js";
+import { B as V } from "./badge-BUk4RjTS.js";
+import { C as w } from "./card-BA4Ig_kn.js";
+import { R as F } from "./rating-CGYpg5dj.js";
+import { u as L } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { u as W } from "./registry-DvAUVLHh.js";
+const $ = {
+  id: "practice-profile-hero",
+  // Purely observable hero region — no interactive affordances and no
+  // imperative actions on the handle (getName / getHasCover are read-only
+  // projections).
+  capabilities: [],
+  state: {
+    name: {
+      type: "string",
+      descriptionKey: "ui.agent.practiceProfileHero.state.name",
+      description: "Practice display name currently rendered.",
+      read: (a) => a.getName()
+    },
+    hasCover: {
+      type: "boolean",
+      descriptionKey: "ui.agent.practiceProfileHero.state.hasCover",
+      description: "Whether a cover-image strip is rendered. Structural flag only — never the image URL or any PHI.",
+      read: (a) => a.getHasCover()
+    }
+  },
+  actions: {},
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "practice-profile-hero",
+      description: "Marks the PracticeProfileHero root region."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, q = M("ds:w-full ds:text-[color:var(--foreground)]", {
+  variants: {
+    // Matches the kit's other `surface` props (Booking, ReviewsPanel,
+    // OperatorHero). `'elevated'` wraps in `<Card>`.
+    surface: {
+      flat: "",
+      elevated: ""
+    }
+  },
+  defaultVariants: {
+    surface: "elevated"
+  }
+}), D = A(
+  ({
+    name: a,
+    tagline: p,
+    imageUrl: u,
+    coverImageUrl: r,
+    rating: n,
+    badges: l,
+    actionSlot: f,
+    surface: m = "elevated",
+    "aria-label": v,
+    id: c,
+    className: H,
+    ...C
+  }, k) => {
+    const h = B(), [d, g] = z(null), x = r && (d == null ? void 0 : d.url) === r ? d.status : "loading";
+    S(() => {
+      if (!r || typeof Image > "u") return;
+      let s = !0;
+      const o = new Image();
+      return o.onload = () => {
+        s && g({ url: r, status: "loaded" });
+      }, o.onerror = () => {
+        s && g({ url: r, status: "error" });
+      }, o.src = r, () => {
+        s = !1, o.onload = null, o.onerror = null;
+      };
+    }, [r]);
+    const t = !!r && x !== "error", R = E(
+      () => ({ getName: () => a, getHasCover: () => t }),
+      [a, t]
+    );
+    W($, R, c);
+    const y = K(null);
+    L(() => {
+      const s = y.current;
+      s && (r ? s.style.setProperty(
+        "--practice-profile-hero-cover",
+        `url("${r.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}")`
+      ) : s.style.removeProperty("--practice-profile-hero-cover"));
+    }, [r, t]);
+    const N = t ? /* @__PURE__ */ e(
+      "div",
+      {
+        ref: y,
+        "aria-hidden": "true",
+        "data-slot": "cover",
+        "data-state": x,
+        className: [
+          "ds:h-32 ds:sm:h-40 ds:w-full",
+          // Cover image layered over the brand gradient — the gradient is
+          // the visible underlay while the image streams in. A failed image
+          // removes the strip (see above). The `none` fallback keeps the
+          // declaration valid before the layout effect sets the custom
+          // property (SSR / first paint).
+          "ds:bg-[image:var(--practice-profile-hero-cover,none),var(--gradient-hero-brand)]",
+          "ds:bg-cover ds:bg-center"
+        ].join(" ")
+      }
+    ) : null, P = /* @__PURE__ */ i(
+      "div",
+      {
+        className: [
+          // Phones: stacked column, smaller avatar — the practice name,
+          // tagline and rating keep the full line width instead of being
+          // squeezed beside a 3xl avatar. sm+: classic row layout.
+          "ds:flex ds:flex-col ds:items-start ds:gap-[var(--spacing-md)]",
+          "ds:sm:flex-row ds:sm:gap-[var(--spacing-lg)]"
+        ].join(" "),
+        children: [
+          /* @__PURE__ */ e("div", { className: "ds:shrink-0 ds:sm:hidden", children: /* @__PURE__ */ e(
+            b,
+            {
+              size: "xl",
+              shape: "rounded",
+              ratio: "4:3",
+              name: a,
+              src: u,
+              "aria-hidden": "true"
+            }
+          ) }),
+          /* @__PURE__ */ e("div", { className: "ds:hidden ds:shrink-0 ds:sm:block", children: /* @__PURE__ */ e(
+            b,
+            {
+              size: "3xl",
+              shape: "rounded",
+              ratio: "4:3",
+              name: a,
+              src: u,
+              "aria-hidden": "true"
+            }
+          ) }),
+          /* @__PURE__ */ i("div", { className: "ds:flex ds:w-full ds:min-w-0 ds:flex-1 ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+            /* @__PURE__ */ i("div", { className: "ds:flex ds:flex-wrap ds:items-start ds:gap-[var(--spacing-md)]", children: [
+              /* @__PURE__ */ e(
+                "h1",
+                {
+                  id: h,
+                  dir: "auto",
+                  className: "type-title-page ds:m-0 ds:text-[color:var(--foreground)]",
+                  children: a
+                }
+              ),
+              f ? (
+                // `ms-auto` + `shrink-0` are the desktop contract, and both are
+                // wrong once the row wraps on a phone: they stranded the action
+                // at the inline-end of a start-aligned stack and stopped a wide
+                // control fitting the column. Hence `sm:` and up only.
+                /* @__PURE__ */ e("div", { className: "ds:flex ds:min-w-0 ds:items-center ds:gap-[var(--spacing-xs)] ds:sm:ms-auto ds:sm:shrink-0", children: f })
+              ) : null
+            ] }),
+            p ? /* @__PURE__ */ e(
+              "p",
+              {
+                dir: "auto",
+                className: "type-body ds:m-0 ds:text-[color:var(--foreground)]",
+                children: p
+              }
+            ) : null,
+            n ? (
+              // Rating owns the whole line: locale-formatted value, plural-
+              // aware review count, and a single role="img" announcement.
+              /* @__PURE__ */ e(
+                F,
+                {
+                  value: n.value,
+                  max: 5,
+                  size: "md",
+                  reviews: { count: n.count }
+                }
+              )
+            ) : null,
+            l && l.length > 0 ? /* @__PURE__ */ e(
+              "div",
+              {
+                role: "list",
+                className: "ds:mt-[var(--spacing-2xs)] ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-2xs)]",
+                children: l.map((s) => /* @__PURE__ */ e(
+                  V,
+                  {
+                    variant: s.variant ?? "neutral",
+                    role: "listitem",
+                    children: s.label
+                  },
+                  s.key
+                ))
+              }
+            ) : null
+          ] })
+        ]
+      }
+    );
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        ref: k,
+        role: "region",
+        "aria-label": v,
+        "aria-labelledby": v ? void 0 : h,
+        "data-component": "practice-profile-hero",
+        "data-component-id": c,
+        "data-has-cover": t ? "true" : "false",
+        id: c,
+        className: q({ surface: m, className: H }),
+        ...C,
+        children: m === "elevated" ? /* @__PURE__ */ i(w, { variant: "elevated", children: [
+          N,
+          /* @__PURE__ */ e(w.Body, { children: P })
+        ] }) : /* @__PURE__ */ i(j, { children: [
+          N,
+          /* @__PURE__ */ e("div", { className: "ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]", children: P })
+        ] })
+      }
+    );
+  }
+);
+D.displayName = "PracticeProfileHero";
+export {
+  D as P,
+  $ as p
+};
+//# sourceMappingURL=practice-profile-hero-qfrsFQI_.js.map