jfs-components 0.0.85 → 0.0.95

package/lib/commonjs/components/Icon/Icon.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 resolveIconTokens(modes) {
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('icon/color', modes) || '#ad8444';
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('icon/size', modes) || 18;
+  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/left', modes) || 0;
+  const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/top', modes) || 0;
+  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/right', modes) || 0;
+  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/bottom', modes) || 0;
+  return {
+    containerStyle: {
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      paddingLeft,
+      paddingTop,
+      paddingRight,
+      paddingBottom
+    },
+    iconColor,
+    iconSize
+  };
+}
+
+/**
+ * Icon component — a design-token-driven wrapper around a single glyph.
+ *
+ * It mirrors the Figma "Icon" component: a padded, centered container whose
+ * color and size are resolved from the `icon/*` design tokens via `modes`.
+ * The glyph itself can be supplied three ways, in order of precedence:
+ *
+ *  1. `children` — a real slot for any node (custom SVG component, nested
+ *     `Icon`, etc.). `modes` cascade into the slot automatically.
+ *  2. `iconName` — a registry icon in the `ic_something` format.
+ *  3. `source` — a {@link UnifiedSource} fallback (remote URI, inline SVG XML,
+ *     `require()` asset, SVG component, or React element), tinted with the
+ *     mode-resolved icon color.
+ *
+ * `color` and `size` props let consumers override the token values per
+ * instance without touching `modes`.
+ *
+ * @example
+ * ```tsx
+ * // Built-in registry icon (default path).
+ * <Icon iconName="ic_card" modes={{ 'Color Mode': 'Light' }} />
+ *
+ * // Per-instance overrides.
+ * <Icon iconName="ic_ccv" color="#5c00b5" size={24} />
+ *
+ * // Fallback to an external source when the name isn't in the registry.
+ * <Icon source="https://cdn.example.com/glyph.svg" />
+ *
+ * // Slot: render any node as the icon.
+ * <Icon><BrandLogo /></Icon>
+ * ```
+ */
+function Icon({
+  iconName,
+  source,
+  children,
+  color,
+  size,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style: styleProp,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const tokens = (0, _react.useMemo)(() => resolveIconTokens(modes), [modes]);
+  const composedStyle = (0, _react.useMemo)(() => styleProp ? [tokens.containerStyle, styleProp] : tokens.containerStyle, [tokens.containerStyle, styleProp]);
+  const hasSlot = _react.default.Children.count(children) > 0;
+
+  // Only fall back to the default glyph when nothing at all is provided so an
+  // explicit `source` (without an `iconName`) isn't shadowed by `ic_card`.
+  const resolvedName = iconName ?? (source === undefined ? 'ic_card' : undefined);
+  const iconColor = color ?? tokens.iconColor;
+  const iconSize = size ?? tokens.iconSize;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: composedStyle,
+    ...rest,
+    children: hasSlot ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: resolvedName,
+      ...(source !== undefined ? {
+        source
+      } : {}),
+      size: iconSize,
+      color: iconColor,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    })
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(Icon);

package/lib/commonjs/components/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "ActionTile", {
     return _ActionTile.default;
   }
 });
+Object.defineProperty(exports, "AllocationComparisonChart", {
+  enumerable: true,
+  get: function () {
+    return _AllocationComparisonChart.default;
+  }
+});
 Object.defineProperty(exports, "AmountInput", {
   enumerable: true,
   get: function () {
@@ -357,6 +363,12 @@ Object.defineProperty(exports, "HoldingsCard", {
     return _HoldingsCard.default;
   }
 });
+Object.defineProperty(exports, "Icon", {
+  enumerable: true,
+  get: function () {
+    return _Icon.default;
+  }
+});
 Object.defineProperty(exports, "IconButton", {
   enumerable: true,
   get: function () {
@@ -881,10 +893,12 @@ var _CircularProgressBarDoted = _interopRequireDefault(require("./CircularProgre
 var _CircularRating = _interopRequireDefault(require("./CircularRating/CircularRating"));
 var _CoverageRing = _interopRequireDefault(require("./CoverageRing/CoverageRing"));
 var _CoverageBarComparison = _interopRequireDefault(require("./CoverageBarComparison/CoverageBarComparison"));
+var _AllocationComparisonChart = _interopRequireDefault(require("./AllocationComparisonChart/AllocationComparisonChart"));
 var _MonthlyStatusGrid = _interopRequireWildcard(require("./MonthlyStatusGrid/MonthlyStatusGrid"));
 var _Gauge = _interopRequireDefault(require("./Gauge/Gauge"));
 var _HoldingsCard = _interopRequireDefault(require("./HoldingsCard/HoldingsCard"));
 var _HStack = _interopRequireDefault(require("./HStack/HStack"));
+var _Icon = _interopRequireDefault(require("./Icon/Icon"));
 var _IconButton = _interopRequireDefault(require("./IconButton/IconButton"));
 var _IconCapsule = _interopRequireDefault(require("./IconCapsule/IconCapsule"));
 var _Image = _interopRequireDefault(require("./Image/Image"));