@alfadocs/ui-kit-debug 0.47.0 → 0.48.0

package/dist/_chunks/anamnesis-card-CmkBVAln.js

@@ -0,0 +1,156 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { forwardRef as M, useId as C, useMemo as R } from "react";
+import { c as q } from "./index-D2ZczOXr.js";
+import { useTranslation as z } from "react-i18next";
+import { B as n } from "./badge-zsf5i5bH.js";
+import { C as N } from "./card-DPmk26CL.js";
+import { A as G, b as O, c as Q, a as S } from "./accordion-9lJSMMsZ.js";
+import { D as t } from "./description-list-BEbK2g93.js";
+import { T as w } from "./timestamp-BV2lC-wV.js";
+import { T as y } from "./triangle-alert-CBPUIzQo.js";
+const H = q("ds:w-full ds:text-[color:var(--foreground)]", {
+  variants: {
+    // Matches the kit's other `surface` props. `'elevated'` (default)
+    // wraps in `<Card variant="elevated">`; `'flat'` drops the chrome
+    // for use inside an existing Card / Sheet.
+    surface: {
+      flat: "",
+      elevated: ""
+    }
+  },
+  defaultVariants: { surface: "elevated" }
+}), J = M(
+  ({
+    dateIso: V,
+    createdAtIso: u,
+    formName: T,
+    highlightedAnswerCount: o = 0,
+    status: s,
+    answers: d,
+    surface: p = "elevated",
+    "aria-label": A,
+    id: f,
+    className: D,
+    ...F
+  }, I) => {
+    const { t: a } = z(), h = C(), L = C(), v = T ?? a("anamnesisCard.defaultFormName", { defaultValue: "Medical history" }), B = A ?? v, i = o > 0, c = (s == null ? void 0 : s.expired) === !0, m = (s == null ? void 0 : s.corrupted) === !0, g = (d == null ? void 0 : d.length) ?? 0, x = R(() => !i && !c && !m ? null : /* @__PURE__ */ r(
+      "div",
+      {
+        role: "list",
+        "aria-label": a("anamnesisCard.statusGroupLabel", {
+          defaultValue: "Questionnaire status"
+        }),
+        className: "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-2xs)]",
+        children: [
+          i ? /* @__PURE__ */ e(
+            n,
+            {
+              variant: "error",
+              withDot: !0,
+              leading: /* @__PURE__ */ e(y, { "aria-hidden": "true" }),
+              role: "listitem",
+              children: a("anamnesisCard.status.highlighted", {
+                count: o,
+                defaultValue: "{{count}} flagged answers"
+              })
+            }
+          ) : null,
+          c ? /* @__PURE__ */ e(n, { variant: "warning", withDot: !0, role: "listitem", children: a("anamnesisCard.status.expired", { defaultValue: "Expired" }) }) : null,
+          m ? /* @__PURE__ */ e(n, { variant: "error", withDot: !0, role: "listitem", children: a("anamnesisCard.status.corrupted", {
+            defaultValue: "Corrupted"
+          }) }) : null
+        ]
+      }
+    ), [i, c, m, o, a]), j = /* @__PURE__ */ r("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+      /* @__PURE__ */ r("div", { className: "ds:flex ds:flex-wrap ds:items-start ds:gap-[var(--spacing-sm)]", children: [
+        /* @__PURE__ */ e(
+          "h3",
+          {
+            id: h,
+            className: "type-title-card ds:m-0 ds:text-[color:var(--foreground)]",
+            children: v
+          }
+        ),
+        x ? /* @__PURE__ */ e("div", { className: "ds:ms-auto ds:flex ds:shrink-0 ds:items-center", children: x }) : null
+      ] }),
+      /* @__PURE__ */ r("p", { className: "type-body-sm ds:m-0 ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-xs)] ds:text-[color:var(--muted-foreground)]", children: [
+        /* @__PURE__ */ r("span", { children: [
+          a("anamnesisCard.compiledOn", { defaultValue: "Compiled" }),
+          " ",
+          /* @__PURE__ */ e(w, { value: V, format: "absolute", shape: "bare" })
+        ] }),
+        u ? /* @__PURE__ */ r("span", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)]", children: [
+          /* @__PURE__ */ e("span", { "aria-hidden": "true", children: "·" }),
+          /* @__PURE__ */ r("span", { children: [
+            a("anamnesisCard.submitted", { defaultValue: "Submitted" }),
+            " ",
+            /* @__PURE__ */ e(
+              w,
+              {
+                value: u,
+                format: "relative",
+                shape: "bare"
+              }
+            )
+          ] })
+        ] }) : null
+      ] })
+    ] }), k = g > 0 ? /* @__PURE__ */ e(t, { layout: "stacked", density: "compact", divider: "between", children: d.map((l, E) => /* @__PURE__ */ r(
+      t.Row,
+      {
+        className: l.highlight ? "ds:border ds:border-[color:var(--destructive)] ds:rounded-[var(--radius-sm)] ds:p-[var(--spacing-sm)]" : void 0,
+        children: [
+          /* @__PURE__ */ e(t.Term, { children: /* @__PURE__ */ r("span", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)]", children: [
+            /* @__PURE__ */ e("span", { children: l.question }),
+            l.highlight ? /* @__PURE__ */ e(
+              n,
+              {
+                variant: "error",
+                size: "sm",
+                withDot: !0,
+                leading: /* @__PURE__ */ e(y, { "aria-hidden": "true" }),
+                "aria-label": a("anamnesisCard.answerFlagLabel", {
+                  defaultValue: "Flagged answer"
+                })
+              }
+            ) : null
+          ] }) }),
+          /* @__PURE__ */ e(t.Detail, { children: l.answer })
+        ]
+      },
+      E
+    )) }) : /* @__PURE__ */ e("p", { className: "type-body-sm ds:m-0 ds:text-[color:var(--muted-foreground)]", children: a("anamnesisCard.empty", {
+      defaultValue: "No answers were recorded."
+    }) }), b = /* @__PURE__ */ r("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: [
+      j,
+      /* @__PURE__ */ e(G, { type: "single", collapsible: !0, variant: "separated", children: /* @__PURE__ */ r(O, { value: L, children: [
+        /* @__PURE__ */ e(Q, { children: a("anamnesisCard.interviewToggle", {
+          count: g,
+          defaultValue: "Interview ({{count}} answers)"
+        }) }),
+        /* @__PURE__ */ e(S, { children: k })
+      ] }) })
+    ] });
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        ref: I,
+        role: "region",
+        "aria-label": B,
+        "aria-labelledby": h,
+        "data-component": "anamnesis-card",
+        "data-component-id": f,
+        "data-has-flags": i || void 0,
+        id: f,
+        className: H({ surface: p, className: D }),
+        ...F,
+        children: p === "elevated" ? /* @__PURE__ */ e(N, { variant: "elevated", children: /* @__PURE__ */ e(N.Body, { children: b }) }) : b
+      }
+    );
+  }
+);
+J.displayName = "AnamnesisCard";
+export {
+  J as A
+};
+//# sourceMappingURL=anamnesis-card-CmkBVAln.js.map

