jfs-components 0.1.50 → 0.1.54

package/lib/commonjs/components/Button/Button.js

@@ -9,12 +9,20 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _webPlatformUtils = require("../../utils/web-platform-utils");
 var _reactUtils = require("../../utils/react-utils");
+var _GlassFill = _interopRequireDefault(require("../../utils/GlassFill/GlassFill"));
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 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); }
+/**
+ * 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`
+ */
+
 // ---------------------------------------------------------------------------
 // Module-scope constants — never re-allocated per render.
 // ---------------------------------------------------------------------------
@@ -58,28 +66,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 = (0, _figmaVariablesResolver.getVariableByName)('button/background', modes);
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', modes);
-  const borderWidth = (0, _figmaVariablesResolver.getVariableByName)('button/border/size', modes);
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('button/radius', modes);
-  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('button/padding/horizontal', modes);
-  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('button/padding/vertical', modes);
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('button/gap', modes);
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('button/fontFamily', modes);
-  const fontWeightValue = (0, _figmaVariablesResolver.getVariableByName)('button/fontWeight', modes);
-  const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue;
-  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('button/lineHeight', modes);
-  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('button/fontSize', modes);
-  const textColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', modes);
-  const iconSize = (0, _figmaVariablesResolver.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 = (0, _figmaVariablesResolver.getVariableByName)('button/background', idleModes);
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', idleModes);
+  const borderWidth = (0, _figmaVariablesResolver.getVariableByName)('button/border/size', idleModes);
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('button/radius', idleModes);
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('button/padding/horizontal', idleModes);
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('button/padding/vertical', idleModes);
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('button/gap', idleModes);
+  const maxWidth = (0, _figmaVariablesResolver.getVariableByName)('button/maxWidth', idleModes);
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('button/fontFamily', idleModes);
+  const fontWeightValue = (0, _figmaVariablesResolver.getVariableByName)('button/fontWeight', idleModes);
+  const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue;
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('button/lineHeight', idleModes);
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('button/fontSize', idleModes);
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', idleModes);
+  const iconSize = (0, _figmaVariablesResolver.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((0, _figmaVariablesResolver.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 = (0, _figmaVariablesResolver.getVariableByName)('button/background', pressedModes);
   const pressedBorderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', pressedModes);
   const pressedTextColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', pressedModes);
@@ -88,20 +147,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 = (0, _figmaVariablesResolver.getVariableByName)('button/background', hoverModes);
     const hoverBorderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', hoverModes);
     hoverTextColor = (0, _figmaVariablesResolver.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,
@@ -109,9 +170,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,
@@ -121,7 +191,7 @@ function resolveButtonTokens(modes, disabled) {
       lineHeight: lineHeight
     },
     hoverContainer,
-    pressedContainer: {
+    pressedContainer: isGlass ? {} : {
       backgroundColor: pressedBg,
       borderColor: pressedBorderColor
     },
@@ -131,7 +201,11 @@ function resolveButtonTokens(modes, disabled) {
     hoverIconColor: hoverTextColor,
     pressedIconColor: pressedTextColor,
     iconSize,
-    accessoryOffset: gap / 2
+    accessoryOffset: gap / 2,
+    glassOverlayIdle: backgroundColor,
+    glassOverlayHover,
+    glassOverlayPressed: pressedBg,
+    glassBlurIntensity
   };
 }
 
@@ -177,6 +251,9 @@ function ButtonImpl({
   leading,
   trailing,
   icon,
+  type = 'default',
+  glassOverlayColor,
+  glassIntensity,
   modes = _reactUtils.EMPTY_MODES,
   onPress,
   disabled = false,
@@ -201,7 +278,7 @@ function ButtonImpl({
   userHandlersRef.current.onPressOut = rest?.onPressOut;
   userHandlersRef.current.onHoverIn = rest?.onHoverIn;
   userHandlersRef.current.onHoverOut = rest?.onHoverOut;
-  const tokens = (0, _react.useMemo)(() => resolveButtonTokens(modes, disabled), [modes, disabled]);
+  const tokens = (0, _react.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
@@ -315,7 +392,25 @@ function ButtonImpl({
       modes: modes
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+  const body = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [leading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: leadingAccessoryStyle,
+      children: leading
+    }) : null, content, icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: trailingAccessoryStyle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        name: icon,
+        size: tokens.iconSize,
+        color: activeIconColor,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      })
+    }) : trailing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: trailingAccessoryStyle,
+      children: trailing
+    }) : null]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
     accessibilityRole: "button",
     accessibilityLabel: undefined,
     ...(accessibilityHint !== undefined ? {
@@ -336,22 +431,19 @@ function ButtonImpl({
     unstable_pressDelay: PRESS_DELAY,
     style: styleCallback,
     ...webProps,
-    children: [leading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: leadingAccessoryStyle,
-      children: leading
-    }) : null, content, icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: trailingAccessoryStyle,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-        name: icon,
-        size: tokens.iconSize,
-        color: activeIconColor,
-        accessibilityElementsHidden: true,
-        importantForAccessibility: "no"
-      })
-    }) : trailing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GlassFill.default, {
+          tint: "light",
+          intensity: glassIntensity ?? tokens.glassBlurIntensity,
+          overlayColor: overlayColor,
+          androidTintWash: false
+        }), body]
+      });
+    } : body
   });
 }
 const Button = /*#__PURE__*/_react.default.memo(ButtonImpl);

