jfs-components 0.1.50 → 0.1.54

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

@@ -4,11 +4,23 @@ import type { Modes } from '../../design-tokens';
 export type ActionFooterProps = {
     /**
      * Content to render inside the action footer slot.
-     * Typically includes `IconButton` and `Button` components.
-     * `IconButton` children keep their intrinsic square size; everything else
-     * is auto-stretched to share the remaining horizontal space equally.
+     *
+     * **Legacy (fully supported):** pass loose `IconButton` / `Button` children —
+     * IconButtons keep their intrinsic square size; everything else is
+     * auto-stretched to share the remaining horizontal space equally.
+     *
+     * **Figma shape (preferred for new code):** pass a single `ButtonGroup`
+     * (or `Stack` / `Slot`) that owns its own internal layout. ActionFooter will
+     * not re-stretch that composite — it only cascades `modes` and stretches it
+     * to full width.
      */
     children?: React.ReactNode;
+    /**
+     * Optional centered title rendered above the action slot (Figma "title wrap").
+     * Omitted / empty string → title wrap is not mounted (identical to the
+     * pre-title layout tree for loose children).
+     */
+    title?: string;
     /**
      * Mode configuration passed to the token resolver.
      * Automatically merged into every slot child via {@link cloneChildrenWithModes}
@@ -16,43 +28,60 @@ export type ActionFooterProps = {
      */
     modes?: Modes;
     /**
-     * Optional style overrides for the outer container.
+     * Optional style overrides for the footer chrome (not the sticky shell).
      */
     style?: StyleProp<ViewStyle>;
     /**
      * Accessibility label for the footer region (announced for the toolbar).
      */
     accessibilityLabel?: string;
+    /**
+     * When `true` (default on native), the footer rides above the software
+     * keyboard by exactly the uncovered keyboard height. Web ignores this —
+     * there is no software keyboard inset to track.
+     */
+    avoidKeyboard?: boolean;
 };
 /**
- * ActionFooter — a sticky bottom container for primary screen actions.
+ * ActionFooter — sticky bottom container for primary screen actions.
  *
- * Layout contract:
- *   - The outer container stretches horizontally (`alignSelf: 'stretch'`) so
- *     it fills the parent regardless of whether the parent is a flex column,
- *     a ScrollView contentContainer, or a plain View.
- *   - The inner slot is a single row sized by its tallest child. It does NOT
- *     use `flex: 1` — that previously caused the row to collapse to zero on
- *     the first Yoga pass on native, taking the button labels with it.
- *   - `IconButton` children keep their intrinsic square size.
- *   - Every other child is auto-stretched with the Yoga-safe stretch style
- *     above so two `<Button>` siblings render at equal width on iOS, Android,
- *     and Web.
+ * Layout contract (native):
+ *   - Self-pins to the bottom of its flex-column screen via `marginTop: 'auto'`
+ *     plus an absolutely positioned chrome inside a height-locked shell.
+ *   - The shell keeps scroll/flex siblings from painting under the footer —
+ *     callers do not need to hand-maintain `paddingBottom`.
+ *   - Keyboard avoidance is owned here: the footer moves up by exactly the
+ *     keyboard height that layout has not already absorbed. Host
+ *     `KeyboardAvoidingView` is unnecessary and should not wrap this.
  *
- * The `modes` prop is automatically pushed down to every slot child via
- * {@link cloneChildrenWithModes}; explicit child-level modes win over the
- * parent's modes.
+ * Layout contract (web):
+ *   - In-flow stretch container (Storybook / docs friendly). No keyboard inset.
+ *
+ * Content contract:
+ *   - Optional centered `title` (Figma title wrap; Drawer title tokens).
+ *   - Loose `IconButton`/`Button` children keep the original equal-stretch row.
+ *   - A sole `ButtonGroup` / `Stack` / `Slot` child is treated as the Figma
+ *     composite and is not re-stretched internally.
  *
  * @example
  * ```tsx
- * <ActionFooter modes={modes}>
+ * // Legacy — still the recommended simple path
+ * <ActionFooter>
  *   <IconButton iconName="ic_split" />
  *   <Button label="Request" modes={{ AppearanceBrand: 'Secondary' }} />
  *   <Button label="Pay" modes={{ AppearanceBrand: 'Primary' }} />
  * </ActionFooter>
+ *
+ * // Figma shape + title
+ * <ActionFooter title="Confirm payment">
+ *   <ButtonGroup>
+ *     <Button label="Request" modes={{ AppearanceBrand: 'Secondary' }} />
+ *     <Button label="Pay" modes={{ AppearanceBrand: 'Primary' }} />
+ *   </ButtonGroup>
+ * </ActionFooter>
  * ```
  */
