jfs-components 0.1.2 → 0.1.12

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { type StyleProp, type ViewStyle, type TextInputProps as RNTextInputProps, type TextStyle } from 'react-native';
+import { TextInput as RNTextInput, type StyleProp, type ViewStyle, type TextInputProps as RNTextInputProps, type TextStyle } from 'react-native';
 import type { Modes } from '../../design-tokens';
-type TextInputProps = {
+declare const TextInputBase: React.ForwardRefExoticComponent<{
     placeholder?: string;
     value?: string;
     onChangeText?: (text: string) => void;
@@ -15,31 +15,8 @@ type TextInputProps = {
     onBlur?: (e: any) => void;
     accessibilityLabel?: string;
     accessibilityHint?: string;
-} & Omit<RNTextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'placeholder' | 'value'>;
-declare function TextInput({ placeholder, value, onChangeText, leadingIconName, leading, trailing, modes, style, inputStyle, onFocus, onBlur, accessibilityLabel, accessibilityHint, ...rest }: TextInputProps): import("react/jsx-runtime").JSX.Element;
-declare namespace TextInput {
-    var Search: typeof TextInputSearch;
-}
-/**
- * TextInput.Search component that mirrors the Figma "textInput.search" component.
- *
- * This is a convenience variant that pre-configures the TextInput with:
- *  - Default search icon in the leading slot
- *  - No trailing slot
- *  - Default placeholder text "Search"
- *
- * @component
- * @param {Object} props
- * @param {string} [props.placeholder='Search'] - Placeholder text (defaults to "Search")
- * @param {string} [props.value=''] - Current value of the input
- * @param {Function} [props.onChangeText] - Callback function called when text changes
- * @param {React.ReactNode} [props.leading] - Optional leading slot (defaults to search icon)
- * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
- * @param {Object} [props.style] - Optional container style overrides
- * @param {Object} [props.inputStyle] - Optional text input style overrides
- * @param {Object} [props.rest] - Additional props passed to the underlying TextInput
- */
-type TextInputSearchProps = {
+} & Omit<RNTextInputProps, "style" | "value" | "onFocus" | "onBlur" | "placeholder" | "onChangeText"> & React.RefAttributes<RNTextInput>>;
+declare const TextInputSearch: React.ForwardRefExoticComponent<{
     placeholder?: string;
     value?: string;
     onChangeText?: (text: string) => void;
@@ -51,7 +28,10 @@ type TextInputSearchProps = {
     accessibilityHint?: string;
     onFocus?: (e: any) => void;
     onBlur?: (e: any) => void;
-} & Omit<RNTextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'placeholder' | 'value'>;
-declare function TextInputSearch({ placeholder, value, onChangeText, leading, modes, style, inputStyle, accessibilityLabel, accessibilityHint, onFocus, onBlur, ...rest }: TextInputSearchProps): import("react/jsx-runtime").JSX.Element;
+} & Omit<RNTextInputProps, "style" | "value" | "onFocus" | "onBlur" | "placeholder" | "onChangeText"> & React.RefAttributes<RNTextInput>>;
+type TextInputComponent = typeof TextInputBase & {
+    Search: typeof TextInputSearch;
+};
+declare const TextInput: TextInputComponent;
 export default TextInput;
 //# sourceMappingURL=TextInput.d.ts.map

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

@@ -0,0 +1,106 @@
+import React from 'react';
+import { type TextStyle, type StyleProp } from 'react-native';
+import type { Modes } from '../../design-tokens';
+/**
+ * A single coloured run inside a {@link TextSegment}. Each run can carry its own
+ * `modes`, so individual fragments of the same paragraph can resolve different
+ * design tokens (most commonly a different `text/foreground` colour) while still
+ * flowing — and wrapping — inline as one continuous line of text.
+ */
+export type TextSegmentRun = {
+    /** The text for this run. Include trailing/leading spaces yourself when you want spacing between runs (inline text has no gap concept). */
+    text: string;
+    /**
+     * Per-run mode overrides. Merged on top of the parent `TextSegment` modes, so
+     * a run only needs to specify what differs (e.g. `{ 'Text Appearance': 'Primary' }`
+     * to recolour just that fragment). Everything else is inherited.
+     */
+    modes?: Modes;
+    /** Optional per-run style override applied last, on top of the token-resolved style. */
+    style?: StyleProp<TextStyle>;
+};
+export type TextSegmentProps = {
+    /**
+     * Declarative, data-driven way to compose a multi-colour string. Each entry
+     * becomes an inline run. This is the simplest API when the segments are known
+     * up front:
+     *
+     * ```tsx
+     * <TextSegment segments={[
+     *   { text: 'Upsell message ' },
+     *   { text: 'JioFinance+', modes: { 'Text Appearance': 'Primary' } },
+     * ]} />
+     * ```
+     *
+     * When both `segments` and `children` are provided, `children` win.
+     */
+    segments?: TextSegmentRun[];
+    /**
+     * Compositional alternative to {@link TextSegmentProps.segments}. Pass library
+     * `Text` elements (or plain strings) as children and they are rendered nested
+     * inside the same paragraph so they wrap together. The parent `modes` cascade
+     * down to every child via `cloneChildrenWithModes`, and each child may still
+     * override with its own `modes`:
+     *
+     * ```tsx
+     * <TextSegment>
+     *   <Text>Upsell message </Text>
+     *   <Text modes={{ 'Text Appearance': 'Primary' }}>JioFinance+</Text>
+     * </TextSegment>
+     * ```
+     */
+    children?: React.ReactNode;
+    /** Horizontal alignment of the whole paragraph. */
+    textAlign?: 'Left' | 'Center';
+    /** Clamp the paragraph to this many lines (truncates with an ellipsis). Applies to the whole composed line, not per-run. */
+    numberOfLines?: number;
+    /**
+     * When `true`, disables truncation entirely: the trailing ellipsis (`…`) is
+     * never shown and the `numberOfLines` clamp is ignored, so the paragraph
+     * wraps to as many lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
+    /** Mode configuration used for the base style and cascaded to every run/child. */
+    modes?: Modes;
+    /** Style override applied to the outer paragraph (e.g. width constraints to force wrapping). */
+    style?: StyleProp<TextStyle>;
+};
+/**
+ * TextSegment — composes several differently-styled text runs into a single
+ * paragraph that wraps as one continuous line.
+ *
+ * On the web you would reach for `<span>`s inside a `<p>`; the React Native
+ * equivalent is nesting `<Text>` inside a parent `<Text>`. That nesting is the
+ * whole trick: sibling `<View>`s would lay out as flex blocks and break onto
+ * rigid rows, but nested `<Text>` nodes flow inline and wrap naturally at word
+ * boundaries — exactly like a real paragraph — while each nested run keeps its
+ * own colour/weight resolved from its own `modes`.
+ *
+ * Two equivalent ways to author content:
+ *  - **`segments` prop** — declarative array of `{ text, modes }` runs.
+ *  - **`children`** — pass library `Text` elements (or strings); the parent
+ *    `modes` cascade down and each child may override its own.
+ *
+ * @example Data-driven
+ * ```tsx
+ * <TextSegment
+ *   segments={[
+ *     { text: 'Upsell message ' },
+ *     { text: 'JioFinance+', modes: { 'Text Appearance': 'Primary' } },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Compositional
+ * ```tsx
+ * <TextSegment numberOfLines={2}>
+ *   <Text>Pay with </Text>
+ *   <Text modes={{ 'Text Appearance': 'Primary' }}>JioFinance+</Text>
+ *   <Text> and earn rewards on every transaction.</Text>
+ * </TextSegment>
+ * ```
+ */
+declare function TextSegment({ segments, children, textAlign, numberOfLines, disableTruncation, modes, style, }: TextSegmentProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof TextSegment>;
+export default _default;
+//# sourceMappingURL=TextSegment.d.ts.map

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

@@ -14,9 +14,15 @@ export type ThreadHeroProps = {
     modes?: Modes;
     /** Optional container style */
     style?: ViewStyle;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
 };
 /**
  * ThreadHero component displaying a central identity with avatar, title, subtitle, and caption.
  */
-export default function ThreadHero({ title, subtitle, caption, renderAvatar, modes, style, }: ThreadHeroProps): import("react/jsx-runtime").JSX.Element;
+export default function ThreadHero({ title, subtitle, caption, renderAvatar, modes, style, disableTruncation, }: ThreadHeroProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ThreadHero.d.ts.map

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

@@ -13,9 +13,15 @@ export type TitleProps = {
     /** Optional style overrides for the subtitle text. */
     subtitleStyle?: StyleProp<TextStyle>;
     numberOfLines?: number;
+    /**
+     * When `true`, disables truncation for both the title and subtitle: the
+     * trailing ellipsis (`…`) is never shown and the `numberOfLines` clamp is
+     * ignored, so the text wraps fully even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
     accessibilityLabel?: string;
     accessibilityHint?: string;
 } & React.ComponentProps<typeof View>;
-declare function Title({ title, subtitle, textAlign, modes: propModes, style, textStyle, subtitleStyle, numberOfLines, accessibilityLabel, accessibilityHint, ...rest }: TitleProps): import("react/jsx-runtime").JSX.Element;
+declare function Title({ title, subtitle, textAlign, modes: propModes, style, textStyle, subtitleStyle, numberOfLines, disableTruncation, accessibilityLabel, accessibilityHint, ...rest }: TitleProps): import("react/jsx-runtime").JSX.Element;
 export default Title;
 //# sourceMappingURL=Title.d.ts.map

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

@@ -9,7 +9,13 @@ export interface ToastProps {
     modes?: Modes | undefined;
     placement?: ToastPlacement | undefined;
     style?: StyleProp<ViewStyle> | undefined;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
 }
-declare function Toast({ id, title, timeout, onClose, modes, placement, style, }: ToastProps): import("react/jsx-runtime").JSX.Element;
+declare function Toast({ id, title, timeout, onClose, modes, placement, style, disableTruncation, }: ToastProps): import("react/jsx-runtime").JSX.Element;
 export default Toast;
 //# sourceMappingURL=Toast.d.ts.map

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

@@ -17,6 +17,12 @@ export type TransactionBubbleProps = {
     accessibilityLabel?: string;
     accessibilityHint?: string;
     webAccessibilityProps?: WebAccessibilityProps;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
 } & Omit<PressableProps, 'style' | 'children' | 'onPress'>;
 /**
  * TransactionBubble — Figma node 1517:1155.
@@ -35,6 +41,6 @@ export type TransactionBubbleProps = {
  * statusWrap: TransactionStatus + NavArrow, horizontal row with `transactionBubble/statusWrap/gap`.
  * Container gap between sections: `transactionBubble/gap`.
  */
-declare function TransactionBubble({ description, value, currency, status, date, statusSlot, children, modes, onPress, style, accessibilityLabel, accessibilityHint, webAccessibilityProps, ...rest }: TransactionBubbleProps): import("react/jsx-runtime").JSX.Element;
+declare function TransactionBubble({ description, value, currency, status, date, statusSlot, children, modes, onPress, style, accessibilityLabel, accessibilityHint, webAccessibilityProps, disableTruncation, ...rest }: TransactionBubbleProps): import("react/jsx-runtime").JSX.Element;
 export default TransactionBubble;
 //# sourceMappingURL=TransactionBubble.d.ts.map

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

@@ -9,9 +9,15 @@ export type TransactionStatusProps = {
     modes?: Modes;
     /** Optional container style */
     style?: ViewStyle;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
 };
 /**
  * TransactionStatus component displaying status icon, label, and date.
  */
-export default function TransactionStatus({ status, date, modes, style, }: TransactionStatusProps): import("react/jsx-runtime").JSX.Element;
+export default function TransactionStatus({ status, date, modes, style, disableTruncation, }: TransactionStatusProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TransactionStatus.d.ts.map

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

@@ -25,6 +25,12 @@ type UpiHandleProps = {
     onPress?: () => void;
     onClick?: () => void;
     disabled?: boolean;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel' | 'accessibilityHint'>;
 /**
  * UpiHandle pill that mirrors the Figma "UPI Handle" component.
@@ -49,7 +55,7 @@ type UpiHandleProps = {
  *  - Focus state is mirrored on web only (gated setter).
  *  - Wrapped in `React.memo`.
  */
-declare function UpiHandle({ label, modes: propModes, showIcon, iconName, source, avatarSource, onPress, onClick, disabled, accessibilityLabel: _accessibilityLabel, accessibilityHint, ...rest }: UpiHandleProps): import("react/jsx-runtime").JSX.Element;
+declare function UpiHandle({ label, modes: propModes, showIcon, iconName, source, avatarSource, onPress, onClick, disabled, disableTruncation, accessibilityLabel: _accessibilityLabel, accessibilityHint, ...rest }: UpiHandleProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof UpiHandle>;
 export default _default;
 //# sourceMappingURL=UpiHandle.d.ts.map

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

@@ -4,7 +4,8 @@ export { default as Attached, type AttachedProps, type AttachedPosition } from '
 export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
 export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
-export { default as Badge } from './Badge/Badge';
+export { default as Badge, type BadgeProps, type BadgeType } from './Badge/Badge';
+export { default as BenefitCard, type BenefitCardProps, type BenefitCardItem } from './BenefitCard/BenefitCard';
 export { default as BottomNav } from './BottomNav/BottomNav';
 export { default as BottomNavItem } from './BottomNavItem/BottomNavItem';
 export { default as BrandChip, type BrandChipProps } from './BrandChip/BrandChip';
@@ -20,13 +21,14 @@ export { default as CheckboxGroup, type CheckboxGroupProps } from './CheckboxGro
 export { default as CardFeedback, type CardFeedbackProps } from './CardFeedback/CardFeedback';
 export { default as CardFinancialCondition, type CardFinancialConditionProps } from './CardFinancialCondition/CardFinancialCondition';
 export { default as CardInsight, type CardInsightProps } from './CardInsight/CardInsight';
+export { default as CcCard, type CcCardProps, type CcCardBadge, type CcCardListItem } from './CcCard/CcCard';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
 export { default as Drawer, type DrawerProps, type DrawerHandle } from './Drawer/Drawer';
 export { default as Dropdown, DropdownItem, type DropdownProps, type DropdownItemProps } from './Dropdown/Dropdown';
-export { default as DropdownInput, type DropdownInputProps, type DropdownInputOption, type DropdownInputOptionValue } from './DropdownInput/DropdownInput';
+export { default as DropdownInput, type DropdownInputProps, type DropdownInputHandle, type DropdownInputOption, type DropdownInputOptionValue } from './DropdownInput/DropdownInput';
 export { default as SuggestiveSearch, type SuggestiveSearchProps, type SuggestiveSearchOption, type SuggestiveSearchOptionValue, type SuggestiveSearchItem } from './SuggestiveSearch/SuggestiveSearch';
-export { default as CardCTA, type CardCTAProps, type CardCTAType } from './CardCTA/CardCTA';
+export { default as CardCTA, type CardCTAProps, type CardCTAType, type CardCTATypeInput } from './CardCTA/CardCTA';
 export { default as DebitCard, type DebitCardProps } from './DebitCard/DebitCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
 export { default as FullscreenModal, type FullscreenModalProps } from './FullscreenModal/FullscreenModal';
@@ -38,6 +40,7 @@ export { default as CircularProgressBarDoted, type CircularProgressBarDotedProps
 export { default as CircularRating, type CircularRatingProps } from './CircularRating/CircularRating';
 export { default as CoverageRing, type CoverageRingProps } from './CoverageRing/CoverageRing';
 export { default as CoverageBarComparison, type CoverageBarComparisonProps, type CoverageBarComparisonItem } from './CoverageBarComparison/CoverageBarComparison';
+export { default as ComparisonBar, type ComparisonBarProps, type ComparisonBarItem } from './ComparisonBar/ComparisonBar';
 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';
@@ -67,7 +70,9 @@ export { default as Overlay, type OverlayProps } from './Overlay/Overlay';
 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 Slider, type SliderProps, type SliderHandle } from './Slider/Slider';
 export { default as Slot, type SlotProps, type SlotLayoutDirection } from './Slot/Slot';
+export { default as Stack, type StackProps, type StackLayoutDirection, } from './Stack/Stack';
 export { default as Spinner, type SpinnerProps, type SpinnerColors } from './Spinner/Spinner';
 export { default as Stepper, type StepperProps } from './Stepper/Stepper';
 export { Step, type StepProps, type StepStatus } from './Stepper/Step';
@@ -117,12 +122,17 @@ export { default as ToastProvider, type ToastProviderProps } from './Toast/Toast
 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 PageHero, type PageHeroProps } from './PageHero/PageHero';
+export { default as PdpCcCard, type PdpCcCardProps, type PdpCcCardMetric } from './PdpCcCard/PdpCcCard';
 export { default as Popup, type PopupProps, type PopupRef } from './Popup/Popup';
 export { default as PortfolioHero, type PortfolioHeroProps } from './PortfolioHero/PortfolioHero';
 export { default as PlanComparisonCard, type PlanComparisonCardProps, type PlanComparisonColumn, type PlanComparisonRow, type PlanComparisonCellValue } from './PlanComparisonCard/PlanComparisonCard';
+export { default as CompareTable, type CompareTableProps, type CompareTableColumn, type CompareTableRow, type CompareTableCellValue, type CompareTableSection } from './CompareTable/CompareTable';
+export { default as Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell, type TableProps, type TableColumn, type TableCellAlign, type TableHeaderProps, type TableHeaderCellProps, type TableBodyProps, type TableRowProps, type TableCellProps, } from './Table/Table';
 export { default as PoweredByLabel, type PoweredByLabelProps } from './PoweredByLabel/PoweredByLabel';
 export { default as ProductLabel, type ProductLabelProps } from './ProductLabel/ProductLabel';
+export { default as ProductMerchandisingCard, type ProductMerchandisingCardProps } from './ProductMerchandisingCard/ProductMerchandisingCard';
 export { default as ProductOverview, type ProductOverviewProps, type ProductOverviewStat } from './ProductOverview/ProductOverview';
+export { default as ProjectionMarker, type ProjectionMarkerProps } from './ProjectionMarker/ProjectionMarker';
 export { default as ProgressBadge, type ProgressBadgeProps } from './ProgressBadge/ProgressBadge';
 export { default as SwappableAmount, type SwappableAmountProps } from './SwappableAmount/SwappableAmount';
 export { default as OTP, OTPResend, useOtpResend, type OTPProps, type OTPResendProps, type OTPResendConfig, type UseOtpResendOptions, type UseOtpResendReturn, type OtpResendState, } from './OTP/OTP';
@@ -133,6 +143,7 @@ export { default as StrengthIndicator, type StrengthIndicatorProps, type Strengt
 export { default as SummaryTile, type SummaryTileProps } from './SummaryTile/SummaryTile';
 export { default as TestimonialsCard, type TestimonialsCardProps } from './TestimonialsCard/TestimonialsCard';
 export { default as Text, type TextProps } from './Text/Text';
+export { default as TextSegment, type TextSegmentProps, type TextSegmentRun } from './TextSegment/TextSegment';
 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/design-tokens/figma-modes.generated.d.ts

@@ -22,11 +22,12 @@ export declare const FIGMA_MODES: {
     readonly "Attached / Output": readonly ["Default"];
     readonly "Avatar / Output": readonly ["Default"];
     readonly "Avatar Group / Output": readonly ["Default"];
-    readonly "Avatar Size": readonly ["L", "M", "S"];
+    readonly "Avatar Size": readonly ["L", "M", "S", "XS"];
     readonly "Avatar Type": readonly ["Avatar", "Icon", "Text"];
     readonly "Axis / Output": readonly ["Default"];
     readonly Background: readonly ["False", "True"];
     readonly "Badge / Output": readonly ["Default"];
+    readonly "Badge Size": readonly ["Medium", "Small"];
     readonly "Balance / Output": readonly ["Default"];
     readonly "BankAccountCard / Output": readonly ["Default"];
     readonly "Benefit Card": readonly ["Default"];
@@ -52,6 +53,7 @@ export declare const FIGMA_MODES: {
     readonly cardsShared: readonly ["Default"];
     readonly "Carousel / Output": readonly ["Default"];
     readonly "CarouselCardAccounts / Output": readonly ["Default"];
+    readonly "ccCard / Output": readonly ["Default"];
     readonly "checkbox / Output": readonly ["Default"];
     readonly "Checkbox / Output": readonly ["Default"];
     readonly "Checkbox states": readonly ["Idle", "Hover", "Focus", "Focus Selected", "Selected Hover", "Disabled/Active", "Disabled", "Selected"];
@@ -67,7 +69,12 @@ export declare const FIGMA_MODES: {
     readonly "circularProgressBar / Output": readonly ["Default"];
     readonly "circularProgressBar Size": readonly ["S", "M"];
     readonly "clusterBubble / Output": readonly ["Default"];
+    readonly coincard: readonly ["Mode 1"];
     readonly "Color Mode": readonly ["Light", "Dark"];
+    readonly comparetablecell: readonly ["Mode 1"];
+    readonly comparetableheader: readonly ["Mode 1"];
+    readonly "Comparison Floating card": readonly ["Default"];
+    readonly ComparisonCardItem: readonly ["Default"];
     readonly Confidence: readonly ["High", "Medium", "Low", "None"];
     readonly "ContentSheet / Output": readonly ["Default"];
     readonly Context: readonly ["Default", "Nudge&Alert", "CTACard", "ListItem"];
@@ -78,6 +85,7 @@ export declare const FIGMA_MODES: {
     readonly context7: readonly ["Default", "Card"];
     readonly "Contrast Context": readonly ["on dark", "on light"];
     readonly "Conversation Feed / Output": readonly ["Default"];
+    readonly "Counter Badge / Output": readonly ["Mode 1"];
     readonly "Coverage Bar Comparison / Output": readonly ["Default"];
     readonly "CoverageRing / Output": readonly ["Mode 1"];
     readonly "CTACard / Output": readonly ["Default"];
@@ -106,6 +114,7 @@ export declare const FIGMA_MODES: {
     readonly FullScreenModal: readonly ["Default"];
     readonly Gap: readonly ["S", "M", "L", "None"];
     readonly "Gauge / Output": readonly ["Default"];
+    readonly "Handle Boolean": readonly ["False", "True"];
     readonly "Heading / Output": readonly ["Default"];
     readonly "Heading text": readonly ["Default", "Slot"];
     readonly "Holdings card / Output": readonly ["Default"];
@@ -113,7 +122,7 @@ export declare const FIGMA_MODES: {
     readonly "Icon / Output": readonly ["Default"];
     readonly "Icon Button / Output": readonly ["Default"];
     readonly "Icon Capsule / Output": readonly ["Default"];
-    readonly "Icon Capsule Size": readonly ["M", "L", "S"];
+    readonly "Icon Capsule Size": readonly ["M", "L", "S", "XS"];
     readonly "Image / Output": readonly ["Default"];
     readonly "Input / Output": readonly ["Default"];
     readonly "Input/PINSlot  States": readonly ["Idle", "Active", "Error"];
@@ -138,6 +147,7 @@ export declare const FIGMA_MODES: {
     readonly "Message Direction": readonly ["Incoming (Left)", "Outgoing (Right)"];
     readonly "Message Row / Output": readonly ["Default"];
     readonly "MessageField / Output": readonly ["Default"];
+    readonly metricdata: readonly ["Mode 1"];
     readonly "MetricLegendItem / Output": readonly ["Default"];
     readonly "Money Value / Output": readonly ["Default"];
     readonly "MonthlyStatusGrid / Output": readonly ["Default"];
@@ -155,15 +165,18 @@ export declare const FIGMA_MODES: {
     readonly "Page type": readonly ["MainPage", "SubPage", "JioPlus"];
     readonly "PageHero / Output": readonly ["Default"];
     readonly "PaymnetFeedback / Output": readonly ["Default"];
+    readonly "PDP cc card": readonly ["Mode 1"];
     readonly peekOffset: readonly ["Medium", "Small", "Large", "None"];
     readonly Placement: readonly ["Prefix", "Suffix"];
     readonly "PlanComparisonCard / Output": readonly ["Default"];
     readonly "Popup / Output": readonly ["Default"];
     readonly "PortfolioHero / Output": readonly ["Default"];
     readonly PoweredByLabel: readonly ["Default"];
+    readonly "Product Merchandising card": readonly ["Mode 1"];
     readonly "ProductLabel / Output": readonly ["Default"];
     readonly "ProductOverview / Output": readonly ["Default"];
     readonly "ProgressBadge / Output": readonly ["Default"];
+    readonly ProjectionMarker: readonly ["Mode 1"];
     readonly "QR code / Output": readonly ["Idle"];
     readonly "Radio / Output": readonly ["Default"];
     readonly Radius: readonly ["S", "M", "L", "None"];
@@ -181,8 +194,10 @@ export declare const FIGMA_MODES: {
     readonly "SegmentedControl/Segment / Output": readonly ["Default"];
     readonly "SegmentedTrack / Output": readonly ["Default"];
     readonly Selectable: readonly ["False", "True"];
+    readonly selectioncard: readonly ["Mode 1"];
     readonly "Semantic Intent": readonly ["Brand", "System"];
     readonly Skeleton: readonly ["Mode 1"];
+    readonly "Slider / Output": readonly ["Default"];
     readonly "Slot gap": readonly ["S", "M", "L", "XL"];
     readonly "special button": readonly ["Default"];
     readonly "Spinner / Output": readonly ["Default"];
@@ -203,14 +218,19 @@ export declare const FIGMA_MODES: {
     readonly "SwappableAmount / Output": readonly ["Default"];
     readonly "tabItem / Output": readonly ["Default"];
     readonly "Tabs / Output": readonly ["Default"];
+    readonly TestimonialsCard: readonly ["Default"];
     readonly "Text / Output": readonly ["Default"];
+    readonly "Text Appearance": readonly ["Neutral", "Primary", "Secondary", "Tertiary"];
+    readonly "Text Sizes": readonly ["Medium", "Small"];
     readonly "textInput / Output": readonly ["Default"];
+    readonly "TextSegment / Output": readonly ["Default"];
     readonly "Thread Hero / Output": readonly ["Default"];
     readonly "Title / Output": readonly ["Default"];
     readonly "Title Level": readonly ["Default", "Bold"];
     readonly "Toggle / Output": readonly ["Default"];
     readonly "Toggle States": readonly ["Off", "On", "Disabled Off", "Disabled On"];
     readonly "ToggleIconButton / Output": readonly ["Default"];
+    readonly Tooltip: readonly ["True", "False"];
     readonly "tooltip / Output": readonly ["Default"];
     readonly "Tost Output": readonly ["Default"];
     readonly "Transaction Status": readonly ["Request", "Paid", "Declined", "Expired"];

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-10T14:28:21.260Z
+ * Generated: 2026-06-22T15:37:25.988Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

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

@@ -0,0 +1,84 @@
+import { type ViewStyle, type StyleProp } from 'react-native';
+export type GlassTint = 'dark' | 'light';
+export interface GlassFillProps {
+    /**
+     * Visual tint of the glass surface. Maps to `BlurView`'s `blurType`
+     * (`'dark'` | `'light'`) and drives the iOS
+     * `reducedTransparencyFallbackColor` so the surface degrades gracefully
+     * when "Reduce Transparency" is enabled in system accessibility settings.
+     */
+    tint?: GlassTint;
+    /**
+     * Blur strength as a 0–100 "intensity" value. Internally mapped to
+     * `@react-native-community/blur`'s `blurAmount`. When `progressive` is set,
+     * this is the strength at the BOTTOM of the ramp (the strongest point); the
+     * ramp is kept intentionally gentle so the surface reads as subtle glass
+     * rather than a heavy frosted block.
+     */
+    intensity?: number;
+    /**
+     * Token-derived color tint laid OVER the live blur. Painted as a
+     * translucent overlay so the glass keeps its color signature even when the
+     * platform blur quality varies (or realtime blur is unavailable).
+     */
+    overlayColor?: string;
+    /**
+     * Render a *progressive* (variable) blur instead of a uniform one: fully
+     * clear at the top, easing into a soft blur toward the bottom. Implemented
+     * by stacking two `MaskedView` + `BlurView` layers (a faint base + a
+     * slightly stronger accent near the bottom), each revealed via an eased
+     * multi-stop SVG gradient mask so the blur swells smoothly rather than
+     * along a hard seam. Works on iOS and Android with no extra native module.
+     */
+    progressive?: boolean;
+    /**
+     * Android-only: paint a barely-there white wash (`rgba(255,255,255,0.03)`)
+     * over the uniform blur to lift the community `RealtimeBlurView`, which
+     * otherwise reads slightly muddy. Defaults to `true` to match the
+     * media/merchandising card surfaces. Smaller surfaces (e.g. a Badge pill)
+     * pass `false` to keep the glass perfectly clear. No effect on iOS/web or
+     * on the progressive path.
+     */
+    androidTintWash?: boolean;
+    /**
+     * Web-only: multiplier converting the 0–100 `intensity` to CSS blur px (see
+     * `GlassFill.web.tsx`). Declared here purely for prop-type parity across the
+     * platform split — native always uses the fixed `blurAmount` scale and
+     * ignores this value.
+     */
+    webBlurScale?: number;
+    /**
+     * Web-only: upper clamp (px) on the resolved CSS blur. Declared here for
+     * parity with the web build; ignored on native.
+     */
+    webBlurMaxPx?: number;
+    /** Container style overrides. Defaults to `StyleSheet.absoluteFill`. */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Shared glass / frosted surface for native (iOS + Android).
+ *
+ * This is the single source of truth for the glass effect used by `MediaCard`,
+ * `ProductMerchandisingCard`, `Badge`, and any future consumer. It supersedes
+ * the per-component `GlassFill` copies that previously drifted apart.
+ *
+ * Why this lives in its own platform-split file:
+ *   - `@react-native-community/blur` is a native-only module; importing it on
+ *     web throws because it references native components not registered there.
+ *     Metro's platform-extension resolution picks `GlassFill.tsx` for native
+ *     and `GlassFill.web.tsx` for web, keeping the web bundle native-free.
+ *   - Centralizes the `intensity` (0–100) -> `blurAmount` (0–32) mapping so the
+ *     Figma `blur/minimal` token semantics survive across platforms.
+ *
+ * On iOS (with the pod installed) this is a real `UIVisualEffectView` (true
+ * OS-level live blur). On Android it uses the community blur view. When the
+ * native module isn't linked in the running binary, the component degrades to
+ * a translucent tinted scrim (`reducedTransparencyFallbackColor` / fallback
+ * color) instead of rendering the "Unimplemented component" placeholder.
+ *
+ * NOTE: the consumer MUST clip this with `overflow: 'hidden'` on a rounded
+ * parent — the native blur view does not honor `borderRadius` itself.
+ */
+declare function GlassFill({ tint, intensity, overlayColor, progressive, androidTintWash, style, }: GlassFillProps): import("react/jsx-runtime").JSX.Element;
+export default GlassFill;
+//# sourceMappingURL=GlassFill.d.ts.map

package/lib/typescript/src/utils/GlassFill/GlassFill.web.d.ts

@@ -0,0 +1,43 @@
+import { type ViewStyle, type StyleProp } from 'react-native';
+export type GlassTint = 'dark' | 'light';
+export interface GlassFillProps {
+    tint?: GlassTint;
+    intensity?: number;
+    overlayColor?: string;
+    /**
+     * Render a *progressive* (variable) blur: fully clear at the top, easing
+     * into a soft blur toward the bottom. On web this mirrors the native
+     * technique — two `backdrop-filter` layers, each clipped with an eased
+     * multi-stop `mask-image` linear-gradient so the effective blur swells
+     * smoothly toward the bottom.
+     */
+    progressive?: boolean;
+    /**
+     * Android-only knob on native; accepted on web for prop parity but unused
+     * (web has no equivalent realtime-blur muddiness to lift).
+     */
+    androidTintWash?: boolean;
+    /**
+     * Multiplier converting the 0–100 `intensity` to CSS blur px. Defaults to
+     * `0.32` to mirror the native `blurAmount` scale. Exposed so a consumer can
+     * preserve a legacy mapping (e.g. `MediaCard` uses `0.3`).
+     */
+    webBlurScale?: number;
+    /**
+     * Upper clamp (px) on the resolved CSS blur. Defaults to `32` to mirror the
+     * native cap. `MediaCard` passes `30` to preserve its historical value.
+     */
+    webBlurMaxPx?: number;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Web counterpart of the shared `GlassFill`.
+ *
+ * `@react-native-community/blur` ships no web implementation, so on web we
+ * render a translucent `View` with `backdrop-filter: blur()`. Native bundles
+ * pick up `GlassFill.tsx` instead via Metro's platform resolver; the web
+ * bundle picks up this file, so the native-only module is never imported here.
+ */
+declare function GlassFill({ tint, intensity, overlayColor, progressive, webBlurScale, webBlurMaxPx, style, }: GlassFillProps): import("react/jsx-runtime").JSX.Element;
+export default GlassFill;
+//# sourceMappingURL=GlassFill.web.d.ts.map