jfs-components 0.1.2 → 0.1.8

package/lib/commonjs/components/CcCard/CcCard.js

@@ -0,0 +1,470 @@
+"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 _reactUtils = require("../../utils/react-utils");
+var _Badge = _interopRequireDefault(require("../Badge/Badge"));
+var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
+var _Image = _interopRequireDefault(require("../Image/Image"));
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+var _Title = _interopRequireDefault(require("../Title/Title"));
+var _ListItem = _interopRequireDefault(require("../ListItem/ListItem"));
+var _TextSegment = _interopRequireDefault(require("../TextSegment/TextSegment"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
+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); }
+/**
+ * A single coloured chip rendered in the card header. Each badge resolves its
+ * own design tokens through `modes`, so different appearances (brand, tonal,
+ * etc.) can sit side-by-side in the same group.
+ */
+
+/**
+ * A single benefit row in the card's list, rendered through the shared
+ * {@link ListItem} primitive (leading icon + title).
+ */
+
+/**
+ * CcCard — Figma node 5434:1992 ("Cc Card").
+ *
+ * A white, rounded credit-card product card composed entirely from the shared
+ * design-system primitives so it stays in sync with the rest of the library:
+ *
+ *  - **Header** — two {@link Badge} groups (a leading group + a right-aligned
+ *    trailing group), e.g. `Pre-qualified` / `Lifetime free`.
+ *  - **Media** — a product `Image` + a {@link Title} (title + subtitle resolved
+ *    through the `context7: Card` mode → 14px/12px).
+ *  - **List** — a column of benefit {@link ListItem}s (`List Item Style:
+ *    Minimal`) with leading icons.
+ *  - **Nudge** — an inline upsell row: an {@link Avatar} + a {@link TextSegment}.
+ *  - **Footer** — a headline + description + subtitle text block alongside a
+ *    small {@link Button} (`Button / Size: S`, `AppearanceBrand: Secondary`).
+ *
+ * The {@link CcCardProps.compact} variant collapses the card to just the
+ * leading avatar slot + the footer text block (no CTA button). All defaults can
+ * be overridden via `modes`.
+ */
+function CcCard({
+  compact = false,
+  showHeader = true,
+  badges = DEFAULT_BADGES,
+  trailingBadges,
+  header,
+  imageSource,
+  imageWidth = 88,
+  imageHeight = 54,
+  title = 'Title',
+  subtitle = 'Subtitle',
+  media,
+  items = DEFAULT_ITEMS,
+  showNudge = true,
+  nudgeSegments = DEFAULT_NUDGE_SEGMENTS,
+  nudgeAvatarSource,
+  nudge,
+  headline = 'Headline',
+  description = 'Description',
+  footerSubtitle = 'Subtitle',
+  footer,
+  buttonLabel = 'Button',
+  onButtonPress,
+  button,
+  showButton = true,
+  onPress,
+  width = 343,
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  const tokens = (0, _react.useMemo)(() => resolveTokens(modes), [modes]);
+
+  // The product title uses the card-sized type ramp (14px bold + 12px
+  // subtitle) via the `context7: Card` mode. Consumer modes still win.
+  const titleModes = (0, _react.useMemo)(() => ({
+    context7: 'Card',
+    ...modes
+  }), [modes]);
+  // List rows use the minimal style (12px / regular, no padding).
+  const listItemModes = (0, _react.useMemo)(() => ({
+    'List Item Style': 'Minimal',
+    ...modes
+  }), [modes]);
+  // The nudge avatar is the smallest size token.
+  const nudgeAvatarModes = (0, _react.useMemo)(() => ({
+    'Avatar Size': 'XS',
+    ...modes
+  }), [modes]);
+  // The CTA is the small, brand-secondary (lilac→purple) button.
+  const ctaModes = (0, _react.useMemo)(() => ({
+    AppearanceBrand: 'Secondary',
+    'Button / Size': 'S',
+    ...modes
+  }), [modes]);
+
+  // ---- Header -----------------------------------------------------------
+  const headerNode = header ? (0, _reactUtils.cloneChildrenWithModes)(header, modes) : showHeader && (badges?.length || trailingBadges?.length) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.header,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BadgeGroup, {
+      badges: badges,
+      modes: modes
+    }), trailingBadges?.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(BadgeGroup, {
+      badges: trailingBadges,
+      modes: modes
+    }) : null]
+  }) : null;
+
+  // ---- Media slot (shared by both compact + non-compact) ----------------
+  // Whatever lives in the slot is rendered identically in both variants; only
+  // the surrounding sections differ. The default is an Image driven by
+  // `imageSource`, but a consumer can pass an Avatar (or any node) via `media`.
+  const mediaSlotContent = media ? (0, _reactUtils.cloneChildrenWithModes)(media, modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+    imageSource: imageSource,
+    width: imageWidth,
+    height: imageHeight,
+    borderRadius: tokens.imageRadius,
+    resizeMode: "cover",
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no"
+  });
+
+  // Non-compact lays the slot out in a row next to the product Title.
+  const mediaRow = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.mediaSlot,
+    children: [mediaSlotContent, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.titleWrap,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Title.default, {
+        title: title,
+        subtitle: subtitle,
+        textAlign: "Left",
+        modes: titleModes,
+        style: styles.titleInner
+      })
+    })]
+  });
+
+  // ---- List -------------------------------------------------------------
+  const listNode = items.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: tokens.listGroup,
+    children: items.map((item, index) => {
+      const leading = item.leading ?? (item.icon !== null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        iconName: item.icon ?? 'ic_card',
+        color: item.iconColor,
+        modes: listItemModes
+      }) : null);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItem.default, {
+        layout: "Horizontal",
+        navArrow: false,
+        showSupportText: false,
+        title: item.title,
+        leading: leading,
+        onPress: item.onPress,
+        modes: listItemModes
+      }, index);
+    })
+  }) : null;
+
+  // ---- Nudge ------------------------------------------------------------
+  const nudgeNode = nudge ? (0, _reactUtils.cloneChildrenWithModes)(nudge, modes) : showNudge ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: tokens.nudge,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+      imageSource: nudgeAvatarSource,
+      modes: nudgeAvatarModes
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.nudgeContent,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextSegment.default, {
+        segments: nudgeSegments,
+        modes: modes
+      })
+    })]
+  }) : null;
+
+  // ---- Footer -----------------------------------------------------------
+  const ctaNode = button ? (0, _reactUtils.cloneChildrenWithModes)(button, ctaModes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+    label: buttonLabel,
+    modes: ctaModes,
+    onPress: onButtonPress
+  });
+  const footerTextBlock = footer ? (0, _reactUtils.cloneChildrenWithModes)(footer, modes) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: tokens.footerTextWrap,
+    children: [headline != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: tokens.headline,
+      children: headline
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: compact ? tokens.titleWrapCompact : tokens.titleWrapDefault,
+      children: [description != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: tokens.footerTitle,
+        children: description
+      }) : null, footerSubtitle != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: tokens.footerSubtitle,
+        children: footerSubtitle
+      }) : null]
+    })]
+  });
+  const footerNode = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: compact ? tokens.footerRowCompact : tokens.footerRowDefault,
+    children: [footerTextBlock, !compact && showButton ? ctaNode : null]
+  });
+
+  // ---- Compose ----------------------------------------------------------
+  const content = compact ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.compactSlot,
+      children: mediaSlotContent
+    }), footerNode]
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [headerNode, mediaRow, listNode, nudgeNode, footerNode]
+  });
+  const containerStyle = (0, _react.useMemo)(() => ({
+    ...tokens.container,
+    width
+  }), [tokens.container, width]);
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: ({
+        pressed
+      }) => [containerStyle, pressed ? styles.pressed : null, style],
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? title,
+      onPress: onPress,
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
+}
+
+// ---------------------------------------------------------------------------
+// BadgeGroup — internal wrapping row of badges
+// ---------------------------------------------------------------------------
+
+function BadgeGroup({
+  badges,
+  modes
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.badgeGroup,
+    children: badges.map((badge, index) => {
+      const badgeModes = badge.modes ? {
+        ...modes,
+        ...badge.modes
+      } : modes;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+        label: badge.label,
+        modes: badgeModes,
+        style: badge.color ? {
+          backgroundColor: badge.color
+        } : undefined,
+        labelStyle: badge.labelColor ? {
+          color: badge.labelColor
+        } : undefined
+      }, index);
+    })
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Tokens / static styles
+// ---------------------------------------------------------------------------
+
+function asNum(raw, fallback) {
+  const n = typeof raw === 'number' ? raw : parseFloat(raw);
+  return Number.isFinite(n) ? n : fallback;
+}
+function asStr(raw, fallback) {
+  return raw != null ? String(raw) : fallback;
+}
+function resolveTokens(modes) {
+  // NOTE: token names are passed as string literals DIRECTLY to
+  // getVariableByName so the `extract-component-tokens` script can statically
+  // collect them for the generated docs. Do not refactor these into a helper
+  // that receives the name as a variable.
+  const background = asStr((0, _figmaVariablesResolver.getVariableByName)('ccCard/bg', modes), '#ffffff');
+  const borderColor = asStr((0, _figmaVariablesResolver.getVariableByName)('ccCard/border/color', modes), '#e3e4e4');
+  const borderWidth = asNum((0, _figmaVariablesResolver.getVariableByName)('ccCard/border/size', modes), 1);
+  const radius = asNum((0, _figmaVariablesResolver.getVariableByName)('ccCard/radius', modes), 12);
+  const paddingHorizontal = asNum((0, _figmaVariablesResolver.getVariableByName)('ccCard/padding/horizontal', modes), 12);
+  const paddingVertical = asNum((0, _figmaVariablesResolver.getVariableByName)('ccCard/padding/vertical', modes), 12);
+  const gap = asNum((0, _figmaVariablesResolver.getVariableByName)('ccCard/padding/gap', modes), 8);
+  const imageRadius = asNum((0, _figmaVariablesResolver.getVariableByName)('image/radius', modes), 0);
+  const listGroupGap = asNum((0, _figmaVariablesResolver.getVariableByName)('listGroup/gap', modes), 4);
+  const nudgeGap = asNum((0, _figmaVariablesResolver.getVariableByName)('nudge/gap', modes), 6);
+  const footerGap = asNum((0, _figmaVariablesResolver.getVariableByName)('ccCard/footer/gap', modes), 8);
+  const textWrapGap = asNum((0, _figmaVariablesResolver.getVariableByName)('ccCard/footer/textWrap/gap', modes), 4);
+  const titleWrapGap = asNum((0, _figmaVariablesResolver.getVariableByName)('ccCard/footer/titleWrap/gap', modes), 8);
+  const headlineColor = asStr((0, _figmaVariablesResolver.getVariableByName)('ccCard/headline/color', modes), '#707275');
+  const headlineSize = asNum((0, _figmaVariablesResolver.getVariableByName)('ccCard/headline/fontSize', modes), 10);
+  const headlineFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('ccCard/headline/fontFamily', modes), 'JioType Var');
+  const headlineLineHeight = asNum((0, _figmaVariablesResolver.getVariableByName)('ccCard/headline/lineHeight', modes), 13);
+  const headlineWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('ccCard/headline/fontWeight', modes), '500');
+  const titleColor = asStr((0, _figmaVariablesResolver.getVariableByName)('ccCard/title/color', modes), '#081007');
+  const titleSize = asNum((0, _figmaVariablesResolver.getVariableByName)('ccCard/title/fontSize', modes), 14);
+  const titleFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('ccCard/title/fontFamily', modes), 'JioType Var');
+  const titleLineHeight = asNum((0, _figmaVariablesResolver.getVariableByName)('ccCard/title/lineHeight', modes), 15);
+  const titleWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('ccCard/title/fontWeight', modes), '700');
+  const subtitleColor = asStr((0, _figmaVariablesResolver.getVariableByName)('ccCard/subtitle/color', modes), '#707275');
+  const subtitleSize = asNum((0, _figmaVariablesResolver.getVariableByName)('ccCard/subtitle/fontSize', modes), 10);
+  const subtitleFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('ccCard/subtitle/fontFamily', modes), 'JioType Var');
+  const subtitleLineHeight = asNum((0, _figmaVariablesResolver.getVariableByName)('ccCard/subtitle/lineHeight', modes), 13);
+  const subtitleWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('ccCard/subtitle/fontWeight', modes), '500');
+  return {
+    container: {
+      backgroundColor: background,
+      borderColor,
+      borderWidth,
+      borderRadius: radius,
+      paddingHorizontal,
+      paddingVertical,
+      gap,
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      overflow: 'hidden'
+    },
+    imageRadius,
+    listGroup: {
+      alignSelf: 'stretch',
+      gap: listGroupGap
+    },
+    nudge: {
+      alignSelf: 'stretch',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: nudgeGap
+    },
+    footerRowDefault: {
+      alignSelf: 'stretch',
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      gap: footerGap
+    },
+    footerRowCompact: {
+      alignSelf: 'stretch',
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    footerTextWrap: {
+      flex: 1,
+      minWidth: 1,
+      alignItems: 'flex-start',
+      gap: textWrapGap
+    },
+    titleWrapDefault: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      gap: textWrapGap
+    },
+    titleWrapCompact: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      gap: titleWrapGap
+    },
+    headline: {
+      color: headlineColor,
+      fontSize: headlineSize,
+      fontFamily: headlineFamily,
+      fontWeight: headlineWeight,
+      lineHeight: Math.max(headlineLineHeight, Math.ceil(headlineSize * 1.2)),
+      includeFontPadding: false
+    },
+    footerTitle: {
+      color: titleColor,
+      fontSize: titleSize,
+      fontFamily: titleFamily,
+      fontWeight: titleWeight,
+      lineHeight: Math.max(titleLineHeight, Math.ceil(titleSize * 1.2)),
+      includeFontPadding: false
+    },
+    footerSubtitle: {
+      color: subtitleColor,
+      fontSize: subtitleSize,
+      fontFamily: subtitleFamily,
+      fontWeight: subtitleWeight,
+      lineHeight: Math.max(subtitleLineHeight, Math.ceil(subtitleSize * 1.2)),
+      includeFontPadding: false
+    }
+  };
+}
+const DEFAULT_BADGES = [{
+  label: 'Pre-qualified',
+  modes: {
+    AppearanceBrand: 'Tertiary'
+  },
+  labelColor: '#ffffff'
+}, {
+  label: 'Lifetime free',
+  modes: {
+    AppearanceBrand: 'Tertiary'
+  },
+  labelColor: '#ffffff'
+}];
+const DEFAULT_ITEMS = [{
+  icon: 'ic_card',
+  title: '4 domestic + 2 intl. lounge access yearly'
+}, {
+  icon: 'ic_card',
+  title: '5% cashback on dining & travel'
+}, {
+  icon: 'ic_card',
+  title: 'No annual fee for the first year'
+}];
+const DEFAULT_NUDGE_SEGMENTS = [{
+  text: 'Upsell message '
+}, {
+  text: 'JioFinance+',
+  modes: {
+    'Text Appearance': 'Primary'
+  }
+}];
+const styles = _reactNative.StyleSheet.create({
+  header: {
+    alignSelf: 'stretch',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    gap: 8
+  },
+  badgeGroup: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: 4,
+    flexShrink: 1
+  },
+  mediaSlot: {
+    alignSelf: 'stretch',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8
+  },
+  titleWrap: {
+    flex: 1,
+    minWidth: 1
+  },
+  // The shared Title falls back to 16/8 padding when its tokens resolve to 0
+  // (0 is falsy). Zero it out so the only horizontal gap to the media slot is
+  // the mediaSlot's hard-coded 8px.
+  titleInner: {
+    paddingHorizontal: 0,
+    paddingVertical: 0
+  },
+  // Compact media wrapper hugs its child so the slot sizes to the avatar /
+  // image's intrinsic dimensions instead of stretching to the card width.
+  compactSlot: {
+    alignSelf: 'flex-start'
+  },
+  nudgeContent: {
+    flex: 1,
+    minWidth: 1
+  },
+  pressed: {
+    opacity: 0.92
+  }
+});
+var _default = exports.default = CcCard;

