jfs-components 0.0.44 → 0.0.47

package/lib/module/index.js

@@ -3,4 +3,5 @@
 export * from './components';
 export * as Icons from './icons';
 export * from './design-tokens';
-export * from './Containers';
+export * from './Containers';
+export * from './utils';

package/lib/module/utils/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export { cloneChildrenWithModes, flattenChildren } from './react-utils';

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { type ViewStyle } from 'react-native';
+export type AmountInputProps = {
+    /**
+     * Slot for the MoneyValue component.
+     */
+    moneyValueSlot?: React.ReactNode;
+    /**
+     * Slot for the NoteInput component.
+     */
+    noteInputSlot?: React.ReactNode;
+    /** Modes for design token resolution */
+    modes?: Record<string, any>;
+    /** Optional container style */
+    style?: ViewStyle;
+};
+/**
+ * AmountInput component that combines MoneyValue and NoteInput from Figma design.
+ *
+ * @component
+ */
+export default function AmountInput({ moneyValueSlot, noteInputSlot, modes: propModes, style, }: AmountInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AmountInput.d.ts.map

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

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

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { type ViewStyle, type StyleProp, type ImageSourcePropType } from 'react-native';
+export type CardProviderInfoProps = {
+    /** Product name shown in the ProductLabel header. */
+    label?: string;
+    /** Image source for the product avatar. */
+    imageSource?: ImageSourcePropType | string;
+    /** Slot content — typically StatItem components arranged in a 2-column grid. */
+    children?: React.ReactNode;
+    /** Design token modes for theming. */
+    modes?: Record<string, any>;
+    /** Override container styles. */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * CardProviderInfo displays a product header (ProductLabel) followed by a
+ * 2-column grid of children (typically StatItem instances).
+ *
+ * @component
+ * @param {CardProviderInfoProps} props
+ */
+declare function CardProviderInfo({ label, imageSource, children, modes, style, }: CardProviderInfoProps): import("react/jsx-runtime").JSX.Element;
+export default CardProviderInfo;
+//# sourceMappingURL=CardProviderInfo.d.ts.map

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

@@ -16,11 +16,6 @@ export type ChipSelectProps = {
      * @default "ic_calendar_week"
      */
     icon?: string;
-    /**
-     * Whether to show the close icon in Active state (when active is true).
-     * @default true
-     */
-    close?: boolean;
     /**
      * Modes for design token resolution.
      */
@@ -42,6 +37,6 @@ export type ChipSelectProps = {
  * ChipSelect component for selecting options (e.g. Date selection).
  * Based on Figma Node 1901-4727.
  */
-declare function ChipSelect({ label, active, icon, close, modes, style, labelSlot, onPress, }: ChipSelectProps): import("react/jsx-runtime").JSX.Element;
+declare function ChipSelect({ label, active, icon, modes, style, labelSlot, onPress, }: ChipSelectProps): import("react/jsx-runtime").JSX.Element;
 export default ChipSelect;
 //# sourceMappingURL=ChipSelect.d.ts.map

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

@@ -11,6 +11,11 @@ export type EmptyStateProps = {
      * @default "Start by paying bills, recharge or your friends"
      */
     description?: string;
+    /**
+     * Whether to show the description text
+     * @default true
+     */
+    showDescription?: boolean;
     /**
      * Custom slot for the icon area. Defaults to IconCapsule.
      * If providing a custom component, ensure it accepts `modes` if needed.
@@ -33,6 +38,6 @@ export type EmptyStateProps = {
  *
  * @component
  */
-declare function EmptyState({ title, description, iconSlot, buttonSlot, modes: propModes, style, testID, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+declare function EmptyState({ title, description, showDescription, iconSlot, buttonSlot, modes: propModes, style, testID, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
 export default EmptyState;
 //# sourceMappingURL=EmptyState.d.ts.map

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

@@ -5,7 +5,7 @@ type LinearMeterLabelProps = {
     modes?: Record<string, any>;
     style?: StyleProp<TextStyle>;
 } & React.ComponentProps<typeof Text>;
-type LinearMeterProps = {
+export type LinearMeterProps = {
     value?: number;
     modes?: Record<string, any>;
     style?: StyleProp<ViewStyle>;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { type ViewStyle, type StyleProp } from 'react-native';
+export type NudgeProps = {
+    /**
+     * Controls the layout variant.
+     * - "Default": horizontal layout with optional start icon and content (title/body/button or children slot)
+     * - "Variant2": vertical layout with header (icon + title) and children slot below
+     */
+    variant?: 'Default' | 'Variant2';
+    /** Title text displayed in the nudge */
+    title?: string;
+    /** Body text displayed below the title (Default variant only, when no children are provided) */
+    body?: string;
+    /** Label for the default button (Default variant only, when no children are provided) */
+    buttonLabel?: string;
+    /** Callback for the default button press */
+    onPressButton?: () => void;
+    /** Custom button slot (Default variant only, overrides buttonLabel/onPressButton) */
+    buttonSlot?: React.ReactNode;
+    /** Optional leading slot for an icon/element. Pass null or omit to hide. */
+    startSlot?: React.ReactNode;
+    /** Content slot — overrides the default title/body/button content */
+    children?: React.ReactNode;
+    /** Mode configuration for design token resolution */
+    modes?: Record<string, any>;
+    /** Optional container style overrides */
+    style?: StyleProp<ViewStyle>;
+};
+declare function Nudge({ variant, title, body, buttonLabel, onPressButton, buttonSlot, startSlot, children, modes: propModes, style, }: NudgeProps): import("react/jsx-runtime").JSX.Element;
+export default Nudge;
+//# sourceMappingURL=Nudge.d.ts.map

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { type ViewStyle, type StyleProp } from 'react-native';
+import { type SupportTextProps } from '../SupportText/SupportText';
+export type OTPProps = {
+    /** Number of OTP digits. Defaults to 6. */
+    length?: number;
+    /** Controlled value of the OTP input. */
+    value?: string;
+    /** Default value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Called when the OTP value changes. Receives the current string of entered digits. */
+    onChange?: (value: string) => void;
+    /** Alias for onChange — called when the OTP value changes. */
+    onValueChange?: (value: string) => void;
+    /** Called when all digits have been entered. Receives the complete OTP string. */
+    onComplete?: (value: string) => void;
+    /** Whether the OTP input is disabled. */
+    isDisabled?: boolean;
+    /** Whether the OTP input is in an invalid/error state. */
+    isInvalid?: boolean;
+    /** Regex pattern to filter allowed characters. Defaults to digits only. */
+    allowedPattern?: RegExp;
+    /** Auto-focus the input on mount. */
+    autoFocus?: boolean;
+    /** Design token modes for Figma token resolution. */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Optional SupportText rendered below the slots. Pass a string for the label or a ReactNode for full control. */
+    supportText?: React.ReactNode;
+    /** SupportText status when using the string shorthand. */
+    supportTextStatus?: SupportTextProps['status'];
+};
+declare function OTP({ length, value: controlledValue, defaultValue, onChange, onValueChange, onComplete, isDisabled, isInvalid, allowedPattern, autoFocus, modes: propModes, style, supportText, supportTextStatus, }: OTPProps): import("react/jsx-runtime").JSX.Element;
+export default OTP;
+//# sourceMappingURL=OTP.d.ts.map

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

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+import { type ViewStyle } from 'react-native';
+export type PaymentFeedbackProps = {
+    /** Large heading text, typically a monetary value (e.g. "₹50,000") */
+    title?: string;
+    /** Status line below the title (e.g. "Payment successful") */
+    subtitle?: string;
+    /** Descriptive body text below the subtitle */
+    body?: string;
+    /** Transaction metadata shown at the bottom (e.g. date, transaction ID). Supports newlines. */
+    details?: string;
+    /** Whether to render the details section */
+    showDetails?: boolean;
+    /** Icon name used in the default IconCapsule media slot */
+    iconName?: string;
+    /** Optional custom media slot that replaces the default IconCapsule */
+    renderMedia?: ReactNode;
+    /** Mode configuration for design tokens */
+    modes?: Record<string, any>;
+    style?: ViewStyle;
+};
+export default function PaymentFeedback({ title, subtitle, body, details, showDetails, iconName, renderMedia, modes: propModes, style, }: PaymentFeedbackProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PaymentFeedback.d.ts.map

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { type ViewStyle, type ImageSourcePropType } from 'react-native';
+export type PortfolioHeroProps = {
+    /** Product label text displayed next to the avatar. */
+    label?: string;
+    /** Image source for the product avatar. */
+    imageSource?: ImageSourcePropType | string;
+    /** Monetary value to display. */
+    value?: string;
+    /** Currency symbol or ISO code. */
+    currency?: string;
+    /** Modes configuration mapped to Figma tokens. */
+    modes?: Record<string, any>;
+    /** Slot content rendered below the money value (e.g. Badge, subtitle). */
+    children?: React.ReactNode;
+    /** Container style override. */
+    style?: ViewStyle;
+};
+declare function PortfolioHero({ label, imageSource, value, currency, modes, children, style, }: PortfolioHeroProps): import("react/jsx-runtime").JSX.Element;
+export default PortfolioHero;
+//# sourceMappingURL=PortfolioHero.d.ts.map

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

@@ -0,0 +1,14 @@
+import { type ViewStyle, type ImageSourcePropType } from 'react-native';
+export type ProductLabelProps = {
+    /** The product name label text. */
+    label?: string;
+    /** Image source for the product avatar. */
+    imageSource?: ImageSourcePropType | string;
+    /** Modes configuration for design token resolution. */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: ViewStyle;
+};
+declare function ProductLabel({ label, imageSource, modes, style, }: ProductLabelProps): import("react/jsx-runtime").JSX.Element;
+export default ProductLabel;
+//# sourceMappingURL=ProductLabel.d.ts.map

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+export type ProgressBadgeProps = {
+    /** The text displayed in the badge (e.g. "Live price...") */
+    taskName?: string;
+    /** The icon name to display to the left of the text */
+    iconName?: string;
+    /** The progress value between 0 and 100 */
+    value?: number;
+    /** Modes object passed to `getVariableByName` for design token resolution */
+    modes?: Record<string, any>;
+    /** Optional container style overrides */
+    style?: StyleProp<ViewStyle>;
+    /** Optional text style overrides */
+    textStyle?: StyleProp<TextStyle>;
+    /** Accessibility label for screen readers */
+    accessibilityLabel?: string;
+} & React.ComponentProps<typeof View>;
+/**
+ * ProgressBadge component that displays an icon, text, and an internal progress bar.
+ *
+ * All visual attributes resolve from Figma tokens via `getVariableByName` using the provided `modes`.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.taskName="Live price: [price] (00:43)"] - The text displayed.
+ * @param {string} [props.iconName="ic_live"] - Icon name from the registry.
+ * @param {number} [props.value=0] - The progress value between 0 and 100.
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for design tokens.
+ * @param {Object} [props.style] - Optional container style overrides.
+ * @param {Object} [props.textStyle] - Optional text style overrides.
+ * @param {string} [props.accessibilityLabel] - Accessibility label.
+ */
+declare function ProgressBadge({ taskName, iconName, value, modes, style, textStyle: textStyleOverride, accessibilityLabel, ...rest }: ProgressBadgeProps): import("react/jsx-runtime").JSX.Element;
+export default ProgressBadge;
+//# sourceMappingURL=ProgressBadge.d.ts.map

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

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type ViewStyle } from 'react-native';
-type RechargeCardProps = {
+export type RechargeCardProps = {
     /**
      * Title of the card.
      * Default: "Unlimited 5G"
@@ -47,5 +47,4 @@ type RechargeCardProps = {
  * 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 {};
 //# sourceMappingURL=RechargeCard.d.ts.map

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type SegmentedControlItem = {
+    key: React.Key;
+    label: string;
+};
+export type SegmentedControlProps = {
+    /** The items to display as segments */
+    items: SegmentedControlItem[];
+    /** The currently selected key (controlled) */
+    selectedKey?: React.Key;
+    /** The initially selected key (uncontrolled). Defaults to the first item's key. */
+    defaultSelectedKey?: React.Key;
+    /** Callback fired when the selected segment changes */
+    onSelectionChange?: (key: React.Key) => void;
+    /** Design token modes for theming */
+    modes?: Record<string, any>;
+    /** Override container styles */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * SegmentedControl component backed by Figma design tokens.
+ *
+ * Provides a horizontal row of mutually exclusive segments.
+ * Supports controlled (`selectedKey` + `onSelectionChange`) and
+ * uncontrolled (`defaultSelectedKey`) usage patterns.
+ *
+ * @component
+ * @param {SegmentedControlProps} props
+ *
+ * @example
+ * ```tsx
+ * const [selected, setSelected] = useState<React.Key>('daily');
+ *
+ * <SegmentedControl
+ *   items={[
+ *     { key: 'daily', label: 'Daily' },
+ *     { key: 'weekly', label: 'Weekly' },
+ *     { key: 'monthly', label: 'Monthly' },
+ *   ]}
+ *   selectedKey={selected}
+ *   onSelectionChange={setSelected}
+ *   modes={{ 'Color Mode': 'Light' }}
+ * />
+ * ```
+ */
+declare function SegmentedControl({ items, selectedKey: controlledSelectedKey, defaultSelectedKey, onSelectionChange, modes, style, }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+export default SegmentedControl;
+//# sourceMappingURL=SegmentedControl.d.ts.map

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

@@ -0,0 +1,21 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type StatItemProps = {
+    /** The small descriptive label above the value. */
+    label?: string;
+    /** The large prominent value to display. */
+    value?: string;
+    /** Design token modes for theming. */
+    modes?: Record<string, any>;
+    /** Override container styles. */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * StatItem displays a label/value pair with the value in a large, bold style.
+ * Useful for metrics, product stats, or KPI callouts.
+ *
+ * @component
+ * @param {StatItemProps} props
+ */
+declare function StatItem({ label, value, modes, style, }: StatItemProps): import("react/jsx-runtime").JSX.Element;
+export default StatItem;
+//# sourceMappingURL=StatItem.d.ts.map

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

@@ -7,7 +7,7 @@ export type SupportTextProps = {
      */
     label?: string;
     /**
-     * Status of the support text (Neutral, Warning, Error, Success)
+     * Status of the support text (Neutral, Warning, Error, Success, Loading)
      */
     status?: SupportTextStatus;
     /**

package/lib/typescript/src/components/SupportText/SupportTextIcon.d.ts

@@ -1,5 +1,5 @@
 import { type ViewStyle } from 'react-native';
-export type SupportTextStatus = 'Neutral' | 'Warning' | 'Error' | 'Success';
+export type SupportTextStatus = 'Neutral' | 'Warning' | 'Error' | 'Success' | 'Loading';
 export type SupportTextIconProps = {
     status?: SupportTextStatus;
     modes?: Record<string, any>;

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

@@ -0,0 +1,22 @@
+import { type ViewStyle } from 'react-native';
+export type SwappableAmountProps = {
+    /** Large display value (e.g. "49g"). */
+    value?: string;
+    /** Whether to show the schedule button above the value. */
+    schedule?: boolean;
+    /** Label text for the schedule button (e.g. "Weekly on Mondays"). */
+    scheduleLabel?: string;
+    /** Label text for the amount/swap button (e.g. "₹5100"). */
+    amountLabel?: string;
+    /** Callback when the schedule button is pressed. */
+    onSchedulePress?: () => void;
+    /** Callback when the amount/swap button is pressed. */
+    onAmountPress?: () => void;
+    /** Modes configuration for design token resolution. */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: ViewStyle;
+};
+declare function SwappableAmount({ value, schedule, scheduleLabel, amountLabel, onSchedulePress, onAmountPress, modes, style, }: SwappableAmountProps): import("react/jsx-runtime").JSX.Element;
+export default SwappableAmount;
+//# sourceMappingURL=SwappableAmount.d.ts.map

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

@@ -0,0 +1,16 @@
+import { type TextStyle, type StyleProp } from 'react-native';
+export type TextProps = {
+    /** The text content to display. */
+    text?: string;
+    /** Horizontal alignment of the text. */
+    textAlign?: 'Left' | 'Center';
+    /** Modes configuration for design token resolution. */
+    modes?: Record<string, any>;
+    /** Style override for the text. */
+    style?: StyleProp<TextStyle>;
+    /** Number of lines to limit the text to. */
+    numberOfLines?: number;
+};
+declare function Text({ text, textAlign, modes, style, numberOfLines, }: TextProps): import("react/jsx-runtime").JSX.Element;
+export default Text;
+//# sourceMappingURL=Text.d.ts.map

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+export type TitleProps = {
+    title?: string;
+    /** Horizontal alignment of the title text. */
+    textAlign?: 'Left' | 'Center';
+    modes?: Record<string, any>;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    numberOfLines?: number;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+} & React.ComponentProps<typeof View>;
+declare function Title({ title, textAlign, modes: propModes, style, textStyle, numberOfLines, accessibilityLabel, accessibilityHint, ...rest }: TitleProps): import("react/jsx-runtime").JSX.Element;
+export default Title;
+//# sourceMappingURL=Title.d.ts.map

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

@@ -0,0 +1,29 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+export interface ToggleProps {
+    /** Whether the toggle is on (controlled) */
+    value?: boolean;
+    /** Initial value (uncontrolled) */
+    defaultValue?: boolean;
+    /** Callback when the toggle state changes */
+    onValueChange?: (value: boolean) => void;
+    /** Whether the toggle 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;
+}
+/**
+ * Toggle (switch) component that maps directly to the Figma design using design tokens.
+ *
+ * Supports controlled and uncontrolled usage, on/off states, and disabled state.
+ * All styling is driven by design tokens with optional mode overrides.
+ *
+ * @component
+ * @param {ToggleProps} props
+ */
+declare function Toggle({ value: controlledValue, defaultValue, onValueChange, disabled, modes, style, accessibilityLabel, }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+export default Toggle;
+//# sourceMappingURL=Toggle.d.ts.map

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

@@ -9,6 +9,7 @@ type UpiHandleProps = {
     accessibilityLabel?: string;
     accessibilityHint?: string;
     onPress?: () => void;
+    onClick?: () => void;
     disabled?: boolean;
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel' | 'accessibilityHint'>;
 /**
@@ -29,9 +30,10 @@ type UpiHandleProps = {
  * @param {boolean} [props.showIcon=true] - Toggles the trailing icon visibility.
  * @param {string} [props.iconName='ic_scan_qr_code'] - Icon name from the actions set (e.g. 'ic_qr_code', 'ic_scan_qr_code').
  * @param {ImageSourcePropType} [props.avatarSource] - Optional custom image source for the avatar.
+ * @param {Function} [props.onClick] - Click/tap handler. Works as an alias for `onPress`.
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses label
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  */
-declare function UpiHandle({ label, modes: propModes, showIcon, iconName, avatarSource, onPress, disabled, accessibilityLabel, accessibilityHint, ...rest }: UpiHandleProps): import("react/jsx-runtime").JSX.Element;
+declare function UpiHandle({ label, modes: propModes, showIcon, iconName, avatarSource, onPress, onClick, disabled, accessibilityLabel, accessibilityHint, ...rest }: UpiHandleProps): import("react/jsx-runtime").JSX.Element;
 export default UpiHandle;
 //# sourceMappingURL=UpiHandle.d.ts.map

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

@@ -7,8 +7,10 @@ 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 Carousel } from './Carousel/Carousel';
+export type { CarouselProps, CarouselItemProps, PaginationProps } from './Carousel/Carousel';
 export { default as Checkbox, type CheckboxProps } from './Checkbox/Checkbox';
-export { default as CardFeedback } from './CardFeedback/CardFeedback';
+export { default as CardFeedback, type CardFeedbackProps } from './CardFeedback/CardFeedback';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
 export { default as Drawer } from './Drawer/Drawer';
@@ -16,20 +18,22 @@ export { default as CtaCard } from './CtaCard/CtaCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
 export { default as Form, type FormProps } from './Form/Form';
 export { useFormContext } from './Form/Form';
-export { default as FormField, type FormFieldProps } from './FormField/FormField';
+export { default as FormField, type FormFieldProps, type FormFieldType } from './FormField/FormField';
 export { default as HStack, type HStackProps } from './HStack/HStack';
 export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
 export { default as LazyList } from './LazyList/LazyList';
+export { default as LinearMeter, type LinearMeterProps } from './LinearMeter/LinearMeter';
 export { default as ListGroup } from './ListGroup/ListGroup';
 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 NoteInput, type NoteInputProps } from './NoteInput/NoteInput';
+export { default as Nudge, type NudgeProps } from './Nudge/Nudge';
 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 Title, type TitleProps } from './Title/Title';
 export { default as Screen, type ScreenProps } from './Screen/Screen';
 export { default as Section } from './Section/Section';
 export { default as Stepper } from './Stepper/Stepper';
@@ -49,14 +53,27 @@ export { default as Accordion, type AccordionProps } from './Accordion/Accordion
 export { default as ActionTile, type ActionTileProps } from './ActionTile/ActionTile';
 export { default as Balance, type BalanceProps } from './Balance/Balance';
 export { default as ButtonGroup, type ButtonGroupProps } from './ButtonGroup/ButtonGroup';
+export { default as CardProviderInfo, type CardProviderInfoProps } from './CardProviderInfo/CardProviderInfo';
 export { default as ChipSelect, type ChipSelectProps } from './ChipSelect/ChipSelect';
 export { default as InputSearch, type InputSearchProps } from './InputSearch/InputSearch';
 export { default as SupportText, type SupportTextProps } from './SupportText/SupportText';
-export { default as SupportTextIcon, type SupportTextIconProps } from './SupportText/SupportTextIcon';
+export { default as SupportTextIcon, type SupportTextIconProps, type SupportTextStatus } from './SupportText/SupportTextIcon';
 export { default as RadioButton, type RadioButtonProps } from './RadioButton/RadioButton';
+export { default as RechargeCard, type RechargeCardProps } from './RechargeCard/RechargeCard';
 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';
+export { default as AmountInput, type AmountInputProps } from './AmountInput/AmountInput';
+export { default as PortfolioHero, type PortfolioHeroProps } from './PortfolioHero/PortfolioHero';
+export { default as ProductLabel, type ProductLabelProps } from './ProductLabel/ProductLabel';
+export { default as ProgressBadge, type ProgressBadgeProps } from './ProgressBadge/ProgressBadge';
+export { default as SwappableAmount, type SwappableAmountProps } from './SwappableAmount/SwappableAmount';
+export { default as OTP, type OTPProps } from './OTP/OTP';
+export { default as PaymentFeedback, type PaymentFeedbackProps } from './PaymentFeedback/PaymentFeedback';
+export { default as StatItem, type StatItemProps } from './StatItem/StatItem';
+export { default as Text, type TextProps } from './Text/Text';
+export { default as SegmentedControl, type SegmentedControlProps, type SegmentedControlItem } from './SegmentedControl/SegmentedControl';
+export { default as Toggle, type ToggleProps } from './Toggle/Toggle';
 //# 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-25T22:30:05.664Z
+ * Generated: 2026-03-28T10:10:45.171Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

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

@@ -2,4 +2,5 @@ export * from './components';
 export * as Icons from './icons';
 export * from './design-tokens';
 export * from './Containers';
+export * from './utils';
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,2 @@
+export { cloneChildrenWithModes, flattenChildren } from './react-utils';
+//# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "jfs-components",
-  "version": "0.0.44",
+  "version": "0.0.47",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
-  "types": "lib/typescript/index.d.ts",
+  "types": "lib/typescript/src/index.d.ts",
   "react-native": "src/index.ts",
   "source": "src/index.ts",
   "sideEffects": false,