jfs-components 0.0.63 → 0.0.65

package/CHANGELOG.md

@@ -4,6 +4,37 @@ 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
+
+- **`Section.Bento` — expandable grid:** New built-in expand/collapse UX. Pass `collapsedCount` (default `4`) plus the full set of cells in `navSlot`, and `Section.Bento` auto-injects a toggle cell, owns the `expanded` boolean (uncontrolled), and animates extra cells in/out with a staggered fade cascade. Supports controlled mode via `expanded` + `onExpandedChange`, customizable labels (`toggleMoreLabel`, `toggleLessLabel`) and icons (`toggleMoreIcon`, `toggleLessIcon`), and a `renderToggle` escape hatch for non-`ListItem` toggles. The toggle is only injected when `navSlot.length > collapsedCount`, so existing usage at or below the threshold renders unchanged.
+- **Drawer drop-shadow tokens:** New design tokens `drawer/shadow/primary/{offsetX,offsetY,blur,color}` and `drawer/shadow/secondary/{offsetX,color}` resolve a layered Figma drop shadow. Web stacks both shadows via `boxShadow`; iOS applies the primary shadow natively; Android uses elevation.
+
+### Changed
+
+- **`SlotGrid` sizing — first-row-anchored:** `SlotGrid` (used by `Section.Bento`) now measures only the first row's cells once on mount and applies that max width to every cell in every row. Previously every cell was measured every render, which caused width jumps when the cell count changed (expand/collapse) and could cancel `Animated.View` `entering` cascades by re-rendering them in the same React batch as the mount. Result: stable cell width across toggles, no layout shift, animations play uninterrupted. Edge-flush behavior (first cell flush-left, last cell flush-right) is preserved via `justify-content: space-between`.
+- **`Section.Bento` height transition:** The section grows and shrinks via an explicit measured-height spring (`overflow: 'hidden'` clip + `withSpring`) instead of `LinearTransition`. Cells inside are never resized during the animation — only the container's clip rectangle interpolates.
+- **Drawer gesture policy:** Pan now requires a 10px vertical drag to activate (`activeOffsetY([-10, 10])`) and surrenders the gesture entirely after ~16px of horizontal movement (`failOffsetX([-16, 16])`). A defense-in-depth check in `onUpdate` skips Y translation on frames where horizontal motion dominates. This lets horizontal children (carousels, sliders, horizontal `FlatList`s) inside the drawer scroll cleanly without the sheet also translating.
+
+### Fixed
+
+- **Drawer iOS shadow clipping:** The sheet now renders content inside an inner clip layer so `overflow: 'hidden'` no longer trims the outer view's drop shadow on iOS.
+
+### Accessibility
+
+- All new `Section.Bento` animations honor the OS reduce-motion setting via Reanimated's `ReduceMotion.System`.
+
+---
+
 ## [0.0.63] - 2026-04-20
 
 ### Performance

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,9 +130,24 @@ function Drawer({
 
   // Update JS state for accessibility/logic if needed
   const updateMode = (0, _react.useCallback)(newMode => {
-    setMode(newMode);
-  }, []);
-  const gesture = _reactNativeGestureHandler.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 = _reactNativeGestureHandler.Gesture.Pan().simultaneousWithExternalGesture(scrollRef).activeOffsetY([-10, 10]).failOffsetX([-16, 16]).onStart(() => {
     context.value = {
       y: translateY.value
     };
@@ -140,6 +156,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.
@@ -251,71 +277,108 @@ function Drawer({
   const titleWeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/fontWeight', modes) || '700';
   const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/lineHeight', modes) || 17;
   const titlePaddingBottom = (0, _figmaVariablesResolver.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 = (0, _figmaVariablesResolver.getVariableByName)('drawer/shadow/primary/offsetX', modes) ?? 0;
+  const shadowPrimaryOffsetY = (0, _figmaVariablesResolver.getVariableByName)('drawer/shadow/primary/offsetY', modes) ?? 16;
+  const shadowPrimaryBlur = (0, _figmaVariablesResolver.getVariableByName)('drawer/shadow/primary/blur', modes) ?? 48;
+  const shadowPrimaryColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/shadow/primary/color', modes) ?? 'rgba(12, 13, 16, 0.16)';
+  const shadowSecondaryOffsetX = (0, _figmaVariablesResolver.getVariableByName)('drawer/shadow/secondary/offsetX', modes) ?? 0;
+  const shadowSecondaryColor = (0, _figmaVariablesResolver.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 = _reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureHandlerRootView, {
     style: [styles.host, style],
     pointerEvents: "box-none",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
       gesture: gesture,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.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,
         ...(_reactNative.Platform.OS === 'web' ? {
           accessibilityRole: 'dialog'
         } : undefined),
         accessibilityLabel: undefined,
         accessibilityHint: accessibilityHint || 'Swipe up to expand, swipe down to collapse',
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [styles.handleArea, !title && !header && {
-            paddingBottom: 0
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [styles.sheetInner, {
+            borderTopLeftRadius: radius,
+            borderTopRightRadius: radius,
+            paddingLeft,
+            paddingRight,
+            paddingBottom,
+            rowGap: drawerGap
           }],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.handleArea, !title && !header && {
+              paddingBottom: 0
+            }],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [{
+                backgroundColor: handleColor,
+                width: handleWidth,
+                height: handleHeight,
+                borderRadius: handleRadius
+              }]
+            })
+          }), header, title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [{
-              backgroundColor: handleColor,
-              width: handleWidth,
-              height: handleHeight,
-              borderRadius: handleRadius
-            }]
-          })
-        }), header, title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [{
-            color: titleColor,
-            fontSize: titleSize,
-            fontWeight: titleWeight,
-            lineHeight: titleLineHeight,
-            marginBottom: titlePaddingBottom
-          }],
-          children: title
-        }), /*#__PURE__*/(0, _jsxRuntime.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: (0, _reactNativeReanimated.useAnimatedScrollHandler)(event => {
-            scrollY.value = event.contentOffset.y;
-          }),
-          scrollEventThrottle: 16,
-          children: children
-        })]
+              color: titleColor,
+              fontSize: titleSize,
+              fontWeight: titleWeight,
+              lineHeight: titleLineHeight,
+              marginBottom: titlePaddingBottom
+            }],
+            children: title
+          }), /*#__PURE__*/(0, _jsxRuntime.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: (0, _reactNativeReanimated.useAnimatedScrollHandler)(event => {
+              scrollY.value = event.contentOffset.y;
+            }),
+            scrollEventThrottle: 16,
+            children: children
+          })]
+        })
       })
     })
   });
@@ -333,7 +396,10 @@ const styles = _reactNative.StyleSheet.create({
   sheet: {
     width: '100%',
     position: 'absolute',
-    top: 0,
+    top: 0
+  },
+  sheetInner: {
+    flex: 1,
     overflow: 'hidden'
   },
   handleArea: {

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"