@zendir/ui 0.1.0

package/dist/react/core/Button.js

@@ -0,0 +1,306 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { memo, forwardRef, useState, useMemo, useRef, useCallback, useLayoutEffect } from "react";
+import ReactDOM from "react-dom";
+import { safeAccentText, classNames } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const Button = memo(forwardRef(function Button2({
+  variant = "primary",
+  size = "medium",
+  icon,
+  iconEnd,
+  loading = false,
+  fullWidth = false,
+  tooltip,
+  disabled,
+  className = "",
+  children,
+  style,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
+  ...rest
+}, ref) {
+  const { tokens, theme } = useTheme();
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const [isHovered, setIsHovered] = useState(false);
+  const [isActive, setIsActive] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [showTooltip, setShowTooltip] = useState(false);
+  const isDisabled = disabled || loading;
+  const transparentDefault = tokens.colors.interactive.transparentDefault;
+  const transparentHover = tokens.colors.interactive.transparentHover;
+  const safeAccentBg = useMemo(() => {
+    const hex = tokens.colors.accent.primary.replace("#", "");
+    if (hex.length < 6) return tokens.colors.accent.primary;
+    const toLinear = (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    const r = parseInt(hex.slice(0, 2), 16) / 255;
+    const g = parseInt(hex.slice(2, 4), 16) / 255;
+    const b = parseInt(hex.slice(4, 6), 16) / 255;
+    const L = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+    if (1.05 / (L + 0.05) >= 4.5) return tokens.colors.accent.primary;
+    const factor = 0.88;
+    const dr = Math.min(255, Math.round(r * 255 * factor));
+    const dg = Math.min(255, Math.round(g * 255 * factor));
+    const db = Math.min(255, Math.round(b * 255 * factor));
+    return `#${dr.toString(16).padStart(2, "0")}${dg.toString(16).padStart(2, "0")}${db.toString(16).padStart(2, "0")}`;
+  }, [tokens.colors.accent.primary]);
+  const safeAccentFg = useMemo(() => safeAccentText(tokens.colors.accent.primary), [tokens.colors.accent.primary]);
+  const sizeConfig = {
+    small: {
+      padding: `${tokens.spacing.xxs} ${tokens.spacing.smd}`,
+      fontSize: tokens.typography.fontSize.xs,
+      height: "24px",
+      gap: tokens.spacing.xs,
+      iconSize: 13,
+      borderRadius: tokens.borderRadius.sm
+    },
+    medium: {
+      padding: `${tokens.spacing.xxs} ${tokens.spacing.md}`,
+      fontSize: tokens.typography.fontSize.sm,
+      height: "28px",
+      gap: tokens.spacing.xs,
+      iconSize: 15,
+      borderRadius: tokens.borderRadius.md
+    },
+    large: {
+      padding: `${tokens.spacing.xs} ${tokens.spacing.lg}`,
+      fontSize: tokens.typography.fontSize.base,
+      height: "34px",
+      gap: tokens.spacing.sm,
+      iconSize: 17,
+      borderRadius: tokens.borderRadius.md
+    }
+  };
+  const config = sizeConfig[size];
+  const getVariantStyles = () => {
+    const baseTransition = `${tokens.animation.normal}, opacity ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default}`;
+    if (isTransparentTheme && transparentDefault && transparentHover) {
+      switch (variant) {
+        case "primary":
+          return {
+            backgroundColor: isHovered && !isDisabled ? transparentHover : transparentDefault,
+            color: tokens.colors.text.primary,
+            border: `1px solid ${isHovered && !isDisabled ? "rgba(139, 92, 246, 0.5)" : "rgba(139, 92, 246, 0.25)"}`,
+            boxShadow: isHovered && !isDisabled ? "0 0 10px rgba(139, 92, 246, 0.15)" : "none",
+            transition: baseTransition,
+            backdropFilter: "blur(8px)",
+            WebkitBackdropFilter: "blur(8px)"
+          };
+        case "secondary":
+          return {
+            backgroundColor: isHovered && !isDisabled ? `${tokens.colors.accent.primary}15` : transparentDefault,
+            color: safeAccentFg,
+            border: `1px solid ${isHovered && !isDisabled ? `${tokens.colors.accent.primary}70` : `${tokens.colors.accent.primary}30`}`,
+            boxShadow: "none",
+            transition: baseTransition,
+            backdropFilter: "blur(8px)",
+            WebkitBackdropFilter: "blur(8px)"
+          };
+        case "borderless":
+          return {
+            backgroundColor: isHovered && !isDisabled ? transparentHover : transparentDefault,
+            color: safeAccentFg,
+            border: "none",
+            boxShadow: "none",
+            transition: baseTransition,
+            backdropFilter: "blur(6px)",
+            WebkitBackdropFilter: "blur(6px)"
+          };
+      }
+    }
+    switch (variant) {
+      case "primary":
+        return {
+          backgroundColor: isHovered && !isDisabled ? tokens.colors.interactive.hover : safeAccentBg,
+          color: "#ffffff",
+          border: "none",
+          boxShadow: isHovered && !isDisabled ? `0 2px 8px -2px ${tokens.colors.accent.primary}35` : "none",
+          transition: baseTransition
+        };
+      case "secondary":
+        return {
+          backgroundColor: isHovered && !isDisabled ? `${tokens.colors.accent.primary}12` : "transparent",
+          color: isHovered && !isDisabled ? safeAccentFg : safeAccentFg,
+          border: `${tokens.borders.width.medium} solid ${isHovered && !isDisabled ? tokens.colors.accent.primary : `${tokens.colors.accent.primary}80`}`,
+          boxShadow: "none",
+          transition: baseTransition
+        };
+      case "borderless":
+        return {
+          backgroundColor: isHovered && !isDisabled ? `${tokens.colors.accent.primary}10` : "transparent",
+          color: safeAccentFg,
+          border: `${tokens.borders.width.medium} solid transparent`,
+          boxShadow: "none",
+          transition: baseTransition
+        };
+    }
+  };
+  const focusStyles = isFocused ? {
+    outline: "none",
+    boxShadow: tokens.borders.focusRing.button
+  } : {};
+  const activeStyles = isActive && !isDisabled ? {
+    filter: "brightness(0.85)",
+    transform: "scale(0.98)",
+    boxShadow: "none"
+  } : {};
+  const baseStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: config.gap,
+    padding: config.padding,
+    height: config.height,
+    fontSize: config.fontSize,
+    fontWeight: 400,
+    fontFamily: tokens.typography.fontFamily.primary,
+    letterSpacing: "0.02em",
+    borderRadius: config.borderRadius,
+    cursor: isDisabled ? "not-allowed" : "pointer",
+    opacity: isDisabled ? 0.5 : 1,
+    outline: "none",
+    textDecoration: "none",
+    whiteSpace: "nowrap",
+    userSelect: "none",
+    width: fullWidth ? "100%" : "auto",
+    position: "relative",
+    ...getVariantStyles(),
+    ...focusStyles,
+    ...activeStyles,
+    ...style
+  };
+  const spinner = /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: config.iconSize,
+      height: config.iconSize,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      style: {
+        animation: "zendir-spin 0.8s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeDasharray: "31.4 31.4",
+            strokeDashoffset: "10",
+            opacity: "0.9"
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `@keyframes zendir-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }` })
+      ]
+    }
+  );
+  const internalRef = useRef(null);
+  const tooltipNodeRef = useRef(null);
+  const [tooltipPos, setTooltipPos] = useState(null);
+  const mergedRef = useCallback((node) => {
+    internalRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
+  useLayoutEffect(() => {
+    if (!showTooltip || !tooltip || !internalRef.current) {
+      setTooltipPos(null);
+      return;
+    }
+    const btn = internalRef.current.getBoundingClientRect();
+    const gap = 8;
+    let top = btn.top - gap;
+    let left = btn.left + btn.width / 2;
+    if (tooltipNodeRef.current) {
+      const tt = tooltipNodeRef.current.getBoundingClientRect();
+      top = btn.top - tt.height - gap;
+      left = btn.left + (btn.width - tt.width) / 2;
+      if (left < 8) left = 8;
+      if (left + tt.width > window.innerWidth - 8) left = window.innerWidth - tt.width - 8;
+      if (top < 8) top = btn.bottom + gap;
+    }
+    setTooltipPos({ top, left });
+  }, [showTooltip, tooltip]);
+  const tooltipPortal = tooltip && showTooltip && ReactDOM.createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: tooltipNodeRef,
+        role: "tooltip",
+        style: {
+          position: "fixed",
+          top: tooltipPos ? tooltipPos.top : -9999,
+          left: tooltipPos ? tooltipPos.left : -9999,
+          padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
+          fontSize: "0.75rem",
+          fontWeight: 500,
+          color: tokens.colors.text.primary,
+          backgroundColor: tokens.colors.background.elevated,
+          border: tokens.borders.divider,
+          borderRadius: tokens.borderRadius.md,
+          boxShadow: tokens.shadows.md,
+          whiteSpace: "nowrap",
+          zIndex: 2147483100,
+          pointerEvents: "none",
+          opacity: tooltipPos ? 1 : 0,
+          animation: tooltipPos ? `zendir-btn-tip ${tokens.animation.duration.fast}ms ${tokens.animation.easing.default} both` : "none"
+        },
+        children: [
+          tooltip,
+          /* @__PURE__ */ jsx("style", { children: `@keyframes zendir-btn-tip { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }` })
+        ]
+      }
+    ),
+    document.body
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: mergedRef,
+        type: "button",
+        disabled: isDisabled,
+        className: classNames("zendir-button", `zendir-button--${variant}`, `zendir-button--${size}`, className),
+        style: baseStyle,
+        title: tooltip && !showTooltip ? tooltip : void 0,
+        onMouseDown: () => setIsActive(true),
+        onMouseUp: () => setIsActive(false),
+        onMouseEnter: (e) => {
+          setIsHovered(true);
+          setShowTooltip(true);
+          onMouseEnter == null ? void 0 : onMouseEnter(e);
+        },
+        onMouseLeave: (e) => {
+          setIsHovered(false);
+          setIsActive(false);
+          setShowTooltip(false);
+          onMouseLeave == null ? void 0 : onMouseLeave(e);
+        },
+        onFocus: (e) => {
+          setIsFocused(true);
+          onFocus == null ? void 0 : onFocus(e);
+        },
+        onBlur: (e) => {
+          setIsFocused(false);
+          onBlur == null ? void 0 : onBlur(e);
+        },
+        ...rest,
+        children: [
+          loading ? spinner : icon,
+          children && /* @__PURE__ */ jsx("span", { children }),
+          iconEnd && !loading && iconEnd
+        ]
+      }
+    ),
+    tooltipPortal
+  ] });
+}));
+export {
+  Button
+};
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../src/react/core/Button.tsx"],"sourcesContent":["/**\n * @zendir/ui - Button Component\n * \n * Enterprise-grade button following Astro UX Design System with Zendir purple accents.\n * \n * Astro UX Compliance:\n * - Three visual variants: primary, secondary, borderless\n * - Size variants: small, medium, large\n * - Sentence case capitalization\n * - Focus ring for accessibility (WCAG 2.1 AA)\n * - Right-align in button groups (primary on right)\n * \n * Zendir Enhancements:\n * - Purple accent colors\n * - Smooth micro-interactions\n * - Subtle glow effects\n * - Modern glassmorphism hover states\n * \n * @example\n * ```tsx\n * <Button>Primary Action</Button>\n * <Button variant=\"secondary\">Cancel</Button>\n * <Button variant=\"borderless\" icon={<Icon name=\"settings\" />}>Settings</Button>\n * <Button loading>Saving...</Button>\n * ```\n */\n\nimport React, { memo, forwardRef, useState, useMemo, useRef, useLayoutEffect, useCallback } from 'react';\nimport ReactDOM from 'react-dom';\nimport { useTheme } from '../theme';\nimport { classNames, safeAccentText } from '../utils';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'borderless';\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual variant */\n  variant?: ButtonVariant;\n  /** Size variant */\n  size?: ButtonSize;\n  /** Icon to display before text */\n  icon?: React.ReactNode;\n  /** Icon to display after text */\n  iconEnd?: React.ReactNode;\n  /** Show loading spinner */\n  loading?: boolean;\n  /** Full width button */\n  fullWidth?: boolean;\n  /** Tooltip text (shows on hover) */\n  tooltip?: string;\n  /** Custom className */\n  className?: string;\n  /** Children */\n  children?: React.ReactNode;\n}\n\nexport const Button = memo(forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = 'primary',\n    size = 'medium',\n    icon,\n    iconEnd,\n    loading = false,\n    fullWidth = false,\n    tooltip,\n    disabled,\n    className = '',\n    children,\n    style,\n    onMouseEnter,\n    onMouseLeave,\n    onFocus,\n    onBlur,\n    ...rest\n  },\n  ref\n): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  \n  // Spin keyframe is used by loading spinner only (injected there)\n\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const [isHovered, setIsHovered] = useState(false);\n  const [isActive, setIsActive] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [showTooltip, setShowTooltip] = useState(false);\n  \n  const isDisabled = disabled || loading;\n  const transparentDefault = tokens.colors.interactive.transparentDefault;\n  const transparentHover = tokens.colors.interactive.transparentHover;\n\n  // WCAG AA: compute a button-safe background from accent.primary\n  // If white text (#fff) on the accent bg doesn't meet 4.5:1, darken it proportionally.\n  const safeAccentBg = useMemo(() => {\n    const hex = tokens.colors.accent.primary.replace('#', '');\n    if (hex.length < 6) return tokens.colors.accent.primary;\n    const toLinear = (c: number) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\n    const r = parseInt(hex.slice(0, 2), 16) / 255;\n    const g = parseInt(hex.slice(2, 4), 16) / 255;\n    const b = parseInt(hex.slice(4, 6), 16) / 255;\n    const L = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);\n    if ((1.05 / (L + 0.05)) >= 4.5) return tokens.colors.accent.primary;\n    // Darken just enough: target L for ~4.7:1 contrast with white\n    const factor = 0.88;\n    const dr = Math.min(255, Math.round(r * 255 * factor));\n    const dg = Math.min(255, Math.round(g * 255 * factor));\n    const db = Math.min(255, Math.round(b * 255 * factor));\n    return `#${dr.toString(16).padStart(2, '0')}${dg.toString(16).padStart(2, '0')}${db.toString(16).padStart(2, '0')}`;\n  }, [tokens.colors.accent.primary]);\n\n  // WCAG AA safe accent for use as foreground text on dark backgrounds\n  const safeAccentFg = useMemo(() => safeAccentText(tokens.colors.accent.primary), [tokens.colors.accent.primary]);\n  \n  const sizeConfig = {\n    small: {\n      padding: `${tokens.spacing.xxs} ${tokens.spacing.smd}`,\n      fontSize: tokens.typography.fontSize.xs,\n      height: '24px',\n      gap: tokens.spacing.xs,\n      iconSize: 13,\n      borderRadius: tokens.borderRadius.sm,\n    },\n    medium: {\n      padding: `${tokens.spacing.xxs} ${tokens.spacing.md}`,\n      fontSize: tokens.typography.fontSize.sm,\n      height: '28px',\n      gap: tokens.spacing.xs,\n      iconSize: 15,\n      borderRadius: tokens.borderRadius.md,\n    },\n    large: {\n      padding: `${tokens.spacing.xs} ${tokens.spacing.lg}`,\n      fontSize: tokens.typography.fontSize.base,\n      height: '34px',\n      gap: tokens.spacing.sm,\n      iconSize: 17,\n      borderRadius: tokens.borderRadius.md,\n    },\n  };\n  \n  const config = sizeConfig[size];\n  \n  // Variant base styles (transparent theme: purple-hue transparent bg, smooth fade on hover)\n  const getVariantStyles = (): React.CSSProperties => {\n    const baseTransition = `${tokens.animation.normal}, opacity ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default}`;\n    \n    if (isTransparentTheme && transparentDefault && transparentHover) {\n      switch (variant) {\n        case 'primary':\n          return {\n            backgroundColor: isHovered && !isDisabled ? transparentHover : transparentDefault,\n            color: tokens.colors.text.primary,\n            border: `1px solid ${isHovered && !isDisabled ? 'rgba(139, 92, 246, 0.5)' : 'rgba(139, 92, 246, 0.25)'}`,\n            boxShadow: isHovered && !isDisabled ? '0 0 10px rgba(139, 92, 246, 0.15)' : 'none',\n            transition: baseTransition,\n            backdropFilter: 'blur(8px)',\n            WebkitBackdropFilter: 'blur(8px)',\n          };\n        case 'secondary':\n          return {\n            backgroundColor: isHovered && !isDisabled \n              ? `${tokens.colors.accent.primary}15` // Use accent color with opacity instead of transparentHover\n              : transparentDefault,\n            color: safeAccentFg,\n            border: `1px solid ${isHovered && !isDisabled ? `${tokens.colors.accent.primary}70` : `${tokens.colors.accent.primary}30`}`,\n            boxShadow: 'none',\n            transition: baseTransition,\n            backdropFilter: 'blur(8px)',\n            WebkitBackdropFilter: 'blur(8px)',\n          };\n        case 'borderless':\n          return {\n            backgroundColor: isHovered && !isDisabled ? transparentHover : transparentDefault,\n            color: safeAccentFg,\n            border: 'none',\n            boxShadow: 'none',\n            transition: baseTransition,\n            backdropFilter: 'blur(6px)',\n            WebkitBackdropFilter: 'blur(6px)',\n          };\n      }\n    }\n    \n    switch (variant) {\n      case 'primary':\n        return {\n          backgroundColor: isHovered && !isDisabled\n            ? tokens.colors.interactive.hover\n            : safeAccentBg,\n          color: '#ffffff',\n          border: 'none',\n          boxShadow: isHovered && !isDisabled\n            ? `0 2px 8px -2px ${tokens.colors.accent.primary}35`\n            : 'none',\n          transition: baseTransition,\n        };\n      \n      case 'secondary':\n        return {\n          backgroundColor: isHovered && !isDisabled\n            ? `${tokens.colors.accent.primary}12`\n            : 'transparent',\n          color: isHovered && !isDisabled ? safeAccentFg : safeAccentFg,\n          border: `${tokens.borders.width.medium} solid ${isHovered && !isDisabled ? tokens.colors.accent.primary : `${tokens.colors.accent.primary}80`}`,\n          boxShadow: 'none',\n          transition: baseTransition,\n        };\n      \n      case 'borderless':\n        return {\n          backgroundColor: isHovered && !isDisabled\n            ? `${tokens.colors.accent.primary}10`\n            : 'transparent',\n          color: safeAccentFg,\n          border: `${tokens.borders.width.medium} solid transparent`,\n          boxShadow: 'none',\n          transition: baseTransition,\n        };\n    }\n  };\n  \n  const focusStyles: React.CSSProperties = isFocused ? {\n    outline: 'none',\n    boxShadow: tokens.borders.focusRing.button,\n  } : {};\n\n  const activeStyles: React.CSSProperties = isActive && !isDisabled ? {\n    filter: 'brightness(0.85)',\n    transform: 'scale(0.98)',\n    boxShadow: 'none',\n  } : {};\n  \n  const baseStyle: React.CSSProperties = {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: config.gap,\n    padding: config.padding,\n    height: config.height,\n    fontSize: config.fontSize,\n    fontWeight: 400,\n    fontFamily: tokens.typography.fontFamily.primary,\n    letterSpacing: '0.02em',\n    borderRadius: config.borderRadius,\n    cursor: isDisabled ? 'not-allowed' : 'pointer',\n    opacity: isDisabled ? 0.5 : 1,\n    outline: 'none',\n    textDecoration: 'none',\n    whiteSpace: 'nowrap',\n    userSelect: 'none',\n    width: fullWidth ? '100%' : 'auto',\n    position: 'relative',\n    ...getVariantStyles(),\n    ...focusStyles,\n    ...activeStyles,\n    ...style,\n  };\n  \n  // Loading spinner with smooth animation\n  const spinner = (\n    <svg\n      width={config.iconSize}\n      height={config.iconSize}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      style={{\n        animation: 'zendir-spin 0.8s cubic-bezier(0.4, 0, 0.6, 1) infinite',\n      }}\n    >\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2.5\"\n        strokeLinecap=\"round\"\n        strokeDasharray=\"31.4 31.4\"\n        strokeDashoffset=\"10\"\n        opacity=\"0.9\"\n      />\n      <style>\n        {`@keyframes zendir-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`}\n      </style>\n    </svg>\n  );\n  \n  // Portal-based tooltip: position fixed relative to viewport, never clipped\n  const internalRef = useRef<HTMLButtonElement>(null);\n  const tooltipNodeRef = useRef<HTMLDivElement>(null);\n  const [tooltipPos, setTooltipPos] = useState<{ top: number; left: number } | null>(null);\n\n  const mergedRef = useCallback((node: HTMLButtonElement | null) => {\n    (internalRef as React.MutableRefObject<HTMLButtonElement | null>).current = node;\n    if (typeof ref === 'function') ref(node);\n    else if (ref) (ref as React.MutableRefObject<HTMLButtonElement | null>).current = node;\n  }, [ref]);\n\n  useLayoutEffect(() => {\n    if (!showTooltip || !tooltip || !internalRef.current) {\n      setTooltipPos(null);\n      return;\n    }\n    const btn = internalRef.current.getBoundingClientRect();\n    const gap = 8;\n    let top = btn.top - gap;\n    let left = btn.left + btn.width / 2;\n    // Adjust after tooltip renders so we can measure its width\n    if (tooltipNodeRef.current) {\n      const tt = tooltipNodeRef.current.getBoundingClientRect();\n      top = btn.top - tt.height - gap;\n      left = btn.left + (btn.width - tt.width) / 2;\n      if (left < 8) left = 8;\n      if (left + tt.width > window.innerWidth - 8) left = window.innerWidth - tt.width - 8;\n      if (top < 8) top = btn.bottom + gap; // flip below if no room above\n    }\n    setTooltipPos({ top, left });\n  }, [showTooltip, tooltip]);\n\n  const tooltipPortal = tooltip && showTooltip && ReactDOM.createPortal(\n    <div\n      ref={tooltipNodeRef}\n      role=\"tooltip\"\n      style={{\n        position: 'fixed',\n        top: tooltipPos ? tooltipPos.top : -9999,\n        left: tooltipPos ? tooltipPos.left : -9999,\n        padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,\n        fontSize: '0.75rem',\n        fontWeight: 500,\n        color: tokens.colors.text.primary,\n        backgroundColor: tokens.colors.background.elevated,\n        border: tokens.borders.divider,\n        borderRadius: tokens.borderRadius.md,\n        boxShadow: tokens.shadows.md,\n        whiteSpace: 'nowrap',\n        zIndex: 2147483100,\n        pointerEvents: 'none',\n        opacity: tooltipPos ? 1 : 0,\n        animation: tooltipPos ? `zendir-btn-tip ${tokens.animation.duration.fast}ms ${tokens.animation.easing.default} both` : 'none',\n      }}\n    >\n      {tooltip}\n      <style>\n        {`@keyframes zendir-btn-tip { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }`}\n      </style>\n    </div>,\n    document.body\n  );\n\n  return (\n    <>\n      <button\n        ref={mergedRef}\n        type=\"button\"\n        disabled={isDisabled}\n        className={classNames('zendir-button', `zendir-button--${variant}`, `zendir-button--${size}`, className)}\n        style={baseStyle}\n        title={tooltip && !showTooltip ? tooltip : undefined}\n        onMouseDown={() => setIsActive(true)}\n        onMouseUp={() => setIsActive(false)}\n        onMouseEnter={(e) => {\n          setIsHovered(true);\n          setShowTooltip(true);\n          onMouseEnter?.(e);\n        }}\n        onMouseLeave={(e) => {\n          setIsHovered(false);\n          setIsActive(false);\n          setShowTooltip(false);\n          onMouseLeave?.(e);\n        }}\n        onFocus={(e) => {\n          setIsFocused(true);\n          onFocus?.(e);\n        }}\n        onBlur={(e) => {\n          setIsFocused(false);\n          onBlur?.(e);\n        }}\n        {...rest}\n      >\n        {loading ? spinner : icon}\n        {children && <span>{children}</span>}\n        {iconEnd && !loading && iconEnd}\n      </button>\n      {tooltipPortal}\n    </>\n  );\n}));\n\nexport default Button;\n"],"names":["Button"],"mappings":"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"}

package/dist/react/core/CardHeader.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { AstroIconName } from './AstroIcon';
+import { StatusLevel } from '../utils';
+
+export interface CardHeaderProps {
+    /** Icon name (AstroIcon) */
+    icon: AstroIconName | string;
+    /** Main title text */
+    title: string;
+    /** Optional subtitle text */
+    subtitle?: string;
+    /** Status level - determines icon color and status indicator */
+    status?: StatusLevel;
+    /** Badge text (e.g., orbit type, category) */
+    badge?: string;
+    /** Badge background color */
+    badgeColor?: string;
+    /** Show pin indicator */
+    isPinned?: boolean;
+    /** Icon size override */
+    iconSize?: number;
+    /** Custom icon color (overrides status-based coloring) */
+    iconColor?: string;
+    /** Hide status indicator (show plain icon) */
+    hideStatusIndicator?: boolean;
+    /** Additional className */
+    className?: string;
+    /** Additional styles */
+    style?: React.CSSProperties;
+    /** Slot for additional content on the right side */
+    rightSlot?: React.ReactNode;
+}
+export declare const CardHeader: React.NamedExoticComponent<CardHeaderProps>;
+export default CardHeader;