@sfperusacdev/sf-ui 0.1.32 → 0.1.33

package/dist/sf-ui.js

@@ -9325,13 +9325,13 @@ var dr = (e) => {
 	red: "var(--sf-kpi-accent-red)",
 	teal: "var(--sf-kpi-accent-teal)",
 	slate: "var(--sf-kpi-accent-slate)"
-}, Ho = (e) => `${e > 0 ? "+" : ""}${e}%`, Uo = (e) => typeof e == "number" ? e.toLocaleString("es-PE") : e, Wo = (e, t) => !Number.isFinite(e) || !Number.isFinite(t) || t <= 0 ? null : Math.min(100, Math.max(0, e / t * 100)), Go = ({ label: e, value: t, sublabel: n, icon: r, iconClassName: i, trend: a, trendLabel: o, accentTone: s, progress: c, layout: l = "stacked", accentBar: u, iconStyle: d = "solid", className: f, onClick: p }) => {
-	let m = a != null, h = m && a >= 0, g = c ? Wo(c.value, c.max) : null, _ = c?.label ?? (g === null ? void 0 : `${Math.round(g)}%`), b = u ?? l === "stacked", x = (e) => {
-		p && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), p());
-	}, S = g !== null && /* @__PURE__ */ y("div", {
+}, Ho = (e) => `${e > 0 ? "+" : ""}${e}%`, Uo = (e) => typeof e == "number" ? e.toLocaleString("es-PE") : e, Wo = (e, t) => !Number.isFinite(e) || !Number.isFinite(t) || t <= 0 ? null : Math.min(100, Math.max(0, e / t * 100)), Go = ({ label: e, value: t, sublabel: n, icon: r, iconClassName: i, trend: a, trendLabel: o, accentTone: s, progress: c, layout: l = "stacked", accentBar: u, iconStyle: d = "solid", labelWrap: f = !1, className: p, onClick: m }) => {
+	let h = a != null, g = h && a >= 0, _ = c ? Wo(c.value, c.max) : null, b = c?.label ?? (_ === null ? void 0 : `${Math.round(_)}%`), x = u ?? l === "stacked", S = (e) => {
+		m && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), m());
+	}, C = _ !== null && /* @__PURE__ */ y("div", {
 		className: "mt-2 flex items-center gap-2",
 		role: "progressbar",
-		"aria-valuenow": Math.round(g),
+		"aria-valuenow": Math.round(_),
 		"aria-valuemin": 0,
 		"aria-valuemax": 100,
 		children: [/* @__PURE__ */ v("div", {
@@ -9339,13 +9339,13 @@ var dr = (e) => {
 			children: /* @__PURE__ */ v("div", {
 				className: "h-full rounded-full transition-[width]",
 				style: {
-					width: `${g}%`,
+					width: `${_}%`,
 					backgroundColor: s ? Vo[s] : "var(--sf-kpi-accent-slate)"
 				}
 			})
-		}), _ && /* @__PURE__ */ v("span", {
+		}), b && /* @__PURE__ */ v("span", {
 			className: "shrink-0 text-xs font-semibold tabular-nums sf-card-muted",
-			children: _
+			children: b
 		})]
 	});
 	if (l === "leading-icon") {
@@ -9354,11 +9354,11 @@ var dr = (e) => {
 			color: a
 		} : { background: a };
 		return /* @__PURE__ */ y("div", {
-			className: (0, Y.default)("sf-card p-5 flex items-center gap-3", s && b && "sf-kpi-card", s && b && Bo[s], p && "sf-card--interactive", f),
-			onClick: p,
-			onKeyDown: x,
-			role: p ? "button" : void 0,
-			tabIndex: p ? 0 : void 0,
+			className: (0, Y.default)("sf-card p-5 flex items-center gap-3", s && x && "sf-kpi-card", s && x && Bo[s], m && "sf-card--interactive", p),
+			onClick: m,
+			onKeyDown: S,
+			role: m ? "button" : void 0,
+			tabIndex: m ? 0 : void 0,
 			children: [
 				r && /* @__PURE__ */ v("span", {
 					className: (0, Y.default)("sf-kpi-tile", d === "soft" && "sf-kpi-tile--soft", i),
@@ -9370,20 +9370,20 @@ var dr = (e) => {
 					className: "min-w-0 flex-1",
 					children: [
 						/* @__PURE__ */ v("p", {
-							className: "truncate text-sm font-medium sf-card-subtitle",
+							className: (0, Y.default)(f ? "sf-kpi-card__label--wrap" : "truncate", "text-sm font-medium sf-card-subtitle"),
 							children: e
 						}),
 						/* @__PURE__ */ v("p", {
 							className: "text-[28px] font-bold tabular-nums sf-card-title",
 							children: Uo(t)
 						}),
-						g === null ? n && /* @__PURE__ */ v("p", {
+						_ === null ? n && /* @__PURE__ */ v("p", {
 							className: "mt-1 text-xs sf-card-muted",
 							children: n
-						}) : S
+						}) : C
 					]
 				}),
-				p && /* @__PURE__ */ v("span", {
+				m && /* @__PURE__ */ v("span", {
 					className: "sf-kpi-chevron",
 					"aria-hidden": "true",
 					children: /* @__PURE__ */ v(st, {})
@@ -9392,11 +9392,11 @@ var dr = (e) => {
 		});
 	}
 	return /* @__PURE__ */ y("div", {
-		className: (0, Y.default)("sf-card p-4", s && b && "sf-kpi-card", s && b && Bo[s], p && "sf-card--interactive", f),
-		onClick: p,
-		onKeyDown: x,
-		role: p ? "button" : void 0,
-		tabIndex: p ? 0 : void 0,
+		className: (0, Y.default)("sf-card p-4", s && x && "sf-kpi-card", s && x && Bo[s], m && "sf-card--interactive", p),
+		onClick: m,
+		onKeyDown: S,
+		role: m ? "button" : void 0,
+		tabIndex: m ? 0 : void 0,
 		children: [
 			/* @__PURE__ */ y("div", {
 				className: "mb-2 flex items-start justify-between gap-2",
@@ -9407,14 +9407,14 @@ var dr = (e) => {
 						"aria-hidden": "true",
 						children: r
 					}), /* @__PURE__ */ v("span", {
-						className: "truncate text-sm font-medium sf-card-subtitle",
+						className: (0, Y.default)(f ? "sf-kpi-card__label--wrap" : "truncate", "text-sm font-medium sf-card-subtitle"),
 						children: e
 					})]
-				}), m && /* @__PURE__ */ y("span", {
-					className: (0, Y.default)("flex shrink-0 items-center gap-0.5 text-xs font-semibold tabular-nums", h ? "text-[var(--sf-success)]" : "text-[var(--sf-danger)]"),
+				}), h && /* @__PURE__ */ y("span", {
+					className: (0, Y.default)("flex shrink-0 items-center gap-0.5 text-xs font-semibold tabular-nums", g ? "text-[var(--sf-success)]" : "text-[var(--sf-danger)]"),
 					children: [/* @__PURE__ */ v("span", {
 						"aria-hidden": "true",
-						children: h ? "↑" : "↓"
+						children: g ? "↑" : "↓"
 					}), Ho(a)]
 				})]
 			}),
@@ -9422,7 +9422,7 @@ var dr = (e) => {
 				className: "text-2xl font-semibold tabular-nums sf-card-title",
 				children: Uo(t)
 			}),
-			S,
+			C,
 			(n || o) && /* @__PURE__ */ y("div", {
 				className: "mt-1.5 flex items-center justify-between gap-2",
 				children: [n && /* @__PURE__ */ v("span", {
@@ -10572,12 +10572,12 @@ var dr = (e) => {
 			children: n
 		})
 	]
-}), cc = ({ title: e, onClose: t, headerAction: n, icon: r, heading: i, badge: a, rows: o = [], align: s = "stack", actions: c, sectionTitle: l, items: u = [], width: d = 320, className: f }) => {
-	let p = typeof d == "number" ? `${d}px` : d;
+}), cc = ({ title: e, onClose: t, headerAction: n, icon: r, iconSize: i = "sm", heading: a, badge: o, rows: s = [], align: c = "stack", actions: l, sectionTitle: u, items: d = [], width: f = 320, className: p }) => {
+	let m = typeof f == "number" ? `${f}px` : f;
 	return /* @__PURE__ */ y("aside", {
-		className: (0, Y.default)("sf-detail-side-panel", f),
-		style: { width: p },
-		"aria-label": e ?? i,
+		className: (0, Y.default)("sf-detail-side-panel", p),
+		style: { width: m },
+		"aria-label": e ?? a,
 		children: [
 			/* @__PURE__ */ y("div", {
 				className: "sf-detail-side-panel__topbar",
@@ -10599,24 +10599,24 @@ var dr = (e) => {
 			/* @__PURE__ */ y("div", {
 				className: "sf-detail-side-panel__identity",
 				children: [r && /* @__PURE__ */ v("span", {
-					className: "sf-detail-side-panel__icon",
+					className: (0, Y.default)("sf-detail-side-panel__icon", i === "lg" && "sf-detail-side-panel__icon--lg"),
 					"aria-hidden": "true",
 					children: r
 				}), /* @__PURE__ */ y("div", {
 					className: "sf-detail-side-panel__identity-body",
 					children: [/* @__PURE__ */ v("p", {
 						className: "sf-detail-side-panel__heading",
-						children: i
-					}), a && /* @__PURE__ */ v("div", {
-						className: "sf-detail-side-panel__badge",
 						children: a
+					}), o && /* @__PURE__ */ v("div", {
+						className: "sf-detail-side-panel__badge",
+						children: o
 					})]
 				})]
 			}),
-			o.length > 0 && /* @__PURE__ */ v("div", {
+			s.length > 0 && /* @__PURE__ */ v("div", {
 				className: "sf-detail-side-panel__rows",
-				children: o.map((e, t) => /* @__PURE__ */ y("div", {
-					className: (0, Y.default)("sf-detail-side-panel__row", s === "inline" && "sf-detail-side-panel__row--inline"),
+				children: s.map((e, t) => /* @__PURE__ */ y("div", {
+					className: (0, Y.default)("sf-detail-side-panel__row", c === "inline" && "sf-detail-side-panel__row--inline"),
 					children: [/* @__PURE__ */ y("div", {
 						className: "sf-detail-side-panel__row-label-wrap",
 						children: [e.icon && /* @__PURE__ */ v("span", {
@@ -10639,16 +10639,16 @@ var dr = (e) => {
 					})]
 				}, t))
 			}),
-			c && /* @__PURE__ */ v("div", {
+			l && /* @__PURE__ */ v("div", {
 				className: "sf-detail-side-panel__actions",
-				children: c
+				children: l
 			}),
-			(l || u.length > 0) && /* @__PURE__ */ y("div", {
+			(u || d.length > 0) && /* @__PURE__ */ y("div", {
 				className: "sf-detail-side-panel__section",
-				children: [l && /* @__PURE__ */ v("p", {
+				children: [u && /* @__PURE__ */ v("p", {
 					className: "sf-detail-side-panel__section-title",
-					children: l
-				}), u.map((e, t) => /* @__PURE__ */ y("div", {
+					children: u
+				}), d.map((e, t) => /* @__PURE__ */ y("div", {
 					className: "sf-detail-side-panel__section-item",
 					children: [/* @__PURE__ */ y("span", {
 						className: "sf-detail-side-panel__section-label",