@schandlergarcia/sf-web-components 1.0.0

package/dist/components/library/cards/CalloutCard.js

@@ -0,0 +1,28 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import "react";
+const t = {
+  neutral: "border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-950/30 dark:text-slate-200",
+  success: "border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900/40 dark:bg-emerald-950/20 dark:text-emerald-200",
+  warning: "border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200",
+  danger: "border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-900/40 dark:bg-rose-950/20 dark:text-rose-200",
+  info: "border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-900/40 dark:bg-blue-950/20 dark:text-blue-200"
+};
+function n({
+  title: r,
+  message: l,
+  tone: b = "neutral",
+  icon: a,
+  className: s = ""
+}) {
+  return /* @__PURE__ */ e("div", { className: `rounded-xl border p-4 ${t[b] ?? t.neutral} ${s}`, children: /* @__PURE__ */ d("div", { className: "flex gap-3", children: [
+    a && /* @__PURE__ */ e("div", { className: "mt-0.5 shrink-0", children: a }),
+    /* @__PURE__ */ d("div", { children: [
+      r && /* @__PURE__ */ e("div", { className: "mb-1 text-sm font-semibold", children: r }),
+      /* @__PURE__ */ e("div", { className: "text-sm", children: l })
+    ] })
+  ] }) });
+}
+export {
+  n as default
+};
+//# sourceMappingURL=CalloutCard.js.map

package/dist/components/library/cards/CalloutCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalloutCard.js","sources":["../../../../src/components/library/cards/CalloutCard.jsx"],"sourcesContent":["import React from \"react\";\n\nconst TONE_CLASSES = {\n  neutral: \"border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-950/30 dark:text-slate-200\",\n  success: \"border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900/40 dark:bg-emerald-950/20 dark:text-emerald-200\",\n  warning: \"border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200\",\n  danger: \"border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-900/40 dark:bg-rose-950/20 dark:text-rose-200\",\n  info: \"border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-900/40 dark:bg-blue-950/20 dark:text-blue-200\",\n};\n\n/**\n * Highlighted callout box for important inline messages.\n *\n * @param {string}  title\n * @param {string|ReactNode} message\n * @param {\"neutral\"|\"success\"|\"warning\"|\"danger\"|\"info\"} tone\n * @param {ReactNode} icon   Optional leading icon\n */\nexport default function CalloutCard({\n  title,\n  message,\n  tone = \"neutral\",\n  icon,\n  className = \"\",\n}) {\n  return (\n    <div className={`rounded-xl border p-4 ${TONE_CLASSES[tone] ?? TONE_CLASSES.neutral} ${className}`}>\n      <div className=\"flex gap-3\">\n        {icon && <div className=\"mt-0.5 shrink-0\">{icon}</div>}\n        <div>\n          {title && <div className=\"mb-1 text-sm font-semibold\">{title}</div>}\n          <div className=\"text-sm\">{message}</div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["TONE_CLASSES","CalloutCard","title","message","tone","icon","className","jsx","jsxs"],"mappings":";;AAEA,MAAMA,IAAe;AAAA,EACnB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AACR;AAUA,SAAwBC,EAAY;AAAA,EAClC,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAG;AACD,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAW,yBAAyBP,EAAaI,CAAI,KAAKJ,EAAa,OAAO,IAAIM,CAAS,IAC9F,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,cACZ,UAAA;AAAA,IAAAH,KAAQ,gBAAAE,EAAC,OAAA,EAAI,WAAU,mBAAmB,UAAAF,GAAK;AAAA,sBAC/C,OAAA,EACE,UAAA;AAAA,MAAAH,KAAS,gBAAAK,EAAC,OAAA,EAAI,WAAU,8BAA8B,UAAAL,GAAM;AAAA,MAC7D,gBAAAK,EAAC,OAAA,EAAI,WAAU,WAAW,UAAAJ,EAAA,CAAQ;AAAA,IAAA,EAAA,CACpC;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;"}

package/dist/components/library/cards/ChartCard.js

@@ -0,0 +1,79 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import "react";
+import f from "./BaseCard.js";
+import g from "../ui/Text.js";
+import k from "../ui/Chip.js";
+function I({
+  chart: b,
+  chartType: s,
+  title: t,
+  subtitle: i,
+  filters: d,
+  timeRange: r,
+  actions: n,
+  legend: m,
+  height: N = 280,
+  showGrid: c,
+  showAxes: h,
+  data: o,
+  loading: p = !1,
+  error: u,
+  ...x
+}) {
+  const v = /* @__PURE__ */ a("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
+    /* @__PURE__ */ a("div", { className: "min-w-0", children: [
+      t ? /* @__PURE__ */ e(g, { as: "div", size: "sm", weight: "medium", children: t }) : null,
+      i ? /* @__PURE__ */ e(g, { as: "div", size: "xs", muted: !0, className: "mt-1", children: i }) : null
+    ] }),
+    /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [
+      d ? /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: d }) : null,
+      r ? /* @__PURE__ */ e(
+        "select",
+        {
+          className: "h-9 rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-900 shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50",
+          value: r.current,
+          onChange: (l) => r.onChange?.(l.target.value),
+          "aria-label": "Time range",
+          children: r.options?.map((l) => /* @__PURE__ */ e("option", { value: l.value ?? l, children: l.label ?? l }, l.value ?? l))
+        }
+      ) : null,
+      n ? /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: n }) : null
+    ] })
+  ] });
+  return u ? /* @__PURE__ */ e(
+    f,
+    {
+      variant: "chart",
+      header: v,
+      body: /* @__PURE__ */ e("div", { className: "mt-4 rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900 dark:border-rose-900/40 dark:bg-rose-950/30 dark:text-rose-100", children: String(u) }),
+      ...x
+    }
+  ) : /* @__PURE__ */ e(
+    f,
+    {
+      variant: "chart",
+      header: /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ e("div", { className: "min-w-0", children: v }),
+        s ? /* @__PURE__ */ e(k, { children: s }) : null
+      ] }),
+      body: /* @__PURE__ */ a("div", { className: "mt-4", children: [
+        /* @__PURE__ */ e("div", { className: "w-full", style: { height: N }, children: b }),
+        m ? /* @__PURE__ */ e("div", { className: "mt-3", children: m }) : null,
+        (c != null || h != null) && o ? /* @__PURE__ */ a("div", { className: "mt-2 text-xs text-slate-500 dark:text-slate-400", children: [
+          "grid: ",
+          String(!!c),
+          " · axes: ",
+          String(!!h),
+          " · points: ",
+          o.length
+        ] }) : null,
+        p ? /* @__PURE__ */ e("div", { className: "mt-3 text-xs text-slate-500 dark:text-slate-400", children: "Loading…" }) : null
+      ] }),
+      ...x
+    }
+  );
+}
+export {
+  I as default
+};
+//# sourceMappingURL=ChartCard.js.map

