jfs-components 0.1.30 → 0.1.33

package/lib/commonjs/components/CompareTable/CompareTable.js

@@ -113,7 +113,9 @@ function CompareTable({
   modes = _reactUtils.EMPTY_MODES,
   style,
   disableTruncation,
-  columnWidth
+  columnWidth,
+  stickyHeaders = true,
+  stickyHeaderLabel = true
 }) {
   // --- selection card tokens ------------------------------------------------
   const cardBg = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/background/color', modes) ?? '#ffffff';
@@ -185,12 +187,12 @@ function CompareTable({
   // Stable per-section ref-callback instances so React doesn't detach/reattach
   // on every render (which would churn the map and re-fire scrollTo).
   const bodyRefCallbacks = (0, _react.useRef)(new Map());
-  /** Last offset we synced everyone to. Echoed onScroll events reporting this
-   *  same value are ignored — this is what prevents feedback loops. */
+  /** Tracks which ScrollView the user is currently dragging. Only the
+   *  actively-dragged ScrollView drives horizontal sync — programmatic
+   *  scrollTo echoes from synced peers are ignored, eliminating jitter. */
+  const draggingSource = (0, _react.useRef)(null);
   const lastSyncX = (0, _react.useRef)(0);
-  const applySync = (0, _react.useCallback)((x, source) => {
-    if (Math.abs(x - lastSyncX.current) < 0.5) return;
-    lastSyncX.current = x;
+  const syncOthers = (0, _react.useCallback)((source, x) => {
     if (source !== 'cards' && cardsScrollRef.current) {
       cardsScrollRef.current.scrollTo({
         x,
@@ -206,12 +208,37 @@ function CompareTable({
       }
     });
   }, []);
-  const onCardsScroll = (0, _react.useCallback)(e => {
-    applySync(e.nativeEvent.contentOffset.x, 'cards');
-  }, [applySync]);
-  const onBodyScroll = (0, _react.useCallback)(idx => e => {
-    applySync(e.nativeEvent.contentOffset.x, idx);
-  }, [applySync]);
+  const onScrollBeginDrag = (0, _react.useCallback)(source => () => {
+    draggingSource.current = source;
+  }, []);
+  const onScrollEndDrag = (0, _react.useCallback)(source => e => {
+    const x = Math.round(e.nativeEvent.contentOffset.x);
+    if (x === lastSyncX.current) return;
+    lastSyncX.current = x;
+    syncOthers(source, x);
+  }, [syncOthers]);
+  const onMomentumScrollEnd = (0, _react.useCallback)(source => e => {
+    if (draggingSource.current === source) {
+      draggingSource.current = null;
+    }
+    const x = Math.round(e.nativeEvent.contentOffset.x);
+    if (x === lastSyncX.current) return;
+    lastSyncX.current = x;
+    syncOthers(source, x);
+  }, [syncOthers]);
+
+  /** Real-time scroll sync: only the actively-dragged ScrollView drives
+   *  sync on native — echoed onScroll events from programmatic scrollTo
+   *  on other ScrollViews are ignored because draggingSource won't match.
+   *  On web, onScrollBeginDrag never fires for mouse/trackpad, so skip
+   *  the guard and rely on the lastSyncX rounded-value check instead. */
+  const onScroll = (0, _react.useCallback)(source => e => {
+    if (_reactNative.Platform.OS !== 'web' && draggingSource.current !== source) return;
+    const x = Math.round(e.nativeEvent.contentOffset.x);
+    if (x === lastSyncX.current) return;
+    lastSyncX.current = x;
+    syncOthers(source, x);
+  }, [syncOthers]);
   const getBodyRefCallback = (0, _react.useCallback)(idx => {
     let cb = bodyRefCallbacks.current.get(idx);
     if (!cb) {
@@ -442,55 +469,45 @@ function CompareTable({
       })
     })]
   });
-
-  // Render a single section in fixed-width scroll mode. Unlike `renderTable`
-  // (used in flex mode), the gray header row is rendered full-width OUTSIDE
-  // the body's horizontal ScrollView so it stays put horizontally (it does
-  // not slide with the cells) while still scrolling vertically with the table.
-  // The body rows live inside a horizontal ScrollView that is scroll-synced
-  // with the cards row and every other section's body.
-  const renderSection = (section, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Accordion.default, {
-    title: section.title,
-    defaultExpanded: section.defaultExpanded ?? index === 0,
-    modes: modes,
-    children: [section.header != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  const renderHeaderContent = section => section.header != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      backgroundColor: headerBg,
+      paddingHorizontal: headerPaddingH,
+      paddingVertical: headerPaddingV,
+      borderBottomWidth: cellBorderSize,
+      borderBottomColor: cellBorderColor
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: headerTextStyle,
+      children: section.header
+    })
+  }) : null;
+  const renderBodyContent = (section, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+    ref: getBodyRefCallback(index),
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    onScroll: onScroll(index),
+    onScrollBeginDrag: onScrollBeginDrag(index),
+    onScrollEndDrag: onScrollEndDrag(index),
+    onMomentumScrollEnd: onMomentumScrollEnd(index),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
-        width: '100%',
-        backgroundColor: headerBg,
-        paddingHorizontal: headerPaddingH,
-        paddingVertical: headerPaddingV,
-        borderBottomWidth: cellBorderSize,
-        borderBottomColor: cellBorderColor
+        width: contentWidth
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: headerTextStyle,
-        children: section.header
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-      ref: getBodyRefCallback(index),
-      horizontal: true,
-      showsHorizontalScrollIndicator: false,
-      scrollEventThrottle: 16,
-      onScroll: onBodyScroll(index),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          width: contentWidth
-        },
-        children: section.rows.map((row, rowIndex) => {
-          const isLastRow = rowIndex === section.rows.length - 1;
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: {
-              flexDirection: 'row',
-              width: '100%'
-            },
-            children: [Array.from({
-              length: columnCount
-            }).map((_, colIndex) => renderTableCell(renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`), colIndex, isLastRow, colIndex)), showAddCard && renderTableCell(null, gridColumnCount - 1, isLastRow, '__add_spacer__')]
-          }, row.key ?? rowIndex);
-        })
+      children: section.rows.map((row, rowIndex) => {
+        const isLastRow = rowIndex === section.rows.length - 1;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: {
+            flexDirection: 'row',
+            width: '100%'
+          },
+          children: [Array.from({
+            length: columnCount
+          }).map((_, colIndex) => renderTableCell(renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`), colIndex, isLastRow, colIndex)), showAddCard && renderTableCell(null, gridColumnCount - 1, isLastRow, '__add_spacer__')]
+        }, row.key ?? rowIndex);
       })
-    })]
-  }, section.key ?? section.title ?? index);
+    })
+  });
   const outerStyle = {
     width: '100%',
     backgroundColor: cardBg,
@@ -524,43 +541,82 @@ function CompareTable({
   }
 
   // --- fixed-width scroll mode: chained horizontal sync + sticky cards -----
-  // The cards row (index 0) is a sticky header of the vertical ScrollView so
-  // it pins to the top while the sections scroll beneath. The cards row is
-  // itself a horizontal ScrollView, synced with every section body. For the
-  // vertical scroll (and thus the sticky behaviour) to engage, the host must
-  // give CompareTable a bounded height (e.g. a sized container or flex:1).
+  // Build children and stickyHeaderIndices for the vertical ScrollView.
+  // When stickyHeaders is on, section headers are injected as direct children
+  // so React Native's stickyHeaderIndices can pin them with stacking.
+  const scrollChildren = [];
+  const stickyIndices = [];
+  if (showCardsRow) {
+    stickyIndices.push(scrollChildren.length);
+    scrollChildren.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      ref: cardsScrollRef,
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      scrollEventThrottle: 16,
+      onScroll: onScroll('cards'),
+      onScrollBeginDrag: onScrollBeginDrag('cards'),
+      onScrollEndDrag: onScrollEndDrag('cards'),
+      onMomentumScrollEnd: onMomentumScrollEnd('cards'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flexDirection: 'row',
+          width: contentWidth
+        },
+        children: [columns.map(renderCard), showAddCard && renderAddCard()]
+      })
+    }, "cards-row"));
+  }
+  sections.forEach((section, index) => {
+    const sectionKey = section.key ?? section.title ?? index;
+    const headerContent = renderHeaderContent(section);
+    if (stickyHeaders && headerContent != null) {
+      stickyIndices.push(scrollChildren.length);
+      scrollChildren.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: '100%'
+        },
+        children: stickyHeaderLabel ? headerContent : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+          horizontal: true,
+          showsHorizontalScrollIndicator: false,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: {
+              width: contentWidth
+            },
+            children: headerContent
+          })
+        })
+      }, `sticky-header-${sectionKey}`));
+    }
+    scrollChildren.push(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Accordion.default, {
+      title: section.title,
+      defaultExpanded: section.defaultExpanded ?? index === 0,
+      modes: modes,
+      children: [!stickyHeaders && headerContent != null && (stickyHeaderLabel ? headerContent : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            width: contentWidth
+          },
+          children: headerContent
+        })
+      })), renderBodyContent(section, index)]
+    }, sectionKey));
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [outerStyle, style, {
       flexDirection: 'column',
       flex: 1
     }],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
       style: {
         width: '100%',
         flex: 1
       },
