jfs-components 0.0.42 → 0.0.44

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

@@ -23,6 +23,11 @@ export type ButtonProps = SafePressableProps & {
     renderContent?: (styles: StyleProp<TextStyle>) => React.ReactNode;
     leading?: React.ReactNode;
     trailing?: React.ReactNode;
+    /**
+     * Name of the icon to display on the right side of the button.
+     * Takes precedence over `trailing` if both are provided.
+     */
+    icon?: string;
     modes?: Record<string, any>;
     onPress?: () => void;
     disabled?: boolean;
@@ -55,6 +60,6 @@ export type ButtonProps = SafePressableProps & {
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  * @param {Object} [props.accessibilityState] - Additional accessibility state information
  */
-declare function Button({ label, children, renderContent, leading, trailing, modes, onPress, disabled, style, labelStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function Button({ label, children, renderContent, leading, trailing, icon, modes, onPress, disabled, style, labelStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1,30 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+export interface CheckboxProps {
+    /** Whether the checkbox is checked (controlled) */
+    checked?: boolean;
+    /** Initial checked state (uncontrolled) */
+    defaultChecked?: boolean;
+    /** Callback when the checked state changes */
+    onValueChange?: (checked: boolean) => void;
+    /** Whether the checkbox is disabled */
+    disabled?: boolean;
+    /** Design token modes for theming */
+    modes?: Record<string, any>;
+    /** Override container styles */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for screen readers */
+    accessibilityLabel?: string;
+}
+/**
+ * Checkbox component that maps directly to the Figma design using design tokens.
+ *
+ * Supports 8 visual states: Idle, Hover, Focus, Selected, Selected Hover,
+ * Focus Selected, Disabled, and Disabled Active. All styling is driven by
+ * design tokens with optional mode overrides.
+ *
+ * @component
+ * @param {CheckboxProps} props
+ */
+declare function Checkbox({ checked: controlledChecked, defaultChecked, onValueChange, disabled, modes, style, accessibilityLabel, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export default Checkbox;
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -1,9 +1,17 @@
 import React from 'react';
-import { View, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
-type MoneyValueProps = {
+import { Pressable, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+export type MoneyValueProps = {
+    /** Monetary value to display. */
     value?: string | number;
+    /** Currency symbol or ISO code (e.g. "INR"). */
     currency?: string;
+    /** Explicitly override negative display. If undefined, auto-detects from value. */
     negative?: boolean;
+    /** When true, masks the value for privacy (e.g. •••). */
+    hidden?: boolean;
+    /** When true, a blinking vertical cursor is shown at the end of the value text. */
+    focused?: boolean;
+    /** Modes configuration mapped to Figma tokens. */
     modes?: Record<string, any>;
     style?: StyleProp<ViewStyle>;
     valueStyle?: StyleProp<TextStyle>;
@@ -11,34 +19,18 @@ type MoneyValueProps = {
     negativeSignStyle?: StyleProp<TextStyle>;
     accessibilityLabel?: string;
     accessibilityHint?: string;
-} & React.ComponentProps<typeof View>;
+} & React.ComponentProps<typeof Pressable>;
 /**
  * MoneyValue component that mirrors the Figma MoneyValue design.
  *
- * The styling is fully resolved from Figma design tokens using `getVariableByName`
- * and an optional `modes` configuration, consistent with other components in this library.
+ * The styling is fully resolved from Figma design tokens using `getVariableByName`.
+ * Supports separate typography scaling for currency and value.
  *
- * Currency can be provided either as a symbol (e.g. "₹") or as an ISO code
- * (e.g. "INR", "USD"). When an ISO code is provided, it will be mapped to the
- * appropriate symbol, with special care to support INR and other major currencies.
- *
- * Negative values are auto-detected from the value prop (e.g., -500 or "-500").
- * The `negative` prop can be used to explicitly override this behavior.
- *
- * @component
- * @param {Object} props
- * @param {string|number} [props.value="500"] - Monetary value to display. Negative values are auto-detected.
- * @param {string} [props.currency="₹"] - Currency symbol or ISO code (e.g. "INR").
- * @param {boolean} [props.negative] - Explicitly override negative display. If undefined, auto-detects from value.
- * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
- *                                   Example: {"MoneyValue / Theme": "Default"}
- * @param {Object} [props.style] - Optional container style overrides.
- * @param {Object} [props.valueStyle] - Optional value text style overrides.
- * @param {Object} [props.currencyStyle] - Optional currency text style overrides.
- * @param {Object} [props.negativeSignStyle] - Optional negative sign text style overrides.
- * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, generates from value and currency
- * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ * To make this component editable without coupling it to a Numpad component,
+ * use the `onPress` prop and manage the data state in the parent layer. When
+ * the `focused` prop is provided to this component, it will display a natural
+ * blinking text cursor.
  */
-declare function MoneyValue({ value, currency, negative, modes, style, valueStyle, currencyStyle, negativeSignStyle, accessibilityLabel, accessibilityHint, ...rest }: MoneyValueProps): import("react/jsx-runtime").JSX.Element;
+declare function MoneyValue({ value, currency, negative, focused, hidden, 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/NoteInput/NoteInput.d.ts

@@ -0,0 +1,23 @@
+import { type StyleProp, type ViewStyle, type TextStyle, type TextInputProps } from 'react-native';
+export type NoteInputProps = {
+    /** The value of the text input */
+    value?: string;
+    /** The placeholder when empty ("Add note" by default) */
+    placeholder?: string;
+    /** Callback when text changes */
+    onChangeText?: (text: string) => void;
+    /** Design token modes (e.g., {'InputState': 'Idle', 'Color Mode': 'Light'}) */
+    modes?: Record<string, any>;
+    /** Custom container style */
+    style?: StyleProp<ViewStyle>;
+    /** Custom text input style */
+    textStyle?: StyleProp<TextStyle>;
+    /** State of the component */
+    state?: 'Editing' | 'Idle';
+} & Omit<TextInputProps, 'style' | 'value' | 'onChangeText' | 'placeholder'>;
+/**
+ * NoteInput component representing an interactive "Add note" badge style field.
+ * Allows the user to click, clears the placeholder text, and shows a blinking cursor when focused.
+ */
+export default function NoteInput({ value, placeholder, onChangeText, modes, style, textStyle, state: explicitState, onFocus, onBlur, ...rest }: NoteInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NoteInput.d.ts.map

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

@@ -0,0 +1,3 @@
+export { default } from './NoteInput';
+export type { NoteInputProps } from './NoteInput';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,35 @@
+import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+export type NumpadKeyValue = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '.' | 'backspace';
+export interface NumpadProps {
+    /** Design token modes for theming (e.g., {"Color Mode": "Light"}) */
+    modes?: Record<string, any>;
+    /** Callback fired when any key is pressed */
+    onKeyPress?: (key: NumpadKeyValue) => void;
+    /** Whether to show the decimal point key (default: true) */
+    showDecimal?: boolean;
+    /**
+     * When true, digit positions (0-9) are randomised on each mount for
+     * anti-keylogging / shoulder-surfing protection. The decimal and
+     * backspace keys keep their fixed positions.
+     */
+    shuffle?: boolean;
+    /** Override container styles */
+    style?: StyleProp<ViewStyle>;
+    /** Override individual key styles */
+    keyStyle?: StyleProp<ViewStyle>;
+    /** Override text styles on digit / decimal keys */
+    keyTextStyle?: StyleProp<TextStyle>;
+}
+/**
+ * Secure numpad component for the JFS finance system.
+ *
+ * Renders a 3×4 grid of digit keys (0-9), an optional decimal key, and a
+ * backspace key. Digit positions are shuffled by default to guard against
+ * keylogging and shoulder-surfing attacks on mobile devices.
+ *
+ * @component
+ * @param {NumpadProps} props
+ */
+declare function Numpad({ modes, onKeyPress, showDecimal, shuffle, style, keyStyle, keyTextStyle, }: NumpadProps): import("react/jsx-runtime").JSX.Element;
+export default Numpad;
+//# sourceMappingURL=Numpad.d.ts.map

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

@@ -0,0 +1,47 @@
+import { type ReactNode } from 'react';
+import { type ViewStyle } from 'react-native';
+export type StatusHeroProps = {
+    /**
+     * Custom media slot content.
+     * Defaults to an IconCapsule above a MoneyValue.
+     * Modes are automatically injected if the slot is a valid React element.
+     */
+    renderMedia?: ReactNode;
+    /** Title text displayed below the media slot */
+    title?: string;
+    /** Whether to render the title */
+    showTitle?: boolean;
+    /** Body/subtitle text displayed below the title */
+    subtitle?: string;
+    /** Icon name used in the default media slot */
+    iconName?: string;
+    /** Monetary value shown in the default MoneyValue inside the media slot */
+    value?: string;
+    /** Currency symbol or ISO code for the default MoneyValue */
+    currency?: string;
+    /** Mode configuration for design tokens */
+    modes?: Record<string, any>;
+    style?: ViewStyle;
+};
+/**
+ * StatusHero component that displays a hero section for payment/transaction status screens.
+ *
+ * Contains a media slot (defaults to IconCapsule + MoneyValue) and a content area
+ * with an optional title and a subtitle. All visual values are resolved from Figma
+ * design tokens via `getVariableByName`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <StatusHero
+ *   iconName="ic_confirm"
+ *   value="50"
+ *   currency="INR"
+ *   title="You're set to make payments"
+ *   subtitle="₹50 will be auto-invested daily, stay consistent & stay golden."
+ *   modes={{ 'Color Mode': 'Light' }}
+ * />
+ * ```
+ */
+export default function StatusHero({ renderMedia, title, showTitle, subtitle, iconName, value, currency, modes: propModes, style, }: StatusHeroProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StatusHero.d.ts.map

package/lib/typescript/src/components/Tabs/TabItem.d.ts

@@ -0,0 +1,29 @@
+import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+export interface TabItemProps {
+    /** Label text to display */
+    label?: string;
+    /** Whether this tab item is currently active/selected */
+    active?: boolean;
+    /** Callback when this tab item is pressed */
+    onPress?: () => void;
+    /** Design token modes for theming */
+    modes?: Record<string, any>;
+    /** Override container styles */
+    style?: StyleProp<ViewStyle>;
+    /** Override label text styles */
+    labelStyle?: StyleProp<TextStyle>;
+    /** Accessibility label for screen readers */
+    accessibilityLabel?: string;
+}
+/**
+ * Individual tab item used inside the Tabs container.
+ *
+ * Supports idle and active states driven by design tokens.
+ * When active, a bottom indicator bar is shown beneath the label.
+ *
+ * @component
+ * @param {TabItemProps} props
+ */
+declare function TabItem({ label, active, onPress, modes, style, labelStyle, accessibilityLabel, }: TabItemProps): import("react/jsx-runtime").JSX.Element;
+export default TabItem;
+//# sourceMappingURL=TabItem.d.ts.map

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import TabItem from './TabItem';
+export interface TabsProps {
+    /**
+     * Tab item children. Each child should be a <TabItem> component.
+     * Modes are automatically forwarded to all TabItem children.
+     */
+    children: React.ReactNode;
+    /** Design token modes for theming */
+    modes?: Record<string, any>;
+    /**
+     * When true, the tabs row scrolls horizontally (useful for many items).
+     * @default false
+     */
+    scrollable?: boolean;
+    /** Override container styles */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Tabs container component that lays out TabItem children horizontally.
+ *
+ * The "Tab items" slot maps to React children — each child should be a
+ * `<TabItem>` element. The `modes` prop is automatically forwarded to
+ * every TabItem child so theming is consistent.
+ *
+ * @component
+ * @param {TabsProps} props
+ *
+ * @example
+ * ```tsx
+ * const [activeIndex, setActiveIndex] = useState(0);
+ *
+ * <Tabs modes={{ 'Color Mode': 'Light' }}>
+ *   <TabItem label="Tab 1" active={activeIndex === 0} onPress={() => setActiveIndex(0)} />
+ *   <TabItem label="Tab 2" active={activeIndex === 1} onPress={() => setActiveIndex(1)} />
+ *   <TabItem label="Tab 3" active={activeIndex === 2} onPress={() => setActiveIndex(2)} />
+ * </Tabs>
+ * ```
+ */
+declare function Tabs({ children, modes, scrollable, style, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export { TabItem };
+export default Tabs;
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1,14 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type ToastPlacement } from './useToast';
+export interface ToastProps {
+    id: string;
+    title: string;
+    timeout?: number | undefined;
+    onClose?: (() => void) | undefined;
+    modes?: Record<string, any> | undefined;
+    placement?: ToastPlacement | undefined;
+    style?: StyleProp<ViewStyle> | undefined;
+}
+declare function Toast({ id, title, timeout, onClose, modes, placement, style, }: ToastProps): import("react/jsx-runtime").JSX.Element;
+export default Toast;
+//# sourceMappingURL=Toast.d.ts.map

package/lib/typescript/src/components/Toast/ToastProvider.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type ToastPlacement } from './useToast';
+export interface ToastProviderProps {
+    children: React.ReactNode;
+    maxVisibleToasts?: number;
+    placement?: ToastPlacement;
+    modes?: Record<string, any>;
+}
+declare function ToastProvider({ children, maxVisibleToasts, placement, modes, }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
+export default ToastProvider;
+//# sourceMappingURL=ToastProvider.d.ts.map

package/lib/typescript/src/components/Toast/useToast.d.ts

@@ -0,0 +1,24 @@
+export type ToastPlacement = 'top' | 'bottom';
+export interface ToastOptions {
+    title: string;
+    timeout?: number;
+    onClose?: () => void;
+    modes?: Record<string, any>;
+}
+export interface ToastEntry {
+    id: string;
+    title: string;
+    timeout: number;
+    onClose?: (() => void) | undefined;
+    modes?: Record<string, any> | undefined;
+}
+export declare function addToast(options: ToastOptions): string;
+export declare function closeToast(id: string): void;
+export declare function closeAll(): void;
+export declare function useToast(): {
+    toasts: ToastEntry[];
+    addToast: typeof addToast;
+    closeToast: typeof closeToast;
+    closeAll: typeof closeAll;
+};
+//# sourceMappingURL=useToast.d.ts.map

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

@@ -7,6 +7,7 @@ export { default as BottomNav } from './BottomNav/BottomNav';
 export { default as BottomNavItem } from './BottomNavItem/BottomNavItem';
 export { default as Button, type ButtonProps } from './Button/Button';
 export { default as Card } from './Card/Card';
+export { default as Checkbox, type CheckboxProps } from './Checkbox/Checkbox';
 export { default as CardFeedback } from './CardFeedback/CardFeedback';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
@@ -25,7 +26,9 @@ export { default as ListItem } from './ListItem/ListItem';
 export { default as MediaCard } from './MediaCard/MediaCard';
 export { default as MerchantProfile, type MerchantProfileProps } from './MerchantProfile/MerchantProfile';
 export { default as MoneyValue } from './MoneyValue/MoneyValue';
+export { default as NoteInput } from './NoteInput/NoteInput';
 export { default as NavArrow } from './NavArrow/NavArrow';
+export { default as Numpad, type NumpadProps, type NumpadKeyValue } from './Numpad/Numpad';
 export { default as PageTitle } from './PageTitle/PageTitle';
 export { default as Screen, type ScreenProps } from './Screen/Screen';
 export { default as Section } from './Section/Section';
@@ -33,6 +36,7 @@ export { default as Stepper } from './Stepper/Stepper';
 export { Step } from './Stepper/Step';
 export { StepLabel } from './Stepper/StepLabel';
 export { default as TextInput } from './TextInput/TextInput';
+export { default as StatusHero, type StatusHeroProps } from './StatusHero/StatusHero';
 export { default as ThreadHero, type ThreadHeroProps } from './ThreadHero/ThreadHero';
 export { Tooltip } from './Tooltip/Tooltip';
 export { default as TransactionDetails } from './TransactionDetails/TransactionDetails';
@@ -50,4 +54,9 @@ export { default as InputSearch, type InputSearchProps } from './InputSearch/Inp
 export { default as SupportText, type SupportTextProps } from './SupportText/SupportText';
 export { default as SupportTextIcon, type SupportTextIconProps } from './SupportText/SupportTextIcon';
 export { default as RadioButton, type RadioButtonProps } from './RadioButton/RadioButton';
+export { default as Tabs, type TabsProps } from './Tabs/Tabs';
+export { default as TabItem, type TabItemProps } from './Tabs/TabItem';
+export { default as Toast, type ToastProps } from './Toast/Toast';
+export { default as ToastProvider, type ToastProviderProps } from './Toast/ToastProvider';
+export { useToast, addToast, closeToast, closeAll, type ToastOptions, type ToastEntry, type ToastPlacement } from './Toast/useToast';
 //# 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-02-18T13:27:13.799Z
+ * Generated: 2026-02-25T22:30:05.664Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

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

package/src/components/Button/Button.tsx

@@ -2,6 +2,7 @@ import React, { useMemo, useState } from 'react'
 import { Pressable, Text, View, type AccessibilityState, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { usePressableWebSupport, type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils'
+import Icon from '../../icons/Icon'
 
 export type ButtonProps = SafePressableProps & {
   label?: string;
@@ -25,6 +26,11 @@ export type ButtonProps = SafePressableProps & {
   renderContent?: (styles: StyleProp<TextStyle>) => React.ReactNode;
   leading?: React.ReactNode;
   trailing?: React.ReactNode;
+  /**
+   * Name of the icon to display on the right side of the button.
+   * Takes precedence over `trailing` if both are provided.
+   */
+  icon?: string;
   modes?: Record<string, any>;
   onPress?: () => void;
   disabled?: boolean;
@@ -64,6 +70,7 @@ function Button({
   renderContent,
   leading,
   trailing,
+  icon,
   modes = {},
   onPress,
   disabled = false,
@@ -90,6 +97,8 @@ function Button({
   const lineHeight = getVariableByName('button/lineHeight', modes) || 19
   const fontSize = getVariableByName('button/fontSize', modes) || 16
   const textColor = getVariableByName('button/foreground', modes) || '#0f0d0a'
+  const iconColor = getVariableByName('button/icon/color', modes) ?? textColor
+  const iconSize = getVariableByName('button/icon/size', modes) ?? 18
 
   const baseLabelTextStyle: TextStyle = {
     color: textColor,
@@ -230,7 +239,11 @@ function Button({
         </View>
       ) : null}
       {content}
-      {trailing ? (
+      {icon ? (
+        <View style={trailingAccessoryStyle}>
+          <Icon name={icon} size={iconSize as number} color={iconColor as string} accessibilityElementsHidden={true} importantForAccessibility="no" />
+        </View>
+      ) : trailing ? (
         <View style={trailingAccessoryStyle}>
           {trailing}
         </View>