package/dist/components/library/cards/ChartCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartCard.js","sources":["../../../../src/components/library/cards/ChartCard.jsx"],"sourcesContent":["import React from \"react\";\nimport BaseCard from \"./BaseCard\";\nimport UIText from \"../ui/Text\";\nimport UIChip from \"../ui/Chip\";\n\nexport default function ChartCard({\n  chart,\n  chartType,\n  title,\n  subtitle,\n  filters,\n  timeRange,\n  actions,\n  legend,\n  height = 280,\n  showGrid,\n  showAxes,\n  data,\n  loading = false,\n  error,\n  ...cardProps\n}) {\n  const header = (\n    <div className=\"flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between\">\n      <div className=\"min-w-0\">\n        {title ? (\n          <UIText as=\"div\" size=\"sm\" weight=\"medium\">\n            {title}\n          </UIText>\n        ) : null}\n        {subtitle ? (\n          <UIText as=\"div\" size=\"xs\" muted className=\"mt-1\">\n            {subtitle}\n          </UIText>\n        ) : null}\n      </div>\n      <div className=\"flex flex-wrap items-center justify-end gap-2\">\n        {filters ? <div className=\"flex items-center gap-2\">{filters}</div> : null}\n        {timeRange ? (\n          <select\n            className=\"h-9 rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-900 shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50\"\n            value={timeRange.current}\n            onChange={(e) => timeRange.onChange?.(e.target.value)}\n            aria-label=\"Time range\"\n          >\n            {timeRange.options?.map((opt) => (\n              <option key={opt.value ?? opt} value={opt.value ?? opt}>\n                {opt.label ?? opt}\n              </option>\n            ))}\n          </select>\n        ) : null}\n        {actions ? <div className=\"flex items-center gap-2\">{actions}</div> : null}\n      </div>\n    </div>\n  );\n\n  if (error) {\n    return (\n      <BaseCard\n        variant=\"chart\"\n        header={header}\n        body={\n          <div className=\"mt-4 rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900 dark:border-rose-900/40 dark:bg-rose-950/30 dark:text-rose-100\">\n            {String(error)}\n          </div>\n        }\n        {...cardProps}\n      />\n    );\n  }\n\n  const hint = chartType ? <UIChip>{chartType}</UIChip> : null;\n\n  return (\n    <BaseCard\n      variant=\"chart\"\n      header={\n        <div className=\"flex items-center justify-between gap-3\">\n          <div className=\"min-w-0\">{header}</div>\n          {hint}\n        </div>\n      }\n      body={\n        <div className=\"mt-4\">\n          <div className=\"w-full\" style={{ height }}>\n            {chart}\n          </div>\n          {legend ? <div className=\"mt-3\">{legend}</div> : null}\n          {(showGrid != null || showAxes != null) && data ? (\n            <div className=\"mt-2 text-xs text-slate-500 dark:text-slate-400\">\n              grid: {String(!!showGrid)} · axes: {String(!!showAxes)} · points: {data.length}\n            </div>\n          ) : null}\n          {loading ? (\n            <div className=\"mt-3 text-xs text-slate-500 dark:text-slate-400\">Loading…</div>\n          ) : null}\n        </div>\n      }\n      {...cardProps}\n    />\n  );\n}\n\n\n"],"names":["ChartCard","chart","chartType","title","subtitle","filters","timeRange","actions","legend","height","showGrid","showAxes","data","loading","error","cardProps","header","jsxs","jsx","UIText","e","opt","BaseCard","UIChip"],"mappings":"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"}

package/dist/components/library/cards/FeedPanel.js

@@ -0,0 +1,38 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import "react";
+import i from "../ui/Text.js";
+function b({
+  title: s,
+  subtitle: d,
+  actions: a,
+  children: o,
+  width: r,
+  className: m = "",
+  headerClassName: n = "",
+  bodyClassName: t = "",
+  ...c
+}) {
+  const h = r ? typeof r == "number" ? { width: `${r}px` } : { width: r } : void 0;
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: `flex shrink-0 flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 ${m}`,
+      style: h,
+      ...c,
+      children: [
+        (s || d || a) && /* @__PURE__ */ e("div", { className: `shrink-0 border-b border-slate-100 px-4 py-3 dark:border-slate-800 ${n}`, children: /* @__PURE__ */ l("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ l("div", { className: "min-w-0", children: [
+            s && /* @__PURE__ */ e(i, { as: "div", size: "sm", weight: "semibold", children: s }),
+            d && /* @__PURE__ */ e(i, { as: "div", size: "xs", muted: !0, className: "mt-0.5", children: d })
+          ] }),
+          a && /* @__PURE__ */ e("div", { className: "shrink-0", children: a })
+        ] }) }),
+        /* @__PURE__ */ e("div", { className: `flex-1 overflow-y-auto ${t}`, children: o })
+      ]
+    }
+  );
+}
+export {
+  b as default
+};
+//# sourceMappingURL=FeedPanel.js.map

package/dist/components/library/cards/FeedPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedPanel.js","sources":["../../../../src/components/library/cards/FeedPanel.jsx"],"sourcesContent":["import React from \"react\";\nimport UIText from \"../ui/Text\";\n\nexport default function FeedPanel({\n  title,\n  subtitle,\n  actions,\n  children,\n  width,\n  className = \"\",\n  headerClassName = \"\",\n  bodyClassName = \"\",\n  ...rest\n}) {\n  const widthStyle = width ? (typeof width === \"number\" ? { width: `${width}px` } : { width }) : undefined;\n\n  return (\n    <div\n      className={`flex shrink-0 flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 ${className}`}\n      style={widthStyle}\n      {...rest}\n    >\n      {(title || subtitle || actions) && (\n        <div className={`shrink-0 border-b border-slate-100 px-4 py-3 dark:border-slate-800 ${headerClassName}`}>\n          <div className=\"flex items-start justify-between gap-3\">\n            <div className=\"min-w-0\">\n              {title && <UIText as=\"div\" size=\"sm\" weight=\"semibold\">{title}</UIText>}\n              {subtitle && <UIText as=\"div\" size=\"xs\" muted className=\"mt-0.5\">{subtitle}</UIText>}\n            </div>\n            {actions && <div className=\"shrink-0\">{actions}</div>}\n          </div>\n        </div>\n      )}\n      <div className={`flex-1 overflow-y-auto ${bodyClassName}`}>\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"names":["FeedPanel","title","subtitle","actions","children","width","className","headerClassName","bodyClassName","rest","widthStyle","jsxs","jsx","UIText"],"mappings":";;;AAGA,SAAwBA,EAAU;AAAA,EAChC,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,iBAAAC,IAAkB;AAAA,EAClB,eAAAC,IAAgB;AAAA,EAChB,GAAGC;AACL,GAAG;AACD,QAAMC,IAAaL,IAAS,OAAOA,KAAU,WAAW,EAAE,OAAO,GAAGA,CAAK,KAAA,IAAS,EAAE,OAAAA,MAAW;AAE/F,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,wIAAwIL,CAAS;AAAA,MAC5J,OAAOI;AAAA,MACN,GAAGD;AAAA,MAEF,UAAA;AAAA,SAAAR,KAASC,KAAYC,MACrB,gBAAAS,EAAC,OAAA,EAAI,WAAW,sEAAsEL,CAAe,IACnG,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,WACZ,UAAA;AAAA,YAAAV,KAAS,gBAAAW,EAACC,KAAO,IAAG,OAAM,MAAK,MAAK,QAAO,YAAY,UAAAZ,EAAA,CAAM;AAAA,YAC7DC,KAAY,gBAAAU,EAACC,GAAA,EAAO,IAAG,OAAM,MAAK,MAAK,OAAK,IAAC,WAAU,UAAU,UAAAX,EAAA,CAAS;AAAA,UAAA,GAC7E;AAAA,UACCC,KAAW,gBAAAS,EAAC,OAAA,EAAI,WAAU,YAAY,UAAAT,EAAA,CAAQ;AAAA,QAAA,EAAA,CACjD,EAAA,CACF;AAAA,0BAED,OAAA,EAAI,WAAW,0BAA0BK,CAAa,IACpD,UAAAJ,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/library/cards/ListCard.js

