jfs-components 0.1.34 → 0.1.36

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

@@ -23,10 +23,10 @@ export type LottiePlayerProps = {
      * Override the rendered size. Pass a number for a square box, or
      * `{ width, height }` for non-square.
      *
-     * When omitted, size is resolved from the `media/width` and `media/height`
-     * design tokens (default `117 × 117`). The `Media / Output` collection
+     * When omitted, size is resolved from the `video/width` and `video/height`
+     * design tokens (default `117 × 117`). The `Video / Output` collection
      * exposes `L | M | S` modes (117 / 70 / 20) — pass
-     * `modes={{ 'Media / Output': 'M' }}` to render at 70×70, etc.
+     * `modes={{ 'Video / Output': 'M' }}` to render at 70×70, etc.
      */
     size?: number | {
         width: number;
@@ -64,8 +64,8 @@ export type LottiePlayerProps = {
  * webpack via platform extensions — same pattern as `MediaCard/GlassFill`.
  *
  * Token-driven sizing: when `size` is omitted, `LottiePlayer` reads
- * `media/width` and `media/height` from the Figma variables resolver, so the
- * animation matches the surrounding component's `Media / Output` mode
+ * `video/width` and `video/height` from the Figma variables resolver, so the
+ * animation matches the surrounding component's `Video / Output` mode
  * automatically. This is the same sizing contract `PageHero` and
  * `LottieIntroBlock` use for their `media` slots.
  *
@@ -76,7 +76,7 @@ export type LottiePlayerProps = {
  *
  * <LottiePlayer source={animation} />                    // 117 × 117 (default)
  * <LottiePlayer source={animation} size={70} />          // 70 × 70
- * <LottiePlayer source={animation} modes={{ 'Media / Output': 'S' }} />  // 20 × 20
+ * <LottiePlayer source={animation} modes={{ 'Video / Output': 'S' }} />  // 20 × 20
  * <PageHero media={<LottiePlayer source={animation} />} />
  * ```
  */

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

@@ -4,12 +4,18 @@ import type { Modes } from '../../design-tokens';
 export type PageHeroProps = {
     /** Small eyebrow text shown above the headline. */
     eyebrow?: string;
+    /** Whether to render the eyebrow line. */
+    showEyebrow?: boolean;
     /** Main headline text. Centered and bold. */
     headline?: string;
-    /** Optional supporting text shown below the headline. */
+    /** Supporting text shown directly below the headline (e.g. price). */
     supportingText?: string;
     /** Whether to render the supporting text. */
     showSupportingText?: boolean;
+    /** Optional second supporting line shown below `supportingText`. */
+    body?: string;
+    /** Whether to render the body line. */
+    showBody?: boolean;
     /** Label for the default action button. Ignored when `buttonSlot` is provided. */
     buttonLabel?: string;
     /** Press handler for the default action button. Ignored when `buttonSlot` is provided. */
@@ -17,9 +23,10 @@ export type PageHeroProps = {
     /** Whether to render the default action button. Ignored when `buttonSlot` is provided. */
     showButton?: boolean;
     /**
-     * Optional slot to fully override the action button.
-     * When provided, `showButton`, `buttonLabel`, and `onButtonPress` are ignored.
-     * `modes` are automatically cascaded into this slot.
+     * Optional slot to fully override the action button area (e.g. a
+     * `ButtonGroup` with several buttons). When provided, `showButton`,
+     * `buttonLabel`, and `onButtonPress` are ignored. `modes` are automatically
+     * cascaded into this slot.
      */
     buttonSlot?: React.ReactNode;
     /**
@@ -27,16 +34,18 @@ export type PageHeroProps = {
      *
      * Intentionally typed as `React.ReactNode` so the consumer can bring any
      * renderer they like — `<Image />`, `<IconCapsule />`, a Lottie player
-     * (`lottie-react-native` / `@lottiefiles/dotlottie-react`), an `<SvgXml />`
-     * from `react-native-svg`, a `<Video />` from `react-native-video`, a
-     * gradient view, or a custom illustration. The library deliberately does
-     * NOT wrap Lottie / video runtimes (they require native modules + pod
-     * autolinking on every consumer's app), so PageHero just allocates a
-     * token-sized container and lets the slot render whatever it wants.
+     * (`LottiePlayer` / `lottie-react-native`), an `<SvgXml />` from
+     * `react-native-svg`, a `<Video />` from `react-native-video`, a gradient
+     * view, or a custom illustration. The library deliberately does NOT wrap
+     * Lottie / video runtimes (they require native modules + pod autolinking on
+     * every consumer's app), so PageHero just allocates a token-sized container
+     * and lets the slot render whatever it wants.
      *
-     * The slot is rendered inside a `width × height` box driven by
-     * `media/width` and `media/height` tokens (default 117×117). `modes` are
-     * automatically cascaded into the slot via `cloneChildrenWithModes`.
+     * The slot is rendered inside a `width × height` box driven by the
+     * `video/width` and `video/height` tokens from the `Video / Output`
+     * collection (`L | M | S` → 117 / 70 / 20; default `L` = 117×117).
+     * `modes` are automatically cascaded into the slot via
+     * `cloneChildrenWithModes`.
      */
     media?: React.ReactNode;
     /** Mode configuration for design-token theming. */
@@ -49,12 +58,16 @@ export type PageHeroProps = {
  * PageHero displays a centered hero block typically used at the top of a page
  * or feature screen. It contains an optional media slot (illustration / image
  * / Lottie / SVG / video — consumer's choice), an eyebrow line, a large
- * headline, an optional supporting line (e.g. price / timeline), and an
- * optional action button.
+ * headline, an optional supporting line (e.g. price), an optional body line
+ * (e.g. timeline), and an optional action button.
  *
  * All visual values are resolved from Figma design tokens via
- * `getVariableByName`. Slots cascade the active `modes` to their children
- * through `cloneChildrenWithModes`.
+ * `getVariableByName` (Figma node 4453:2348 — "Page Hero"). Text colors react
+ * to the `Page type` (`MainPage | SubPage | JioPlus`) and `Color Mode`
+ * (`Light | Dark`) collections; type scale reacts to `PageHero Size`
+ * (`M | S`); the media box reacts to `Video / Output` (`L | M | S`). Slots
+ * cascade the active `modes` to their children through
+ * `cloneChildrenWithModes`.
  *
  * @component
  * @example
@@ -65,16 +78,11 @@ export type PageHeroProps = {
  *   supportingText="₹999/year · ₹0 until 2027"
  *   buttonLabel="Renew for free"
  *   onButtonPress={() => navigate('Upgrade')}
- *   media={
- *     <Image
- *       imageSource={require('./assets/upgrade.png')}
- *       width={117}
- *       height={117}
- *     />
- *   }
+ *   modes={{ 'Page type': 'JioPlus' }}
+ *   media={<LottiePlayer source={animation} />}
  * />
  * ```
  */
-declare function PageHero({ eyebrow, headline, supportingText, showSupportingText, buttonLabel, onButtonPress, showButton, buttonSlot, media, modes: propModes, style, testID, }: PageHeroProps): import("react/jsx-runtime").JSX.Element;
+declare function PageHero({ eyebrow, showEyebrow, headline, supportingText, showSupportingText, body, showBody, buttonLabel, onButtonPress, showButton, buttonSlot, media, modes: propModes, style, testID, }: PageHeroProps): import("react/jsx-runtime").JSX.Element;
 export default PageHero;
 //# sourceMappingURL=PageHero.d.ts.map

package/lib/typescript/src/design-tokens/figma-modes.generated.d.ts

@@ -33,6 +33,7 @@ export declare const FIGMA_MODES: {
     readonly "BankAccountCard / Output": readonly ["Default"];
     readonly "Benefit Card": readonly ["Default"];
     readonly Blur: readonly ["Default"];
+    readonly "Border Boolean": readonly ["False", "True"];
     readonly "bottomNav / Output": readonly ["Default"];
     readonly "BottomNavItem / Output": readonly ["Default"];
     readonly "BottomNavItem / State": readonly ["Idle", "Active"];
@@ -47,6 +48,8 @@ export declare const FIGMA_MODES: {
     readonly "Card / Output": readonly ["Default"];
     readonly "Card Apperance": readonly ["Default", "Plain"];
     readonly "Card Feedback / Output": readonly ["Default"];
+    readonly "Card Tab / output": readonly ["Default"];
+    readonly "Card Tab State": readonly ["Default", "Active"];
     readonly "Card.Media": readonly ["Default"];
     readonly "Card/CTA / Output": readonly ["Default"];
     readonly "Card/Insight": readonly ["Default"];
@@ -112,6 +115,9 @@ export declare const FIGMA_MODES: {
     readonly "Emphasis / DataViz": readonly ["High", "Medium", "Low"];
     readonly "EmptyState / Output": readonly ["Default"];
     readonly "ExpandableCheckbox / Output": readonly ["Default"];
+    readonly "Favorite Toggle Color": readonly ["Default", "Active"];
+    readonly "Favorite Toggle Size": readonly ["S", "M", "L"];
+    readonly "Favorite Toggle/ output": readonly ["Default"];
     readonly "Feedback / Output": readonly ["Default"];
     readonly "filterBar / Output": readonly ["Default"];
     readonly "FinancialConditionCard / Output": readonly ["Default"];
@@ -122,9 +128,13 @@ export declare const FIGMA_MODES: {
     readonly Gap: readonly ["S", "M", "L", "None"];
     readonly "Gauge / Output": readonly ["Default"];
     readonly "Grid / Output": readonly ["Default"];
+    readonly "Grid Gap": readonly ["S", "M"];
     readonly "Handle Boolean": readonly ["True", "False"];
     readonly "Heading / Output": readonly ["Default"];
     readonly "Heading text": readonly ["Default", "Slot"];
+    readonly "hello Jio / Output": readonly ["Default"];
+    readonly "Hello Jio Input Size": readonly ["M", "L"];
+    readonly "Hello Jio Input State": readonly ["Idle", "Active"];
     readonly "HeroSection / Output": readonly ["Default"];
     readonly "Holdings card / Output": readonly ["Default"];
     readonly "HStack / Output": readonly ["Default"];
@@ -175,6 +185,7 @@ export declare const FIGMA_MODES: {
     readonly "Page Hero / Output": readonly ["Default"];
     readonly "Page type": readonly ["MainPage", "SubPage", "JioPlus"];
     readonly "PageHero / Output": readonly ["Default"];
+    readonly "PageHero Size": readonly ["M", "S"];
     readonly "PaymnetFeedback / Output": readonly ["Default"];
     readonly "PDP cc card": readonly ["Default"];
     readonly peekOffset: readonly ["Medium", "Small", "Large", "None"];
@@ -196,6 +207,7 @@ export declare const FIGMA_MODES: {
     readonly "RangeTrack / Output": readonly ["Default"];
     readonly "Rating / Output": readonly ["Default"];
     readonly "Rating Star / Output": readonly ["Default"];
+    readonly "Rating Star Size": readonly ["S", "M", "L"];
     readonly "Rating Star State": readonly ["idle", "selected"];
     readonly "RechargeCard / Output": readonly ["Default"];
     readonly rotfl: readonly ["Default"];
@@ -240,7 +252,7 @@ export declare const FIGMA_MODES: {
     readonly "Tabs / Output": readonly ["Default"];
     readonly TestimonialsCard: readonly ["Default"];
     readonly "Text / Output": readonly ["Default"];
-    readonly "Text Appearance": readonly ["Neutral", "Primary", "Secondary", "Tertiary"];
+    readonly "Text Appearance": readonly ["Neutral", "Primary", "Secondary", "Tertiary", "Success", "Warning", "Error"];
     readonly "Text Sizes": readonly ["Medium", "Small", "Large"];
     readonly "textInput / Output": readonly ["Default"];
     readonly "TextSegment / Output": readonly ["Default"];
@@ -259,6 +271,7 @@ export declare const FIGMA_MODES: {
     readonly "TransationDetails / Output": readonly ["Default"];
     readonly "UPI Handle / Output": readonly ["Default"];
     readonly "UPI Handle Image": readonly ["True", "False"];
+    readonly "valueBack metric": readonly ["Default"];
     readonly "ValueBar / Output": readonly ["Default"];
     readonly "Video / Output": readonly ["L", "M", "S"];
     readonly "VStack / Output": readonly ["Default"];

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-20T11:16:24.422Z
+ * Generated: 2026-07-21T07:33:30.350Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.1.34",
+  "version": "0.1.36",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -32,6 +32,7 @@
   ],
   "scripts": {
     "test": "jest",
+    "test:extract-modes": "jest scripts/__tests__/extract-figma-modes.test.js --runInBand",
     "lint": "eslint .",
     "build-react": "webpack --mode production",
     "start-react": "webpack-dev-server --config ./webpack.config.js --mode development",
@@ -92,6 +93,7 @@
     "@shopify/flash-list": "^2.2.0",
     "ajv": "^8.17.1",
     "ajv-keywords": "^5.1.0",
+    "dotenv": "^17.4.2",
     "expo": "^54.0.33",
     "patch-package": "^8.0.1",
     "react-native-gesture-handler": "^2.29.1",