jfs-components 0.0.64 → 0.0.65

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.0.65] - 2026-04-21
+
+### Added
+
+- **`Drawer` state callback:** Optional `onStateChange?: (state: 'collapsed' | 'expanded') => void` runs when the drawer settles into a new snap state (after gestures), so parents can react programmatically.
+
+---
+
 ## [0.0.64] - 2026-04-20
 
 ### Added

package/lib/commonjs/components/Carousel/Carousel.js

@@ -51,7 +51,8 @@ function Carousel({
   const gap = gapProp ?? tokenGap;
   const containerPaddingH = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/padding/horizontal', modes) || '0');
   const containerPaddingV = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/padding/vertical', modes) || '0');
-  const paginationGap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/gap', modes) || '12');
+  // Spacing between the cards row and the pagination dots uses `carousel/gap`.
+  const paginationOffset = gap;
 
   // ---- Refs & state ----
   const scrollRef = (0, _react.useRef)(null);
@@ -208,7 +209,7 @@ function Carousel({
       }), showPagination && totalItems > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Pagination, {
         modes: modes,
         style: {
-          marginTop: paginationGap
+          marginTop: paginationOffset
         }
       })]
     })
@@ -250,13 +251,15 @@ function Pagination({
   } = (0, _react.useContext)(CarouselContext);
   const modes = propModes || ctxModes || {};
 
-  // Token resolution for dots
-  const dotSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/dotSize', modes) || '8');
-  const dotActiveWidth = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/dotActiveWidth', modes) || '24');
-  const dotGap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/dotGap', modes) || '8');
-  const dotColor = (0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/dotColor', modes) || 'rgba(255,255,255,0.35)';
-  const dotActiveColor = (0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/dotActiveColor', modes) || '#ffffff';
-  const dotRadius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/dotRadius', modes) || '4');
+  // Token resolution for dots — matches Figma tokens
+  // (carousel/pagination/gap, carousel/pagination/indicator/{activecolor,inactivecolor,radius}).
+  // Dot dimensions are fixed per Figma spec: inactive 6x6, active 16x6.
+  const dotSize = 6;
+  const dotActiveWidth = 16;
+  const dotGap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/gap', modes) || '4');
+  const dotColor = (0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/inactivecolor', modes) || 'rgba(0,0,0,0.3)';
+  const dotActiveColor = (0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/activecolor', modes) || '#170d0a';
+  const dotRadius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/radius', modes) || '9999');
   const containerStyle = {
     flexDirection: 'row',
     justifyContent: 'center',

package/lib/commonjs/components/Drawer/Drawer.js

@@ -64,7 +64,8 @@ function Drawer({
   accessibilityHint,
   contentContainerStyle,
   showsVerticalScrollIndicator = false,
-  bottomInset = 80
+  bottomInset = 80,
+  onStateChange
 }) {
   const {
     height: screenHeight
@@ -129,8 +130,13 @@ function Drawer({
 
   // Update JS state for accessibility/logic if needed
   const updateMode = (0, _react.useCallback)(newMode => {
-    setMode(newMode);
-  }, []);
+    setMode(prev => {
+      if (prev !== newMode) {
+        onStateChange?.(newMode);
+      }
+      return newMode;
+    });
+  }, [onStateChange]);
 
   // Gesture policy:
   //  • activeOffsetY: require a clear *vertical* drag (10px) before this

package/lib/commonjs/components/IconButton/IconButton.js

@@ -78,8 +78,13 @@ function resolveIconButtonTokens(modes, disabled) {
  *    pressed transform mirrored via React state) — removed.
  *  - Wrapped in `React.memo`.
  */
+// Legacy default icon used when neither a `name` nor a `source` is supplied
+// for the resolved slot. Kept as a constant rather than a destructuring
+// default so source-only call sites don't accidentally render `'ic_card'`.
+const LEGACY_DEFAULT_ICON_NAME = 'ic_card';
 function IconButton({
-  iconName = 'ic_card',
+  iconName,
+  source,
   modes = _reactUtils.EMPTY_MODES,
   onPress,
   disabled = false,
@@ -90,7 +95,9 @@ function IconButton({
   webAccessibilityProps,
   isToggle = false,
   activeIcon,
+  activeSource,
   inactiveIcon,
+  inactiveSource,
   isActive = false,
   ...rest
 }) {
@@ -113,11 +120,35 @@ function IconButton({
   userHandlersRef.current.onHoverIn = rest?.onHoverIn;
   userHandlersRef.current.onHoverOut = rest?.onHoverOut;
 
-  // Determine which icon to display
-  const finalIconName = isToggle ? isActive && activeIcon ? activeIcon : !isActive && inactiveIcon ? inactiveIcon : iconName : iconName;
+  // Resolve the active (name + source) pair for the current slot. Toggle
+  // mode picks active/inactive based on `isActive`; per-state overrides
+  // fall back to the default `iconName` / `source` when omitted. We then
+  // apply the legacy default icon only as a last resort, so a source-only
+  // call site (`<IconButton source="…" />`) renders the source instead of
+  // bleeding through to `'ic_card'`.
+  let resolvedIconName;
+  let resolvedSource;
+  if (isToggle) {
+    if (isActive) {
+      resolvedIconName = activeIcon ?? iconName;
+      resolvedSource = activeSource ?? source;
+    } else {
+      resolvedIconName = inactiveIcon ?? iconName;
+      resolvedSource = inactiveSource ?? source;
+    }
+  } else {
+    resolvedIconName = iconName;
+    resolvedSource = source;
+  }
+  if (!resolvedIconName && resolvedSource === undefined) {
+    resolvedIconName = LEGACY_DEFAULT_ICON_NAME;
+  }
 
-  // Generate default accessibility label from icon name if not provided
-  const defaultAccessibilityLabel = accessibilityLabel || iconName.replace(/^ic_/, '').replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+  // Generate default accessibility label from the resolved icon name when
+  // possible. Source-only call sites should provide an explicit
+  // `accessibilityLabel`; we fall back to a generic 'Icon button' so we
+  // never crash on `iconName.replace(...)` when only a `source` is supplied.
+  const defaultAccessibilityLabel = accessibilityLabel || (resolvedIconName ? resolvedIconName.replace(/^ic_/, '').replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()) : 'Icon button');
   const webProps = (0, _webPlatformUtils.usePressableWebSupport)({
     restProps: rest,
     onPress: disabled ? undefined : onPress,
@@ -170,7 +201,12 @@ function IconButton({
     style: styleCallback,
     ...webProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-      name: finalIconName,
+      ...(resolvedIconName !== undefined ? {
+        name: resolvedIconName
+      } : {}),
+      ...(resolvedSource !== undefined ? {
+        source: resolvedSource
+      } : {}),
       size: tokens.iconSize,
       color: tokens.iconColor,
       accessibilityElementsHidden: true,

package/lib/commonjs/components/IconCapsule/IconCapsule.js

@@ -49,6 +49,7 @@ function resolveIconCapsuleTokens(modes) {
  * @component
  * @param {Object} props - Component props
  * @param {string} [props.iconName="ic_card"] - The name of the icon to display from the icon registry
+ * @param {UnifiedSource} [props.source] - Fallback source (remote URI, inline SVG XML, `require()` asset, SVG React component, or React element). Used when `iconName` is missing or unknown. Tinted with the mode-resolved icon color so it follows design tokens just like a built-in icon.
  * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Appearance": "Primary"})
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers
  * @param {string} [props.accessibilityRole] - Accessibility role (defaults to "image" for decorative icons)
@@ -62,6 +63,7 @@ function resolveIconCapsuleTokens(modes) {
  */
 function IconCapsule({
   iconName = 'ic_card',
+  source,
   modes: propModes = _reactUtils.EMPTY_MODES,
   // accessibilityLabel is accepted on the type for API back-compat but the
   // component intentionally renders `accessibilityLabel={undefined}` (icons
@@ -91,6 +93,9 @@ function IconCapsule({
     ...rest,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
       name: iconName,
+      ...(source !== undefined ? {
+        source
+      } : {}),
       size: tokens.iconSize,
       color: tokens.iconColor,
       accessibilityElementsHidden: true,

package/lib/commonjs/components/Popup/Popup.js

@@ -112,12 +112,12 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(function Popup({
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.overlay,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-          style: [_reactNative.StyleSheet.absoluteFillObject, {
+          style: [_reactNative.StyleSheet.absoluteFill, {
             backgroundColor: backdropColor,
             opacity: backdropAnim
           }],
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-            style: _reactNative.StyleSheet.absoluteFillObject,
+            style: _reactNative.StyleSheet.absoluteFill,
             onPress: closeOnBackdropPress ? handleClose : undefined,
             accessibilityRole: "button",
             accessibilityLabel: "Close popup"

package/lib/commonjs/components/UpiHandle/UpiHandle.js

@@ -9,12 +9,13 @@ 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 _MediaSource = _interopRequireDefault(require("../../utils/MediaSource"));
 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); }
 // Default static asset from the component folder.
-// Consumers can override the image via the `avatarSource` prop if needed.
+// Consumers can override the image via the `source` prop if needed.
 const DEFAULT_AVATAR_IMAGE = require('./Image.png');
 const IS_WEB = _reactNative.Platform.OS === 'web';
 const IS_IOS = _reactNative.Platform.OS === 'ios';
@@ -88,7 +89,8 @@ function resolveUpiHandleTokens(modes) {
  * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
  * @param {boolean} [props.showIcon=true] - Toggles the trailing icon visibility.
  * @param {string} [props.iconName='ic_scan_qr_code'] - Icon name from the actions set.
- * @param {ImageSourcePropType} [props.avatarSource] - Optional custom image source for the avatar.
+ * @param {UnifiedSource} [props.source] - Unified avatar source (URI, inline SVG XML, `require()` asset, SVG React component, or React element). Smart-detects raster vs SVG so the same prop works on iOS, Android and web.
+ * @param {ImageSourcePropType|UnifiedSource} [props.avatarSource] - Deprecated alias for `source`; kept for back-compat.
  * @param {Function} [props.onClick] - Click/tap handler. Works as an alias for `onPress`.
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
@@ -106,6 +108,7 @@ function UpiHandle({
   modes: propModes = _reactUtils.EMPTY_MODES,
   showIcon = true,
   iconName = 'ic_scan_qr_code',
+  source,
   avatarSource,
   onPress,
   onClick,
@@ -154,13 +157,22 @@ function UpiHandle({
     pressed
   }) => [tokens.containerStyle, pressed ? pressedOverlayStyle : null, isFocused ? focusOverlayStyle : null], [tokens.containerStyle, isFocused]);
   const staticContainerStyle = (0, _react.useMemo)(() => [tokens.containerStyle, isFocused ? focusOverlayStyle : null], [tokens.containerStyle, isFocused]);
+
+  // `source` wins; `avatarSource` is the legacy fallback. Both are accepted
+  // as a UnifiedSource (string / number / {uri} / component / element), and
+  // the legacy `ImageSourcePropType` shapes naturally fit that union too.
+  const resolvedAvatarSource = source ?? avatarSource ?? DEFAULT_AVATAR_IMAGE;
+  const avatarSize = tokens.avatarStyle.width ?? 23;
   const innerContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
-      source: avatarSource || DEFAULT_AVATAR_IMAGE,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: tokens.avatarStyle,
-      resizeMode: "cover",
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no"
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaSource.default, {
+        source: resolvedAvatarSource,
+        size: avatarSize,
+        resizeMode: "cover",
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: tokens.labelStyle,
       numberOfLines: 1,

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;