@@ -0,0 +1,112 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import B from "react";
+import w from "./BaseCard.js";
+import i from "../ui/Text.js";
+import E from "../ui/Chip.js";
+function R(t) {
+  if (!t) return "";
+  try {
+    const a = t instanceof Date ? t : new Date(t);
+    return Number.isNaN(a.getTime()) ? String(t) : a.toLocaleString(void 0, { dateStyle: "medium", timeStyle: "short" });
+  } catch {
+    return String(t);
+  }
+}
+function _({ item: t }) {
+  const a = t?.avatar, d = t?.title ?? t?.name ?? "Item";
+  return a ? typeof a == "string" ? /* @__PURE__ */ e(
+    "img",
+    {
+      src: a,
+      alt: "",
+      className: "h-9 w-9 rounded-full border border-slate-200 object-cover dark:border-slate-800"
+    }
+  ) : B.isValidElement(a) ? /* @__PURE__ */ e("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-800", children: a }) : /* @__PURE__ */ e("div", { className: "h-9 w-9 rounded-full border border-slate-200 bg-slate-100 text-xs font-semibold text-slate-700 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-200 grid place-items-center", children: String(d).slice(0, 2).toUpperCase() }) : null;
+}
+function K({
+  items: t = [],
+  title: a,
+  subtitle: d,
+  showAvatars: n = !0,
+  showStatus: y = !0,
+  showActions: S = !0,
+  showTimestamp: j = !0,
+  dense: C = !1,
+  divided: U = !0,
+  actions: o,
+  itemActions: z,
+  onItemClick: c,
+  loading: L = !1,
+  error: m,
+  emptyMessage: T = "No items.",
+  emptyIcon: u,
+  maxBodyHeight: h,
+  ...b
+}) {
+  const g = /* @__PURE__ */ s("div", { className: "flex items-start justify-between gap-3", children: [
+    /* @__PURE__ */ s("div", { className: "min-w-0", children: [
+      a ? /* @__PURE__ */ e(i, { as: "div", size: "sm", weight: "medium", children: a }) : null,
+      d ? /* @__PURE__ */ e(i, { as: "div", size: "xs", muted: !0, className: "mt-1", children: d }) : null
+    ] }),
+    o ? /* @__PURE__ */ e("div", { className: "shrink-0", children: o }) : null
+  ] });
+  if (m)
+    return /* @__PURE__ */ e(
+      w,
+      {
+        variant: "widget",
+        header: g,
+        body: /* @__PURE__ */ e("div", { className: "mt-4 rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900 dark:border-rose-900/40 dark:bg-rose-950/30 dark:text-rose-100", children: String(m) }),
+        ...b
+      }
+    );
+  const D = C ? "py-2" : "py-3", I = h ? { maxHeight: h, overflowY: "auto" } : {}, V = L ? /* @__PURE__ */ e("div", { className: "mt-4 space-y-3", children: Array.from({ length: 4 }).map((r, l) => /* @__PURE__ */ s("div", { className: "flex items-center gap-3 rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-800 dark:bg-slate-900", children: [
+    n ? /* @__PURE__ */ e("div", { className: "h-9 w-9 animate-pulse rounded-full bg-slate-200 dark:bg-slate-800" }) : null,
+    /* @__PURE__ */ s("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ e("div", { className: "h-4 w-1/3 animate-pulse rounded bg-slate-200 dark:bg-slate-800" }),
+      /* @__PURE__ */ e("div", { className: "h-3 w-2/3 animate-pulse rounded bg-slate-200 dark:bg-slate-800" })
+    ] })
+  ] }, l)) }) : t.length === 0 ? /* @__PURE__ */ s("div", { className: "mt-4 rounded-xl border border-dashed border-slate-300 bg-slate-50 p-6 text-center dark:border-slate-700 dark:bg-slate-950/30", children: [
+    u ? /* @__PURE__ */ e("div", { className: "mb-2", children: u }) : null,
+    /* @__PURE__ */ e(i, { size: "sm", muted: !0, children: T })
+  ] }) : /* @__PURE__ */ e("div", { className: "mt-4 overflow-hidden rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900", children: /* @__PURE__ */ e("ul", { className: U ? "divide-y divide-slate-200 dark:divide-slate-800" : "", style: I, children: t.map((r, l) => {
+    const Y = r?.id ?? l, A = r?.title ?? r?.name ?? "Item", f = r?.description, x = r?.status, v = r?.timestamp, p = r?.value, N = r?.unit, k = S ? z?.(r, l) : null;
+    return /* @__PURE__ */ s(
+      "li",
+      {
+        className: [
+          "group flex items-start justify-between gap-3 px-4",
+          D,
+          c ? "cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-950/30" : ""
+        ].filter(Boolean).join(" "),
+        onClick: () => c?.(r, l),
+        children: [
+          /* @__PURE__ */ s("div", { className: "flex min-w-0 items-start gap-3", children: [
+            n ? /* @__PURE__ */ e(_, { item: r }) : null,
+            /* @__PURE__ */ s("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ e("div", { className: "text-sm font-semibold text-slate-900 dark:text-slate-50", children: A }),
+                y && x ? /* @__PURE__ */ e(E, { children: String(x) }) : null
+              ] }),
+              f ? /* @__PURE__ */ e("div", { className: "mt-1 text-sm text-slate-600 dark:text-slate-300", children: f }) : null,
+              j && v ? /* @__PURE__ */ e("div", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: R(v) }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ s("div", { className: "flex shrink-0 items-center gap-2", children: [
+            p != null ? /* @__PURE__ */ e("div", { className: "text-right", children: /* @__PURE__ */ s("div", { className: "text-sm font-semibold text-slate-900 dark:text-slate-50", children: [
+              String(p),
+              N ? /* @__PURE__ */ e("span", { className: "ml-1 text-xs font-medium text-slate-500 dark:text-slate-400", children: N }) : null
+            ] }) }) : null,
+            k ? /* @__PURE__ */ e("div", { className: "opacity-100 sm:opacity-0 sm:group-hover:opacity-100", children: k }) : null
+          ] })
+        ]
+      },
+      Y
+    );
+  }) }) });
+  return /* @__PURE__ */ e(w, { variant: "widget", header: g, body: V, isLoading: !1, ...b });
+}
+export {
+  K as default
+};
+//# sourceMappingURL=ListCard.js.map

