@zendir/ui 0.4.1 → 0.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.js","sources":["../../../../src/react/core/display/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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"}
+{"version":3,"file":"CardHeader.js","names":[],"sources":["../../../../src/react/core/display/CardHeader.tsx"],"sourcesContent":["/**\n * @zendir/ui - CardHeader Component\n *\n * Unified card header component for consistent styling across all cards.\n * Uses HeaderIconWithStatus for status-aware icon display.\n *\n * Features:\n * - Consistent header styling across all theme variants (Regular, Bold, Minimal)\n * - Integrated HeaderIconWithStatus for status indicator\n * - Theme-aware accent colors and styling\n * - Optional badge/tag display\n * - Optional subtitle\n * - Accessibility compliant\n *\n * @example\n * ```tsx\n * <CardHeader\n *   icon=\"satellite-transmit\"\n *   title=\"ISS\"\n *   subtitle=\"SC-001\"\n *   status=\"normal\"\n *   badge=\"LEO\"\n *   badgeColor=\"#3E3CFF\"\n * />\n * ```\n */\n\nimport React, { memo, useMemo } from \"react\";\nimport { useTheme } from \"../../theme\";\nimport { HeaderIconWithStatus } from \"./HeaderIconWithStatus\";\nimport { AstroIcon, type AstroIconName } from \"./AstroIcon\";\nimport { Icon } from \"./Icon\";\nimport { type StatusLevel, getStatusColor, safeAccentText } from \"../../utils\";\n\n// =============================================================================\n// StatusBadge - Compact status indicator for accent lines\n// =============================================================================\n\ninterface StatusBadgeProps {\n  status: StatusLevel;\n  size?: \"bold\" | \"minimal\";\n}\n\nfunction StatusBadge({\n  status,\n  size = \"bold\",\n}: StatusBadgeProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const color = tokens.colors.status[status];\n  const label = status.charAt(0).toUpperCase() + status.slice(1);\n  const isBold = size === \"bold\";\n\n  // Render status shape\n  const renderShape = () => {\n    const s = isBold ? 6 : 5;\n    switch (status) {\n      case \"critical\":\n        return (\n          <svg viewBox=\"0 0 12 12\" width={s} height={s}>\n            <polygon points=\"6,11 1,2 11,2\" fill={color} />\n          </svg>\n        );\n      case \"serious\":\n        return (\n          <svg viewBox=\"0 0 12 12\" width={s} height={s}>\n            <polygon points=\"6,1 11,6 6,11 1,6\" fill={color} />\n          </svg>\n        );\n      case \"caution\":\n        return (\n          <svg viewBox=\"0 0 12 12\" width={s} height={s}>\n            <rect x=\"1\" y=\"1\" width=\"10\" height=\"10\" fill={color} />\n          </svg>\n        );\n      case \"standby\":\n        return (\n          <svg viewBox=\"0 0 12 12\" width={s} height={s}>\n            <circle\n              cx=\"6\"\n              cy=\"6\"\n              r=\"3.5\"\n              fill=\"none\"\n              stroke={color}\n              strokeWidth=\"2\"\n            />\n          </svg>\n        );\n      case \"off\":\n        return (\n          <svg viewBox=\"0 0 12 12\" width={s} height={s}>\n            <circle cx=\"6\" cy=\"6\" r=\"3\" fill={color} />\n          </svg>\n        );\n      case \"normal\":\n      default:\n        return (\n          <svg viewBox=\"0 0 12 12\" width={s} height={s}>\n            <circle cx=\"6\" cy=\"6\" r=\"5\" fill={color} />\n          </svg>\n        );\n    }\n  };\n\n  return (\n    <span\n      style={{\n        display: \"inline-flex\",\n        alignItems: \"center\",\n        gap: isBold ? \"6px\" : \"4px\",\n        padding: isBold ? \"3px 10px\" : \"2px 8px\",\n        borderRadius: \"12px\",\n        fontSize: isBold ? \"0.6875rem\" : \"0.625rem\", // 11px / 10px in rem (AstroUXDS compliant)\n        fontWeight: 500, // AstroUXDS: medium weight\n        backgroundColor: `${color}20`,\n        color: color,\n        flexShrink: 0,\n        textTransform: \"uppercase\",\n        letterSpacing: \"0.3px\",\n      }}\n    >\n      {renderShape()}\n      {label}\n    </span>\n  );\n}\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface CardHeaderProps {\n  /** Icon name (AstroIcon) */\n  icon: AstroIconName | string;\n  /** Main title text */\n  title: string;\n  /** Optional subtitle text */\n  subtitle?: string;\n  /** Status level - determines icon color and status indicator */\n  status?: StatusLevel;\n  /** Badge text (e.g., orbit type, category) */\n  badge?: string;\n  /** Badge background color */\n  badgeColor?: string;\n  /** Show pin indicator */\n  isPinned?: boolean;\n  /** Icon size override */\n  iconSize?: number;\n  /** Custom icon color (overrides status-based coloring) */\n  iconColor?: string;\n  /** Hide status indicator (show plain icon) */\n  hideStatusIndicator?: boolean;\n  /** Additional className */\n  className?: string;\n  /** Additional styles */\n  style?: React.CSSProperties;\n  /** Slot for additional content on the right side */\n  rightSlot?: React.ReactNode;\n}\n\n// =============================================================================\n// CardHeader Component\n// =============================================================================\n\nexport const CardHeader = memo(function CardHeader({\n  icon,\n  title,\n  subtitle,\n  status = \"off\",\n  badge,\n  badgeColor,\n  isPinned,\n  iconSize,\n  iconColor,\n  hideStatusIndicator = false,\n  className,\n  style,\n  rightSlot,\n}: CardHeaderProps) {\n  const { tokens, theme } = useTheme();\n\n  // Theme detection\n  const _isTransparentTheme =\n    theme === \"transparent\" ||\n    theme === \"transparent-bold\" ||\n    theme === \"transparent-minimal\";\n  const isBoldVariant = theme === \"transparent-bold\";\n  const isMinimalVariant = theme === \"transparent-minimal\";\n  const _useGlassMode = isBoldVariant || isMinimalVariant;\n\n  // Glass accent colors — use safeAccentText for text to meet WCAG AA 4.5:1\n  const glassAccentColor = useMemo(\n    () => safeAccentText(tokens.colors.accent.primary),\n    [tokens.colors.accent.primary],\n  );\n  const glassAccentRaw = tokens.colors.accent.primary; // raw color for non-text usage (gradients, glows)\n  const glassAccentMuted = `${glassAccentRaw}66`;\n\n  // Status color (for icon when showing status)\n  const statusColor =\n    iconColor ??\n    (status ? getStatusColor(status) : tokens.colors.text.secondary);\n\n  // Single card heading system (tokens.layout.card.heading)\n  const headingConfig = tokens.layout?.card?.heading ?? {\n    iconSize: 20,\n    iconSizeCompact: 16,\n    titleFontSize: \"1.125rem\",\n    titleFontWeight: 500,\n    gap: 8,\n  };\n  const defaultIconSize = isMinimalVariant\n    ? headingConfig.iconSizeCompact\n    : headingConfig.iconSize;\n  const finalIconSize = iconSize ?? defaultIconSize;\n  const titleFontSize = headingConfig.titleFontSize;\n  const titleFontWeight = headingConfig.titleFontWeight;\n  const iconTitleGap = headingConfig.gap;\n\n  // Badge color (use safe accent text if not provided) — ensures 4.5:1 contrast\n  const safeBadgeColor = useMemo(\n    () =>\n      badgeColor\n        ? safeAccentText(badgeColor)\n        : safeAccentText(tokens.colors.accent.primary),\n    [badgeColor, tokens.colors.accent.primary],\n  );\n  const finalBadgeColor = safeBadgeColor;\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // BOLD VARIANT\n  // ═══════════════════════════════════════════════════════════════════════════\n  if (isBoldVariant) {\n    return (\n      <header\n        className={className}\n        style={{\n          position: \"relative\",\n          zIndex: 1,\n          marginBottom: tokens.spacing.sm,\n          ...style,\n        }}\n      >\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n          }}\n        >\n          <div\n            style={{ display: \"flex\", alignItems: \"center\", gap: iconTitleGap }}\n          >\n            {/* Icon with status badge — only when icon is provided */}\n            {icon &&\n              (hideStatusIndicator ? (\n                <AstroIcon\n                  name={icon as AstroIconName}\n                  size={finalIconSize}\n                  color={statusColor}\n                />\n              ) : (\n                <HeaderIconWithStatus\n                  icon={icon as AstroIconName}\n                  size={finalIconSize}\n                  status={status}\n                />\n              ))}\n\n            {/* Title with accent color — card heading system */}\n            <h3\n              style={{\n                margin: 0,\n                fontSize: titleFontSize,\n                fontWeight: titleFontWeight,\n                color: glassAccentColor,\n                letterSpacing: \"0.5px\",\n                textShadow: `0 0 20px ${glassAccentMuted}`,\n              }}\n            >\n              {title}\n            </h3>\n\n            {/* Pin indicator */}\n            {isPinned && (\n              <Icon\n                name=\"lock\"\n                size={12}\n                color={tokens.colors.accent.primary}\n              />\n            )}\n          </div>\n\n          {/* Right side: Badge + rightSlot */}\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: tokens.spacing.sm,\n            }}\n          >\n            {badge && (\n              <span\n                style={{\n                  backgroundColor: `${finalBadgeColor}20`,\n                  color: finalBadgeColor,\n                  padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n                  borderRadius: tokens.borderRadius.sm,\n                  flexShrink: 0,\n                  fontSize: tokens.typography.fontSize.xs,\n                  fontWeight: tokens.typography.fontWeight.medium,\n                }}\n              >\n                {badge}\n              </span>\n            )}\n            {rightSlot}\n          </div>\n        </div>\n\n        {/* Subtitle if provided */}\n        {subtitle && (\n          <span\n            style={{\n              fontSize: tokens.typography.fontSize.xs,\n              color: tokens.colors.text.tertiary,\n              marginLeft: finalIconSize + parseInt(tokens.spacing.sm),\n            }}\n          >\n            {subtitle}\n          </span>\n        )}\n\n        {/* Accent line with optional status badge */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: tokens.spacing.sm,\n            marginTop: tokens.spacing.sm,\n            marginBottom: tokens.spacing.xs,\n          }}\n        >\n          <div\n            style={{\n              flex: 1,\n              height: \"2px\",\n              background: `linear-gradient(90deg, ${glassAccentRaw} 0%, ${glassAccentMuted} 70%, ${glassAccentMuted}20 100%)`,\n              boxShadow: `0 0 8px ${glassAccentMuted}`,\n            }}\n          />\n          {/* Status badge at end of line if status is set and not 'off' */}\n          {status && status !== \"off\" && !hideStatusIndicator && (\n            <StatusBadge status={status} size=\"bold\" />\n          )}\n        </div>\n      </header>\n    );\n  }\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // MINIMAL VARIANT\n  // ═══════════════════════════════════════════════════════════════════════════\n  if (isMinimalVariant) {\n    return (\n      <header\n        className={className}\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          marginBottom: tokens.spacing.sm,\n          position: \"relative\",\n          zIndex: 1,\n          ...style,\n        }}\n      >\n        {/* Icon with status badge — only when icon is provided */}\n        {icon &&\n          (hideStatusIndicator ? (\n            <AstroIcon\n              name={icon as AstroIconName}\n              size={finalIconSize}\n              color={statusColor}\n              style={{ marginRight: tokens.spacing.sm }}\n            />\n          ) : (\n            <HeaderIconWithStatus\n              icon={icon as AstroIconName}\n              size={finalIconSize}\n              status={status}\n              style={{ marginRight: tokens.spacing.sm }}\n            />\n          ))}\n\n        {/* Title with accent color — card heading system */}\n        <h3\n          style={{\n            margin: 0,\n            fontSize: titleFontSize,\n            fontWeight: titleFontWeight,\n            color: glassAccentColor,\n            textShadow: `0 0 16px ${glassAccentMuted}`,\n            letterSpacing: \"0.02em\",\n            whiteSpace: \"nowrap\",\n            marginRight: \"12px\",\n          }}\n        >\n          {title}\n        </h3>\n\n        {/* Pin indicator */}\n        {isPinned && (\n          <Icon\n            name=\"lock\"\n            size={10}\n            color={tokens.colors.accent.primary}\n            style={{ marginRight: \"8px\" }}\n          />\n        )}\n\n        {/* Accent line with optional status badge */}\n        <div\n          style={{\n            flex: 1,\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: tokens.spacing.sm,\n            minWidth: 40,\n          }}\n        >\n          <div\n            style={{\n              flex: 1,\n              height: \"1px\",\n              background: `linear-gradient(90deg, ${glassAccentRaw} 0%, ${glassAccentMuted} 70%, ${glassAccentMuted}20 100%)`,\n            }}\n          />\n          {/* Status badge at end of line if status is set and not 'off' */}\n          {status && status !== \"off\" && !hideStatusIndicator && !badge && (\n            <StatusBadge status={status} size=\"minimal\" />\n          )}\n        </div>\n\n        {/* Badge (takes precedence over status badge in minimal view for space) */}\n        {badge && (\n          <span\n            style={{\n              backgroundColor: `${finalBadgeColor}20`,\n              color: finalBadgeColor,\n              padding: \"2px 6px\",\n              borderRadius: tokens.borderRadius.sm,\n              flexShrink: 0,\n              fontSize: tokens.typography.fontSize.xxs, // 0.625rem / 10px (AstroUXDS compact)\n              fontWeight: tokens.typography.fontWeight.medium,\n              marginLeft: \"8px\",\n            }}\n          >\n            {badge}\n          </span>\n        )}\n\n        {rightSlot}\n      </header>\n    );\n  }\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // REGULAR THEMES (Dark, Light, Simple Glass)\n  // ═══════════════════════════════════════════════════════════════════════════\n  return (\n    <header\n      className={className}\n      style={{\n        display: \"flex\",\n        justifyContent: \"space-between\",\n        alignItems: \"center\",\n        marginBottom: tokens.spacing.md,\n        ...style,\n      }}\n    >\n      <div style={{ display: \"flex\", alignItems: \"center\", gap: iconTitleGap }}>\n        {/* Icon with status badge — only when icon is provided */}\n        {icon &&\n          (hideStatusIndicator ? (\n            <AstroIcon\n              name={icon as AstroIconName}\n              size={finalIconSize}\n              color={statusColor}\n            />\n          ) : (\n            <HeaderIconWithStatus\n              icon={icon as AstroIconName}\n              size={finalIconSize}\n              status={status}\n            />\n          ))}\n\n        <div style={{ minWidth: 0 }}>\n          <div style={{ display: \"flex\", alignItems: \"center\", gap: 6 }}>\n            <h3\n              style={{\n                margin: 0,\n                fontSize: titleFontSize,\n                fontWeight: titleFontWeight,\n                lineHeight: 1.2,\n                color: tokens.colors.text.primary,\n              }}\n            >\n              {title}\n            </h3>\n\n            {/* Pin indicator */}\n            {isPinned && (\n              <Icon\n                name=\"lock\"\n                size={12}\n                color={tokens.colors.accent.primary}\n              />\n            )}\n          </div>\n\n          {subtitle && (\n            <span\n              style={{\n                fontSize: tokens.typography.fontSize.xs,\n                color: tokens.colors.text.tertiary,\n              }}\n            >\n              {subtitle}\n            </span>\n          )}\n        </div>\n      </div>\n\n      {/* Right side: Status badge + Badge + rightSlot */}\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: tokens.spacing.sm,\n        }}\n      >\n        {/* Status badge - consistent with Container styling */}\n        {status && status !== \"off\" && !hideStatusIndicator && !rightSlot && (\n          <StatusBadge status={status} size=\"bold\" />\n        )}\n        {badge && (\n          <span\n            style={{\n              backgroundColor: `${finalBadgeColor}20`,\n              color: finalBadgeColor,\n              padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n              borderRadius: tokens.borderRadius.sm,\n              flexShrink: 0,\n              fontSize: tokens.typography.fontSize.xs,\n              fontWeight: tokens.typography.fontWeight.medium,\n            }}\n          >\n            {badge}\n          </span>\n        )}\n        {rightSlot}\n      </div>\n    </header>\n  );\n});\n\nexport default CardHeader;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,SAAS,YAAY,EACnB,QACA,OAAO,UACgC;CACvC,MAAM,EAAE,WAAW,SAAS;CAC5B,MAAM,QAAQ,OAAO,OAAO,OAAO;CACnC,MAAM,QAAQ,OAAO,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,OAAO,MAAM,CAAC;CAC7D,MAAM,SAAS,SAAS;CAGxB,MAAM,oBAAoB;EACxB,MAAM,IAAI,SAAS,IAAI;EACvB,QAAQ,QAAR;GACE,KAAK,YACH,OACE,oBAAC,OAAD;IAAK,SAAQ;IAAY,OAAO;IAAG,QAAQ;cACzC,oBAAC,WAAD;KAAS,QAAO;KAAgB,MAAM;IAAQ,CAAA;GAC3C,CAAA;GAET,KAAK,WACH,OACE,oBAAC,OAAD;IAAK,SAAQ;IAAY,OAAO;IAAG,QAAQ;cACzC,oBAAC,WAAD;KAAS,QAAO;KAAoB,MAAM;IAAQ,CAAA;GAC/C,CAAA;GAET,KAAK,WACH,OACE,oBAAC,OAAD;IAAK,SAAQ;IAAY,OAAO;IAAG,QAAQ;cACzC,oBAAC,QAAD;KAAM,GAAE;KAAI,GAAE;KAAI,OAAM;KAAK,QAAO;KAAK,MAAM;IAAQ,CAAA;GACpD,CAAA;GAET,KAAK,WACH,OACE,oBAAC,OAAD;IAAK,SAAQ;IAAY,OAAO;IAAG,QAAQ;cACzC,oBAAC,UAAD;KACE,IAAG;KACH,IAAG;KACH,GAAE;KACF,MAAK;KACL,QAAQ;KACR,aAAY;IACb,CAAA;GACE,CAAA;GAET,KAAK,OACH,OACE,oBAAC,OAAD;IAAK,SAAQ;IAAY,OAAO;IAAG,QAAQ;cACzC,oBAAC,UAAD;KAAQ,IAAG;KAAI,IAAG;KAAI,GAAE;KAAI,MAAM;IAAQ,CAAA;GACvC,CAAA;GAGT,SACE,OACE,oBAAC,OAAD;IAAK,SAAQ;IAAY,OAAO;IAAG,QAAQ;cACzC,oBAAC,UAAD;KAAQ,IAAG;KAAI,IAAG;KAAI,GAAE;KAAI,MAAM;IAAQ,CAAA;GACvC,CAAA;EAEX;CACF;CAEA,OACE,qBAAC,QAAD;EACE,OAAO;GACL,SAAS;GACT,YAAY;GACZ,KAAK,SAAS,QAAQ;GACtB,SAAS,SAAS,aAAa;GAC/B,cAAc;GACd,UAAU,SAAS,cAAc;GACjC,YAAY;GACZ,iBAAiB,GAAG,MAAM;GACnB;GACP,YAAY;GACZ,eAAe;GACf,eAAe;EACjB;YAdF,CAgBG,YAAY,GACZ,KACG;;AAEV;AAuCA,IAAa,aAAa,KAAK,SAAS,WAAW,EACjD,MACA,OACA,UACA,SAAS,OACT,OACA,YACA,UACA,UACA,WACA,sBAAsB,OACtB,WACA,OACA,aACkB;CAClB,MAAM,EAAE,QAAQ,UAAU,SAAS;CAOnC,MAAM,gBAAgB,UAAU;CAChC,MAAM,mBAAmB,UAAU;CAInC,MAAM,mBAAmB,cACjB,eAAe,OAAO,OAAO,OAAO,OAAO,GACjD,CAAC,OAAO,OAAO,OAAO,OAAO,CAC/B;CACA,MAAM,iBAAiB,OAAO,OAAO,OAAO;CAC5C,MAAM,mBAAmB,GAAG,eAAe;CAG3C,MAAM,cACJ,cACC,SAAS,eAAe,MAAM,IAAI,OAAO,OAAO,KAAK;CAGxD,MAAM,gBAAgB,OAAO,QAAQ,MAAM,WAAW;EACpD,UAAU;EACV,iBAAiB;EACjB,eAAe;EACf,iBAAiB;EACjB,KAAK;CACP;CACA,MAAM,kBAAkB,mBACpB,cAAc,kBACd,cAAc;CAClB,MAAM,gBAAgB,YAAY;CAClC,MAAM,gBAAgB,cAAc;CACpC,MAAM,kBAAkB,cAAc;CACtC,MAAM,eAAe,cAAc;CAUnC,MAAM,kBAPiB,cAEnB,aACI,eAAe,UAAU,IACzB,eAAe,OAAO,OAAO,OAAO,OAAO,GACjD,CAAC,YAAY,OAAO,OAAO,OAAO,OAAO,CAEnB;CAKxB,IAAI,eACF,OACE,qBAAC,UAAD;EACa;EACX,OAAO;GACL,UAAU;GACV,QAAQ;GACR,cAAc,OAAO,QAAQ;GAC7B,GAAG;EACL;YAPF;GASE,qBAAC,OAAD;IACE,OAAO;KACL,SAAS;KACT,YAAY;KACZ,gBAAgB;IAClB;cALF,CAOE,qBAAC,OAAD;KACE,OAAO;MAAE,SAAS;MAAQ,YAAY;MAAU,KAAK;KAAa;eADpE;MAIG,SACE,sBACC,oBAAC,WAAD;OACE,MAAM;OACN,MAAM;OACN,OAAO;MACR,CAAA,IAED,oBAAC,sBAAD;OACQ;OACN,MAAM;OACE;MACT,CAAA;MAIL,oBAAC,MAAD;OACE,OAAO;QACL,QAAQ;QACR,UAAU;QACV,YAAY;QACZ,OAAO;QACP,eAAe;QACf,YAAY,YAAY;OAC1B;iBAEC;MACC,CAAA;MAGH,YACC,oBAAC,MAAD;OACE,MAAK;OACL,MAAM;OACN,OAAO,OAAO,OAAO,OAAO;MAC7B,CAAA;KAEA;QAGL,qBAAC,OAAD;KACE,OAAO;MACL,SAAS;MACT,YAAY;MACZ,KAAK,OAAO,QAAQ;KACtB;eALF,CAOG,SACC,oBAAC,QAAD;MACE,OAAO;OACL,iBAAiB,GAAG,gBAAgB;OACpC,OAAO;OACP,SAAS,GAAG,OAAO,QAAQ,GAAG,GAAG,OAAO,QAAQ;OAChD,cAAc,OAAO,aAAa;OAClC,YAAY;OACZ,UAAU,OAAO,WAAW,SAAS;OACrC,YAAY,OAAO,WAAW,WAAW;MAC3C;gBAEC;KACG,CAAA,GAEP,SACE;MACF;;GAGJ,YACC,oBAAC,QAAD;IACE,OAAO;KACL,UAAU,OAAO,WAAW,SAAS;KACrC,OAAO,OAAO,OAAO,KAAK;KAC1B,YAAY,gBAAgB,SAAS,OAAO,QAAQ,EAAE;IACxD;cAEC;GACG,CAAA;GAIR,qBAAC,OAAD;IACE,OAAO;KACL,SAAS;KACT,YAAY;KACZ,KAAK,OAAO,QAAQ;KACpB,WAAW,OAAO,QAAQ;KAC1B,cAAc,OAAO,QAAQ;IAC/B;cAPF,CASE,oBAAC,OAAD,EACE,OAAO;KACL,MAAM;KACN,QAAQ;KACR,YAAY,0BAA0B,eAAe,OAAO,iBAAiB,QAAQ,iBAAiB;KACtG,WAAW,WAAW;IACxB,EACD,CAAA,GAEA,UAAU,WAAW,SAAS,CAAC,uBAC9B,oBAAC,aAAD;KAAqB;KAAQ,MAAK;IAAQ,CAAA,CAEzC;;EACC;;CAOZ,IAAI,kBACF,OACE,qBAAC,UAAD;EACa;EACX,OAAO;GACL,SAAS;GACT,YAAY;GACZ,cAAc,OAAO,QAAQ;GAC7B,UAAU;GACV,QAAQ;GACR,GAAG;EACL;YATF;GAYG,SACE,sBACC,oBAAC,WAAD;IACE,MAAM;IACN,MAAM;IACN,OAAO;IACP,OAAO,EAAE,aAAa,OAAO,QAAQ,GAAG;GACzC,CAAA,IAED,oBAAC,sBAAD;IACQ;IACN,MAAM;IACE;IACR,OAAO,EAAE,aAAa,OAAO,QAAQ,GAAG;GACzC,CAAA;GAIL,oBAAC,MAAD;IACE,OAAO;KACL,QAAQ;KACR,UAAU;KACV,YAAY;KACZ,OAAO;KACP,YAAY,YAAY;KACxB,eAAe;KACf,YAAY;KACZ,aAAa;IACf;cAEC;GACC,CAAA;GAGH,YACC,oBAAC,MAAD;IACE,MAAK;IACL,MAAM;IACN,OAAO,OAAO,OAAO,OAAO;IAC5B,OAAO,EAAE,aAAa,MAAM;GAC7B,CAAA;GAIH,qBAAC,OAAD;IACE,OAAO;KACL,MAAM;KACN,SAAS;KACT,YAAY;KACZ,KAAK,OAAO,QAAQ;KACpB,UAAU;IACZ;cAPF,CASE,oBAAC,OAAD,EACE,OAAO;KACL,MAAM;KACN,QAAQ;KACR,YAAY,0BAA0B,eAAe,OAAO,iBAAiB,QAAQ,iBAAiB;IACxG,EACD,CAAA,GAEA,UAAU,WAAW,SAAS,CAAC,uBAAuB,CAAC,SACtD,oBAAC,aAAD;KAAqB;KAAQ,MAAK;IAAW,CAAA,CAE5C;;GAGJ,SACC,oBAAC,QAAD;IACE,OAAO;KACL,iBAAiB,GAAG,gBAAgB;KACpC,OAAO;KACP,SAAS;KACT,cAAc,OAAO,aAAa;KAClC,YAAY;KACZ,UAAU,OAAO,WAAW,SAAS;KACrC,YAAY,OAAO,WAAW,WAAW;KACzC,YAAY;IACd;cAEC;GACG,CAAA;GAGP;EACK;;CAOZ,OACE,qBAAC,UAAD;EACa;EACX,OAAO;GACL,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,cAAc,OAAO,QAAQ;GAC7B,GAAG;EACL;YARF,CAUE,qBAAC,OAAD;GAAK,OAAO;IAAE,SAAS;IAAQ,YAAY;IAAU,KAAK;GAAa;aAAvE,CAEG,SACE,sBACC,oBAAC,WAAD;IACE,MAAM;IACN,MAAM;IACN,OAAO;GACR,CAAA,IAED,oBAAC,sBAAD;IACQ;IACN,MAAM;IACE;GACT,CAAA,IAGL,qBAAC,OAAD;IAAK,OAAO,EAAE,UAAU,EAAE;cAA1B,CACE,qBAAC,OAAD;KAAK,OAAO;MAAE,SAAS;MAAQ,YAAY;MAAU,KAAK;KAAE;eAA5D,CACE,oBAAC,MAAD;MACE,OAAO;OACL,QAAQ;OACR,UAAU;OACV,YAAY;OACZ,YAAY;OACZ,OAAO,OAAO,OAAO,KAAK;MAC5B;gBAEC;KACC,CAAA,GAGH,YACC,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,OAAO,OAAO,OAAO,OAAO;KAC7B,CAAA,CAEA;QAEJ,YACC,oBAAC,QAAD;KACE,OAAO;MACL,UAAU,OAAO,WAAW,SAAS;MACrC,OAAO,OAAO,OAAO,KAAK;KAC5B;eAEC;IACG,CAAA,CAEL;KACF;MAGL,qBAAC,OAAD;GACE,OAAO;IACL,SAAS;IACT,YAAY;IACZ,KAAK,OAAO,QAAQ;GACtB;aALF;IAQG,UAAU,WAAW,SAAS,CAAC,uBAAuB,CAAC,aACtD,oBAAC,aAAD;KAAqB;KAAQ,MAAK;IAAQ,CAAA;IAE3C,SACC,oBAAC,QAAD;KACE,OAAO;MACL,iBAAiB,GAAG,gBAAgB;MACpC,OAAO;MACP,SAAS,GAAG,OAAO,QAAQ,GAAG,GAAG,OAAO,QAAQ;MAChD,cAAc,OAAO,aAAa;MAClC,YAAY;MACZ,UAAU,OAAO,WAAW,SAAS;MACrC,YAAY,OAAO,WAAW,WAAW;KAC3C;eAEC;IACG,CAAA;IAEP;GACE;IACC;;AAEZ,CAAC"}

package/dist/react/core/display/Container.d.ts

@@ -1,9 +1,8 @@
 import { default as React } from 'react';
 import { StatusLevel } from '../../utils';
 import { AstroIconName } from './AstroIcon';
-
-export type ContainerVariant = 'default' | 'elevated' | 'outlined' | 'ghost' | 'glass' | 'glass-dark' | 'glass-light';
-export type ContainerPadding = 'none' | 'sm' | 'md' | 'lg';
+export type ContainerVariant = "default" | "elevated" | "outlined" | "ghost" | "glass" | "glass-dark" | "glass-light";
+export type ContainerPadding = "none" | "sm" | "md" | "lg";
 export interface ContainerProps {
     /** Visual variant */
     variant?: ContainerVariant;