@alfadocs/ui-kit 1.49.2 → 1.50.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfadocs/ui-kit",
-  "version": "1.49.2",
+  "version": "1.50.0",
   "type": "module",
   "description": "AlfaDocs shared design system — tokens, components, patterns, and translations for platform, booking, and alfascribe.",
   "license": "BUSL-1.1",

package/dist/_chunks/appointment-peek-BDiCIBb-.js

@@ -1,115 +0,0 @@
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { forwardRef as C, isValidElement as P } from "react";
-import { c as D } from "./index-D2ZczOXr.js";
-import { useTranslation as V } from "react-i18next";
-import { A as y } from "./avatar-BVvjKNTp.js";
-import { D as l } from "./description-list-1A2DEbE6.js";
-import { H as z } from "./hover-card-BplP5SzQ.js";
-import { a as E } from "./workflow-status-ClHfz4Kr.js";
-import { C as H } from "./clock-Drd4Wtis.js";
-import { V as I } from "./video-BheNGvsu.js";
-import { A as S } from "./armchair-BaLDW6Hz.js";
-import { E as j } from "./eye-off-C_4xkbRP.js";
-import { a as L } from "./entity-card-D1Yrh9wf.js";
-const R = D(
-  "ds:flex ds:min-w-0 ds:flex-col ds:gap-[var(--spacing-sm)]"
-), T = C(
-  ({
-    name: t,
-    avatarSrc: v,
-    time: h,
-    location: m,
-    telehealth: u = !1,
-    status: s,
-    statusLabel: x,
-    details: c,
-    flags: d,
-    privacy: r = !1,
-    className: k,
-    ...N
-  }, g) => {
-    const { t: o } = V(), i = s ? L(s) : null, p = i == null ? void 0 : i.Icon, w = u ? I : S, f = !r, A = [
-      { icon: /* @__PURE__ */ e(H, {}), label: o("appointmentPeek.time"), value: h },
-      ...m ? [
-        {
-          icon: /* @__PURE__ */ e(w, {}),
-          label: o("appointmentPeek.location"),
-          value: m
-        }
-      ] : [],
-      ...f && c ? c.map((a) => ({
-        icon: P(a.icon) ? a.icon : null,
-        label: a.label,
-        value: a.value
-      })) : []
-    ];
-    return /* @__PURE__ */ n(
-      "div",
-      {
-        ref: g,
-        "data-component": "appointment-peek",
-        "data-status": s,
-        className: R({ className: k }),
-        ...N,
-        children: [
-          /* @__PURE__ */ n("div", { className: "ds:flex ds:min-w-0 ds:items-start ds:gap-[var(--spacing-sm)]", children: [
-            r ? null : /* @__PURE__ */ e(
-              y,
-              {
-                size: "sm",
-                name: t,
-                src: v,
-                "aria-hidden": "true",
-                className: "ds:shrink-0"
-              }
-            ),
-            /* @__PURE__ */ n("div", { className: "ds:flex ds:min-w-0 ds:flex-1 ds:flex-col ds:gap-[var(--spacing-2xs)]", children: [
-              /* @__PURE__ */ e(z.Heading, { className: "ds:min-w-0", children: r ? /* @__PURE__ */ n("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]", children: [
-                /* @__PURE__ */ e(
-                  j,
-                  {
-                    "aria-hidden": "true",
-                    className: "ds:size-4 ds:shrink-0"
-                  }
-                ),
-                o("appointmentPeek.hiddenName")
-              ] }) : t }),
-              f && d ? /* @__PURE__ */ e("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-xs)]", children: d }) : null
-            ] })
-          ] }),
-          /* @__PURE__ */ e(
-            l,
-            {
-              layout: "inline",
-              density: "compact",
-              divider: "none",
-              className: "ds:[--description-list-icon-color:var(--accent)]",
-              children: A.map((a, b) => /* @__PURE__ */ n(l.Row, { icon: a.icon, children: [
-                /* @__PURE__ */ e(l.Term, { children: a.label }),
-                /* @__PURE__ */ e(l.Detail, { children: a.value })
-              ] }, b))
-            }
-          ),
-          s && i && p ? /* @__PURE__ */ e("div", { "data-slot": "workflow", children: /* @__PURE__ */ e(
-            E,
-            {
-              size: "sm",
-              value: s,
-              option: {
-                value: s,
-                label: x ?? o(`appointmentCard.state.${s}`),
-                icon: /* @__PURE__ */ e(p, { "aria-hidden": "true" }),
-                tone: i.tone
-              }
-            }
-          ) }) : null
-        ]
-      }
-    );
-  }
-);
-T.displayName = "AppointmentPeek";
-export {
-  T as A
-};
-//# sourceMappingURL=appointment-peek-BDiCIBb-.js.map

