jfs-components 0.0.86 → 0.0.99

package/lib/module/components/Icon/Icon.js

@@ -0,0 +1,106 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import BaseIcon from '../../icons/Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+function resolveIconTokens(modes) {
+  const iconColor = getVariableByName('icon/color', modes) || '#ad8444';
+  const iconSize = getVariableByName('icon/size', modes) || 18;
+  const paddingLeft = getVariableByName('icon/padding/left', modes) || 0;
+  const paddingTop = getVariableByName('icon/padding/top', modes) || 0;
+  const paddingRight = getVariableByName('icon/padding/right', modes) || 0;
+  const paddingBottom = 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 = EMPTY_MODES,
+  style: styleProp,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const tokens = useMemo(() => resolveIconTokens(modes), [modes]);
+  const composedStyle = useMemo(() => styleProp ? [tokens.containerStyle, styleProp] : tokens.containerStyle, [tokens.containerStyle, styleProp]);
+  const hasSlot = React.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__*/_jsx(View, {
+    style: composedStyle,
+    ...rest,
+    children: hasSlot ? cloneChildrenWithModes(children, modes) : /*#__PURE__*/_jsx(BaseIcon, {
+      name: resolvedName,
+      ...(source !== undefined ? {
+        source
+      } : {}),
+      size: iconSize,
+      color: iconColor,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    })
+  });
+}
+export default /*#__PURE__*/React.memo(Icon);

package/lib/module/components/Spinner/Spinner.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { useEffect } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 import Animated, { Easing, cancelAnimation, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
 import Svg, { Path } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
@@ -115,7 +115,11 @@ const useSegmentRotation = (clock, index, gravity, spreadMinRad, spreadMaxRad, s
   };
 }, [gravity, index, spreadMinRad, spreadMaxRad, spreadOutFrac]);
 const fullSize = {
-  ...StyleSheet.absoluteFillObject
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0
 };
 function Spinner({
   size = DEFAULT_SIZE,

package/lib/module/components/index.js

@@ -44,6 +44,7 @@ export { default as MonthlyStatusGrid, CalendarGlyph } from './MonthlyStatusGrid
 export { default as Gauge } from './Gauge/Gauge';
 export { default as HoldingsCard } from './HoldingsCard/HoldingsCard';
 export { default as HStack } from './HStack/HStack';
+export { default as Icon } from './Icon/Icon';
 export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
 export { default as Image } from './Image/Image';