jfs-components 0.1.36 → 0.1.48

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

@@ -39,6 +39,19 @@ export type AccordionProps = {
      * lines as it needs even when horizontal space is tight.
      */
     disableTruncation?: boolean;
+    /**
+     * When `false`, the header Pressable is omitted. Pair with a header-only
+     * Accordion (`showContent={false}`) when the host lifts the title into a
+     * sticky slot (e.g. `ScrollView` `stickyHeaderIndices`).
+     * @default true
+     */
+    showHeader?: boolean;
+    /**
+     * When `false`, the expandable content slot is omitted. Use to render a
+     * header-only Accordion for sticky layouts.
+     * @default true
+     */
+    showContent?: boolean;
 } & React.ComponentProps<typeof View>;
 /**
  * Accordion component that mirrors the Figma "Accordion" component.
@@ -54,6 +67,6 @@ export type AccordionProps = {
  *
  * @component
  */
-declare function Accordion({ title, contained, defaultExpanded, expanded: controlledExpanded, onExpandedChange, disabled, children, modes, style, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, disableTruncation, ...rest }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+declare function Accordion({ title, contained, defaultExpanded, expanded: controlledExpanded, onExpandedChange, disabled, children, modes, style, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, disableTruncation, showHeader, showContent, ...rest }: AccordionProps): import("react/jsx-runtime").JSX.Element;
 export default Accordion;
 //# sourceMappingURL=Accordion.d.ts.map

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

@@ -2,29 +2,38 @@ import React from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
 import type { Modes } from '../../design-tokens';
 type AppBarType = 'MainPage' | 'SubPage';
+export type JioDotProps = {
+    /** Render size in px. Defaults to token `appBar/mainPage/jiodot/size` (32). */
+    size?: number;
+    /** Modes used to resolve `appBar/mainPage/jiodot/size` when `size` is omitted. */
+    modes?: Modes;
+};
+/**
+ * Figma "jiodot" mark (node 1117:1908). Opt-in via `leadingSlot` — MainPage
+ * does NOT render this by default so existing consumers stay empty-leading.
+ */
+export declare function JioDot({ size, modes }: JioDotProps): import("react/jsx-runtime").JSX.Element;
 export type AppBarProps = {
     /**
      * Type of the App Bar.
-     * - `MainPage`: Taller, usually has Jio logo (leading) and Profile/Notif (actions).
-     * - `SubPage`: Shorter, usually has Back arrow (leading) and Page Title (middle).
+     * - `MainPage`: Taller bar; no default leading (pass `JioDot` or your logo via `leadingSlot`).
+     * - `SubPage`: Shorter bar with default back arrow and centered middle slot.
      * @default "MainPage"
      */
     type?: AppBarType;
     /**
      * Slot for the leading element.
      * Defaults:
-     * - MainPage: Jio Logo (placeholder circle for now if no asset)
-     * - SubPage: Back Icon Button
+     * - MainPage: none (opt in with `<JioDot />` or any custom node)
+     * - SubPage: Back `NavArrow`
      */
     leadingSlot?: React.ReactNode;
     /**
-     * Slot for the middle content.
-     * Often used for "Page Title" in SubPage.
+     * Slot for the middle content. Often used for a page title on SubPage.
      *
-     * On `SubPage` this is rendered as an absolutely-centered box (matching the
-     * Figma "slot wrap"): it stays centered in the bar regardless of how wide
-     * the leading/actions slots are, and its content fills/shrinks responsively
-     * within {@link middleSlotWidth}.
+     * On `SubPage` this is rendered as an absolutely-centered box (Figma
+     * "slot wrap"): it stays centered regardless of leading/actions width, and
+     * content fills/shrinks within {@link middleSlotWidth}.
      */
     middleSlot?: React.ReactNode;
     /**
@@ -34,7 +43,7 @@ export type AppBarProps = {
      */
     middleSlotWidth?: number;
     /**
-     * Slot for the actions on the right.
+     * Slot for the actions on the right (IconButtons, Avatar, etc.).
      */
     actionsSlot?: React.ReactNode;
     /**
@@ -42,7 +51,7 @@ export type AppBarProps = {
      */
     modes?: Modes;
     /**
-     * Callback for the default leading slot press (e.g. back button).
+     * Callback for the default SubPage leading back arrow.
      */
     onLeadingPress?: () => void;
     /**
@@ -52,6 +61,29 @@ export type AppBarProps = {
     accessibilityLabel?: string;
     accessibilityHint?: string;
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel' | 'accessibilityHint'>;
-export default function AppBar({ type, leadingSlot, middleSlot, middleSlotWidth, actionsSlot, modes: propModes, onLeadingPress, style, accessibilityLabel, accessibilityHint, ...rest }: AppBarProps): import("react/jsx-runtime").JSX.Element;
-export {};
+/**
+ * AppBar — top navigation bar for MainPage and SubPage layouts
+ * (Figma node 1070:18571).
+ *
+ * Visual values resolve from design tokens via `getVariableByName`. Slots
+ * cascade `modes` to children through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AppBar
+ *   type="MainPage"
+ *   leadingSlot={<JioDot />}
+ *   actionsSlot={
+ *     <>
+ *       <IconButton iconName="ic_add" />
+ *       <IconButton iconName="ic_add" />
+ *       <Avatar />
+ *     </>
+ *   }
+ * />
+ * ```
+ */
+declare function AppBar({ type, leadingSlot, middleSlot, middleSlotWidth, actionsSlot, modes: propModes, onLeadingPress, style, accessibilityLabel, accessibilityHint, ...rest }: AppBarProps): import("react/jsx-runtime").JSX.Element;
+export default AppBar;
 //# sourceMappingURL=AppBar.d.ts.map

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

@@ -84,25 +84,42 @@ export type CompareTableProps = {
      *    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.
+     *  - Selection cards stick on the vertical axis by default (`stickyCards`).
+     *    Accordion titles also stick by default (`stickyAccordionTitles`) and
+     *    replace each other under the pinned cards as you scroll. Gray
+     *    table-header rows can stick via `stickyHeaders`. Sticky header labels
+     *    stay put horizontally when `stickyHeaderLabel` is on. Requires the
+     *    host to give `CompareTable` a bounded height.
      *
      * 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).
+     * When `true`, the selection-cards row is pinned above the vertical scroll
+     * surface (not inside it), so cards never scroll away. Sticky accordion
+     * titles then stick under the pinned cards, replacing each other as each
+     * section reaches the top. Only applies in fixed-width scroll mode
+     * (`columnWidth` is set).
      * @default true
      */
+    stickyCards?: boolean;
+    /**
+     * When `true`, each section's accordion title sticks to the top of the
+     * viewport when scrolling vertically (under sticky cards when
+     * `stickyCards` is also on), with titles replacing each other as each
+     * reaches the top. Only applies in fixed-width scroll mode
+     * (`columnWidth` is set).
+     * @default true
+     */
+    stickyAccordionTitles?: boolean;
+    /**
+     * When `true`, 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 false
+     */
     stickyHeaders?: boolean;
     /**
      * When `true` (default), the section header label stays fixed on the left
@@ -124,6 +141,6 @@ export type CompareTableProps = {
  *
  * @component
  */
-declare function CompareTable({ columns, sections, onAddColumn, addColumnLabel, maxColumns, modes, style, disableTruncation, columnWidth, stickyHeaders, stickyHeaderLabel, }: CompareTableProps): import("react/jsx-runtime").JSX.Element;
+declare function CompareTable({ columns, sections, onAddColumn, addColumnLabel, maxColumns, modes, style, disableTruncation, columnWidth, stickyCards, stickyAccordionTitles, stickyHeaders, stickyHeaderLabel, }: CompareTableProps): import("react/jsx-runtime").JSX.Element;
 export default CompareTable;
 //# sourceMappingURL=CompareTable.d.ts.map

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

@@ -22,9 +22,10 @@ export type HelloJioInputProps = {
     leadingIconName?: string;
     /**
      * Slot replacing the default leading icon (Figma Slot "start"). Receives
-     * `modes` recursively.
+     * `modes` recursively. Pass `null` to hide the leading icon entirely
+     * (the design's `startSlot={false}`), mirroring `trailing`.
      */
-    leading?: React.ReactNode;
+    leading?: React.ReactNode | null;
     /**
      * Slot replacing the default send `IconButton` (Figma Slot "end").
      * Pass `null` to hide the trailing control entirely.
@@ -75,9 +76,10 @@ declare const _default: React.NamedExoticComponent<{
     leadingIconName?: string;
     /**
      * Slot replacing the default leading icon (Figma Slot "start"). Receives
-     * `modes` recursively.
+     * `modes` recursively. Pass `null` to hide the leading icon entirely
+     * (the design's `startSlot={false}`), mirroring `trailing`.
      */
-    leading?: React.ReactNode;
+    leading?: React.ReactNode | null;
     /**
      * Slot replacing the default send `IconButton` (Figma Slot "end").
      * Pass `null` to hide the trailing control entirely.

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

@@ -76,6 +76,7 @@ export type PageHeroProps = {
  *   eyebrow="Upgrade to JioFinance+"
  *   headline="Resume earning cashback, extra points, and 1% gold"
  *   supportingText="₹999/year · ₹0 until 2027"
+ *   body="₹999/year · ₹0 until 2027"
  *   buttonLabel="Renew for free"
  *   onButtonPress={() => navigate('Upgrade')}
  *   modes={{ 'Page type': 'JioPlus' }}

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

@@ -17,6 +17,13 @@ export interface ProductMerchandisingCardProps {
      * `undefined` and no `badge` override is provided.
      */
     badgeLabel?: string;
+    /**
+     * Optional leading node (icon/image) rendered before the header badge
+     * label, inside the badge surface. Maps to `Badge`'s `leading` slot — the
+     * same pattern as `specialBadgeIcon` for the footer badge. Ignored when a
+     * full `badge` override is supplied.
+     */
+    badgeIcon?: React.ReactNode;
     /**
      * Full override for the header badge. Takes precedence over `badgeLabel`.
      */
@@ -82,6 +89,6 @@ export interface ProductMerchandisingCardProps {
  * The blur strength is driven by the Figma `blur/minimal` token, mapped to the
  * `GlassFill` 0–100 intensity scale the same way `MediaCard` does.
  */
-declare function ProductMerchandisingCard({ imageSource, title, subtitle, badgeLabel, badge, showAvatar, avatarSource, avatarMonogram, avatar, specialBadgeLabel, specialBadgeIcon, specialBadge, ctaLabel, onCtaPress, cta, onPress, height, modes, style, accessibilityLabel, disableTruncation, }: ProductMerchandisingCardProps): import("react/jsx-runtime").JSX.Element;
+declare function ProductMerchandisingCard({ imageSource, title, subtitle, badgeLabel, badgeIcon, badge, showAvatar, avatarSource, avatarMonogram, avatar, specialBadgeLabel, specialBadgeIcon, specialBadge, ctaLabel, onCtaPress, cta, onPress, height, modes, style, accessibilityLabel, disableTruncation, }: ProductMerchandisingCardProps): import("react/jsx-runtime").JSX.Element;
 export default ProductMerchandisingCard;
 //# sourceMappingURL=ProductMerchandisingCard.d.ts.map

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

@@ -23,19 +23,31 @@ export type ValueBackMetricProps = {
     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. */
+    /**
+     * Bottom CTA label rendered as the shared {@link Text} (purple 12px via
+     * seeded `Text Appearance: Secondary` + `Text Sizes: Small`). Hidden when
+     * omitted. Ignored when the {@link link} slot is provided.
+     */
     linkLabel?: string;
-    /** Fired when the link is pressed. Navigation is the consumer's job. */
+    /**
+     * Real slot for the bottom CTA. Highest precedence — when provided, these
+     * children render instead of the declarative `linkLabel` Text. Seeded
+     * `Text Appearance: Secondary` + `Text Sizes: Small` cascade into the slot
+     * (so a bare `<Text text="Earn" />` matches the design); child-level modes
+     * still win.
+     */
+    link?: React.ReactNode;
+    /** Fired when the declarative CTA (`linkLabel`) is pressed. */
     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.
+     * Independent of {@link onLinkPress} — the bottom CTA keeps its own handler.
      */
     onPress?: (event: GestureResponderEvent) => void;
     /** Disable interaction when `onPress` is set. */
     disabled?: boolean;
-    /** Design-token modes for theming. */
+    /** Design-token modes for theming. Cascaded to slot children. */
     modes?: Modes;
     /** Override the container styles. */
     style?: StyleProp<ViewStyle>;
@@ -55,18 +67,17 @@ export type ValueBackMetricProps = {
  * 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.
+ * `value`, a muted `caption`, and an optional bottom CTA (`linkLabel` / `link`
+ * slot, e.g. "Earn"). `value`, `caption` and the CTA 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.
+ * Colours resolve from the `metricdata/*` tokens; the header glyph from the
+ * `icon/*` tokens (default 18px gold); the CTA from the shared {@link Text}
+ * with `Text Appearance: Secondary` + `Text Sizes: Small` seeded so it renders
+ * purple at 12px like the design (caller `modes` win). Layout/typography
+ * follow the Figma `valueBackMetric/*` variables — not yet in the committed
+ * token snapshot, so they resolve through `getVariableByName` with Figma-node
+ * fallbacks.
  *
  * @example
  * ```tsx
@@ -80,7 +91,7 @@ export type ValueBackMetricProps = {
  * />
  * ```
  */
-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 function ValueBackMetric({ icon, title, value, caption, linkLabel, link, 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

@@ -1,7 +1,7 @@
 export { default as AccountCard, type AccountCardProps, type AccountCardState } from './AccountCard/AccountCard';
 export { default as ActionFooter, type ActionFooterProps } from './ActionFooter/ActionFooter';
 export { default as Attached, type AttachedProps, type AttachedPosition } from './Attached/Attached';
-export { default as AppBar } from './AppBar/AppBar';
+export { default as AppBar, JioDot, type AppBarProps, type JioDotProps, } from './AppBar/AppBar';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
 export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
 export { default as Badge, type BadgeProps, type BadgeType } from './Badge/Badge';

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-21T07:33:30.350Z
+ * Generated: 2026-07-22T21:03:43.084Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

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

package/src/components/Accordion/Accordion.tsx

@@ -93,6 +93,19 @@ export type AccordionProps = {
    * lines as it needs even when horizontal space is tight.
    */
   disableTruncation?: boolean;
+  /**
+   * When `false`, the header Pressable is omitted. Pair with a header-only
+   * Accordion (`showContent={false}`) when the host lifts the title into a
+   * sticky slot (e.g. `ScrollView` `stickyHeaderIndices`).
+   * @default true
+   */
+  showHeader?: boolean;
+  /**
+   * When `false`, the expandable content slot is omitted. Use to render a
+   * header-only Accordion for sticky layouts.
+   * @default true
+   */
+  showContent?: boolean;
 } & React.ComponentProps<typeof View>;
 
 /**
@@ -124,6 +137,8 @@ function Accordion({
   accessibilityState,
   webAccessibilityProps,
   disableTruncation,
+  showHeader = true,
+  showContent = true,
   ...rest
 }: AccordionProps) {
   const [internalExpanded, setInternalExpanded] = useState(defaultExpanded)
@@ -192,8 +207,10 @@ function Accordion({
   const borderColor =
     (getVariableByName('accordion/border/color', resolvedModes) as string | null) ?? '#e6e6e6'
 
+  // Header-only sticky pieces drop the divider while expanded so the paired
+  // content Accordion owns the section border.
   const containerStyle: ViewStyle = {
-    borderBottomWidth: 1,
+    borderBottomWidth: !showContent && isExpanded ? 0 : 1,
     borderBottomColor: borderColor,
   }
 
@@ -239,40 +256,51 @@ function Accordion({
     ? cloneChildrenWithModes(React.Children.toArray(children), resolvedModes)
     : null
 
+  // Content-only + collapsed: nothing to render (header lives in the sticky peer).
+  if (!showHeader && !isExpanded) {
+    return null
+  }
+
+  if (!showHeader && !showContent) {
+    return null
+  }
+
   return (
     <View style={[containerStyle, style]} {...rest}>
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel={undefined}
-        accessibilityHint={accessibilityHint || (isExpanded ? 'Collapse accordion' : 'Expand accordion')}
-        accessibilityState={{
-          expanded: isExpanded,
-          disabled,
-          ...accessibilityState,
-        }}
-        onPress={handleToggle}
-        disabled={disabled}
-        onHoverIn={() => setIsHovered(true)}
-        onHoverOut={() => setIsHovered(false)}
-        style={({ pressed }) => [
-          headerStyle,
-          pressed && !disabled ? { opacity: 0.9 } : null,
-        ]}
-        {...webProps}
-      >
-        <Text style={titleStyle} {...resolveTruncation(disableTruncation, 1)}>
-          {title}
-        </Text>
-        <Icon
-          name={isExpanded ? 'ic_minus' : 'ic_add'}
-          size={iconSize}
-          color={iconColor}
-          accessibilityElementsHidden={true}
-          importantForAccessibility="no"
-        />
-      </Pressable>
-
-      {isExpanded && processedChildren && (
+      {showHeader && (
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={undefined}
+          accessibilityHint={accessibilityHint || (isExpanded ? 'Collapse accordion' : 'Expand accordion')}
+          accessibilityState={{
+            expanded: isExpanded,
+            disabled,
+            ...accessibilityState,
+          }}
+          onPress={handleToggle}
+          disabled={disabled}
+          onHoverIn={() => setIsHovered(true)}
+          onHoverOut={() => setIsHovered(false)}
+          style={({ pressed }) => [
+            headerStyle,
+            pressed && !disabled ? { opacity: 0.9 } : null,
+          ]}
+          {...webProps}
+        >
+          <Text style={titleStyle} {...resolveTruncation(disableTruncation, 1)}>
+            {title}
+          </Text>
+          <Icon
+            name={isExpanded ? 'ic_minus' : 'ic_add'}
+            size={iconSize}
+            color={iconColor}
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no"
+          />
+        </Pressable>
+      )}
+
+      {showContent && isExpanded && processedChildren && (
         <View style={contentStyle}>
           {processedChildren}
         </View>