@alfadocs/ui-kit-debug 0.63.0 → 0.64.0

package/dist/_chunks/tooth-scheme-CiphQaON.js

@@ -0,0 +1,1257 @@
+import { jsx as u, jsxs as j } from "react/jsx-runtime";
+import { forwardRef as Tt, useState as H, useRef as de, useEffect as ne, useMemo as Te, useCallback as E, useImperativeHandle as St } from "react";
+import * as K from "@radix-ui/react-tooltip";
+import { c as Y } from "./index-D2ZczOXr.js";
+import { useTranslation as nt } from "react-i18next";
+import { u as Lt } from "./registry-nPAVE19X.js";
+import { I as It } from "./icon-button-CKEOrN37.js";
+import { P as Se } from "./popover-Devce-tT.js";
+import { S as kt } from "./select-CEtRcon5.js";
+import { S as Ot } from "./switch-BJ6HD3Mn.js";
+import { S as At } from "./settings-ca2Yi9R8.js";
+const Ct = {
+  id: "tooth-scheme",
+  // pick — focus/select a tooth; edit_inline — record/clear findings;
+  // view_change — the side/plan projection + dentition are view props.
+  capabilities: ["pick", "edit_inline", "view_change"],
+  state: {
+    chart: {
+      type: "object",
+      description: "Current dental chart — findings (and marked surfaces) keyed by FDI id.",
+      read: (t) => t.getChart()
+    },
+    chartedTeeth: {
+      type: "string[]",
+      description: "FDI ids of every tooth carrying at least one finding.",
+      read: (t) => Object.keys(t.getChart())
+    }
+  },
+  actions: {
+    focus_tooth: {
+      safety: "read",
+      argsType: "{ id: FdiId }",
+      description: "Move focus to a specific tooth by FDI id.",
+      invoke: (t, n) => {
+        t.focusTooth(n.id);
+      }
+    },
+    get_tooth: {
+      safety: "read",
+      argsType: "{ id: FdiId }",
+      description: "Read the findings recorded on one tooth (FDI id).",
+      invoke: (t, n) => t.getTooth(n.id)
+    },
+    teeth_with: {
+      safety: "read",
+      argsType: "{ condition: ToothCondition }",
+      description: "List the FDI ids of every tooth carrying a given finding (e.g. all teeth with caries).",
+      invoke: (t, n) => t.teethWith(n.condition)
+    },
+    set_finding: {
+      safety: "write",
+      argsType: "{ id: FdiId; condition: ToothCondition; surfaces?: Surface[] }",
+      description: "Record a finding on a tooth (crown, implant, root canal, caries, …). Optionally mark the affected surfaces for a surface finding.",
+      invoke: (t, n) => {
+        t.setFinding(n.id, n.condition, n.surfaces);
+      }
+    },
+    remove_finding: {
+      safety: "write",
+      argsType: "{ id: FdiId; condition: ToothCondition }",
+      description: "Remove a single finding from a tooth.",
+      invoke: (t, n) => {
+        t.removeFinding(n.id, n.condition);
+      }
+    },
+    clear_tooth: {
+      safety: "destructive",
+      argsType: "{ id: FdiId }",
+      description: "Clear every finding from a tooth.",
+      invoke: (t, n) => {
+        t.clearTooth(n.id);
+      }
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "tooth-scheme" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    },
+    item: {
+      attr: "data-fdi",
+      description: "Each rendered tooth `<g>` carries its FDI id as `data-fdi`. The `data-projection` attribute on the root exposes the side/plan view."
+    }
+  }
+}, Ae = [
+  // 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"
+], Ce = [
+  // upper
+  "55",
+  "54",
+  "53",
+  "52",
+  "51",
+  "61",
+  "62",
+  "63",
+  "64",
+  "65",
+  // lower
+  "85",
+  "84",
+  "83",
+  "82",
+  "81",
+  "71",
+  "72",
+  "73",
+  "74",
+  "75"
+];
+function Dt(t) {
+  return t <= 2 ? "incisor" : t === 3 ? "canine" : t <= 5 ? "premolar" : "molar";
+}
+function Mt(t) {
+  return t <= 2 ? "incisor" : t === 3 ? "canine" : "molar";
+}
+function Nt(t, n) {
+  const i = (t - 1) % 4 + 1;
+  return `${i === 1 ? "UR" : i === 2 ? "UL" : i === 3 ? "LL" : "LR"}${n}`;
+}
+function Rt(t, n) {
+  switch (t) {
+    case 1:
+      return String(1 + (8 - n));
+    case 2:
+      return String(8 + n);
+    case 3:
+      return String(17 + (8 - n));
+    case 4:
+      return String(24 + n);
+    default:
+      return "";
+  }
+}
+function _t(t, n) {
+  const i = "ABCDEFGHIJKLMNOPQRST";
+  let r = -1;
+  switch (t) {
+    case 5:
+      r = 0 + (5 - n);
+      break;
+    case 6:
+      r = 5 + (n - 1);
+      break;
+    case 7:
+      r = 10 + (5 - n);
+      break;
+    case 8:
+      r = 15 + (n - 1);
+      break;
+    default:
+      r = -1;
+  }
+  return r >= 0 ? i[r] : "";
+}
+function Et(t) {
+  const n = Number(t[0]), i = Number(t[1]), r = n >= 5, l = r ? Mt(i) : Dt(i), m = n === 1 || n === 2 || n === 5 || n === 6 ? "upper" : "lower", $ = n === 1 || n === 4 || n === 5 || n === 8 ? "right" : "left", v = r ? _t(n, i) : Rt(n, i), f = Nt(n, i);
+  return {
+    fdi: t,
+    universal: v,
+    palmer: f,
+    quadrant: n,
+    positionInQuadrant: i,
+    anatomy: l,
+    arch: m,
+    side: $,
+    dentition: r ? "primary" : "permanent"
+  };
+}
+const F = [
+  ...Ae,
+  ...Ce
+].reduce((t, n) => (t[n] = Et(n), t), {}), jt = Object.fromEntries(
+  Object.entries(F).map(([t, n]) => [t, n.universal])
+), Ft = Object.fromEntries(
+  Object.entries(F).map(([t, n]) => [t, n.palmer])
+);
+function Me(t) {
+  return t.dentition !== "primary" ? t.fdi : `${t.quadrant - 4}${t.positionInQuadrant}`;
+}
+const Ht = 0.72, hn = {
+  caries: "--destructive",
+  filled: "--info",
+  crowned: "--warning",
+  temporaryCrown: "--warning",
+  bridge: "--primary",
+  missing: "--muted-foreground",
+  implant: "--accent",
+  implantExtraction: "--accent",
+  stub: "--muted-foreground",
+  destroyed: "--destructive",
+  rootCanal: "--primary"
+}, ue = {
+  caries: "var(--destructive)",
+  filled: "var(--info)",
+  crowned: "var(--warning)",
+  temporaryCrown: "var(--warning)",
+  bridge: "var(--primary)",
+  missing: "var(--muted-foreground)",
+  implant: "var(--accent)",
+  implantExtraction: "var(--accent)",
+  stub: "var(--muted-foreground)",
+  destroyed: "var(--destructive)",
+  rootCanal: "var(--primary)"
+}, De = {
+  crowned: { folder: "crown", resolve: "per-fdi" },
+  temporaryCrown: { folder: "temporaryCrown", resolve: "per-fdi" },
+  bridge: { folder: "replacement", resolve: "per-fdi" },
+  destroyed: { folder: "destroyed", resolve: "per-fdi" },
+  implant: { folder: "implant", resolve: "general" },
+  implantExtraction: { folder: "implantExtraction", resolve: "general" },
+  stub: { folder: "stub", resolve: "general" },
+  rootCanal: { folder: "rootTreatment", resolve: "rct" }
+};
+function rt(t, n, i) {
+  const r = t.arch === "upper" ? "top" : "bottom", l = `${n}/side/${i.folder}/${r}`;
+  if (i.resolve === "general") return `${l}/general.webp`;
+  const m = Me(t);
+  return i.resolve === "rct" ? `${l}/${m}/full.webp` : `${l}/${m}.webp`;
+}
+const qt = {
+  mesial: "mesial",
+  distal: "distal",
+  occlusal: "occlusal",
+  buccal: "vestibular",
+  lingual: "oral"
+}, Wt = {
+  caries: "caries",
+  filled: "filling"
+};
+function Pt(t, n, i, r) {
+  const l = t.arch === "upper" ? "top" : "bottom";
+  return `${n}/plan/${i}/${l}/${Me(t)}-${qt[r]}.webp`;
+}
+function Le(t) {
+  return t.anatomy === "molar" || t.anatomy === "premolar" ? ["top", "bottom", "left", "right", "center"] : ["top", "bottom", "left", "right"];
+}
+function Ge(t, n) {
+  if (n === "center") return "occlusal";
+  if (n === "top") return t.arch === "upper" ? "buccal" : "lingual";
+  if (n === "bottom") return t.arch === "upper" ? "lingual" : "buccal";
+  const i = t.quadrant <= 4 ? t.quadrant : t.quadrant - 4, r = i === 1 || i === 4;
+  return n === "left" ? r ? "distal" : "mesial" : r ? "mesial" : "distal";
+}
+const Qe = (t) => Math.round(t * 100) / 100;
+function Ut(t, n, i) {
+  const { x: r, y: l, w: m, h: $ } = n, v = r + m, f = l + $, a = (O, M) => `${Qe(O)} ${Qe(M)}`;
+  if (!i) {
+    const O = r + m / 2, M = l + $ / 2;
+    switch (t) {
+      case "top":
+        return `M ${a(r, l)} L ${a(v, l)} L ${a(O, M)} Z`;
+      case "bottom":
+        return `M ${a(r, f)} L ${a(v, f)} L ${a(O, M)} Z`;
+      case "left":
+        return `M ${a(r, l)} L ${a(O, M)} L ${a(r, f)} Z`;
+      case "right":
+        return `M ${a(v, l)} L ${a(O, M)} L ${a(v, f)} Z`;
+      default:
+        return "";
+    }
+  }
+  const w = r + m * 0.3, S = l + $ * 0.3, k = r + m * 0.7, g = l + $ * 0.7;
+  switch (t) {
+    case "center":
+      return `M ${a(w, S)} L ${a(k, S)} L ${a(k, g)} L ${a(w, g)} Z`;
+    case "top":
+      return `M ${a(r, l)} L ${a(v, l)} L ${a(k, S)} L ${a(w, S)} Z`;
+    case "bottom":
+      return `M ${a(r, f)} L ${a(v, f)} L ${a(k, g)} L ${a(w, g)} Z`;
+    case "left":
+      return `M ${a(r, l)} L ${a(w, S)} L ${a(w, g)} L ${a(r, f)} Z`;
+    case "right":
+      return `M ${a(v, l)} L ${a(k, S)} L ${a(k, g)} L ${a(v, f)} Z`;
+    default:
+      return "";
+  }
+}
+const Ie = 5, Xe = 40, U = 4, q = 36, ot = 62;
+function it(t, n, i = "default", r = "side") {
+  const l = t.arch === "upper" ? "top" : "bottom";
+  return `${n}/${r}/${i}/${l}/${Me(t)}.webp`;
+}
+function Zt(t, n = ot) {
+  const i = t === "primary" ? Ce : t === "mixed" ? [...Ae, ...Ce] : Ae, r = [], l = [];
+  for (const g of i)
+    F[g].arch === "upper" ? r.push(g) : l.push(g);
+  const m = q + Ie, $ = Math.max(r.length, l.length), v = $ > 0 ? $ * m - Ie : 0;
+  function f(g, O) {
+    const M = g.length > 0 ? g.length * m - Ie : 0, fe = (v - M) / 2;
+    return g.map((d, he) => {
+      const re = F[d];
+      return {
+        fdi: d,
+        meta: re,
+        x: fe + he * m,
+        y: O
+      };
+    });
+  }
+  const a = f(r, 0), w = f(l, n + Xe), S = v > 0 ? v : $ * m, k = n * 2 + Xe;
+  return { teeth: [...a, ...w], width: S, height: k };
+}
+function Je(t, n) {
+  switch (n) {
+    case "universal":
+      return jt[t] ?? t;
+    case "palmer":
+      return Ft[t] ?? t;
+    case "fdi":
+    default:
+      return t;
+  }
+}
+function mn() {
+  return {};
+}
+function et(t) {
+  const n = {};
+  for (const [i, r] of Object.entries(t))
+    !r || r.length === 0 || (n[i] = { conditions: r, surfaces: [] });
+  return n;
+}
+const Vt = Y(
+  [
+    "ds:tooth-scheme-alfadocs",
+    "ds:flex ds:flex-col",
+    "ds:gap-[var(--spacing-sm)]",
+    "ds:bg-[var(--background)] ds:text-[var(--foreground)]",
+    // Block-level flex column so the SVG's w-full can grow to fill the frame.
+    // min-w-fit on the SVG floors it at natural size, so narrow frames scroll
+    // here rather than shrinking the per-tooth hit target below the 44px floor.
+    "ds:max-w-full ds:overflow-x-auto",
+    // When the scroll container itself is the tab stop (display mode, see
+    // scrollTabIndex) it needs a focus ring. Use an outline (not box-shadow):
+    // forced-colors / high-contrast mode zeroes box-shadow, which would leave
+    // HCM keyboard users with no visible focus. outline survives, and the
+    // CanvasText fallback repaints it in the system palette.
+    "ds:outline-none",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-visible:outline-[CanvasText]"
+  ].join(" ")
+), Yt = Y(
+  [
+    "ds:block",
+    "ds:w-full ds:min-w-fit ds:h-auto",
+    "ds:text-[var(--foreground)]"
+  ].join(" ")
+), zt = Y(
+  [
+    "ds:group ds:cursor-pointer",
+    "ds:focus:outline-none",
+    "ds:transition-[fill,stroke,opacity] ds:duration-[var(--animation-duration)]",
+    "ds:motion-reduce:transition-none"
+  ].join(" ")
+), Bt = Y(
+  [
+    "ds:flex ds:flex-wrap ds:items-center",
+    "ds:gap-[var(--spacing-sm)]",
+    "type-meta ds:text-[var(--muted-foreground)]"
+  ].join(" ")
+), Kt = Y(
+  ["ds:inline-flex ds:items-center", "ds:gap-[var(--spacing-xs)]"].join(" ")
+), Gt = Y(["ds:sr-only"].join(" ")), Qt = Y(
+  [
+    "ds:cursor-pointer ds:outline-none",
+    "ds:fill-transparent ds:stroke-transparent",
+    "ds:transition-[fill] ds:duration-[var(--animation-duration)]",
+    "ds:motion-reduce:transition-none",
+    "ds:hover:fill-[color-mix(in_srgb,var(--accent)_18%,transparent)]",
+    "ds:focus-visible:fill-[color-mix(in_srgb,var(--accent)_22%,transparent)]",
+    "ds:focus-visible:stroke-[var(--ring)]",
+    "ds:forced-colors:focus-visible:stroke-[CanvasText]"
+  ].join(" ")
+);
+function ke(t) {
+  return t.value !== void 0;
+}
+function le() {
+  return { conditions: [], surfaces: [] };
+}
+function tt(t, n) {
+  const i = t ?? [];
+  return n ? i.includes(n) ? i.filter((r) => r !== n) : [...i, n] : i.length === 0 ? ["caries"] : [];
+}
+function Xt(t, n, i) {
+  var l;
+  return i ? ((l = {
+    top: { ArrowDown: "center" },
+    bottom: { ArrowUp: "center" },
+    left: { ArrowRight: "center" },
+    right: { ArrowLeft: "center" },
+    center: {
+      ArrowUp: "top",
+      ArrowDown: "bottom",
+      ArrowLeft: "left",
+      ArrowRight: "right"
+    }
+  }[t]) == null ? void 0 : l[n]) ?? t : n === "ArrowUp" ? "top" : n === "ArrowDown" ? "bottom" : n === "ArrowLeft" ? "left" : n === "ArrowRight" ? "right" : t;
+}
+const Jt = [
+  "caries",
+  "filled",
+  "crowned",
+  "temporaryCrown",
+  "bridge",
+  "rootCanal",
+  "implant",
+  "implantExtraction",
+  "stub",
+  "destroyed",
+  "missing"
+];
+function en({
+  condition: t,
+  assetBaseUrl: n
+}) {
+  const i = F[16], r = De[t], l = t === "missing", m = t === "caries" || t === "filled", $ = 36 * 0.9, v = 62 * 0.9, f = (36 - $) / 2, a = (62 - v) / 2;
+  return /* @__PURE__ */ j(
+    "svg",
+    {
+      width: "22",
+      height: "38",
+      viewBox: "0 0 36 62",
+      "aria-hidden": "true",
+      className: "ds:block ds:shrink-0",
+      children: [
+        /* @__PURE__ */ u(
+          "image",
+          {
+            href: it(i, n),
+            x: f,
+            y: a,
+            width: $,
+            height: v,
+            preserveAspectRatio: "xMidYMid meet",
+            opacity: l ? 0.25 : 1
+          }
+        ),
+        r ? /* @__PURE__ */ u(
+          "image",
+          {
+            href: rt(i, n, r),
+            x: f,
+            y: a,
+            width: $,
+            height: v,
+            preserveAspectRatio: "xMidYMid meet"
+          }
+        ) : null,
+        m ? /* @__PURE__ */ u(
+          "rect",
+          {
+            x: 3,
+            y: 2,
+            width: 30,
+            height: 58,
+            fill: "none",
+            stroke: ue[t],
+            strokeWidth: 2,
+            strokeDasharray: t === "filled" ? "4 2" : void 0,
+            rx: 6
+          }
+        ) : null,
+        l ? /* @__PURE__ */ u(
+          "path",
+          {
+            d: "M7 9 L29 53 M29 9 L7 53",
+            stroke: ue.missing,
+            strokeWidth: 2,
+            fill: "none"
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function tn({ assetBaseUrl: t }) {
+  const { t: n } = nt();
+  return /* @__PURE__ */ j(
+    "section",
+    {
+      "aria-label": n("toothScheme.legendLabel"),
+      "data-testid": "tooth-scheme-legend",
+      className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:rounded-[var(--radius-md)] ds:bg-[var(--card)] ds:border ds:border-[color:var(--card-border)] ds:p-[var(--spacing-sm)] ds:shadow-[var(--shadow-card)] ds:[.theme-accessible_&]:border-2",
+      children: [
+        /* @__PURE__ */ u("span", { className: "type-eyebrow ds:text-[color:var(--muted-foreground)]", children: n("toothScheme.legendLabel") }),
+        /* @__PURE__ */ u("ul", { className: Bt(), children: Jt.map((i) => /* @__PURE__ */ j(
+          "li",
+          {
+            className: Kt(),
+            "data-condition": i,
+            "data-testid": `tooth-scheme-legend-item-${i}`,
+            children: [
+              /* @__PURE__ */ u(en, { condition: i, assetBaseUrl: t }),
+              /* @__PURE__ */ u("span", { children: n(`toothScheme.condition.${i}`) })
+            ]
+          },
+          i
+        )) })
+      ]
+    }
+  );
+}
+function Oe({
+  label: t,
+  value: n,
+  options: i,
+  onValueChange: r,
+  container: l
+}) {
+  return /* @__PURE__ */ j("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)]", children: [
+    /* @__PURE__ */ u(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "type-label ds:text-[color:var(--muted-foreground)]",
+        children: t
+      }
+    ),
+    /* @__PURE__ */ u(
+      kt,
+      {
+        size: "md",
+        "aria-label": t,
+        value: n,
+        options: i,
+        onValueChange: r,
+        container: l
+      }
+    )
+  ] });
+}
+const st = Tt(
+  ({
+    id: t,
+    dentition: n = "permanent",
+    numbering: i = "fdi",
+    mode: r = "interactive",
+    projection: l = "side",
+    value: m,
+    defaultValue: $,
+    onChange: v,
+    onSelect: f,
+    conditions: a,
+    activeCondition: w,
+    assetBaseUrl: S = "/toothscheme/teeth",
+    legend: k = !1,
+    controls: g = !1,
+    ariaLabel: O,
+    className: M
+  }, fe) => {
+    const { t: d } = nt(), [he, re] = H(n), [at, Ne] = H(i), [ct, Re] = H(l), [dt, _e] = H(k), [me, lt] = H(null), G = g ? he : n, Q = g ? at : i, Ee = g ? dt : k, oe = g ? ct : l, W = oe === "plan" ? "plan" : "side", je = oe === "both", Fe = de(g);
+    ne(() => {
+      g && !Fe.current && (re(n), Ne(i), Re(l), _e(k)), Fe.current = g;
+    }, [g, n, i, l, k]);
+    const [ut, He] = H(() => m !== void 0 ? m : $ !== void 0 ? $ : a ? et(a) : {}), p = ke({ value: m }) ? m : ut;
+    ne(() => {
+      ke({ value: m }) || a !== void 0 && He(et(a));
+    }, [a, m]);
+    const N = W === "plan" ? 44 : ot, X = Te(
+      () => Zt(G, N),
+      [G, N]
+    ), Z = Te(() => X.teeth.map((e) => e.fdi), [X]), pe = Z[0], [ie, z] = H(pe);
+    ne(() => {
+      (!ie || !Z.includes(ie)) && z(pe);
+    }, [pe, ie, Z]);
+    const [ft, B] = H(""), ge = de(null), A = E(
+      (e) => {
+        ke({ value: m }) || He(e), v == null || v(e);
+      },
+      [v, m]
+    ), R = E((e) => {
+      const o = ge.current;
+      if (!o) return;
+      const s = o.querySelector(`g[data-fdi="${e}"]`);
+      s && (s.focus(), z(e));
+    }, []), _ = W === "plan" && r === "interactive" && (w === "caries" || w === "filled"), [T, J] = H(null);
+    ne(() => {
+      (!_ || T && !Z.includes(T.fdi)) && J(null);
+    }, [_, T, Z]);
+    const qe = E((e, o) => {
+      var c;
+      const s = (c = ge.current) == null ? void 0 : c.querySelector(
+        `path[data-fdi="${e}"][data-zone="${o}"]`
+      );
+      s == null || s.focus();
+    }, []), ve = de(null);
+    ne(() => {
+      T ? qe(T.fdi, T.zone) : ve.current && R(ve.current.fdi), ve.current = T;
+    }, [T, qe, R]);
+    const ht = E(
+      (e, o) => {
+        const s = p[e];
+        return !!(s && s.surfaces.includes(o) && s.conditions.includes(w));
+      },
+      [p, w]
+    ), We = E(
+      (e, o) => {
+        o && o.conditions.length > 0 ? B(
+          d("toothScheme.selected", {
+            id: e,
+            conditions: o.conditions.map((s) => d(`toothScheme.condition.${s}`)).join(", ")
+          })
+        ) : B(d("toothScheme.deselected", { id: e }));
+      },
+      [d]
+    ), be = E(
+      (e, o) => {
+        if (!_) return;
+        const s = w, c = p[e] ?? le(), x = c.surfaces.includes(o), L = c.conditions.includes(s);
+        let b, y;
+        x && L ? (b = c.surfaces.filter((V) => V !== o), y = b.length === 0 ? c.conditions.filter((V) => V !== s) : c.conditions) : (b = x ? c.surfaces : [...c.surfaces, o], y = L ? c.conditions : [...c.conditions, s]);
+        const I = { ...p };
+        y.length === 0 && b.length === 0 ? delete I[e] : I[e] = { ...c, conditions: y, surfaces: b }, A(I), We(e, I[e]), f == null || f(e);
+      },
+      [
+        _,
+        w,
+        p,
+        A,
+        We,
+        f
+      ]
+    ), we = E((e) => {
+      const o = F[e];
+      o && (z(e), J({ fdi: e, zone: Le(o)[0] }));
+    }, []), mt = E(
+      (e, o, s) => {
+        const c = F[o];
+        if (c)
+          switch (e.key) {
+            case "ArrowUp":
+            case "ArrowDown":
+            case "ArrowLeft":
+            case "ArrowRight": {
+              e.preventDefault(), e.stopPropagation();
+              const x = Le(c).includes("center"), L = Xt(s, e.key, x);
+              L !== s && J({ fdi: o, zone: L });
+              return;
+            }
+            case " ":
+            case "Enter": {
+              e.preventDefault(), e.stopPropagation(), be(o, Ge(c, s));
+              return;
+            }
+            case "Escape": {
+              e.preventDefault(), e.stopPropagation(), J(null);
+              return;
+            }
+            default:
+              return;
+          }
+      },
+      [be]
+    ), pt = de(null), ye = Te(
+      () => ({
+        focusTooth: (e) => {
+          R(e);
+        },
+        getChart: () => p,
+        getTooth: (e) => {
+          var o;
+          return ((o = p[e]) == null ? void 0 : o.conditions) ?? [];
+        },
+        teethWith: (e) => Object.entries(p).filter(([, o]) => o.conditions.includes(e)).map(([o]) => o),
+        setFinding: (e, o, s) => {
+          const c = p[e] ?? le();
+          if (c.conditions.includes(o) && !s) return;
+          const x = {
+            ...p,
+            [e]: {
+              ...c,
+              conditions: c.conditions.includes(o) ? c.conditions : [...c.conditions, o],
+              surfaces: s ?? c.surfaces
+            }
+          };
+          A(x);
+        },
+        removeFinding: (e, o) => {
+          const s = p[e];
+          if (!s || !s.conditions.includes(o)) return;
+          const c = s.conditions.filter((L) => L !== o), x = { ...p };
+          c.length === 0 ? delete x[e] : x[e] = { ...s, conditions: c }, A(x);
+        },
+        clearTooth: (e) => {
+          if (!p[e]) return;
+          const o = { ...p };
+          delete o[e], A(o);
+        }
+      }),
+      [p, A, R]
+    );
+    St(fe, () => ye, [ye]), Lt(Ct, ye, t);
+    const gt = E(
+      (e, o) => {
+        var L;
+        if (r !== "interactive") return;
+        const s = F[o];
+        if (!s) return;
+        const c = Z, x = c.indexOf(o);
+        switch (e.key) {
+          case "ArrowRight": {
+            e.preventDefault();
+            const b = Math.min(c.length - 1, x + 1);
+            R(c[b]);
+            return;
+          }
+          case "ArrowLeft": {
+            e.preventDefault();
+            const b = Math.max(0, x - 1);
+            R(c[b]);
+            return;
+          }
+          case "ArrowUp":
+          case "ArrowDown": {
+            e.preventDefault();
+            const y = {
+              1: 4,
+              4: 1,
+              2: 3,
+              3: 2,
+              5: 8,
+              8: 5,
+              6: 7,
+              7: 6
+            }[s.quadrant];
+            if (!y) return;
+            const I = `${y}${s.positionInQuadrant}`;
+            c.includes(I) && R(I);
+            return;
+          }
+          case "Home": {
+            e.preventDefault();
+            const b = c.filter(
+              (y) => F[y].quadrant === s.quadrant
+            );
+            b.length > 0 && R(b[0]);
+            return;
+          }
+          case "End": {
+            e.preventDefault();
+            const b = c.filter(
+              (y) => F[y].quadrant === s.quadrant
+            );
+            b.length > 0 && R(b[b.length - 1]);
+            return;
+          }
+          case " ":
+          case "Enter": {
+            if (e.preventDefault(), _) {
+              we(o);
+              return;
+            }
+            const b = (L = p[o]) == null ? void 0 : L.conditions, y = tt(b, w), I = { ...p };
+            y.length === 0 ? (delete I[o], B(d("toothScheme.deselected", { id: o }))) : (I[o] = {
+              ...p[o] ?? le(),
+              conditions: y
+            }, B(
+              d("toothScheme.selected", {
+                id: o,
+                conditions: y.map((V) => d(`toothScheme.condition.${V}`)).join(", ")
+              })
+            )), A(I), f == null || f(o);
+            return;
+          }
+          default:
+            return;
+        }
+      },
+      [
+        w,
+        p,
+        A,
+        we,
+        R,
+        r,
+        f,
+        _,
+        d,
+        Z
+      ]
+    ), vt = E(
+      (e) => {
+        var x;
+        if (r !== "interactive") return;
+        z(e);
+        const o = (x = p[e]) == null ? void 0 : x.conditions, s = tt(o, w), c = { ...p };
+        s.length === 0 ? (delete c[e], B(d("toothScheme.deselected", { id: e }))) : (c[e] = {
+          ...p[e] ?? le(),
+          conditions: s
+        }, B(
+          d("toothScheme.selected", {
+            id: e,
+            conditions: s.map((L) => d(`toothScheme.condition.${L}`)).join(", ")
+          })
+        )), A(c), f == null || f(e);
+      },
+      [w, p, A, r, f, d]
+    ), Pe = X.width + 4, Ue = X.height + 4, xe = O ?? d("toothScheme.ariaLabel"), Ze = je ? `${xe} — ${d("toothScheme.view.side")}` : xe, bt = r === "interactive" ? void 0 : 0;
+    return /* @__PURE__ */ u(K.Provider, { delayDuration: 200, children: /* @__PURE__ */ j(
+      "div",
+      {
+        ref: pt,
+        role: "region",
+        "aria-label": Ze,
+        tabIndex: bt,
+        className: [Vt(), M].filter(Boolean).join(" "),
+        "data-component": "tooth-scheme",
+        "data-component-id": t,
+        "data-testid": "tooth-scheme-root",
+        "data-dentition": G,
+        "data-numbering": Q,
+        "data-mode": r,
+        "data-projection": W,
+        "data-view-mode": oe,
+        children: [
+          g ? /* @__PURE__ */ u(
+            "div",
+            {
+              className: "ds:flex ds:w-full ds:justify-end",
+              "data-testid": "tooth-scheme-controls",
+              children: /* @__PURE__ */ j(Se.Root, { children: [
+                /* @__PURE__ */ u(Se.Trigger, { asChild: !0, children: /* @__PURE__ */ u(
+                  It,
+                  {
+                    size: "sm",
+                    intent: "outline",
+                    icon: /* @__PURE__ */ u(At, { "aria-hidden": "true" }),
+                    "aria-label": d("toothScheme.options.label"),
+                    tooltip: d("toothScheme.options.label")
+                  }
+                ) }),
+                /* @__PURE__ */ u(
+                  Se.Content,
+                  {
+                    ref: lt,
+                    align: "end",
+                    size: "md",
+                    "aria-label": d("toothScheme.options.label"),
+                    children: /* @__PURE__ */ j("div", { className: "ds:flex ds:w-[var(--popover-size-sm)] ds:max-w-full ds:flex-col ds:gap-[var(--spacing-md)]", children: [
+                      /* @__PURE__ */ u("div", { className: "ds:flex ds:border-b ds:border-[color:var(--border)] ds:pb-[var(--spacing-sm)] ds:[&>*]:w-full ds:[&>*]:justify-between", children: /* @__PURE__ */ u(
+                        Ot,
+                        {
+                          label: d("toothScheme.options.legend"),
+                          labelSide: "start",
+                          checked: Ee,
+                          onCheckedChange: _e
+                        }
+                      ) }),
+                      /* @__PURE__ */ u(
+                        Oe,
+                        {
+                          container: me,
+                          label: d("toothScheme.options.dentition"),
+                          value: G,
+                          onValueChange: (e) => re(e),
+                          options: [
+                            {
+                              value: "permanent",
+                              label: d("toothScheme.dentition.permanent")
+                            },
+                            {
+                              value: "primary",
+                              label: d("toothScheme.dentition.primary")
+                            },
+                            {
+                              value: "mixed",
+                              label: d("toothScheme.dentition.mixed")
+                            }
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ u(
+                        Oe,
+                        {
+                          container: me,
+                          label: d("toothScheme.options.numbering"),
+                          value: Q,
+                          onValueChange: (e) => Ne(e),
+                          options: [
+                            {
+                              value: "fdi",
+                              label: d("toothScheme.numbering.fdi")
+                            },
+                            {
+                              value: "universal",
+                              label: d("toothScheme.numbering.universal")
+                            },
+                            {
+                              value: "palmer",
+                              label: d("toothScheme.numbering.palmer")
+                            }
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ u(
+                        Oe,
+                        {
+                          container: me,
+                          label: d("toothScheme.options.view"),
+                          value: oe,
+                          onValueChange: (e) => Re(e),
+                          options: [
+                            {
+                              value: "side",
+                              label: d("toothScheme.view.side")
+                            },
+                            {
+                              value: "plan",
+                              label: d("toothScheme.view.occlusal")
+                            },
+                            {
+                              value: "both",
+                              label: d("toothScheme.view.both")
+                            }
+                          ]
+                        }
+                      )
+                    ] })
+                  }
+                )
+              ] })
+            }
+          ) : null,
+          /* @__PURE__ */ u(
+            "svg",
+            {
+              ref: ge,
+              viewBox: `0 0 ${Pe} ${Ue}`,
+              width: Pe,
+              height: Ue,
+              className: Yt(),
+              role: "group",
+              "aria-label": Ze,
+              focusable: "false",
+              "data-testid": "tooth-scheme-svg",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: X.teeth.map((e) => {
+                var Ke;
+                const o = p[e.fdi], s = (Ke = o == null ? void 0 : o.conditions) == null ? void 0 : Ke[0], c = d(
+                  `toothScheme.anatomy.${e.meta.anatomy}`
+                ), x = s ? `, ${d(`toothScheme.condition.${s}`)}` : "", L = d("toothScheme.toothLabel", {
+                  id: Je(e.fdi, Q),
+                  anatomy: c,
+                  conditionSuffix: x
+                }), b = r === "interactive" ? T ? -1 : e.fdi === ie ? 0 : -1 : void 0, y = (o == null ? void 0 : o.conditions) ?? [], I = y.includes("missing"), V = y.map((h) => ({
+                  condition: h,
+                  spec: De[h]
+                })).filter(
+                  (h) => !!h.spec
+                ), $e = y.find(
+                  (h) => h !== "missing" && !De[h]
+                ), Ve = $e ? ue[$e] : void 0, wt = s ? `${c} · ${d(`toothScheme.condition.${s}`)}` : c, Ye = Je(e.fdi, Q), yt = it(
+                  e.meta,
+                  S,
+                  "default",
+                  W
+                ), xt = W === "plan" ? y.flatMap((h) => {
+                  const D = Wt[h];
+                  return D ? ((o == null ? void 0 : o.surfaces) ?? []).map((ce) => ({
+                    key: `${h}-${ce}`,
+                    url: Pt(
+                      e.meta,
+                      S,
+                      D,
+                      ce
+                    )
+                  })) : [];
+                }) : [], ze = (e.meta.dentition === "primary" ? Ht : 1) * 0.9, ee = q * ze, te = N * ze, se = (q - ee) / 2, ae = (N - te) / 2, C = _ && (T == null ? void 0 : T.fdi) === e.fdi, Be = _ ? Le(e.meta) : [], $t = Be.includes("center");
+                return /* @__PURE__ */ j(K.Root, { children: [
+                  /* @__PURE__ */ u(K.Trigger, { asChild: !0, children: /* @__PURE__ */ j(
+                    "g",
+                    {
+                      "data-fdi": e.fdi,
+                      "data-anatomy": e.meta.anatomy,
+                      "data-arch": e.meta.arch,
+                      "data-side": e.meta.side,
+                      "data-quadrant": e.meta.quadrant,
+                      "data-condition": s ?? "none",
+                      "data-testid": `tooth-${e.fdi}`,
+                      transform: `translate(${e.x}, ${e.y})`,
+                      tabIndex: b,
+                      role: C ? "group" : r === "interactive" ? "button" : "img",
+                      "aria-label": L,
+                      "aria-pressed": C ? void 0 : r === "interactive" ? s !== void 0 : void 0,
+                      className: zt(),
+                      onClick: C ? void 0 : r === "interactive" ? _ ? () => we(e.fdi) : () => vt(e.fdi) : void 0,
+                      onFocus: () => z(e.fdi),
+                      onKeyDown: C ? void 0 : (h) => gt(h, e.fdi),
+                      children: [
+                        /* @__PURE__ */ u(
+                          "rect",
+                          {
+                            x: -U,
+                            y: -U,
+                            width: q + U * 2,
+                            height: N + U * 2,
+                            fill: "transparent"
+                          }
+                        ),
+                        /* @__PURE__ */ u(
+                          "image",
+                          {
+                            href: yt,
+                            x: se,
+                            y: ae,
+                            width: ee,
+                            height: te,
+                            preserveAspectRatio: "xMidYMid meet",
+                            opacity: I ? 0.25 : 1,
+                            "aria-hidden": "true"
+                          }
+                        ),
+                        W === "side" ? V.map(({ condition: h, spec: D }) => /* @__PURE__ */ u(
+                          "image",
+                          {
+                            href: rt(
+                              e.meta,
+                              S,
+                              D
+                            ),
+                            x: se,
+                            y: ae,
+                            width: ee,
+                            height: te,
+                            preserveAspectRatio: "xMidYMid meet",
+                            "aria-hidden": "true",
+                            pointerEvents: "none"
+                          },
+                          h
+                        )) : null,
+                        W === "plan" ? xt.map(({ key: h, url: D }) => /* @__PURE__ */ u(
+                          "image",
+                          {
+                            href: D,
+                            x: se,
+                            y: ae,
+                            width: ee,
+                            height: te,
+                            preserveAspectRatio: "xMidYMid meet",
+                            "aria-hidden": "true",
+                            pointerEvents: "none"
+                          },
+                          h
+                        )) : null,
+                        _ ? Be.map((h) => {
+                          const D = Ge(e.meta, h), ce = ht(e.fdi, D);
+                          return /* @__PURE__ */ u(
+                            "path",
+                            {
+                              d: Ut(
+                                h,
+                                { x: se, y: ae, w: ee, h: te },
+                                $t
+                              ),
+                              "data-fdi": e.fdi,
+                              "data-zone": h,
+                              "data-surface": D,
+                              "data-testid": `tooth-${e.fdi}-zone-${h}`,
+                              role: C ? "button" : void 0,
+                              tabIndex: C ? (T == null ? void 0 : T.zone) === h ? 0 : -1 : void 0,
+                              "aria-label": C ? d("toothScheme.toothLabel", {
+                                id: Ye,
+                                anatomy: d(
+                                  `toothScheme.surface.${D}`
+                                ),
+                                conditionSuffix: ""
+                              }) : void 0,
+                              "aria-pressed": C ? ce : void 0,
+                              strokeWidth: "var(--focus-ring-width)",
+                              className: Qt(),
+                              onClick: (P) => {
+                                P.stopPropagation(), C || z(e.fdi), be(e.fdi, D);
+                              },
+                              onKeyDown: C ? (P) => mt(
+                                P,
+                                e.fdi,
+                                h
+                              ) : void 0,
+                              onFocus: C ? () => J(
+                                (P) => P && P.fdi === e.fdi && P.zone === h ? P : { fdi: e.fdi, zone: h }
+                              ) : void 0
+                            },
+                            h
+                          );
+                        }) : null,
+                        W === "side" && Ve ? /* @__PURE__ */ u(
+                          "rect",
+                          {
+                            x: 3,
+                            y: 2,
+                            width: q - 6,
+                            height: N - 4,
+                            fill: "none",
+                            stroke: Ve,
+                            strokeWidth: "2",
+                            strokeDasharray: $e === "filled" ? "4 2" : void 0,
+                            rx: "6",
+                            pointerEvents: "none"
+                          }
+                        ) : null,
+                        I ? /* @__PURE__ */ u(
+                          "path",
+                          {
+                            d: `M7 9 L${q - 7} ${N - 9} M${q - 7} 9 L7 ${N - 9}`,
+                            stroke: ue.missing,
+                            strokeWidth: "2",
+                            fill: "none",
+                            pointerEvents: "none"
+                          }
+                        ) : null,
+                        /* @__PURE__ */ u(
+                          "rect",
+                          {
+                            x: -U,
+                            y: -U,
+                            width: q + U * 2,
+                            height: N + U * 2,
+                            fill: "none",
+                            stroke: "var(--ring)",
+                            strokeWidth: "var(--focus-ring-width)",
+                            className: [
+                              "ds:opacity-0",
+                              "ds:group-focus-visible:opacity-100",
+                              "ds:forced-colors:stroke-[CanvasText]"
+                            ].join(" "),
+                            "data-testid": `tooth-${e.fdi}-focus-ring`,
+                            pointerEvents: "none",
+                            rx: "4"
+                          }
+                        ),
+                        /* @__PURE__ */ u(
+                          "text",
+                          {
+                            x: q / 2,
+                            y: e.meta.arch === "upper" ? N + 12 : -4,
+                            textAnchor: "middle",
+                            fontSize: "10",
+                            fill: "var(--muted-foreground)",
+                            className: "ds:select-none",
+                            "aria-hidden": "true",
+                            children: Ye
+                          }
+                        )
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ u(K.Portal, { children: /* @__PURE__ */ j(
+                    K.Content,
+                    {
+                      side: "top",
+                      sideOffset: 6,
+                      className: "ds:z-[var(--z-tooltip)] ds:rounded-[var(--radius-sm)] ds:bg-[var(--foreground)] ds:text-[var(--background)] ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)] ds:pt-[calc(var(--spacing-xs)/2)] ds:pb-[calc(var(--spacing-xs)/2)] ds:text-[length:var(--font-size-xs)]",
+                      children: [
+                        wt,
+                        /* @__PURE__ */ u(K.Arrow, { className: "ds:fill-[var(--foreground)]" })
+                      ]
+                    }
+                  ) })
+                ] }, e.fdi);
+              })
+            }
+          ),
+          je ? /* @__PURE__ */ u(
+            st,
+            {
+              projection: "plan",
+              dentition: G,
+              numbering: Q,
+              mode: r,
+              value: p,
+              onChange: A,
+              activeCondition: w,
+              assetBaseUrl: S,
+              ariaLabel: `${xe} — ${d("toothScheme.view.occlusal")}`
+            }
+          ) : null,
+          Ee ? /* @__PURE__ */ u(tn, { assetBaseUrl: S }) : null,
+          /* @__PURE__ */ u(
+            "div",
+            {
+              className: Gt(),
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              "data-testid": "tooth-scheme-live",
+              children: ft
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+st.displayName = "ToothScheme";
+export {
+  ue as C,
+  F,
+  Ae as P,
+  qt as S,
+  st as T,
+  Wt as a,
+  De as b,
+  hn as c,
+  Ft as d,
+  jt as e,
+  Ce as f,
+  et as g,
+  rt as h,
+  mn as i,
+  Zt as j,
+  Ct as k,
+  Je as l,
+  Ge as m,
+  Le as n,
+  Vt as r,
+  Pt as s,
+  it as t,
+  Ut as z
+};
+//# sourceMappingURL=tooth-scheme-CiphQaON.js.map