@alfadocs/ui-kit 1.66.0 → 1.68.0

package/dist/_chunks/panel-header-CbtlTe85.js

@@ -0,0 +1,190 @@
+import { jsx as s, jsxs as a, Fragment as g } from "react/jsx-runtime";
+import { forwardRef as A, useState as x, useEffect as E, useContext as O, createContext as W } from "react";
+import { c as l } from "./index-D2ZczOXr.js";
+import { T as B } from "./tooltip-uEBdD1-5.js";
+const w = W(null);
+function U({
+  actions: t,
+  children: d
+}) {
+  return /* @__PURE__ */ s(w.Provider, { value: t, children: d });
+}
+function F() {
+  return O(w);
+}
+const I = l(
+  [
+    "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+    "ds:px-[var(--spacing-md)] ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-sm)]"
+  ].join(" "),
+  {
+    variants: {
+      // `sticky` pins the header to the top of the panel's scroll region;
+      // otherwise it stays a fixed-height band that never shrinks.
+      sticky: {
+        true: "ds:sticky ds:top-0 ds:z-[1] ds:bg-[color:var(--background)]",
+        false: "ds:shrink-0"
+      },
+      divider: {
+        true: "ds:border-b ds:border-[color:var(--border)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      sticky: !1,
+      divider: !0
+    }
+  }
+), _ = l(
+  "ds:flex ds:min-w-0 ds:justify-between ds:gap-[var(--spacing-sm)]",
+  {
+    variants: {
+      // Wrapping, the row holds the wrapping title block and the injected
+      // actions, which stay at the top end beside the title line.
+      wrapActions: {
+        true: "ds:items-start",
+        false: "ds:items-center"
+      }
+    },
+    defaultVariants: { wrapActions: !1 }
+  }
+), q = "ds:flex ds:min-w-0 ds:flex-1 ds:flex-wrap ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]", o = l(
+  "ds:flex ds:items-center ds:gap-[var(--spacing-xs)] ds:shrink-0",
+  {
+    variants: {
+      // On its own line the cluster is capped at the row width and its
+      // children can shrink and wrap, so a cluster wider than a 320px phone
+      // still stays on screen.
+      wrapActions: {
+        true: "ds:max-w-full ds:flex-wrap",
+        false: ""
+      }
+    },
+    defaultVariants: { wrapActions: !1 }
+  }
+), D = l("ds:min-w-0", {
+  variants: {
+    wrap: {
+      false: "ds:overflow-hidden ds:text-ellipsis ds:whitespace-nowrap",
+      true: "ds:[overflow-wrap:anywhere]"
+    }
+  },
+  defaultVariants: { wrap: !1 }
+}), G = l(
+  [
+    // `min-w-0` lets the heading shrink below its content width so the
+    // title span can clip; without it the flex row refuses to shrink and
+    // the action cluster is pushed out of the panel.
+    "ds:m-0 ds:flex ds:min-w-0 ds:items-center ds:gap-[var(--spacing-xs)]",
+    "ds:text-[color:var(--foreground)]"
+  ].join(" "),
+  {
+    variants: {
+      titleScale: {
+        card: "type-title-card",
+        section: "type-title-section"
+      },
+      // wrapActions with rail-injected buttons: the title line is as tall
+      // as the buttons, so the title centres on them although the row
+      // aligns to its top (the wrapped actions make it two lines tall).
+      // It mirrors the small button's height: the touch target below sm,
+      // its 32px box (h-8) from sm up.
+      matchTargetHeight: {
+        true: "ds:min-h-[var(--min-target-size)] ds:sm:min-h-8",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      titleScale: "card",
+      matchTargetHeight: !1
+    }
+  }
+), J = A(
+  ({
+    title: t,
+    icon: d,
+    headingId: b,
+    headingLevel: N = 2,
+    actions: i,
+    filters: f,
+    sticky: y = !1,
+    divider: T = !0,
+    titleScale: V = "card",
+    titleTooltip: H,
+    wrapActions: e = !1,
+    className: k,
+    ...P
+  }, j) => {
+    const r = F(), z = N === 3 ? "h3" : "h2", C = i != null || r != null, c = H ?? (typeof t == "string" ? t : void 0), [n, R] = x(null), [S, u] = x(!1);
+    E(() => {
+      if (!n || c == null || e) {
+        u(!1);
+        return;
+      }
+      const v = () => u(n.scrollWidth > n.clientWidth);
+      if (v(), typeof ResizeObserver > "u") return;
+      const h = new ResizeObserver(v);
+      return h.observe(n), () => h.disconnect();
+    }, [n, c, e]);
+    const m = /* @__PURE__ */ s(
+      "span",
+      {
+        ref: R,
+        className: D({ wrap: e }),
+        children: t
+      }
+    ), p = /* @__PURE__ */ a(
+      z,
+      {
+        id: b,
+        className: G({
+          titleScale: V,
+          matchTargetHeight: e && r != null
+        }),
+        children: [
+          d ? /* @__PURE__ */ s(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "ds:inline-flex ds:shrink-0 ds:text-[color:var(--accent)] ds:[&_svg]:size-4",
+              children: d
+            }
+          ) : null,
+          S && c != null ? /* @__PURE__ */ s(B, { label: c, children: m }) : m
+        ]
+      }
+    );
+    return /* @__PURE__ */ a(
+      "header",
+      {
+        ref: j,
+        "data-component": "panel-header",
+        className: I({ sticky: y, divider: T, className: k }),
+        ...P,
+        children: [
+          /* @__PURE__ */ s("div", { className: _({ wrapActions: e }), children: e ? /* @__PURE__ */ a(g, { children: [
+            /* @__PURE__ */ a("div", { className: q, children: [
+              p,
+              i != null ? /* @__PURE__ */ s("div", { className: o({ wrapActions: e }), children: i }) : null
+            ] }),
+            r != null ? /* @__PURE__ */ s("div", { className: o({ wrapActions: !1 }), children: r }) : null
+          ] }) : /* @__PURE__ */ a(g, { children: [
+            p,
+            C ? /* @__PURE__ */ a("div", { className: o({ wrapActions: e }), children: [
+              i,
+              r
+            ] }) : null
+          ] }) }),
+          f != null ? /* @__PURE__ */ s("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-sm)]", children: f }) : null
+        ]
+      }
+    );
+  }
+);
+J.displayName = "PanelHeader";
+export {
+  J as P,
+  U as a,
+  F as u
+};
+//# sourceMappingURL=panel-header-CbtlTe85.js.map