package/dist/components/library/cards/ListCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListCard.js","sources":["../../../../src/components/library/cards/ListCard.jsx"],"sourcesContent":["import React from \"react\";\nimport BaseCard from \"./BaseCard\";\nimport UIText from \"../ui/Text\";\nimport UIChip from \"../ui/Chip\";\n\nfunction formatTimestamp(ts) {\n  if (!ts) return \"\";\n  try {\n    const d = ts instanceof Date ? ts : new Date(ts);\n    if (Number.isNaN(d.getTime())) return String(ts);\n    return d.toLocaleString(undefined, { dateStyle: \"medium\", timeStyle: \"short\" });\n  } catch {\n    return String(ts);\n  }\n}\n\nfunction Avatar({ item }) {\n  const avatar = item?.avatar;\n  const name = item?.title ?? item?.name ?? \"Item\";\n  if (!avatar) return null;\n  if (typeof avatar === \"string\") {\n    return (\n      <img\n        src={avatar}\n        alt=\"\"\n        className=\"h-9 w-9 rounded-full border border-slate-200 object-cover dark:border-slate-800\"\n      />\n    );\n  }\n  if (React.isValidElement(avatar)) {\n    return (\n      <div className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-800\">\n        {avatar}\n      </div>\n    );\n  }\n  return (\n    <div className=\"h-9 w-9 rounded-full border border-slate-200 bg-slate-100 text-xs font-semibold text-slate-700 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-200 grid place-items-center\">\n      {String(name).slice(0, 2).toUpperCase()}\n    </div>\n  );\n}\n\nexport default function ListCard({\n  items = [],\n  title,\n  subtitle,\n  showAvatars = true,\n  showStatus = true,\n  showActions = true,\n  showTimestamp = true,\n  dense = false,\n  divided = true,\n  actions,\n  itemActions,\n  onItemClick,\n  loading = false,\n  error,\n  emptyMessage = \"No items.\",\n  emptyIcon,\n  maxBodyHeight,\n  ...cardProps\n}) {\n  const header = (\n    <div className=\"flex items-start justify-between gap-3\">\n      <div className=\"min-w-0\">\n        {title ? (\n          <UIText as=\"div\" size=\"sm\" weight=\"medium\">\n            {title}\n          </UIText>\n        ) : null}\n        {subtitle ? (\n          <UIText as=\"div\" size=\"xs\" muted className=\"mt-1\">\n            {subtitle}\n          </UIText>\n        ) : null}\n      </div>\n      {actions ? <div className=\"shrink-0\">{actions}</div> : null}\n    </div>\n  );\n\n  if (error) {\n    return (\n      <BaseCard\n        variant=\"widget\"\n        header={header}\n        body={\n          <div className=\"mt-4 rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900 dark:border-rose-900/40 dark:bg-rose-950/30 dark:text-rose-100\">\n            {String(error)}\n          </div>\n        }\n        {...cardProps}\n      />\n    );\n  }\n\n  const padY = dense ? \"py-2\" : \"py-3\";\n\n  const scrollStyle = maxBodyHeight ? { maxHeight: maxBodyHeight, overflowY: \"auto\" } : {};\n\n  const body =\n    loading ? (\n      <div className=\"mt-4 space-y-3\">\n        {Array.from({ length: 4 }).map((_, i) => (\n          <div key={i} className=\"flex items-center gap-3 rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-800 dark:bg-slate-900\">\n            {showAvatars ? <div className=\"h-9 w-9 animate-pulse rounded-full bg-slate-200 dark:bg-slate-800\" /> : null}\n            <div className=\"flex-1 space-y-2\">\n              <div className=\"h-4 w-1/3 animate-pulse rounded bg-slate-200 dark:bg-slate-800\" />\n              <div className=\"h-3 w-2/3 animate-pulse rounded bg-slate-200 dark:bg-slate-800\" />\n            </div>\n          </div>\n        ))}\n      </div>\n    ) : items.length === 0 ? (\n      <div className=\"mt-4 rounded-xl border border-dashed border-slate-300 bg-slate-50 p-6 text-center dark:border-slate-700 dark:bg-slate-950/30\">\n        {emptyIcon ? <div className=\"mb-2\">{emptyIcon}</div> : null}\n        <UIText size=\"sm\" muted>\n          {emptyMessage}\n        </UIText>\n      </div>\n    ) : (\n      <div className=\"mt-4 overflow-hidden rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900\">\n        <ul className={divided ? \"divide-y divide-slate-200 dark:divide-slate-800\" : \"\"} style={scrollStyle}>\n          {items.map((item, idx) => {\n            const key = item?.id ?? idx;\n            const name = item?.title ?? item?.name ?? \"Item\";\n            const desc = item?.description;\n            const status = item?.status;\n            const ts = item?.timestamp;\n            const itemValue = item?.value;\n            const itemUnit = item?.unit;\n            const right = showActions ? itemActions?.(item, idx) : null;\n\n            return (\n              <li\n                key={key}\n                className={[\n                  \"group flex items-start justify-between gap-3 px-4\",\n                  padY,\n                  onItemClick ? \"cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-950/30\" : \"\"\n                ]\n                  .filter(Boolean)\n                  .join(\" \")}\n                onClick={() => onItemClick?.(item, idx)}\n              >\n                <div className=\"flex min-w-0 items-start gap-3\">\n                  {showAvatars ? <Avatar item={item} /> : null}\n                  <div className=\"min-w-0\">\n                    <div className=\"flex flex-wrap items-center gap-2\">\n                      <div className=\"text-sm font-semibold text-slate-900 dark:text-slate-50\">\n                        {name}\n                      </div>\n                      {showStatus && status ? (\n                        <UIChip>{String(status)}</UIChip>\n                      ) : null}\n                    </div>\n                    {desc ? (\n                      <div className=\"mt-1 text-sm text-slate-600 dark:text-slate-300\">{desc}</div>\n                    ) : null}\n                    {showTimestamp && ts ? (\n                      <div className=\"mt-1 text-xs text-slate-500 dark:text-slate-400\">\n                        {formatTimestamp(ts)}\n                      </div>\n                    ) : null}\n                  </div>\n                </div>\n\n                <div className=\"flex shrink-0 items-center gap-2\">\n                  {itemValue != null ? (\n                    <div className=\"text-right\">\n                      <div className=\"text-sm font-semibold text-slate-900 dark:text-slate-50\">\n                        {String(itemValue)}\n                        {itemUnit ? <span className=\"ml-1 text-xs font-medium text-slate-500 dark:text-slate-400\">{itemUnit}</span> : null}\n                      </div>\n                    </div>\n                  ) : null}\n                  {right ? (\n                    <div className=\"opacity-100 sm:opacity-0 sm:group-hover:opacity-100\">\n                      {right}\n                    </div>\n                  ) : null}\n                </div>\n              </li>\n            );\n          })}\n        </ul>\n      </div>\n    );\n\n  return <BaseCard variant=\"widget\" header={header} body={body} isLoading={false} {...cardProps} />;\n}\n\n\n"],"names":["formatTimestamp","ts","d","Avatar","item","avatar","name","jsx","React","ListCard","items","title","subtitle","showAvatars","showStatus","showActions","showTimestamp","dense","divided","actions","itemActions","onItemClick","loading","error","emptyMessage","emptyIcon","maxBodyHeight","cardProps","header","jsxs","UIText","BaseCard","padY","scrollStyle","body","_","i","idx","key","desc","status","itemValue","itemUnit","right","UIChip"],"mappings":"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"}