-      stickyHeaderIndices: showCardsRow ? [0] : [],
+      stickyHeaderIndices: stickyIndices,
       showsVerticalScrollIndicator: false,
       directionalLockEnabled: true,
-      children: [showCardsRow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-        ref: cardsScrollRef,
-        horizontal: true,
-        showsHorizontalScrollIndicator: false,
-        scrollEventThrottle: 16,
-        onScroll: onCardsScroll,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: {
-            flexDirection: 'row',
-            width: contentWidth
-          },
-          children: [columns.map(renderCard), showAddCard && renderAddCard()]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          width: '100%'
-        },
-        children: sections.map(renderSection)
-      })]
+      children: scrollChildren
     })
   });
 }

package/lib/commonjs/components/ContentSheet/ContentSheet.js

@@ -109,6 +109,7 @@ function ContentSheet({
   safeAreaBottom = true,
   pinToBottom = true,
   visible = true,
+  maxHeightPercent = 0.7,
   style,
   ...rest
 }) {
@@ -120,9 +121,6 @@ function ContentSheet({
   const resolved = (0, _react.useMemo)(() => resolveContentSheetStyle(modes), [modes]);
   const processedChildren = (0, _react.useMemo)(() => (0, _reactUtils.cloneChildrenWithModes)((0, _reactUtils.flattenChildren)(children), modes), [children, modes]);
   const paddingBottom = resolved.paddingBottom + (safeAreaBottom ? bottomInset : 0);
-  const containerStyle = (0, _react.useMemo)(() => [pinToBottom ? pinnedStyle : null, resolved.container, {
-    paddingBottom
-  }, style], [pinToBottom, resolved.container, paddingBottom, style]);
 
   // Entrance / exit "pop up from bottom" animation — mirrors the Drawer. The
   // sheet is bottom-anchored, so a positive `translateY` equal to the window
@@ -132,6 +130,11 @@ function ContentSheet({
   const {
     height: windowHeight
   } = (0, _reactNative.useWindowDimensions)();
+  const maxHeight = windowHeight * maxHeightPercent;
+  const containerStyle = (0, _react.useMemo)(() => [pinToBottom ? pinnedStyle : null, resolved.container, {
+    maxHeight,
+    paddingBottom
+  }, style], [pinToBottom, resolved.container, maxHeight, paddingBottom, style]);
   const entrance = (0, _reactNativeReanimated.useSharedValue)(windowHeight);
   (0, _react.useEffect)(() => {
     entrance.value = (0, _reactNativeReanimated.withSpring)(visible ? 0 : windowHeight, SPRING_CONFIG);
@@ -155,6 +158,7 @@ function ContentSheet({
       style: containerStyle,
       spacing: keyboardSpacing,
       entrance: entrance,
+      maxHeight: maxHeight,
       ...rest,
       children: [header, processedChildren]
     });
@@ -162,6 +166,7 @@ function ContentSheet({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AnimatedSheet, {
     style: containerStyle,
     entrance: entrance,
+    maxHeight: maxHeight,
     ...rest,
     children: [header, processedChildren]
   });
@@ -178,6 +183,7 @@ function KeyboardAwareSheet({
   style,
   spacing,
   entrance,
+  maxHeight,
   children,
   ...rest
 }) {
@@ -194,7 +200,15 @@ function KeyboardAwareSheet({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
     style: [style, animatedStyle],
     ...rest,
-    children: children
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      style: {
+        maxHeight
+      },
+      bounces: false,
+      showsVerticalScrollIndicator: false,
+      keyboardShouldPersistTaps: "handled",
+      children: children
+    })
   });
 }
 
@@ -206,6 +220,7 @@ function KeyboardAwareSheet({
 function AnimatedSheet({
   style,
   entrance,
+  maxHeight,
   children,
   ...rest
 }) {
@@ -219,7 +234,15 @@ function AnimatedSheet({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
     style: [style, animatedStyle],
     ...rest,
-    children: children
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      style: {
+        maxHeight
+      },
+      bounces: false,
+      showsVerticalScrollIndicator: false,
+      keyboardShouldPersistTaps: "handled",
+      children: children
+    })
   });
 }
 var _default = exports.default = ContentSheet;

package/lib/commonjs/components/CounterBadge/CounterBadge.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Counter Badge — a small token-driven pill that displays a value.
+ *
+ * All visual attributes resolve from the Figma `counterBadge/*` tokens via
+ * `getVariableByName`.
+ */
+function CounterBadge({
+  value = '99',
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  ...rest
+}) {
+  // Resolve token values (fall back to the Figma defaults for the single
+  // `Default` mode so the badge still renders if a token is missing).
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('counterBadge/background', modes) ?? '#ebebec';
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('counterBadge/foreground', modes) ?? '#0c0d10';
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('counterBadge/fontFamily', modes) ?? 'JioType Var';
+  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('counterBadge/fontWeight', modes) ?? 500;
+  const fontWeight = typeof fontWeightRaw === 'number' ? String(fontWeightRaw) : fontWeightRaw;
+  const fontSize = Number((0, _figmaVariablesResolver.getVariableByName)('counterBadge/fontSize', modes) ?? 8);
+  const lineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('counterBadge/lineHeight', modes) ?? 8);
+  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('counterBadge/padding/horizontal', modes) ?? 4);
+  // The Figma design pins vertical padding to 4px (matching horizontal), but the
+  // committed variables snapshot resolves `counterBadge/padding/vertical` to 5px
+  // (a stale export). Figma is the source of truth here, so hardcode 4px rather
+  // than trust the token, keeping the badge one pixel shorter to match the design.
+  const paddingVertical = 4;
+  const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('counterBadge/radius', modes) ?? 999);
+  const containerStyle = {
+    backgroundColor,
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius,
+    alignSelf: 'flex-start',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...(style || {})
+  };
+  const textStyle = {
+    color: foreground,
+    fontFamily,
+    fontWeight: fontWeight,
+    fontSize,
+    lineHeight,
+    textAlign: 'center'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: containerStyle,
+    ...rest,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: WRAP_STYLE,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: textStyle,
+        children: value
+      })
+    })
+  });
+}
+
+// Figma `wrap` node (data-node-id 7701:10879): min-width 10, centered.
+const WRAP_STYLE = {
+  minWidth: 10,
+  alignItems: 'center',
+  justifyContent: 'center'
+};
+var _default = exports.default = CounterBadge;