package/dist/_chunks/anamnesis-card-CmkBVAln.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"anamnesis-card-CmkBVAln.js","sources":["../../src/components/anamnesis-card/anamnesis-card.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useMemo,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { AlertTriangle } from 'lucide-react';\nimport { Badge } from '../badge/badge';\nimport { Card } from '../card/card';\nimport {\n  Accordion,\n  AccordionItem,\n  AccordionTrigger,\n  AccordionContent,\n} from '../accordion/accordion';\nimport { DescriptionList } from '../description-list/description-list';\nimport { Timestamp } from '../timestamp/timestamp';\n\n/* -------------------------------------------------------------------- */\n/* AnamnesisCard                                                          */\n/*                                                                        */\n/* A completed medical-history questionnaire (anamnesi) rendered as a     */\n/* collapsible interview. Replaces the bespoke \"scheda anamnestica\"       */\n/* cards every clinical surface composes by hand: a header summarising    */\n/* the form (compiled date, form name) with status chips, and a          */\n/* collapsible body listing each question/answer pair as a               */\n/* DescriptionList (dt = question, dd = answer).                          */\n/*                                                                        */\n/* The clinical red-flag count (`highlightedAnswerCount`) is the most     */\n/* prominent signal: an `error` Badge carrying a NON-colour cue           */\n/* (warning glyph + dot) so colour-blind clinicians still read it. The    */\n/* expired / corrupted statuses surface as warning / error chips beside   */\n/* it. Per-answer `highlight` flags emphasise the matching rows inside    */\n/* the interview.                                                         */\n/*                                                                        */\n/* All visible text flows through `useTranslation('ui')` against the      */\n/* `anamnesisCard.*` namespace. Consumers pass IDENTIFIERS + structural   */\n/* data; the kit owns the chrome + i18n. No PHI lives in the agent layer. */\n/* -------------------------------------------------------------------- */\n\n/* -------------------------------------------------------------------- */\n/* CVA — root                                                             */\n/* -------------------------------------------------------------------- */\n\nconst rootVariants = cva('ds:w-full ds:text-[color:var(--foreground)]', {\n  variants: {\n    // Matches the kit's other `surface` props. `'elevated'` (default)\n    // wraps in `<Card variant=\"elevated\">`; `'flat'` drops the chrome\n    // for use inside an existing Card / Sheet.\n    surface: {\n      flat: '',\n      elevated: '',\n    },\n  },\n  defaultVariants: { surface: 'elevated' },\n});\n\n/* -------------------------------------------------------------------- */\n/* Public types                                                           */\n/* -------------------------------------------------------------------- */\n\nexport interface AnamnesisCardAnswer {\n  /** The questionnaire question text. Rendered as the `<dt>` term. */\n  question: string;\n  /** The patient's recorded answer. Rendered as the `<dd>` detail. */\n  answer: ReactNode;\n  /**\n   * Marks this row as a clinical red-flag answer. Highlighted rows render\n   * a `bordered` divider + an inline-end warning chip so they stand out\n   * within the interview body — with the warning glyph carrying the cue,\n   * not colour alone.\n   */\n  highlight?: boolean;\n}\n\nexport interface AnamnesisCardStatus {\n  /** The questionnaire is past its validity window — surfaces a warning chip. */\n  expired?: boolean;\n  /** The submission is corrupted / incomplete — surfaces an error chip. */\n  corrupted?: boolean;\n}\n\nexport interface AnamnesisCardProps extends Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'aria-label' | 'children' | 'title'\n> {\n  /**\n   * The questionnaire's compiled / reference date as an ISO-8601 string.\n   * Rendered as an absolute `<Timestamp>` in the header.\n   */\n  dateIso: string;\n  /**\n   * Optional submission / creation timestamp as an ISO-8601 string.\n   * Rendered as a relative `<Timestamp>` caption beneath the heading.\n   */\n  createdAtIso?: string;\n  /**\n   * Form / template name (e.g. \"Anamnesi generale\"). When omitted, a\n   * localised generic heading is used.\n   */\n  formName?: string;\n  /**\n   * Count of answers flagged as clinical red-flags. When `> 0`, renders\n   * the prominent `error` Badge with a warning glyph + colour-blind dot.\n   * Omit / `0` hides the chip.\n   */\n  highlightedAnswerCount?: number;\n  /** Lifecycle / integrity status — drives the warning / error chips. */\n  status?: AnamnesisCardStatus;\n  /**\n   * The question/answer pairs. Rendered inside the collapsible interview\n   * as a `<DescriptionList>` (dt = question, dd = answer). When empty or\n   * omitted, the interview shows a localised \"no answers\" line.\n   */\n  answers?: AnamnesisCardAnswer[];\n  /**\n   * `'elevated'` (default) wraps in `<Card variant=\"elevated\">`. `'flat'`\n   * drops the Card — use inside another card / sheet.\n   */\n  surface?: 'flat' | 'elevated';\n\n  /* ----- a11y ----- */\n\n  /** Override the default region aria-label. */\n  'aria-label'?: string;\n  /** Agent-readiness consumer id, surfaced as `data-component-id`. */\n  id?: string;\n}\n\n/* -------------------------------------------------------------------- */\n/* Component                                                              */\n/* -------------------------------------------------------------------- */\n\nexport const AnamnesisCard = forwardRef<HTMLDivElement, AnamnesisCardProps>(\n  (\n    {\n      dateIso,\n      createdAtIso,\n      formName,\n      highlightedAnswerCount = 0,\n      status,\n      answers,\n      surface = 'elevated',\n      'aria-label': ariaLabel,\n      id,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n    const headingId = useId();\n    const accordionItemValue = useId();\n\n    const resolvedFormName =\n      formName ??\n      t('anamnesisCard.defaultFormName', { defaultValue: 'Medical history' });\n    const resolvedAriaLabel = ariaLabel ?? resolvedFormName;\n\n    const hasFlags = highlightedAnswerCount > 0;\n    const isExpired = status?.expired === true;\n    const isCorrupted = status?.corrupted === true;\n\n    const answerCount = answers?.length ?? 0;\n\n    // Chip strip — the red-flag count first (most prominent), then the\n    // integrity statuses. Each carries a non-colour cue (glyph / dot) so\n    // colour-blind clinicians read the signal without relying on hue.\n    const statusChips = useMemo<ReactNode>(() => {\n      if (!hasFlags && !isExpired && !isCorrupted) return null;\n      return (\n        <div\n          role=\"list\"\n          aria-label={t('anamnesisCard.statusGroupLabel', {\n            defaultValue: 'Questionnaire status',\n          })}\n          className=\"ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-2xs)]\"\n        >\n          {hasFlags ? (\n            <Badge\n              variant=\"error\"\n              withDot\n              leading={<AlertTriangle aria-hidden=\"true\" />}\n              role=\"listitem\"\n            >\n              {t('anamnesisCard.status.highlighted', {\n                count: highlightedAnswerCount,\n                defaultValue: '{{count}} flagged answers',\n              })}\n            </Badge>\n          ) : null}\n          {isExpired ? (\n            <Badge variant=\"warning\" withDot role=\"listitem\">\n              {t('anamnesisCard.status.expired', { defaultValue: 'Expired' })}\n            </Badge>\n          ) : null}\n          {isCorrupted ? (\n            <Badge variant=\"error\" withDot role=\"listitem\">\n              {t('anamnesisCard.status.corrupted', {\n                defaultValue: 'Corrupted',\n              })}\n            </Badge>\n          ) : null}\n        </div>\n      );\n    }, [hasFlags, isExpired, isCorrupted, highlightedAnswerCount, t]);\n\n    const header = (\n      <div className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]\">\n        <div className=\"ds:flex ds:flex-wrap ds:items-start ds:gap-[var(--spacing-sm)]\">\n          <h3\n            id={headingId}\n            className=\"type-title-card ds:m-0 ds:text-[color:var(--foreground)]\"\n          >\n            {resolvedFormName}\n          </h3>\n          {statusChips ? (\n            <div className=\"ds:ms-auto ds:flex ds:shrink-0 ds:items-center\">\n              {statusChips}\n            </div>\n          ) : null}\n        </div>\n        <p className=\"type-body-sm ds:m-0 ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-xs)] ds:text-[color:var(--muted-foreground)]\">\n          <span>\n            {t('anamnesisCard.compiledOn', { defaultValue: 'Compiled' })}{' '}\n            <Timestamp value={dateIso} format=\"absolute\" shape=\"bare\" />\n          </span>\n          {createdAtIso ? (\n            <span className=\"ds:flex ds:items-center ds:gap-[var(--spacing-xs)]\">\n              <span aria-hidden=\"true\">·</span>\n              <span>\n                {t('anamnesisCard.submitted', { defaultValue: 'Submitted' })}{' '}\n                <Timestamp\n                  value={createdAtIso}\n                  format=\"relative\"\n                  shape=\"bare\"\n                />\n              </span>\n            </span>\n          ) : null}\n        </p>\n      </div>\n    );\n\n    const interview =\n      answerCount > 0 ? (\n        <DescriptionList layout=\"stacked\" density=\"compact\" divider=\"between\">\n          {answers!.map((row, index) => (\n            <DescriptionList.Row\n              key={index}\n              className={\n                row.highlight\n                  ? 'ds:border ds:border-[color:var(--destructive)] ds:rounded-[var(--radius-sm)] ds:p-[var(--spacing-sm)]'\n                  : undefined\n              }\n            >\n              <DescriptionList.Term>\n                <span className=\"ds:flex ds:items-center ds:gap-[var(--spacing-xs)]\">\n                  <span>{row.question}</span>\n                  {row.highlight ? (\n                    <Badge\n                      variant=\"error\"\n                      size=\"sm\"\n                      withDot\n                      leading={<AlertTriangle aria-hidden=\"true\" />}\n                      aria-label={t('anamnesisCard.answerFlagLabel', {\n                        defaultValue: 'Flagged answer',\n                      })}\n                    />\n                  ) : null}\n                </span>\n              </DescriptionList.Term>\n              <DescriptionList.Detail>{row.answer}</DescriptionList.Detail>\n            </DescriptionList.Row>\n          ))}\n        </DescriptionList>\n      ) : (\n        <p className=\"type-body-sm ds:m-0 ds:text-[color:var(--muted-foreground)]\">\n          {t('anamnesisCard.empty', {\n            defaultValue: 'No answers were recorded.',\n          })}\n        </p>\n      );\n\n    const inner = (\n      <div className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-md)]\">\n        {header}\n        <Accordion type=\"single\" collapsible variant=\"separated\">\n          <AccordionItem value={accordionItemValue}>\n            <AccordionTrigger>\n              {t('anamnesisCard.interviewToggle', {\n                count: answerCount,\n                defaultValue: 'Interview ({{count}} answers)',\n              })}\n            </AccordionTrigger>\n            <AccordionContent>{interview}</AccordionContent>\n          </AccordionItem>\n        </Accordion>\n      </div>\n    );\n\n    return (\n      <div\n        ref={ref}\n        role=\"region\"\n        aria-label={resolvedAriaLabel}\n        aria-labelledby={headingId}\n        data-component=\"anamnesis-card\"\n        data-component-id={id}\n        data-has-flags={hasFlags || undefined}\n        id={id}\n        className={rootVariants({ surface, className })}\n        {...rest}\n      >\n        {surface === 'elevated' ? (\n          <Card variant=\"elevated\">\n            <Card.Body>{inner}</Card.Body>\n          </Card>\n        ) : (\n          inner\n        )}\n      </div>\n    );\n  },\n);\n\nAnamnesisCard.displayName = 'AnamnesisCard';\n\nexport type AnamnesisCardSurface = NonNullable<\n  VariantProps<typeof rootVariants>['surface']\n>;\n"],"names":["rootVariants","cva","AnamnesisCard","forwardRef","dateIso","createdAtIso","formName","highlightedAnswerCount","status","answers","surface","ariaLabel","id","className","rest","ref","t","useTranslation","headingId","useId","accordionItemValue","resolvedFormName","resolvedAriaLabel","hasFlags","isExpired","isCorrupted","answerCount","statusChips","useMemo","jsxs","jsx","Badge","AlertTriangle","header","Timestamp","interview","DescriptionList","row","index","inner","Accordion","AccordionItem","AccordionTrigger","AccordionContent","Card"],"mappings":"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"}

