jfs-components 0.1.18 → 0.1.23

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

@@ -29,6 +29,15 @@ export interface CardProps {
      * Style overrides for the card container.
      */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
+    /** Accessibility label forwarded to the pressable wrapper. */
+    accessibilityLabel?: string;
 }
 /**
  * Card component implementation from Figma node 765:6186.
@@ -45,7 +54,7 @@ export interface CardProps {
  * </Card>
  * ```
  */
-export declare function Card({ header, media, children, modes, mediaAspectRatio, style, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ header, media, children, modes, mediaAspectRatio, style, onPress, disabled, accessibilityLabel, }: CardProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Card {
     var Title: ({ children, style, modes: propModes }: CardTextProps) => import("react/jsx-runtime").JSX.Element;
     var SupportText: ({ children, style, modes: propModes }: CardTextProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -14,13 +14,22 @@ export interface CardFeedbackProps {
      * Style overrides for the card container.
      */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
+    /** Accessibility label forwarded to the pressable wrapper. */
+    accessibilityLabel?: string;
 }
 /**
  * CardFeedback component from Figma node 1280:4481.
  *
  * Used for status updates, warnings, or feedback.
  */
-export declare function CardFeedback({ children, modes: propModes, style, }: CardFeedbackProps): import("react/jsx-runtime").JSX.Element;
+export declare function CardFeedback({ children, modes: propModes, style, onPress, disabled, accessibilityLabel, }: CardFeedbackProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace CardFeedback {
     var Icon: typeof import("./CardFeedback").Icon;
     var Content: typeof import("./CardFeedback").Content;

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

@@ -32,6 +32,15 @@ export type CardInsightProps = {
     modes?: Modes;
     /** Override container styles. */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
+    /** Accessibility label forwarded to the pressable wrapper (defaults to `title`). */
+    accessibilityLabel?: string;
 };
 /**
  * `CardInsight` renders a single insight card composed of:
@@ -44,6 +53,6 @@ export type CardInsightProps = {
  * @component
  * @param {CardInsightProps} props
  */
-declare function CardInsight({ title, subtitle, badge, children, footer, divider, modes, style, }: CardInsightProps): import("react/jsx-runtime").JSX.Element;
+declare function CardInsight({ title, subtitle, badge, children, footer, divider, modes, style, onPress, disabled, accessibilityLabel, }: CardInsightProps): import("react/jsx-runtime").JSX.Element;
 export default CardInsight;
 //# sourceMappingURL=CardInsight.d.ts.map

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

@@ -12,6 +12,15 @@ export type CardProviderInfoProps = {
     modes?: Modes;
     /** Override container styles. */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
+    /** Accessibility label forwarded to the pressable wrapper (defaults to `label`). */
+    accessibilityLabel?: string;
 };
 /**
  * CardProviderInfo displays a product header (ProductLabel) followed by a
@@ -20,6 +29,6 @@ export type CardProviderInfoProps = {
  * @component
  * @param {CardProviderInfoProps} props
  */
-declare function CardProviderInfo({ label, imageSource, children, modes, style, }: CardProviderInfoProps): import("react/jsx-runtime").JSX.Element;
+declare function CardProviderInfo({ label, imageSource, children, modes, style, onPress, disabled, accessibilityLabel, }: CardProviderInfoProps): import("react/jsx-runtime").JSX.Element;
 export default CardProviderInfo;
 //# sourceMappingURL=CardProviderInfo.d.ts.map

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

@@ -10,7 +10,25 @@ export type CheckboxItemProps = {
     onValueChange?: (checked: boolean) => void;
     /** Whether the row is disabled — both the checkbox and row press handler are disabled. */
     disabled?: boolean;
-    /** The label text rendered next to the checkbox. */
+    /**
+     * Content rendered in the row's label slot (between the leading and trailing
+     * edges). This is the primary way to supply the label and mirrors the Figma
+     * "slot" — pass a plain string for the default token-styled label, or any
+     * custom node (e.g. a `<Text>`, a row of `<Text>` + `<Badge>`, etc.) for full
+     * control. Custom nodes receive the same `modes` as the parent.
+     *
+     * When both `children` and the legacy {@link label} prop are provided,
+     * `children` wins.
+     */
+    children?: React.ReactNode;
+    /**
+     * The label content rendered next to the checkbox.
+     *
+     * @deprecated Prefer the `children` slot instead
+     * (`<CheckboxItem>Fixed deposit • 0245</CheckboxItem>`). `label` is kept for
+     * backward compatibility and behaves identically — it is used only when no
+     * `children` are provided.
+     */
     label?: React.ReactNode;
     /**
      * Position of the checkbox control relative to the label.
@@ -59,13 +77,18 @@ export type CheckboxItemProps = {
  * ```tsx
  * const [checked, setChecked] = useState(false)
  *
+ * // Recommended: pass the label via the children slot.
  * <CheckboxItem
- *   label="Fixed deposit • 0245"
  *   checked={checked}
  *   onValueChange={setChecked}
  *   control="leading"
  *   modes={{ 'Color Mode': 'Light' }}
- * />
+ * >
+ *   Fixed deposit • 0245
+ * </CheckboxItem>
+ *
+ * // Still supported (deprecated): the `label` prop.
+ * <CheckboxItem label="Fixed deposit • 0245" />
  * ```
  */
 declare const CheckboxItem: React.ForwardRefExoticComponent<CheckboxItemProps & React.RefAttributes<View>>;

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export type ContentSheetProps = {
+    /**
+     * Sheet content. The sheet is one big slot: whatever you place here is
+     * stacked in a column (separated by the `contentSheet/gap` token) inside the
+     * sheet's padding. The sheet has **no fixed height** — it grows and shrinks
+     * to fit these children automatically.
+     */
+    children?: React.ReactNode;
+    /**
+     * Design-token modes. Cascaded to every slot child via
+     * {@link cloneChildrenWithModes} so nested `ListItem`/`Section`/etc. resolve
+     * the same theme without you wiring `modes` onto each one.
+     */
+    modes?: Modes;
+    /**
+     * 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
+     * back. The follow animation is driven entirely on the UI thread
+     * (`useAnimatedKeyboard`) so it never schedules a React re-render and stays
+     * in perfect sync with the keyboard on both iOS and Android.
+     *
+     * On web this is a no-op (soft keyboards there don't overlay content).
+     * Default `true`.
+     */
+    avoidKeyboard?: boolean;
+    /**
+     * Extra gap (px) inserted between the top of the keyboard and the bottom of
+     * the sheet while the keyboard is open. Default `0` (sheet sits flush on the
+     * keyboard).
+     */
+    keyboardSpacing?: number;
+    /**
+     * Add the device's bottom safe-area inset (home indicator) on top of the
+     * sheet's bottom padding, so content never sits under the indicator when the
+     * sheet rests at the bottom of the screen. Default `true`.
+     */
+    safeAreaBottom?: boolean;
+    /**
+     * Pin the sheet to the bottom of its parent (absolute, full width). This is
+     * the default behaviour — the sheet "just stays at the bottom".
+     *
+     * Set to `false` to render the sheet in normal flow instead (e.g. when you
+     * compose it inside your own layout container). Keyboard avoidance still
+     * works in both modes.
+     */
+    pinToBottom?: boolean;
+    /** Optional style override applied to the sheet container. */
+    style?: StyleProp<ViewStyle>;
+} & Omit<ViewProps, 'style' | 'children'>;
+/**
+ * ContentSheet — a bottom-anchored surface that is essentially one big slot
+ * with padding and rounded top corners, mirroring the Figma "Content Sheet".
+ *
+ * Behaviour highlights:
+ *  - **Auto height (free & automatic).** The sheet never sets an explicit
+ *    height. React Native's layout engine (Yoga) sizes it to its children on
+ *    the native thread, so when the slot content grows or shrinks the sheet
+ *    follows with zero JS measurement and zero extra re-renders — the most
+ *    performant option possible.
+ *  - **Keyboard avoidance** on iOS and Android via `avoidKeyboard` (UI-thread
+ *    `useAnimatedKeyboard`, no re-renders).
+ *  - **Bottom pinned** by default; opt out with `pinToBottom={false}`.
+ *  - **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;
+export default ContentSheet;
+//# sourceMappingURL=ContentSheet.d.ts.map

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

@@ -22,7 +22,16 @@ export type DebitCardProps = {
     modes?: Modes;
     /** Container style overrides */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
+    /** Accessibility label forwarded to the pressable wrapper. */
+    accessibilityLabel?: string;
 };
-declare function DebitCard({ cardholderName, cardNumber, expireDate, bankName, cardType, cardArtSource, bankLogoSlot, providerLogoSlot, modes: propModes, style, }: DebitCardProps): import("react/jsx-runtime").JSX.Element;
+declare function DebitCard({ cardholderName, cardNumber, expireDate, bankName, cardType, cardArtSource, bankLogoSlot, providerLogoSlot, modes: propModes, style, onPress, disabled, accessibilityLabel, }: DebitCardProps): import("react/jsx-runtime").JSX.Element;
 export default DebitCard;
 //# sourceMappingURL=DebitCard.d.ts.map

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export type HeroSectionProps = {
+    /** Headline text rendered by the internal {@link Title}. */
+    title?: string;
+    /** Optional subtitle shown below the title. Omit to hide it. */
+    subtitle?: string;
+    /** Horizontal alignment of the title/subtitle block. */
+    titleTextAlign?: 'Left' | 'Center';
+    /** Whether to render the title block. Ignored when `titleSlot` is provided. */
+    showTitle?: boolean;
+    /**
+     * Fully replace the default title block. When provided, `title`, `subtitle`,
+     * `titleTextAlign`, and `showTitle` are ignored. `modes` cascade into the slot.
+     */
+    titleSlot?: React.ReactNode;
+    /**
+     * Whether to render the search + filter row. Ignored when `searchSlot`
+     * is provided.
+     */
+    showSearch?: boolean;
+    /** Controlled value for the search input. */
+    searchValue?: string;
+    /** Change handler for the search input. */
+    onSearchChange?: (text: string) => void;
+    /** Placeholder for the search input. */
+    searchPlaceholder?: string;
+    /**
+     * Fully replace the search input (the flexible left part of the row). When
+     * provided, `searchValue`, `onSearchChange`, and `searchPlaceholder` are
+     * ignored. `modes` cascade into the slot.
+     */
+    searchSlot?: React.ReactNode;
+    /** Whether to render the trailing filter icon button. */
+    showFilter?: boolean;
+    /** Icon name for the filter button (from the icon registry). */
+    filterIcon?: string;
+    /** Press handler for the filter button. */
+    onFilterPress?: () => void;
+    /** Accessibility label for the filter button. */
+    filterAccessibilityLabel?: string;
+    /**
+     * Fully replace the trailing filter control. When provided, `filterIcon`,
+     * `onFilterPress`, and `showFilter` are ignored. `modes` cascade into the slot.
+     */
+    filterSlot?: React.ReactNode;
+    /** Content rendered in the body area below the search row. */
+    children?: React.ReactNode;
+    /** Mode configuration for design-token theming. */
+    modes?: Modes;
+    /** Style overrides applied to the outer container. */
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+};
+/**
+ * HeroSection is a page-level header block: a title (with optional subtitle),
+ * an optional search row (a flexible search input plus a trailing filter
+ * button), and a free-form content slot below.
+ *
+ * All spacing/background values resolve from the `HeroSection / Output` design
+ * token collection via `getVariableByName`. `modes` cascade to every slot and
+ * child component so downstream tokens stay in sync.
+ *
+ * @example
+ * ```tsx
+ * <HeroSection
+ *   title="Transactions"
+ *   subtitle="Last 30 days"
+ *   searchValue={query}
+ *   onSearchChange={setQuery}
+ *   onFilterPress={openFilters}
+ * >
+ *   <TransactionList data={items} />
+ * </HeroSection>
+ * ```
+ */
+declare function HeroSection({ title, subtitle, titleTextAlign, showTitle, titleSlot, showSearch, searchValue, onSearchChange, searchPlaceholder, searchSlot, showFilter, filterIcon, onFilterPress, filterAccessibilityLabel, filterSlot, children, modes: propModes, style, testID, }: HeroSectionProps): import("react/jsx-runtime").JSX.Element;
+export default HeroSection;
+//# sourceMappingURL=HeroSection.d.ts.map

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

@@ -1,6 +1,15 @@
 import React from 'react';
-import { type ImageSourcePropType, type ImageStyle, type StyleProp, type ViewStyle, type ImageResizeMode } from 'react-native';
+import { type ImageSourcePropType, type ImageStyle, type StyleProp, type ViewStyle, type ImageResizeMode, type ImageLoadEventData, type ImageErrorEventData, type NativeSyntheticEvent } from 'react-native';
 type ImageResizeMethod = 'auto' | 'resize' | 'scale' | 'none';
+/**
+ * iOS URL cache control (maps to RN's `source.cache`, no-op on Android/web):
+ *  - `'default'`        — use the native platform's default caching.
+ *  - `'reload'`         — ignore any cache, always fetch from the network.
+ *  - `'force-cache'`    — use the cached response regardless of age; fetch
+ *                          only if absent.
+ *  - `'only-if-cached'` — use the cache only; never hit the network.
+ */
+type ImageCacheControl = 'default' | 'reload' | 'force-cache' | 'only-if-cached';
 export type ImageProps = {
     /**
      * Image source. Accepts the same shapes as React Native's `<Image>` plus a
@@ -61,8 +70,24 @@ export type ImageProps = {
      * the group.
      */
     loading?: boolean | undefined;
+    /**
+     * iOS URL cache strategy applied to remote (`{ uri }`) sources. Injected into
+     * the RN `source.cache` field so callers don't have to re-shape the source
+     * object themselves. No-op for local/required assets and on Android/web.
+     */
+    cache?: ImageCacheControl | undefined;
+    /**
+     * Called when the image finishes loading successfully. Forwarded straight to
+     * RN's `<Image onLoad>`.
+     */
+    onLoad?: ((event: NativeSyntheticEvent<ImageLoadEventData>) => void) | undefined;
+    /**
+     * Called when the image fails to load. Forwarded straight to RN's
+     * `<Image onError>`.
+     */
+    onError?: ((event: NativeSyntheticEvent<ImageErrorEventData>) => void) | undefined;
 };
-declare function Image({ imageSource, ratio, resizeMode, resizeMethod, width, height, borderRadius, style, accessibilityLabel, accessibilityElementsHidden, importantForAccessibility, loading, }: ImageProps): import("react/jsx-runtime").JSX.Element;
+declare function Image({ imageSource, ratio, resizeMode, resizeMethod, width, height, borderRadius, style, accessibilityLabel, accessibilityElementsHidden, importantForAccessibility, loading, cache, onLoad, onError, }: ImageProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Image>;
 export default _default;
 //# sourceMappingURL=Image.d.ts.map

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import { type TextStyle, type StyleProp, type GestureResponderEvent } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export type LinkProps = {
+    /**
+     * The link label. You may also pass content as JSX children
+     * (e.g. `<Link>Terms</Link>`); when both are provided, `children` wins.
+     * Mirrors the {@link Text} API so `Link` is a near-drop-in, underlined
+     * sibling of `Text`.
+     */
+    text?: string;
+    /** Child nodes (string or nested `Text`/`Link`). Wins over `text`. */
+    children?: React.ReactNode;
+    /**
+     * Called when the link is activated. Navigation is the consumer's job
+     * (e.g. `Linking.openURL`, a router push) — `Link` is intentionally
+     * navigation-agnostic and React Native friendly (no `href`/`target`).
+     */
+    onPress?: (event: GestureResponderEvent) => void;
+    /** Disables interaction and dims the label. */
+    disabled?: boolean;
+    /**
+     * Layout sizing (matches the Figma `autolayout` variant).
+     * - `Fill` (default): the label stretches to fill the parent's width, so
+     *   `textAlign="Center"` is visible and the whole line is tappable.
+     * - `Hug`: the label hugs its content width.
+     */
+    autolayout?: 'Fill' | 'Hug';
+    /** Horizontal alignment of the label (matches `Text`). */
+    textAlign?: 'Left' | 'Center';
+    /** Modes configuration for design token resolution (cascades from `TextSegment`). */
+    modes?: Modes;
+    /** Style override for the label. */
+    style?: StyleProp<TextStyle>;
+    /** Number of lines to limit the label to. */
+    numberOfLines?: number;
+    /** Never truncate — drops the clamp/ellipsis and lets the label overflow. See {@link Text}. */
+    disableTruncation?: boolean;
+    /** Force a single non-wrapping line (implies `disableTruncation`). See {@link Text}. */
+    singleLine?: boolean;
+    /** Accessibility label; defaults to the resolved text content. */
+    accessibilityLabel?: string;
+    /** Accessibility hint describing what activating the link does. */
+    accessibilityHint?: string;
+};
+/**
+ * Link — an underlined, pressable text primitive.
+ *
+ * It renders a single React Native `<Text>` (not a `Pressable`), so it flows
+ * inline and can be nested inside {@link TextSegment} exactly like a `Text`
+ * run — the React Native equivalent of an `<a>` inside a `<p>`. Font family,
+ * size, weight, line-height and letter-spacing come from the dedicated `link/*`
+ * tokens, while the colour resolves from `text/foreground` (so a link sits on
+ * the same colour as the surrounding copy). The label is always underlined.
+ *
+ * @example Standalone
+ * ```tsx
+ * <Link text="Forgot PIN?" onPress={() => navigation.navigate('ResetPin')} />
+ * ```
+ *
+ * @example Inline inside TextSegment
+ * ```tsx
+ * <TextSegment>
+ *   <Text>By continuing you agree to our </Text>
+ *   <Link onPress={openTerms}>Terms</Link>
+ *   <Text>.</Text>
+ * </TextSegment>
+ * ```
+ */
+declare function Link({ text, children, onPress, disabled, autolayout, textAlign, modes, style, numberOfLines, disableTruncation, singleLine, accessibilityLabel, accessibilityHint, }: LinkProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Link>;
+export default _default;
+//# sourceMappingURL=Link.d.ts.map

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

@@ -33,6 +33,15 @@ export interface MediaCardProps {
      * Style overrides for the card container.
      */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
+    /** Accessibility label forwarded to the pressable wrapper. */
+    accessibilityLabel?: string;
 }
 /**
  * MediaCard component implementation from Figma node 1241:4140.
@@ -52,7 +61,7 @@ export interface MediaCardProps {
  *    interactive elements inside the overlays without the wrapper itself
  *    capturing them.
  */
-export declare function MediaCard({ imageSource, ratio, media, children, modes, style, }: MediaCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function MediaCard({ imageSource, ratio, media, children, modes, style, onPress, disabled, accessibilityLabel, }: MediaCardProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace MediaCard {
     var Header: typeof import("./MediaCard").Header;
     var Title: typeof import("./MediaCard").Title;

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

@@ -42,10 +42,19 @@ export type RechargeCardProps = {
      */
     modes?: Modes;
     style?: ViewStyle;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
+    /** Accessibility label forwarded to the pressable wrapper (defaults to `title`). */
+    accessibilityLabel?: string;
 };
 /**
  * RechargeCard component implementation from Figma node 2235:937.
  * Displays a recharge plan with price, validity, data, and subscription details.
  */
-export default function RechargeCard({ title, price, validity, data, disclaimer, subscriptionContent, actions, modes, style, }: RechargeCardProps): import("react/jsx-runtime").JSX.Element;
+export default function RechargeCard({ title, price, validity, data, disclaimer, subscriptionContent, actions, modes, style, onPress, disabled, accessibilityLabel, }: RechargeCardProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RechargeCard.d.ts.map

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

@@ -29,6 +29,13 @@ export type TestimonialsCardProps = {
      * from the title and body.
      */
     accessibilityLabel?: string;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
 };
 /**
  * TestimonialsCard renders a compact, fixed-width card with a circular avatar,
@@ -46,7 +53,7 @@ export type TestimonialsCardProps = {
  * />
  * ```
  */
-declare function TestimonialsCard({ title, body, modes, style, avatarProps, accessibilityLabel, }: TestimonialsCardProps): import("react/jsx-runtime").JSX.Element;
+declare function TestimonialsCard({ title, body, modes, style, avatarProps, accessibilityLabel, onPress, disabled, }: TestimonialsCardProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof TestimonialsCard>;
 export default _default;
 //# sourceMappingURL=TestimonialsCard.d.ts.map

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

@@ -36,6 +36,7 @@ export { default as FullscreenModal, type FullscreenModalProps } from './Fullscr
 export { default as Form, type FormProps } from './Form/Form';
 export { useFormContext } from './Form/Form';
 export { default as FormField, type FormFieldProps, type FormFieldType } from './FormField/FormField';
+export { default as ContentSheet, type ContentSheetProps } from './ContentSheet/ContentSheet';
 export { default as CircularProgressBar, type CircularProgressBarProps } from './CircularProgressBar/CircularProgressBar';
 export { default as CircularProgressBarDoted, type CircularProgressBarDotedProps } from './CircularProgressBarDoted/CircularProgressBarDoted';
 export { default as CircularRating, type CircularRatingProps } from './CircularRating/CircularRating';
@@ -45,6 +46,7 @@ export { default as ComparisonBar, type ComparisonBarProps, type ComparisonBarIt
 export { default as AllocationComparisonChart, type AllocationComparisonChartProps, type AllocationSegment } from './AllocationComparisonChart/AllocationComparisonChart';
 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 HoldingsCard, type HoldingsCardProps } from './HoldingsCard/HoldingsCard';
 export { default as HStack, type HStackProps } from './HStack/HStack';
 export { default as Icon, type IconProps } from './Icon/Icon';
@@ -52,6 +54,7 @@ export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
 export { default as Image, type ImageProps } from './Image/Image';
 export { default as LazyList } from './LazyList/LazyList';
+export { default as Link, type LinkProps } from './Link/Link';
 export { default as LinearMeter, type LinearMeterProps } from './LinearMeter/LinearMeter';
 export { default as LinearProgress, type LinearProgressProps } from './LinearProgress/LinearProgress';
 export { default as ListGroup } from './ListGroup/ListGroup';

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

@@ -78,6 +78,7 @@ export declare const FIGMA_MODES: {
     readonly "contentInset/Right": readonly ["Default", "S", "M", "L"];
     readonly "ContentSheet / Output": readonly ["Default"];
     readonly Context: readonly ["Default", "Nudge&Alert", "CTACard", "ListItem"];
+    readonly "context 10": readonly ["Default", "Profile card"];
     readonly "context 8": readonly ["Default", "Section"];
     readonly "context 9": readonly ["Default", "Stack"];
     readonly Context2: readonly ["Default", "AppBar"];
@@ -116,6 +117,7 @@ export declare const FIGMA_MODES: {
     readonly FullScreenModal: readonly ["Default"];
     readonly Gap: readonly ["S", "M", "L", "None"];
     readonly "Gauge / Output": readonly ["Default"];
+    readonly "Grid / Output": readonly ["Default"];
     readonly "Handle Boolean": readonly ["False", "True"];
     readonly "Heading / Output": readonly ["Default"];
     readonly "Heading text": readonly ["Default", "Slot"];
@@ -139,6 +141,7 @@ export declare const FIGMA_MODES: {
     readonly "LinearProgress / Output": readonly ["Default"];
     readonly "LinearProgress Size": readonly ["M", "L"];
     readonly "Link / Output": readonly ["Default"];
+    readonly "Link Apperances": readonly ["Neutral", "Primary", "Secondary", "Tertiary"];
     readonly "List Item / Output": readonly ["Default"];
     readonly "List Item Style": readonly ["Default", "Boxed", "Minimal"];
     readonly "listGroup / Output": readonly ["Default"];
@@ -157,6 +160,7 @@ export declare const FIGMA_MODES: {
     readonly NavArrow: readonly ["Default"];
     readonly "NavArrow / Output": readonly ["Default"];
     readonly "NavArrow Direction": readonly ["Left&Right", "Top&Bottom"];
+    readonly "New Collection": readonly ["Default"];
     readonly "NoteInput / Output": readonly ["Default"];
     readonly "Nudge / Output": readonly ["Default"];
     readonly "Nudge padding": readonly ["Default", "None"];
@@ -178,12 +182,16 @@ export declare const FIGMA_MODES: {
     readonly "Product Merchandising card": readonly ["Default"];
     readonly "ProductLabel / Output": readonly ["Default"];
     readonly "ProductOverview / Output": readonly ["Default"];
+    readonly "Profile Card Appearance": readonly ["Default", "Premium"];
     readonly "ProgressBadge / Output": readonly ["Default"];
     readonly ProjectionMarker: readonly ["Default"];
     readonly "QR code / Output": readonly ["Idle"];
     readonly "Radio / Output": readonly ["Default"];
     readonly Radius: readonly ["S", "M", "L", "None"];
     readonly "RangeTrack / Output": readonly ["Default"];
+    readonly "Rating / Output": readonly ["Default"];
+    readonly "Rating Star / Output": readonly ["Default"];
+    readonly "Rating Star State": readonly ["idle", "selected"];
     readonly "RechargeCard / Output": readonly ["Default"];
     readonly rotfl: readonly ["Default"];
     readonly "SavingsGoalSummary / 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-06-29T08:47:00.741Z
+ * Generated: 2026-07-01T12:55:42.353Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

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