@zendir/ui 0.1.0

package/dist/react/core/CardHeader.js

@@ -0,0 +1,316 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { HeaderIconWithStatus } from "./HeaderIconWithStatus.js";
+import { AstroIcon } from "./AstroIcon.js";
+import { Icon } from "./Icon.js";
+import { safeAccentText, getStatusColor } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const STATUS_COLORS = {
+  off: "#a4abb6",
+  standby: "#2dccff",
+  normal: "#56f000",
+  caution: "#fce83a",
+  serious: "#ffb302",
+  critical: "#ff3838"
+};
+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 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
+        ] })
+      ]
+    }
+  );
+});
+export {
+  CardHeader
+};
+//# sourceMappingURL=CardHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.js","sources":["../../../src/react/core/CardHeader.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - CardHeader Component\r\n * \r\n * Unified card header component for consistent styling across all cards.\r\n * Uses HeaderIconWithStatus for status-aware icon display.\r\n * \r\n * Features:\r\n * - Consistent header styling across all theme variants (Regular, Bold, Minimal)\r\n * - Integrated HeaderIconWithStatus for status indicator\r\n * - Theme-aware accent colors and styling\r\n * - Optional badge/tag display\r\n * - Optional subtitle\r\n * - Accessibility compliant\r\n * \r\n * @example\r\n * ```tsx\r\n * <CardHeader\r\n *   icon=\"satellite-transmit\"\r\n *   title=\"ISS\"\r\n *   subtitle=\"SC-001\"\r\n *   status=\"normal\"\r\n *   badge=\"LEO\"\r\n *   badgeColor=\"#3E3CFF\"\r\n * />\r\n * ```\r\n */\r\n\r\nimport React, { memo, useMemo } from 'react';\r\nimport { useTheme } from '../theme';\r\nimport { HeaderIconWithStatus } from './HeaderIconWithStatus';\r\nimport { AstroIcon, type AstroIconName } from './AstroIcon';\r\nimport { Icon } from './Icon';\r\nimport { type StatusLevel, getStatusColor, safeAccentText } from '../utils';\r\n\r\n// =============================================================================\r\n// Status Colors (matching Astro UXD)\r\n// =============================================================================\r\n\r\nconst STATUS_COLORS: Record<StatusLevel, string> = {\r\n  off: '#a4abb6',\r\n  standby: '#2dccff',\r\n  normal: '#56f000',\r\n  caution: '#fce83a',\r\n  serious: '#ffb302',\r\n  critical: '#ff3838',\r\n};\r\n\r\n// =============================================================================\r\n// StatusBadge - Compact status indicator for accent lines\r\n// =============================================================================\r\n\r\ninterface StatusBadgeProps {\r\n  status: StatusLevel;\r\n  size?: 'bold' | 'minimal';\r\n}\r\n\r\nfunction StatusBadge({ status, size = 'bold' }: StatusBadgeProps): React.ReactElement {\r\n  const color = STATUS_COLORS[status];\r\n  const label = status.charAt(0).toUpperCase() + status.slice(1);\r\n  const isBold = size === 'bold';\r\n  \r\n  // Render status shape\r\n  const renderShape = () => {\r\n    const s = isBold ? 6 : 5;\r\n    switch (status) {\r\n      case 'critical':\r\n        return (\r\n          <svg viewBox=\"0 0 12 12\" width={s} height={s}>\r\n            <polygon points=\"6,11 1,2 11,2\" fill={color} />\r\n          </svg>\r\n        );\r\n      case 'serious':\r\n        return (\r\n          <svg viewBox=\"0 0 12 12\" width={s} height={s}>\r\n            <polygon points=\"6,1 11,6 6,11 1,6\" fill={color} />\r\n          </svg>\r\n        );\r\n      case 'caution':\r\n        return (\r\n          <svg viewBox=\"0 0 12 12\" width={s} height={s}>\r\n            <rect x=\"1\" y=\"1\" width=\"10\" height=\"10\" fill={color} />\r\n          </svg>\r\n        );\r\n      case 'standby':\r\n        return (\r\n          <svg viewBox=\"0 0 12 12\" width={s} height={s}>\r\n            <circle cx=\"6\" cy=\"6\" r=\"3.5\" fill=\"none\" stroke={color} strokeWidth=\"2\" />\r\n          </svg>\r\n        );\r\n      case 'off':\r\n        return (\r\n          <svg viewBox=\"0 0 12 12\" width={s} height={s}>\r\n            <circle cx=\"6\" cy=\"6\" r=\"3\" fill={color} />\r\n          </svg>\r\n        );\r\n      case 'normal':\r\n      default:\r\n        return (\r\n          <svg viewBox=\"0 0 12 12\" width={s} height={s}>\r\n            <circle cx=\"6\" cy=\"6\" r=\"5\" fill={color} />\r\n          </svg>\r\n        );\r\n    }\r\n  };\r\n  \r\n  return (\r\n    <span style={{\r\n      display: 'inline-flex',\r\n      alignItems: 'center',\r\n      gap: isBold ? '6px' : '4px',\r\n      padding: isBold ? '3px 10px' : '2px 8px',\r\n      borderRadius: '12px',\r\n      fontSize: isBold ? '0.6875rem' : '0.625rem', // 11px / 10px in rem (AstroUXDS compliant)\r\n      fontWeight: 500, // AstroUXDS: medium weight\r\n      backgroundColor: `${color}20`,\r\n      color: color,\r\n      flexShrink: 0,\r\n      textTransform: 'uppercase',\r\n      letterSpacing: '0.3px',\r\n    }}>\r\n      {renderShape()}\r\n      {label}\r\n    </span>\r\n  );\r\n}\r\n\r\n// =============================================================================\r\n// Types\r\n// =============================================================================\r\n\r\nexport interface CardHeaderProps {\r\n  /** Icon name (AstroIcon) */\r\n  icon: AstroIconName | string;\r\n  /** Main title text */\r\n  title: string;\r\n  /** Optional subtitle text */\r\n  subtitle?: string;\r\n  /** Status level - determines icon color and status indicator */\r\n  status?: StatusLevel;\r\n  /** Badge text (e.g., orbit type, category) */\r\n  badge?: string;\r\n  /** Badge background color */\r\n  badgeColor?: string;\r\n  /** Show pin indicator */\r\n  isPinned?: boolean;\r\n  /** Icon size override */\r\n  iconSize?: number;\r\n  /** Custom icon color (overrides status-based coloring) */\r\n  iconColor?: string;\r\n  /** Hide status indicator (show plain icon) */\r\n  hideStatusIndicator?: boolean;\r\n  /** Additional className */\r\n  className?: string;\r\n  /** Additional styles */\r\n  style?: React.CSSProperties;\r\n  /** Slot for additional content on the right side */\r\n  rightSlot?: React.ReactNode;\r\n}\r\n\r\n// =============================================================================\r\n// CardHeader Component\r\n// =============================================================================\r\n\r\nexport const CardHeader = memo(function CardHeader({\r\n  icon,\r\n  title,\r\n  subtitle,\r\n  status = 'off',\r\n  badge,\r\n  badgeColor,\r\n  isPinned,\r\n  iconSize,\r\n  iconColor,\r\n  hideStatusIndicator = false,\r\n  className,\r\n  style,\r\n  rightSlot,\r\n}: CardHeaderProps) {\r\n  const { tokens, theme } = useTheme();\r\n  \r\n  // Theme detection\r\n  const _isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\r\n  const isBoldVariant = theme === 'transparent-bold';\r\n  const isMinimalVariant = theme === 'transparent-minimal';\r\n  const _useGlassMode = isBoldVariant || isMinimalVariant;\r\n  \r\n  // Glass accent colors — use safeAccentText for text to meet WCAG AA 4.5:1\r\n  const glassAccentColor = useMemo(() => safeAccentText(tokens.colors.accent.primary), [tokens.colors.accent.primary]);\r\n  const glassAccentRaw = tokens.colors.accent.primary; // raw color for non-text usage (gradients, glows)\r\n  const glassAccentMuted = `${glassAccentRaw}66`;\r\n  \r\n  // Status color (for icon when showing status)\r\n  const statusColor = iconColor ?? (status ? getStatusColor(status) : tokens.colors.text.secondary);\r\n  \r\n  // Single card heading system (tokens.layout.card.heading)\r\n  const headingConfig = tokens.layout?.card?.heading ?? {\r\n    iconSize: 20,\r\n    iconSizeCompact: 16,\r\n    titleFontSize: '1.125rem',\r\n    titleFontWeight: 500,\r\n    gap: 8,\r\n  };\r\n  const defaultIconSize = isMinimalVariant ? headingConfig.iconSizeCompact : headingConfig.iconSize;\r\n  const finalIconSize = iconSize ?? defaultIconSize;\r\n  const titleFontSize = headingConfig.titleFontSize;\r\n  const titleFontWeight = headingConfig.titleFontWeight;\r\n  const iconTitleGap = headingConfig.gap;\r\n  \r\n  // Badge color (use safe accent text if not provided) — ensures 4.5:1 contrast\r\n  const safeBadgeColor = useMemo(() => badgeColor ? safeAccentText(badgeColor) : safeAccentText(tokens.colors.accent.primary), [badgeColor, tokens.colors.accent.primary]);\r\n  const finalBadgeColor = safeBadgeColor;\r\n\r\n  // ═══════════════════════════════════════════════════════════════════════════\r\n  // BOLD VARIANT\r\n  // ═══════════════════════════════════════════════════════════════════════════\r\n  if (isBoldVariant) {\r\n    return (\r\n      <header \r\n        className={className}\r\n        style={{ \r\n          position: 'relative', \r\n          zIndex: 1, \r\n          marginBottom: tokens.spacing.sm,\r\n          ...style,\r\n        }}\r\n      >\r\n        <div style={{ \r\n          display: 'flex', \r\n          alignItems: 'center', \r\n          justifyContent: 'space-between',\r\n        }}>\r\n          <div style={{ display: 'flex', alignItems: 'center', gap: iconTitleGap }}>\r\n            {/* Icon with status badge — only when icon is provided */}\r\n            {icon && (hideStatusIndicator ? (\r\n              <AstroIcon name={icon as AstroIconName} size={finalIconSize} color={statusColor} />\r\n            ) : (\r\n              <HeaderIconWithStatus \r\n                icon={icon as AstroIconName} \r\n                size={finalIconSize} \r\n                status={status}\r\n              />\r\n            ))}\r\n            \r\n            {/* Title with accent color — card heading system */}\r\n            <h3 style={{\r\n              margin: 0,\r\n              fontSize: titleFontSize,\r\n              fontWeight: titleFontWeight,\r\n              color: glassAccentColor,\r\n              letterSpacing: '0.5px',\r\n              textShadow: `0 0 20px ${glassAccentMuted}`,\r\n            }}>\r\n              {title}\r\n            </h3>\r\n            \r\n            {/* Pin indicator */}\r\n            {isPinned && (\r\n              <Icon name=\"lock\" size={12} color={tokens.colors.accent.primary} />\r\n            )}\r\n          </div>\r\n          \r\n          {/* Right side: Badge + rightSlot */}\r\n          <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.sm }}>\r\n            {badge && (\r\n              <span style={{\r\n                backgroundColor: `${finalBadgeColor}20`,\r\n                color: finalBadgeColor,\r\n                padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\r\n                borderRadius: tokens.borderRadius.sm,\r\n                flexShrink: 0,\r\n                fontSize: tokens.typography.fontSize.xs,\r\n                fontWeight: tokens.typography.fontWeight.medium,\r\n              }}>\r\n                {badge}\r\n              </span>\r\n            )}\r\n            {rightSlot}\r\n          </div>\r\n        </div>\r\n        \r\n        {/* Subtitle if provided */}\r\n        {subtitle && (\r\n          <span style={{\r\n            fontSize: tokens.typography.fontSize.xs,\r\n            color: tokens.colors.text.tertiary,\r\n            marginLeft: finalIconSize + parseInt(tokens.spacing.sm),\r\n          }}>\r\n            {subtitle}\r\n          </span>\r\n        )}\r\n        \r\n        {/* Accent line with optional status badge */}\r\n        <div style={{\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          gap: tokens.spacing.sm,\r\n          marginTop: tokens.spacing.sm,\r\n          marginBottom: tokens.spacing.xs,\r\n        }}>\r\n          <div style={{\r\n            flex: 1,\r\n            height: '2px',\r\n            background: `linear-gradient(90deg, ${glassAccentRaw} 0%, ${glassAccentMuted} 70%, ${glassAccentMuted}20 100%)`,\r\n            boxShadow: `0 0 8px ${glassAccentMuted}`,\r\n          }} />\r\n          {/* Status badge at end of line if status is set and not 'off' */}\r\n          {status && status !== 'off' && !hideStatusIndicator && (\r\n            <StatusBadge status={status} size=\"bold\" />\r\n          )}\r\n        </div>\r\n      </header>\r\n    );\r\n  }\r\n\r\n  // ═══════════════════════════════════════════════════════════════════════════\r\n  // MINIMAL VARIANT\r\n  // ═══════════════════════════════════════════════════════════════════════════\r\n  if (isMinimalVariant) {\r\n    return (\r\n      <header\r\n        className={className}\r\n        style={{\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          marginBottom: tokens.spacing.sm,\r\n          position: 'relative',\r\n          zIndex: 1,\r\n          ...style,\r\n        }}\r\n      >\r\n        {/* Icon with status badge — only when icon is provided */}\r\n        {icon && (hideStatusIndicator ? (\r\n          <AstroIcon \r\n            name={icon as AstroIconName} \r\n            size={finalIconSize} \r\n            color={statusColor} \r\n            style={{ marginRight: tokens.spacing.sm }} \r\n          />\r\n        ) : (\r\n          <HeaderIconWithStatus \r\n            icon={icon as AstroIconName} \r\n            size={finalIconSize} \r\n            status={status}\r\n            style={{ marginRight: tokens.spacing.sm }}\r\n          />\r\n        ))}\r\n        \r\n        {/* Title with accent color — card heading system */}\r\n        <h3 style={{\r\n          margin: 0,\r\n          fontSize: titleFontSize,\r\n          fontWeight: titleFontWeight,\r\n          color: glassAccentColor,\r\n          textShadow: `0 0 16px ${glassAccentMuted}`,\r\n          letterSpacing: '0.02em',\r\n          whiteSpace: 'nowrap',\r\n          marginRight: '12px',\r\n        }}>\r\n          {title}\r\n        </h3>\r\n        \r\n        {/* Pin indicator */}\r\n        {isPinned && (\r\n          <Icon name=\"lock\" size={10} color={tokens.colors.accent.primary} style={{ marginRight: '8px' }} />\r\n        )}\r\n        \r\n        {/* Accent line with optional status badge */}\r\n        <div style={{\r\n          flex: 1,\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          gap: tokens.spacing.sm,\r\n          minWidth: 40,\r\n        }}>\r\n          <div style={{\r\n            flex: 1,\r\n            height: '1px',\r\n            background: `linear-gradient(90deg, ${glassAccentRaw} 0%, ${glassAccentMuted} 70%, ${glassAccentMuted}20 100%)`,\r\n          }} />\r\n          {/* Status badge at end of line if status is set and not 'off' */}\r\n          {status && status !== 'off' && !hideStatusIndicator && !badge && (\r\n            <StatusBadge status={status} size=\"minimal\" />\r\n          )}\r\n        </div>\r\n        \r\n        {/* Badge (takes precedence over status badge in minimal view for space) */}\r\n        {badge && (\r\n          <span style={{\r\n            backgroundColor: `${finalBadgeColor}20`,\r\n            color: finalBadgeColor,\r\n            padding: '2px 6px',\r\n            borderRadius: tokens.borderRadius.sm,\r\n            flexShrink: 0,\r\n            fontSize: tokens.typography.fontSize.xxs, // 0.625rem / 10px (AstroUXDS compact)\r\n            fontWeight: tokens.typography.fontWeight.medium,\r\n            marginLeft: '8px',\r\n          }}>\r\n            {badge}\r\n          </span>\r\n        )}\r\n        \r\n        {rightSlot}\r\n      </header>\r\n    );\r\n  }\r\n\r\n  // ═══════════════════════════════════════════════════════════════════════════\r\n  // REGULAR THEMES (Dark, Light, Simple Glass)\r\n  // ═══════════════════════════════════════════════════════════════════════════\r\n  return (\r\n    <header\r\n      className={className}\r\n      style={{\r\n        display: 'flex',\r\n        justifyContent: 'space-between',\r\n        alignItems: 'center',\r\n        marginBottom: tokens.spacing.md,\r\n        ...style,\r\n      }}\r\n    >\r\n      <div style={{ display: 'flex', alignItems: 'center', gap: iconTitleGap }}>\r\n        {/* Icon with status badge — only when icon is provided */}\r\n        {icon && (hideStatusIndicator ? (\r\n          <AstroIcon name={icon as AstroIconName} size={finalIconSize} color={statusColor} />\r\n        ) : (\r\n          <HeaderIconWithStatus \r\n            icon={icon as AstroIconName} \r\n            size={finalIconSize} \r\n            status={status}\r\n          />\r\n        ))}\r\n\r\n        <div style={{ minWidth: 0 }}>\r\n          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>\r\n            <h3\r\n              style={{\r\n                margin: 0,\r\n                fontSize: titleFontSize,\r\n                fontWeight: titleFontWeight,\r\n                lineHeight: 1.2,\r\n                color: tokens.colors.text.primary,\r\n              }}\r\n            >\r\n              {title}\r\n            </h3>\r\n            \r\n            {/* Pin indicator */}\r\n            {isPinned && (\r\n              <Icon name=\"lock\" size={12} color={tokens.colors.accent.primary} />\r\n            )}\r\n          </div>\r\n          \r\n          {subtitle && (\r\n            <span\r\n              style={{\r\n                fontSize: tokens.typography.fontSize.xs,\r\n                color: tokens.colors.text.tertiary,\r\n              }}\r\n            >\r\n              {subtitle}\r\n            </span>\r\n          )}\r\n        </div>\r\n      </div>\r\n\r\n      {/* Right side: Status badge + Badge + rightSlot */}\r\n      <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.sm }}>\r\n        {/* Status badge - consistent with Container styling */}\r\n        {status && status !== 'off' && !hideStatusIndicator && !rightSlot && (\r\n          <StatusBadge status={status} size=\"bold\" />\r\n        )}\r\n        {badge && (\r\n          <span\r\n            style={{\r\n              backgroundColor: `${finalBadgeColor}20`,\r\n              color: finalBadgeColor,\r\n              padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\r\n              borderRadius: tokens.borderRadius.sm,\r\n              flexShrink: 0,\r\n              fontSize: tokens.typography.fontSize.xs,\r\n              fontWeight: tokens.typography.fontWeight.medium,\r\n            }}\r\n          >\r\n            {badge}\r\n          </span>\r\n        )}\r\n        {rightSlot}\r\n      </div>\r\n    </header>\r\n  );\r\n});\r\n\r\nexport default CardHeader;\r\n"],"names":["CardHeader"],"mappings":"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"}