jfs-components 0.0.63 → 0.0.65

package/lib/commonjs/icons/Icon.js

@@ -8,99 +8,96 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _registry = require("./registry");
+var _MediaSource = _interopRequireDefault(require("../utils/MediaSource"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
- * Generic Icon Component
- * 
- * Renders an icon from the registry by name with customizable size and color.
- * 
- * @component
- * @param {Object} props - Component props
- * @param {string} props.name - Icon name from the registry (e.g., 'ic_ccv', 'ic_card')
- * @param {number} [props.size=24] - Icon size in pixels (width and height)
- * @param {string} [props.color='#141414'] - Icon color (hex, rgb, or named color)
- * @param {Object} [props.style] - Additional styles for the container View
- * 
+ * Generic Icon component.
+ *
+ * Renders an icon from the registry by `name`, or falls back to a
+ * smart-detected `source` (SVG / PNG / JPG / require / SVG component /
+ * remote URI). External sources are tinted with `color` so they participate
+ * in the design-token modes just like built-in icons.
+ *
  * @example
- * ```jsx
+ * ```tsx
+ * // Built-in icon from the registry.
  * <Icon name="ic_ccv" size={24} color="#141414" />
- * <Icon name="ic_card" size={32} color="#5c00b5" />
- * <Icon name="ic_cart" size={20} color="red" />
+ *
+ * // Fallback to a remote SVG (auto-detected by the .svg extension).
+ * <Icon source="https://cdn.example.com/avatar.svg" size={24} color="#5c00b5" />
+ *
+ * // Fallback to a local raster asset.
+ * <Icon source={require('./brand.png')} size={32} />
+ *
+ * // Fallback to an SVG React component (e.g. via react-native-svg-transformer).
+ * import BrandLogo from './brand.svg';
+ * <Icon source={BrandLogo} size={24} color="red" />
  * ```
  */
 function Icon({
   name,
+  source,
   size = 24,
   color = '#141414',
   style,
   ...rest
 }) {
-  // Validate icon name
-  if (!name) {
-    console.warn('Icon: name prop is required');
-    return null;
-  }
-  if (!(0, _registry.hasIcon)(name)) {
-    const {
-      getIconNames
-    } = require('./registry');
-    console.warn(`Icon: "${name}" not found in registry. Available icons: ${getIconNames().join(', ')}`);
-    return null;
-  }
-
-  // Get icon data from registry
-  const iconData = (0, _registry.getIcon)(name);
-  if (!iconData) {
-    return null;
-  }
-
-  // Parse viewBox to get width and height for aspect ratio
-  const viewBoxParts = iconData.viewBox.split(' ');
-  // @ts-ignore
-  const viewBoxWidth = parseFloat(viewBoxParts[2]) || size;
-  // @ts-ignore
-  const viewBoxHeight = parseFloat(viewBoxParts[3]) || size;
-
-  // Calculate aspect ratio to maintain proper scaling
-  const aspectRatio = viewBoxWidth / viewBoxHeight;
-
-  // Determine actual width and height based on size and aspect ratio
-  let width = size;
-  let height = size;
-
-  // If viewBox is not square, adjust dimensions to maintain aspect ratio
-  if (Math.abs(aspectRatio - 1) > 0.01) {
-    if (aspectRatio > 1) {
-      // Wider than tall
-      height = size / aspectRatio;
-    } else {
-      // Taller than wide
-      width = size * aspectRatio;
-    }
-  }
-  const containerStyle = {
+  const containerStyle = [{
     width: size,
     height: size,
     alignItems: 'center',
-    justifyContent: 'center',
-    ...style
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: containerStyle,
-    ...rest,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
-      width: width,
-      height: height,
-      viewBox: iconData.viewBox,
-      preserveAspectRatio: "xMidYMid meet",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
-        d: iconData.path,
-        fill: color,
-        fillRule: iconData.fillRule || 'nonzero'
+    justifyContent: 'center'
+  }, style];
+  const iconData = name && (0, _registry.hasIcon)(name) ? (0, _registry.getIcon)(name) : null;
+  if (iconData) {
+    const viewBoxParts = iconData.viewBox.split(' ');
+    const viewBoxWidth = parseFloat(viewBoxParts[2] ?? `${size}`) || size;
+    const viewBoxHeight = parseFloat(viewBoxParts[3] ?? `${size}`) || size;
+    const aspectRatio = viewBoxWidth / viewBoxHeight;
+    let width = size;
+    let height = size;
+    if (Math.abs(aspectRatio - 1) > 0.01) {
+      if (aspectRatio > 1) {
+        height = size / aspectRatio;
+      } else {
+        width = size * aspectRatio;
+      }
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: containerStyle,
+      ...rest,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
+        width: width,
+        height: height,
+        viewBox: iconData.viewBox,
+        preserveAspectRatio: "xMidYMid meet",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+          d: iconData.path,
+          fill: color,
+          fillRule: iconData.fillRule || 'nonzero'
+        })
+      })
+    });
+  }
+  if (source !== undefined) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: containerStyle,
+      ...rest,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaSource.default, {
+        source: source,
+        size: size,
+        tintColor: color,
+        resizeMode: "contain"
       })
-    })
-  });
+    });
+  }
+  if (!name) {
+    console.warn('Icon: either `name` or `source` is required');
+    return null;
+  }
+  console.warn(`Icon: "${name}" not found in registry and no \`source\` fallback was provided.`);
+  return null;
 }
 var _default = exports.default = Icon;