@schandlergarcia/sf-web-components 1.7.0 → 1.8.0

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

@@ -1,9 +1,9 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
 import A from "react";
 import w from "./BaseCard.js";
-import i from "../ui/Text.js";
-import B from "../ui/Chip.js";
-function E(t) {
+import n 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);
@@ -12,7 +12,7 @@ function E(t) {
     return String(t);
   }
 }
-function R({ item: t }) {
+function $({ item: t }) {
   const a = t?.avatar, d = t?.title ?? t?.name ?? "Item";
   return a ? typeof a == "string" ? /* @__PURE__ */ e(
     "img",
@@ -23,78 +23,78 @@ function R({ item: t }) {
     }
   ) : A.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({
+function M({
   items: t = [],
   title: a,
   subtitle: d,
-  showAvatars: n = !0,
+  showAvatars: o = !0,
   showStatus: y = !0,
   showActions: S = !0,
   showTimestamp: j = !0,
   dense: C = !1,
   divided: U = !0,
-  actions: o,
+  actions: c,
   itemActions: z,
-  onItemClick: c,
+  onItemClick: m,
   loading: L = !1,
-  error: m,
+  error: u,
   emptyMessage: T = "No items.",
-  emptyIcon: u,
-  maxBodyHeight: h,
-  ...b
+  emptyIcon: b,
+  maxBodyHeight: i,
+  ...h
 }) {
-  const g = /* @__PURE__ */ s("div", { className: "flex items-start justify-between gap-3", children: [
+  const f = /* @__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
+      a ? /* @__PURE__ */ e(n, { as: "div", size: "sm", weight: "medium", children: a }) : null,
+      d ? /* @__PURE__ */ e(n, { as: "div", size: "xs", muted: !0, className: "mt-1", children: d }) : null
     ] }),
-    o ? /* @__PURE__ */ e("div", { className: "shrink-0", children: o }) : null
+    c ? /* @__PURE__ */ e("div", { className: "shrink-0", children: c }) : null
   ] });
-  if (m)
+  if (u)
     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
+        header: f,
+        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) }),
+        ...h
       }
     );
-  const _ = C ? "py-2" : "py-3", D = h ? { maxHeight: h, overflowY: "auto" } : {}, I = 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,
+  const _ = C ? "py-2" : "py-3", D = i ? { maxHeight: typeof i == "number" ? `${i}px` : i, overflowY: "auto" } : {}, I = 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: [
+    o ? /* @__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 })
+    b ? /* @__PURE__ */ e("div", { className: "mb-2", children: b }) : null,
+    /* @__PURE__ */ e(n, { 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: D, children: t.map((r, l) => {
-    const V = r?.id ?? l, Y = 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;
+    const V = r?.id ?? l, Y = r?.title ?? r?.name ?? "Item", g = r?.description, p = r?.status, v = r?.timestamp, x = 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",
           _,
-          c ? "cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-950/30" : ""
+          m ? "cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-950/30" : ""
         ].filter(Boolean).join(" "),
-        onClick: () => c?.(r, l),
+        onClick: () => m?.(r, l),
         children: [
           /* @__PURE__ */ s("div", { className: "flex min-w-0 items-start gap-3", children: [
-            n ? /* @__PURE__ */ e(R, { item: r }) : null,
+            o ? /* @__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: Y }),
-                y && x ? /* @__PURE__ */ e(B, { children: String(x) }) : null
+                y && p ? /* @__PURE__ */ e(E, { children: String(p) }) : 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: E(v) }) : null
+              g ? /* @__PURE__ */ e("div", { className: "mt-1 text-sm text-slate-600 dark:text-slate-300", children: g }) : 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),
+            x != 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(x),
               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
@@ -104,9 +104,9 @@ function K({
       V
     );
   }) }) });
-  return /* @__PURE__ */ e(w, { variant: "widget", header: g, body: I, isLoading: !1, ...b });
+  return /* @__PURE__ */ e(w, { variant: "widget", header: f, body: I, isLoading: !1, ...h });
 }
 export {
-  K as default
+  M as default
 };
 //# sourceMappingURL=ListCard.js.map

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