package/lib/commonjs/components/ButtonGroup/ButtonGroup.js

@@ -22,7 +22,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * @component
  * @example
  * ```jsx
- * <ButtonGroup modes={{"Appearance": "light"}}>
+ * <ButtonGroup modes={{"Color Mode": "Light"}}>
  *   <IconButton iconName="ic_qr_code" />
  *   <Button label="Pay" />
  * </ButtonGroup>

package/lib/commonjs/components/Card/Card.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.CARD_MEDIA_ASPECT_RATIO = void 0;
 exports.Card = Card;
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
@@ -12,117 +13,160 @@ 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); }
 /**
- * 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__*/(0, _react.createContext)({});
+const CardContext = /*#__PURE__*/(0, _react.createContext)({
+  modes: _reactUtils.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;
+};
+
 /**
- * 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:
+ * 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.
+ */
+const CARD_MEDIA_ASPECT_RATIO = exports.CARD_MEDIA_ASPECT_RATIO = 154 / 116;
+function resolveCardTokens(modes, mediaAspectRatio) {
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('card/background/color', modes) ?? '#ffffff';
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('card/border/color', modes) ?? '#ffffff';
+  const borderWidth = toNumber((0, _figmaVariablesResolver.getVariableByName)('card/strokeWidth', modes), 0.5);
+  const radius = toNumber((0, _figmaVariablesResolver.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((0, _figmaVariablesResolver.getVariableByName)('card/gap', modes), 4);
+  const paddingHorizontal = toNumber((0, _figmaVariablesResolver.getVariableByName)('card/padding-horizontal', modes), 0);
+  const paddingVertical = toNumber((0, _figmaVariablesResolver.getVariableByName)('card/padding-vertical', modes), 0);
+  const contentGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('card/content/gap', modes), 4);
+  const contentPaddingHorizontal = toNumber((0, _figmaVariablesResolver.getVariableByName)('card/content/padding/horizontal', modes), 12);
+  const contentPaddingVertical = toNumber((0, _figmaVariablesResolver.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` — 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
  */
 function Card({
+  variant: variantProp = 'default',
   header,
   media,
   children,
-  modes = _reactUtils.EMPTY_MODES,
-  mediaAspectRatio = 154 / 116,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  mediaAspectRatio = CARD_MEDIA_ASPECT_RATIO,
   style,
   onPress,
   disabled,
   accessibilityLabel
 }) {
-  // Resolve Card Container Tokens
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('card/background/color', modes);
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('card/border/color', modes);
-  const borderWidth = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/strokeWidth', modes)); // Ensure number
-  const radius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/radius', modes));
-  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/gap', modes));
-  const paddingHorizontal = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/padding-horizontal', modes));
-  const paddingVertical = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/padding-vertical', modes));
+  const variant = normalizeVariant(variantProp);
+  const modes = propModes ?? _reactUtils.EMPTY_MODES;
+  const tokens = (0, _react.useMemo)(() => resolveCardTokens(modes, mediaAspectRatio), [modes, mediaAspectRatio]);
 
-  // Resolve Content Wrapper Tokens
-  const contentGap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/content/gap', modes));
-  const contentPaddingHorizontal = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/content/padding/horizontal', modes));
-  const contentPaddingVertical = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/content/padding/vertical', modes));
-
-  // Clone media to pass modes if it's a valid element, facilitating nested style resolution
-  const mediaWithModes = /*#__PURE__*/(0, _react.isValidElement)(media) ? /*#__PURE__*/(0, _react.cloneElement)(media, {
-    modes: {
-      ...media.props.modes,
-      ...modes
-    }
-  }) : media;
-
-  // Clone header to pass modes if it's a valid element
-  const headerWithModes = /*#__PURE__*/(0, _react.isValidElement)(header) ? /*#__PURE__*/(0, _react.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 ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(header), modes) : null;
+  const processedMedia = showMedia ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(media), modes) : null;
+  const processedChildren = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(children ?? null), modes);
   const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [header && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: headerWrapperStyle,
-      children: headerWithModes
-    }), media && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: mediaWrapperStyle,
-      children: mediaWithModes
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: contentWrapperStyle,
-      children: children
+    children: [processedHeader ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: tokens.headerWrapperStyle,
+      children: processedHeader
+    }) : null, processedMedia ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: tokens.mediaWrapperStyle,
+      children: processedMedia
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: tokens.contentWrapperStyle,
+      children: processedChildren
     })]
   });