-declare function ActionFooter({ children, modes, style, accessibilityLabel, }: ActionFooterProps): import("react/jsx-runtime").JSX.Element;
+declare function ActionFooter({ avoidKeyboard, ...props }: ActionFooterProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof ActionFooter>;
 export default _default;
 //# sourceMappingURL=ActionFooter.d.ts.map

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

@@ -2,6 +2,13 @@ import React from 'react';
 import { type AccessibilityState, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
 import { type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils';
 import type { Modes } from '../../design-tokens';
+/**
+ * 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`
+ */
+export type ButtonType = 'default' | 'glass' | 'fixed';
 export type ButtonProps = SafePressableProps & {
     label?: string;
     children?: React.ReactNode;
@@ -29,6 +36,22 @@ export type ButtonProps = SafePressableProps & {
      * Takes precedence over `trailing` if both are provided.
      */
     icon?: string;
+    /**
+     * Visual/layout type matching the Figma `Type` property. Defaults to
+     * `'default'`. `'glass'` also activates when `modes['Button type'] === 'glass'`.
+     */
+    type?: ButtonType;
+    /**
+     * Glass-only override for the translucent overlay color painted over the live
+     * blur. Defaults to the resolved `button/background` token under
+     * `Button type=glass`. Ignored for non-glass types.
+     */
+    glassOverlayColor?: string;
+    /**
+     * Glass-only override for blur intensity on the 0–100 scale. Defaults to the
+     * `blur/minimal` token. Ignored for non-glass types.
+     */
+    glassIntensity?: number;
     modes?: Modes;
     onPress?: () => void;
     disabled?: boolean;
@@ -90,7 +113,7 @@ export type ButtonProps = SafePressableProps & {
  *    advantage of this should pass stable `modes` (the default `EMPTY_MODES`
  *    is already stable) and stable callback props.
  */
-declare function ButtonImpl({ label, children, renderContent, leading, trailing, icon, modes, onPress, disabled, style, labelStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, loading, disableTruncation, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function ButtonImpl({ label, children, renderContent, leading, trailing, icon, type, glassOverlayColor, glassIntensity, modes, onPress, disabled, style, labelStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, loading, disableTruncation, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 declare const Button: React.MemoExoticComponent<typeof ButtonImpl>;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map

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

@@ -8,7 +8,7 @@ export type ButtonGroupProps = {
      */
     children?: React.ReactNode;
     /**
-     * Mode configuration for design tokens (e.g., {"Button / Size": "M", "Appearance": "high"})
+     * Mode configuration for design tokens (e.g., {"Button / Size": "M", "Emphasis": "High"})
      * These modes are passed down to all child components.
      */
     modes?: Modes;
@@ -28,7 +28,7 @@ export type ButtonGroupProps = {
  * @component
  * @example
  * ```jsx
- * <ButtonGroup modes={{"Appearance": "light"}}>
+ * <ButtonGroup modes={{"Color Mode": "Light"}}>
  *   <IconButton iconName="ic_qr_code" />
  *   <Button label="Pay" />
  * </ButtonGroup>

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

@@ -1,68 +1,97 @@
 import React from 'react';
 import { type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
 import type { Modes } from '../../design-tokens';
+/** Canonical variant values. Maps 1:1 to Figma `Property 1`. */
+export type CardVariant = 'default' | 'slim';
+/**
+ * Accepts both the canonical lowercase API and Figma's PascalCase property
+ * values so Code Connect / design tooling can pass either.
+ */
+export type CardVariantInput = CardVariant | 'Default' | 'Slim';
+/**
+ * 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 declare const CARD_MEDIA_ASPECT_RATIO: number;
 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.
+     * Visual layout variant matching Figma `Property 1`.
+     * - `'default'` — header + optional media + content (Figma Default)
+     * - `'slim'` — header + content only; `media` is ignored (Figma Slim)
+     *
+     * Defaults to `'default'`. Existing call sites that omit `media` continue
+     * to render a media-less default card (backward compatible). Prefer
+     * `variant="slim"` when you want the Slim contract explicitly.
      */
-    header?: React.ReactNode;
+    variant?: CardVariantInput;
     /**
-     * The content to be rendered in the media slot (e.g. an Image).
-     * This content is wrapped in a container that respects the `aspectRatio`.
+     * Content rendered in the header slot at the top of the card (e.g. a brand
+     * logo). Sits above the media slot, padded with `card/content/padding/*`.
      */
-    media?: React.ReactNode;
+    header?: React.ReactNode;
     /**
-     * Content to render inside the card (e.g. Card.Title, Card.SupportText).
+     * Media slot content (e.g. `<Image />`). Wrapped in a container that
+     * respects `mediaAspectRatio`. Ignored when `variant="slim"`.
      */
+    media?: React.ReactNode;
+    /** Content slot (e.g. `Card.Title`, `Card.SupportText`). */
     children?: React.ReactNode;
-    /**
-     * Modes object for token resolution (e.g. { "Mode": "Dark" }).
-     */
+    /** Modes object for token resolution. Cascades into all slots. */
     modes?: Modes;
     /**
      * Aspect ratio for the media slot container.
-     * Default is based on Figma design 154/116 (~1.328).
+     * Defaults to the Figma Ratio 154/116 (~1.328).
      */
     mediaAspectRatio?: number;
-    /**
-     * Style overrides for the card container.
-     */
+    /** Style overrides for the card container. */
     style?: StyleProp<ViewStyle>;
     /**
      * Press handler for the whole card. When set, the card becomes pressable
-     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     * (`Pressable` + `accessibilityRole="button"`).
      */
     onPress?: () => void;
     /** Disable interaction when `onPress` is set. */
     disabled?: boolean;
-    /** Accessibility label forwarded to the pressable wrapper. */
+    /** Accessibility label forwarded to the root. */
     accessibilityLabel?: string;
 }
 /**
- * Card component implementation from Figma node 765:6186.
+ * `Card` — Figma node 5739:794 (`Property 1=Default` / `Property 1=Slim`).
  *
- * 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:
+ * 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 declare function Card({ header, media, children, modes, mediaAspectRatio, style, onPress, disabled, accessibilityLabel, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ variant: variantProp, header, media, children, modes: propModes, mediaAspectRatio, style, onPress, disabled, accessibilityLabel, }: 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;
+    var Title: ({ children, style, modes: propModes, numberOfLines, }: CardTextProps) => import("react/jsx-runtime").JSX.Element;
+    var SupportText: ({ children, style, modes: propModes, numberOfLines, }: CardTextProps) => import("react/jsx-runtime").JSX.Element;
 }
 export interface CardTextProps {
     children?: React.ReactNode;
     style?: StyleProp<TextStyle>;
     modes?: Modes;
+    /**
+     * Line clamp before ellipsis. `Card.Title` defaults to `3` (Figma).
+     * Pass a different number to override, or `0` for no clamp.
+     */
+    numberOfLines?: number;
 }
 export default Card;
 //# sourceMappingURL=Card.d.ts.map

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

@@ -6,21 +6,32 @@ export type CategoryCardProps = SafePressableProps & {
     /** Bottom label (e.g. `"Popular"`). */
     label?: string;
     /**
-     * Image shown in the card centre. Ignored when `imageSlot` is provided.
-     * Accepts a remote URL string, `{ uri }` object, or `require()`-ed asset.
+     * Image shown in the card centre. Ignored when `imageSlot` / `children` is
+     * provided. Accepts a remote URL string, `{ uri }` object, or `require()`-ed
+     * asset.
      */
     imageSource?: ImageSourcePropType | string;
     /**
-     * Slot replacing the default `Image`. Receives `modes` recursively so inner
-     * components inherit theming.
+     * Slot replacing the default `Image` (Figma Image instance / Code Connect).
+     * Receives `modes` recursively so inner components inherit theming.
+     * Prefer this or `children` when swapping the media.
      */
     imageSlot?: React.ReactNode;
+    /**
+     * Alias for {@link imageSlot} — the Figma image slot. When both are set,
+     * `imageSlot` wins so existing `imageSlot` callers stay authoritative.
+     */
+    children?: React.ReactNode;
     /**
      * Optional badge label rendered as an overlapping pill at the top edge.
      * Omit or pass `undefined` to hide the badge.
      */
     badge?: string;
-    /** Whether the card is in the selected / active state. */
+    /**
+     * Whether the card is in the selected / active state (gold stroke).
+     * When omitted, falls back to `modes['Card Tab State'] === 'Active'`
+     * (and the legacy `modes['Category Card State'] === 'Active'` alias).
+     */
     active?: boolean;
     /**
      * Fixed width of the card in dp. Defaults to `60` per the Figma spec.
@@ -28,15 +39,16 @@ export type CategoryCardProps = SafePressableProps & {
     width?: number;
     /**
      * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
-     * shown and any `numberOfLines` clamp is ignored, so the label wraps to as many
-     * lines as it needs even when horizontal space is tight. Same behaviour as
-     * {@link Text}'s `disableTruncation`.
+     * shown and any `numberOfLines` clamp is ignored. Defaults to `true` (same
+     * overflow behaviour as {@link Text}'s `disableTruncation`). Pass `false` to
+     * restore single-line ellipsis clamping.
      */
     disableTruncation?: boolean;
     /**
      * When `true`, forces the label onto a single line with no wrapping (implies
      * `disableTruncation`). On web the line overflows horizontally instead of
-     * wrapping or truncating. Same behaviour as {@link Text}'s `singleLine`.
+     * wrapping or truncating. Defaults to `true` — same API as {@link Text}'s
+     * `singleLine`. Pass `false` to allow wrapping.
      */
     singleLine?: boolean;
     /** Press handler — the card is always a `Pressable`. */
@@ -60,13 +72,18 @@ export type CategoryCardProps = SafePressableProps & {
  * optionally show an overlapping badge at the top edge. Cards are typically
  * laid out in a horizontal `ScrollView` or `HStack`.
  *
- * All visual values resolve through the `cardTab/*` design tokens with
- * sensible Figma defaults so the card renders correctly out of the box.
+ * Selection is communicated with a gold stroke (`Card Tab State = Active`);
+ * the surface stays white in both Idle and Active. All visual values resolve
+ * through the `cardTab/*` design tokens with sensible Figma defaults so the
+ * card renders correctly out of the box.
+ *
+ * The image area is a real slot (`imageSlot` or `children`) matching the Figma
+ * Image instance — omit both to keep the default `Image`.
  *
  * @component
  * @param {CategoryCardProps} props
  */
-declare function CategoryCard({ label, imageSource, imageSlot, badge, active, width, disableTruncation, singleLine, onPress, disabled, modes: propModes, style, labelStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, testID, ...rest }: CategoryCardProps): import("react/jsx-runtime").JSX.Element;
+declare function CategoryCard({ label, imageSource, imageSlot, children, badge, active: activeProp, width, disableTruncation, singleLine, onPress, disabled, modes: propModes, style, labelStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, testID, ...rest }: CategoryCardProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof CategoryCard>;
 export default _default;
 //# sourceMappingURL=CategoryCard.d.ts.map

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

@@ -13,9 +13,13 @@ export type CheckboxItemProps = {
     /**
      * Content rendered in the row's label slot (between the leading and trailing
      * edges). This is the primary way to supply the label and mirrors the Figma
-     * "slot" — pass a plain string for the default token-styled label, or any
-     * custom node (e.g. a `<Text>`, a row of `<Text>` + `<Badge>`, etc.) for full
-     * control. Custom nodes receive the same `modes` as the parent.
+     * "Text" slot — pass a plain string for the default token-styled label, or any
+     * custom node(s) for full control.
+     *
+     * Multiple children are laid out in a horizontal row with `slot/gap` (Figma
+     * default `Slot gap = XS` → 2px), matching the `Text` + `Link` composition in
+     * the design. A single custom node (e.g. a vertical stack) is left as-is.
+     * Custom nodes receive the same `modes` as the parent.
      *
      * When both `children` and the legacy {@link label} prop are provided,
      * `children` wins.
@@ -33,7 +37,8 @@ export type CheckboxItemProps = {
     /**
      * Position of the checkbox control relative to the label.
      * - `'leading'` (default): checkbox is rendered on the left, then label, then optional `endSlot` on the right.
-     * - `'trailing'`: optional `endSlot` is rendered on the left, then label, then checkbox on the right.
+     * - `'trailing'`: optional `endSlot` is rendered on the left, then label, then checkbox on the right
+     *   (row uses `space-between` so the checkbox sits on the trailing edge).
      *
      * Matches the Figma "Control" variant on the Checkbox Item component.
      */
@@ -41,7 +46,8 @@ export type CheckboxItemProps = {
     /**
      * Optional content rendered in the row's end slot (e.g. a `Button`). When provided,
      * it receives the same `modes` as the parent. Wrapped in a fixed-width container
-     * matching the Figma `endSlot` design.
+     * matching the Figma `endSlot` design. Presses on the end slot do not toggle
+     * the checkbox.
      *
      * Placement depends on `control`:
      * - With `control="leading"` the slot appears on the right edge (after the label).
@@ -60,15 +66,21 @@ export type CheckboxItemProps = {
     accessibilityLabel?: string;
 };
 /**
- * CheckboxItem composes a `Checkbox`, a label and an optional `endSlot` into a
+ * CheckboxItem composes a `Checkbox`, a label slot and an optional `endSlot` into a
  * single horizontal pressable row. Pressing anywhere on the row (outside of the
- * `endSlot`) toggles the checkbox, mirroring the typical native form pattern.
+ * `endSlot` and nested interactive children such as `Link`) toggles the checkbox,
+ * mirroring the typical native form pattern.
  *
  * Use the `control` prop to swap the checkbox between the leading (left, default)
  * and trailing (right) edge of the row. The `endSlot` flips to the opposite edge.
  *
+ * The Figma default composition places `Text` + `Link` in the label slot
+ * ("I agree" + "Terms & Conditions"). Pass those as `children` — the slot lays
+ * multiple children out in a horizontal row with `slot/gap`.
+ *
  * Mirrors the Figma "Checkbox Item" component and uses the `checkboxItem/*`
- * design tokens for typography and spacing.
+ * design tokens for row spacing; string labels still resolve `checkboxItem/label/*`
+ * for backward-compatible typography.
  *
  * @component
  * @param {CheckboxItemProps} props
@@ -77,13 +89,19 @@ export type CheckboxItemProps = {
  * ```tsx
  * const [checked, setChecked] = useState(false)
  *
- * // Recommended: pass the label via the children slot.
+ * // Figma default composition — Text + Link in the label slot.
  * <CheckboxItem
  *   checked={checked}
  *   onValueChange={setChecked}
  *   control="leading"
  *   modes={{ 'Color Mode': 'Light' }}
  * >
+ *   <Text text="I agree" autolayout="Hug" />
+ *   <Link text="Terms & Conditions" autolayout="Hug" onPress={openTerms} />
+ * </CheckboxItem>
+ *
+ * // Plain string (still supported).
+ * <CheckboxItem checked={checked} onValueChange={setChecked}>
  *   Fixed deposit • 0245
  * </CheckboxItem>
  *

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

@@ -1,8 +1,27 @@
-import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import React from 'react';
+import { type StyleProp, type ViewStyle, type TextStyle, type GestureResponderEvent } from 'react-native';
 import type { Modes } from '../../design-tokens';
 export type ExpandableCheckboxProps = {
-    /** Long text label rendered next to the checkbox. */
+    /**
+     * Primary label rendered next to the checkbox (Figma `Text` instance).
+     * Ignored when {@link children} is provided.
+     */
     label?: string;
+    /**
+     * Optional underlined link rendered after {@link label} (Figma `Link`
+     * instance, e.g. "Terms & Conditions"). Ignored when {@link children} is
+     * provided.
+     */
+    linkLabel?: string;
+    /** Press handler for {@link linkLabel}. Navigation is left to the consumer. */
+    onLinkPress?: (event: GestureResponderEvent) => void;
+    /**
+     * Full label-slot override matching the Figma Checkbox Item `slot`. When
+     * provided, {@link label} / {@link linkLabel} are ignored and `modes` are
+     * cascaded into the slot children. Prefer this for fully custom label
+     * compositions.
+     */
+    children?: React.ReactNode;
     /** Whether the checkbox is checked (controlled). */
     checked?: boolean;
     /** Initial checked state (uncontrolled). */
@@ -33,20 +52,24 @@ export type ExpandableCheckboxProps = {
     modes?: Modes;
     /** Override outer container styles. */
     style?: StyleProp<ViewStyle>;
-    /** Override the label text styles. */
+    /**
+     * Override styles applied to the composed {@link label} `Text`. No-op when
+     * {@link children} is provided.
+     */
     labelStyle?: StyleProp<TextStyle>;
     /** Accessibility label for the checkbox. Falls back to `label`. */
     accessibilityLabel?: string;
 };
 /**
- * ExpandableCheckbox composes a `Checkbox`, a long-form label and a
- * "Read more" / "Read less" toggle. Mirrors the Figma "Expandable Checkbox"
- * component with two states:
+ * ExpandableCheckbox composes a `CheckboxItem` (checkbox + label slot), optional
+ * `Text`/`Link` label content, and a "Read more" / "Read less" toggle. Mirrors
+ * the Figma "Expandable Checkbox" component with two states:
  *
- *  - **Idle (collapsed)** — checkbox + truncated label + toggle button arranged
- *    in a horizontal row (cross-axis centered).
- *  - **Open (expanded)** — checkbox + full multi-line label, with the toggle
- *    button right-aligned beneath the row.
+ *  - **Idle (collapsed)** — horizontal row: CheckboxItem (fill) + toggle button
+ *    (hug), cross-axis centered.
+ *  - **Open (expanded)** — vertical stack aligned to the end: CheckboxItem with
+ *    the label slot wrapped in a `ScrollArea` (capped by `checkbox/maxHeight`),
+ *    then the toggle button right-aligned beneath.
  *
  * The checkbox and the toggle button have independent press handlers — pressing
  * the toggle does not affect the checked state, and toggling the checkbox does
@@ -58,13 +81,15 @@ export type ExpandableCheckboxProps = {
  * @example
  * ```tsx
  * <ExpandableCheckbox
- *   label="By checking this box, I (a) acknowledge and (b) agree to the full terms…"
+ *   label="I agree"
+ *   linkLabel="Terms & Conditions"
+ *   onLinkPress={openTerms}
  *   defaultChecked
  *   onValueChange={setAccepted}
  *   modes={{ 'Color Mode': 'Light' }}
  * />
  * ```
  */
-declare function ExpandableCheckbox({ label, checked: controlledChecked, defaultChecked, onValueChange, expanded: controlledExpanded, defaultExpanded, onExpandedChange, disabled, readMoreLabel, readLessLabel, collapsedLines, disableTruncation, modes, style, labelStyle, accessibilityLabel, }: ExpandableCheckboxProps): import("react/jsx-runtime").JSX.Element;
+declare function ExpandableCheckbox({ label, linkLabel, onLinkPress, children, checked: controlledChecked, defaultChecked, onValueChange, expanded: controlledExpanded, defaultExpanded, onExpandedChange, disabled, readMoreLabel, readLessLabel, collapsedLines, disableTruncation, modes, style, labelStyle, accessibilityLabel, }: ExpandableCheckboxProps): import("react/jsx-runtime").JSX.Element;
 export default ExpandableCheckbox;
 //# sourceMappingURL=ExpandableCheckbox.d.ts.map

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

@@ -26,7 +26,7 @@ type IconCapsuleProps = {
  * @param {Object} props - Component props
  * @param {string} [props.iconName="ic_card"] - The name of the icon to display from the icon registry
  * @param {UnifiedSource} [props.source] - Fallback source (remote URI, inline SVG XML, `require()` asset, SVG React component, or React element). Used when `iconName` is missing or unknown. Tinted with the mode-resolved icon color so it follows design tokens just like a built-in icon.
- * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Appearance": "Primary"})
+ * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"AppearanceBrand": "Primary"})
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers
  * @param {string} [props.accessibilityRole] - Accessibility role (defaults to "image" for decorative icons)
  *

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

@@ -13,8 +13,9 @@ export type MetricDataProps = {
     caption?: string;
     /**
      * Optional glyph shown to the left of the value. Pass a registry icon name
-     * (e.g. `'ic_card'`) or a custom node. Rendered at 18px, tinted to the value
-     * colour. Hidden when omitted.
+     * (e.g. `'ic_card'`) or a custom node. Size/colour resolve from `icon/size`
+     * and `icon/color` (Figma seeds `AppearanceBrand: Secondary` → purple).
+     * Opt-in — omitted keeps existing no-icon instances unchanged.
      */
     icon?: string | React.ReactNode;
     /** Design-token modes for theming. */
@@ -37,9 +38,10 @@ export type MetricDataProps = {
  * MetricData — a compact, centered metric block.
  *
  * Stacks a small `title`, a prominent `value` (with an optional leading
- * `icon`), and a muted `caption`. Typography, colours, gaps and padding all
- * resolve from the `metricdata/*` design tokens. `title`, `caption` and `icon`
- * are optional; only `value` is shown by default.
+ * `icon` in a `value wrap` row), and a muted `caption`. Typography, colours,
+ * gaps and padding resolve from the `metricdata/*` design tokens; the leading
+ * glyph uses `icon/*`. `title`, `caption` and `icon` are optional — omit
+ * `icon` to keep the legacy text-only layout.
  *
  * @example
  * ```tsx

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

@@ -3,15 +3,24 @@ import { type ViewStyle, type StyleProp, type ImageSourcePropType } from 'react-
 import type { Modes } from '../../design-tokens';
 /**
  * A single metric column inside the card's stats row: a small title, a bold
- * value and an optional muted caption.
+ * value (optionally preceded by an icon) and an optional muted caption.
  */
 export interface PdpCcCardMetric {
     /** Small label rendered above the value (e.g. `"Weight"`). */
     title?: string;
-    /** The prominent value (e.g. `"24K"`). */
-    value?: string;
+    /**
+     * The prominent value (e.g. `"24K"`). Accepts a string or any node
+     * (e.g. a `MoneyValue`) for richer composition.
+     */
+    value?: string | React.ReactNode;
     /** Optional muted caption rendered below the value. */
     caption?: string;
+    /**
+     * Optional glyph shown to the left of the value. Pass a registry icon name
+     * (e.g. `'ic_card'`) or a custom node. Opt-in — omit to keep the legacy
+     * text-only metric column.
+     */
+    icon?: string | React.ReactNode;
 }
 export interface PdpCcCardProps {
     /**
@@ -59,7 +68,7 @@ export interface PdpCcCardProps {
     /**
      * The metric columns rendered in the stats row. Vertical dividers are
      * inserted automatically between adjacent metrics. Defaults to two sample
-     * metrics.
+     * metrics (with leading icons) matching the Figma default.
      */
     metrics?: PdpCcCardMetric[];
     /** CTA button label. Defaults to `"button"`. */
@@ -96,8 +105,9 @@ export interface PdpCcCardProps {
  *    `imageSource` for the default image or `media` for a full slot override.
  *  - **Title** — a centered headline + subtitle rendered through the shared
  *    {@link Title} component (`title/*`, `pageSubtitle/*` tokens).
- *  - **Metrics** — a row of {@link PdpCcCardMetric} columns (title / value /
- *    caption) separated by vertical `Divider`s (`metricdata/*` tokens).
+ *  - **Metrics** — a row of {@link PdpCcCardMetric} columns composed via
+ *    {@link MetricData} (title / optional icon + value / caption) separated by
+ *    vertical `Divider`s (`metricdata/*`, `icon/*` tokens).
  *  - **CTA** — a small tonal {@link Button} (`Button / Size: S`,
  *    `AppearanceBrand: Secondary`, `Emphasis: Medium`) with a leading icon.
  *