package/dist/components/library/cards/MetricCard.js

@@ -0,0 +1,86 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import "react";
+import x from "./BaseCard.js";
+const o = {
+  positive: "text-emerald-700 dark:text-emerald-400",
+  negative: "text-rose-700 dark:text-rose-400",
+  neutral: "text-slate-600 dark:text-slate-300"
+}, b = {
+  default: "bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-100",
+  primary: "bg-brand-100 text-brand-800 dark:bg-brand-950/40 dark:text-brand-200",
+  success: "bg-emerald-100 text-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-200",
+  warning: "bg-amber-100 text-amber-900 dark:bg-amber-950/40 dark:text-amber-200",
+  danger: "bg-rose-100 text-rose-800 dark:bg-rose-950/40 dark:text-rose-200"
+};
+function L({
+  title: u,
+  value: g,
+  subtitle: s,
+  change: a,
+  changeType: f = "neutral",
+  icon: l,
+  color: k = "default",
+  trend: r,
+  trendIcon: d,
+  layout: p = "default",
+  footer: i,
+  actions: n,
+  loading: h = !1,
+  error: m,
+  ...c
+}) {
+  const v = o[f] ?? o.neutral, N = b[k] ?? b.default;
+  if (m)
+    return /* @__PURE__ */ e(
+      x,
+      {
+        variant: "metric",
+        body: /* @__PURE__ */ e("div", { className: "rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900 dark:border-rose-900/40 dark:bg-rose-950/30 dark:text-rose-100", children: String(m) }),
+        ...c
+      }
+    );
+  const y = /* @__PURE__ */ t("div", { className: "flex items-start justify-between gap-3", children: [
+    /* @__PURE__ */ t("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ e("div", { className: "text-sm font-medium text-slate-600 dark:text-slate-300", children: u }),
+      s ? /* @__PURE__ */ e("div", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: s }) : null
+    ] }),
+    n ? /* @__PURE__ */ e("div", { className: "shrink-0", children: n }) : null
+  ] }), j = /* @__PURE__ */ e("div", { className: ["mt-2", p === "compact" ? "space-y-1" : "space-y-2"].join(" "), children: /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [
+    /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+      l ? /* @__PURE__ */ e(
+        "span",
+        {
+          className: [
+            "inline-flex h-8 w-8 items-center justify-center rounded-lg",
+            N
+          ].join(" "),
+          "aria-hidden": "true",
+          children: l
+        }
+      ) : null,
+      /* @__PURE__ */ e("div", { className: "text-2xl font-semibold tracking-tight text-slate-900 dark:text-slate-50", children: g })
+    ] }),
+    (a || r) && /* @__PURE__ */ t("div", { className: ["flex items-center gap-1.5 text-xs font-medium", v].join(" "), children: [
+      d ? /* @__PURE__ */ e("span", { "aria-hidden": "true", children: d }) : null,
+      a ? /* @__PURE__ */ e("span", { children: a }) : null,
+      r ? /* @__PURE__ */ e("span", { className: "text-[11px] font-normal text-slate-500 dark:text-slate-400", children: r }) : null
+    ] })
+  ] }) });
+  return /* @__PURE__ */ e(
+    x,
+    {
+      variant: "metric",
+      padding: "sm",
+      size: "sm",
+      header: y,
+      body: j,
+      footer: i ? /* @__PURE__ */ e("div", { className: "mt-3", children: i }) : null,
+      isLoading: h,
+      ...c
+    }
+  );
+}
+export {
+  L as default
+};
+//# sourceMappingURL=MetricCard.js.map

