jfs-components 0.1.30 → 0.1.33

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

@@ -96,6 +96,21 @@ export type CompareTableProps = {
      * 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
@@ -109,6 +124,6 @@ export type CompareTableProps = {
  *
  * @component
  */
-declare function CompareTable({ columns, sections, onAddColumn, addColumnLabel, maxColumns, modes, style, disableTruncation, columnWidth, }: 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

@@ -66,6 +66,12 @@ export type ContentSheetProps = {
      * `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'>;
@@ -85,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, visible, 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/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-10T20:55:36.505Z
+ * Generated: 2026-07-20T10:48:20.222Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.1.30",
+  "version": "0.1.33",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -10,9 +10,14 @@
   "react-native": "src/index.ts",
   "source": "src/index.ts",
   "sideEffects": false,
+  "bin": {
+    "jfs-extract-modes": "scripts/extract-figma-modes.js"
+  },
   "files": [
     "src",
     "lib",
+    "scripts/extract-figma-modes.js",
+    "D2C.md",
     "CHANGELOG.md",
     "!**/__tests__",
     "!**/*.stories.*",
@@ -41,6 +46,7 @@
     "postinstall": "patch-package",
     "icons:generate": "node scripts/generate-icon-registry.js",
     "audit:tokens": "node scripts/audit-tokens.js",
+    "extract-modes": "node scripts/extract-figma-modes.js",
     "prepare": "bob build",
     "build": "bob build",
     "prepack": "yarn icons:generate && bob build",