jfs-components 0.1.25 → 0.1.30

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

@@ -0,0 +1,15 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export type AutoplayControlProps = {
+    state?: 'pause' | 'play';
+    modes?: Modes;
+    onPress?: () => void;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * AutoplayControl is a button component that toggles between play and pause states.
+ * All styling values are resolved from Figma design tokens.
+ */
+export default function AutoplayControl({ state, modes, onPress, disabled, style, }: AutoplayControlProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AutoplayControl.d.ts.map

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

@@ -28,12 +28,19 @@ export interface CarouselProps {
     paddingHorizontal?: number;
     /** Explicit vertical padding (px) for the outer container. Overrides `carousel/padding/vertical`. */
     paddingVertical?: number;
+    /**
+     * Carousel visual type.
+     * - `'Default'` — standard carousel with dot pagination below.
+     * - `'Numbered'` — full-bleed carousel with floating AutoplayControl and
+     *   NumberPagination overlaid at the bottom center.
+     */
+    type?: 'Default' | 'Numbered';
     /** Called when the active index changes. */
     onIndexChange?: (index: number) => void;
     /** Style overrides for the outermost container. */
     style?: StyleProp<ViewStyle>;
 }
-export declare function Carousel({ children, modes, autoPlay, autoPlayInterval, showPagination, loop, gap: gapProp, itemWidth: itemWidthProp, paddingHorizontal: paddingHorizontalProp, paddingVertical: paddingVerticalProp, onIndexChange, style, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+export declare function Carousel({ children, modes, autoPlay, autoPlayInterval, showPagination, loop, gap: gapProp, itemWidth: itemWidthProp, paddingHorizontal: paddingHorizontalProp, paddingVertical: paddingVerticalProp, type, onIndexChange, style, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Carousel {
     var Item: typeof import("./Carousel").Item;
     var Pagination: typeof import("./Carousel").Pagination;

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

@@ -76,6 +76,26 @@ export type CompareTableProps = {
      * lines as it needs even when horizontal space is tight.
      */
     disableTruncation?: boolean;
+    /**
+     * Fixed width (px) for every selection card and every table cell — all
+     * columns share this width. When set, the component enters **scroll mode**:
+     *
+     *  - The cards row and each section's table body become independent
+     *    horizontal `ScrollView`s whose scroll events are **chained** — moving
+     *    one moves every other in lockstep (the cards always stay aligned with
+     *    the cells beneath them).
+     *  - The cards row becomes a **sticky header** at the top: it pins in place
+     *    on the vertical axis (does not scroll away) while the sections scroll
+     *    beneath it. Requires the host to give `CompareTable` a bounded height.
+     *  - The gray table-header rows (each section's `header`) are rendered
+     *    full-width **outside** the horizontal scroll, so they stay put
+     *    horizontally (they don't slide with the cells) while still scrolling
+     *    vertically with the table.
+     *
+     * Omit to keep the original flex layout (columns share the available width,
+     * no scrolling). @default undefined
+     */
+    columnWidth?: number;
 };
 /**
  * CompareTable renders a product comparison surface: a row of selection cards
@@ -89,6 +109,6 @@ export type CompareTableProps = {
  *
  * @component
  */
-declare function CompareTable({ columns, sections, onAddColumn, addColumnLabel, maxColumns, modes, style, disableTruncation, }: CompareTableProps): import("react/jsx-runtime").JSX.Element;
+declare function CompareTable({ columns, sections, onAddColumn, addColumnLabel, maxColumns, modes, style, disableTruncation, columnWidth, }: CompareTableProps): import("react/jsx-runtime").JSX.Element;
 export default CompareTable;
 //# sourceMappingURL=CompareTable.d.ts.map

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

@@ -15,6 +15,12 @@ export type ContentSheetProps = {
      * the same theme without you wiring `modes` onto each one.
      */
     modes?: Modes;
+    /**
+     * Optional title rendered in a centered, sticky header at the top of the
+     * sheet. Uses the same `drawer/title*` token family as the `Drawer` title so
+     * the two surfaces stay visually consistent.
+     */
+    title?: string;
     /**
      * Keep the sheet above the on-screen keyboard. When the keyboard opens the
      * sheet rises by exactly the keyboard height; when it closes the sheet drops
@@ -47,6 +53,19 @@ export type ContentSheetProps = {
      * works in both modes.
      */
     pinToBottom?: boolean;
+    /**
+     * Controls whether the sheet is on-screen. When this becomes `true` the sheet
+     * springs up from the bottom edge (off-screen → on-screen) using the same
+     * spring as the {@link Drawer} (`damping: 32`, `stiffness: 300`); when it
+     * becomes `false` it springs back down below the bottom edge. The sheet pops
+     * up on mount by default.
+     *
+     * The animation runs entirely on the UI thread via `react-native-reanimated`
+     * (no re-renders) and composes with keyboard avoidance — the entrance
+     * `translateY` and the keyboard `translateY` are summed in a single
+     * `useAnimatedStyle`. Default `true`.
+     */
+    visible?: boolean;
     /** Optional style override applied to the sheet container. */
     style?: StyleProp<ViewStyle>;
 } & Omit<ViewProps, 'style' | 'children'>;
@@ -66,6 +85,6 @@ export type ContentSheetProps = {
  *  - **Token-driven** styling via `getVariableByName` + `modes`, with `modes`
  *    cascaded to all slot children.
  */
-declare function ContentSheet({ children, modes, avoidKeyboard, keyboardSpacing, safeAreaBottom, pinToBottom, style, ...rest }: ContentSheetProps): import("react/jsx-runtime").JSX.Element;
+declare function ContentSheet({ children, modes, title, avoidKeyboard, keyboardSpacing, safeAreaBottom, pinToBottom, visible, style, ...rest }: ContentSheetProps): import("react/jsx-runtime").JSX.Element;
 export default ContentSheet;
 //# sourceMappingURL=ContentSheet.d.ts.map

package/lib/typescript/src/components/FormUpload/Additem.d.ts

@@ -0,0 +1,96 @@
+import React from 'react';
+import { type ImageSourcePropType } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export type PickedAsset = {
+    /** URI to the selected file (image, video, or document). */
+    uri: string;
+    /** Original file name, when available. */
+    name?: string;
+    /** MIME type, when available. */
+    type?: string;
+    /** File size in bytes, when available. */
+    size?: number;
+    /** Image/video width in pixels, when available. */
+    width?: number;
+    /** Image/video height in pixels, when available. */
+    height?: number;
+};
+export type AdditemPickerResult = {
+    /** `true` when the user cancelled the picker. */
+    didCancel?: boolean;
+    /** Selected assets. Empty when cancelled. */
+    assets: PickedAsset[];
+    /** Native error message, when something went wrong. */
+    error?: string;
+};
+/**
+ * Callback that opens a platform picker and resolves with the selected assets.
+ * This is the integration point for libraries like `react-native-image-picker`,
+ * `expo-image-picker`, or `react-native-document-picker`.
+ */
+export type AdditemPicker = () => Promise<AdditemPickerResult>;
+export type AdditemState = 'empty' | 'preview';
+export type AdditemProps = {
+    /**
+     * Visual state of the item.
+     * - `'empty'` — shows the add/upload icon (default).
+     * - `'preview'` — shows `imageSource` and a remove icon overlay.
+     */
+    state?: AdditemState;
+    /**
+     * Image to preview when `state` is `'preview'`. Accepts the same shapes as
+     * the library's `Image` component (remote URI string, `{ uri }`, or `require()`).
+     */
+    imageSource?: ImageSourcePropType | string | undefined;
+    /**
+     * Called when the cell is pressed. In `'empty'` mode this is typically where
+     * the picker is launched; in `'preview'` mode it can open a preview/lightbox.
+     */
+    onPress?: () => void;
+    /**
+     * Called when the remove icon overlay is pressed in `'preview'` mode.
+     * Receives the press event so the parent can stop propagation if needed.
+     */
+    onRemove?: () => void;
+    /**
+     * Optional picker to invoke when the empty cell is pressed. When provided,
+     * `onPress` is ignored for the empty state and the cell becomes a real
+     * upload trigger that resolves with picked assets via `onAssetsPicked`.
+     */
+    picker?: AdditemPicker;
+    /**
+     * Called after a successful picker invocation with the selected assets.
+     */
+    onAssetsPicked?: (assets: PickedAsset[]) => void;
+    /**
+     * Modes for design-token resolution. Defaults to Neutral / Low / Icon Capsule
+     * Size S for the inner `IconCapsule` icons; any key supplied here overrides
+     * those defaults.
+     */
+    modes?: Modes;
+    /**
+     * Accessibility label. Defaults to a descriptive label based on state.
+     */
+    accessibilityLabel?: string;
+    /**
+     * Disables press interaction. Also dims the cell.
+     */
+    isDisabled?: boolean;
+    /** Test identifier. */
+    testID?: string;
+};
+/**
+ * `Additem` — a small, reusable upload/preview cell used inside form uploaders.
+ *
+ * In its default `'empty'` state it shows a centered add/upload icon. In
+ * `'preview'` state it renders a thumbnail with a removable overlay. The
+ * component is intentionally unopinionated about *how* files are picked: pass a
+ * `picker` callback that wraps `react-native-image-picker`,
+ * `expo-image-picker`, `react-native-document-picker`, or any custom selector,
+ * and the cell will invoke it, surface the result via `onAssetsPicked`, and
+ * handle cancellation/errors gracefully.
+ */
+declare function Additem({ state, imageSource, onPress, onRemove, picker, onAssetsPicked, modes: propModes, accessibilityLabel, isDisabled, testID, }: AdditemProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Additem>;
+export default _default;
+//# sourceMappingURL=Additem.d.ts.map

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type AdditemProps, type PickedAsset } from './Additem';
+import type { Modes } from '../../design-tokens';
+export type FormUploadAttachment = PickedAsset;
+export type FormUploadProps = {
+    /** Label rendered above the upload row. */
+    label?: string;
+    /**
+     * Helper text rendered below the upload row. When `errorMessage` is provided,
+     * it replaces the support text and renders in the error status.
+     */
+    supportText?: string;
+    /**
+     * Field name. When used inside `<Form>`, this is the key used to look up
+     * server-side `validationErrors`.
+     */
+    name?: string;
+    /**
+     * Controlled list of attachments. Each item maps to an `Additem` cell:
+     * render attachments as `'preview'` cells and leave the last slot as the
+     * `'empty'` upload trigger.
+     */
+    attachments?: FormUploadAttachment[];
+    /**
+     * Maximum number of attachments allowed. When omitted, the component renders
+     * a single empty upload trigger. Once `attachments.length` reaches `maxCount`,
+     * the empty trigger is hidden.
+     */
+    maxCount?: number;
+    /**
+     * Called when the attachment list should change (add or remove). The parent
+     * is responsible for updating the `attachments` array.
+     */
+    onAttachmentsChange?: (attachments: FormUploadAttachment[]) => void;
+    /**
+     * Optional picker injected by the parent. This keeps the component free of
+     * native-library dependencies while still providing real upload behaviour on
+     * iOS/Android. The picker should wrap `react-native-image-picker`,
+     * `expo-image-picker`, `react-native-document-picker`, etc.
+     */
+    picker?: AdditemProps['picker'];
+    /**
+     * Error message shown below the row. When provided inside `<Form>`, the form
+     * context error is used automatically unless this prop is set explicitly.
+     */
+    errorMessage?: string;
+    /** Marks the field as invalid. Also set automatically by `<Form>` errors. */
+    isInvalid?: boolean;
+    /** Disables all upload interaction. */
+    isDisabled?: boolean;
+    /**
+     * Custom children/slot rendered in place of the generated `Additem` cells.
+     * Useful when the consumer wants full control over the upload row. `modes`
+     * cascade into slot children automatically.
+     */
+    children?: React.ReactNode;
+    /** Modes for design-token resolution. */
+    modes?: Modes;
+    /** Style overrides for the outermost wrapper. */
+    style?: StyleProp<ViewStyle>;
+    /** Style overrides for the upload row container. */
+    rowStyle?: StyleProp<ViewStyle>;
+    /** Accessibility label. Defaults to `label`. */
+    accessibilityLabel?: string;
+    /** Test identifier. */
+    testID?: string;
+};
+/**
+ * `FormUpload` — a form-aware upload row built from reusable `Additem` cells.
+ *
+ * The component mirrors the Figma "FormUpload" design: a label, a horizontal
+ * row of upload/preview cells, and support text. It integrates with the
+ * existing `<Form>` context so server-side validation errors automatically
+ * show below the row, and it clears those errors when attachments change.
+ *
+ * Upload behaviour is provided through the `picker` prop so the library stays
+ * free of native image-picker dependencies. Pass any picker that returns the
+ * `AdditemPickerResult` shape and the empty cell becomes a real upload trigger
+ * on both iOS and Android.
+ */
+declare function FormUpload({ label, supportText, name, attachments, maxCount, onAttachmentsChange, picker, errorMessage, isInvalid, isDisabled, children, modes: propModes, style, rowStyle, accessibilityLabel, testID, }: FormUploadProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormUpload>;
+export default _default;
+//# sourceMappingURL=FormUpload.d.ts.map

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export type GridJustifyContent = 'start' | 'stretch' | 'space-between';
+export type GridAlignItems = 'start' | 'stretch' | 'center';
+export type GridProps = {
+    /**
+     * Number of columns per row. Defaults to `1`. Children flow left-to-right,
+     * top-to-bottom into this many columns.
+     */
+    columns?: number;
+    /**
+     * Fixed row count. When set, the grid always renders `columns × rows` cells.
+     * Missing cells render as empty placeholders so the geometry stays stable.
+     * When omitted, the row count is derived from the number of children.
+     */
+    rows?: number;
+    /**
+     * Fractional column track weights — the React Native equivalent of CSS
+     * `grid-template-columns: 1fr 2fr 1fr`. Each value becomes a `flex` grow
+     * weight on the matching column. Shorter arrays repeat the last weight;
+     * omitted values default to equal `1fr` columns.
+     */
+    columnFrs?: readonly number[];
+    /**
+     * Fractional row track weights. When provided, each row container receives
+     * a matching `flexGrow` weight. Useful when the grid should fill a fixed
+     * height and rows should share space proportionally.
+     */
+    rowFrs?: readonly number[];
+    /** Override the resolved column gap token. */
+    columnGap?: number;
+    /** Override the resolved row gap token. */
+    rowGap?: number;
+    /**
+     * Shorthand gap override applied when `columnGap` / `rowGap` are not set
+     * individually. Falls back to the `Grid/gap` token.
+     */
+    gap?: number;
+    /** Uniform padding override for all sides. */
+    padding?: number;
+    paddingHorizontal?: number;
+    paddingVertical?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    paddingRight?: number;
+    /**
+     * How cells are distributed along each row.
+     * - `'stretch'` (default) — cells expand using `columnFrs`.
+     * - `'start'` — cells hug the leading edge; trailing space stays empty.
+     * - `'space-between'` — leftover space is distributed between cells
+     *   (first cell flush-left, last cell flush-right).
+     */
+    justifyContent?: GridJustifyContent;
+    /** Cross-axis alignment applied to every cell wrapper. Defaults to `'stretch'`. */
+    alignItems?: GridAlignItems;
+    /**
+     * Slot content. Each child becomes one grid cell. `modes` cascade into all
+     * slot children automatically.
+     */
+    children?: React.ReactNode;
+    /** Design token modes (e.g. `{ 'Slot gap': 'M' }`). */
+    modes?: Modes;
+    /** Style override for the outer container. */
+    style?: StyleProp<ViewStyle>;
+    /** Style override for the inner rows wrapper. */
+    contentStyle?: StyleProp<ViewStyle>;
+    /** Style applied to every cell wrapper. */
+    cellStyle?: StyleProp<ViewStyle>;
+    /** Accessibility label for the grid container. */
+    accessibilityLabel?: string;
+    testID?: string;
+};
+/**
+ * `Grid` — a token-driven layout grid for React Native.
+ *
+ * Mirrors the Figma "Grid" component: a padded container with configurable
+ * columns, rows, fractional column tracks (`columnFrs`), and gap tokens.
+ * Each slot child maps to one cell — no separate `GridItem` wrapper is needed.
+ *
+ * @component
+ */
+declare function Grid({ columns, rows, columnFrs, rowFrs, columnGap: columnGapProp, rowGap: rowGapProp, gap: gapProp, padding: paddingProp, paddingHorizontal: paddingHorizontalProp, paddingVertical: paddingVerticalProp, paddingTop: paddingTopProp, paddingBottom: paddingBottomProp, paddingLeft: paddingLeftProp, paddingRight: paddingRightProp, justifyContent, alignItems, children, modes: propModes, style, contentStyle, cellStyle, accessibilityLabel, testID, }: GridProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Grid>;
+export default _default;
+//# sourceMappingURL=Grid.d.ts.map

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

@@ -12,6 +12,15 @@ export type MoneyValueProps = {
     hidden?: boolean;
     /** When true, a blinking vertical cursor is shown at the end of the value text. */
     focused?: boolean;
+    /**
+     * When true, tapping the component enters an inline edit mode where the value
+     * becomes a numeric TextInput. The user can type digits or delete the existing
+     * amount. Only numeric characters (including one decimal point) are accepted.
+     * On blur or submit the edit is committed and the display restores.
+     */
+    editable?: boolean;
+    /** Called when the value changes during editing (after commit on blur). */
+    onValueChange?: (newValue: string | number) => void;
     /** Modes configuration mapped to Figma tokens. */
     modes?: Modes;
     style?: StyleProp<ViewStyle>;
@@ -32,6 +41,6 @@ export type MoneyValueProps = {
  * the `focused` prop is provided to this component, it will display a natural
  * blinking text cursor.
  */
-declare function MoneyValue({ value, currency, negative, focused, hidden, modes, style, valueStyle, currencyStyle, negativeSignStyle, accessibilityLabel, accessibilityHint, onPress, ...rest }: MoneyValueProps): import("react/jsx-runtime").JSX.Element;
+declare function MoneyValue({ value, currency, negative, focused, hidden, editable, onValueChange, modes, style, valueStyle, currencyStyle, negativeSignStyle, accessibilityLabel, accessibilityHint, onPress, ...rest }: MoneyValueProps): import("react/jsx-runtime").JSX.Element;
 export default MoneyValue;
 //# sourceMappingURL=MoneyValue.d.ts.map

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export type NumberPaginationProps = {
+    /** The 1-based active page index. Ignored if `children` is supplied. Defaults to 1. */
+    activePage?: number;
+    /** The total number of pages. Ignored if `children` is supplied. Defaults to 1. */
+    totalPages?: number;
+    /** Callback fired when a page button is pressed. Ignored if `children` is supplied. */
+    onPageChange?: (page: number) => void;
+    /** Custom children to override the default page buttons. */
+    children?: React.ReactNode;
+    modes?: Modes;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * NumberPagination component displays a horizontal list of page numbers on a frosted glass surface.
+ * All styling is driven by Figma design tokens with support for custom children slot.
+ */
+export default function NumberPagination({ activePage, totalPages, onPageChange, children, modes, style, }: NumberPaginationProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NumberPagination.d.ts.map

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

@@ -32,6 +32,30 @@ export interface PdpCcCardProps {
     title?: string;
     /** Subtitle rendered below the title (14px medium). */
     subtitle?: string;
+    /**
+     * Number of lines to limit the title to. The `Title` component defaults to
+     * `1` when this is unset, so the headline is a single line with an ellipsis
+     * by default. Pass a larger value (e.g. `2`) to allow the title to wrap onto
+     * that many lines before truncating, or set {@link disableTruncation} to
+     * remove the clamp entirely. The subtitle is never line-clamped.
+     */
+    numberOfLines?: number;
+    /**
+     * When `true`, disables truncation for both the title and subtitle: the
+     * trailing ellipsis (`…`) is never shown and the `numberOfLines` clamp is
+     * ignored. The text is also never shrunk by a tight parent — it keeps its
+     * full intrinsic size and overflows (even breaking the parent layout) rather
+     * than ever clipping into an ellipsis. The text still wraps onto multiple
+     * lines.
+     */
+    disableTruncation?: boolean;
+    /**
+     * When `true`, forces both the title and subtitle onto a single line with no
+     * wrapping (implies {@link disableTruncation}). On web the line overflows
+     * horizontally — brutally breaking the parent layout if it has to — instead
+     * of wrapping or truncating.
+     */
+    singleLine?: boolean;
     /**
      * The metric columns rendered in the stats row. Vertical dividers are
      * inserted automatically between adjacent metrics. Defaults to two sample
@@ -79,6 +103,6 @@ export interface PdpCcCardProps {
  *
  * All defaults can be overridden via `modes`.
  */
-declare function PdpCcCard({ imageSource, imageWidth, imageHeight, media, title, subtitle, metrics, buttonLabel, buttonIcon, onButtonPress, button, showButton, onPress, width, modes, style, accessibilityLabel, }: PdpCcCardProps): import("react/jsx-runtime").JSX.Element;
+declare function PdpCcCard({ imageSource, imageWidth, imageHeight, media, title, subtitle, numberOfLines, disableTruncation, singleLine, metrics, buttonLabel, buttonIcon, onButtonPress, button, showButton, onPress, width, modes, style, accessibilityLabel, }: PdpCcCardProps): import("react/jsx-runtime").JSX.Element;
 export default PdpCcCard;
 //# sourceMappingURL=PdpCcCard.d.ts.map

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle, type ImageSourcePropType } from 'react-native';
+import type { Modes } from '../../design-tokens';
+/**
+ * A single UPI handle pill rendered under the profile name.
+ */
+export interface ProfileCardUpiHandle {
+    /** Handle text, e.g. `"username@jio"` or a phone number. */
+    label: string;
+    /** Trailing registry icon (e.g. `'ic_copy'`, `'ic_confirm'`). */
+    iconName?: string;
+    /** Toggles the trailing icon. Defaults to `true`. */
+    showIcon?: boolean;
+    /** Makes the pill pressable (e.g. copy-to-clipboard). */
+    onPress?: () => void;
+}
+export interface ProfileCardProps {
+    /** User's display name shown in the header. */
+    name?: string;
+    /** Monogram initials for the avatar (used when `avatarSource` is not set). */
+    monogram?: string;
+    /** Avatar image source. When set, the avatar renders the image instead of the monogram. */
+    avatarSource?: ImageSourcePropType | string;
+    /**
+     * Registry icon for the small badge attached to the avatar's bottom-right
+     * corner. Pass `null` to hide the badge. Defaults to `'ic_qr_code'`.
+     */
+    badgeIcon?: string | null;
+    /** UPI handle pills rendered under the name. Pass `[]` to render none. */
+    upiHandles?: ProfileCardUpiHandle[];
+    /**
+     * Full override for the header row (avatar + name + handles). Takes
+     * precedence over the declarative header props. `modes` cascade into it.
+     */
+    header?: React.ReactNode;
+    /**
+     * Card body (the Figma "slot"). Rendered below the header divider; `modes`
+     * (including the profile-card context) cascade into every child, so nested
+     * `ListItem`s, `Divider`s, `Text`s and `Button`s resolve the on-dark
+     * profile-card token values automatically.
+     */
+    children?: React.ReactNode;
+    /** Toggles the divider between the header and the body. Defaults to `true`. */
+    showDivider?: boolean;
+    /** Card width. Defaults to the Figma spec (`344`). Pass `'100%'` to fill the parent. */
+    width?: number | `${number}%`;
+    /** Modes object for design-token resolution, cascaded to all children. */
+    modes?: Modes;
+    /** Style overrides for the card container. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the card. */
+    accessibilityLabel?: string;
+}
+/**
+ * ProfileCard — Figma node 6914:38498 ("Profile Card").
+ *
+ * A dark, rounded profile summary card composed from the shared primitives:
+ *
+ *  - **Header** — a {@link ListItem} whose leading slot is an {@link Attached}
+ *    monogram {@link Avatar} with a small {@link IconCapsule} badge at its
+ *    bottom-right, the user's name as the title, and a row of
+ *    {@link UpiHandle} pills in the support slot.
+ *  - **Divider** — separates the header from the body.
+ *  - **Body slot** — arbitrary children (typically `ListItem`s separated by
+ *    `Divider`s). All profile-card context modes cascade into the slot, so
+ *    nested components automatically resolve their on-dark token values.
+ *
+ * The card supports the `Profile Card Appearance` collection
+ * (`Default` | `Premium`) via the `modes` prop, which recolors the container,
+ * avatar, pills and divider in one go.
+ *
+ * @example
+ * ```tsx
+ * <ProfileCard
+ *   name="Shruti Chandarshekhar Rai"
+ *   monogram="SR"
+ *   upiHandles={[
+ *     { label: 'shrutirai-1@jio', iconName: 'ic_copy', onPress: copyHandle },
+ *     { label: '9184844184', iconName: 'ic_confirm' },
+ *   ]}
+ * >
+ *   <ListItem layout="Horizontal" title="JioFinance+" navArrow={false} />
+ * </ProfileCard>
+ * ```
+ */
+declare function ProfileCard({ name, monogram, avatarSource, badgeIcon, upiHandles, header, children, showDivider, width, modes: propModes, style, accessibilityLabel, }: ProfileCardProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ProfileCard>;
+export default _default;
+//# sourceMappingURL=ProfileCard.d.ts.map

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

@@ -102,6 +102,14 @@ export type TableProps<T = Record<string, unknown>> = {
      * for wide tables that exceed the viewport on mobile. @default false
      */
     scrollable?: boolean;
+    /**
+     * Fixed width (px) applied to every column — header and body alike — so
+     * all columns share the same width. An explicit per-column `width` (on
+     * `TableColumn`, or on an individual `Table.Cell`/`Table.HeaderCell`) still
+     * takes precedence when set. Omit to let columns flex to share the
+     * available space.
+     */
+    columnWidth?: number;
     /** Accessibility label for the table container. */
     accessibilityLabel?: string;
     /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
@@ -126,7 +134,7 @@ export type TableProps<T = Record<string, unknown>> = {
  *
  * @component
  */
-declare function Table<T = Record<string, unknown>>({ columns, data, children, showHeader, getRowKey, onRowPress, scrollable, accessibilityLabel, modes, style, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Table<T = Record<string, unknown>>({ columns, data, children, showHeader, getRowKey, onRowPress, scrollable, columnWidth, accessibilityLabel, modes, style, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace Table {
     var Header: typeof TableHeader;
     var HeaderCell: typeof TableHeaderCell;

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

@@ -12,6 +12,12 @@ type UpiHandleProps = {
      * inline SVG XML string, a `require()` asset, an SVG React component, or
      * an already-rendered element. See {@link UnifiedSource}. Avatars are
      * intentionally **not** tinted — the source renders as-is.
+     *
+     * The leading avatar is driven entirely by this prop: providing a `source`
+     * (or the deprecated `avatarSource`) force-sets the Figma "UPI Handle Image"
+     * collection to `True` and renders the avatar; omitting it force-sets the
+     * mode to `False` and hides it. This override wins over any `UPI Handle
+     * Image` value passed via `modes`.
      */
     source?: UnifiedSource;
     /**
@@ -41,7 +47,7 @@ type UpiHandleProps = {
  * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
  * @param {boolean} [props.showIcon=true] - Toggles the trailing icon visibility.
  * @param {string} [props.iconName='ic_scan_qr_code'] - Icon name from the actions set.
- * @param {UnifiedSource} [props.source] - Unified avatar source (URI, inline SVG XML, `require()` asset, SVG React component, or React element). Smart-detects raster vs SVG so the same prop works on iOS, Android and web.
+ * @param {UnifiedSource} [props.source] - Unified avatar source (URI, inline SVG XML, `require()` asset, SVG React component, or React element). Smart-detects raster vs SVG so the same prop works on iOS, Android and web. Providing a source force-sets `UPI Handle Image: True` (avatar shown); omitting it force-sets `False` (avatar hidden), overriding any `UPI Handle Image` value passed via `modes`.
  * @param {ImageSourcePropType|UnifiedSource} [props.avatarSource] - Deprecated alias for `source`; kept for back-compat.
  * @param {Function} [props.onClick] - Click/tap handler. Works as an alias for `onPress`.
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers