@psnext/design-system 2.3.0 → 2.4.0

package/dist/Icon.js

@@ -1,7 +1,7 @@
 import { t as cn } from "./cn.js";
+import { cva } from "class-variance-authority";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
 //#region src/primitives/Icon/icon-names.ts
 /** Runtime set of valid icon names (for validation / iteration). */
 const ICON_NAMES = new Set([
@@ -1811,7 +1811,7 @@ const BOX_PADDING = {
 /** Icon (stroke) color for the bare, un-boxed variant. */
 const iconColorVariants = cva("", {
 	variants: { color: {
-		default: "text-primary-txt",
+		default: "",
 		muted: "text-muted-txt",
 		primary: "text-primary-txt",
 		success: "text-success-txt",
@@ -1907,17 +1907,48 @@ const iconBoxVariants = cva("inline-flex items-center justify-center", {
 		fill: "subtle"
 	}
 });
-/** Lazily-loaded, code-split lucide icon with size/color tokens and an optional boxed (square/round) container. */
-function Icon({ icon, size = "md", color = "default", shape, fill = "subtle", strokeWidth, label, className, ...props }) {
-	const LazyIcon = getLazyIcon(icon);
+/**
+* Icon with size/color tokens and an optional boxed (square/round) container.
+* Pass `icon` (a lucide name, lazily code-split) or `as` (an icon component —
+* lucide or your own custom one — rendered synchronously).
+*/
+function Icon({ icon, as: AsIcon, size = "md", color = "default", shape, fill = "subtle", strokeWidth, label, className, ...props }) {
 	const sizeClass = ICON_SIZE[size];
+	const hasOwnA11y = "role" in props || "aria-label" in props || "aria-hidden" in props;
 	const a11y = label ? {
 		role: "img",
 		"aria-label": label
-	} : {
+	} : hasOwnA11y ? {} : {
 		"aria-hidden": true,
 		focusable: false
 	};
+	if (AsIcon) {
+		if (shape) return /* @__PURE__ */ jsx("span", {
+			"data-slot": "icon",
+			"data-shape": shape,
+			className: cn(iconBoxVariants({
+				shape,
+				color,
+				fill
+			}), BOX_PADDING[size], className),
+			...a11y,
+			...props,
+			children: /* @__PURE__ */ jsx(AsIcon, {
+				className: sizeClass,
+				strokeWidth,
+				"aria-hidden": true,
+				focusable: false
+			})
+		});
+		return /* @__PURE__ */ jsx(AsIcon, {
+			"data-slot": "icon",
+			className: cn(sizeClass, iconColorVariants({ color }), className),
+			strokeWidth,
+			...a11y,
+			...props
+		});
+	}
+	const LazyIcon = getLazyIcon(icon);
 	const glyph = /* @__PURE__ */ jsx(React.Suspense, {
 		fallback: /* @__PURE__ */ jsx("span", {
 			className: cn("inline-block", sizeClass),
@@ -1930,6 +1961,7 @@ function Icon({ icon, size = "md", color = "default", shape, fill = "subtle", st
 			focusable: false
 		})
 	});
+	const spanProps = props;
 	if (shape) return /* @__PURE__ */ jsx("span", {
 		"data-slot": "icon",
 		"data-shape": shape,
@@ -1939,14 +1971,14 @@ function Icon({ icon, size = "md", color = "default", shape, fill = "subtle", st
 			fill
 		}), BOX_PADDING[size], className),
 		...a11y,
-		...props,
+		...spanProps,
 		children: glyph
 	});
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "icon",
 		className: cn("inline-flex", iconColorVariants({ color }), className),
 		...a11y,
-		...props,
+		...spanProps,
 		children: glyph
 	});
 }