@zendir/ui 0.5.0 → 0.6.1

package/dist/react/core/display/CardHeader.js

@@ -1,316 +1,403 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useMemo } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
-import { HeaderIconWithStatus } from "./HeaderIconWithStatus.js";
-import { AstroIcon } from "./AstroIcon.js";
 import { Icon } from "./Icon.js";
-import { safeAccentText, getStatusColor } from "../../utils/index.js";
-const STATUS_COLORS = {
-  off: "#a4abb6",
-  standby: "#2dccff",
-  normal: "#56f000",
-  caution: "#fce83a",
-  serious: "#ffb302",
-  critical: "#ff3838"
-};
+import { getStatusColor, safeAccentText } from "../../utils/index.js";
+import { AstroIcon } from "./AstroIcon.js";
+import { HeaderIconWithStatus } from "./HeaderIconWithStatus.js";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/display/CardHeader.tsx
+/**
+* @zendir/ui - CardHeader Component
+*
+* Unified card header component for consistent styling across all cards.
+* Uses HeaderIconWithStatus for status-aware icon display.
+*
+* Features:
+* - Consistent header styling across all theme variants (Regular, Bold, Minimal)
+* - Integrated HeaderIconWithStatus for status indicator
+* - Theme-aware accent colors and styling
+* - Optional badge/tag display
+* - Optional subtitle
+* - Accessibility compliant
+*
+* @example
+* ```tsx
+* <CardHeader
+*   icon="satellite-transmit"
+*   title="ISS"
+*   subtitle="SC-001"
+*   status="normal"
+*   badge="LEO"
+*   badgeColor="#3E3CFF"
+* />
+* ```
+*/
 function StatusBadge({ status, size = "bold" }) {
-  const color = STATUS_COLORS[status];
-  const label = status.charAt(0).toUpperCase() + status.slice(1);
-  const isBold = size === "bold";
-  const renderShape = () => {
-    const s = isBold ? 6 : 5;
-    switch (status) {
-      case "critical":
-        return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: s, height: s, children: /* @__PURE__ */ jsx("polygon", { points: "6,11 1,2 11,2", fill: color }) });
-      case "serious":
-        return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: s, height: s, children: /* @__PURE__ */ jsx("polygon", { points: "6,1 11,6 6,11 1,6", fill: color }) });
-      case "caution":
-        return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: s, height: s, children: /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "10", height: "10", fill: color }) });
-      case "standby":
-        return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: s, height: s, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3.5", fill: "none", stroke: color, strokeWidth: "2" }) });
-      case "off":
-        return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: s, height: s, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3", fill: color }) });
-      case "normal":
-      default:
-        return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: s, height: s, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: color }) });
-    }
-  };
-  return /* @__PURE__ */ jsxs("span", { style: {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: isBold ? "6px" : "4px",
-    padding: isBold ? "3px 10px" : "2px 8px",
-    borderRadius: "12px",
-    fontSize: isBold ? "0.6875rem" : "0.625rem",
-    // 11px / 10px in rem (AstroUXDS compliant)
-    fontWeight: 500,
-    // AstroUXDS: medium weight
-    backgroundColor: `${color}20`,
-    color,
-    flexShrink: 0,
-    textTransform: "uppercase",
-    letterSpacing: "0.3px"
-  }, children: [
-    renderShape(),
-    label
-  ] });
+	const { tokens } = useTheme();
+	const color = tokens.colors.status[status];
+	const label = status.charAt(0).toUpperCase() + status.slice(1);
+	const isBold = size === "bold";
+	const renderShape = () => {
+		const s = isBold ? 6 : 5;
+		switch (status) {
+			case "critical": return /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 12 12",
+				width: s,
+				height: s,
+				children: /* @__PURE__ */ jsx("polygon", {
+					points: "6,11 1,2 11,2",
+					fill: color
+				})
+			});
+			case "serious": return /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 12 12",
+				width: s,
+				height: s,
+				children: /* @__PURE__ */ jsx("polygon", {
+					points: "6,1 11,6 6,11 1,6",
+					fill: color
+				})
+			});
+			case "caution": return /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 12 12",
+				width: s,
+				height: s,
+				children: /* @__PURE__ */ jsx("rect", {
+					x: "1",
+					y: "1",
+					width: "10",
+					height: "10",
+					fill: color
+				})
+			});
+			case "standby": return /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 12 12",
+				width: s,
+				height: s,
+				children: /* @__PURE__ */ jsx("circle", {
+					cx: "6",
+					cy: "6",
+					r: "3.5",
+					fill: "none",
+					stroke: color,
+					strokeWidth: "2"
+				})
+			});
+			case "off": return /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 12 12",
+				width: s,
+				height: s,
+				children: /* @__PURE__ */ jsx("circle", {
+					cx: "6",
+					cy: "6",
+					r: "3",
+					fill: color
+				})
+			});
+			default: return /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 12 12",
+				width: s,
+				height: s,
+				children: /* @__PURE__ */ jsx("circle", {
+					cx: "6",
+					cy: "6",
+					r: "5",
+					fill: color
+				})
+			});
+		}
+	};
+	return /* @__PURE__ */ jsxs("span", {
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: isBold ? "6px" : "4px",
+			padding: isBold ? "3px 10px" : "2px 8px",
+			borderRadius: "12px",
+			fontSize: isBold ? "0.6875rem" : "0.625rem",
+			fontWeight: 500,
+			backgroundColor: `${color}20`,
+			color,
+			flexShrink: 0,
+			textTransform: "uppercase",
+			letterSpacing: "0.3px"
+		},
+		children: [renderShape(), label]
+	});
 }