package/lib/commonjs/components/FavoriteToggle/FavoriteToggle.js

@@ -0,0 +1,180 @@
+"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 _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _GlassFill = _interopRequireDefault(require("../../utils/GlassFill/GlassFill"));
+var _webPlatformUtils = require("../../utils/web-platform-utils");
+var _reactUtils = require("../../utils/react-utils");
+var _Skeleton = _interopRequireDefault(require("../../skeleton/Skeleton"));
+var _SkeletonGroup = require("../../skeleton/SkeletonGroup");
+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); }
+const IS_WEB = _reactNative.Platform.OS === 'web';
+const IS_IOS = _reactNative.Platform.OS === 'ios';
+const PRESS_DELAY = IS_IOS ? 130 : 0;
+const pressedOverlayStyle = {
+  opacity: 0.7
+};
+// The `favoriteToggle/*` tokens are not yet in the committed variables snapshot,
+// so `getVariableByName` returns undefined and these Figma-node values are used
+// as fallbacks. Once the token export is re-synced the resolver takes over.
+function resolveTokens(modes, isActive) {
+  const width = Number((0, _figmaVariablesResolver.getVariableByName)('favoriteToggle/width', modes) ?? 29);
+  const height = Number((0, _figmaVariablesResolver.getVariableByName)('favoriteToggle/height', modes) ?? 29);
+  const radiusRaw = Number((0, _figmaVariablesResolver.getVariableByName)('favoriteToggle/icon/radius', modes) ?? 9999);
+  const iconSize = Number((0, _figmaVariablesResolver.getVariableByName)('favoriteToggle/icon/width', modes) ?? 20);
+  // 9999 is the design-token sentinel for "perfect circle".
+  const size = Math.max(width, height);
+  const borderRadius = radiusRaw >= 9999 ? size / 2 : radiusRaw;
+
+  // Background + icon color differ per variant. In Figma this is driven by the
+  // `isActive` collection (modes `'False'` / `'True'`), so we pass that mode
+  // through by its string name. Until the `color/favoriteToggle/*` tokens are
+  // exported the resolver returns undefined and the fallbacks below — which
+  // encode the two Figma variants directly — take over.
+  const isActiveMode = {
+    ...modes,
+    isActive: isActive ? 'True' : 'False'
+  };
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('color/favoriteToggle/background/color', isActiveMode) ?? (isActive ? '#ffffff' : '#ffffff33');
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('color/favoriteToggle/icon/color', isActiveMode) ?? (isActive ? '#cea15a' : '#ffffff');
+
+  // Figma `blur/minimal` (px radius) -> GlassFill's 0-100 intensity scale, the
+  // same mapping Badge's glass path uses.
+  const blurRaw = Number((0, _figmaVariablesResolver.getVariableByName)('blur/minimal', modes) ?? 29);
+  const blurIntensity = Math.max(0, Math.min(100, Math.round(blurRaw)));
+  return {
+    size,
+    borderRadius,
+    backgroundColor,
+    iconColor,
+    iconSize,
+    blurIntensity
+  };
+}
+
+/**
+ * Circular glass favorite (heart) toggle, mirroring the Figma `Favorite Toggle`
+ * component set's boolean `isActive` variant:
+ *   - inactive: translucent frosted circle (`#ffffff33` over a `blur/minimal`
+ *     backdrop) with a white heart.
+ *   - active: solid white circle with a gold (`#cea15a`) heart.
+ * Both variants share the identical filled-heart glyph; only the background and
+ * icon colors change between states.
+ *
+ * Controlled or uncontrolled: pass `isActive` (+ `onChange`) to control it, or
+ * omit `isActive` and use `defaultActive` to let the component own the state.
+ *
+ * Visual attributes resolve from the `favoriteToggle/*` / `color/favoriteToggle/*`
+ * tokens via `getVariableByName`. Those tokens are not yet in the committed
+ * variables snapshot, so the component currently runs on the Figma-node values
+ * as fallbacks; once the tokens are exported (under the `isActive` collection,
+ * modes `False`/`True`) the resolver takes over.
+ */
+function FavoriteToggle({
+  isActive: controlledActive,
+  defaultActive = false,
+  icon = 'ic_favorite',
+  onChange,
+  onPress,
+  modes = _reactUtils.EMPTY_MODES,
+  disabled = false,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  webAccessibilityProps,
+  style,
+  loading,
+  ...rest
+}) {
+  // Controlled when `isActive` is supplied; otherwise own the state internally
+  // (mirrors the Toggle / SegmentedControl controlled-or-uncontrolled pattern).
+  const isControlled = controlledActive !== undefined;
+  const [internalActive, setInternalActive] = (0, _react.useState)(defaultActive);
+  const isActive = isControlled ? controlledActive : internalActive;
+  const tokens = (0, _react.useMemo)(() => resolveTokens(modes, isActive), [modes, isActive]);
+  const {
+    active: groupActive
+  } = (0, _SkeletonGroup.useSkeleton)();
+  const isLoading = loading ?? groupActive;
+  const handlePress = (0, _react.useCallback)(() => {
+    const next = !isActive;
+    if (!isControlled) {
+      setInternalActive(next);
+    }
+    onChange?.(next);
+    onPress?.();
+  }, [isActive, isControlled, onChange, onPress]);
+  const label = accessibilityLabel || 'Favorite';
+  const webProps = (0, _webPlatformUtils.usePressableWebSupport)({
+    restProps: rest,
+    onPress: disabled ? undefined : handlePress,
+    disabled,
+    accessibilityLabel: label,
+    webAccessibilityProps
+  });
+  const baseContainerStyle = {
+    width: tokens.size,
+    height: tokens.size,
+    borderRadius: tokens.borderRadius,
+    // Active is opaque white, so no glass is drawn and the background paints
+    // directly. Inactive keeps the container transparent so the GlassFill blur
+    // (clipped by overflow:hidden) shows through.
+    backgroundColor: isActive ? tokens.backgroundColor : 'transparent',
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    opacity: disabled ? 0.5 : 1
+  };
+
+  // Declared before the loading short-circuit so hook order stays stable.
+  const styleCallback = (0, _react.useCallback)(({
+    pressed
+  }) => [baseContainerStyle, style, pressed && !disabled ? pressedOverlayStyle : null], [baseContainerStyle, style, disabled]);
+  if (isLoading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+      kind: "other",
+      width: tokens.size,
+      height: tokens.size,
+      style: [{
+        borderRadius: tokens.borderRadius
+      }, style],
+      modes: modes
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    accessibilityRole: IS_WEB ? 'switch' : 'button',
+    accessibilityLabel: undefined,
+    accessibilityHint: accessibilityHint,
+    accessibilityState: {
+      disabled,
+      checked: isActive,
+      ...accessibilityState
+    },
+    onPress: disabled ? undefined : handlePress,
+    disabled: disabled,
+    unstable_pressDelay: PRESS_DELAY,
+    style: styleCallback,
+    ...webProps,
+    children: [!isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlassFill.default, {
+      tint: "light",
+      intensity: tokens.blurIntensity,
+      overlayColor: tokens.backgroundColor,
+      androidTintWash: false
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: icon,
+      size: tokens.iconSize,
+      color: tokens.iconColor,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    })]
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(FavoriteToggle);