jfs-components 0.0.78 → 0.0.79

package/lib/typescript/src/components/Attached/Attached.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+/**
+ * Anchor point on the main content where the attached `badge` is centered.
+ * Mirrors the nine Figma `position` variants (corners, edge midpoints, center).
+ */
+export type AttachedPosition = 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
+export type AttachedProps = Omit<ViewProps, 'children'> & {
+    /**
+     * Main content the badge attaches to (the Figma "main slot"). Any node —
+     * typically an `IconCapsule`, `Avatar`, image, etc. `modes` are cascaded to
+     * every child via {@link cloneChildrenWithModes}.
+     */
+    children?: React.ReactNode;
+    /**
+     * The element attached on top of `children` (the Figma "slot"). Centered on
+     * the anchor point given by `position` so it straddles the edge/corner.
+     * `modes` are cascaded into it as well.
+     */
+    badge?: React.ReactNode;
+    /**
+     * Anchor point for the `badge` relative to the main content.
+     * @default 'bottom-right'
+     */
+    position?: AttachedPosition;
+    /**
+     * How the anchor point is computed for diagonal (corner) positions:
+     * - `false` (default): treat the main content as a **square** — corner
+     *   anchors sit on the bounding-box corners.
+     * - `true`: treat the main content as a **circle** inscribed in its bounding
+     *   box — corner anchors sit on the circle's circumference (the 45° point),
+     *   so badges hug round content like a circular `IconCapsule` or `Avatar`.
+     *
+     * Edge (`top`/`bottom`/`left`/`right`) and `center` anchors are unaffected,
+     * since the circle meets the bounding box at those points.
+     * @default false
+     */
+    circular?: boolean;
+    /** Mode configuration cascaded to the token resolver and all children. */
+    modes?: Record<string, any>;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * Attached — overlays a small `badge` on top of arbitrary main content,
+ * centered on one of nine anchor points (corners, edge midpoints, or center).
+ *
+ * The badge straddles the chosen anchor regardless of either element's size:
+ * both the main content and the badge are measured via `onLayout`, then the
+ * badge is absolutely positioned so its center lands exactly on the anchor.
+ *
+ * @example
+ * ```tsx
+ * <Attached position="bottom-right" badge={<InstitutionBadge modes={modes} />} modes={modes}>
+ *   <IconCapsule iconName="ic_card" modes={modes} />
+ * </Attached>
+ * ```
+ */
+declare function Attached({ children, badge, position, circular, modes: propModes, style, ...rest }: AttachedProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Attached>;
+export default _default;
+//# sourceMappingURL=Attached.d.ts.map

package/lib/typescript/src/components/Card/Card.d.ts

@@ -1,6 +1,11 @@
 import React from 'react';
 import { type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
 export interface CardProps {
+    /**
+     * Content rendered in the header slot at the top of the card (e.g. a brand logo).
+     * Sits above the media slot, with its own padding.
+     */
+    header?: React.ReactNode;
     /**
      * The content to be rendered in the media slot (e.g. an Image).
      * This content is wrapped in a container that respects the `aspectRatio`.
@@ -28,16 +33,18 @@ export interface CardProps {
  * 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:
  * ```tsx
- * <Card media={<Image source={...} />} modes={modes}>
+ * <Card header={<GoldLogo />} media={<Image source={...} />} modes={modes}>
  *   <Card.SupportText>Support text</Card.SupportText>
  *   <Card.Title>Title</Card.Title>
  *   <Card.SupportText>Support text</Card.SupportText>
  * </Card>
  * ```
  */
-export declare function Card({ media, children, modes, mediaAspectRatio, style, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ header, media, children, modes, mediaAspectRatio, style, }: CardProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Card {
     var Title: ({ children, style, modes: propModes }: CardTextProps) => import("react/jsx-runtime").JSX.Element;
     var SupportText: ({ children, style, modes: propModes }: CardTextProps) => import("react/jsx-runtime").JSX.Element;

package/lib/typescript/src/components/ListItem/ListItem.d.ts

@@ -6,8 +6,16 @@ type ListItemProps = {
     title?: string;
     supportText?: string;
     showSupportText?: boolean;
+    /** Leading slot (Figma "leading"). Defaults to an `IconCapsule` when omitted. */
     leading?: React.ReactNode;
     supportSlot?: React.ReactNode;
+    /** Trailing slot (Figma "trailing"), e.g. `MoneyValue` or `Button`. Horizontal layout only. */
+    trailing?: React.ReactNode;
+    /**
+     * @deprecated Renamed to `trailing` for a symmetric `leading` / `trailing`
+     * slot API. Still honored for backward compatibility; `trailing` wins when
+     * both are provided. Will be removed in a future major version.
+     */
     endSlot?: React.ReactNode;
     /** Whether to show the NavArrow on the far right (Horizontal layout only). Defaults to true. */
     navArrow?: boolean;
@@ -33,9 +41,11 @@ type ListItemProps = {
  *  - **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
@@ -43,9 +53,9 @@ type ListItemProps = {
  * @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} [props.leading] - Optional leading slot. Defaults to `IconCapsule`.
  * @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).
@@ -67,7 +77,7 @@ type ListItemProps = {
  *    handlers stay referentially stable across renders.
  *  - The component is wrapped in `React.memo`.
  */
-declare function ListItemImpl({ layout, title, supportText, showSupportText, leading, supportSlot, endSlot, navArrow, modes, onPress, style, contentStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ListItemImpl({ layout, title, supportText, showSupportText, leading, supportSlot, trailing, endSlot, navArrow, modes, onPress, style, contentStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 declare const ListItem: React.MemoExoticComponent<typeof ListItemImpl>;
 export default ListItem;
 //# sourceMappingURL=ListItem.d.ts.map

package/lib/typescript/src/components/PlanComparisonCard/PlanComparisonCard.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * A single plan column header (the label column has no header of its own).
+ */
+export type PlanComparisonColumn = {
+    /** Header text for the plan column. */
+    label: string;
+    /**
+     * Render the header in the brand accent colour (gold) — use it to
+     * highlight the recommended / upsell plan.
+     * @default false
+     */
+    brand?: boolean;
+};
+/**
+ * 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.
+ */
+export type PlanComparisonCellValue = string | number | boolean | null | undefined | React.ReactElement;
+export type PlanComparisonRow = {
+    /** Feature label shown in the first (left) column. */
+    label: string;
+    /**
+     * Show an info icon after the label. When `onInfoPress` is provided the
+     * icon becomes tappable; otherwise it is purely decorative.
+     */
+    showInfo?: boolean;
+    /** Handler for the info icon. Implies `showInfo`. */
+    onInfoPress?: () => void;
+    /**
+     * One value per plan column, in the same order as `columns`. See
+     * {@link PlanComparisonCellValue} for how each value is rendered.
+     */
+    values: PlanComparisonCellValue[];
+    /** Stable key. Falls back to the label / index. */
+    key?: React.Key;
+};
+export type PlanComparisonCardProps = {
+    /**
+     * Plan column headers (excludes the leading label column). The order here
+     * maps 1:1 to each row's `values` array.
+     */
+    columns?: PlanComparisonColumn[];
+    /** Feature rows compared across the plan columns. */
+    rows?: PlanComparisonRow[];
+    /**
+     * Minimum flex-grow on the label column when the table is given extra
+     * horizontal space. Plan columns always size to their content and never
+     * shrink below it.
+     * @default 0
+     */
+    labelColumnFlex?: number;
+    /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
+    modes?: Record<string, any>;
+    /** Override the outer container style. */
+    style?: StyleProp<ViewStyle>;
+};
+declare function PlanComparisonCard({ columns, rows, labelColumnFlex, modes, style, }: PlanComparisonCardProps): import("react/jsx-runtime").JSX.Element;
+export default PlanComparisonCard;
+//# sourceMappingURL=PlanComparisonCard.d.ts.map

package/lib/typescript/src/components/Slot/Slot.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+export type SlotLayoutDirection = 'vertical' | 'horizontal';
+export type SlotProps = ViewProps & {
+    /**
+     * Content laid out inside the slot. `modes` are cascaded to every child via
+     * {@link cloneChildrenWithModes}.
+     */
+    children?: React.ReactNode;
+    /**
+     * Main-axis direction for slot children. Matches the Figma Slot variant:
+     * - `vertical` (default): stacks children in a column
+     * - `horizontal`: arranges children in a row
+     */
+    layoutDirection?: SlotLayoutDirection;
+    /**
+     * Alignment along the cross axis.
+     * Defaults to `stretch` for vertical and `flex-start` for horizontal.
+     */
+    alignCrossAxis?: ViewStyle['alignItems'];
+    /**
+     * Distribution along the main axis (maps to `justifyContent`).
+     */
+    justifyMainAxis?: ViewStyle['justifyContent'];
+    /**
+     * Mode configuration passed to the token resolver and cascaded to children.
+     */
+    modes?: Record<string, any>;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * 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>
+ * ```
+ */
+declare function Slot({ children, layoutDirection, alignCrossAxis, justifyMainAxis, modes: propModes, style, ...rest }: SlotProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Slot>;
+export default _default;
+//# sourceMappingURL=Slot.d.ts.map

package/lib/typescript/src/components/index.d.ts

@@ -1,5 +1,6 @@
 export { default as AccountCard, type AccountCardProps, type AccountCardState } from './AccountCard/AccountCard';
 export { default as ActionFooter, type ActionFooterProps } from './ActionFooter/ActionFooter';
+export { default as Attached, type AttachedProps, type AttachedPosition } from './Attached/Attached';
 export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
 export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
@@ -63,6 +64,7 @@ export { default as Numpad, type NumpadProps, type NumpadKeyValue } from './Nump
 export { default as Title, type TitleProps } from './Title/Title';
 export { default as Screen, type ScreenProps } from './Screen/Screen';
 export { default as Section } from './Section/Section';
+export { default as Slot, type SlotProps, type SlotLayoutDirection } from './Slot/Slot';
 export { default as Stepper, type StepperProps } from './Stepper/Stepper';
 export { Step, type StepProps, type StepStatus } from './Stepper/Step';
 export { StepLabel, type StepLabelProps } from './Stepper/StepLabel';
@@ -110,6 +112,7 @@ export { default as AmountInput, type AmountInputProps } from './AmountInput/Amo
 export { default as PageHero, type PageHeroProps } from './PageHero/PageHero';
 export { default as Popup, type PopupProps, type PopupRef } from './Popup/Popup';
 export { default as PortfolioHero, type PortfolioHeroProps } from './PortfolioHero/PortfolioHero';
+export { default as PlanComparisonCard, type PlanComparisonCardProps, type PlanComparisonColumn, type PlanComparisonRow, type PlanComparisonCellValue } from './PlanComparisonCard/PlanComparisonCard';
 export { default as PoweredByLabel, type PoweredByLabelProps } from './PoweredByLabel/PoweredByLabel';
 export { default as ProductLabel, type ProductLabelProps } from './ProductLabel/ProductLabel';
 export { default as ProductOverview, type ProductOverviewProps, type ProductOverviewStat } from './ProductOverview/ProductOverview';

package/lib/typescript/src/icons/registry.d.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-05-29T10:37:24.494Z
+ * Generated: 2026-05-29T17:01:15.629Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.78",
+  "version": "0.0.79",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",

package/src/components/Attached/Attached.tsx

@@ -0,0 +1,181 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import {
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
+
+/**
+ * Anchor point on the main content where the attached `badge` is centered.
+ * Mirrors the nine Figma `position` variants (corners, edge midpoints, center).
+ */
+export type AttachedPosition =
+  | 'top-left'
+  | 'top'
+  | 'top-right'
+  | 'left'
+  | 'center'
+  | 'right'
+  | 'bottom-left'
+  | 'bottom'
+  | 'bottom-right'
+
+export type AttachedProps = Omit<ViewProps, 'children'> & {
+  /**
+   * Main content the badge attaches to (the Figma "main slot"). Any node —
+   * typically an `IconCapsule`, `Avatar`, image, etc. `modes` are cascaded to
+   * every child via {@link cloneChildrenWithModes}.
+   */
+  children?: React.ReactNode
+  /**
+   * The element attached on top of `children` (the Figma "slot"). Centered on
+   * the anchor point given by `position` so it straddles the edge/corner.
+   * `modes` are cascaded into it as well.
+   */
+  badge?: React.ReactNode
+  /**
+   * Anchor point for the `badge` relative to the main content.
+   * @default 'bottom-right'
+   */
+  position?: AttachedPosition
+  /**
+   * How the anchor point is computed for diagonal (corner) positions:
+   * - `false` (default): treat the main content as a **square** — corner
+   *   anchors sit on the bounding-box corners.
+   * - `true`: treat the main content as a **circle** inscribed in its bounding
+   *   box — corner anchors sit on the circle's circumference (the 45° point),
+   *   so badges hug round content like a circular `IconCapsule` or `Avatar`.
+   *
+   * Edge (`top`/`bottom`/`left`/`right`) and `center` anchors are unaffected,
+   * since the circle meets the bounding box at those points.
+   * @default false
+   */
+  circular?: boolean
+  /** Mode configuration cascaded to the token resolver and all children. */
+  modes?: Record<string, any>
+  style?: StyleProp<ViewStyle>
+}
+
+type Size = { width: number; height: number }
+
+const ZERO_SIZE: Size = { width: 0, height: 0 }
+
+/**
+ * Fraction (0 | 0.5 | 1) of the main content's width/height at which the badge
+ * center should sit, derived from the `position` anchor.
+ */
+function resolveAnchorFractions(position: AttachedPosition): { fx: number; fy: number } {
+  const fx = position.includes('left') ? 0 : position.includes('right') ? 1 : 0.5
+  const fy = position.startsWith('top') ? 0 : position.startsWith('bottom') ? 1 : 0.5
+  return { fx, fy }
+}
+
+/**
+ * Attached — overlays a small `badge` on top of arbitrary main content,
+ * centered on one of nine anchor points (corners, edge midpoints, or center).
+ *
+ * The badge straddles the chosen anchor regardless of either element's size:
+ * both the main content and the badge are measured via `onLayout`, then the
+ * badge is absolutely positioned so its center lands exactly on the anchor.
+ *
+ * @example
+ * ```tsx
+ * <Attached position="bottom-right" badge={<InstitutionBadge modes={modes} />} modes={modes}>
+ *   <IconCapsule iconName="ic_card" modes={modes} />
+ * </Attached>
+ * ```
+ */
+function Attached({
+  children,
+  badge,
+  position = 'bottom-right',
+  circular = true,
+  modes: propModes = EMPTY_MODES,
+  style,
+  ...rest
+}: AttachedProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(
+    () =>
+      globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+        ? EMPTY_MODES
+        : { ...globalModes, ...propModes },
+    [globalModes, propModes]
+  )
+
+  const [mainSize, setMainSize] = useState<Size>(ZERO_SIZE)
+  const [badgeSize, setBadgeSize] = useState<Size>(ZERO_SIZE)
+
+  const onMainLayout = useCallback((e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout
+    setMainSize((prev) => (prev.width === width && prev.height === height ? prev : { width, height }))
+  }, [])
+
+  const onBadgeLayout = useCallback((e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout
+    setBadgeSize((prev) => (prev.width === width && prev.height === height ? prev : { width, height }))
+  }, [])
+
+  const mainChildren = useMemo(
+    () => (children != null ? cloneChildrenWithModes(children, modes) : null),
+    [children, modes]
+  )
+  const badgeChildren = useMemo(
+    () => (badge != null ? cloneChildrenWithModes(badge, modes) : null),
+    [badge, modes]
+  )
+
+  const badgePlacement = useMemo<ViewStyle>(() => {
+    const { fx, fy } = resolveAnchorFractions(position)
+    const measured = mainSize.width > 0 && badgeSize.width > 0
+
+    let anchorX: number
+    let anchorY: number
+    if (circular) {
+      // Project the anchor onto the circle inscribed in the bounding box, so
+      // corner badges land on the circumference (45°) instead of the box corner.
+      const cx = mainSize.width / 2
+      const cy = mainSize.height / 2
+      const radius = Math.min(mainSize.width, mainSize.height) / 2
+      const dx = (fx - 0.5) * 2 // -1 | 0 | 1
+      const dy = (fy - 0.5) * 2 // -1 | 0 | 1
+      const len = Math.hypot(dx, dy) || 1 // 'center' → 0, guard against /0
+      anchorX = cx + (dx / len) * radius
+      anchorY = cy + (dy / len) * radius
+    } else {
+      anchorX = mainSize.width * fx
+      anchorY = mainSize.height * fy
+    }
+
+    return {
+      position: 'absolute',
+      left: anchorX - badgeSize.width / 2,
+      top: anchorY - badgeSize.height / 2,
+      // Hide until both elements are measured to avoid a one-frame flash at (0,0).
+      opacity: measured ? 1 : 0,
+    }
+  }, [position, circular, mainSize, badgeSize])
+
+  return (
+    <View style={[styles.container, style]} {...rest}>
+      <View onLayout={onMainLayout}>{mainChildren}</View>
+      {badgeChildren != null && (
+        <View style={badgePlacement} onLayout={onBadgeLayout} pointerEvents="box-none">
+          {badgeChildren}
+        </View>
+      )}
+    </View>
+  )
+}
+
+const styles = {
+  // alignSelf flex-start so the wrapper hugs the main content; anchors are then
+  // computed relative to the content size rather than a stretched parent.
+  container: { position: 'relative', alignSelf: 'flex-start' } as ViewStyle,
+}
+
+export default React.memo(Attached)

package/src/components/Card/Card.tsx

@@ -11,6 +11,11 @@ import { EMPTY_MODES } from '../../utils/react-utils';
 const CardContext = createContext<{ modes?: Record<string, any> }>({});
 
 export interface CardProps {
+    /**
+     * Content rendered in the header slot at the top of the card (e.g. a brand logo).
+     * Sits above the media slot, with its own padding.
+     */
+    header?: React.ReactNode;
     /**
      * The content to be rendered in the media slot (e.g. an Image).
      * This content is wrapped in a container that respects the `aspectRatio`.
@@ -39,9 +44,11 @@ export interface CardProps {
  * 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:
  * ```tsx
- * <Card media={<Image source={...} />} modes={modes}>
+ * <Card header={<GoldLogo />} media={<Image source={...} />} modes={modes}>
  *   <Card.SupportText>Support text</Card.SupportText>
  *   <Card.Title>Title</Card.Title>
  *   <Card.SupportText>Support text</Card.SupportText>
@@ -49,6 +56,7 @@ export interface CardProps {
  * ```
  */
 export function Card({
+    header,
     media,
     children,
     modes = EMPTY_MODES,
@@ -74,6 +82,11 @@ export function Card({
         ? cloneElement(media as any, { modes: { ...(media.props as any).modes, ...modes } })
         : media;
 
+    // Clone header to pass modes if it's a valid element
+    const headerWithModes = isValidElement(header)
+        ? cloneElement(header as any, { modes: { ...(header.props as any).modes, ...modes } })
+        : header;
+
     const containerStyle: ViewStyle = {
         backgroundColor,
         borderColor,
@@ -85,6 +98,15 @@ export function Card({
         overflow: 'hidden', // Ensure border radius clips content
     };
 
+    // Header wrap uses fixed padding from Figma (no dedicated tokens defined).
+    const headerWrapperStyle: ViewStyle = {
+        width: '100%',
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        paddingHorizontal: 12,
+        paddingVertical: 16,
+    };
+
     const mediaWrapperStyle: ViewStyle = {
         width: '100%',
         aspectRatio: mediaAspectRatio,
@@ -104,6 +126,11 @@ export function Card({
     return (
         <CardContext.Provider value={{ modes }}>
             <View style={[containerStyle, style]}>
+                {header && (
+                    <View style={headerWrapperStyle}>
+                        {headerWithModes}
+                    </View>
+                )}
                 {media && (
                     <View style={mediaWrapperStyle}>
                         {mediaWithModes}

package/src/components/FullscreenModal/FullscreenModal.tsx

@@ -21,6 +21,7 @@ import Button from '../Button/Button'
 import Disclaimer from '../Disclaimer/Disclaimer'
 import IconButton from '../IconButton/IconButton'
 import ActionFooter from '../ActionFooter/ActionFooter'
+import Slot from '../Slot/Slot'
 
 // ---------------------------------------------------------------------------
 // Forced modes
@@ -351,7 +352,7 @@ function FullscreenModal({
     footerContent = footer
   } else if (primaryActionLabel) {
     footerContent = (
-      <View style={footerColumnStyle}>
+      <Slot layoutDirection="vertical" modes={modes}>
         <Button
           label={primaryActionLabel}
           modes={modes}
@@ -359,7 +360,7 @@ function FullscreenModal({
           {...(onPrimaryAction ? { onPress: onPrimaryAction } : {})}
         />
         {disclaimer ? <Disclaimer disclaimer={disclaimer} modes={modes} /> : null}
-      </View>
+      </Slot>
     )
   }
 
@@ -407,7 +408,6 @@ function FullscreenModal({
 const rootStyle: ViewStyle = { flex: 1, width: '100%', position: 'relative' }
 const scrollViewStyle: ViewStyle = { flex: 1 }
 const scrollContentStyle: ViewStyle = { flexGrow: 1 }
-const footerColumnStyle: ViewStyle = { width: '100%', gap: 8 }
 const fullWidthStyle: ViewStyle = { width: '100%' }
 const closeButtonStyle: ViewStyle = { position: 'absolute', top: 12, right: 12 }