jfs-components 0.1.28 → 0.1.32

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import { type AccessibilityState, type ImageSourcePropType, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils';
+import type { Modes } from '../../design-tokens';
+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.
+     */
+    imageSource?: ImageSourcePropType | string;
+    /**
+     * Slot replacing the default `Image`. Receives `modes` recursively so inner
+     * components inherit theming.
+     */
+    imageSlot?: 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. */
+    active?: boolean;
+    /**
+     * Fixed width of the card in dp. Defaults to `60` per the Figma spec.
+     */
+    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`.
+     */
+    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`.
+     */
+    singleLine?: boolean;
+    /** Press handler — the card is always a `Pressable`. */
+    onPress?: () => void;
+    disabled?: boolean;
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Modes;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Label style override. */
+    labelStyle?: StyleProp<TextStyle>;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    accessibilityState?: AccessibilityState;
+    webAccessibilityProps?: WebAccessibilityProps;
+    testID?: string;
+};
+/**
+ * `CategoryCard` is a compact, tappable tile for category pickers and
+ * merchandising rails. It stacks a square image above a short label and can
+ * 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.
+ *
+ * @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 const _default: React.MemoExoticComponent<typeof CategoryCard>;
+export default _default;
+//# sourceMappingURL=CategoryCard.d.ts.map

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

@@ -76,6 +76,41 @@ 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;
+    /**
+     * When `true` (default), each section's header row (the gray header label)
+     * sticks to the top of the viewport when scrolling vertically, with multiple
+     * sticky headers stacking up as each reaches the top. Only applies in
+     * fixed-width scroll mode (`columnWidth` is set).
+     * @default true
+     */
+    stickyHeaders?: boolean;
+    /**
+     * When `true` (default), the section header label stays fixed on the left
+     * when scrolling horizontally. Only applies in fixed-width scroll mode
+     * (`columnWidth` is set).
+     * @default true
+     */
+    stickyHeaderLabel?: boolean;
 };
 /**
  * CompareTable renders a product comparison surface: a row of selection cards
@@ -89,6 +124,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, stickyHeaders, stickyHeaderLabel, }: CompareTableProps): import("react/jsx-runtime").JSX.Element;
 export default CompareTable;
 //# sourceMappingURL=CompareTable.d.ts.map

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

@@ -53,6 +53,25 @@ 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;
+    /**
+     * Max height of the sheet as a fraction (0–1) of the screen height.
+     * When content reaches this height the sheet becomes vertically scrollable.
+     * Default `0.7`.
+     */
+    maxHeightPercent?: number;
     /** Optional style override applied to the sheet container. */
     style?: StyleProp<ViewStyle>;
 } & Omit<ViewProps, 'style' | 'children'>;
