jfs-components 0.0.78 → 0.0.84

package/lib/commonjs/components/ListItem/ListItem.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
-var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
 var _NavArrow = _interopRequireDefault(require("../NavArrow/NavArrow"));
 var _webPlatformUtils = require("../../utils/web-platform-utils");
 var _reactUtils = require("../../utils/react-utils");
@@ -21,9 +20,10 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 const IS_IOS = _reactNative.Platform.OS === 'ios';
 const PRESS_DELAY = IS_IOS ? 130 : 0;
 
-// Forced modes for the endSlot — `Context: 'ListItem'` can never be
-// overridden by external modes. Frozen so identity is stable across renders.
-const END_SLOT_FORCED_MODES = Object.freeze({
+// Forced modes for the leading/trailing slots — `Context: 'ListItem'` can
+// never be overridden by external modes. Frozen so identity is stable across
+// renders. Applied to both slots so they cascade modes identically.
+const SLOT_FORCED_MODES = Object.freeze({
   Context: 'ListItem'
 });
 
@@ -38,7 +38,7 @@ const pressedOverlayStyle = {
 // ---------------------------------------------------------------------------
 
 function resolveListItemTokens(modes) {
-  // Modes used to cascade into slot children (leading / supportSlot / endSlot).
+  // Modes used to cascade into slot children (leading / supportSlot / trailing).
   // We do NOT inject an `AppearanceBrand` default here: slot content such as
   // Buttons or Badges carry their own intended appearance, so forcing one onto
   // them would be surprising.
@@ -137,9 +137,11 @@ const verticalSupportTextOverride = {
  *  - **design-token driven styling** via `getVariableByName` and `modes`
  *
  * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
+ * dedicated React "slot" prop. The leading and trailing edges share a
+ * symmetric `leading` / `trailing` slot API:
+ *  - Slot "leading" → `leading`
  *  - Slot "support text" → `supportSlot`
- *  - Slot "end" → `endSlot`
+ *  - Slot "trailing" → `trailing`
  *
  * @component
  * @param {Object} props
@@ -147,9 +149,9 @@ const verticalSupportTextOverride = {
  * @param {string} [props.title='Title'] - Primary title used in the horizontal layout.
  * @param {string} [props.supportText='Support Text'] - Support text used in both layouts when `supportSlot` is not provided.
  * @param {boolean} [props.showSupportText=true] - Toggles rendering of the support text in Horizontal layout.
- * @param {React.ReactNode} [props.leading] - Optional leading element. Defaults to `IconCapsule`.
+ * @param {React.ReactNode|null} [props.leading] - Optional leading slot. Omitted or `null` renders nothing.
  * @param {React.ReactNode} [props.supportSlot] - Optional custom slot used instead of the default support text block.
- * @param {React.ReactNode} [props.endSlot] - Optional custom trailing slot (Figma Slot "end").
+ * @param {React.ReactNode} [props.trailing] - Optional trailing slot (Figma Slot "trailing"). Horizontal layout only.
  * @param {boolean} [props.navArrow=true] - Whether to show NavArrow on the far right (Horizontal layout only).
  * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens.
  * @param {Function} [props.onPress] - When provided, the entire item becomes pressable (navigation variant).
@@ -178,6 +180,7 @@ function ListItemImpl({
   showSupportText = true,
   leading,
   supportSlot,
+  trailing,
   endSlot,
   navArrow = true,
   modes = _reactUtils.EMPTY_MODES,
@@ -215,13 +218,9 @@ function ListItemImpl({
   // Process leading slot to pass modes to children. Memoized on
   // (leading, resolvedModes) so a parent re-render doesn't re-walk the tree.
   const leadingElement = (0, _react.useMemo)(() => {
-    const processed = leading ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(leading), tokens.resolvedModes) : [];
-    if (processed.length === 0) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
-        modes: tokens.resolvedModes,
-        accessibilityLabel: undefined
-      });
-    }
+    if (leading == null) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(leading), tokens.resolvedModes, SLOT_FORCED_MODES);
+    if (processed.length === 0) return null;
     return processed.length === 1 ? processed[0] : processed;
   }, [leading, tokens.resolvedModes]);
   const processedSupportSlot = (0, _react.useMemo)(() => {
@@ -229,11 +228,14 @@ function ListItemImpl({
     const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(supportSlot), tokens.resolvedModes);
     return processed.length === 1 ? processed[0] : processed;
   }, [supportSlot, tokens.resolvedModes]);
-  const processedEndSlot = (0, _react.useMemo)(() => {
-    if (!endSlot) return null;
-    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(endSlot), tokens.resolvedModes, END_SLOT_FORCED_MODES);
+
+  // `trailing` wins; `endSlot` is the deprecated alias kept for back-compat.
+  const trailingContent = trailing ?? endSlot;
+  const processedTrailing = (0, _react.useMemo)(() => {
+    if (!trailingContent) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(trailingContent), tokens.resolvedModes, SLOT_FORCED_MODES);
     return processed.length === 1 ? processed[0] : processed;
-  }, [endSlot, tokens.resolvedModes]);
+  }, [trailingContent, tokens.resolvedModes]);
   const renderSupportContent = () => {
     if (processedSupportSlot) return processedSupportSlot;
 
@@ -268,7 +270,7 @@ function ListItemImpl({
   if (layout === 'Horizontal') {
     const innerContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: innerContentStyleArray,
-      children: [leadingElement, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      children: [leadingElement ?? null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: {
           flex: 1,
           minWidth: 1,
@@ -279,9 +281,9 @@ function ListItemImpl({
           numberOfLines: 1,
           children: title
         }), showSupportText && renderSupportContent()]
-      }), processedEndSlot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      }), processedTrailing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: tokens.trailingWrapperStyle,
-        children: processedEndSlot
+        children: processedTrailing
       }) : null, navArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavArrow.default, {
         direction: "Forward",
         modes: tokens.resolvedModes
@@ -315,7 +317,7 @@ function ListItemImpl({
   // Vertical layout — icon on top, support text/slot below
   const verticalContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: verticalContentStyleArray,
-    children: [leadingElement, renderSupportContent()]
+    children: [leadingElement ?? null, renderSupportContent()]
   });
   if (onPress) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {

package/lib/commonjs/components/MessageField/MessageField.js

@@ -145,15 +145,6 @@ function MessageField({
   const currentValue = isControlled ? value : uncontrolledValue;
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const interactive = !isDisabled && !isReadOnly;
-
-  // Ref to the native textarea so tapping anywhere in the (padded) textarea
-  // container focuses it on the FIRST tap, fixing the Android "two taps to
-  // open the keyboard" issue.
-  const inputRef = (0, _react.useRef)(null);
-  const focusInput = (0, _react.useCallback)(() => {
-    if (!interactive) return;
-    inputRef.current?.focus();
-  }, [interactive]);
   const {
     modes: globalModes
   } = (0, _JFSThemeProvider.useTokens)();
@@ -288,12 +279,9 @@ function MessageField({
         style: requiredIndicatorStyle,
         children: " *"
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [textareaContainerStyle, textareaStyle],
-      onPress: focusInput,
-      accessible: false,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-        ref: inputRef,
         multiline: true,
         value: currentValue,
         onChangeText: handleChangeText,

package/lib/commonjs/components/PaymentFeedback/PaymentFeedback.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = PaymentFeedback;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
@@ -12,11 +12,10 @@ var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"))
 var _reactUtils = require("../../utils/react-utils");
 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); }
 function PaymentFeedback({
   title = '₹50,000',
   subtitle = 'Payment successful',
-  body = 'Your payment has been\nsuccessfully processed.',
+  body,
   details = '18 March 2025, 4:15 pm\nTransaction ID: TXN121466784',
   showDetails = true,
   iconName = 'ic_confirm',
@@ -103,17 +102,21 @@ function PaymentFeedback({
     fontWeight: String(detailsFontWeight),
     textAlign: 'center'
   };
-  const mediaContent = /*#__PURE__*/(0, _react.isValidElement)(renderMedia) ? /*#__PURE__*/(0, _react.cloneElement)(renderMedia, {
-    modes
-  }) : renderMedia;
+
+  // Cascade modes into a custom media slot (per the modes-cascade convention);
+  // any modes the consumer set on the slot child still take precedence.
+  const mediaContent = renderMedia != null ? (0, _reactUtils.cloneChildrenWithModes)(renderMedia, modes) : null;
   const defaultMedia = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
-    iconName: iconName,
+    iconName: iconName
+    // `positive` is the default; consumers override the capsule color by
+    // passing `AppearanceSystem` (or any other mode) via the `modes` prop.
+    ,
     modes: {
+      AppearanceSystem: 'positive',
       ...modes,
       'Icon Capsule Size': 'L',
       Emphasis: 'High',
-      'Semantic Intent': 'System',
-      AppearanceSystem: 'positive'
+      'Semantic Intent': 'System'
     }
   });
   const detailLines = details?.split('\n') ?? [];

package/lib/commonjs/components/PlanComparisonCard/PlanComparisonCard.js

@@ -0,0 +1,237 @@
+"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 _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** Figma grid: label column 1.8fr, each plan column 1fr. */const LABEL_COLUMN_FR = 1.8;
+const PLAN_COLUMN_FR = 1;
+
+/**
+ * A single plan column header (the label column has no header of its own).
+ */
+
+/**
+ * Value rendered inside a plan cell.
+ * - `string` / `number` → rendered as value text.
+ * - `false` → renders the muted "not available" cross icon.
+ * - any React node → rendered as-is (e.g. a `Badge`, `MoneyValue`, icon…).
+ * - `null` / `undefined` / `true` → empty cell.
+ */
+
+const DEFAULT_COLUMNS = [{
+  label: 'Your plan'
+}, {
+  label: 'JioFinance+',
+  brand: true
+}];
+const DEFAULT_ROWS = [{
+  label: 'JioPoints multiplier',
+  values: ['1x', '1.25x']
+}, {
+  label: 'Cashback',
+  showInfo: true,
+  values: [false, 'Upto ₹5000']
+}, {
+  label: 'Bonus JioGold',
+  showInfo: true,
+  values: [false, '1%']
+}];
+
+/** Keeps every text layer on a single line. */
+const NO_WRAP_TEXT = {
+  flexShrink: 0,
+  ...(_reactNative.Platform.OS === 'web' ? {
+    whiteSpace: 'nowrap'
+  } : {})
+};
+const labelColumnStyle = {
+  flex: LABEL_COLUMN_FR,
+  minWidth: 0
+};
+const planColumnStyle = {
+  flex: PLAN_COLUMN_FR,
+  minWidth: 0,
+  alignItems: 'center'
+};
+
+/**
+ * PlanComparisonCard renders a compact comparison table that pits the user's
+ * current plan against one or more alternative plans across a set of feature
+ * rows. Implementation of Figma node `4498:2968` (`PlanComparisonCard`).
+ *
+ * Columns use a 1.8fr / 1fr flex ratio (label vs plan), matching the Figma grid.
+ *
+ * @component
+ */
+function PlanComparisonCard({
+  columns = DEFAULT_COLUMNS,
+  rows = DEFAULT_ROWS,
+  modes = _reactUtils.EMPTY_MODES,
+  style
+}) {
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/gap', modes) ?? 16;
+  const headerFg = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/header/fg', modes) ?? '#ffffff';
+  const headerBrandFg = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/header/brand/fg', modes) ?? '#cea15a';
+  const headerFontSize = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/header/fontSize', modes) ?? 14;
+  const headerFontFamily = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/header/fontFamily', modes) ?? 'JioType Var';
+  const headerLineHeight = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/header/lineHeight', modes) ?? 18;
+  const headerFontWeight = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/header/fontWeight', modes) ?? '500';
+  const tableBackground = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableRow/background', modes) ?? '#141414';
+  const tableRadius = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableRow/radius', modes) ?? 16;
+  const tableBorderSize = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableRow/border/size', modes) ?? 1;
+  const tableBorderColor = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableRow/border/color', modes) ?? '#1e1a14';
+  const cellPadding = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/padding', modes) ?? 12;
+  const cellGap = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/gap', modes) ?? 2;
+  const cellMinHeight = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/height', modes) ?? 46;
+  const cellBorderSize = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/border/size', modes) ?? 1;
+  const cellBorderColor = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/border/color', modes) ?? '#1e1a14';
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/label/color', modes) ?? '#ffffff';
+  const labelDisabledColor = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/label/disabled/color', modes) ?? '#91949c';
+  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/label/fontSize', modes) ?? 12;
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/label/fontFamily', modes) ?? 'JioType Var';
+  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/label/lineHeight', modes) ?? 16;
+  const labelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/label/fontWeight', modes) ?? '400';
+  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/value/color', modes) ?? '#ffffff';
+  const valueFontSize = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/value/fontSize', modes) ?? 12;
+  const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/value/fontFamily', modes) ?? 'JioType Var';
+  const valueLineHeight = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/value/lineHeight', modes) ?? 16;
+  const valueFontWeight = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/value/fontWeight', modes) ?? '500';
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/icon/color', modes) ?? '#ffffff';
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/icon/size', modes) ?? 16;
+  const toWeight = w => typeof w === 'number' ? `${w}` : w;
+  const headerTextStyle = {
+    ...NO_WRAP_TEXT,
+    fontFamily: headerFontFamily,
+    fontSize: headerFontSize,
+    lineHeight: headerLineHeight,
+    fontWeight: toWeight(headerFontWeight),
+    textAlign: 'center'
+  };
+  const labelTextStyle = {
+    ...NO_WRAP_TEXT,
+    color: labelColor,
+    fontFamily: labelFontFamily,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    fontWeight: toWeight(labelFontWeight)
+  };
+  const valueTextStyle = {
+    ...NO_WRAP_TEXT,
+    color: valueColor,
+    fontFamily: valueFontFamily,
+    fontSize: valueFontSize,
+    lineHeight: valueLineHeight,
+    fontWeight: toWeight(valueFontWeight),
+    textAlign: 'center'
+  };
+  const rowStyle = {
+    flexDirection: 'row',
+    width: '100%'
+  };
+  const labelCellStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: cellGap,
+    padding: cellPadding,
+    minHeight: cellMinHeight
+  };
+  const valueCellStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: cellPadding,
+    minHeight: cellMinHeight,
+    width: '100%'
+  };
+  const renderValue = (value, cellKey) => {
+    if (value === false) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        name: "ic_close",
+        size: iconSize,
+        color: labelDisabledColor
+      }, cellKey);
+    }
+    if (value === null || value === undefined || value === true) {
+      return null;
+    }
+    if (typeof value === 'string' || typeof value === 'number') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: valueTextStyle,
+        children: value
+      }, cellKey);
+    }
+    return (0, _reactUtils.cloneChildrenWithModes)(value, modes);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      gap,
+      width: '100%'
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: rowStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: labelColumnStyle
+      }), columns.map((column, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: planColumnStyle,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [headerTextStyle, {
+            color: column.brand ? headerBrandFg : headerFg
+          }],
+          children: column.label
+        })
+      }, column.label ?? index))]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        width: '100%',
+        backgroundColor: tableBackground,
+        borderWidth: tableBorderSize,
+        borderColor: tableBorderColor,
+        borderRadius: tableRadius,
+        overflow: 'hidden'
+      },
+      children: rows.map((row, rowIndex) => {
+        const isLast = rowIndex === rows.length - 1;
+        const showInfo = row.showInfo || row.onInfoPress != null;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [rowStyle, {
+            borderBottomWidth: isLast ? 0 : cellBorderSize,
+            borderBottomColor: cellBorderColor
+          }],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: [labelColumnStyle, labelCellStyle],
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: labelTextStyle,
+              children: row.label
+            }), showInfo && (row.onInfoPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+              onPress: row.onInfoPress,
+              accessibilityRole: "button",
+              accessibilityLabel: `More information about ${row.label}`,
+              hitSlop: 8,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+                name: "ic_info",
+                size: iconSize,
+                color: iconColor
+              })
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+              name: "ic_info",
+              size: iconSize,
+              color: iconColor
+            }))]
+          }), columns.map((column, colIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [planColumnStyle, valueCellStyle],
+            children: renderValue(row.values?.[colIndex], `${rowIndex}-${colIndex}`)
+          }, column.label ?? colIndex))]
+        }, row.key ?? `${row.label}-${rowIndex}`);
+      })
+    })]
+  });
+}
+var _default = exports.default = PlanComparisonCard;

