jfs-components 0.1.23 → 0.1.28

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/ChipSelect/ChipSelect.d.ts

@@ -17,6 +17,11 @@ export type ChipSelectProps = {
      * @default "ic_calendar_week"
      */
     icon?: string;
+    /**
+     * Whether to show the close icon when active.
+     * @default true
+     */
+    showCloseIcon?: boolean;
     /**
      * Modes for design token resolution.
      */
@@ -38,6 +43,6 @@ export type ChipSelectProps = {
  * ChipSelect component for selecting options (e.g. Date selection).
  * Based on Figma Node 1901-4727.
  */
-declare function ChipSelect({ label, active, icon, modes, style, labelSlot, onPress, }: ChipSelectProps): import("react/jsx-runtime").JSX.Element;
+declare function ChipSelect({ label, active, icon, showCloseIcon, modes, style, labelSlot, onPress, }: ChipSelectProps): import("react/jsx-runtime").JSX.Element;
 export default ChipSelect;
 //# sourceMappingURL=ChipSelect.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
@@ -66,6 +72,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, 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/MetricData/MetricData.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export type MetricDataProps = {
+    /** Top label (small, 12px). Hidden when omitted. */
+    title?: string;
+    /**
+     * The prominent value (20px bold). Pass a string, or any node (e.g. a
+     * `MoneyValue`) to compose a richer value.
+     */
+    value?: string | React.ReactNode;
+    /** Sub-label below the value (12px, muted). Hidden when omitted. */
+    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.
+     */
+    icon?: string | React.ReactNode;
+    /** Design-token modes for theming. */
+    modes?: Modes;
+    /** Override the container styles. */
+    style?: StyleProp<ViewStyle>;
+    /** Override the title text styles. */
+    titleStyle?: StyleProp<TextStyle>;
+    /** Override the value text styles. */
+    valueStyle?: StyleProp<TextStyle>;
+    /** Override the caption text styles. */
+    captionStyle?: StyleProp<TextStyle>;
+    /**
+     * Accessibility label. Defaults to the resolved `title`, `value` and
+     * `caption` text joined together.
+     */
+    accessibilityLabel?: string;
+};
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <MetricData title="Balance" value="₹1,20,000" caption="as of today" />
+ * <MetricData title="Cards" value="12" icon="ic_card" caption="active" />
+ * ```
+ */
+declare function MetricData({ title, value, caption, icon, modes, style, titleStyle, valueStyle, captionStyle, accessibilityLabel, }: MetricDataProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof MetricData>;
+export default _default;
+//# sourceMappingURL=MetricData.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/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/Rating/Rating.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export type RatingProps = {
+    /** Number of filled stars. Rounded to the nearest whole star for display. */
+    value?: number;
+    /** Total number of stars to render. */
+    max?: number;
+    /**
+     * Called with the new rating (1..max) when a star is pressed. Providing this
+     * makes the control interactive; omit it (or set `readOnly`) for a display.
+     */
+    onChange?: (value: number) => void;
+    /** Force a read-only display even when `onChange` is provided. */
+    readOnly?: boolean;
+    /** Override the star edge length. Defaults to the `ratingStar/width` token. */
+    starSize?: number;
+    /** Override the spacing between stars. Defaults to the `rating/gap` token. */
+    gap?: number;
+    /** Design token modes forwarded to token lookups. */
+    modes?: Modes;
+    /** Optional container style overrides. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the whole rating. Defaults to "X of Y stars". */
+    accessibilityLabel?: string;
+} & Omit<React.ComponentProps<typeof View>, 'style'>;
+declare function Rating({ value, max, onChange, readOnly, starSize, gap, modes: propModes, style, accessibilityLabel, ...rest }: RatingProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Rating>;
+export default _default;
+//# sourceMappingURL=Rating.d.ts.map

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