package/dist/_chunks/appointment-tray-BwDHhWWC.js

@@ -0,0 +1,419 @@
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as $, useRef as K, useImperativeHandle as Y, useMemo as J } from "react";
+import { c as H } from "./index-D2ZczOXr.js";
+import { useTranslation as G } from "react-i18next";
+import { I as Q } from "./icon-button-CKEOrN37.js";
+import { S as X } from "./skeleton-CZbwyJAA.js";
+import { E as Z } from "./empty-state-BLy7tigq.js";
+import { A as U } from "./avatar-BNQNhoyL.js";
+import { B as P } from "./badge-zsf5i5bH.js";
+import { T as ee } from "./tag-CdA0s_VV.js";
+import { T as ae } from "./timestamp-BV2lC-wV.js";
+import { T as se } from "./transaction-chip-BZCa6XDn.js";
+import { i as re } from "./is-safe-url-DkETxeHz.js";
+import { V as te } from "./video-BAeICxCT.js";
+import { M as ne } from "./map-pin-B8STOPMJ.js";
+import { c as q, a as oe } from "./entity-card-COhmqHly.js";
+import { S as ie } from "./star-vav0SJ9e.js";
+import { G as de } from "./globe-BkEFMNSg.js";
+import { C as le } from "./chevron-right-BrpYejk0.js";
+import { u as ce } from "./registry-nPAVE19X.js";
+import { C as pe } from "./calendar-days-C4BmpCZg.js";
+import { P as me } from "./plus-CYKNmfuA.js";
+const ue = {
+  "var(--color-violet-500)": "ds:bg-[var(--color-violet-500)]",
+  "var(--color-purple-500)": "ds:bg-[var(--color-purple-500)]",
+  "var(--color-magenta-500)": "ds:bg-[var(--color-magenta-500)]",
+  "var(--color-blue-500)": "ds:bg-[var(--color-blue-500)]",
+  "var(--color-green-500)": "ds:bg-[var(--color-green-500)]",
+  "var(--color-red-500)": "ds:bg-[var(--color-red-500)]",
+  "var(--color-yellow-500)": "ds:bg-[var(--color-yellow-500)]",
+  "var(--color-indigo-500)": "ds:bg-[var(--color-indigo-500)]",
+  "var(--color-orange-500)": "ds:bg-[var(--color-orange-500)]",
+  "var(--color-fuchsia-500)": "ds:bg-[var(--color-fuchsia-500)]",
+  "var(--color-grey-700)": "ds:bg-[var(--color-grey-700)]"
+};
+function fe(e) {
+  return ue[q(e)] ?? "ds:bg-[var(--color-grey-700)]";
+}
+const ge = H(
+  [
+    "ds:relative ds:flex ds:items-start ds:gap-[var(--spacing-sm)]",
+    "ds:rounded-[var(--radius-md)]",
+    "ds:text-start ds:group",
+    "ds:bg-[var(--card)] ds:text-[color:var(--card-foreground)]",
+    "ds:transition-colors ds:duration-[var(--animation-duration)]",
+    "ds:motion-reduce:transition-none",
+    "ds:forced-colors:border ds:forced-colors:border-[CanvasText]"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:p-[var(--spacing-sm)]",
+        md: "ds:p-[var(--spacing-md)]"
+      },
+      interactive: {
+        true: "ds:hover:bg-[color:var(--muted)]/40 ds:cursor-pointer",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "sm",
+      interactive: !1
+    }
+  }
+), B = [
+  "ds:focus-visible:outline-none",
+  "ds:after:content-[''] ds:after:absolute ds:after:inset-0 ds:after:rounded-[var(--radius-md)]",
+  "ds:after:pointer-events-auto",
+  "ds:focus-visible:after:outline-[length:var(--focus-ring-width)]",
+  "ds:focus-visible:after:outline-solid",
+  "ds:focus-visible:after:outline-[color:var(--ring)]",
+  "ds:focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:forced-colors:focus-visible:after:outline-[CanvasText]"
+].join(" "), ve = {
+  inPractice: ne,
+  telehealth: te
+}, F = $(
+  ({
+    item: e,
+    size: i = "sm",
+    locale: b,
+    currency: x = "EUR",
+    onActivate: o,
+    className: I,
+    ...R
+  }, l) => {
+    var h, w, t, y, z, V, E, j, L, A, M, _, D;
+    const { t: r } = G(), m = !!o, N = !!e.url && re(e.url), v = ((h = e.patient) == null ? void 0 : h.name) ?? r("appointmentCard.noPatient"), c = (w = e.operator) == null ? void 0 : w.name, C = r(`appointmentCard.state.${e.state}`), k = i === "md" ? "md" : "sm", S = ve[e.type], p = r("appointmentCard.itemLabel", {
+      patient: v,
+      state: C
+    }), u = /* @__PURE__ */ a("span", { className: "ds:min-w-0 ds:truncate type-title-item ds:text-[color:var(--foreground)]", children: v });
+    let f;
+    m && N ? f = /* @__PURE__ */ a(
+      "a",
+      {
+        href: e.url,
+        "aria-label": p,
+        className: B + " ds:contents",
+        onClick: (n) => {
+          n.defaultPrevented || n.metaKey || n.ctrlKey || n.shiftKey || o == null || o(e);
+        },
+        children: u
+      }
+    ) : m ? f = /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        "aria-label": p,
+        className: B + " ds:contents ds:bg-transparent ds:border-0 ds:p-0 ds:text-start",
+        onClick: () => o == null ? void 0 : o(e),
+        children: u
+      }
+    ) : f = u;
+    const T = (e.treatments ?? []).map((n, O) => {
+      const W = n.elements && n.elements.length > 0 ? r("appointmentCard.treatmentWithElements", {
+        care: n.careName,
+        elements: n.elements.join(", ")
+      }) : n.careName;
+      return /* @__PURE__ */ a(
+        ee,
+        {
+          label: W,
+          variant: "neutral",
+          fill: "outline",
+          size: "sm",
+          maxInlineSize: "12rem"
+        },
+        `${n.careName}-${O}`
+      );
+    }), d = (t = e.bookingReason) == null ? void 0 : t.advanceAmountCents, g = typeof d == "number" && d > 0;
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        ref: l,
+        role: "listitem",
+        "data-component": "appointment-card",
+        "data-component-id": e.id,
+        "data-state": e.state,
+        "data-type": e.type,
+        className: ge({ size: i, interactive: m, className: I }),
+        ...R,
+        children: [
+          /* @__PURE__ */ s("span", { className: "ds:flex ds:w-16 ds:shrink-0 ds:flex-col ds:items-start ds:gap-[var(--spacing-2xs)]", children: [
+            /* @__PURE__ */ s("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] ds:text-[color:var(--muted-foreground)]", children: [
+              /* @__PURE__ */ a(S, { "aria-hidden": "true", className: "ds:size-3.5 ds:shrink-0" }),
+              /* @__PURE__ */ a("span", { className: "ds:sr-only", children: r(`appointmentCard.type.${e.type}`) }),
+              /* @__PURE__ */ a(
+                ae,
+                {
+                  value: e.startIso,
+                  format: "absolute",
+                  shape: "bare",
+                  locale: b,
+                  absoluteFormat: { hour: "numeric", minute: "2-digit" },
+                  className: "type-body-sm ds:font-medium ds:text-[color:var(--foreground)] ds:tabular-nums"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ a("span", { className: "type-eyebrow ds:text-[color:var(--muted-foreground)]", children: r("appointmentCard.duration", { count: e.durationMin }) })
+          ] }),
+          c ? /* @__PURE__ */ s("span", { className: "ds:relative ds:shrink-0", children: [
+            /* @__PURE__ */ a(
+              U,
+              {
+                name: c,
+                color: q((y = e.operator) == null ? void 0 : y.colorId),
+                size: k,
+                "aria-hidden": "true",
+                role: "presentation",
+                "aria-label": void 0
+              }
+            ),
+            /* @__PURE__ */ a(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "ds:absolute ds:bottom-0 ds:end-0 ds:size-2.5 ds:rounded-[var(--radius-full)] ds:border ds:border-[color:var(--card)] " + fe((z = e.operator) == null ? void 0 : z.colorId)
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ s("div", { className: "ds:flex-1 ds:min-w-0 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+            /* @__PURE__ */ s("div", { className: "ds:flex ds:items-start ds:gap-[var(--spacing-sm)]", children: [
+              /* @__PURE__ */ s("div", { className: "ds:flex-1 ds:min-w-0 ds:flex ds:items-center ds:gap-[var(--spacing-xs)]", children: [
+                (V = e.patient) != null && V.avatarUrl ? /* @__PURE__ */ a(
+                  U,
+                  {
+                    name: v,
+                    src: e.patient.avatarUrl,
+                    size: k,
+                    className: "ds:shrink-0",
+                    "aria-hidden": "true",
+                    role: "presentation",
+                    "aria-label": void 0
+                  }
+                ) : null,
+                f
+              ] }),
+              /* @__PURE__ */ a(
+                P,
+                {
+                  variant: oe(e.state),
+                  size: "sm",
+                  withDot: !0,
+                  className: "ds:shrink-0",
+                  children: C
+                }
+              )
+            ] }),
+            c || e.chair || (E = e.bookingReason) != null && E.specialty || e.firstVisit === "yes" ? /* @__PURE__ */ s("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-x-[var(--spacing-sm)] ds:gap-y-[var(--spacing-2xs)] type-eyebrow ds:text-[color:var(--muted-foreground)]", children: [
+              c ? /* @__PURE__ */ a("span", { children: c }) : null,
+              e.chair ? /* @__PURE__ */ a("span", { children: r("appointmentCard.chair", { chair: e.chair }) }) : null,
+              (j = e.bookingReason) != null && j.specialty ? /* @__PURE__ */ a("span", { children: e.bookingReason.specialty }) : null,
+              e.firstVisit === "yes" ? /* @__PURE__ */ s("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)]", children: [
+                /* @__PURE__ */ a(ie, { "aria-hidden": "true", className: "ds:size-3 ds:shrink-0" }),
+                r("appointmentCard.firstVisit")
+              ] }) : null
+            ] }) : null,
+            (L = e.bookingReason) != null && L.description ? /* @__PURE__ */ a("span", { className: "type-body-sm ds:text-[color:var(--foreground)] ds:truncate", children: e.bookingReason.description }) : null,
+            T.length > 0 ? /* @__PURE__ */ a("div", { className: "ds:flex ds:flex-wrap ds:gap-[var(--spacing-2xs)]", children: T }) : null,
+            (A = e.flags) != null && A.bookedOnline || (M = e.flags) != null && M.highlightedAnamnesis || g ? /* @__PURE__ */ s("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-xs)]", children: [
+              (_ = e.flags) != null && _.bookedOnline ? /* @__PURE__ */ a(P, { variant: "info", size: "sm", leading: /* @__PURE__ */ a(de, {}), children: r("appointmentCard.flag.bookedOnline") }) : null,
+              (D = e.flags) != null && D.highlightedAnamnesis ? /* @__PURE__ */ a(P, { variant: "warning", size: "sm", withDot: !0, children: r("appointmentCard.flag.highlightedAnamnesis") }) : null,
+              g ? /* @__PURE__ */ a(
+                se,
+                {
+                  state: "to-invoice",
+                  amount: d / 100,
+                  currency: x,
+                  locale: b,
+                  size: "sm",
+                  showLabel: !0
+                }
+              ) : null
+            ] }) : null
+          ] }),
+          m ? /* @__PURE__ */ a(
+            le,
+            {
+              "aria-hidden": "true",
+              className: "ds:size-4 ds:shrink-0 ds:self-center ds:text-[color:var(--muted-foreground)] ds:opacity-0 ds:transition-opacity ds:motion-reduce:transition-none ds:group-hover:opacity-100 ds:group-focus-within:opacity-100 ds:rtl:rotate-180"
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+F.displayName = "AppointmentCard";
+const $e = {
+  id: "appointment-card",
+  capabilities: ["pick"],
+  state: {},
+  actions: {},
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "appointment-card",
+      description: "Marks the element as a kit AppointmentCard. The root also emits data-component-id sourced from item.id, data-state with the appointment lifecycle, and data-type with the delivery channel."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "item.id",
+      description: "Sourced from item.id — the stable appointment identifier."
+    }
+  }
+}, he = {
+  id: "appointment-tray",
+  capabilities: ["select_single"],
+  state: {
+    items: {
+      type: "Array<{ id: string; state: string }>",
+      descriptionKey: "ui.agent.appointmentTray.state.items",
+      description: "Currently-displayed appointments. Ids + lifecycle state only — never patient identity.",
+      read: (e) => e.getItems()
+    }
+  },
+  actions: {
+    select_item: {
+      safety: "read",
+      argsType: "{ id: string }",
+      descriptionKey: "ui.agent.appointmentTray.actions.selectItem",
+      description: "Activate the appointment with the given id.",
+      invoke: (e, i) => {
+        e.selectItem(i.id);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "appointment-tray",
+      description: "Marks the AppointmentTray wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop. Required to address a specific tray from the agent."
+    },
+    item: {
+      attr: "data-appointment-id",
+      description: "Stable appointment id emitted on each rendered AppointmentCard inside the tray."
+    }
+  }
+}, ye = H(
+  [
+    "ds:flex ds:flex-col",
+    "ds:rounded-[var(--radius-md)] ds:shadow-[var(--shadow-card)]",
+    "ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2",
+    "ds:bg-[color:var(--card)] ds:text-[color:var(--card-foreground)]",
+    "ds:overflow-hidden"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "",
+        md: ""
+      }
+    },
+    defaultVariants: {
+      size: "sm"
+    }
+  }
+), be = $(
+  ({
+    id: e,
+    items: i,
+    title: b,
+    caption: x,
+    size: o = "sm",
+    locale: I,
+    currency: R,
+    onOpenAppointment: l,
+    onAddAppointment: r,
+    addLabel: m,
+    loading: N = !1,
+    emptyTitle: v,
+    emptyDescription: c,
+    className: C,
+    ...k
+  }, S) => {
+    const { t: p } = G(), u = b ?? p("appointmentTray.title"), f = m ?? p("appointmentTray.add"), T = !N && i.length === 0;
+    let d;
+    N ? d = /* @__PURE__ */ a("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-sm)]", children: [0, 1, 2].map((t) => /* @__PURE__ */ a(X, { variant: "rectangular", height: "3.5rem" }, t)) }) : T ? d = /* @__PURE__ */ a("div", { className: "ds:p-[var(--spacing-md)]", children: /* @__PURE__ */ a(
+      Z,
+      {
+        variant: "first-use",
+        size: "sm",
+        title: v ?? p("appointmentTray.empty.title"),
+        description: c ?? p("appointmentTray.empty.description")
+      }
+    ) }) : d = /* @__PURE__ */ a("ul", { className: "ds:flex ds:list-none ds:flex-col ds:gap-[var(--spacing-2xs)] ds:p-[var(--spacing-2xs)]", children: i.map((t) => /* @__PURE__ */ a(
+      F,
+      {
+        item: t,
+        size: o,
+        locale: I,
+        currency: R,
+        onActivate: l,
+        "data-appointment-id": t.id
+      },
+      t.id
+    )) });
+    const g = K(i);
+    g.current = i;
+    const h = K(null);
+    Y(S, () => h.current, []);
+    const w = J(
+      () => ({
+        getItems: () => g.current.map((t) => ({ id: t.id, state: t.state })),
+        selectItem: (t) => {
+          const y = g.current.find((z) => z.id === t);
+          y && (l == null || l(y));
+        }
+      }),
+      [l]
+    );
+    return ce(he, w, e), /* @__PURE__ */ s(
+      "section",
+      {
+        ref: h,
+        "aria-label": u,
+        "data-component": "appointment-tray",
+        "data-component-id": e,
+        className: ye({ size: o, className: C }),
+        ...k,
+        children: [
+          /* @__PURE__ */ s("header", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-sm)]", children: [
+            /* @__PURE__ */ s("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)] ds:min-w-0", children: [
+              /* @__PURE__ */ s("h3", { className: "ds:m-0 ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] type-title-card", children: [
+                /* @__PURE__ */ a(pe, { "aria-hidden": "true", className: "ds:size-4" }),
+                u
+              ] }),
+              x ? /* @__PURE__ */ a("span", { className: "type-eyebrow ds:text-[color:var(--muted-foreground)]", children: x }) : null
+            ] }),
+            r ? /* @__PURE__ */ a(
+              Q,
+              {
+                icon: /* @__PURE__ */ a(me, {}),
+                intent: "outline",
+                size: "sm",
+                "aria-label": f,
+                onClick: r
+              }
+            ) : null
+          ] }),
+          d
+        ]
+      }
+    );
+  }
+);
+be.displayName = "AppointmentTray";
+export {
+  F as A,
+  be as a,
+  $e as b,
+  he as c
+};
+//# sourceMappingURL=appointment-tray-BwDHhWWC.js.map