@alfadocs/ui-kit 0.0.12

package/dist/_chunks/tooth-scheme.agent-CFKl3iQr.js

@@ -0,0 +1,762 @@
+import { jsx as s, jsxs as $ } from "react/jsx-runtime";
+import { forwardRef as mt, useId as pt, useMemo as Z, useState as G, useEffect as et, useRef as gt, useCallback as q, useImperativeHandle as vt } from "react";
+import * as E from "@radix-ui/react-tooltip";
+import { c as M } from "./index-D2ZczOXr.js";
+import { useTranslation as ot } from "react-i18next";
+const X = [
+  // upper
+  "18",
+  "17",
+  "16",
+  "15",
+  "14",
+  "13",
+  "12",
+  "11",
+  "21",
+  "22",
+  "23",
+  "24",
+  "25",
+  "26",
+  "27",
+  "28",
+  // lower
+  "48",
+  "47",
+  "46",
+  "45",
+  "44",
+  "43",
+  "42",
+  "41",
+  "31",
+  "32",
+  "33",
+  "34",
+  "35",
+  "36",
+  "37",
+  "38"
+], J = [
+  // upper
+  "55",
+  "54",
+  "53",
+  "52",
+  "51",
+  "61",
+  "62",
+  "63",
+  "64",
+  "65",
+  // lower
+  "85",
+  "84",
+  "83",
+  "82",
+  "81",
+  "71",
+  "72",
+  "73",
+  "74",
+  "75"
+];
+function xt(n) {
+  return n <= 2 ? "incisor" : n === 3 ? "canine" : n <= 5 ? "premolar" : "molar";
+}
+function wt(n) {
+  return n <= 2 ? "incisor" : n === 3 ? "canine" : "molar";
+}
+function yt(n, e) {
+  const r = (n - 1) % 4 + 1;
+  return `${r === 1 ? "UR" : r === 2 ? "UL" : r === 3 ? "LL" : "LR"}${e}`;
+}
+function bt(n, e) {
+  switch (n) {
+    case 1:
+      return String(1 + (8 - e));
+    case 2:
+      return String(8 + e);
+    case 3:
+      return String(17 + (8 - e));
+    case 4:
+      return String(24 + e);
+    default:
+      return "";
+  }
+}
+function Ct(n, e) {
+  const r = "ABCDEFGHIJKLMNOPQRST";
+  let a = -1;
+  switch (n) {
+    case 5:
+      a = 0 + (5 - e);
+      break;
+    case 6:
+      a = 5 + (e - 1);
+      break;
+    case 7:
+      a = 10 + (5 - e);
+      break;
+    case 8:
+      a = 15 + (e - 1);
+      break;
+    default:
+      a = -1;
+  }
+  return a >= 0 ? r[a] : "";
+}
+function Tt(n) {
+  const e = Number(n[0]), r = Number(n[1]), a = e >= 5, O = a ? wt(r) : xt(r), b = e === 1 || e === 2 || e === 5 || e === 6 ? "upper" : "lower", u = e === 1 || e === 4 || e === 5 || e === 8 ? "right" : "left", g = a ? Ct(e, r) : bt(e, r), N = yt(e, r);
+  return {
+    fdi: n,
+    universal: g,
+    palmer: N,
+    quadrant: e,
+    positionInQuadrant: r,
+    anatomy: O,
+    arch: b,
+    side: u,
+    dentition: a ? "primary" : "permanent"
+  };
+}
+const y = [
+  ...X,
+  ...J
+].reduce((n, e) => (n[e] = Tt(e), n), {}), kt = Object.fromEntries(
+  Object.entries(y).map(([n, e]) => [n, e.universal])
+), Lt = Object.fromEntries(
+  Object.entries(y).map(([n, e]) => [n, e.palmer])
+), Ot = {
+  caries: "--destructive",
+  filled: "--info",
+  crowned: "--warning",
+  missing: "--muted-foreground",
+  implant: "--accent",
+  rootCanal: "--primary"
+}, S = {
+  caries: "var(--destructive)",
+  filled: "var(--info)",
+  crowned: "var(--warning)",
+  missing: "var(--muted-foreground)",
+  implant: "var(--accent)",
+  rootCanal: "var(--primary)"
+}, P = {
+  caries: "tooth-scheme-pattern-diagonal",
+  filled: "tooth-scheme-pattern-dots",
+  crowned: "tooth-scheme-pattern-crosshatch",
+  missing: "tooth-scheme-pattern-blank",
+  implant: "tooth-scheme-pattern-vertical",
+  rootCanal: "tooth-scheme-pattern-horizontal"
+}, K = {
+  incisor: {
+    width: 22,
+    height: 50,
+    // Narrow rounded rectangle — slightly wider at the occlusal/biting edge.
+    path: "M4 4 C4 2 6 0 8 0 L14 0 C16 0 18 2 18 4 L20 44 C20 47 18 50 14 50 L8 50 C4 50 2 47 2 44 Z"
+  },
+  canine: {
+    width: 26,
+    height: 50,
+    // Pointed cusp at the bottom — canines present a single prominent cusp.
+    path: "M4 4 C4 2 6 0 8 0 L18 0 C20 0 22 2 22 4 L24 40 L13 50 L2 40 Z"
+  },
+  premolar: {
+    width: 28,
+    height: 50,
+    // Wider rounded rectangle with a subtle horizontal notch hinting at two cusps.
+    path: "M4 4 C4 2 6 0 8 0 L20 0 C22 0 24 2 24 4 L26 44 C26 47 24 50 20 50 L8 50 C4 50 2 47 2 44 Z",
+    innerPath: "M6 34 L22 34"
+  },
+  molar: {
+    width: 32,
+    height: 50,
+    // Widest rounded rectangle with a cross-notch hinting at the occlusal fissure pattern.
+    path: "M4 4 C4 2 6 0 8 0 L24 0 C26 0 28 2 28 4 L30 44 C30 47 28 50 24 50 L8 50 C4 50 2 47 2 44 Z",
+    innerPath: "M6 32 L26 32 M16 22 L16 42"
+  }
+}, j = 4, nt = 24, L = 4;
+function It(n) {
+  const e = n === "primary" ? J : n === "mixed" ? [...X, ...J] : X, r = [], a = [];
+  for (const h of e)
+    y[h].arch === "upper" ? r.push(h) : a.push(h);
+  const O = 50, b = Math.max(r.length, a.length);
+  function u(h, f) {
+    const V = h.reduce((w, v) => {
+      const x = K[y[v].anatomy];
+      return w + x.width + j;
+    }, 0), U = h.length > 0 ? V - j : 0;
+    let C = ((function() {
+      return (r.length >= a.length ? r : a).reduce((_, A) => {
+        const H = K[y[A].anatomy];
+        return _ + H.width + j;
+      }, 0) - j;
+    })() - U) / 2;
+    return h.map((w) => {
+      const v = y[w], x = K[v.anatomy], _ = {
+        fdi: w,
+        meta: v,
+        shape: x,
+        x: C,
+        y: f
+      };
+      return C += x.width + j, _;
+    });
+  }
+  const g = u(r, 0), N = u(a, O + nt), W = Math.max(
+    g.reduce((h, f) => Math.max(h, f.x + f.shape.width), 0),
+    N.reduce((h, f) => Math.max(h, f.x + f.shape.width), 0)
+  ), z = W > 0 ? W : b * 30, c = O * 2 + nt;
+  return { teeth: [...g, ...N], width: z, height: c };
+}
+function rt(n, e) {
+  switch (e) {
+    case "universal":
+      return kt[n] ?? n;
+    case "palmer":
+      return Lt[n] ?? n;
+    case "fdi":
+    default:
+      return n;
+  }
+}
+function zt() {
+  return {};
+}
+function at(n) {
+  const e = {};
+  for (const [r, a] of Object.entries(n))
+    !a || a.length === 0 || (e[r] = { conditions: a, surfaces: [] });
+  return e;
+}
+const $t = M(
+  [
+    "tooth-scheme-alfadocs",
+    "inline-flex flex-col",
+    "gap-[var(--spacing-sm)]",
+    "bg-[var(--background)] text-[var(--foreground)]"
+  ].join(" ")
+), St = M(
+  [
+    "block max-w-full h-auto",
+    "text-[var(--foreground)]"
+  ].join(" ")
+), Mt = M(
+  [
+    "group cursor-pointer",
+    "focus:outline-none",
+    "transition-[fill,stroke,opacity] duration-[var(--animation-duration)]",
+    "motion-reduce:transition-none"
+  ].join(" ")
+), Nt = M(
+  [
+    "flex flex-wrap items-center",
+    "gap-[var(--spacing-sm)]",
+    "type-meta text-[var(--muted-foreground)]"
+  ].join(" ")
+), Rt = M(
+  [
+    "inline-flex items-center",
+    "gap-[var(--spacing-xs)]"
+  ].join(" ")
+), At = M(
+  [
+    "inline-block",
+    "inline-size-[0.75rem] block-size-[0.75rem]",
+    "rounded-[var(--radius-xs)]",
+    "border border-[color:var(--border)]"
+  ].join(" ")
+), Dt = M(
+  [
+    "sr-only"
+  ].join(" ")
+);
+function Q(n) {
+  return n.value !== void 0;
+}
+function it() {
+  return { conditions: [], surfaces: [] };
+}
+function st(n) {
+  return !n || n.length === 0 ? ["caries"] : [];
+}
+function Et(n) {
+  return n.replace(/[^a-zA-Z0-9-_]/g, "");
+}
+function Pt({ idPrefix: n }) {
+  const e = (r) => `${n}-${r}`;
+  return /* @__PURE__ */ $("defs", { children: [
+    /* @__PURE__ */ s(
+      "pattern",
+      {
+        id: e(P.caries),
+        patternUnits: "userSpaceOnUse",
+        width: "6",
+        height: "6",
+        patternTransform: "rotate(45)",
+        children: /* @__PURE__ */ s(
+          "line",
+          {
+            x1: "0",
+            y1: "0",
+            x2: "0",
+            y2: "6",
+            stroke: S.caries,
+            strokeWidth: "2"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ s(
+      "pattern",
+      {
+        id: e(P.filled),
+        patternUnits: "userSpaceOnUse",
+        width: "5",
+        height: "5",
+        children: /* @__PURE__ */ s("circle", { cx: "2.5", cy: "2.5", r: "1", fill: S.filled })
+      }
+    ),
+    /* @__PURE__ */ s(
+      "pattern",
+      {
+        id: e(P.crowned),
+        patternUnits: "userSpaceOnUse",
+        width: "6",
+        height: "6",
+        children: /* @__PURE__ */ s(
+          "path",
+          {
+            d: "M0 0 L6 6 M6 0 L0 6",
+            stroke: S.crowned,
+            strokeWidth: "1"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ s(
+      "pattern",
+      {
+        id: e(P.implant),
+        patternUnits: "userSpaceOnUse",
+        width: "4",
+        height: "4",
+        children: /* @__PURE__ */ s(
+          "line",
+          {
+            x1: "1",
+            y1: "0",
+            x2: "1",
+            y2: "4",
+            stroke: S.implant,
+            strokeWidth: "1"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ s(
+      "pattern",
+      {
+        id: e(P.rootCanal),
+        patternUnits: "userSpaceOnUse",
+        width: "4",
+        height: "4",
+        children: /* @__PURE__ */ s(
+          "line",
+          {
+            x1: "0",
+            y1: "1",
+            x2: "4",
+            y2: "1",
+            stroke: S.rootCanal,
+            strokeWidth: "1"
+          }
+        )
+      }
+    )
+  ] });
+}
+const _t = [
+  "caries",
+  "filled",
+  "crowned",
+  "missing",
+  "implant",
+  "rootCanal"
+];
+function jt({ idPrefix: n }) {
+  const { t: e } = ot();
+  return /* @__PURE__ */ s(
+    "ul",
+    {
+      className: Nt(),
+      "data-testid": "tooth-scheme-legend",
+      "aria-label": e("toothScheme.legendLabel"),
+      children: _t.map((r) => /* @__PURE__ */ $("li", { className: Rt(), children: [
+        /* @__PURE__ */ s(
+          "span",
+          {
+            className: At(),
+            "aria-hidden": "true",
+            "data-condition": r,
+            "data-token": Ot[r],
+            "data-testid": `tooth-scheme-legend-swatch-${r}`
+          }
+        ),
+        /* @__PURE__ */ s("span", { children: e(`toothScheme.condition.${r}`) })
+      ] }, r))
+    }
+  );
+}
+const Wt = mt(
+  ({
+    dentition: n = "permanent",
+    numbering: e = "fdi",
+    mode: r = "interactive",
+    value: a,
+    defaultValue: O,
+    onChange: b,
+    onSelect: u,
+    conditions: g,
+    ariaLabel: N,
+    className: W
+  }, z) => {
+    const { t: c } = ot(), h = pt(), f = Z(
+      () => `ts-${Et(h)}`,
+      [h]
+    ), [V, U] = G(() => a !== void 0 ? a : O !== void 0 ? O : g ? at(g) : {}), m = Q({ value: a }) ? a : V;
+    et(() => {
+      Q({ value: a }) || g !== void 0 && U(at(g));
+    }, [g, a]);
+    const R = Z(() => It(n), [n]), C = Z(
+      () => R.teeth.map((t) => t.fdi),
+      [R]
+    ), w = C[0], [v, x] = G(w);
+    et(() => {
+      (!v || !C.includes(v)) && x(w);
+    }, [w, v, C]);
+    const [_, A] = G(""), H = gt(null), F = q(
+      (t) => {
+        Q({ value: a }) || U(t), b == null || b(t);
+      },
+      [b, a]
+    ), T = q((t) => {
+      const o = H.current;
+      if (!o) return;
+      const i = o.querySelector(`g[data-fdi="${t}"]`);
+      i && (i.focus(), x(t));
+    }, []);
+    vt(
+      z,
+      () => ({
+        focusTooth: (t) => {
+          T(t);
+        },
+        getChart: () => m
+      }),
+      [m, T]
+    );
+    const ct = q(
+      (t, o) => {
+        var D;
+        if (r !== "interactive") return;
+        const i = y[o];
+        if (!i) return;
+        const d = C, I = d.indexOf(o);
+        switch (t.key) {
+          case "ArrowRight": {
+            t.preventDefault();
+            const l = Math.min(d.length - 1, I + 1);
+            T(d[l]);
+            return;
+          }
+          case "ArrowLeft": {
+            t.preventDefault();
+            const l = Math.max(0, I - 1);
+            T(d[l]);
+            return;
+          }
+          case "ArrowUp":
+          case "ArrowDown": {
+            t.preventDefault();
+            const p = {
+              1: 4,
+              4: 1,
+              2: 3,
+              3: 2,
+              5: 8,
+              8: 5,
+              6: 7,
+              7: 6
+            }[i.quadrant];
+            if (!p) return;
+            const k = `${p}${i.positionInQuadrant}`;
+            d.includes(k) && T(k);
+            return;
+          }
+          case "Home": {
+            t.preventDefault();
+            const l = d.filter(
+              (p) => y[p].quadrant === i.quadrant
+            );
+            l.length > 0 && T(l[0]);
+            return;
+          }
+          case "End": {
+            t.preventDefault();
+            const l = d.filter(
+              (p) => y[p].quadrant === i.quadrant
+            );
+            l.length > 0 && T(l[l.length - 1]);
+            return;
+          }
+          case " ":
+          case "Enter": {
+            t.preventDefault();
+            const l = (D = m[o]) == null ? void 0 : D.conditions, p = st(l), k = { ...m };
+            p.length === 0 ? (delete k[o], A(c("toothScheme.deselected", { id: o }))) : (k[o] = {
+              ...m[o] ?? it(),
+              conditions: p
+            }, A(
+              c("toothScheme.selected", {
+                id: o,
+                conditions: p.map((B) => c(`toothScheme.condition.${B}`)).join(", ")
+              })
+            )), F(k), u == null || u(o);
+            return;
+          }
+          default:
+            return;
+        }
+      },
+      [m, F, T, r, u, c, C]
+    ), dt = q(
+      (t) => {
+        var I;
+        if (r !== "interactive") return;
+        x(t);
+        const o = (I = m[t]) == null ? void 0 : I.conditions, i = st(o), d = { ...m };
+        i.length === 0 ? (delete d[t], A(c("toothScheme.deselected", { id: t }))) : (d[t] = {
+          ...m[t] ?? it(),
+          conditions: i
+        }, A(
+          c("toothScheme.selected", {
+            id: t,
+            conditions: i.map((D) => c(`toothScheme.condition.${D}`)).join(", ")
+          })
+        )), F(d), u == null || u(t);
+      },
+      [m, F, r, u, c]
+    ), lt = R.width + 4, ht = R.height + 4, Y = N ?? c("toothScheme.ariaLabel");
+    return /* @__PURE__ */ s(E.Provider, { delayDuration: 200, children: /* @__PURE__ */ $(
+      "div",
+      {
+        role: "region",
+        "aria-label": Y,
+        className: [$t(), W].filter(Boolean).join(" "),
+        "data-component": "tooth-scheme",
+        "data-testid": "tooth-scheme-root",
+        "data-dentition": n,
+        "data-numbering": e,
+        "data-mode": r,
+        children: [
+          /* @__PURE__ */ $(
+            "svg",
+            {
+              ref: H,
+              viewBox: `0 0 ${lt} ${ht}`,
+              className: St(),
+              role: "group",
+              "aria-label": Y,
+              "data-testid": "tooth-scheme-svg",
+              focusable: "false",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: [
+                /* @__PURE__ */ s(Pt, { idPrefix: f }),
+                R.teeth.map((t) => {
+                  var tt;
+                  const o = m[t.fdi], i = (tt = o == null ? void 0 : o.conditions) == null ? void 0 : tt[0], d = c(
+                    `toothScheme.anatomy.${t.meta.anatomy}`
+                  ), I = i ? `, ${c(`toothScheme.condition.${i}`)}` : "", D = c("toothScheme.toothLabel", {
+                    id: rt(t.fdi, e),
+                    anatomy: d,
+                    conditionSuffix: I
+                  }), l = r === "interactive" ? t.fdi === v ? 0 : -1 : void 0, p = i && i !== "missing" ? `url(#${f}-${P[i]})` : "var(--muted)", k = i && i !== "missing" ? S[i] : "var(--border)", B = i ? `${d} · ${c(`toothScheme.condition.${i}`)}` : d, ut = rt(t.fdi, e);
+                  return /* @__PURE__ */ $(E.Root, { children: [
+                    /* @__PURE__ */ s(E.Trigger, { asChild: !0, children: /* @__PURE__ */ $(
+                      "g",
+                      {
+                        "data-fdi": t.fdi,
+                        "data-anatomy": t.meta.anatomy,
+                        "data-arch": t.meta.arch,
+                        "data-side": t.meta.side,
+                        "data-quadrant": t.meta.quadrant,
+                        "data-condition": i ?? "none",
+                        "data-testid": `tooth-${t.fdi}`,
+                        transform: `translate(${t.x}, ${t.y})`,
+                        tabIndex: l,
+                        role: r === "interactive" ? "button" : void 0,
+                        "aria-label": D,
+                        "aria-pressed": r === "interactive" ? i !== void 0 : void 0,
+                        className: Mt(),
+                        onClick: r === "interactive" ? () => dt(t.fdi) : void 0,
+                        onFocus: () => x(t.fdi),
+                        onKeyDown: (ft) => ct(ft, t.fdi),
+                        children: [
+                          /* @__PURE__ */ s(
+                            "rect",
+                            {
+                              x: -L,
+                              y: -L,
+                              width: t.shape.width + L * 2,
+                              height: t.shape.height + L * 2,
+                              fill: "transparent"
+                            }
+                          ),
+                          /* @__PURE__ */ s(
+                            "path",
+                            {
+                              d: t.shape.path,
+                              fill: p,
+                              stroke: k,
+                              strokeWidth: "1.5",
+                              vectorEffect: "non-scaling-stroke"
+                            }
+                          ),
+                          t.shape.innerPath ? /* @__PURE__ */ s(
+                            "path",
+                            {
+                              d: t.shape.innerPath,
+                              fill: "none",
+                              stroke: "var(--muted-foreground)",
+                              strokeWidth: "0.75",
+                              vectorEffect: "non-scaling-stroke"
+                            }
+                          ) : null,
+                          /* @__PURE__ */ s(
+                            "rect",
+                            {
+                              x: -L,
+                              y: -L,
+                              width: t.shape.width + L * 2,
+                              height: t.shape.height + L * 2,
+                              fill: "none",
+                              stroke: "var(--ring)",
+                              strokeWidth: "var(--focus-ring-width)",
+                              className: [
+                                "opacity-0",
+                                "group-focus-visible:opacity-100",
+                                "forced-colors:stroke-[CanvasText]"
+                              ].join(" "),
+                              "data-testid": `tooth-${t.fdi}-focus-ring`,
+                              pointerEvents: "none",
+                              rx: "4"
+                            }
+                          ),
+                          i === "missing" ? /* @__PURE__ */ s(
+                            "path",
+                            {
+                              d: `M2 2 L${t.shape.width - 2} ${t.shape.height - 2} M${t.shape.width - 2} 2 L2 ${t.shape.height - 2}`,
+                              stroke: S.missing,
+                              strokeWidth: "2",
+                              fill: "none"
+                            }
+                          ) : null,
+                          /* @__PURE__ */ s(
+                            "text",
+                            {
+                              x: t.shape.width / 2,
+                              y: t.meta.arch === "upper" ? t.shape.height + 12 : -4,
+                              textAnchor: "middle",
+                              fontSize: "10",
+                              fill: "var(--muted-foreground)",
+                              className: "select-none",
+                              "aria-hidden": "true",
+                              children: ut
+                            }
+                          )
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ s(E.Portal, { children: /* @__PURE__ */ $(
+                      E.Content,
+                      {
+                        side: "top",
+                        sideOffset: 6,
+                        className: "z-[var(--z-tooltip)] rounded-[var(--radius-sm)] bg-[var(--foreground)] text-[var(--background)] ps-[var(--spacing-xs)] pe-[var(--spacing-xs)] pt-[calc(var(--spacing-xs)/2)] pb-[calc(var(--spacing-xs)/2)] text-[var(--font-size-xs)]",
+                        children: [
+                          B,
+                          /* @__PURE__ */ s(E.Arrow, { className: "fill-[var(--foreground)]" })
+                        ]
+                      }
+                    ) })
+                  ] }, t.fdi);
+                })
+              ]
+            }
+          ),
+          /* @__PURE__ */ s(jt, { idPrefix: f }),
+          /* @__PURE__ */ s(
+            "div",
+            {
+              className: Dt(),
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              "data-testid": "tooth-scheme-live",
+              children: _
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+Wt.displayName = "ToothScheme";
+const Vt = {
+  id: "tooth-scheme",
+  capabilities: ["pick"],
+  state: {
+    chart: {
+      type: "object",
+      description: "Current dental chart state — tooth conditions keyed by FDI id.",
+      read: (n) => n.getChart()
+    }
+  },
+  actions: {
+    focus_tooth: {
+      safety: "read",
+      argsType: "{ id: FdiId }",
+      description: "Move focus to a specific tooth by FDI id.",
+      invoke: (n, e) => {
+        n.focusTooth(e.id);
+      }
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "tooth-scheme" },
+    item: {
+      attr: "data-fdi",
+      description: 'Each rendered tooth `<g>` carries its FDI id as `data-fdi`. Tests still use `data-testid="tooth-<fdi>"` separately.'
+    }
+  }
+};
+export {
+  S as C,
+  y as F,
+  X as P,
+  K as T,
+  P as a,
+  Ot as b,
+  Lt as c,
+  kt as d,
+  J as e,
+  Wt as f,
+  at as g,
+  zt as h,
+  It as i,
+  rt as l,
+  $t as r,
+  Vt as t
+};
+//# sourceMappingURL=tooth-scheme.agent-CFKl3iQr.js.map