package/lib/commonjs/components/Checkbox/Checkbox.js

@@ -83,7 +83,7 @@ function invisibleTouchHitSlop(checkboxSize) {
  * @component
  * @param {CheckboxProps} props
  */
-function Checkbox({
+const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox({
   checked: controlledChecked,
   defaultChecked = false,
   onValueChange,
@@ -91,7 +91,7 @@ function Checkbox({
   modes = _reactUtils.EMPTY_MODES,
   style,
   accessibilityLabel
-}) {
+}, ref) {
   const isControlled = controlledChecked !== undefined;
   const [internalChecked, setInternalChecked] = (0, _react.useState)(defaultChecked);
   const isChecked = isControlled ? controlledChecked : internalChecked;
@@ -199,6 +199,7 @@ function Checkbox({
   const markColor = disabled && isChecked ? disabledActiveMark : selectedMarkColor;
   const hitSlop = invisibleTouchHitSlop(size);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    ref: ref,
     style: [touchTargetStyle, style],
     hitSlop: hitSlop,
     onPress: handlePress,
@@ -226,7 +227,7 @@ function Checkbox({
       })
     })
   });
-}
+});
 function boxShadow(value) {
   if (_reactNative.Platform.OS === 'web') {
     return {

package/lib/commonjs/components/CheckboxItem/CheckboxItem.js

@@ -39,7 +39,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * />
  * ```
  */
-function CheckboxItem({
+const CheckboxItem = /*#__PURE__*/(0, _react.forwardRef)(function CheckboxItem({
   checked: controlledChecked,
   defaultChecked = false,
   onValueChange,
@@ -52,7 +52,7 @@ function CheckboxItem({
   style,
   labelStyle,
   accessibilityLabel
-}) {
+}, ref) {
   const isTrailing = control === 'trailing';
   const isControlled = controlledChecked !== undefined;
   const [internalChecked, setInternalChecked] = (0, _react.useState)(defaultChecked);
@@ -121,6 +121,7 @@ function CheckboxItem({
     children: (0, _reactUtils.cloneChildrenWithModes)(endSlot, modes)
   }) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    ref: ref,
     style: [containerStyle, style],
     onPress: handleToggle,
     disabled: disabled,
@@ -136,5 +137,5 @@ function CheckboxItem({
       children: [checkboxNode, labelNode, endSlotNode]
     })
   });
-}
+});
 var _default = exports.default = CheckboxItem;