jfs-components 0.0.63 → 0.0.65

package/lib/commonjs/utils/MediaSource.js

@@ -0,0 +1,181 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSvg = require("react-native-svg");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * A unified, "do-the-right-thing" image source accepted by `MediaSource` and
+ * by the `source` prop on `Icon`, `IconCapsule` and `UpiHandle`.
+ *
+ * Accepts any of:
+ *  - `string`   — a URI (raster or `.svg`) **or** an inline SVG XML document
+ *                 (`'<svg …>…</svg>'`).
+ *  - `number`   — a Metro asset id from `require('./foo.png')`.
+ *  - `{ uri, … }` — the standard RN `ImageURISource` object (works for both
+ *                   raster and `.svg` URIs).
+ *  - `React.ComponentType` — an SVG React component (e.g. produced by
+ *                            `react-native-svg-transformer`, by `@svgr/*`,
+ *                            or hand-written). It is rendered with
+ *                            `{ width, height, color, fill }` so it can be
+ *                            tinted just like a built-in icon.
+ *  - `React.ReactElement`  — an already-rendered node, passed through verbatim.
+ *
+ * The helper sniffs the input shape (no extension hint required from the
+ * caller) and picks the correct renderer for the platform.
+ */
+
+const SVG_XML_RE = /<svg[\s>]/i;
+const SVG_URI_RE = /\.svg(\?|#|$)/i;
+function isSvgXml(s) {
+  return /^\s*</.test(s) && SVG_XML_RE.test(s);
+}
+function isSvgUri(s) {
+  return SVG_URI_RE.test(s);
+}
+function isUriObject(v) {
+  return typeof v === 'object' && v !== null && 'uri' in v && typeof v.uri === 'string';
+}
+
+/**
+ * Smart renderer that picks the right primitive for the source shape. See
+ * {@link UnifiedSource}.
+ *
+ * Designed to be used internally by `Icon`, `IconCapsule`, and `UpiHandle`,
+ * but also exported for ad-hoc consumer use.
+ */
+function MediaSource(props) {
+  const {
+    source,
+    size,
+    width,
+    height,
+    tintColor,
+    style,
+    resizeMode = 'cover',
+    accessibilityElementsHidden,
+    importantForAccessibility
+  } = props;
+  const w = width ?? size;
+  const h = height ?? size;
+
+  // Pre-rendered element — pass through.
+  if (/*#__PURE__*/_react.default.isValidElement(source)) {
+    return source;
+  }
+
+  // SVG / icon component.
+  if (typeof source === 'function') {
+    const Comp = source;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+      ...(w !== undefined ? {
+        width: w
+      } : {}),
+      ...(h !== undefined ? {
+        height: h
+      } : {}),
+      ...(tintColor !== undefined ? {
+        color: tintColor,
+        fill: tintColor
+      } : {})
+    });
+  }
+  const sizeStyle = w !== undefined || h !== undefined ? {
+    width: w,
+    height: h
+  } : null;
+  const tintStyle = tintColor ? {
+    tintColor
+  } : null;
+  const composedStyle = [sizeStyle, tintStyle, style];
+  if (typeof source === 'string') {
+    if (isSvgXml(source)) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.SvgXml, {
+        xml: source,
+        ...(w !== undefined ? {
+          width: w
+        } : {}),
+        ...(h !== undefined ? {
+          height: h
+        } : {}),
+        ...(tintColor !== undefined ? {
+          color: tintColor
+        } : {})
+      });
+    }
+    if (isSvgUri(source)) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.SvgUri, {
+        uri: source,
+        ...(w !== undefined ? {
+          width: w
+        } : {}),
+        ...(h !== undefined ? {
+          height: h
+        } : {}),
+        ...(tintColor !== undefined ? {
+          color: tintColor
+        } : {})
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+      source: {
+        uri: source
+      },
+      style: composedStyle,
+      resizeMode: resizeMode,
+      ...(accessibilityElementsHidden !== undefined ? {
+        accessibilityElementsHidden
+      } : {}),
+      ...(importantForAccessibility !== undefined ? {
+        importantForAccessibility
+      } : {})
+    });
+  }
+  if (isUriObject(source)) {
+    if (isSvgUri(source.uri)) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.SvgUri, {
+        uri: source.uri,
+        ...(w !== undefined ? {
+          width: w
+        } : {}),
+        ...(h !== undefined ? {
+          height: h
+        } : {}),
+        ...(tintColor !== undefined ? {
+          color: tintColor
+        } : {})
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+      source: source,
+      style: composedStyle,
+      resizeMode: resizeMode,
+      ...(accessibilityElementsHidden !== undefined ? {
+        accessibilityElementsHidden
+      } : {}),
+      ...(importantForAccessibility !== undefined ? {
+        importantForAccessibility
+      } : {})
+    });
+  }
+  if (typeof source === 'number') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+      source: source,
+      style: composedStyle,
+      resizeMode: resizeMode,
+      ...(accessibilityElementsHidden !== undefined ? {
+        accessibilityElementsHidden
+      } : {}),
+      ...(importantForAccessibility !== undefined ? {
+        importantForAccessibility
+      } : {})
+    });
+  }
+  return null;
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(MediaSource);