+  const rootStyle = [tokens.containerStyle, style];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardContext.Provider, {
     value: {
       modes
     },
     children: onPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-      style: [containerStyle, style],
+      style: rootStyle,
       onPress: onPress,
       disabled: disabled,
       accessibilityRole: "button",
@@ -132,7 +176,7 @@ function Card({
       },
       children: content
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [containerStyle, style],
+      style: rootStyle,
       accessibilityLabel: accessibilityLabel,
       children: content
     })
@@ -144,69 +188,64 @@ 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 = (0, _react.useContext)(CardContext);
-  const modes = propModes || context.modes || {};
-  const color = (0, _figmaVariablesResolver.getVariableByName)('card/title/color', modes);
-  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/title/fontSize', modes));
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('card/title/fontFamily', modes);
-  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/title/lineHeight', modes));
-
-  // Handling the potential typo in Figma variables "fonwWeight" vs "fontWeight"
-  // We check both keys to be safe.
-  const rawFontWeight = (0, _figmaVariablesResolver.getVariableByName)('card/title/fontWeight', modes);
-  const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
+  const modes = propModes ?? context.modes ?? _reactUtils.EMPTY_MODES;
+  const color = (0, _figmaVariablesResolver.getVariableByName)('card/title/color', modes) ?? '#000000';
+  const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('card/title/fontSize', modes), 16);
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('card/title/fontFamily', modes) ?? 'JioType Var';
+  const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('card/title/lineHeight', modes), 18);
+  const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('card/title/fontWeight', modes), '900');
   const textStyle = {
     color,
     fontSize,
     fontFamily,
     lineHeight,
-    fontWeight: fontWeight
+    fontWeight
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 = (0, _react.useContext)(CardContext);
-  const modes = propModes || context.modes || {};
-  const color = (0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/color', modes);
-  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/fontSize', modes));
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/fontFamily', modes);
-  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/lineHeight', modes));
-  const rawFontWeight = (0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/fontWeight', modes);
-  const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
+  const modes = propModes ?? context.modes ?? _reactUtils.EMPTY_MODES;
+  const color = (0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/color', modes) ?? '#1a1c1f';
+  const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/fontSize', modes), 12);
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/fontFamily', modes) ?? 'JioType Var';
+  const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/lineHeight', modes), 16);
+  const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/fontWeight', modes), '400');
   const textStyle = {
     color,
     fontSize,
     fontFamily,
     lineHeight,
-    fontWeight: fontWeight
+    fontWeight
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
     style: [textStyle, style],
+    numberOfLines: numberOfLines,
     children: children
   });
 }
-
-// Attach sub-components to Card
 Card.Title = Title;
 Card.SupportText = SupportText;
 var _default = exports.default = Card;