@sfperusacdev/sf-ui 0.1.37 → 0.1.39

package/dist/sf-ui.js

@@ -10316,7 +10316,7 @@ var yr = (e) => {
 					width: d,
 					height: d,
 					viewBox: `0 0 ${d} ${d}`,
-					className: "-rotate-90",
+					style: { transform: "rotate(-90deg)" },
 					"aria-label": t ?? "Indicador",
 					"aria-valuemin": 0,
 					"aria-valuemax": 100,
@@ -10419,7 +10419,7 @@ var yr = (e) => {
 				width: c,
 				height: c,
 				viewBox: `0 0 ${c} ${c}`,
-				className: "-rotate-90",
+				style: { transform: "rotate(-90deg)" },
 				"aria-hidden": "true",
 				children: s <= 0 ? /* @__PURE__ */ v("circle", {
 					cx: d,
@@ -10864,20 +10864,20 @@ var yr = (e) => {
 			y2: "4.71"
 		})] })]
 	})
-}), Lc = ({ items: e, className: t, density: n = "comfortable", emptyMessage: r = "Sin alertas", showIcon: i = !1 }) => /* @__PURE__ */ y("div", {
+}), Lc = ({ items: e, className: t, density: n = "comfortable", emptyMessage: r = "Sin alertas", showIcon: i = !1, showChevron: a = !1 }) => /* @__PURE__ */ y("div", {
 	className: (0, X.default)("sf-alert-summary-list", t),
 	children: [e.length === 0 && /* @__PURE__ */ v("p", {
 		className: "sf-alert-summary-list__empty",
 		role: "status",
 		children: r
 	}), e.map((e, t) => {
-		let r = !!e.actions?.length, a = !r && !!e.onClick;
+		let r = !!e.actions?.length, o = !r && !!e.onClick;
 		return /* @__PURE__ */ y("div", {
-			className: (0, X.default)("sf-alert-summary-row", `sf-alert-summary-row--${e.tone ?? "default"}`, n === "compact" && "sf-alert-summary-row--compact", a && "sf-alert-summary-row--clickable"),
-			onClick: a ? e.onClick : void 0,
-			role: a ? "button" : void 0,
-			tabIndex: a ? 0 : void 0,
-			onKeyDown: a ? (t) => {
+			className: (0, X.default)("sf-alert-summary-row", `sf-alert-summary-row--${e.tone ?? "default"}`, n === "compact" && "sf-alert-summary-row--compact", o && "sf-alert-summary-row--clickable"),
+			onClick: o ? e.onClick : void 0,
+			role: o ? "button" : void 0,
+			tabIndex: o ? 0 : void 0,
+			onKeyDown: o ? (t) => {
 				(t.key === "Enter" || t.key === " ") && (t.preventDefault(), e.onClick?.());
 			} : void 0,
 			children: [/* @__PURE__ */ y("div", {
@@ -10894,20 +10894,28 @@ var yr = (e) => {
 				})]
 			}), /* @__PURE__ */ y("div", {
 				className: "flex shrink-0 items-center gap-3",
-				children: [/* @__PURE__ */ v("div", {
-					className: "sf-alert-summary-row__value",
-					children: e.value
-				}), r && /* @__PURE__ */ v("div", {
-					className: "flex items-center gap-1.5",
-					children: e.actions.map((e, t) => /* @__PURE__ */ v("button", {
-						type: "button",
-						className: "sf-alert-summary-row__action",
-						onClick: (t) => {
-							t.stopPropagation(), e.onClick();
-						},
-						children: e.label
-					}, t))
-				})]
+				children: [
+					/* @__PURE__ */ v("div", {
+						className: "sf-alert-summary-row__value",
+						children: e.value
+					}),
+					r && /* @__PURE__ */ v("div", {
+						className: "flex items-center gap-1.5",
+						children: e.actions.map((e, t) => /* @__PURE__ */ v("button", {
+							type: "button",
+							className: "sf-alert-summary-row__action",
+							onClick: (t) => {
+								t.stopPropagation(), e.onClick();
+							},
+							children: e.label
+						}, t))
+					}),
+					a && o && /* @__PURE__ */ v("span", {
+						className: "sf-alert-summary-row__chevron",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ v(mt, {})
+					})
+				]
 			})]
 		}, `${e.label}-${t}`);
 	})]
@@ -11109,22 +11117,29 @@ var yr = (e) => {
 	className: (0, X.default)("grid", !r && qc[e], Jc[t], Yc[n], i),
 	style: r ? { gridTemplateColumns: `repeat(auto-fit, minmax(${r}, 1fr))` } : void 0,
 	children: a
-}), Zc = ({ title: e, subtitle: t, action: n, className: r, children: i }) => /* @__PURE__ */ y("section", {
-	className: (0, X.default)("flex flex-col gap-3", r),
+}), Zc = ({ title: e, subtitle: t, action: n, icon: r, iconSize: i = "md", className: a, children: o }) => /* @__PURE__ */ y("section", {
+	className: (0, X.default)("flex flex-col gap-3", a),
 	"aria-label": e,
 	children: [/* @__PURE__ */ y("div", {
 		className: "flex items-center justify-between gap-3",
-		children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("h2", {
-			className: "text-sm font-bold sf-card-title",
-			children: e
-		}), t && /* @__PURE__ */ v("p", {
-			className: "mt-0.5 text-[11px] sf-card-muted",
-			children: t
-		})] }), n && /* @__PURE__ */ v("div", {
+		children: [/* @__PURE__ */ y("div", {
+			className: "flex items-center gap-2",
+			children: [r && /* @__PURE__ */ v("span", {
+				className: `sf-card-header-icon--${i}`,
+				"aria-hidden": "true",
+				children: r
+			}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("h2", {
+				className: "text-sm font-bold sf-card-title",
+				children: e
+			}), t && /* @__PURE__ */ v("p", {
+				className: "mt-0.5 text-[11px] sf-card-muted",
+				children: t
+			})] })]
+		}), n && /* @__PURE__ */ v("div", {
 			className: "shrink-0",
 			children: n
 		})]
-	}), i]
+	}), o]
 }), Qc = {
 	slate: "sf-stat-tone--slate",
 	emerald: "sf-stat-tone--emerald",