package/dist/_chunks/calendar-event-card-BUbKBPv_.js

@@ -1,403 +0,0 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { forwardRef as T } from "react";
-import { useTranslation as W } from "react-i18next";
-import { c as X } from "./index-D2ZczOXr.js";
-import { C as Y } from "./clipboard-check-BeAGxDVT.js";
-import { E as C } from "./eye-off-C_4xkbRP.js";
-import { U as q, B as F, T as J } from "./user-x-DYszNtIg.js";
-import { C as M } from "./check-DrFSN__t.js";
-import { S as Q } from "./stethoscope-sZXGC43m.js";
-import { C as Z } from "./clock-Drd4Wtis.js";
-import { G as P } from "./globe-sHBW1JN5.js";
-import { T as ee } from "./triangle-alert-CBnO6nq_.js";
-import { H as ne } from "./heart-pulse-BCppJyN2.js";
-import { E as ae } from "./euro-Dsuz4ixO.js";
-import { V as re } from "./video-BheNGvsu.js";
-import { R as se } from "./repeat-CvQa5rZt.js";
-function de(a) {
-  if (typeof a != "string") return null;
-  const r = a.trim();
-  if (!r.startsWith("#")) return null;
-  const n = r.slice(1);
-  let d, t, s;
-  if (n.length === 3) {
-    if (!/^[0-9a-f]{3}$/i.test(n)) return null;
-    d = parseInt(n[0] + n[0], 16), t = parseInt(n[1] + n[1], 16), s = parseInt(n[2] + n[2], 16);
-  } else if (n.length === 6) {
-    if (!/^[0-9a-f]{6}$/i.test(n)) return null;
-    d = parseInt(n.slice(0, 2), 16), t = parseInt(n.slice(2, 4), 16), s = parseInt(n.slice(4, 6), 16);
-  } else
-    return null;
-  return [d / 255, t / 255, s / 255];
-}
-function te([a, r, n]) {
-  const d = (t) => t <= 0.03928 ? t / 12.92 : Math.pow((t + 0.055) / 1.055, 2.4);
-  return 0.2126 * d(a) + 0.7152 * d(r) + 0.0722 * d(n);
-}
-function Ce(a, r, n) {
-}
-function ie(a) {
-  const r = de(a);
-  return r ? te(r) > 0.1791 ? "on-light" : "on-dark" : null;
-}
-const oe = {
-  confirmed: J,
-  waiting: Z,
-  in_care: Q,
-  done: M,
-  cancelled: F,
-  absent: q
-}, o = "ds:inline-flex ds:size-4.5 ds:shrink-0 ds:items-center ds:justify-center ds:rounded-[var(--radius-full)] ds:bg-[color:var(--card)] ds:border ds:border-[color:var(--border)] ds:shadow-[var(--shadow-sm)]", le = "ds:inline-block ds:h-3 ds:w-[6ch] ds:align-middle ds:rounded-[var(--radius-sm)] ds:bg-[var(--muted)] ds:animate-[skeleton-pulse_calc(var(--animation-duration)*8)_ease-in-out_infinite] ds:motion-reduce:animate-none ds:forced-colors:bg-[GrayText] ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText] ds:forced-colors:animate-none", c = {
-  success: "ds:text-[color:var(--success-foreground)]",
-  info: "ds:text-[color:var(--info-foreground)]",
-  warning: "ds:text-[color:var(--warning-foreground)]",
-  error: "ds:text-[color:var(--error-foreground)]",
-  // Same AA-clearing accent mix Badge's accentSoft uses for its ink.
-  accent: "ds:text-[color:color-mix(in_srgb,var(--accent)_40%,var(--foreground))]"
-}, ce = {
-  confirmed: "success",
-  waiting: "info",
-  in_care: "accent",
-  done: "success",
-  cancelled: "error",
-  absent: "warning"
-}, me = {
-  confirmed: "calendar.status.confirmed",
-  waiting: "calendar.status.waiting",
-  in_care: "calendar.status.inCare",
-  done: "calendar.status.done",
-  cancelled: "calendar.status.cancelled",
-  absent: "calendar.status.absent"
-}, ue = X(
-  [
-    // Block root; the appointment content is a wrap-capable flex row
-    // (inline-flowing text cell beside the icon column — structurally
-    // overlap-safe). Tight padding and line-height so sliver-height
-    // harnesses show a full text line.
-    //
-    // `@container/eventcard` makes the card's own inline size the query
-    // basis for the indicator column below. FullCalendar sizes the
-    // harness by lane count, so a dense day splits a column into
-    // 30-40px slivers with no media query anywhere near that width —
-    // only a container query can see it. Safe here: the root is a
-    // BLOCK, never a flex parent, so `container-type` cannot collapse a
-    // flex child (see rich-text-editor/editor-toolbar.tsx for the same
-    // precaution).
-    "ds:relative ds:block ds:@container/eventcard",
-    "ds:w-full ds:h-full",
-    "ds:ps-[var(--spacing-2xs)] ds:pe-[var(--spacing-2xs)]",
-    "ds:rounded-[var(--radius-sm)]",
-    "ds:text-[length:var(--font-size-sm)]",
-    "ds:font-[var(--font-weight-medium)]",
-    "ds:leading-tight ds:text-start",
-    "ds:overflow-hidden",
-    // kept verbatim from the former base (inert on a non-focusable div
-    // inside FC; harmless)
-    "ds:focus-visible:outline-[length:var(--focus-ring-width)]",
-    "ds:focus-visible:outline-[var(--ring)]",
-    "ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
-    // SINGLE PAINTED SURFACE — always present, never conditional. One
-    // declaration per paint channel; value chain = "caller custom prop,
-    // else token". This structurally eliminates the CVA-vs-override
-    // specificity race (the old double-paint bug) — stylesheet order
-    // becomes irrelevant.
-    "ds:[background-color:var(--calendar-event-bg,var(--primary))]",
-    "ds:[color:var(--calendar-event-text,var(--primary-foreground))]",
-    "ds:border ds:[border-color:var(--calendar-event-border,transparent)]"
-  ].join(" "),
-  {
-    variants: {
-      // Do not add colour classes to this axis — status is icon + aria
-      // only; a unit test asserts identical computed background
-      // across all six statuses.
-      status: {
-        none: "",
-        confirmed: "",
-        waiting: "",
-        in_care: "",
-        done: "",
-        cancelled: "ds:line-through",
-        absent: ""
-      },
-      bookedOnline: {
-        // class name kept as a stable inert DOM hook; the stripe paint
-        // lives here (moved from fullcalendar-theme.css) so it works in
-        // the card's own stories, outside .fc-theme-alfadocs.
-        // currentcolor = resolved ink, so stripes stay visible over any
-        // picker colour.
-        true: "event-booked-online ds:bg-[image:repeating-linear-gradient(45deg,transparent,transparent_4px,color-mix(in_srgb,currentcolor_10%,transparent)_4px,color-mix(in_srgb,currentcolor_10%,transparent)_8px)]",
-        false: ""
-      },
-      // Task treatment: CUSTOM-PROPERTY assignments only — the consuming
-      // background-color / color / border-color declarations stay in the
-      // base above, so this cannot re-open the CVA-vs-override specificity
-      // race, and a caller's inline picker hex (set as the same custom
-      // properties via `style`) still wins. `border-dashed` is a
-      // border-style declaration — no property collision either.
-      kind: {
-        // The appointment's COLOUR IDENTITY edge — a thick start border
-        // in the event colour, platform-agenda style, so the colour
-        // reads even on sliver-height cards. Tasks keep the 1px edge:
-        // muted to-dos carry no colour identity.
-        appointment: "ds:border-s-4",
-        // Draft treatment — an appointment being COMPOSED, not yet saved
-        // (the slot a user just picked, mirrored on the grid while the
-        // editor is open). Same custom-property-only discipline as
-        // `task`: dashed outline over a light primary tint, so the
-        // placeholder reads as pending rather than as a booked slot.
-        draft: [
-          "ds:border-dashed",
-          "ds:[--calendar-event-bg:color-mix(in_srgb,var(--primary)_10%,var(--card))]",
-          "ds:[--calendar-event-text:var(--foreground)]",
-          "ds:[--calendar-event-border:var(--primary)]"
-        ].join(" "),
-        // Details pending — the block IS a booked appointment, so it
-        // keeps the colour-identity edge and assigns no paint of its own.
-        // Only the NAME is missing; the bar above stands in for it.
-        "pending-details": "ds:border-s-4",
-        task: [
-          "ds:border-dashed",
-          "ds:[--calendar-event-bg:var(--muted)]",
-          "ds:[--calendar-event-text:var(--muted-foreground)]",
-          "ds:[--calendar-event-border:color-mix(in_srgb,currentcolor_45%,transparent)]"
-        ].join(" ")
-      },
-      // Tinted colour scheme — the chip-family look: the picker colour
-      // becomes a SOLID BORDER over a light tint of itself (theme-aware
-      // via color-mix with --card), text on the theme's foreground
-      // tokens. Custom-property assignments only — the painted
-      // declarations stay in the base. The runtime hex arrives as
-      // `--calendar-event-accent` (inline). Never combined with the task
-      // variant: the component forces `solid` for tasks so exactly one
-      // class-level assignment of each property exists per render.
-      colorStyle: {
-        solid: "",
-        tinted: [
-          "ds:[--calendar-event-bg:color-mix(in_srgb,var(--calendar-event-accent,var(--primary))_12%,var(--card))]",
-          "ds:[--calendar-event-text:var(--foreground)]",
-          "ds:[--calendar-event-border:var(--calendar-event-accent,var(--primary))]"
-        ].join(" ")
-      }
-    },
-    defaultVariants: {
-      status: "none",
-      bookedOnline: !1,
-      kind: "appointment",
-      colorStyle: "solid"
-    }
-  }
-), fe = T(
-  ({
-    title: a,
-    suffix: r,
-    rangeText: n,
-    showTime: d = !0,
-    allDay: t = !1,
-    status: s,
-    backgroundColor: l,
-    textColor: u,
-    borderColor: h,
-    isBookedOnline: g = !1,
-    hasUnassignedPatient: N,
-    hasHighlightedAnamnesis: w,
-    hasBillableAmount: S,
-    isTelehealth: k,
-    isRecurring: z,
-    isTask: m = !1,
-    isDraft: b = !1,
-    detailsPending: f = !1,
-    colorStyle: B = "solid",
-    resourceLabel: L,
-    privacyMasked: I = !1,
-    eventId: j,
-    className: A,
-    style: $,
-    "aria-label": O,
-    ...R
-  }, U) => {
-    const { t: v } = W(), x = s ? oe[s] : null, G = !!x || !!g || !!N || !!w || !!S || !!k || !!z, H = s ? v(me[s]) : void 0, K = f ? v("calendar.eventKind.pendingDetails") : b ? v("calendar.eventKind.draft") : m ? v("calendar.eventKind.task") : void 0, V = O ?? [a, n, L, H, K].filter(Boolean).join(", "), y = f ? "pending-details" : b ? "draft" : m ? "task" : "appointment", p = !m && !b && B === "tinted", _ = !p && !u && l ? ie(l) : null, E = p ? l ? { "--calendar-event-accent": l } : void 0 : l || u || h ? {
-      ...l ? { "--calendar-event-bg": l } : {},
-      ...u ? { "--calendar-event-text": u } : _ === "on-light" ? { "--calendar-event-text": "var(--event-ink-on-light)" } : _ === "on-dark" ? { "--calendar-event-text": "var(--event-ink-on-dark)" } : {},
-      ...h ? { "--calendar-event-border": h } : {}
-    } : void 0, D = $ || E ? { ...$, ...E } : void 0;
-    return /* @__PURE__ */ i(
-      "div",
-      {
-        ref: U,
-        ...R,
-        className: ue({
-          status: s ?? "none",
-          bookedOnline: g,
-          kind: y,
-          colorStyle: p ? "tinted" : "solid",
-          className: A
-        }),
-        style: D,
-        "aria-label": V,
-        "data-component": "calendar-event-card",
-        "data-event-id": j,
-        "data-kind": y,
-        "data-status": s ?? "none",
-        "data-contrast": p ? "tinted" : u ? "custom" : _ ?? "default",
-        children: [
-          m && !f ? (
-            /* Task cards lead with ONE line — glyph + title inline. A task is
-               typically a 30-min block whose visible height fits a single
-               line; the appointment layout below would spend that line on the
-               indicator row and clip the title entirely. Tasks carry none of
-               the appointment flags, so the row loses nothing. */
-            /* @__PURE__ */ i("span", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-2xs)]", children: [
-              /* @__PURE__ */ e(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  className: `${o} ds:text-[color:var(--muted-foreground)]`,
-                  children: /* @__PURE__ */ e(Y, { size: 11, "aria-hidden": "true" })
-                }
-              ),
-              d && !t && n ? /* @__PURE__ */ e("span", { className: "ds:whitespace-nowrap ds:text-[length:var(--font-size-xs)]", children: n }) : null,
-              /* @__PURE__ */ e("span", { className: "ds:[min-inline-size:0] ds:font-[var(--font-weight-semibold)] ds:truncate ds:text-start", children: I ? /* @__PURE__ */ i("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)]", children: [
-                /* @__PURE__ */ e(C, { size: 12, "aria-hidden": "true" }),
-                a
-              ] }) : a })
-            ] })
-          ) : (
-            /* Platform-density layout with STRUCTURAL overlap-safety: the
-               first row is a flex pair — an inline-flowing text cell (time,
-               then the semibold name; wraps when taller cards allow) beside
-               a fixed icon column. Flex cells cannot paint over each other,
-               unlike a float (inline text paints ABOVE floats, which
-               produced glyphs-through-icons in sliver-width columns). A
-               one-line sliver still reads "09:15 Name" plus icons. */
-            /* @__PURE__ */ i("span", { className: "ds:flex ds:h-full ds:items-stretch ds:gap-[var(--spacing-2xs)]", children: [
-              /* @__PURE__ */ i("span", { className: "ds:min-w-[var(--spacing-2xl)] ds:flex-1 ds:overflow-hidden ds:break-normal", children: [
-                /* @__PURE__ */ i("span", { className: "ds:flex ds:min-w-0 ds:items-baseline ds:gap-[var(--spacing-2xs)]", children: [
-                  d && !t && n ? (
-                    // No opacity here — composing 70% over saturated bgs drops
-                    // effective contrast below WCAG AA. The smaller
-                    // font-size-xs vs the title's font-weight-semibold provides
-                    // sufficient visual hierarchy.
-                    /* @__PURE__ */ e(
-                      "span",
-                      {
-                        className: "ds:max-w-[55%] ds:shrink-0 ds:truncate ds:whitespace-nowrap ds:text-[length:var(--font-size-xs)]",
-                        title: n,
-                        children: n
-                      }
-                    )
-                  ) : null,
-                  /* @__PURE__ */ e("span", { className: "ds:min-w-0 ds:flex-1 ds:truncate ds:font-[var(--font-weight-semibold)]", children: f ? (
-                    /* No name yet — and nothing invented in its place. */
-                    /* @__PURE__ */ e("span", { "aria-hidden": "true", className: le })
-                  ) : I ? (
-                    /* The eye + mask get their own start padding so the
-                       redaction doesn't crowd the time. */
-                    /* @__PURE__ */ i("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)] ds:ps-[var(--spacing-2xs)] ds:align-middle", children: [
-                      /* @__PURE__ */ e(C, { size: 12, "aria-hidden": "true" }),
-                      a
-                    ] })
-                  ) : a })
-                ] }),
-                r ? (
-                  /* Second line inside the text cell — beside the plate,
-                     never beneath it. */
-                  /* @__PURE__ */ e("span", { className: "ds:block ds:truncate ds:text-[length:var(--font-size-xs)]", children: r })
-                ) : null
-              ] }),
-              /* @__PURE__ */ i(
-                "span",
-                {
-                  className: G ? (
-                    /* Vertically CENTRED indicator column — each disc is
-                                           its own card-surface circle, so no plate and no
-                                           colour-on-colour.
-                    
-                                           Hidden below 128px of CARD width: three discs are
-                                           58px, so on a 34px overlap sliver the shrink-0
-                                           column outran the whole card and the time and name
-                                           were laid out at zero. Decoration must not outrank
-                                           the only content, and nothing is lost — every disc
-                                           is aria-hidden and its meaning already sits in the
-                                           composed aria-label, which a sliver card still
-                                           carries in full. */
-                    "ds:hidden ds:@[128px]/eventcard:flex ds:shrink-0 ds:items-center ds:gap-[var(--spacing-2xs)] ds:self-center"
-                  ) : "ds:hidden",
-                  children: [
-                    x && s ? /* @__PURE__ */ e(
-                      "span",
-                      {
-                        "aria-hidden": "true",
-                        className: `${o} ${c[ce[s]]}`,
-                        children: /* @__PURE__ */ e(x, { size: 11, "aria-hidden": "true" })
-                      }
-                    ) : null,
-                    g ? /* @__PURE__ */ e(
-                      "span",
-                      {
-                        "aria-hidden": "true",
-                        className: `${o} ${c.info}`,
-                        children: /* @__PURE__ */ e(P, { size: 11, "aria-hidden": "true" })
-                      }
-                    ) : null,
-                    N ? /* @__PURE__ */ e(
-                      "span",
-                      {
-                        "aria-hidden": "true",
-                        className: `${o} ${c.warning}`,
-                        children: /* @__PURE__ */ e(ee, { size: 11, "aria-hidden": "true" })
-                      }
-                    ) : null,
-                    w ? /* @__PURE__ */ e(
-                      "span",
-                      {
-                        "aria-hidden": "true",
-                        className: `${o} ${c.accent}`,
-                        children: /* @__PURE__ */ e(ne, { size: 11, "aria-hidden": "true" })
-                      }
-                    ) : null,
-                    S ? /* @__PURE__ */ e(
-                      "span",
-                      {
-                        "aria-hidden": "true",
-                        className: `${o} ${c.warning}`,
-                        children: /* @__PURE__ */ e(ae, { size: 11, "aria-hidden": "true" })
-                      }
-                    ) : null,
-                    k ? /* @__PURE__ */ e(
-                      "span",
-                      {
-                        "aria-hidden": "true",
-                        className: `${o} ${c.info}`,
-                        children: /* @__PURE__ */ e(re, { size: 11, "aria-hidden": "true" })
-                      }
-                    ) : null,
-                    z ? /* @__PURE__ */ e(
-                      "span",
-                      {
-                        "aria-hidden": "true",
-                        className: `${o} ${c.info}`,
-                        children: /* @__PURE__ */ e(se, { size: 11, "aria-hidden": "true" })
-                      }
-                    ) : null
-                  ]
-                }
-              )
-            ] })
-          ),
-          m && d && !t && n ? /* @__PURE__ */ e("span", { className: "ds:text-[length:var(--font-size-xs)]", children: n }) : null,
-          m && r ? (
-            /* Task cards keep the below-row suffix (their branch has no
-               text cell / plate split). */
-            /* @__PURE__ */ e("span", { className: "ds:block ds:truncate ds:text-[length:var(--font-size-xs)]", children: r })
-          ) : null
-        ]
-      }
-    );
-  }
-);
-fe.displayName = "CalendarEventCard";
-export {
-  fe as C,
-  Ce as w
-};
-//# sourceMappingURL=calendar-event-card-BUbKBPv_.js.map