package/dist/components/library/cards/MetricCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCard.js","sources":["../../../../src/components/library/cards/MetricCard.jsx"],"sourcesContent":["import React from \"react\";\nimport BaseCard from \"./BaseCard\";\n\nconst CHANGE_STYLES = {\n  positive: \"text-emerald-700 dark:text-emerald-400\",\n  negative: \"text-rose-700 dark:text-rose-400\",\n  neutral: \"text-slate-600 dark:text-slate-300\"\n};\n\nconst COLOR_STYLES = {\n  default: \"bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-100\",\n  primary: \"bg-brand-100 text-brand-800 dark:bg-brand-950/40 dark:text-brand-200\",\n  success: \"bg-emerald-100 text-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-200\",\n  warning: \"bg-amber-100 text-amber-900 dark:bg-amber-950/40 dark:text-amber-200\",\n  danger: \"bg-rose-100 text-rose-800 dark:bg-rose-950/40 dark:text-rose-200\"\n};\n\nexport default function MetricCard({\n  title,\n  value,\n  subtitle,\n  change,\n  changeType = \"neutral\",\n  icon,\n  color = \"default\",\n  trend,\n  trendIcon,\n  layout = \"default\",\n  footer,\n  actions,\n  loading = false,\n  error,\n  ...cardProps\n}) {\n  const changeClass = CHANGE_STYLES[changeType] ?? CHANGE_STYLES.neutral;\n  const pillClass = COLOR_STYLES[color] ?? COLOR_STYLES.default;\n\n  if (error) {\n    return (\n      <BaseCard\n        variant=\"metric\"\n        body={\n          <div className=\"rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900 dark:border-rose-900/40 dark:bg-rose-950/30 dark:text-rose-100\">\n            {String(error)}\n          </div>\n        }\n        {...cardProps}\n      />\n    );\n  }\n\n  const header = (\n    <div className=\"flex items-start justify-between gap-3\">\n      <div className=\"min-w-0\">\n        <div className=\"text-sm font-medium text-slate-600 dark:text-slate-300\">{title}</div>\n        {subtitle ? (\n          <div className=\"mt-1 text-xs text-slate-500 dark:text-slate-400\">{subtitle}</div>\n        ) : null}\n      </div>\n      {actions ? <div className=\"shrink-0\">{actions}</div> : null}\n    </div>\n  );\n\n  const body = (\n    <div className={[\"mt-2\", layout === \"compact\" ? \"space-y-1\" : \"space-y-2\"].join(\" \")}>\n      <div className=\"flex flex-wrap items-center gap-x-3 gap-y-1\">\n        <div className=\"flex items-center gap-2\">\n          {icon ? (\n            <span\n              className={[\n                \"inline-flex h-8 w-8 items-center justify-center rounded-lg\",\n                pillClass\n              ].join(\" \")}\n              aria-hidden=\"true\"\n            >\n              {icon}\n            </span>\n          ) : null}\n          <div className=\"text-2xl font-semibold tracking-tight text-slate-900 dark:text-slate-50\">\n            {value}\n          </div>\n        </div>\n\n        {(change || trend) && (\n          <div className={[\"flex items-center gap-1.5 text-xs font-medium\", changeClass].join(\" \")}>\n            {trendIcon ? <span aria-hidden=\"true\">{trendIcon}</span> : null}\n            {change ? <span>{change}</span> : null}\n            {trend ? <span className=\"text-[11px] font-normal text-slate-500 dark:text-slate-400\">{trend}</span> : null}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n\n  return (\n    <BaseCard\n      variant=\"metric\"\n      padding=\"sm\"\n      size=\"sm\"\n      header={header}\n      body={body}\n      footer={footer ? <div className=\"mt-3\">{footer}</div> : null}\n      isLoading={loading}\n      {...cardProps}\n    />\n  );\n}\n\n\n"],"names":["CHANGE_STYLES","COLOR_STYLES","MetricCard","title","value","subtitle","change","changeType","icon","color","trend","trendIcon","layout","footer","actions","loading","error","cardProps","changeClass","pillClass","jsx","BaseCard","header","jsxs","body"],"mappings":";;;AAGA,MAAMA,IAAgB;AAAA,EACpB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AACX,GAEMC,IAAe;AAAA,EACnB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAEA,SAAwBC,EAAW;AAAA,EACjC,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,MAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,GAAGC;AACL,GAAG;AACD,QAAMC,IAAclB,EAAcO,CAAU,KAAKP,EAAc,SACzDmB,IAAYlB,EAAaQ,CAAK,KAAKR,EAAa;AAEtD,MAAIe;AACF,WACE,gBAAAI;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MACE,gBAAAD,EAAC,OAAA,EAAI,WAAU,yIACZ,UAAA,OAAOJ,CAAK,GACf;AAAA,QAED,GAAGC;AAAA,MAAA;AAAA,IAAA;AAKV,QAAMK,IACJ,gBAAAC,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,WACb,UAAA;AAAA,MAAA,gBAAAH,EAAC,OAAA,EAAI,WAAU,0DAA0D,UAAAjB,GAAM;AAAA,MAC9EE,IACC,gBAAAe,EAAC,OAAA,EAAI,WAAU,mDAAmD,aAAS,IACzE;AAAA,IAAA,GACN;AAAA,IACCN,IAAU,gBAAAM,EAAC,OAAA,EAAI,WAAU,YAAY,aAAQ,IAAS;AAAA,EAAA,GACzD,GAGII,IACJ,gBAAAJ,EAAC,OAAA,EAAI,WAAW,CAAC,QAAQR,MAAW,YAAY,cAAc,WAAW,EAAE,KAAK,GAAG,GACjF,UAAA,gBAAAW,EAAC,OAAA,EAAI,WAAU,+CACb,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,MAAAf,IACC,gBAAAY;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACAD;AAAA,UAAA,EACA,KAAK,GAAG;AAAA,UACV,eAAY;AAAA,UAEX,UAAAX;AAAA,QAAA;AAAA,MAAA,IAED;AAAA,MACJ,gBAAAY,EAAC,OAAA,EAAI,WAAU,2EACZ,UAAAhB,EAAA,CACH;AAAA,IAAA,GACF;AAAA,KAEEE,KAAUI,MACV,gBAAAa,EAAC,OAAA,EAAI,WAAW,CAAC,iDAAiDL,CAAW,EAAE,KAAK,GAAG,GACpF,UAAA;AAAA,MAAAP,IAAY,gBAAAS,EAAC,QAAA,EAAK,eAAY,QAAQ,aAAU,IAAU;AAAA,MAC1Dd,IAAS,gBAAAc,EAAC,QAAA,EAAM,UAAAd,EAAA,CAAO,IAAU;AAAA,MACjCI,IAAQ,gBAAAU,EAAC,QAAA,EAAK,WAAU,8DAA8D,aAAM,IAAU;AAAA,IAAA,EAAA,CACzG;AAAA,EAAA,EAAA,CAEJ,EAAA,CACF;AAGF,SACE,gBAAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAAC;AAAA,MACA,MAAAE;AAAA,MACA,QAAQX,IAAS,gBAAAO,EAAC,SAAI,WAAU,QAAQ,aAAO,IAAS;AAAA,MACxD,WAAWL;AAAA,MACV,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/library/cards/MetricsStrip.js

@@ -0,0 +1,60 @@
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import { useState as x } from "react";
+const u = [
+  { label: "Metric A", value: "—", trend: null },
+  { label: "Metric B", value: "—", trend: null },
+  { label: "Metric C", value: "—", trend: null }
+];
+function f({
+  metrics: e = [],
+  title: r,
+  collapsible: s = !1,
+  collapsed: n = !1,
+  className: d = ""
+}) {
+  const [c, i] = x(n), o = e.length ? e : u;
+  return s && c ? /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      onClick: () => i(!1),
+      className: `flex w-full items-center justify-between rounded-lg border border-slate-200 bg-white px-3 py-2 text-left text-xs text-slate-500 hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 ${d}`,
+      children: [
+        /* @__PURE__ */ a("span", { children: [
+          r ?? "Metrics",
+          ": ",
+          o.map((t) => `${t.label} ${t.value}`).join(" · ")
+        ] }),
+        /* @__PURE__ */ l("span", { children: "▸" })
+      ]
+    }
+  ) : /* @__PURE__ */ a("div", { className: `rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-800 dark:bg-slate-900 ${d}`, children: [
+    (r || s) && /* @__PURE__ */ a("div", { className: "mb-2 flex items-center justify-between", children: [
+      /* @__PURE__ */ l("span", { className: "text-xs font-medium text-slate-500 dark:text-slate-400", children: r ?? "Metrics" }),
+      s && /* @__PURE__ */ l(
+        "button",
+        {
+          type: "button",
+          onClick: () => i(!0),
+          className: "text-xs text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300",
+          children: "Collapse"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-4", children: o.map((t) => /* @__PURE__ */ a("div", { className: "min-w-[80px]", children: [
+      /* @__PURE__ */ l("div", { className: "text-xs text-slate-400 dark:text-slate-500", children: t.label }),
+      /* @__PURE__ */ a("div", { className: "flex items-baseline gap-1.5", children: [
+        /* @__PURE__ */ l("span", { className: "text-sm font-semibold text-slate-700 dark:text-slate-200", children: t.value }),
+        t.trend != null && /* @__PURE__ */ l(b, { trend: t.trend })
+      ] })
+    ] }, t.label)) })
+  ] });
+}
+function b({ trend: e }) {
+  const s = String(e).startsWith?.("+") || e > 0 ? "text-red-500" : "text-emerald-500", n = typeof e == "number" && e > 0 ? `+${e}` : e;
+  return /* @__PURE__ */ l("span", { className: `text-xs ${s}`, children: n });
+}
+export {
+  f as default
+};
+//# sourceMappingURL=MetricsStrip.js.map

