jfs-components 0.1.51 → 0.1.54

package/lib/module/components/Button/Button.js

@@ -5,10 +5,18 @@ import { Platform, Pressable, Text, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
 import { EMPTY_MODES } from '../../utils/react-utils';
+import GlassFill from '../../utils/GlassFill/GlassFill';
 import Icon from '../../icons/Icon';
 import Skeleton from '../../skeleton/Skeleton';
 import { useSkeleton } from '../../skeleton/SkeletonGroup';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+/**
+ * Figma `Type` property on Button.
+ * - `'default'` — solid token-colored pill (hugs content)
+ * - `'glass'` — frosted translucent pill backed by {@link GlassFill}
+ * - `'fixed'` — solid pill constrained by `button/maxWidth`
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // ---------------------------------------------------------------------------
 // Module-scope constants — never re-allocated per render.
 // ---------------------------------------------------------------------------
@@ -52,28 +60,79 @@ const NO_WRAP_LABEL_STYLE = {
 // the most common path (no modes prop) is resolved once for the whole app.
 // ---------------------------------------------------------------------------
 
-function resolveButtonTokens(modes, disabled) {
-  const backgroundColor = getVariableByName('button/background', modes);
-  const borderColor = getVariableByName('button/border/color', modes);
-  const borderWidth = getVariableByName('button/border/size', modes);
-  const radius = getVariableByName('button/radius', modes);
-  const paddingHorizontal = getVariableByName('button/padding/horizontal', modes);
-  const paddingVertical = getVariableByName('button/padding/vertical', modes);
-  const gap = getVariableByName('button/gap', modes);
-  const fontFamily = getVariableByName('button/fontFamily', modes);
-  const fontWeightValue = getVariableByName('button/fontWeight', modes);
-  const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue;
-  const lineHeight = getVariableByName('button/lineHeight', modes);
-  const fontSize = getVariableByName('button/fontSize', modes);
-  const textColor = getVariableByName('button/foreground', modes);
-  const iconSize = getVariableByName('button/icon/size', modes) ?? 18;
+const BUTTON_STATE_VALUES = new Set(['Idle', 'Hover', 'Pressed', 'Disabled']);
+const SOLID_STATE_COLLECTION = 'Button / State';
+const GLASS_STATE_COLLECTION = 'Button Glass State';
+function resolveIsGlass(type, modes) {
+  return type === 'glass' || modes['Button type'] === 'glass';
+}
 
-  // Pressed tokens are always resolved so the Pressable `style` callback can
-  // apply the pressed visual without scheduling a React render.
-  const pressedModes = {
-    ...modes,
-    'Button / State': 'Pressed'
+/**
+ * Pick Idle/Hover/Pressed/Disabled from the active state collection, falling
+ * back to the sibling collection when callers pass the other key (e.g. glass
+ * buttons that still send `Button / State`). Never treats a collection name
+ * as a mode value.
+ */
+function pickButtonInteractiveState(modes, isGlass) {
+  const primary = isGlass ? GLASS_STATE_COLLECTION : SOLID_STATE_COLLECTION;
+  const sibling = isGlass ? SOLID_STATE_COLLECTION : GLASS_STATE_COLLECTION;
+  const candidate = modes[primary] ?? modes[sibling];
+  if (typeof candidate === 'string' && BUTTON_STATE_VALUES.has(candidate)) {
+    return candidate;
+  }
+  return 'Idle';
+}
+
+/** Write a valid interactive state onto the correct collection for glass/solid. */
+function withButtonInteractiveState(modes, isGlass, state) {
+  const collection = isGlass ? GLASS_STATE_COLLECTION : SOLID_STATE_COLLECTION;
+  const sibling = isGlass ? SOLID_STATE_COLLECTION : GLASS_STATE_COLLECTION;
+  const {
+    [sibling]: _dropSibling,
+    ...rest
+  } = modes;
+  return {
+    ...rest,
+    [collection]: state
   };
+}
+function resolveButtonTokens(modes, disabled, type) {
+  const isGlass = resolveIsGlass(type, modes);
+  const isFixed = type === 'fixed';
+
+  // Inject the Button type mode so token aliases (background/foreground) resolve
+  // to the glass palette. Callers can also drive glass solely via modes.
+  const effectiveModes = isGlass ? {
+    ...modes,
+    'Button type': 'glass'
+  } : modes;
+
+  // Glass interactive states live on `Button Glass State`; solid on `Button / State`.
+  // Map Idle/Hover/Pressed/Disabled values through — never assign a collection name.
+  const idleState = disabled && isGlass ? 'Disabled' : pickButtonInteractiveState(effectiveModes, isGlass);
+  const idleModes = withButtonInteractiveState(effectiveModes, isGlass, idleState);
+  const backgroundColor = getVariableByName('button/background', idleModes);
+  const borderColor = getVariableByName('button/border/color', idleModes);
+  const borderWidth = getVariableByName('button/border/size', idleModes);
+  const radius = getVariableByName('button/radius', idleModes);
+  const paddingHorizontal = getVariableByName('button/padding/horizontal', idleModes);
+  const paddingVertical = getVariableByName('button/padding/vertical', idleModes);
+  const gap = getVariableByName('button/gap', idleModes);
+  const maxWidth = getVariableByName('button/maxWidth', idleModes);
+  const fontFamily = getVariableByName('button/fontFamily', idleModes);
+  const fontWeightValue = getVariableByName('button/fontWeight', idleModes);
+  const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue;
+  const lineHeight = getVariableByName('button/lineHeight', idleModes);
+  const fontSize = getVariableByName('button/fontSize', idleModes);
+  const textColor = getVariableByName('button/foreground', idleModes);
+  const iconSize = getVariableByName('button/icon/size', idleModes) ?? 18;
+
+  // Figma `blur/minimal` (px radius) -> GlassFill's 0–100 intensity scale.
+  const glassBlurIntensity = Math.max(0, Math.min(100, Math.round(Number(getVariableByName('blur/minimal', idleModes) ?? 29))));
+
+  // Pressed tokens are always resolved so the Pressable `style` callback /
+  // glass overlay can apply the pressed visual without a modes recompute.
+  const pressedModes = withButtonInteractiveState(effectiveModes, isGlass, 'Pressed');
   const pressedBg = getVariableByName('button/background', pressedModes);
   const pressedBorderColor = getVariableByName('button/border/color', pressedModes);
   const pressedTextColor = getVariableByName('button/foreground', pressedModes);
@@ -82,20 +141,22 @@ function resolveButtonTokens(modes, disabled) {
   // ~3 token lookups + an object spread per render on every Button.
   let hoverContainer = null;
   let hoverTextColor = null;
+  let glassOverlayHover = null;
   if (IS_WEB) {
-    const hoverModes = {
-      ...modes,
-      'Button / State': 'Hover'
-    };
+    const hoverModes = withButtonInteractiveState(effectiveModes, isGlass, 'Hover');
     const hoverBg = getVariableByName('button/background', hoverModes);
     const hoverBorderColor = getVariableByName('button/border/color', hoverModes);
     hoverTextColor = getVariableByName('button/foreground', hoverModes);
-    hoverContainer = {
+    glassOverlayHover = hoverBg;
+    // Glass keeps the host transparent; hover only retints the GlassFill overlay.
+    hoverContainer = isGlass ? null : {
       backgroundColor: hoverBg,
       borderColor: hoverBorderColor
     };
   }
   return {
+    isGlass,
+    isFixed,
     container: {
       ...containerLayoutStyle,
       paddingHorizontal: paddingHorizontal,
@@ -103,9 +164,18 @@ function resolveButtonTokens(modes, disabled) {
       borderRadius: radius,
       borderWidth: borderWidth ?? 1,
       borderColor: borderColor,
-      backgroundColor: backgroundColor,
+      // Glass: transparent host so GlassFill shows through. Fixed: clamp width.
+      backgroundColor: isGlass ? 'transparent' : backgroundColor,
       gap: gap,
-      opacity: disabled ? 0.5 : 1
+      // Glass disabled uses Button Glass State=Disabled foreground tokens —
+      // don't also apply the solid-button opacity fade.
+      opacity: disabled && !isGlass ? 0.5 : 1,
+      ...(isGlass ? {
+        overflow: 'hidden'
+      } : null),
+      ...(isFixed && maxWidth != null ? {
+        maxWidth: maxWidth
+      } : null)
     },
     baseLabel: {
       color: textColor,
@@ -115,7 +185,7 @@ function resolveButtonTokens(modes, disabled) {
       lineHeight: lineHeight
     },
     hoverContainer,
-    pressedContainer: {
+    pressedContainer: isGlass ? {} : {
       backgroundColor: pressedBg,
       borderColor: pressedBorderColor
     },
@@ -125,7 +195,11 @@ function resolveButtonTokens(modes, disabled) {
     hoverIconColor: hoverTextColor,
     pressedIconColor: pressedTextColor,
     iconSize,
-    accessoryOffset: gap / 2
+    accessoryOffset: gap / 2,
+    glassOverlayIdle: backgroundColor,
+    glassOverlayHover,
+    glassOverlayPressed: pressedBg,
+    glassBlurIntensity
   };
 }
 
@@ -171,6 +245,9 @@ function ButtonImpl({
   leading,
   trailing,
   icon,
+  type = 'default',
+  glassOverlayColor,
+  glassIntensity,
   modes = EMPTY_MODES,
   onPress,
   disabled = false,
@@ -195,7 +272,7 @@ function ButtonImpl({
   userHandlersRef.current.onPressOut = rest?.onPressOut;
   userHandlersRef.current.onHoverIn = rest?.onHoverIn;
   userHandlersRef.current.onHoverOut = rest?.onHoverOut;
-  const tokens = useMemo(() => resolveButtonTokens(modes, disabled), [modes, disabled]);
+  const tokens = useMemo(() => resolveButtonTokens(modes, disabled, type), [modes, disabled, type]);
 
   // Skeleton context — read unconditionally so React's hook order stays
   // stable. The actual short-circuit return happens AFTER all remaining
@@ -309,7 +386,25 @@ function ButtonImpl({
       modes: modes
     });
   }
-  return /*#__PURE__*/_jsxs(Pressable, {
+  const body = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [leading ? /*#__PURE__*/_jsx(View, {
+      style: leadingAccessoryStyle,
+      children: leading
+    }) : null, content, icon ? /*#__PURE__*/_jsx(View, {
+      style: trailingAccessoryStyle,
+      children: /*#__PURE__*/_jsx(Icon, {
+        name: icon,
+        size: tokens.iconSize,
+        color: activeIconColor,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      })
+    }) : trailing ? /*#__PURE__*/_jsx(View, {
+      style: trailingAccessoryStyle,
+      children: trailing
+    }) : null]
+  });
+  return /*#__PURE__*/_jsx(Pressable, {
     accessibilityRole: "button",
     accessibilityLabel: undefined,
     ...(accessibilityHint !== undefined ? {
@@ -330,22 +425,19 @@ function ButtonImpl({
     unstable_pressDelay: PRESS_DELAY,
     style: styleCallback,
     ...webProps,
-    children: [leading ? /*#__PURE__*/_jsx(View, {
-      style: leadingAccessoryStyle,
-      children: leading
-    }) : null, content, icon ? /*#__PURE__*/_jsx(View, {
-      style: trailingAccessoryStyle,
-      children: /*#__PURE__*/_jsx(Icon, {
-        name: icon,
-        size: tokens.iconSize,
-        color: activeIconColor,
-        accessibilityElementsHidden: true,
-        importantForAccessibility: "no"
-      })
-    }) : trailing ? /*#__PURE__*/_jsx(View, {
-      style: trailingAccessoryStyle,
-      children: trailing
-    }) : null]
+    children: tokens.isGlass ? ({
+      pressed
+    }) => {
+      const overlayColor = glassOverlayColor ?? (pressed && !disabled ? tokens.glassOverlayPressed : isHovered && !disabled && tokens.glassOverlayHover ? tokens.glassOverlayHover : tokens.glassOverlayIdle);
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(GlassFill, {
+          tint: "light",
+          intensity: glassIntensity ?? tokens.glassBlurIntensity,
+          overlayColor: overlayColor,
+          androidTintWash: false
+        }), body]
+      });
+    } : body
   });
 }
 const Button = /*#__PURE__*/React.memo(ButtonImpl);

package/lib/module/components/ButtonGroup/ButtonGroup.js

@@ -17,7 +17,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @component
  * @example
  * ```jsx
- * <ButtonGroup modes={{"Appearance": "light"}}>
+ * <ButtonGroup modes={{"Color Mode": "Light"}}>
  *   <IconButton iconName="ic_qr_code" />
  *   <Button label="Pay" />
  * </ButtonGroup>

package/lib/module/components/Card/Card.js

@@ -1,122 +1,165 @@
 "use strict";
 
-import React, { createContext, useContext, isValidElement, cloneElement } from 'react';
+import React, { createContext, useContext, useMemo } from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Context to share 'modes' with child components like Card.Title and Card.SupportText.
- * This ensures that nested components can resolve their tokens correctly without 
- * needing explicit mode prop passing for every child.
+ * Context so `Card.Title` / `Card.SupportText` resolve tokens from the parent
+ * card's `modes` without every call site having to pass them explicitly.
  */
-const CardContext = /*#__PURE__*/createContext({});
+const CardContext = /*#__PURE__*/createContext({
+  modes: EMPTY_MODES
+});
+
+/** Canonical variant values. Maps 1:1 to Figma `Property 1`. */
+
+/**
+ * Accepts both the canonical lowercase API and Figma's PascalCase property
+ * values so Code Connect / design tooling can pass either.
+ */
+
+const normalizeVariant = value => {
+  if (value === 'slim' || value === 'Slim') return 'slim';
+  return 'default';
+};
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') return String(value);
+  if (typeof value === 'string' && value.length > 0) {
+    return value;
+  }
+  return fallback;
+};
+
+/**
+ * Figma `Ratio` default for the media slot (node 766:6258) — 154×116.
+ * Kept as a named constant so stories / docs stay aligned with the design.
+ */
+export const CARD_MEDIA_ASPECT_RATIO = 154 / 116;
+function resolveCardTokens(modes, mediaAspectRatio) {
+  const backgroundColor = getVariableByName('card/background/color', modes) ?? '#ffffff';
+  const borderColor = getVariableByName('card/border/color', modes) ?? '#ffffff';
+  const borderWidth = toNumber(getVariableByName('card/strokeWidth', modes), 0.5);
+  const radius = toNumber(getVariableByName('card/radius', modes), 12);
+  // Figma root uses itemSpacing=4 (bound conceptually to card/gap). The
+  // component-set frames also use SPACE_BETWEEN + fixed heights for gallery
+  // layout — we hug content and apply gap only, so consumers aren't stuck
+  // with empty distributed space.
+  const gap = toNumber(getVariableByName('card/gap', modes), 4);
+  const paddingHorizontal = toNumber(getVariableByName('card/padding-horizontal', modes), 0);
+  const paddingVertical = toNumber(getVariableByName('card/padding-vertical', modes), 0);
+  const contentGap = toNumber(getVariableByName('card/content/gap', modes), 4);
+  const contentPaddingHorizontal = toNumber(getVariableByName('card/content/padding/horizontal', modes), 12);
+  const contentPaddingVertical = toNumber(getVariableByName('card/content/padding/vertical', modes), 12);
+  return {
+    containerStyle: {
+      backgroundColor,
+      borderColor,
+      borderWidth,
+      borderRadius: radius,
+      gap,
+      paddingHorizontal,
+      paddingVertical,
+      overflow: 'hidden'
+    },
+    // Header wrap binds the same content-padding tokens as the content wrap
+    // in Figma (12/12) — not a separate header token set.
+    headerWrapperStyle: {
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      paddingHorizontal: contentPaddingHorizontal,
+      paddingVertical: contentPaddingVertical
+    },
+    mediaWrapperStyle: {
+      width: '100%',
+      aspectRatio: mediaAspectRatio,
+      overflow: 'hidden'
+    },
+    contentWrapperStyle: {
+      width: '100%',
+      gap: contentGap,
+      paddingHorizontal: contentPaddingHorizontal,
+      paddingVertical: contentPaddingVertical
+    }
+  };
+}
+
 /**
- * Card component implementation from Figma node 765:6186.
- * 
- * Supports a `media` slot (with aspect ratio) and a content area.
- * Supports an optional `header` slot (e.g. a brand logo), a `media` slot
- * (with aspect ratio) and a content area.
- * Usage:
+ * `Card` — Figma node 5739:794 (`Property 1=Default` / `Property 1=Slim`).
+ *
+ * Slots: optional `header`, optional `media` (Default only), and `children`
+ * for the content stack. Typography subcomponents (`Card.Title`,
+ * `Card.SupportText`) read tokens via context.
+ *
+ * @example
  * ```tsx
- * <Card header={<GoldLogo />} media={<Image source={...} />} modes={modes}>
+ * <Card
+ *   variant="default"
+ *   header={<GoldLogo />}
+ *   media={<Image imageSource={uri} ratio={154 / 116} />}
+ *   modes={{ AppearanceBrand: 'Neutral' }}
+ * >
  *   <Card.SupportText>Support text</Card.SupportText>
  *   <Card.Title>Title</Card.Title>
  *   <Card.SupportText>Support text</Card.SupportText>
  * </Card>
  * ```
+ *
+ * @component
  */
 export function Card({
+  variant: variantProp = 'default',
   header,
   media,
   children,
-  modes = EMPTY_MODES,
-  mediaAspectRatio = 154 / 116,
+  modes: propModes = EMPTY_MODES,
+  mediaAspectRatio = CARD_MEDIA_ASPECT_RATIO,
   style,
   onPress,
   disabled,
   accessibilityLabel
 }) {
-  // Resolve Card Container Tokens
-  const backgroundColor = getVariableByName('card/background/color', modes);
-  const borderColor = getVariableByName('card/border/color', modes);
-  const borderWidth = parseFloat(getVariableByName('card/strokeWidth', modes)); // Ensure number
-  const radius = parseFloat(getVariableByName('card/radius', modes));
-  const gap = parseFloat(getVariableByName('card/gap', modes));
-  const paddingHorizontal = parseFloat(getVariableByName('card/padding-horizontal', modes));
-  const paddingVertical = parseFloat(getVariableByName('card/padding-vertical', modes));
+  const variant = normalizeVariant(variantProp);
+  const modes = propModes ?? EMPTY_MODES;
+  const tokens = useMemo(() => resolveCardTokens(modes, mediaAspectRatio), [modes, mediaAspectRatio]);
 
-  // Resolve Content Wrapper Tokens
-  const contentGap = parseFloat(getVariableByName('card/content/gap', modes));
-  const contentPaddingHorizontal = parseFloat(getVariableByName('card/content/padding/horizontal', modes));
-  const contentPaddingVertical = parseFloat(getVariableByName('card/content/padding/vertical', modes));
-
-  // Clone media to pass modes if it's a valid element, facilitating nested style resolution
-  const mediaWithModes = /*#__PURE__*/isValidElement(media) ? /*#__PURE__*/cloneElement(media, {
-    modes: {
-      ...media.props.modes,
-      ...modes
-    }
-  }) : media;
-
-  // Clone header to pass modes if it's a valid element
-  const headerWithModes = /*#__PURE__*/isValidElement(header) ? /*#__PURE__*/cloneElement(header, {
-    modes: {
-      ...header.props.modes,
-      ...modes
-    }
-  }) : header;
-  const containerStyle = {
-    backgroundColor,
-    borderColor,
-    borderWidth,
-    borderRadius: radius,
-    gap,
-    paddingHorizontal,
-    paddingVertical,
-    overflow: 'hidden' // Ensure border radius clips content
-  };
-
-  // Header wrap uses fixed padding from Figma (no dedicated tokens defined).
-  const headerWrapperStyle = {
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    paddingHorizontal: 12,
-    paddingVertical: 16
-  };
-  const mediaWrapperStyle = {
-    width: '100%',
-    aspectRatio: mediaAspectRatio,
-    overflow: 'hidden'
-    // Figma has 'bg-[#3a46f7]' on the Ratio definition, but that's a placeholder.
-    // We assume the media content handles its own fill, or we can add a placeholder bg if needed.
-    // For now, we leave it transparent or rely on media.
-  };
-  const contentWrapperStyle = {
-    width: '100%',
-    gap: contentGap,
-    paddingHorizontal: contentPaddingHorizontal,
-    paddingVertical: contentPaddingVertical
-  };
+  // Slim suppresses media even if a consumer still passes it — matches Figma
+  // Property 1=Slim. Default keeps prior behavior: media renders when provided.
+  const showMedia = variant === 'default' && media != null;
+  const processedHeader = header != null ? cloneChildrenWithModes(React.Children.toArray(header), modes) : null;
+  const processedMedia = showMedia ? cloneChildrenWithModes(React.Children.toArray(media), modes) : null;
+  const processedChildren = cloneChildrenWithModes(React.Children.toArray(children ?? null), modes);
   const content = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [header && /*#__PURE__*/_jsx(View, {
-      style: headerWrapperStyle,
-      children: headerWithModes
-    }), media && /*#__PURE__*/_jsx(View, {
-      style: mediaWrapperStyle,
-      children: mediaWithModes
-    }), /*#__PURE__*/_jsx(View, {
-      style: contentWrapperStyle,
-      children: children
+    children: [processedHeader ? /*#__PURE__*/_jsx(View, {
+      style: tokens.headerWrapperStyle,
+      children: processedHeader
+    }) : null, processedMedia ? /*#__PURE__*/_jsx(View, {
+      style: tokens.mediaWrapperStyle,
+      children: processedMedia
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: tokens.contentWrapperStyle,
+      children: processedChildren
     })]
   });
+  const rootStyle = [tokens.containerStyle, style];
   return /*#__PURE__*/_jsx(CardContext.Provider, {
     value: {
       modes
     },
     children: onPress ? /*#__PURE__*/_jsx(Pressable, {
-      style: [containerStyle, style],
+      style: rootStyle,
       onPress: onPress,
       disabled: disabled,
       accessibilityRole: "button",
@@ -126,7 +169,7 @@ export function Card({
       },
       children: content
     }) : /*#__PURE__*/_jsx(View, {
-      style: [containerStyle, style],
+      style: rootStyle,
       accessibilityLabel: accessibilityLabel,
       children: content
     })
@@ -138,69 +181,64 @@ export function Card({
 // ----------------------------------------------------------------------------
 
 /**
- * Title component for Card content.
- * Uses tokens: card/title/*
+ * Title — tokens: `card/title/*`
  */
 function Title({
   children,
   style,
-  modes: propModes
+  modes: propModes,
+  numberOfLines = 3
 }) {
   const context = useContext(CardContext);
-  const modes = propModes || context.modes || {};
-  const color = getVariableByName('card/title/color', modes);
-  const fontSize = parseFloat(getVariableByName('card/title/fontSize', modes));
-  const fontFamily = getVariableByName('card/title/fontFamily', modes);
-  const lineHeight = parseFloat(getVariableByName('card/title/lineHeight', modes));
-
-  // Handling the potential typo in Figma variables "fonwWeight" vs "fontWeight"
-  // We check both keys to be safe.
-  const rawFontWeight = getVariableByName('card/title/fontWeight', modes);
-  const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
+  const modes = propModes ?? context.modes ?? EMPTY_MODES;
+  const color = getVariableByName('card/title/color', modes) ?? '#000000';
+  const fontSize = toNumber(getVariableByName('card/title/fontSize', modes), 16);
+  const fontFamily = getVariableByName('card/title/fontFamily', modes) ?? 'JioType Var';
+  const lineHeight = toNumber(getVariableByName('card/title/lineHeight', modes), 18);
+  const fontWeight = toFontWeight(getVariableByName('card/title/fontWeight', modes), '900');
   const textStyle = {
     color,
     fontSize,
     fontFamily,
     lineHeight,
-    fontWeight: fontWeight
+    fontWeight
   };
   return /*#__PURE__*/_jsx(Text, {
     style: [textStyle, style],
+    numberOfLines: numberOfLines > 0 ? numberOfLines : undefined,
     children: children
   });
 }
 
 /**
- * SupportiveText component for Card content.
- * Uses tokens: card/supportive-text/*
+ * Supportive text — tokens: `card/supportive-text/*`
  */
 function SupportText({
   children,
   style,
-  modes: propModes
+  modes: propModes,
+  numberOfLines
 }) {
   const context = useContext(CardContext);
-  const modes = propModes || context.modes || {};
-  const color = getVariableByName('card/supportive-text/color', modes);
-  const fontSize = parseFloat(getVariableByName('card/supportive-text/fontSize', modes));
-  const fontFamily = getVariableByName('card/supportive-text/fontFamily', modes);
-  const lineHeight = parseFloat(getVariableByName('card/supportive-text/lineHeight', modes));
-  const rawFontWeight = getVariableByName('card/supportive-text/fontWeight', modes);
-  const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
+  const modes = propModes ?? context.modes ?? EMPTY_MODES;
+  const color = getVariableByName('card/supportive-text/color', modes) ?? '#1a1c1f';
+  const fontSize = toNumber(getVariableByName('card/supportive-text/fontSize', modes), 12);
+  const fontFamily = getVariableByName('card/supportive-text/fontFamily', modes) ?? 'JioType Var';
+  const lineHeight = toNumber(getVariableByName('card/supportive-text/lineHeight', modes), 16);
+  const fontWeight = toFontWeight(getVariableByName('card/supportive-text/fontWeight', modes), '400');
   const textStyle = {
     color,
     fontSize,
     fontFamily,
     lineHeight,
-    fontWeight: fontWeight
+    fontWeight
   };
   return /*#__PURE__*/_jsx(Text, {
     style: [textStyle, style],
+    numberOfLines: numberOfLines,
     children: children
   });
 }
-
-// Attach sub-components to Card
 Card.Title = Title;
 Card.SupportText = SupportText;
 export default Card;