package/lib/commonjs/utils/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "MediaSource", {
+  enumerable: true,
+  get: function () {
+    return _MediaSource.default;
+  }
+});
 Object.defineProperty(exports, "cloneChildrenWithModes", {
   enumerable: true,
   get: function () {
@@ -15,4 +21,6 @@ Object.defineProperty(exports, "flattenChildren", {
     return _reactUtils.flattenChildren;
   }
 });
-var _reactUtils = require("./react-utils");
+var _reactUtils = require("./react-utils");
+var _MediaSource = _interopRequireDefault(require("./MediaSource"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/module/components/Carousel/Carousel.js

@@ -43,7 +43,8 @@ export function Carousel({
   const gap = gapProp ?? tokenGap;
   const containerPaddingH = parseFloat(getVariableByName('carousel/padding/horizontal', modes) || '0');
   const containerPaddingV = parseFloat(getVariableByName('carousel/padding/vertical', modes) || '0');
-  const paginationGap = parseFloat(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 = useRef(null);
@@ -200,7 +201,7 @@ export function Carousel({
       }), showPagination && totalItems > 1 && /*#__PURE__*/_jsx(Pagination, {
         modes: modes,
         style: {
-          marginTop: paginationGap
+          marginTop: paginationOffset
         }
       })]
     })
@@ -242,13 +243,15 @@ export function Pagination({
   } = useContext(CarouselContext);
   const modes = propModes || ctxModes || {};
 
-  // Token resolution for dots
-  const dotSize = parseFloat(getVariableByName('carousel/pagination/dotSize', modes) || '8');
-  const dotActiveWidth = parseFloat(getVariableByName('carousel/pagination/dotActiveWidth', modes) || '24');
-  const dotGap = parseFloat(getVariableByName('carousel/pagination/dotGap', modes) || '8');
-  const dotColor = getVariableByName('carousel/pagination/dotColor', modes) || 'rgba(255,255,255,0.35)';
-  const dotActiveColor = getVariableByName('carousel/pagination/dotActiveColor', modes) || '#ffffff';
-  const dotRadius = parseFloat(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(getVariableByName('carousel/pagination/gap', modes) || '4');
+  const dotColor = getVariableByName('carousel/pagination/indicator/inactivecolor', modes) || 'rgba(0,0,0,0.3)';
+  const dotActiveColor = getVariableByName('carousel/pagination/indicator/activecolor', modes) || '#170d0a';
+  const dotRadius = parseFloat(getVariableByName('carousel/pagination/indicator/radius', modes) || '9999');
   const containerStyle = {
     flexDirection: 'row',
     justifyContent: 'center',

package/lib/module/components/Drawer/Drawer.js

@@ -59,7 +59,8 @@ function Drawer({
   accessibilityHint,
   contentContainerStyle,
   showsVerticalScrollIndicator = false,
-  bottomInset = 80
+  bottomInset = 80,
+  onStateChange
 }) {
   const {
     height: screenHeight
@@ -124,9 +125,24 @@ function Drawer({
 
   // Update JS state for accessibility/logic if needed
   const updateMode = useCallback(newMode => {
-    setMode(newMode);
-  }, []);
-  const gesture = Gesture.Pan().simultaneousWithExternalGesture(scrollRef).activeOffsetY([-5, 5]).activeOffsetX([-5, 5]).onStart(() => {
+    setMode(prev => {
+      if (prev !== newMode) {
+        onStateChange?.(newMode);
+      }
+      return newMode;
+    });
+  }, [onStateChange]);
+
+  // Gesture policy:
+  //  • activeOffsetY: require a clear *vertical* drag (10px) before this
+  //    pan claims the gesture.  Matches typical iOS scroll activation feel.
+  //  • failOffsetX:  if the finger crosses ~16px horizontally *before* we
+  //    activate, surrender the gesture entirely so any horizontal child
+  //    (FlatList horizontal, swiper, slider, etc.) can scroll cleanly
+  //    without the drawer also translating on Y.
+  //  • simultaneousWithExternalGesture(scrollRef): cooperate with the
+  //    drawer's own internal vertical ScrollView for nested scrolling.
+  const gesture = Gesture.Pan().simultaneousWithExternalGesture(scrollRef).activeOffsetY([-10, 10]).failOffsetX([-16, 16]).onStart(() => {
     context.value = {
       y: translateY.value
     };
@@ -135,6 +151,16 @@ function Drawer({
     prevAtTop.value = scrollY.value <= 1;
     scrollTopTranslationOffset.value = 0;
   }).onUpdate(event => {
+    // Defense-in-depth: even after vertical activation, if the *current*
+    // motion is dominantly horizontal (e.g., the user activated with a
+    // small Y nudge and then curved into a horizontal swipe on a child
+    // carousel), don't translate the drawer this frame.  failOffsetX
+    // already prevents activation in pure-horizontal swipes; this guards
+    // the diagonal-then-horizontal case.
+    if (Math.abs(event.translationX) > Math.abs(event.translationY) * 1.5) {
+      return;
+    }
+
     // Logic for nested scrolling:
     // If we are at the expanded position (minTranslateY) AND content is
     // scrolled down (scrollY > 0), let the ScrollView handle the gesture.
@@ -246,71 +272,108 @@ function Drawer({
   const titleWeight = getVariableByName('drawer/title/fontWeight', modes) || '700';
   const titleLineHeight = getVariableByName('drawer/title/lineHeight', modes) || 17;
   const titlePaddingBottom = getVariableByName('drawer/titleWrap/padding/bottom', modes) || 8;
+
+  // Drop shadow — Figma layers two shadows (primary + secondary) sharing
+  // the same offsetY/blur but with their own offsetX and color.
+  const shadowPrimaryOffsetX = getVariableByName('drawer/shadow/primary/offsetX', modes) ?? 0;
+  const shadowPrimaryOffsetY = getVariableByName('drawer/shadow/primary/offsetY', modes) ?? 16;
+  const shadowPrimaryBlur = getVariableByName('drawer/shadow/primary/blur', modes) ?? 48;
+  const shadowPrimaryColor = getVariableByName('drawer/shadow/primary/color', modes) ?? 'rgba(12, 13, 16, 0.16)';
+  const shadowSecondaryOffsetX = getVariableByName('drawer/shadow/secondary/offsetX', modes) ?? 0;
+  const shadowSecondaryColor = getVariableByName('drawer/shadow/secondary/color', modes) ?? 'rgba(12, 13, 16, 0.12)';
+
+  // Cross-platform shadow style. Web supports stacking two shadows via
+  // boxShadow. iOS only supports a single native shadow per view, so we
+  // apply the more prominent (primary) one. Android uses elevation.
+  const shadowStyle = Platform.select({
+    web: {
+      boxShadow: `${shadowSecondaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowSecondaryColor}, ` + `${shadowPrimaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowPrimaryColor}`
+    },
+    ios: {
+      shadowColor: shadowPrimaryColor,
+      shadowOffset: {
+        width: shadowPrimaryOffsetX,
+        height: shadowPrimaryOffsetY
+      },
+      shadowOpacity: 1,
+      shadowRadius: shadowPrimaryBlur / 2
+    },
+    android: {
+      elevation: 16
+    },
+    default: {}
+  });
   const defaultAccessibilityLabel = accessibilityLabel || title || 'Drawer';
   return /*#__PURE__*/_jsx(GestureHandlerRootView, {
     style: [styles.host, style],
     pointerEvents: "box-none",
     children: /*#__PURE__*/_jsx(GestureDetector, {
       gesture: gesture,
-      children: /*#__PURE__*/_jsxs(Animated.View, {
+      children: /*#__PURE__*/_jsx(Animated.View, {
         style: [styles.sheet, {
           // Constraint the height strictly to the expanded height
           // This ensures the ScrollView has a finite frame to scroll within
           height: expandedHeight,
           backgroundColor,
           borderTopLeftRadius: radius,
-          borderTopRightRadius: radius,
-          paddingLeft,
-          paddingRight,
-          paddingBottom,
-          rowGap: drawerGap
-        }, sheetStyle, animatedStyle],
+          borderTopRightRadius: radius
+        }, shadowStyle, sheetStyle, animatedStyle],
         accessible: true,
         ...(Platform.OS === 'web' ? {
           accessibilityRole: 'dialog'
         } : undefined),
         accessibilityLabel: undefined,
         accessibilityHint: accessibilityHint || 'Swipe up to expand, swipe down to collapse',
-        children: [/*#__PURE__*/_jsx(View, {
-          style: [styles.handleArea, !title && !header && {
-            paddingBottom: 0
+        children: /*#__PURE__*/_jsxs(View, {
+          style: [styles.sheetInner, {
+            borderTopLeftRadius: radius,
+            borderTopRightRadius: radius,
+            paddingLeft,
+            paddingRight,
+            paddingBottom,
+            rowGap: drawerGap
           }],
-          children: /*#__PURE__*/_jsx(View, {
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.handleArea, !title && !header && {
+              paddingBottom: 0
+            }],
+            children: /*#__PURE__*/_jsx(View, {
+              style: [{
+                backgroundColor: handleColor,
+                width: handleWidth,
+                height: handleHeight,
+                borderRadius: handleRadius
+              }]
+            })
+          }), header, title && /*#__PURE__*/_jsx(Text, {
             style: [{
-              backgroundColor: handleColor,
-              width: handleWidth,
-              height: handleHeight,
-              borderRadius: handleRadius
-            }]
-          })
-        }), header, title && /*#__PURE__*/_jsx(Text, {
-          style: [{
-            color: titleColor,
-            fontSize: titleSize,
-            fontWeight: titleWeight,
-            lineHeight: titleLineHeight,
-            marginBottom: titlePaddingBottom
-          }],
-          children: title
-        }), /*#__PURE__*/_jsx(AnimatedScrollView, {
-          ref: scrollRef,
-          style: [styles.content, contentStyle],
-          contentContainerStyle: [{
-            paddingBottom: paddingBottom + bottomInset,
-            gap: drawerGap,
-            flexDirection: 'column',
-            alignItems: 'stretch'
-          }, contentContainerStyle],
-          showsVerticalScrollIndicator: showsVerticalScrollIndicator,
-          animatedProps: animatedScrollProps,
-          alwaysBounceVertical: false,
-          overScrollMode: "always",
-          onScroll: useAnimatedScrollHandler(event => {
-            scrollY.value = event.contentOffset.y;
-          }),
-          scrollEventThrottle: 16,
-          children: children
-        })]
+              color: titleColor,
+              fontSize: titleSize,
+              fontWeight: titleWeight,
+              lineHeight: titleLineHeight,
+              marginBottom: titlePaddingBottom
+            }],
+            children: title
+          }), /*#__PURE__*/_jsx(AnimatedScrollView, {
+            ref: scrollRef,
+            style: [styles.content, contentStyle],
+            contentContainerStyle: [{
+              paddingBottom: paddingBottom + bottomInset,
+              gap: drawerGap,
+              flexDirection: 'column',
+              alignItems: 'stretch'
+            }, contentContainerStyle],
+            showsVerticalScrollIndicator: showsVerticalScrollIndicator,
+            animatedProps: animatedScrollProps,
+            alwaysBounceVertical: false,
+            overScrollMode: "always",
+            onScroll: useAnimatedScrollHandler(event => {
+              scrollY.value = event.contentOffset.y;
+            }),
+            scrollEventThrottle: 16,
+            children: children
+          })]
+        })
       })
     })
   });
@@ -328,7 +391,10 @@ const styles = StyleSheet.create({
   sheet: {
     width: '100%',
     position: 'absolute',
-    top: 0,
+    top: 0
+  },
+  sheetInner: {
+    flex: 1,
     overflow: 'hidden'
   },
   handleArea: {

package/lib/module/components/IconButton/IconButton.js

@@ -72,8 +72,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 = EMPTY_MODES,
   onPress,
   disabled = false,
@@ -84,7 +89,9 @@ function IconButton({
   webAccessibilityProps,
   isToggle = false,
   activeIcon,
+  activeSource,
   inactiveIcon,
+  inactiveSource,
   isActive = false,
   ...rest
 }) {
@@ -107,11 +114,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 = usePressableWebSupport({
     restProps: rest,
     onPress: disabled ? undefined : onPress,
@@ -164,7 +195,12 @@ function IconButton({
     style: styleCallback,
     ...webProps,
     children: /*#__PURE__*/_jsx(Icon, {
-      name: finalIconName,
+      ...(resolvedIconName !== undefined ? {
+        name: resolvedIconName
+      } : {}),
+      ...(resolvedSource !== undefined ? {
+        source: resolvedSource
+      } : {}),
       size: tokens.iconSize,
       color: tokens.iconColor,
       accessibilityElementsHidden: true,

package/lib/module/components/IconCapsule/IconCapsule.js

@@ -43,6 +43,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)
@@ -56,6 +57,7 @@ function resolveIconCapsuleTokens(modes) {
  */
 function IconCapsule({
   iconName = 'ic_card',
+  source,
   modes: propModes = EMPTY_MODES,
   // accessibilityLabel is accepted on the type for API back-compat but the
   // component intentionally renders `accessibilityLabel={undefined}` (icons
@@ -85,6 +87,9 @@ function IconCapsule({
     ...rest,
     children: /*#__PURE__*/_jsx(Icon, {
       name: iconName,
+      ...(source !== undefined ? {
+        source
+      } : {}),
       size: tokens.iconSize,
       color: tokens.iconColor,
       accessibilityElementsHidden: true,

package/lib/module/components/Popup/Popup.js

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