package/lib/commonjs/components/Slot/Slot.js

@@ -0,0 +1,73 @@
+"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 _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+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); }
+/**
+ * Slot — a token-driven layout container for grouped slot content.
+ *
+ * Use `Slot` instead of a raw `View` when you need a vertical or horizontal
+ * stack with design-token gap spacing and automatic `modes` propagation to
+ * children. Typical usage is nesting a column of actions inside a
+ * direction-locked parent such as `ActionFooter`:
+ *
+ * @example
+ * ```tsx
+ * <ActionFooter modes={modes}>
+ *   <Slot layoutDirection="vertical" modes={modes}>
+ *     <Button label="Continue" modes={primaryModes} />
+ *     <Disclaimer disclaimer="Terms apply." modes={modes} />
+ *   </Slot>
+ * </ActionFooter>
+ * ```
+ */
+function Slot({
+  children,
+  layoutDirection = 'vertical',
+  alignCrossAxis,
+  justifyMainAxis,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const {
+    containerStyle,
+    processedChildren
+  } = (0, _react.useMemo)(() => {
+    const gap = (0, _figmaVariablesResolver.getVariableByName)('slot/gap', modes) ?? 8;
+    const isHorizontal = layoutDirection === 'horizontal';
+    const container = {
+      flexDirection: isHorizontal ? 'row' : 'column',
+      alignItems: alignCrossAxis ?? (isHorizontal ? 'flex-start' : 'stretch'),
+      justifyContent: justifyMainAxis ?? (isHorizontal ? 'center' : undefined),
+      alignSelf: 'stretch',
+      gap
+    };
+    const processed = children ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : null;
+    return {
+      containerStyle: container,
+      processedChildren: processed
+    };
+  }, [children, modes, layoutDirection, alignCrossAxis, justifyMainAxis]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    ...rest,
+    children: processedChildren
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(Slot);