package/dist/components/library/cards/MetricsStrip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsStrip.js","sources":["../../../../src/components/library/cards/MetricsStrip.jsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nconst PLACEHOLDER_METRICS = [\n  { label: \"Metric A\", value: \"—\", trend: null },\n  { label: \"Metric B\", value: \"—\", trend: null },\n  { label: \"Metric C\", value: \"—\", trend: null },\n];\n\n/**\n * Horizontal strip of KPI metrics — compact alternative to a row of MetricCards.\n *\n * @param {{ label: string, value: string|number, trend?: string|number }[]} metrics\n * @param {string}  title\n * @param {boolean} collapsible   Allow collapsing into a single-line summary\n * @param {boolean} collapsed     Initial collapsed state\n */\nexport default function MetricsStrip({\n  metrics = [],\n  title,\n  collapsible = false,\n  collapsed: initialCollapsed = false,\n  className = \"\",\n}) {\n  const [collapsed, setCollapsed] = useState(initialCollapsed);\n  const items = metrics.length ? metrics : PLACEHOLDER_METRICS;\n\n  if (collapsible && collapsed) {\n    return (\n      <button\n        type=\"button\"\n        onClick={() => setCollapsed(false)}\n        className={`flex w-full items-center justify-between rounded-lg border border-slate-200 bg-white px-3 py-2 text-left text-xs text-slate-500 hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 ${className}`}\n      >\n        <span>{title ?? \"Metrics\"}: {items.map((m) => `${m.label} ${m.value}`).join(\" · \")}</span>\n        <span>▸</span>\n      </button>\n    );\n  }\n\n  return (\n    <div className={`rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-800 dark:bg-slate-900 ${className}`}>\n      {(title || collapsible) && (\n        <div className=\"mb-2 flex items-center justify-between\">\n          <span className=\"text-xs font-medium text-slate-500 dark:text-slate-400\">{title ?? \"Metrics\"}</span>\n          {collapsible && (\n            <button\n              type=\"button\"\n              onClick={() => setCollapsed(true)}\n              className=\"text-xs text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300\"\n            >\n              Collapse\n            </button>\n          )}\n        </div>\n      )}\n      <div className=\"flex flex-wrap gap-4\">\n        {items.map((m) => (\n          <div key={m.label} className=\"min-w-[80px]\">\n            <div className=\"text-xs text-slate-400 dark:text-slate-500\">{m.label}</div>\n            <div className=\"flex items-baseline gap-1.5\">\n              <span className=\"text-sm font-semibold text-slate-700 dark:text-slate-200\">{m.value}</span>\n              {m.trend != null && (\n                <TrendBadge trend={m.trend} />\n              )}\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction TrendBadge({ trend }) {\n  const isPositive = String(trend).startsWith?.(\"+\") || trend > 0;\n  const color = isPositive ? \"text-red-500\" : \"text-emerald-500\";\n  const label = typeof trend === \"number\" ? (trend > 0 ? `+${trend}` : trend) : trend;\n  return <span className={`text-xs ${color}`}>{label}</span>;\n}\n"],"names":["PLACEHOLDER_METRICS","MetricsStrip","metrics","title","collapsible","initialCollapsed","className","collapsed","setCollapsed","useState","items","jsxs","m","jsx","TrendBadge","trend","color","label"],"mappings":";;AAEA,MAAMA,IAAsB;AAAA,EAC1B,EAAE,OAAO,YAAY,OAAO,KAAK,OAAO,KAAA;AAAA,EACxC,EAAE,OAAO,YAAY,OAAO,KAAK,OAAO,KAAA;AAAA,EACxC,EAAE,OAAO,YAAY,OAAO,KAAK,OAAO,KAAA;AAC1C;AAUA,SAAwBC,EAAa;AAAA,EACnC,SAAAC,IAAU,CAAA;AAAA,EACV,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAWC,IAAmB;AAAA,EAC9B,WAAAC,IAAY;AACd,GAAG;AACD,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAASJ,CAAgB,GACrDK,IAAQR,EAAQ,SAASA,IAAUF;AAEzC,SAAII,KAAeG,IAEf,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAMH,EAAa,EAAK;AAAA,MACjC,WAAW,yOAAyOF,CAAS;AAAA,MAE7P,UAAA;AAAA,QAAA,gBAAAK,EAAC,QAAA,EAAM,UAAA;AAAA,UAAAR,KAAS;AAAA,UAAU;AAAA,UAAGO,EAAM,IAAI,CAACE,MAAM,GAAGA,EAAE,KAAK,IAAIA,EAAE,KAAK,EAAE,EAAE,KAAK,KAAK;AAAA,QAAA,GAAE;AAAA,QACnF,gBAAAC,EAAC,UAAK,UAAA,IAAA,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAMX,gBAAAF,EAAC,OAAA,EAAI,WAAW,2FAA2FL,CAAS,IAChH,UAAA;AAAA,KAAAH,KAASC,MACT,gBAAAO,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,MAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,0DAA0D,UAAAV,KAAS,WAAU;AAAA,MAC5FC,KACC,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAML,EAAa,EAAI;AAAA,UAChC,WAAU;AAAA,UACX,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED,GAEJ;AAAA,IAEF,gBAAAK,EAAC,OAAA,EAAI,WAAU,wBACZ,UAAAH,EAAM,IAAI,CAACE,MACV,gBAAAD,EAAC,OAAA,EAAkB,WAAU,gBAC3B,UAAA;AAAA,MAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,8CAA8C,UAAAD,EAAE,OAAM;AAAA,MACrE,gBAAAD,EAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,QAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,4DAA4D,UAAAD,EAAE,OAAM;AAAA,QACnFA,EAAE,SAAS,0BACTE,GAAA,EAAW,OAAOF,EAAE,MAAA,CAAO;AAAA,MAAA,EAAA,CAEhC;AAAA,IAAA,KAPQA,EAAE,KAQZ,CACD,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;AAEA,SAASE,EAAW,EAAE,OAAAC,KAAS;AAE7B,QAAMC,IADa,OAAOD,CAAK,EAAE,aAAa,GAAG,KAAKA,IAAQ,IACnC,iBAAiB,oBACtCE,IAAQ,OAAOF,KAAU,YAAYA,IAAQ,IAAI,IAAIA,CAAK,KAAcA;AAC9E,2BAAQ,QAAA,EAAK,WAAW,WAAWC,CAAK,IAAK,UAAAC,GAAM;AACrD;"}

package/dist/components/library/cards/SectionCard.js