@@ -1 +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":";;;;;AAKA,SAASA,EAAgBC,GAAI;AAC3B,MAAI,CAACA,EAAI,QAAO;AAChB,MAAI;AACF,UAAMC,IAAID,aAAc,OAAOA,IAAK,IAAI,KAAKA,CAAE;AAC/C,WAAI,OAAO,MAAMC,EAAE,QAAA,CAAS,IAAU,OAAOD,CAAE,IACxCC,EAAE,eAAe,QAAW,EAAE,WAAW,UAAU,WAAW,SAAS;AAAA,EAChF,QAAQ;AACN,WAAO,OAAOD,CAAE;AAAA,EAClB;AACF;AAEA,SAASE,EAAO,EAAE,MAAAC,KAAQ;AACxB,QAAMC,IAASD,GAAM,QACfE,IAAOF,GAAM,SAASA,GAAM,QAAQ;AAC1C,SAAKC,IACD,OAAOA,KAAW,WAElB,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKF;AAAA,MACL,KAAI;AAAA,MACJ,WAAU;AAAA,IAAA;AAAA,EAAA,IAIZG,EAAM,eAAeH,CAAM,IAE3B,gBAAAE,EAAC,OAAA,EAAI,WAAU,8IACZ,UAAAF,GACH,IAIF,gBAAAE,EAAC,OAAA,EAAI,WAAU,sLACZ,UAAA,OAAOD,CAAI,EAAE,MAAM,GAAG,CAAC,EAAE,YAAA,EAAY,CACxC,IApBkB;AAsBtB;AAEA,SAAwBG,EAAS;AAAA,EAC/B,OAAAC,IAAQ,CAAA;AAAA,EACR,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,aAAAC,IAAc;AAAA,EACd,eAAAC,IAAgB;AAAA,EAChB,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACL,GAAG;AACD,QAAMC,IACJ,gBAAAC,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,WACZ,UAAA;AAAA,MAAAlB,IACC,gBAAAJ,EAACuB,KAAO,IAAG,OAAM,MAAK,MAAK,QAAO,UAC/B,UAAAnB,EAAA,CACH,IACE;AAAA,MACHC,IACC,gBAAAL,EAACuB,GAAA,EAAO,IAAG,OAAM,MAAK,MAAK,OAAK,IAAC,WAAU,QACxC,UAAAlB,EAAA,CACH,IACE;AAAA,IAAA,GACN;AAAA,IACCO,IAAU,gBAAAZ,EAAC,OAAA,EAAI,WAAU,YAAY,aAAQ,IAAS;AAAA,EAAA,GACzD;AAGF,MAAIgB;AACF,WACE,gBAAAhB;AAAA,MAACwB;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,QAAAH;AAAA,QACA,MACE,gBAAArB,EAAC,OAAA,EAAI,WAAU,8IACZ,UAAA,OAAOgB,CAAK,GACf;AAAA,QAED,GAAGI;AAAA,MAAA;AAAA,IAAA;AAKV,QAAMK,IAAOf,IAAQ,SAAS,QAExBgB,IAAcP,IAAgB,EAAE,WAAWA,GAAe,WAAW,OAAA,IAAW,CAAA,GAEhFQ,IACJZ,IACE,gBAAAf,EAAC,OAAA,EAAI,WAAU,kBACZ,UAAA,MAAM,KAAK,EAAE,QAAQ,GAAG,EAAE,IAAI,CAAC4B,GAAGC,MACjC,gBAAAP,EAAC,OAAA,EAAY,WAAU,mHACpB,UAAA;AAAA,IAAAhB,IAAc,gBAAAN,EAAC,OAAA,EAAI,WAAU,oEAAA,CAAoE,IAAK;AAAA,IACvG,gBAAAsB,EAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,MAAA,gBAAAtB,EAAC,OAAA,EAAI,WAAU,iEAAA,CAAiE;AAAA,MAChF,gBAAAA,EAAC,OAAA,EAAI,WAAU,iEAAA,CAAiE;AAAA,IAAA,EAAA,CAClF;AAAA,EAAA,EAAA,GALQ6B,CAMV,CACD,GACH,IACE1B,EAAM,WAAW,IACnB,gBAAAmB,EAAC,OAAA,EAAI,WAAU,gIACZ,UAAA;AAAA,IAAAJ,IAAY,gBAAAlB,EAAC,OAAA,EAAI,WAAU,QAAQ,aAAU,IAAS;AAAA,sBACtDuB,GAAA,EAAO,MAAK,MAAK,OAAK,IACpB,UAAAN,EAAA,CACH;AAAA,EAAA,GACF,IAEA,gBAAAjB,EAAC,OAAA,EAAI,WAAU,4GACb,4BAAC,MAAA,EAAG,WAAWW,IAAU,oDAAoD,IAAI,OAAOe,GACrF,YAAM,IAAI,CAAC7B,GAAMiC,MAAQ;AACxB,UAAMC,IAAMlC,GAAM,MAAMiC,GAClB/B,IAAOF,GAAM,SAASA,GAAM,QAAQ,QACpCmC,IAAOnC,GAAM,aACboC,IAASpC,GAAM,QACfH,IAAKG,GAAM,WACXqC,IAAYrC,GAAM,OAClBsC,IAAWtC,GAAM,MACjBuC,IAAQ5B,IAAcK,IAAchB,GAAMiC,CAAG,IAAI;AAEvD,WACE,gBAAAR;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW;AAAA,UACT;AAAA,UACAG;AAAA,UACAX,IAAc,gEAAgE;AAAA,QAAA,EAE7E,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QACX,SAAS,MAAMA,IAAcjB,GAAMiC,CAAG;AAAA,QAEtC,UAAA;AAAA,UAAA,gBAAAR,EAAC,OAAA,EAAI,WAAU,kCACZ,UAAA;AAAA,YAAAhB,IAAc,gBAAAN,EAACJ,GAAA,EAAO,MAAAC,EAAA,CAAY,IAAK;AAAA,YACxC,gBAAAyB,EAAC,OAAA,EAAI,WAAU,WACb,UAAA;AAAA,cAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,gBAAA,gBAAAtB,EAAC,OAAA,EAAI,WAAU,2DACZ,UAAAD,GACH;AAAA,gBACCQ,KAAc0B,IACb,gBAAAjC,EAACqC,KAAQ,UAAA,OAAOJ,CAAM,GAAE,IACtB;AAAA,cAAA,GACN;AAAA,cACCD,IACC,gBAAAhC,EAAC,OAAA,EAAI,WAAU,mDAAmD,aAAK,IACrE;AAAA,cACHS,KAAiBf,IAChB,gBAAAM,EAAC,OAAA,EAAI,WAAU,mDACZ,UAAAP,EAAgBC,CAAE,EAAA,CACrB,IACE;AAAA,YAAA,EAAA,CACN;AAAA,UAAA,GACF;AAAA,UAEA,gBAAA4B,EAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,YAAAY,KAAa,yBACX,OAAA,EAAI,WAAU,cACb,UAAA,gBAAAZ,EAAC,OAAA,EAAI,WAAU,2DACZ,UAAA;AAAA,cAAA,OAAOY,CAAS;AAAA,cAChBC,IAAW,gBAAAnC,EAAC,QAAA,EAAK,WAAU,+DAA+D,aAAS,IAAU;AAAA,YAAA,EAAA,CAChH,GACF,IACE;AAAA,YACHoC,IACC,gBAAApC,EAAC,OAAA,EAAI,WAAU,uDACZ,aACH,IACE;AAAA,UAAA,EAAA,CACN;AAAA,QAAA;AAAA,MAAA;AAAA,MA9CK+B;AAAA,IAAA;AAAA,EAiDX,CAAC,GACH,GACF;AAGJ,SAAO,gBAAA/B,EAACwB,KAAS,SAAQ,UAAS,QAAAH,GAAgB,MAAAM,GAAY,WAAW,IAAQ,GAAGP,EAAA,CAAW;AACjG;"}
+{"version":3,"file":"ListCard.js","sources":["../../../../src/components/library/cards/ListCard.tsx"],"sourcesContent":["import React from \"react\";\nimport BaseCard, { BaseCardProps } from \"./BaseCard\";\nimport UIText from \"../ui/Text\";\nimport UIChip from \"../ui/Chip\";\n\nfunction formatTimestamp(ts: string | Date | undefined): string {\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\ninterface AvatarProps {\n  item: ListItem;\n}\n\nfunction Avatar({ item }: AvatarProps) {\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 interface ListItem {\n  id?: string | number;\n  title?: string;\n  name?: string;\n  description?: string;\n  status?: string;\n  timestamp?: string | Date;\n  value?: string | number;\n  unit?: string;\n  avatar?: string | React.ReactNode;\n}\n\nexport interface ListCardProps extends Omit<BaseCardProps, \"variant\" | \"header\" | \"body\"> {\n  items?: ListItem[];\n  title?: string;\n  subtitle?: string;\n  showAvatars?: boolean;\n  showStatus?: boolean;\n  showActions?: boolean;\n  showTimestamp?: boolean;\n  dense?: boolean;\n  divided?: boolean;\n  actions?: React.ReactNode;\n  itemActions?: (item: ListItem, index: number) => React.ReactNode;\n  onItemClick?: (item: ListItem, index: number) => void;\n  loading?: boolean;\n  error?: string | Error;\n  emptyMessage?: string;\n  emptyIcon?: React.ReactNode;\n  maxBodyHeight?: string | number;\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}: ListCardProps) {\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: React.CSSProperties = maxBodyHeight\n    ? { maxHeight: typeof maxBodyHeight === \"number\" ? `${maxBodyHeight}px` : maxBodyHeight, overflowY: \"auto\" }\n    : {};\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"],"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.d.ts

@@ -1,17 +1,23 @@
-export default function MetricCard({ title, value, subtitle, change, changeType, icon, color, trend, trendIcon, layout, footer, actions, loading, error, ...cardProps }: {
-    [x: string]: any;
-    title: any;
-    value: any;
-    subtitle: any;
-    change: any;
-    changeType?: string | undefined;
-    icon: any;
-    color?: string | undefined;
-    trend: any;
-    trendIcon: any;
-    layout?: string | undefined;
-    footer: any;
-    actions: any;
-    loading?: boolean | undefined;
-    error: any;
-}): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+import { BaseCardProps } from "./BaseCard";
+type ChangeType = "positive" | "negative" | "neutral";
+type Color = "default" | "primary" | "success" | "warning" | "danger";
+type Layout = "default" | "compact";
+export interface MetricCardProps extends Omit<BaseCardProps, "variant" | "padding" | "size" | "header" | "body" | "footer"> {
+    title: string;
+    value: string | number;
+    subtitle?: string;
+    change?: string | number;
+    changeType?: ChangeType;
+    icon?: React.ReactNode;
+    color?: Color;
+    trend?: string;
+    trendIcon?: React.ReactNode;
+    layout?: Layout;
+    footer?: React.ReactNode;
+    actions?: React.ReactNode;
+    loading?: boolean;
+    error?: string | Error;
+}
+export default function MetricCard({ title, value, subtitle, change, changeType, icon, color, trend, trendIcon, layout, footer, actions, loading, error, ...cardProps }: MetricCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,5 +1,4 @@
 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",
@@ -12,7 +11,7 @@ const o = {
   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({
+function S({
   title: u,
   value: g,
   subtitle: s,
@@ -22,10 +21,10 @@ function L({
   color: k = "default",
   trend: r,
   trendIcon: d,
-  layout: p = "default",
-  footer: i,
-  actions: n,
-  loading: h = !1,
+  layout: h = "default",
+  footer: n,
+  actions: i,
+  loading: p = !1,
   error: m,
   ...c
 }) {
@@ -44,8 +43,8 @@ function L({
       /* @__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: [
+    i ? /* @__PURE__ */ e("div", { className: "shrink-0", children: i }) : null
+  ] }), j = /* @__PURE__ */ e("div", { className: ["mt-2", h === "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",
@@ -74,13 +73,13 @@ function L({
       size: "sm",
       header: y,
       body: j,
-      footer: i ? /* @__PURE__ */ e("div", { className: "mt-3", children: i }) : null,
-      isLoading: h,
+      footer: n ? /* @__PURE__ */ e("div", { className: "mt-3", children: n }) : null,
+      isLoading: p,
       ...c
     }
   );
 }
 export {
-  L as default
+  S as default
 };
 //# sourceMappingURL=MetricCard.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"MetricCard.js","sources":["../../../../src/components/library/cards/MetricCard.tsx"],"sourcesContent":["import React from \"react\";\nimport BaseCard, { BaseCardProps } from \"./BaseCard\";\n\ntype ChangeType = \"positive\" | \"negative\" | \"neutral\";\ntype Color = \"default\" | \"primary\" | \"success\" | \"warning\" | \"danger\";\ntype Layout = \"default\" | \"compact\";\n\nconst CHANGE_STYLES: Record<ChangeType, string> = {\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: Record<Color, string> = {\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 interface MetricCardProps extends Omit<BaseCardProps, \"variant\" | \"padding\" | \"size\" | \"header\" | \"body\" | \"footer\"> {\n  title: string;\n  value: string | number;\n  subtitle?: string;\n  change?: string | number;\n  changeType?: ChangeType;\n  icon?: React.ReactNode;\n  color?: Color;\n  trend?: string;\n  trendIcon?: React.ReactNode;\n  layout?: Layout;\n  footer?: React.ReactNode;\n  actions?: React.ReactNode;\n  loading?: boolean;\n  error?: string | Error;\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}: MetricCardProps) {\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"],"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":";;AAOA,MAAMA,IAA4C;AAAA,EAChD,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AACX,GAEMC,IAAsC;AAAA,EAC1C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAmBA,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,GAAoB;AAClB,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.d.ts

@@ -1,13 +1,13 @@
-/**
- * Horizontal strip of KPI metrics — compact alternative to a row of MetricCards.
- *
- * @param {{ label: string, value: string|number, trend?: string|number }[]} metrics
- * @param {string}  title
- * @param {boolean} collapsible   Allow collapsing into a single-line summary
- * @param {boolean} collapsed     Initial collapsed state
- */
-export default function MetricsStrip({ metrics, title, collapsible, collapsed: initialCollapsed, className, }: {
+export interface Metric {
     label: string;
     value: string | number;
-    trend?: string | number;
-}[]): import("react/jsx-runtime").JSX.Element;
+    trend?: string | number | null;
+}
+export interface MetricsStripProps {
+    metrics?: Metric[];
+    title?: string;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    className?: string;
+}
+export default function MetricsStrip({ metrics, title, collapsible, collapsed: initialCollapsed, className, }: MetricsStripProps): import("react/jsx-runtime").JSX.Element;

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

@@ -51,7 +51,7 @@ function f({
   ] });
 }
 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;
+  const s = String(e).startsWith?.("+") || typeof e == "number" && 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 {

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

@@ -1 +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;"}
+{"version":3,"file":"MetricsStrip.js","sources":["../../../../src/components/library/cards/MetricsStrip.tsx"],"sourcesContent":["import { 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\nexport interface Metric {\n  label: string;\n  value: string | number;\n  trend?: string | number | null;\n}\n\nexport interface MetricsStripProps {\n  metrics?: Metric[];\n  title?: string;\n  collapsible?: boolean;\n  collapsed?: boolean;\n  className?: string;\n}\n\nexport default function MetricsStrip({\n  metrics = [],\n  title,\n  collapsible = false,\n  collapsed: initialCollapsed = false,\n  className = \"\",\n}: MetricsStripProps) {\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\ninterface TrendBadgeProps {\n  trend: string | number;\n}\n\nfunction TrendBadge({ trend }: TrendBadgeProps) {\n  const isPositive = String(trend).startsWith?.(\"+\") || (typeof trend === \"number\" && 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;AAgBA,SAAwBC,EAAa;AAAA,EACnC,SAAAC,IAAU,CAAA;AAAA,EACV,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAWC,IAAmB;AAAA,EAC9B,WAAAC,IAAY;AACd,GAAsB;AACpB,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;AAMA,SAASE,EAAW,EAAE,OAAAC,KAA0B;AAE9C,QAAMC,IADa,OAAOD,CAAK,EAAE,aAAa,GAAG,KAAM,OAAOA,KAAU,YAAYA,IAAQ,IACjE,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.d.ts

@@ -1,12 +1,17 @@
-export default function SectionCard({ title, description, label, variant, showDivider, alignment, size, isDark, className, ...cardProps }: {
-    [x: string]: any;
-    title: any;
-    description: any;
-    label: any;
-    variant?: string | undefined;
-    showDivider?: boolean | undefined;
-    alignment?: string | undefined;
-    size?: string | undefined;
-    isDark?: boolean | undefined;
-    className?: string | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+import { BaseCardProps } from "./BaseCard";
+type Variant = "default" | "primary" | "secondary" | "accent";
+type Size = "sm" | "md" | "lg" | "xl";
+type Alignment = "left" | "center" | "right";
+export interface SectionCardProps extends Omit<BaseCardProps, "variant" | "padding" | "body"> {
+    title?: string;
+    description?: string;
+    label?: string;
+    variant?: Variant;
+    showDivider?: boolean;
+    alignment?: Alignment;
+    size?: Size;
+    isDark?: boolean;
+    className?: string;
+}
+export default function SectionCard({ title, description, label, variant, showDivider, alignment, size, isDark, className, ...cardProps }: SectionCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,8 +1,7 @@
-import { jsx as t, jsxs as d } from "react/jsx-runtime";
-import "react";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
 import k from "./BaseCard.js";
-import r from "../ui/Text.js";
-const n = {
+import n from "../ui/Text.js";
+const r = {
   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",
@@ -17,43 +16,43 @@ const n = {
   center: "text-center items-center",
   right: "text-right items-end"
 };
-function v({
+function j({
   title: a,
   description: l,
   label: s,
   variant: o = "default",
-  showDivider: m = !0,
-  alignment: x = "left",
+  showDivider: x = !0,
+  alignment: m = "left",
   size: g = "md",
-  isDark: p = !1,
-  className: f = "",
+  isDark: f = !1,
+  className: p = "",
   ...b
 }) {
-  const e = i[g] ?? i.md, u = c[x] ?? c.left, h = n[o] ?? n.default;
-  return /* @__PURE__ */ t(
+  const t = i[g] ?? i.md, u = c[m] ?? c.left, h = r[o] ?? r.default;
+  return /* @__PURE__ */ e(
     k,
     {
       variant: "widget",
       padding: "none",
       className: [
         h,
-        p ? "dark" : "",
+        f ? "dark" : "",
         "overflow-hidden",
-        f
+        p
       ].filter(Boolean).join(" "),
       ...b,
-      body: /* @__PURE__ */ d("div", { className: e.pad, children: [
+      body: /* @__PURE__ */ d("div", { className: t.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
+          s ? /* @__PURE__ */ e("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__ */ e(n, { as: "h2", weight: "bold", className: ["tracking-tight", t.title].join(" "), children: a }) : null,
+          l ? /* @__PURE__ */ e(n, { as: "p", muted: !0, className: [t.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
+        x ? /* @__PURE__ */ e("div", { className: "mt-4 h-px w-full bg-slate-200 dark:bg-slate-800" }) : null
       ] })
     }
   );
 }
 export {
-  v as default
+  j as default
 };
 //# sourceMappingURL=SectionCard.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"SectionCard.js","sources":["../../../../src/components/library/cards/SectionCard.tsx"],"sourcesContent":["import BaseCard, { BaseCardProps } from \"./BaseCard\";\nimport UIText from \"../ui/Text\";\n\ntype Variant = \"default\" | \"primary\" | \"secondary\" | \"accent\";\ntype Size = \"sm\" | \"md\" | \"lg\" | \"xl\";\ntype Alignment = \"left\" | \"center\" | \"right\";\n\nconst VARIANT_STYLES: Record<Variant, string> = {\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\ninterface SizeConfig {\n  title: string;\n  desc: string;\n  pad: string;\n}\n\nconst SIZE_STYLES: Record<Size, SizeConfig> = {\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: Record<Alignment, string> = {\n  left: \"text-left items-start\",\n  center: \"text-center items-center\",\n  right: \"text-right items-end\"\n};\n\nexport interface SectionCardProps extends Omit<BaseCardProps, \"variant\" | \"padding\" | \"body\"> {\n  title?: string;\n  description?: string;\n  label?: string;\n  variant?: Variant;\n  showDivider?: boolean;\n  alignment?: Alignment;\n  size?: Size;\n  isDark?: boolean;\n  className?: string;\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}: SectionCardProps) {\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"],"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":";;;AAOA,MAAMA,IAA0C;AAAA,EAC9C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,QAAQ;AACV,GAQMC,IAAwC;AAAA,EAC5C,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,IAA0C;AAAA,EAC9C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAcA,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,GAAqB;AACnB,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;"}

package/dist/components/library/cards/SemanticMetricCard.d.ts

@@ -1,20 +1,15 @@
-export default function SemanticMetricCard({ semanticId, metricId, title, subtitle, value, unit, format, trend, change, changeLabel, description, seriesName, availableFilters, showFilters, compact, className, loading, ...rest }: {
-    [x: string]: any;
-    semanticId: any;
-    metricId: any;
-    title: any;
-    subtitle: any;
-    value: any;
-    unit: any;
-    format: any;
-    trend: any;
-    change: any;
-    changeLabel: any;
-    description: any;
-    seriesName: any;
-    availableFilters: any;
-    showFilters: any;
-    compact: any;
-    className: any;
-    loading?: boolean | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+import { MetricCardProps } from "./MetricCard";
+export interface SemanticMetricCardProps extends Omit<MetricCardProps, "value"> {
+    semanticId: string;
+    metricId?: string;
+    value?: string | number;
+    unit?: string;
+    format?: string;
+    changeLabel?: string;
+    description?: string;
+    seriesName?: string;
+    availableFilters?: string[];
+    showFilters?: boolean;
+    compact?: boolean;
+}
+export default function SemanticMetricCard({ semanticId, metricId, title, subtitle, value, unit, format, trend, change, changeLabel, description, seriesName, availableFilters, showFilters, compact, className, loading, ...rest }: SemanticMetricCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/library/cards/SemanticMetricCardWithLoading.d.ts

@@ -1,7 +1,8 @@
-export default function SemanticMetricCardWithLoading({ simulateInitialLoad, minInitialDelayMs, maxInitialDelayMs, loading: loadingProp, ...props }: {
-    [x: string]: any;
-    simulateInitialLoad?: boolean | undefined;
-    minInitialDelayMs?: number | undefined;
-    maxInitialDelayMs?: number | undefined;
-    loading: any;
-}): import("react/jsx-runtime").JSX.Element;
+import { SemanticMetricCardProps } from "./SemanticMetricCard";
+export interface SemanticMetricCardWithLoadingProps extends SemanticMetricCardProps {
+    simulateInitialLoad?: boolean;
+    minInitialDelayMs?: number;
+    maxInitialDelayMs?: number;
+    loading?: boolean;
+}
+export default function SemanticMetricCardWithLoading({ simulateInitialLoad, minInitialDelayMs, maxInitialDelayMs, loading: loadingProp, ...props }: SemanticMetricCardWithLoadingProps): import("react/jsx-runtime").JSX.Element;