@zendir/ui 0.5.0 → 0.6.0

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

@@ -1,134 +1,134 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { classNames } from "../../utils/index.js";
-const Badge = memo(function Badge2({
-  variant = "filled",
-  size = "small",
-  status,
-  color,
-  icon,
-  onRemove,
-  children,
-  className = "",
-  onClick
-}) {
-  const { tokens } = useTheme();
-  const baseColor = color ?? (status ? tokens.colors.status[status] : tokens.colors.accent.primary);
-  const getContrastText = (bg) => {
-    const hex = bg.replace("#", "");
-    if (hex.length < 6) return "#ffffff";
-    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 toLinear = (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-    const L = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
-    return L > 0.179 ? "#000000" : "#ffffff";
-  };
-  const sizeConfig = {
-    small: {
-      padding: `2px ${tokens.spacing.xs}`,
-      fontSize: tokens.typography.fontSize.xs,
-      height: "20px"
-    },
-    medium: {
-      padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
-      fontSize: tokens.typography.fontSize.sm,
-      height: "26px"
-    }
-  };
-  const config = sizeConfig[size];
-  const variantStyles = {
-    filled: {
-      backgroundColor: baseColor,
-      color: getContrastText(baseColor),
-      // WCAG AA: auto dark/light text based on bg luminance
-      border: "none"
-    },
-    outline: {
-      backgroundColor: "transparent",
-      color: baseColor,
-      border: `1px solid ${baseColor}`
-    },
-    subtle: {
-      backgroundColor: `${baseColor}20`,
-      color: baseColor,
-      border: "none"
-    }
-  };
-  const isInteractive = !!onClick;
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      className: classNames("zendir-badge", `zendir-badge--${variant}`, className),
-      onClick,
-      role: isInteractive ? "button" : void 0,
-      tabIndex: isInteractive ? 0 : void 0,
-      onKeyDown: onClick ? (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onClick();
-        }
-      } : void 0,
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        gap: tokens.spacing.xs,
-        padding: config.padding,
-        height: config.height,
-        fontSize: config.fontSize,
-        fontWeight: tokens.typography.fontWeight.medium,
-        fontFamily: tokens.typography.fontFamily.primary,
-        borderRadius: tokens.borderRadius.full,
-        cursor: isInteractive ? "pointer" : "default",
-        transition: `all ${tokens.animation.fast}`,
-        whiteSpace: "nowrap",
-        ...variantStyles[variant]
-      },
-      children: [
-        icon,
-        children,
-        onRemove && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: (e) => {
-              e.stopPropagation();
-              onRemove();
-            },
-            "aria-label": "Remove",
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              /* Visual size stays 14px; touch target expanded to 24px via padding (WCAG 2.5.8) */
-              padding: "5px",
-              marginLeft: tokens.spacing.xxs,
-              width: "24px",
-              height: "24px",
-              backgroundColor: "transparent",
-              border: "none",
-              borderRadius: "50%",
-              cursor: "pointer",
-              color: "inherit",
-              opacity: 0.7,
-              transition: `opacity ${tokens.animation.fast}`,
-              boxSizing: "border-box"
-            },
-            onMouseEnter: (e) => {
-              e.currentTarget.style.opacity = "1";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.opacity = "0.7";
-            },
-            children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) })
-          }
-        )
-      ]
-    }
-  );
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/display/Badge.tsx
+/**
+* @zendir/ui - Badge/Tag Component
+*
+* Badge and tag following Astro UX Design System.
+*
+* @example
+* ```tsx
+* <Badge>Default</Badge>
+* <Badge status="normal">Active</Badge>
+* <Badge variant="outline" status="caution">Warning</Badge>
+* <Badge icon={<Icon name="satellite" size={12} />}>Satellite</Badge>
+* ```
+*/
+var Badge = memo(function Badge({ variant = "filled", size = "small", status, color, icon, onRemove, children, className = "", onClick }) {
+	const { tokens } = useTheme();
+	const baseColor = color ?? (status ? tokens.colors.status[status] : tokens.colors.accent.primary);
+	const getContrastText = (bg) => {
+		const hex = bg.replace("#", "");
+		if (hex.length < 6) return "#ffffff";
+		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 toLinear = (c) => c <= .03928 ? c / 12.92 : Math.pow((c + .055) / 1.055, 2.4);
+		return .2126 * toLinear(r) + .7152 * toLinear(g) + .0722 * toLinear(b) > .179 ? "#000000" : "#ffffff";
+	};
+	const config = {
+		small: {
+			padding: `2px ${tokens.spacing.xs}`,
+			fontSize: tokens.typography.fontSize.xs,
+			height: "20px"
+		},
+		medium: {
+			padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+			fontSize: tokens.typography.fontSize.sm,
+			height: "26px"
+		}
+	}[size];
+	const variantStyles = {
+		filled: {
+			backgroundColor: baseColor,
+			color: getContrastText(baseColor),
+			border: "none"
+		},
+		outline: {
+			backgroundColor: "transparent",
+			color: baseColor,
+			border: `1px solid ${baseColor}`
+		},
+		subtle: {
+			backgroundColor: `${baseColor}20`,
+			color: baseColor,
+			border: "none"
+		}
+	};
+	const isInteractive = !!onClick;
+	return /* @__PURE__ */ jsxs("span", {
+		className: classNames("zendir-badge", `zendir-badge--${variant}`, className),
+		onClick,
+		role: isInteractive ? "button" : void 0,
+		tabIndex: isInteractive ? 0 : void 0,
+		onKeyDown: onClick ? (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				onClick();
+			}
+		} : void 0,
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: tokens.spacing.xs,
+			padding: config.padding,
+			height: config.height,
+			fontSize: config.fontSize,
+			fontWeight: tokens.typography.fontWeight.medium,
+			fontFamily: tokens.typography.fontFamily.primary,
+			borderRadius: tokens.borderRadius.full,
+			cursor: isInteractive ? "pointer" : "default",
+			transition: `all ${tokens.animation.fast}`,
+			whiteSpace: "nowrap",
+			...variantStyles[variant]
+		},
+		children: [
+			icon,
+			children,
+			onRemove && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: (e) => {
+					e.stopPropagation();
+					onRemove();
+				},
+				"aria-label": "Remove",
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					padding: "5px",
+					marginLeft: tokens.spacing.xxs,
+					width: "24px",
+					height: "24px",
+					backgroundColor: "transparent",
+					border: "none",
+					borderRadius: "50%",
+					cursor: "pointer",
+					color: "inherit",
+					opacity: .7,
+					transition: `opacity ${tokens.animation.fast}`,
+					boxSizing: "border-box"
+				},
+				onMouseEnter: (e) => {
+					e.currentTarget.style.opacity = "1";
+				},
+				onMouseLeave: (e) => {
+					e.currentTarget.style.opacity = "0.7";
+				},
+				children: /* @__PURE__ */ jsx("svg", {
+					width: "10",
+					height: "10",
+					viewBox: "0 0 24 24",
+					fill: "currentColor",
+					children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+				})
+			})
+		]
+	});
 });