@@ -72,6 +91,6 @@ export type ContentSheetProps = {
  *  - **Token-driven** styling via `getVariableByName` + `modes`, with `modes`
  *    cascaded to all slot children.
  */
-declare function ContentSheet({ children, modes, title, avoidKeyboard, keyboardSpacing, safeAreaBottom, pinToBottom, style, ...rest }: ContentSheetProps): import("react/jsx-runtime").JSX.Element;
+declare function ContentSheet({ children, modes, title, avoidKeyboard, keyboardSpacing, safeAreaBottom, pinToBottom, visible, maxHeightPercent, style, ...rest }: ContentSheetProps): import("react/jsx-runtime").JSX.Element;
 export default ContentSheet;
 //# sourceMappingURL=ContentSheet.d.ts.map

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export type CounterBadgeProps = {
+    /** The value shown inside the badge. */
+    value?: string;
+    /** Modes used to resolve design tokens. Counter Badge exposes a single `Default` mode. */
+    modes?: Modes;
+    style?: ViewStyle;
+} & Omit<React.ComponentProps<typeof View>, 'style'>;
+/**
+ * Counter Badge — a small token-driven pill that displays a value.
+ *
+ * All visual attributes resolve from the Figma `counterBadge/*` tokens via
+ * `getVariableByName`.
+ */
+declare function CounterBadge({ value, modes, style, ...rest }: CounterBadgeProps): import("react/jsx-runtime").JSX.Element;
+export default CounterBadge;
+//# sourceMappingURL=CounterBadge.d.ts.map

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { type AccessibilityState, type StyleProp, type ViewStyle } from 'react-native';
+import { type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils';
+import type { Modes } from '../../design-tokens';
+export type FavoriteToggleProps = SafePressableProps & {
+    /**
+     * Whether the toggle is favorited (active) — **controlled**. When provided,
+     * the component reflects this value and defers state ownership to the parent
+     * (update it in `onChange`). Omit it to use the component uncontrolled with
+     * `defaultActive`.
+     */
+    isActive?: boolean;
+    /**
+     * Initial favorited state for **uncontrolled** usage. Ignored when `isActive`
+     * is provided. Defaults to `false`.
+     */
+    defaultActive?: boolean;
+    /**
+     * Icon rendered inside the toggle. Defaults to the heart glyph
+     * (`ic_favorite`). Both Figma variants use the same filled heart; only its
+     * color changes with state (white when inactive, gold when active). Figma
+     * hardcodes the heart, so this prop is exposed purely for future reuse.
+     */
+    icon?: string;
+    /** Fired on press with the next (toggled) active state. */
+    onChange?: (next: boolean) => void;
+    /** Raw press handler, fired alongside `onChange`. */
+    onPress?: () => void;
+    /** Modes used to resolve design tokens. */
+    modes?: Modes;
+    disabled?: boolean;
+    /** Accessibility label; defaults to `"Favorite"`. */
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    accessibilityState?: AccessibilityState;
+    webAccessibilityProps?: WebAccessibilityProps;
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Explicit per-instance loading override. When `true`, renders a same-size
+     * circular skeleton instead of the toggle. Defaults to inheriting from the
+     * surrounding `<SkeletonGroup>`.
+     */
+    loading?: boolean;
+};
+/**
+ * Circular glass favorite (heart) toggle, mirroring the Figma `Favorite Toggle`
+ * component set's boolean `isActive` variant:
+ *   - inactive: translucent frosted circle (`#ffffff33` over a `blur/minimal`
+ *     backdrop) with a white heart.
+ *   - active: solid white circle with a gold (`#cea15a`) heart.
+ * Both variants share the identical filled-heart glyph; only the background and
+ * icon colors change between states.
+ *
+ * Controlled or uncontrolled: pass `isActive` (+ `onChange`) to control it, or
+ * omit `isActive` and use `defaultActive` to let the component own the state.
+ *
+ * Visual attributes resolve from the `favoriteToggle/*` / `color/favoriteToggle/*`
+ * tokens via `getVariableByName`. Those tokens are not yet in the committed
+ * variables snapshot, so the component currently runs on the Figma-node values
+ * as fallbacks; once the tokens are exported (under the `isActive` collection,
+ * modes `False`/`True`) the resolver takes over.
+ */
+declare function FavoriteToggle({ isActive: controlledActive, defaultActive, icon, onChange, onPress, modes, disabled, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, style, loading, ...rest }: FavoriteToggleProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FavoriteToggle>;
+export default _default;
+//# sourceMappingURL=FavoriteToggle.d.ts.map

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

@@ -0,0 +1,111 @@
+import React from 'react';
+import { TextInput as RNTextInput, type StyleProp, type ViewStyle, type TextStyle, type TextInputProps as RNTextInputProps } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export type HelloJioInputProps = {
+    /** Placeholder shown when empty. Defaults to `"Ask me anything"`. */
+    placeholder?: string;
+    /** Controlled value. Pair with `onChangeText`. */
+    value?: string;
+    /** Uncontrolled initial value. Ignored when `value` is provided. */
+    defaultValue?: string;
+    /** Called whenever the text changes. */
+    onChangeText?: (text: string) => void;
+    /**
+     * Called when the user submits — either via the send button or the keyboard
+     * return key. Receives the current text. This is the primary action hook.
+     */
+    onSubmit?: (text: string) => void;
+    /**
+     * Leading icon name from the registry. Defaults to `"ic_hellojio"`.
+     * Ignored when `leading` is provided.
+     */
+    leadingIconName?: string;
+    /**
+     * Slot replacing the default leading icon (Figma Slot "start"). Receives
+     * `modes` recursively.
+     */
+    leading?: React.ReactNode;
+    /**
+     * Slot replacing the default send `IconButton` (Figma Slot "end").
+     * Pass `null` to hide the trailing control entirely.
+     */
+    trailing?: React.ReactNode | null;
+    /**
+     * Icon name for the default send button. Defaults to `"ic_send_message"`.
+     * Ignored when `trailing` is provided.
+     */
+    sendIconName?: string;
+    /**
+     * When `true`, renders the IdleJioPlus glass surface while unfocused.
+     * Focus still switches to the Active (solid white + border) state.
+     */
+    jioPlus?: boolean;
+    /** Disables typing and the send button. */
+    disabled?: boolean;
+    /** Design token modes. Visual Idle/Active/IdleJioPlus is derived from focus + `jioPlus`. */
+    modes?: Modes;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Text input style override. */
+    inputStyle?: StyleProp<TextStyle>;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    testID?: string;
+    onFocus?: RNTextInputProps['onFocus'];
+    onBlur?: RNTextInputProps['onBlur'];
+} & Omit<RNTextInputProps, 'style' | 'value' | 'defaultValue' | 'onChangeText' | 'onFocus' | 'onBlur' | 'placeholder' | 'editable' | 'onSubmitEditing'>;
+declare const _default: React.NamedExoticComponent<{
+    /** Placeholder shown when empty. Defaults to `"Ask me anything"`. */
+    placeholder?: string;
+    /** Controlled value. Pair with `onChangeText`. */
+    value?: string;
+    /** Uncontrolled initial value. Ignored when `value` is provided. */
+    defaultValue?: string;
+    /** Called whenever the text changes. */
+    onChangeText?: (text: string) => void;
+    /**
+     * Called when the user submits — either via the send button or the keyboard
+     * return key. Receives the current text. This is the primary action hook.
+     */
+    onSubmit?: (text: string) => void;
+    /**
+     * Leading icon name from the registry. Defaults to `"ic_hellojio"`.
+     * Ignored when `leading` is provided.
+     */
+    leadingIconName?: string;
+    /**
+     * Slot replacing the default leading icon (Figma Slot "start"). Receives
+     * `modes` recursively.
+     */
+    leading?: React.ReactNode;
+    /**
+     * Slot replacing the default send `IconButton` (Figma Slot "end").
+     * Pass `null` to hide the trailing control entirely.
+     */
+    trailing?: React.ReactNode | null;
+    /**
+     * Icon name for the default send button. Defaults to `"ic_send_message"`.
+     * Ignored when `trailing` is provided.
+     */
+    sendIconName?: string;
+    /**
+     * When `true`, renders the IdleJioPlus glass surface while unfocused.
+     * Focus still switches to the Active (solid white + border) state.
+     */
+    jioPlus?: boolean;
+    /** Disables typing and the send button. */
+    disabled?: boolean;
+    /** Design token modes. Visual Idle/Active/IdleJioPlus is derived from focus + `jioPlus`. */
+    modes?: Modes;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Text input style override. */
+    inputStyle?: StyleProp<TextStyle>;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    testID?: string;
+    onFocus?: RNTextInputProps["onFocus"];
+    onBlur?: RNTextInputProps["onBlur"];
+} & Omit<RNTextInputProps, "style" | "value" | "onFocus" | "onBlur" | "defaultValue" | "placeholder" | "editable" | "onChangeText" | "onSubmitEditing"> & React.RefAttributes<RNTextInput>>;
+export default _default;
+//# sourceMappingURL=HelloJioInput.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/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/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/ValueBackMetric/ValueBackMetric.d.ts

@@ -0,0 +1,86 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle, type TextStyle, type GestureResponderEvent } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export type ValueBackMetricProps = {
+    /**
+     * Header glyph slot, shown to the left of the title. Mirrors the Figma swap
+     * slot whose preferred instances are `Icon` and `Image`:
+     *  - a registry icon name (e.g. `'ic_rupee_coin'`) renders the shared
+     *    {@link Icon}, colour/size from the `icon/*` tokens (default 18px gold —
+     *    retint via `modes`, e.g. `{ AppearanceBrand: 'Secondary' }`);
+     *  - a custom node (an `<Icon/>`, an `<Image/>`, your brand logo) renders
+     *    as-is with `modes` cascaded into it.
+     * The Figma design uses a dedicated JioPoints brand mark that is not in the
+     * icon registry, so `ic_rupee_coin` stands in by default.
+     */
+    icon?: string | React.ReactNode;
+    /** Header title next to the icon. Defaults to `'JioPoints'`. */
+    title?: string;
+    /**
+     * The prominent value line (16px/500). Pass a string, or any node to compose
+     * a richer value. Hidden when omitted.
+     */
+    value?: string | React.ReactNode;
+    /** Muted caption below the value (12px, `#777`). Hidden when omitted. */
+    caption?: string;
+    /** Bottom link label (underlined, brand accent). Hidden when omitted. */
+    linkLabel?: string;
+    /** Fired when the link is pressed. Navigation is the consumer's job. */
+    onLinkPress?: (event: GestureResponderEvent) => void;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     * Independent of {@link onLinkPress} — the bottom link keeps its own handler.
+     */
+    onPress?: (event: GestureResponderEvent) => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
+    /** 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`, `caption`
+     * and `linkLabel` joined together.
+     */
+    accessibilityLabel?: string;
+};
+/**
+ * ValueBackMetric — a compact, left-aligned "value back" card.
+ *
+ * Stacks a branded header row (icon + `title`, e.g. "JioPoints"), a prominent
+ * `value`, a muted `caption`, and an optional bottom `linkLabel` (e.g. "Earn").
+ * `value`, `caption` and `linkLabel` each render only when provided; the header
+ * (icon + title) always shows.
+ *
+ * Colours, gaps and padding resolve from the `metricdata/*` tokens; the header
+ * glyph from the `icon/*` tokens (default 18px gold); the link entirely from
+ * the `link/*` + `text/foreground` tokens via the shared {@link Link}, with
+ * `Text Appearance: Secondary` and `Text Sizes: Small` seeded so it renders
+ * purple at 12px like the design (caller `modes` win). The per-part font
+ * sizes/weights come from the Figma `valueBackMetric/*` variables, which are
+ * not yet in the committed token snapshot, so they are encoded as constants
+ * matching the design.
+ *
+ * @example
+ * ```tsx
+ * <ValueBackMetric
+ *   title="JioPoints"
+ *   value="Value"
+ *   caption="Earn 10 point with UPI"
+ *   linkLabel="Earn"
+ *   onPress={() => navigation.navigate('ValueBack')}
+ *   onLinkPress={() => navigation.navigate('EarnPoints')}
+ * />
+ * ```
+ */
+declare function ValueBackMetric({ icon, title, value, caption, linkLabel, onLinkPress, onPress, disabled, modes, style, titleStyle, valueStyle, captionStyle, accessibilityLabel, }: ValueBackMetricProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ValueBackMetric>;
+export default _default;
+//# sourceMappingURL=ValueBackMetric.d.ts.map

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

@@ -23,6 +23,7 @@ export { default as CardFeedback, type CardFeedbackProps } from './CardFeedback/
 export { default as CardFinancialCondition, type CardFinancialConditionProps, } from './CardFinancialCondition/CardFinancialCondition';
 export { default as CardInsight, type CardInsightProps } from './CardInsight/CardInsight';
 export { default as CcCard, type CcCardProps, type CcCardBadge, type CcCardListItem } from './CcCard/CcCard';
+export { default as CategoryCard, type CategoryCardProps } from './CategoryCard/CategoryCard';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
 export { default as Drawer, type DrawerProps, type DrawerHandle } from './Drawer/Drawer';
@@ -50,6 +51,7 @@ export { default as AllocationComparisonChart, type AllocationComparisonChartPro
 export { default as MonthlyStatusGrid, CalendarGlyph, type MonthlyStatusGridProps, type MonthlyStatusGridMonth, type MonthlyStatus, type CalendarGlyphProps, } from './MonthlyStatusGrid/MonthlyStatusGrid';
 export { default as Gauge, type GaugeProps } from './Gauge/Gauge';
 export { default as HeroSection, type HeroSectionProps } from './HeroSection/HeroSection';
+export { default as HelloJioInput, type HelloJioInputProps } from './HelloJioInput/HelloJioInput';
 export { default as HoldingsCard, type HoldingsCardProps } from './HoldingsCard/HoldingsCard';
 export { default as HStack, type HStackProps } from './HStack/HStack';
 export { default as Icon, type IconProps } from './Icon/Icon';
@@ -157,4 +159,7 @@ export { default as SegmentedControl, type SegmentedControlProps, type Segmented
 export { default as Toggle, type ToggleProps } from './Toggle/Toggle';
 export { default as AutoplayControl, type AutoplayControlProps } from './AutoplayControl/AutoplayControl';
 export { default as NumberPagination, type NumberPaginationProps } from './NumberPagination/NumberPagination';
+export { default as CounterBadge, type CounterBadgeProps } from './CounterBadge/CounterBadge';
+export { default as FavoriteToggle, type FavoriteToggleProps } from './FavoriteToggle/FavoriteToggle';
+export { default as ValueBackMetric, type ValueBackMetricProps } from './ValueBackMetric/ValueBackMetric';
 //# sourceMappingURL=index.d.ts.map

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-07-07T17:35:34.036Z
+ * Generated: 2026-07-15T20:21:39.992Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

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