package/dist/_chunks/{panel-subview-yP4qIbKS.js → panel-subview-BPU7220K.js}

@@ -2,7 +2,7 @@ import { jsxs as I, jsx as a, Fragment as D } from "react/jsx-runtime";
 import { forwardRef as C, useId as K, useRef as u, useCallback as U, useEffect as N } from "react";
 import { c as x } from "./index-D2ZczOXr.js";
 import { I as _ } from "./icon-button-C_1TgRiK.js";
-import { P as G } from "./panel-header-BJkaUwnl.js";
+import { P as G } from "./panel-header-CbtlTe85.js";
 import { S as J } from "./scroll-area-CY5SLYNw.js";
 import { u as R } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
 import { u as Q } from "./use-presence-transition-cDwWUXV-.js";
@@ -228,4 +228,4 @@ const ue = Object.assign(L, {
 export {
   ue as P
 };
-//# sourceMappingURL=panel-subview-yP4qIbKS.js.map
+//# sourceMappingURL=panel-subview-BPU7220K.js.map

package/dist/_chunks/{patient-details-4P1vA9Ls.js → patient-details-C4Dyo7Ck.js}

@@ -2,13 +2,13 @@ import { jsx as e, jsxs as r } from "react/jsx-runtime";
 import { forwardRef as X, useId as T, useMemo as Z, Fragment as $ } from "react";
 import { c as j } from "./index-D2ZczOXr.js";
 import { useTranslation as A } from "react-i18next";
-import { A as ee } from "./avatar-WZY3eGE7.js";
+import { A as ee } from "./avatar-BPiPL7ND.js";
 import { C as f } from "./card-BA4Ig_kn.js";
 import { C as ie, b as te, a as se } from "./collapsible-DVPM46bq.js";
 import { D as ae } from "./description-list-Q8640NHu.js";
-import { P as de } from "./panel-header-BJkaUwnl.js";
+import { P as de } from "./panel-header-CbtlTe85.js";
 import { u as re } from "./registry-DvAUVLHh.js";
-import { u as ne, F as le, r as oe, P as ce } from "./patient-field-row-CBXhlfGD.js";
+import { u as ne, F as le, r as oe, P as ce } from "./patient-field-row-DROvUkFu.js";
 import { C as pe } from "./clipboard-list-rSzfIYZB.js";
 const me = {
   id: "patient-details",
@@ -368,4 +368,4 @@ export {
   ue as P,
   me as p
 };
-//# sourceMappingURL=patient-details-4P1vA9Ls.js.map
+//# sourceMappingURL=patient-details-C4Dyo7Ck.js.map