-export {
-  Badge
-};
-//# sourceMappingURL=Badge.js.map
+//#endregion
+export { Badge, Badge as default };
+
+//# sourceMappingURL=Badge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../../src/react/core/display/Badge.tsx"],"sourcesContent":["/**\n * @zendir/ui - Badge/Tag Component\n * \n * Badge and tag following Astro UX Design System.\n * \n * @example\n * ```tsx\n * <Badge>Default</Badge>\n * <Badge status=\"normal\">Active</Badge>\n * <Badge variant=\"outline\" status=\"caution\">Warning</Badge>\n * <Badge icon={<Icon name=\"satellite\" size={12} />}>Satellite</Badge>\n * ```\n */\n\nimport React, { memo } from 'react';\nimport { useTheme } from '../../theme';\nimport { classNames, type StatusLevel } from '../../utils';\n\nexport type BadgeVariant = 'filled' | 'outline' | 'subtle';\nexport type BadgeSize = 'small' | 'medium';\n\nexport interface BadgeProps {\n  /** Visual variant */\n  variant?: BadgeVariant;\n  /** Size */\n  size?: BadgeSize;\n  /** Status-based coloring */\n  status?: StatusLevel;\n  /** Custom color */\n  color?: string;\n  /** Icon before text */\n  icon?: React.ReactNode;\n  /** Removable (shows X button) */\n  onRemove?: () => void;\n  /** Children */\n  children: React.ReactNode;\n  /** Custom className */\n  className?: string;\n  /** Click handler */\n  onClick?: () => void;\n}\n\nexport const Badge = memo(function Badge({\n  variant = 'filled',\n  size = 'small',\n  status,\n  color,\n  icon,\n  onRemove,\n  children,\n  className = '',\n  onClick,\n}: BadgeProps): React.ReactElement {\n  const { tokens } = useTheme();\n  \n  // Determine base color\n  const baseColor = color ?? (status ? tokens.colors.status[status] : tokens.colors.accent.primary);\n\n  // WCAG AA: choose black or white text based on background luminance\n  // Uses relative luminance formula (WCAG 2.1 SC 1.4.3)\n  const getContrastText = (bg: string): string => {\n    const hex = bg.replace('#', '');\n    if (hex.length < 6) return '#ffffff';\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 toLinear = (c: number) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\n    const L = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);\n    // If luminance > 0.179, background is bright → use dark text\n    return L > 0.179 ? '#000000' : '#ffffff';\n  };\n  \n  const sizeConfig = {\n    small: {\n      padding: `2px ${tokens.spacing.xs}`,\n      fontSize: tokens.typography.fontSize.xs,\n      height: '20px',\n    },\n    medium: {\n      padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n      fontSize: tokens.typography.fontSize.sm,\n      height: '26px',\n    },\n  };\n  const config = sizeConfig[size];\n  \n  const variantStyles: Record<BadgeVariant, React.CSSProperties> = {\n    filled: {\n      backgroundColor: baseColor,\n      color: getContrastText(baseColor),  // WCAG AA: auto dark/light text based on bg luminance\n      border: 'none',\n    },\n    outline: {\n      backgroundColor: 'transparent',\n      color: baseColor,\n      border: `1px solid ${baseColor}`,\n    },\n    subtle: {\n      backgroundColor: `${baseColor}20`,\n      color: baseColor,\n      border: 'none',\n    },\n  };\n  \n  const isInteractive = !!onClick;\n  \n  return (\n    <span\n      className={classNames('zendir-badge', `zendir-badge--${variant}`, className)}\n      onClick={onClick}\n      role={isInteractive ? 'button' : undefined}\n      tabIndex={isInteractive ? 0 : undefined}\n      onKeyDown={onClick ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(); } } : undefined}\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: tokens.spacing.xs,\n        padding: config.padding,\n        height: config.height,\n        fontSize: config.fontSize,\n        fontWeight: tokens.typography.fontWeight.medium,\n        fontFamily: tokens.typography.fontFamily.primary,\n        borderRadius: tokens.borderRadius.full,\n        cursor: isInteractive ? 'pointer' : 'default',\n        transition: `all ${tokens.animation.fast}`,\n        whiteSpace: 'nowrap',\n        ...variantStyles[variant],\n      }}\n    >\n      {icon}\n      {children}\n      {onRemove && (\n        <button\n          type=\"button\"\n          onClick={(e) => {\n            e.stopPropagation();\n            onRemove();\n          }}\n          aria-label=\"Remove\"\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            /* Visual size stays 14px; touch target expanded to 24px via padding (WCAG 2.5.8) */\n            padding: '5px',\n            marginLeft: tokens.spacing.xxs,\n            width: '24px',\n            height: '24px',\n            backgroundColor: 'transparent',\n            border: 'none',\n            borderRadius: '50%',\n            cursor: 'pointer',\n            color: 'inherit',\n            opacity: 0.7,\n            transition: `opacity ${tokens.animation.fast}`,\n            boxSizing: 'border-box',\n          }}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.opacity = '1';\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.opacity = '0.7';\n          }}\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n          </svg>\n        </button>\n      )}\n    </span>\n  );\n});\n\nexport default Badge;\n"],"names":["Badge"],"mappings":";;;;AA0CO,MAAM,QAAQ,KAAK,SAASA,OAAM;AAAA,EACvC,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,GAAmC;AACjC,QAAM,EAAE,OAAA,IAAW,SAAA;AAGnB,QAAM,YAAY,UAAU,SAAS,OAAO,OAAO,OAAO,MAAM,IAAI,OAAO,OAAO,OAAO;AAIzF,QAAM,kBAAkB,CAAC,OAAuB;AAC9C,UAAM,MAAM,GAAG,QAAQ,KAAK,EAAE;AAC9B,QAAI,IAAI,SAAS,EAAG,QAAO;AAC3B,UAAM,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE,IAAI;AAC1C,UAAM,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE,IAAI;AAC1C,UAAM,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE,IAAI;AAC1C,UAAM,WAAW,CAAC,MAAc,KAAK,UAAU,IAAI,QAAQ,KAAK,KAAK,IAAI,SAAS,OAAO,GAAG;AAC5F,UAAM,IAAI,SAAS,SAAS,CAAC,IAAI,SAAS,SAAS,CAAC,IAAI,SAAS,SAAS,CAAC;AAE3E,WAAO,IAAI,QAAQ,YAAY;AAAA,EACjC;AAEA,QAAM,aAAa;AAAA,IACjB,OAAO;AAAA,MACL,SAAS,OAAO,OAAO,QAAQ,EAAE;AAAA,MACjC,UAAU,OAAO,WAAW,SAAS;AAAA,MACrC,QAAQ;AAAA,IAAA;AAAA,IAEV,QAAQ;AAAA,MACN,SAAS,GAAG,OAAO,QAAQ,EAAE,IAAI,OAAO,QAAQ,EAAE;AAAA,MAClD,UAAU,OAAO,WAAW,SAAS;AAAA,MACrC,QAAQ;AAAA,IAAA;AAAA,EACV;AAEF,QAAM,SAAS,WAAW,IAAI;AAE9B,QAAM,gBAA2D;AAAA,IAC/D,QAAQ;AAAA,MACN,iBAAiB;AAAA,MACjB,OAAO,gBAAgB,SAAS;AAAA;AAAA,MAChC,QAAQ;AAAA,IAAA;AAAA,IAEV,SAAS;AAAA,MACP,iBAAiB;AAAA,MACjB,OAAO;AAAA,MACP,QAAQ,aAAa,SAAS;AAAA,IAAA;AAAA,IAEhC,QAAQ;AAAA,MACN,iBAAiB,GAAG,SAAS;AAAA,MAC7B,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAGF,QAAM,gBAAgB,CAAC,CAAC;AAExB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,gBAAgB,iBAAiB,OAAO,IAAI,SAAS;AAAA,MAC3E;AAAA,MACA,MAAM,gBAAgB,WAAW;AAAA,MACjC,UAAU,gBAAgB,IAAI;AAAA,MAC9B,WAAW,UAAU,CAAC,MAAM;AAAE,YAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AAAE,YAAE,eAAA;AAAkB,kBAAA;AAAA,QAAW;AAAA,MAAE,IAAI;AAAA,MAC7G,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,KAAK,OAAO,QAAQ;AAAA,QACpB,SAAS,OAAO;AAAA,QAChB,QAAQ,OAAO;AAAA,QACf,UAAU,OAAO;AAAA,QACjB,YAAY,OAAO,WAAW,WAAW;AAAA,QACzC,YAAY,OAAO,WAAW,WAAW;AAAA,QACzC,cAAc,OAAO,aAAa;AAAA,QAClC,QAAQ,gBAAgB,YAAY;AAAA,QACpC,YAAY,OAAO,OAAO,UAAU,IAAI;AAAA,QACxC,YAAY;AAAA,QACZ,GAAG,cAAc,OAAO;AAAA,MAAA;AAAA,MAGzB,UAAA;AAAA,QAAA;AAAA,QACA;AAAA,QACA,YACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,CAAC,MAAM;AACd,gBAAE,gBAAA;AACF,uBAAA;AAAA,YACF;AAAA,YACA,cAAW;AAAA,YACX,OAAO;AAAA,cACL,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB;AAAA;AAAA,cAEhB,SAAS;AAAA,cACT,YAAY,OAAO,QAAQ;AAAA,cAC3B,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,QAAQ;AAAA,cACR,cAAc;AAAA,cACd,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,SAAS;AAAA,cACT,YAAY,WAAW,OAAO,UAAU,IAAI;AAAA,cAC5C,WAAW;AAAA,YAAA;AAAA,YAEb,cAAc,CAAC,MAAM;AACnB,gBAAE,cAAc,MAAM,UAAU;AAAA,YAClC;AAAA,YACA,cAAc,CAAC,MAAM;AACnB,gBAAE,cAAc,MAAM,UAAU;AAAA,YAClC;AAAA,YAEA,UAAA,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA,oBAAC,QAAA,EAAK,GAAE,yGAAwG,EAAA,CAClH;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
+{"version":3,"file":"Badge.js","names":[],"sources":["../../../../src/react/core/display/Badge.tsx"],"sourcesContent":["/**\n * @zendir/ui - Badge/Tag Component\n *\n * Badge and tag following Astro UX Design System.\n *\n * @example\n * ```tsx\n * <Badge>Default</Badge>\n * <Badge status=\"normal\">Active</Badge>\n * <Badge variant=\"outline\" status=\"caution\">Warning</Badge>\n * <Badge icon={<Icon name=\"satellite\" size={12} />}>Satellite</Badge>\n * ```\n */\n\nimport React, { memo } from \"react\";\nimport { useTheme } from \"../../theme\";\nimport { classNames, type StatusLevel } from \"../../utils\";\n\nexport type BadgeVariant = \"filled\" | \"outline\" | \"subtle\";\nexport type BadgeSize = \"small\" | \"medium\";\n\nexport interface BadgeProps {\n  /** Visual variant */\n  variant?: BadgeVariant;\n  /** Size */\n  size?: BadgeSize;\n  /** Status-based coloring */\n  status?: StatusLevel;\n  /** Custom color */\n  color?: string;\n  /** Icon before text */\n  icon?: React.ReactNode;\n  /** Removable (shows X button) */\n  onRemove?: () => void;\n  /** Children */\n  children: React.ReactNode;\n  /** Custom className */\n  className?: string;\n  /** Click handler */\n  onClick?: () => void;\n}\n\nexport const Badge = memo(function Badge({\n  variant = \"filled\",\n  size = \"small\",\n  status,\n  color,\n  icon,\n  onRemove,\n  children,\n  className = \"\",\n  onClick,\n}: BadgeProps): React.ReactElement {\n  const { tokens } = useTheme();\n\n  // Determine base color\n  const baseColor =\n    color ??\n    (status ? tokens.colors.status[status] : tokens.colors.accent.primary);\n\n  // WCAG AA: choose black or white text based on background luminance\n  // Uses relative luminance formula (WCAG 2.1 SC 1.4.3)\n  const getContrastText = (bg: string): string => {\n    const hex = bg.replace(\"#\", \"\");\n    if (hex.length < 6) return \"#ffffff\";\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 toLinear = (c: number) =>\n      c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\n    const L =\n      0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);\n    // If luminance > 0.179, background is bright → use dark text\n    return L > 0.179 ? \"#000000\" : \"#ffffff\";\n  };\n\n  const sizeConfig = {\n    small: {\n      padding: `2px ${tokens.spacing.xs}`,\n      fontSize: tokens.typography.fontSize.xs,\n      height: \"20px\",\n    },\n    medium: {\n      padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n      fontSize: tokens.typography.fontSize.sm,\n      height: \"26px\",\n    },\n  };\n  const config = sizeConfig[size];\n\n  const variantStyles: Record<BadgeVariant, React.CSSProperties> = {\n    filled: {\n      backgroundColor: baseColor,\n      color: getContrastText(baseColor), // WCAG AA: auto dark/light text based on bg luminance\n      border: \"none\",\n    },\n    outline: {\n      backgroundColor: \"transparent\",\n      color: baseColor,\n      border: `1px solid ${baseColor}`,\n    },\n    subtle: {\n      backgroundColor: `${baseColor}20`,\n      color: baseColor,\n      border: \"none\",\n    },\n  };\n\n  const isInteractive = !!onClick;\n\n  return (\n    <span\n      className={classNames(\n        \"zendir-badge\",\n        `zendir-badge--${variant}`,\n        className,\n      )}\n      onClick={onClick}\n      role={isInteractive ? \"button\" : undefined}\n      tabIndex={isInteractive ? 0 : undefined}\n      onKeyDown={\n        onClick\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                onClick();\n              }\n            }\n          : undefined\n      }\n      style={{\n        display: \"inline-flex\",\n        alignItems: \"center\",\n        gap: tokens.spacing.xs,\n        padding: config.padding,\n        height: config.height,\n        fontSize: config.fontSize,\n        fontWeight: tokens.typography.fontWeight.medium,\n        fontFamily: tokens.typography.fontFamily.primary,\n        borderRadius: tokens.borderRadius.full,\n        cursor: isInteractive ? \"pointer\" : \"default\",\n        transition: `all ${tokens.animation.fast}`,\n        whiteSpace: \"nowrap\",\n        ...variantStyles[variant],\n      }}\n    >\n      {icon}\n      {children}\n      {onRemove && (\n        <button\n          type=\"button\"\n          onClick={(e) => {\n            e.stopPropagation();\n            onRemove();\n          }}\n          aria-label=\"Remove\"\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            /* Visual size stays 14px; touch target expanded to 24px via padding (WCAG 2.5.8) */\n            padding: \"5px\",\n            marginLeft: tokens.spacing.xxs,\n            width: \"24px\",\n            height: \"24px\",\n            backgroundColor: \"transparent\",\n            border: \"none\",\n            borderRadius: \"50%\",\n            cursor: \"pointer\",\n            color: \"inherit\",\n            opacity: 0.7,\n            transition: `opacity ${tokens.animation.fast}`,\n            boxSizing: \"border-box\",\n          }}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.opacity = \"1\";\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.opacity = \"0.7\";\n          }}\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n          </svg>\n        </button>\n      )}\n    </span>\n  );\n});\n\nexport default Badge;\n"],"mappings":"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"}

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

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
 import { AstroIconName } from './AstroIcon';
 import { StatusLevel } from '../../utils';
-
 export interface CardHeaderProps {
     /** Icon name (AstroIcon) */
     icon: AstroIconName | string;