-const CardHeader = memo(function CardHeader2({
-  icon,
-  title,
-  subtitle,
-  status = "off",
-  badge,
-  badgeColor,
-  isPinned,
-  iconSize,
-  iconColor,
-  hideStatusIndicator = false,
-  className,
-  style,
-  rightSlot
-}) {
-  var _a, _b;
-  const { tokens, theme } = useTheme();
-  const isBoldVariant = theme === "transparent-bold";
-  const isMinimalVariant = theme === "transparent-minimal";
-  const glassAccentColor = useMemo(() => safeAccentText(tokens.colors.accent.primary), [tokens.colors.accent.primary]);
-  const glassAccentRaw = tokens.colors.accent.primary;
-  const glassAccentMuted = `${glassAccentRaw}66`;
-  const statusColor = iconColor ?? (status ? getStatusColor(status) : tokens.colors.text.secondary);
-  const headingConfig = ((_b = (_a = tokens.layout) == null ? void 0 : _a.card) == null ? void 0 : _b.heading) ?? {
-    iconSize: 20,
-    iconSizeCompact: 16,
-    titleFontSize: "1.125rem",
-    titleFontWeight: 500,
-    gap: 8
-  };
-  const defaultIconSize = isMinimalVariant ? headingConfig.iconSizeCompact : headingConfig.iconSize;
-  const finalIconSize = iconSize ?? defaultIconSize;
-  const titleFontSize = headingConfig.titleFontSize;
-  const titleFontWeight = headingConfig.titleFontWeight;
-  const iconTitleGap = headingConfig.gap;
-  const safeBadgeColor = useMemo(() => badgeColor ? safeAccentText(badgeColor) : safeAccentText(tokens.colors.accent.primary), [badgeColor, tokens.colors.accent.primary]);
-  const finalBadgeColor = safeBadgeColor;
-  if (isBoldVariant) {
-    return /* @__PURE__ */ jsxs(
-      "header",
-      {
-        className,
-        style: {
-          position: "relative",
-          zIndex: 1,
-          marginBottom: tokens.spacing.sm,
-          ...style
-        },
-        children: [
-          /* @__PURE__ */ jsxs("div", { style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between"
-          }, children: [
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: iconTitleGap }, children: [
-              icon && (hideStatusIndicator ? /* @__PURE__ */ jsx(AstroIcon, { name: icon, size: finalIconSize, color: statusColor }) : /* @__PURE__ */ jsx(
-                HeaderIconWithStatus,
-                {
-                  icon,
-                  size: finalIconSize,
-                  status
-                }
-              )),
-              /* @__PURE__ */ jsx("h3", { style: {
-                margin: 0,
-                fontSize: titleFontSize,
-                fontWeight: titleFontWeight,
-                color: glassAccentColor,
-                letterSpacing: "0.5px",
-                textShadow: `0 0 20px ${glassAccentMuted}`
-              }, children: title }),
-              isPinned && /* @__PURE__ */ jsx(Icon, { name: "lock", size: 12, color: tokens.colors.accent.primary })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.sm }, children: [
-              badge && /* @__PURE__ */ jsx("span", { style: {
-                backgroundColor: `${finalBadgeColor}20`,
-                color: finalBadgeColor,
-                padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
-                borderRadius: tokens.borderRadius.sm,
-                flexShrink: 0,
-                fontSize: tokens.typography.fontSize.xs,
-                fontWeight: tokens.typography.fontWeight.medium
-              }, children: badge }),
-              rightSlot
-            ] })
-          ] }),
-          subtitle && /* @__PURE__ */ jsx("span", { style: {
-            fontSize: tokens.typography.fontSize.xs,
-            color: tokens.colors.text.tertiary,
-            marginLeft: finalIconSize + parseInt(tokens.spacing.sm)
-          }, children: subtitle }),
-          /* @__PURE__ */ jsxs("div", { style: {
-            display: "flex",
-            alignItems: "center",
-            gap: tokens.spacing.sm,
-            marginTop: tokens.spacing.sm,
-            marginBottom: tokens.spacing.xs
-          }, children: [
-            /* @__PURE__ */ jsx("div", { style: {
-              flex: 1,
-              height: "2px",
-              background: `linear-gradient(90deg, ${glassAccentRaw} 0%, ${glassAccentMuted} 70%, ${glassAccentMuted}20 100%)`,
-              boxShadow: `0 0 8px ${glassAccentMuted}`
-            } }),
-            status && status !== "off" && !hideStatusIndicator && /* @__PURE__ */ jsx(StatusBadge, { status, size: "bold" })
-          ] })
-        ]
-      }
-    );
-  }
-  if (isMinimalVariant) {
-    return /* @__PURE__ */ jsxs(
-      "header",
-      {
-        className,
-        style: {
-          display: "flex",
-          alignItems: "center",
-          marginBottom: tokens.spacing.sm,
-          position: "relative",
-          zIndex: 1,
-          ...style
-        },
-        children: [
-          icon && (hideStatusIndicator ? /* @__PURE__ */ jsx(
-            AstroIcon,
-            {
-              name: icon,
-              size: finalIconSize,
-              color: statusColor,
-              style: { marginRight: tokens.spacing.sm }
-            }
-          ) : /* @__PURE__ */ jsx(
-            HeaderIconWithStatus,
-            {
-              icon,
-              size: finalIconSize,
-              status,
-              style: { marginRight: tokens.spacing.sm }
-            }
-          )),
-          /* @__PURE__ */ jsx("h3", { style: {
-            margin: 0,
-            fontSize: titleFontSize,
-            fontWeight: titleFontWeight,
-            color: glassAccentColor,
-            textShadow: `0 0 16px ${glassAccentMuted}`,
-            letterSpacing: "0.02em",
-            whiteSpace: "nowrap",
-            marginRight: "12px"
-          }, children: title }),
-          isPinned && /* @__PURE__ */ jsx(Icon, { name: "lock", size: 10, color: tokens.colors.accent.primary, style: { marginRight: "8px" } }),
-          /* @__PURE__ */ jsxs("div", { style: {
-            flex: 1,
-            display: "flex",
-            alignItems: "center",
-            gap: tokens.spacing.sm,
-            minWidth: 40
-          }, children: [
-            /* @__PURE__ */ jsx("div", { style: {
-              flex: 1,
-              height: "1px",
-              background: `linear-gradient(90deg, ${glassAccentRaw} 0%, ${glassAccentMuted} 70%, ${glassAccentMuted}20 100%)`
-            } }),
-            status && status !== "off" && !hideStatusIndicator && !badge && /* @__PURE__ */ jsx(StatusBadge, { status, size: "minimal" })
-          ] }),
-          badge && /* @__PURE__ */ jsx("span", { style: {
-            backgroundColor: `${finalBadgeColor}20`,
-            color: finalBadgeColor,
-            padding: "2px 6px",
-            borderRadius: tokens.borderRadius.sm,
-            flexShrink: 0,
-            fontSize: tokens.typography.fontSize.xxs,
-            // 0.625rem / 10px (AstroUXDS compact)
-            fontWeight: tokens.typography.fontWeight.medium,
-            marginLeft: "8px"
-          }, children: badge }),
-          rightSlot
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "header",
-    {
-      className,
-      style: {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        marginBottom: tokens.spacing.md,
-        ...style
-      },
-      children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: iconTitleGap }, children: [
-          icon && (hideStatusIndicator ? /* @__PURE__ */ jsx(AstroIcon, { name: icon, size: finalIconSize, color: statusColor }) : /* @__PURE__ */ jsx(
-            HeaderIconWithStatus,
-            {
-              icon,
-              size: finalIconSize,
-              status
-            }
-          )),
-          /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-              /* @__PURE__ */ jsx(
-                "h3",
-                {
-                  style: {
-                    margin: 0,
-                    fontSize: titleFontSize,
-                    fontWeight: titleFontWeight,
-                    lineHeight: 1.2,
-                    color: tokens.colors.text.primary
-                  },
-                  children: title
-                }
-              ),
-              isPinned && /* @__PURE__ */ jsx(Icon, { name: "lock", size: 12, color: tokens.colors.accent.primary })
-            ] }),
-            subtitle && /* @__PURE__ */ jsx(
-              "span",
-              {
-                style: {
-                  fontSize: tokens.typography.fontSize.xs,
-                  color: tokens.colors.text.tertiary
-                },
-                children: subtitle
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.sm }, children: [
-          status && status !== "off" && !hideStatusIndicator && !rightSlot && /* @__PURE__ */ jsx(StatusBadge, { status, size: "bold" }),
-          badge && /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                backgroundColor: `${finalBadgeColor}20`,
-                color: finalBadgeColor,
-                padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
-                borderRadius: tokens.borderRadius.sm,
-                flexShrink: 0,
-                fontSize: tokens.typography.fontSize.xs,
-                fontWeight: tokens.typography.fontWeight.medium
-              },
-              children: badge
-            }
-          ),
-          rightSlot
-        ] })
-      ]
-    }
-  );
+var CardHeader = memo(function CardHeader({ icon, title, subtitle, status = "off", badge, badgeColor, isPinned, iconSize, iconColor, hideStatusIndicator = false, className, style, rightSlot }) {
+	const { tokens, theme } = useTheme();
+	const isBoldVariant = theme === "transparent-bold";
+	const isMinimalVariant = theme === "transparent-minimal";
+	const glassAccentColor = useMemo(() => safeAccentText(tokens.colors.accent.primary), [tokens.colors.accent.primary]);
+	const glassAccentRaw = tokens.colors.accent.primary;
+	const glassAccentMuted = `${glassAccentRaw}66`;
+	const statusColor = iconColor ?? (status ? getStatusColor(status) : tokens.colors.text.secondary);
+	const headingConfig = tokens.layout?.card?.heading ?? {
+		iconSize: 20,
+		iconSizeCompact: 16,
+		titleFontSize: "1.125rem",
+		titleFontWeight: 500,
+		gap: 8
+	};
+	const defaultIconSize = isMinimalVariant ? headingConfig.iconSizeCompact : headingConfig.iconSize;
+	const finalIconSize = iconSize ?? defaultIconSize;
+	const titleFontSize = headingConfig.titleFontSize;
+	const titleFontWeight = headingConfig.titleFontWeight;
+	const iconTitleGap = headingConfig.gap;
+	const finalBadgeColor = useMemo(() => badgeColor ? safeAccentText(badgeColor) : safeAccentText(tokens.colors.accent.primary), [badgeColor, tokens.colors.accent.primary]);
+	if (isBoldVariant) return /* @__PURE__ */ jsxs("header", {
+		className,
+		style: {
+			position: "relative",
+			zIndex: 1,
+			marginBottom: tokens.spacing.sm,
+			...style
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between"
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: iconTitleGap
+					},
+					children: [
+						icon && (hideStatusIndicator ? /* @__PURE__ */ jsx(AstroIcon, {
+							name: icon,
+							size: finalIconSize,
+							color: statusColor
+						}) : /* @__PURE__ */ jsx(HeaderIconWithStatus, {
+							icon,
+							size: finalIconSize,
+							status
+						})),
+						/* @__PURE__ */ jsx("h3", {
+							style: {
+								margin: 0,
+								fontSize: titleFontSize,
+								fontWeight: titleFontWeight,
+								color: glassAccentColor,
+								letterSpacing: "0.5px",
+								textShadow: `0 0 20px ${glassAccentMuted}`
+							},
+							children: title
+						}),
+						isPinned && /* @__PURE__ */ jsx(Icon, {
+							name: "lock",
+							size: 12,
+							color: tokens.colors.accent.primary
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: tokens.spacing.sm
+					},
+					children: [badge && /* @__PURE__ */ jsx("span", {
+						style: {
+							backgroundColor: `${finalBadgeColor}20`,
+							color: finalBadgeColor,
+							padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+							borderRadius: tokens.borderRadius.sm,
+							flexShrink: 0,
+							fontSize: tokens.typography.fontSize.xs,
+							fontWeight: tokens.typography.fontWeight.medium
+						},
+						children: badge
+					}), rightSlot]
+				})]
+			}),
+			subtitle && /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: tokens.typography.fontSize.xs,
+					color: tokens.colors.text.tertiary,
+					marginLeft: finalIconSize + parseInt(tokens.spacing.sm)
+				},
+				children: subtitle
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: tokens.spacing.sm,
+					marginTop: tokens.spacing.sm,
+					marginBottom: tokens.spacing.xs
+				},
+				children: [/* @__PURE__ */ jsx("div", { style: {
+					flex: 1,
+					height: "2px",
+					background: `linear-gradient(90deg, ${glassAccentRaw} 0%, ${glassAccentMuted} 70%, ${glassAccentMuted}20 100%)`,
+					boxShadow: `0 0 8px ${glassAccentMuted}`
+				} }), status && status !== "off" && !hideStatusIndicator && /* @__PURE__ */ jsx(StatusBadge, {
+					status,
+					size: "bold"
+				})]
+			})
+		]
+	});
+	if (isMinimalVariant) return /* @__PURE__ */ jsxs("header", {
+		className,
+		style: {
+			display: "flex",
+			alignItems: "center",
+			marginBottom: tokens.spacing.sm,
+			position: "relative",
+			zIndex: 1,
+			...style
+		},
+		children: [
+			icon && (hideStatusIndicator ? /* @__PURE__ */ jsx(AstroIcon, {
+				name: icon,
+				size: finalIconSize,
+				color: statusColor,
+				style: { marginRight: tokens.spacing.sm }
+			}) : /* @__PURE__ */ jsx(HeaderIconWithStatus, {
+				icon,
+				size: finalIconSize,
+				status,
+				style: { marginRight: tokens.spacing.sm }
+			})),
+			/* @__PURE__ */ jsx("h3", {
+				style: {
+					margin: 0,
+					fontSize: titleFontSize,
+					fontWeight: titleFontWeight,
+					color: glassAccentColor,
+					textShadow: `0 0 16px ${glassAccentMuted}`,
+					letterSpacing: "0.02em",
+					whiteSpace: "nowrap",
+					marginRight: "12px"
+				},
+				children: title
+			}),
+			isPinned && /* @__PURE__ */ jsx(Icon, {
+				name: "lock",
+				size: 10,
+				color: tokens.colors.accent.primary,
+				style: { marginRight: "8px" }
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					flex: 1,
+					display: "flex",
+					alignItems: "center",
+					gap: tokens.spacing.sm,
+					minWidth: 40
+				},
+				children: [/* @__PURE__ */ jsx("div", { style: {
+					flex: 1,
+					height: "1px",
+					background: `linear-gradient(90deg, ${glassAccentRaw} 0%, ${glassAccentMuted} 70%, ${glassAccentMuted}20 100%)`
+				} }), status && status !== "off" && !hideStatusIndicator && !badge && /* @__PURE__ */ jsx(StatusBadge, {
+					status,
+					size: "minimal"
+				})]
+			}),
+			badge && /* @__PURE__ */ jsx("span", {
+				style: {
+					backgroundColor: `${finalBadgeColor}20`,
+					color: finalBadgeColor,
+					padding: "2px 6px",
+					borderRadius: tokens.borderRadius.sm,
+					flexShrink: 0,
+					fontSize: tokens.typography.fontSize.xxs,
+					fontWeight: tokens.typography.fontWeight.medium,
+					marginLeft: "8px"
+				},
+				children: badge
+			}),
+			rightSlot
+		]
+	});
+	return /* @__PURE__ */ jsxs("header", {
+		className,
+		style: {
+			display: "flex",
+			justifyContent: "space-between",
+			alignItems: "center",
+			marginBottom: tokens.spacing.md,
+			...style
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: iconTitleGap
+			},
+			children: [icon && (hideStatusIndicator ? /* @__PURE__ */ jsx(AstroIcon, {
+				name: icon,
+				size: finalIconSize,
+				color: statusColor
+			}) : /* @__PURE__ */ jsx(HeaderIconWithStatus, {
+				icon,
+				size: finalIconSize,
+				status
+			})), /* @__PURE__ */ jsxs("div", {
+				style: { minWidth: 0 },
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 6
+					},
+					children: [/* @__PURE__ */ jsx("h3", {
+						style: {
+							margin: 0,
+							fontSize: titleFontSize,
+							fontWeight: titleFontWeight,
+							lineHeight: 1.2,
+							color: tokens.colors.text.primary
+						},
+						children: title
+					}), isPinned && /* @__PURE__ */ jsx(Icon, {
+						name: "lock",
+						size: 12,
+						color: tokens.colors.accent.primary
+					})]
+				}), subtitle && /* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: tokens.typography.fontSize.xs,
+						color: tokens.colors.text.tertiary
+					},
+					children: subtitle
+				})]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: tokens.spacing.sm
+			},
+			children: [
+				status && status !== "off" && !hideStatusIndicator && !rightSlot && /* @__PURE__ */ jsx(StatusBadge, {
+					status,
+					size: "bold"
+				}),
+				badge && /* @__PURE__ */ jsx("span", {
+					style: {
+						backgroundColor: `${finalBadgeColor}20`,
+						color: finalBadgeColor,
+						padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+						borderRadius: tokens.borderRadius.sm,
+						flexShrink: 0,
+						fontSize: tokens.typography.fontSize.xs,
+						fontWeight: tokens.typography.fontWeight.medium
+					},
+					children: badge
+				}),
+				rightSlot
+			]
+		})]
+	});
 });
-export {
-  CardHeader
-};
-//# sourceMappingURL=CardHeader.js.map
+//#endregion
+export { CardHeader, CardHeader as default };
+
+//# sourceMappingURL=CardHeader.js.map