@macive/ui 0.0.14 → 0.0.15

package/dist/src/components/Icon/Icon.js

@@ -8,67 +8,85 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const css_1 = require("../../utilities/css");
 const Text_1 = require("../Text");
 const Icon_classnames_1 = __importDefault(require("./Icon.classnames"));
+const react_1 = require("react");
 const COLORS_WITH_BACKDROPS = ['base', 'critical', 'highlight', 'success', 'warning'];
 function Icon({ source, color, backdrop, accessibilityLabel, size = 20, theme }) {
+    var _a;
     let sourceType;
-    if (typeof source === 'function') {
-        sourceType = 'function';
-    }
-    else if (source === 'placeholder') {
+    // Detect source type
+    if (source === 'placeholder') {
         sourceType = 'placeholder';
     }
+    else if (typeof source === 'string') {
+        // Check if the string is a URL (absolute or relative) or an SVG data URI
+        if (source.startsWith('http://') ||
+            source.startsWith('https://') ||
+            source.startsWith('/') ||
+            source.startsWith('./') ||
+            source.startsWith('../')) {
+            sourceType = 'url';
+        }
+        else if (source.startsWith('data:image/svg+xml')) {
+            sourceType = 'external';
+        }
+        else {
+            // Treat other strings as external (fallback)
+            sourceType = 'external';
+        }
+    }
+    else if (typeof source === 'function') {
+        // Differentiate between plain functions and React components
+        if (((_a = source.prototype) === null || _a === void 0 ? void 0 : _a.isReactComponent) ||
+            source.name.includes('__') ||
+            source.$$typeof === Symbol.for('react.element')) {
+            sourceType = 'react-component';
+        }
+        else {
+            sourceType = 'function';
+        }
+    }
+    else if (typeof source === 'object' && source !== null) {
+        // Handle objects (e.g., raw SVG data or custom icon objects)
+        sourceType = 'object';
+    }
     else {
-        sourceType = 'external';
+        // Fallback to placeholder for unrecognized types
+        sourceType = 'placeholder';
     }
-    if (color && sourceType === 'external' && process.env.NODE_ENV === 'development') {
-        // eslint-disable-next-line no-console
-        console.warn('Recoloring external SVGs is not supported. Set the intended color on your SVG instead.');
+    // Warn for unsupported recoloring of external SVGs, URLs, or objects
+    if (color &&
+        (sourceType === 'external' || sourceType === 'url' || sourceType === 'object') &&
+        process.env.NODE_ENV === 'development') {
+        console.warn(`Recoloring ${sourceType} sources is not supported. Set the intended color on your icon source instead.`);
     }
+    // Warn for unsupported backdrop colors
     if (backdrop &&
         color &&
         !COLORS_WITH_BACKDROPS.includes(color) &&
         process.env.NODE_ENV === 'development') {
-        // eslint-disable-next-line no-console
         console.warn(`The ${color} variant does not have a supported backdrop color`);
     }
     const className = (0, css_1.classNames)(Icon_classnames_1.default.Icon, 
     //@ts-expect-error index
-    color && Icon_classnames_1.default[(0, css_1.variationName)('color', color)], 
-    // color && oldStyles[color ?? 'base'],
-    // color && styles.applyColor,
-    backdrop && Icon_classnames_1.default.hasBackdrop);
+    color && Icon_classnames_1.default[(0, css_1.variationName)('color', color)], backdrop && Icon_classnames_1.default.hasBackdrop);
     const SourceComponent = source;
     const contentMarkup = {
         function: ((0, jsx_runtime_1.jsx)(SourceComponent, { size: size, theme: theme, className: Icon_classnames_1.default.Svg, focusable: 'false', "aria-hidden": 'true' })),
+        'react-component': ((0, jsx_runtime_1.jsx)(SourceComponent, { size: size, className: Icon_classnames_1.default.Svg, focusable: 'false', "aria-hidden": 'true' })),
+        object: 
+        // Handle objects (assume they contain SVG markup or a renderable element)
+        (0, react_1.isValidElement)(source) ? (source) : ((0, jsx_runtime_1.jsx)("span", { className: Icon_classnames_1.default.Svg, dangerouslySetInnerHTML: {
+                __html: 
+                //@ts-expect-error index
+                typeof source.svg === 'string'
+                    ? //@ts-expect-error index
+                        source.svg
+                    : JSON.stringify(source).replace(/"/g, "'"),
+            }, "aria-hidden": 'true' })),
         placeholder: (0, jsx_runtime_1.jsx)("div", { className: Icon_classnames_1.default.Placeholder }),
         external: ((0, jsx_runtime_1.jsx)("img", { className: Icon_classnames_1.default.Img, src: `data:image/svg+xml;utf8,${source}`, alt: '', "aria-hidden": 'true' })),
+        url: ((0, jsx_runtime_1.jsx)("img", { className: Icon_classnames_1.default.Img, src: source, alt: '', style: { width: size, height: size }, "aria-hidden": 'true' })),
     };
     return ((0, jsx_runtime_1.jsxs)("span", { className: className, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'span', visuallyHidden: true, children: accessibilityLabel }), contentMarkup[sourceType]] }));
 }
 exports.Icon = Icon;
-const oldStyles = {
-    Icon: 'block h-[20px] w-[20px] max-h-full max-w-full m-auto',
-    applyColor: '',
-    hasBackdrop: 'relative flex bg-gray-100 items-center xp-4 before:absolute before:left-auto before:rounded-full before:right-auto',
-    colorBase: 'bg-red-500 text-red-red-500',
-    colorSubdued: 'bg-red-500 text-red-red-500',
-    colorCritical: 'bg-red-500 text-red-red-500',
-    colorInteractive: 'bg-red-500 text-red-red-500',
-    colorWarning: 'bg-red-500 text-red-red-500',
-    colorHighlight: 'bg-red-500 text-red-red-500',
-    colorSuccess: 'bg-red-500 text-red-red-500',
-    base: 'text-gray-600',
-    subdued: 'text-gray-400',
-    critical: 'text-danger',
-    interactive: 'text-teal-500',
-    warning: 'text-orange-500',
-    primary: 'text-gray-500',
-    highlight: 'text-yellow-500',
-    success: 'text-green-500',
-    magic: 'text-gray-500',
-    colorPrimary: 'fill',
-    colorMagic: 'fill',
-    Svg: 'relative block w-full max-w-full max-h-full',
-    Img: 'relative block w-full max-w-full max-h-full',
-    Placeholder: 'pb-[100%]',
-};