@@ -0,0 +1,59 @@
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import "react";
+import k from "./BaseCard.js";
+import r from "../ui/Text.js";
+const n = {
+  default: "bg-white dark:bg-slate-900",
+  primary: "bg-brand-50 dark:bg-brand-950/30",
+  secondary: "bg-slate-50 dark:bg-slate-950/30",
+  accent: "bg-emerald-50 dark:bg-emerald-950/25"
+}, i = {
+  sm: { title: "text-lg", desc: "text-sm", pad: "p-4" },
+  md: { title: "text-xl", desc: "text-sm", pad: "p-5" },
+  lg: { title: "text-2xl", desc: "text-base", pad: "p-6" },
+  xl: { title: "text-3xl", desc: "text-base", pad: "p-7" }
+}, c = {
+  left: "text-left items-start",
+  center: "text-center items-center",
+  right: "text-right items-end"
+};
+function v({
+  title: a,
+  description: l,
+  label: s,
+  variant: o = "default",
+  showDivider: m = !0,
+  alignment: x = "left",
+  size: g = "md",
+  isDark: p = !1,
+  className: f = "",
+  ...b
+}) {
+  const e = i[g] ?? i.md, u = c[x] ?? c.left, h = n[o] ?? n.default;
+  return /* @__PURE__ */ t(
+    k,
+    {
+      variant: "widget",
+      padding: "none",
+      className: [
+        h,
+        p ? "dark" : "",
+        "overflow-hidden",
+        f
+      ].filter(Boolean).join(" "),
+      ...b,
+      body: /* @__PURE__ */ d("div", { className: e.pad, children: [
+        /* @__PURE__ */ d("div", { className: ["flex flex-col gap-2", u].join(" "), children: [
+          s ? /* @__PURE__ */ t("span", { className: "inline-flex rounded-full bg-slate-900 px-2 py-1 text-[11px] font-semibold text-white dark:bg-slate-100 dark:text-slate-900", children: s }) : null,
+          a ? /* @__PURE__ */ t(r, { as: "h2", weight: "bold", className: ["tracking-tight", e.title].join(" "), children: a }) : null,
+          l ? /* @__PURE__ */ t(r, { as: "p", muted: !0, className: [e.desc, "max-w-3xl"].join(" "), children: l }) : null
+        ] }),
+        m ? /* @__PURE__ */ t("div", { className: "mt-4 h-px w-full bg-slate-200 dark:bg-slate-800" }) : null
+      ] })
+    }
+  );
+}
+export {
+  v as default
+};
+//# sourceMappingURL=SectionCard.js.map

package/dist/components/library/cards/SectionCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionCard.js","sources":["../../../../src/components/library/cards/SectionCard.jsx"],"sourcesContent":["import React from \"react\";\nimport BaseCard from \"./BaseCard\";\nimport UIText from \"../ui/Text\";\n\nconst VARIANT_STYLES = {\n  default: \"bg-white dark:bg-slate-900\",\n  primary: \"bg-brand-50 dark:bg-brand-950/30\",\n  secondary: \"bg-slate-50 dark:bg-slate-950/30\",\n  accent: \"bg-emerald-50 dark:bg-emerald-950/25\"\n};\n\nconst SIZE_STYLES = {\n  sm: { title: \"text-lg\", desc: \"text-sm\", pad: \"p-4\" },\n  md: { title: \"text-xl\", desc: \"text-sm\", pad: \"p-5\" },\n  lg: { title: \"text-2xl\", desc: \"text-base\", pad: \"p-6\" },\n  xl: { title: \"text-3xl\", desc: \"text-base\", pad: \"p-7\" }\n};\n\nconst ALIGN_STYLES = {\n  left: \"text-left items-start\",\n  center: \"text-center items-center\",\n  right: \"text-right items-end\"\n};\n\nexport default function SectionCard({\n  title,\n  description,\n  label,\n  variant = \"default\",\n  showDivider = true,\n  alignment = \"left\",\n  size = \"md\",\n  isDark = false,\n  className = \"\",\n  ...cardProps\n}) {\n  const s = SIZE_STYLES[size] ?? SIZE_STYLES.md;\n  const align = ALIGN_STYLES[alignment] ?? ALIGN_STYLES.left;\n  const variantClass = VARIANT_STYLES[variant] ?? VARIANT_STYLES.default;\n\n  return (\n    <BaseCard\n      variant=\"widget\"\n      padding=\"none\"\n      className={[\n        variantClass,\n        isDark ? \"dark\" : \"\",\n        \"overflow-hidden\",\n        className\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...cardProps}\n      body={\n        <div className={s.pad}>\n          <div className={[\"flex flex-col gap-2\", align].join(\" \")}>\n            {label ? (\n              <span className=\"inline-flex rounded-full bg-slate-900 px-2 py-1 text-[11px] font-semibold text-white dark:bg-slate-100 dark:text-slate-900\">\n                {label}\n              </span>\n            ) : null}\n            {title ? (\n              <UIText as=\"h2\" weight=\"bold\" className={[\"tracking-tight\", s.title].join(\" \")}>\n                {title}\n              </UIText>\n            ) : null}\n            {description ? (\n              <UIText as=\"p\" muted className={[s.desc, \"max-w-3xl\"].join(\" \")}>\n                {description}\n              </UIText>\n            ) : null}\n          </div>\n\n          {showDivider ? (\n            <div className=\"mt-4 h-px w-full bg-slate-200 dark:bg-slate-800\" />\n          ) : null}\n        </div>\n      }\n    />\n  );\n}\n\n\n"],"names":["VARIANT_STYLES","SIZE_STYLES","ALIGN_STYLES","SectionCard","title","description","label","variant","showDivider","alignment","size","isDark","className","cardProps","s","align","variantClass","jsx","BaseCard","jsxs","UIText"],"mappings":";;;;AAIA,MAAMA,IAAiB;AAAA,EACrB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,QAAQ;AACV,GAEMC,IAAc;AAAA,EAClB,IAAI,EAAE,OAAO,WAAW,MAAM,WAAW,KAAK,MAAA;AAAA,EAC9C,IAAI,EAAE,OAAO,WAAW,MAAM,WAAW,KAAK,MAAA;AAAA,EAC9C,IAAI,EAAE,OAAO,YAAY,MAAM,aAAa,KAAK,MAAA;AAAA,EACjD,IAAI,EAAE,OAAO,YAAY,MAAM,aAAa,KAAK,MAAA;AACnD,GAEMC,IAAe;AAAA,EACnB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,SAAwBC,EAAY;AAAA,EAClC,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAG;AACD,QAAMC,IAAIb,EAAYS,CAAI,KAAKT,EAAY,IACrCc,IAAQb,EAAaO,CAAS,KAAKP,EAAa,MAChDc,IAAehB,EAAeO,CAAO,KAAKP,EAAe;AAE/D,SACE,gBAAAiB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,WAAW;AAAA,QACTF;AAAA,QACAL,IAAS,SAAS;AAAA,QAClB;AAAA,QACAC;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MACJ,MACE,gBAAAM,EAAC,OAAA,EAAI,WAAWL,EAAE,KAChB,UAAA;AAAA,QAAA,gBAAAK,EAAC,OAAA,EAAI,WAAW,CAAC,uBAAuBJ,CAAK,EAAE,KAAK,GAAG,GACpD,UAAA;AAAA,UAAAT,IACC,gBAAAW,EAAC,QAAA,EAAK,WAAU,8HACb,aACH,IACE;AAAA,UACHb,IACC,gBAAAa,EAACG,GAAA,EAAO,IAAG,MAAK,QAAO,QAAO,WAAW,CAAC,kBAAkBN,EAAE,KAAK,EAAE,KAAK,GAAG,GAC1E,aACH,IACE;AAAA,UACHT,IACC,gBAAAY,EAACG,GAAA,EAAO,IAAG,KAAI,OAAK,IAAC,WAAW,CAACN,EAAE,MAAM,WAAW,EAAE,KAAK,GAAG,GAC3D,aACH,IACE;AAAA,QAAA,GACN;AAAA,QAECN,IACC,gBAAAS,EAAC,OAAA,EAAI,WAAU,mDAAkD,IAC/D;AAAA,MAAA,EAAA,CACN;AAAA,IAAA;AAAA,EAAA;AAIR;"}