jfs-components 0.1.23 → 0.1.28

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

@@ -12,23 +12,23 @@ export { default as BrandChip, type BrandChipProps } from './BrandChip/BrandChip
 export { default as Button, type ButtonProps } from './Button/Button';
 export { default as Card } from './Card/Card';
 export { default as CardAdvisory, type CardAdvisoryProps } from './CardAdvisory/CardAdvisory';
-export { default as CardBankAccount, type CardBankAccountProps, type CardBankAccountItem } from './CardBankAccount/CardBankAccount';
+export { default as CardBankAccount, type CardBankAccountProps, type CardBankAccountItem, } from './CardBankAccount/CardBankAccount';
 export { default as Carousel } from './Carousel/Carousel';
 export type { CarouselProps, CarouselItemProps, PaginationProps } from './Carousel/Carousel';
-export { default as CarouselCardAccounts, type CarouselCardAccountsProps } from './CarouselCardAccounts/CarouselCardAccounts';
+export { default as CarouselCardAccounts, type CarouselCardAccountsProps, } from './CarouselCardAccounts/CarouselCardAccounts';
 export { default as Checkbox, type CheckboxProps } from './Checkbox/Checkbox';
 export { default as CheckboxItem, type CheckboxItemProps } from './CheckboxItem/CheckboxItem';
 export { default as CheckboxGroup, type CheckboxGroupProps } from './CheckboxGroup/CheckboxGroup';
 export { default as CardFeedback, type CardFeedbackProps } from './CardFeedback/CardFeedback';
-export { default as CardFinancialCondition, type CardFinancialConditionProps } from './CardFinancialCondition/CardFinancialCondition';
+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 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 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, type CardCTATypeInput } from './CardCTA/CardCTA';
 export { default as DebitCard, type DebitCardProps } from './DebitCard/DebitCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
@@ -36,15 +36,18 @@ 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 Grid, type GridProps, type GridJustifyContent, type GridAlignItems, } from './Grid/Grid';
+export { default as FormUpload, type FormUploadProps, type FormUploadAttachment } from './FormUpload/FormUpload';
+export { default as Additem, type AdditemProps, type AdditemPickerResult, type AdditemPicker, type PickedAsset, } from './FormUpload/Additem';
 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 CircularProgressBar, type CircularProgressBarProps, } from './CircularProgressBar/CircularProgressBar';
+export { default as CircularProgressBarDoted, type CircularProgressBarDotedProps, } from './CircularProgressBarDoted/CircularProgressBarDoted';
 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 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';
 export { default as HeroSection, type HeroSectionProps } from './HeroSection/HeroSection';
 export { default as HoldingsCard, type HoldingsCardProps } from './HoldingsCard/HoldingsCard';
@@ -59,7 +62,7 @@ export { default as LinearMeter, type LinearMeterProps } from './LinearMeter/Lin
 export { default as LinearProgress, type LinearProgressProps } from './LinearProgress/LinearProgress';
 export { default as ListGroup } from './ListGroup/ListGroup';
 export { default as LottieIntroBlock, type LottieIntroBlockProps } from './LottieIntroBlock/LottieIntroBlock';
-export { default as LottiePlayer, type LottiePlayerProps, type LottieAnimationSource } from './LottiePlayer/LottiePlayer';
+export { default as LottiePlayer, type LottiePlayerProps, type LottieAnimationSource, } from './LottiePlayer/LottiePlayer';
 export { default as ListItem } from './ListItem/ListItem';
 export { default as MediaCard, type MediaCardProps } from './MediaCard/MediaCard';
 export { default as MerchantProfile, type MerchantProfileProps } from './MerchantProfile/MerchantProfile';
@@ -77,7 +80,7 @@ export { default as ScrollArea, type ScrollAreaProps, type ScrollDirection } fro
 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 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';
@@ -104,7 +107,7 @@ export { default as ChipSelect, type ChipSelectProps } from './ChipSelect/ChipSe
 export { default as InputSearch, type InputSearchProps } from './InputSearch/InputSearch';
 export { default as InstitutionBadge, type InstitutionBadgeProps } from './InstitutionBadge/InstitutionBadge';
 export { default as SupportText, type SupportTextProps } from './SupportText/SupportText';
-export { default as SupportTextIcon, type SupportTextIconProps, type SupportTextStatus } from './SupportText/SupportTextIcon';
+export { default as SupportTextIcon, type SupportTextIconProps, type SupportTextStatus, } from './SupportText/SupportTextIcon';
 export { default as Radio, type RadioProps } from './Radio/Radio';
 /**
  * @deprecated Use `Radio` instead. `RadioButton` is kept as an alias for
@@ -112,31 +115,32 @@ export { default as Radio, type RadioProps } from './Radio/Radio';
  */
 export { default as RadioButton, type RadioButtonProps } from './RadioButton/RadioButton';
 export { default as RechargeCard, type RechargeCardProps } from './RechargeCard/RechargeCard';
-export { default as SavingsGoalSummary, type SavingsGoalSummaryProps, type SavingsGoalSummaryItem } from './SavingsGoalSummary/SavingsGoalSummary';
-export { default as DonutChart, type DonutChartProps, type DonutChartSegmentData, type DonutChartSegmentProps, DonutChartSegment } from './DonutChart/DonutChart';
-export { default as AreaLineChart, useChart, type AreaLineChartProps, type ChartSeries, type ChartPoint, type ChartInset, type GoalPinConfig, type ChartGridProps, type ChartXAxisProps, type ChartYAxisProps, type ChartGoalPinProps } from './AreaLineChart/AreaLineChart';
-export { default as ClusterBubble, type ClusterBubbleProps, type ClusterBubbleLabelPlacement, type ClusterBubbleLabelDirection } from './ClusterBubble/ClusterBubble';
+export { default as SavingsGoalSummary, type SavingsGoalSummaryProps, type SavingsGoalSummaryItem, } from './SavingsGoalSummary/SavingsGoalSummary';
+export { default as DonutChart, type DonutChartProps, type DonutChartSegmentData, type DonutChartSegmentProps, DonutChartSegment, } from './DonutChart/DonutChart';
+export { default as AreaLineChart, useChart, type AreaLineChartProps, type ChartSeries, type ChartPoint, type ChartInset, type GoalPinConfig, type ChartGridProps, type ChartXAxisProps, type ChartYAxisProps, type ChartGoalPinProps, } from './AreaLineChart/AreaLineChart';
+export { default as ClusterBubble, type ClusterBubbleProps, type ClusterBubbleLabelPlacement, type ClusterBubbleLabelDirection, } from './ClusterBubble/ClusterBubble';
 export { default as BubbleChart, type BubbleChartProps, type BubbleDatum } from './BubbleChart/BubbleChart';
-export { default as DonutChartSummary, type DonutChartSummaryProps, type DonutChartSummaryItem } from './DonutChartSummary/DonutChartSummary';
-export { default as RangeTrack, type RangeTrackProps, type RangeTrackTab, type RangeTrackItem } from './RangeTrack/RangeTrack';
-export { default as SegmentedTrack, type SegmentedTrackProps, type SegmentedTrackSegmentData, type SegmentedTrackSegmentProps, SegmentedTrackSegment } from './SegmentedTrack/SegmentedTrack';
+export { default as DonutChartSummary, type DonutChartSummaryProps, type DonutChartSummaryItem, } from './DonutChartSummary/DonutChartSummary';
+export { default as RangeTrack, type RangeTrackProps, type RangeTrackTab, type RangeTrackItem, } from './RangeTrack/RangeTrack';
+export { default as SegmentedTrack, type SegmentedTrackProps, type SegmentedTrackSegmentData, type SegmentedTrackSegmentProps, SegmentedTrackSegment, } from './SegmentedTrack/SegmentedTrack';
 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 { 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 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 ProfileCard, type ProfileCardProps, type ProfileCardUpiHandle } from './ProfileCard/ProfileCard';
+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';
@@ -144,11 +148,13 @@ export { default as OTP, OTPResend, useOtpResend, type OTPProps, type OTPResendP
 export { default as PaymentFeedback, type PaymentFeedbackProps } from './PaymentFeedback/PaymentFeedback';
 export { default as StatItem, type StatItemProps, type StatItemLabelPosition } from './StatItem/StatItem';
 export { default as StatGroup, type StatGroupProps, type StatGroupItem } from './StatGroup/StatGroup';
-export { default as StrengthIndicator, type StrengthIndicatorProps, type StrengthIndicatorConfidence, type StrengthIndicatorConfidenceValue } from './StrengthIndicator/StrengthIndicator';
+export { default as StrengthIndicator, type StrengthIndicatorProps, type StrengthIndicatorConfidence, type StrengthIndicatorConfidenceValue, } from './StrengthIndicator/StrengthIndicator';
 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 SegmentedControl, type SegmentedControlProps, type SegmentedControlItem, } from './SegmentedControl/SegmentedControl';
 export { default as Toggle, type ToggleProps } from './Toggle/Toggle';
+export { default as AutoplayControl, type AutoplayControlProps } from './AutoplayControl/AutoplayControl';
+export { default as NumberPagination, type NumberPaginationProps } from './NumberPagination/NumberPagination';
 //# sourceMappingURL=index.d.ts.map

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

@@ -20,6 +20,7 @@ export declare const FIGMA_MODES: {
     readonly AppearanceBrand: readonly ["Primary", "Secondary", "Neutral", "Tertiary"];
     readonly AppearanceSystem: readonly ["positive", "warning", "negative"];
     readonly "Attached / Output": readonly ["Default"];
+    readonly "Autoplay Control": readonly ["Default"];
     readonly "Avatar / Output": readonly ["Default"];
     readonly "Avatar Group / Output": readonly ["Default"];
     readonly "Avatar Size": readonly ["L", "M", "S", "XS"];
@@ -44,6 +45,7 @@ export declare const FIGMA_MODES: {
     readonly "Calendar Glyph / Output": readonly ["Default"];
     readonly "Calendar Glyph State": readonly ["Idle", "notSaved", "saved"];
     readonly "Card / Output": readonly ["Default"];
+    readonly "Card Apperance": readonly ["Default", "Plain"];
     readonly "Card Feedback / Output": readonly ["Default"];
     readonly "Card.Media": readonly ["Default"];
     readonly "Card/CTA / Output": readonly ["Default"];
@@ -52,6 +54,7 @@ export declare const FIGMA_MODES: {
     readonly "CardAdvisory / Output": readonly ["Default"];
     readonly cardsShared: readonly ["Default"];
     readonly "Carousel / Output": readonly ["Default"];
+    readonly "Carousel Control Gap": readonly ["Default"];
     readonly "CarouselCardAccounts / Output": readonly ["Default"];
     readonly "ccCard / Output": readonly ["Default"];
     readonly "checkbox / Output": readonly ["Default"];
@@ -78,7 +81,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 10": readonly ["Default", "jioPlus"];
     readonly "context 8": readonly ["Default", "Section"];
     readonly "context 9": readonly ["Default", "Stack"];
     readonly Context2: readonly ["Default", "AppBar"];
@@ -87,6 +90,7 @@ export declare const FIGMA_MODES: {
     readonly context5: readonly ["Default", "Fullscreen Modal"];
     readonly context7: readonly ["Default", "Card", "Page Hero"];
     readonly "Contrast Context": readonly ["on dark", "on light"];
+    readonly "Control Toggle ": readonly ["Default"];
     readonly "Conversation Feed / Output": readonly ["Default"];
     readonly "Counter Badge / Output": readonly ["Default"];
     readonly "Coverage Bar Comparison / Output": readonly ["Default"];
@@ -118,7 +122,7 @@ export declare const FIGMA_MODES: {
     readonly Gap: readonly ["S", "M", "L", "None"];
     readonly "Gauge / Output": readonly ["Default"];
     readonly "Grid / Output": readonly ["Default"];
-    readonly "Handle Boolean": readonly ["False", "True"];
+    readonly "Handle Boolean": readonly ["True", "False"];
     readonly "Heading / Output": readonly ["Default"];
     readonly "Heading text": readonly ["Default", "Slot"];
     readonly "HeroSection / Output": readonly ["Default"];
@@ -139,7 +143,7 @@ export declare const FIGMA_MODES: {
     readonly "lazyList / Output": readonly ["Default"];
     readonly "LinearMeter / Output": readonly ["Default"];
     readonly "LinearProgress / Output": readonly ["Default"];
-    readonly "LinearProgress Size": readonly ["M", "L"];
+    readonly "LinearProgress Size": readonly ["S", "M", "L"];
     readonly "Link / Output": readonly ["Default"];
     readonly "Link Apperances": readonly ["Neutral", "Primary", "Secondary", "Tertiary"];
     readonly "List Item / Output": readonly ["Default"];
@@ -160,10 +164,10 @@ 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"];
+    readonly "number pagination": readonly ["Default"];
     readonly "Numpad / Output": readonly ["Default"];
     readonly "OTP / Output": readonly ["Mode 1"];
     readonly "Overlay / Output": readonly ["Mode 1"];
@@ -182,6 +186,7 @@ export declare const FIGMA_MODES: {
     readonly "Product Merchandising card": readonly ["Default"];
     readonly "ProductLabel / Output": readonly ["Default"];
     readonly "ProductOverview / Output": readonly ["Default"];
+    readonly "Profile Card / Output": readonly ["Default"];
     readonly "Profile Card Appearance": readonly ["Default", "Premium"];
     readonly "ProgressBadge / Output": readonly ["Default"];
     readonly ProjectionMarker: readonly ["Default"];
@@ -253,6 +258,7 @@ export declare const FIGMA_MODES: {
     readonly "TransactionBubble / Output": readonly ["Default"];
     readonly "TransationDetails / Output": readonly ["Default"];
     readonly "UPI Handle / Output": readonly ["Default"];
+    readonly "UPI Handle Image": readonly ["True", "False"];
     readonly "ValueBar / Output": readonly ["Default"];
     readonly "Video / Output": readonly ["L", "M", "S"];
     readonly "VStack / Output": readonly ["Default"];

package/lib/typescript/src/icons/components/IconBrokenimage.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconBrokenimage: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconBrokenimage.d.ts.map

package/lib/typescript/src/icons/components/IconImage.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconImage: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconImage.d.ts.map

package/lib/typescript/src/icons/components/IconMic.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconMic: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconMic.d.ts.map

package/lib/typescript/src/icons/components/IconMicoff.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconMicoff: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconMicoff.d.ts.map

package/lib/typescript/src/icons/components/IconPause.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconPause: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconPause.d.ts.map

package/lib/typescript/src/icons/components/IconPlay.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconPlay: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconPlay.d.ts.map

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

@@ -170,6 +170,7 @@ export * from './IconBrightnessdisplay';
 export * from './IconBrightnessfull';
 export * from './IconBrightnesshalf';
 export * from './IconBroadcast';
+export * from './IconBrokenimage';
 export * from './IconBroom';
 export * from './IconBrush';
 export * from './IconBuffer';
@@ -626,6 +627,7 @@ export * from './IconIce';
 export * from './IconIceskating';
 export * from './IconId';
 export * from './IconIdcheck';
+export * from './IconImage';
 export * from './IconImagemask';
 export * from './IconImport';
 export * from './IconIncognito';
@@ -724,7 +726,9 @@ export * from './IconMerge';
 export * from './IconMergeoff';
 export * from './IconMesh';
 export * from './IconMessagesend';
+export * from './IconMic';
 export * from './IconMicmuteforced';
+export * from './IconMicoff';
 export * from './IconMicroscope';
 export * from './IconMilk';
 export * from './IconMilklow';
@@ -846,6 +850,7 @@ export * from './IconPasses';
 export * from './IconPaste';
 export * from './IconPastedocument';
 export * from './IconPatient';
+export * from './IconPause';
 export * from './IconPausecircle';
 export * from './IconPaybill';
 export * from './IconPayemiinstall';
@@ -887,6 +892,7 @@ export * from './IconPlank';
 export * from './IconPlans';
 export * from './IconPlantgrowth';
 export * from './IconPlanting';
+export * from './IconPlay';
 export * from './IconPlaycircle';
 export * from './IconPlaypause';
 export * from './IconPlaybox';

package/lib/typescript/src/icons/registry.d.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-07-01T12:55:42.353Z
+ * Generated: 2026-07-07T17:35:34.036Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

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

package/src/components/AutoplayControl/AutoplayControl.tsx

@@ -0,0 +1,77 @@
+import React, { useMemo } from 'react'
+import {
+  Pressable,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import Icon from '../../icons/Icon'
+import type { Modes } from '../../design-tokens'
+
+export type AutoplayControlProps = {
+  state?: 'pause' | 'play';
+  modes?: Modes;
+  onPress?: () => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+interface AutoplayControlTokens {
+  containerStyle: ViewStyle;
+  iconColor: string;
+}
+
+function resolveAutoplayControlTokens(modes: Modes, disabled: boolean): AutoplayControlTokens {
+  const width = (getVariableByName('autoplayControl/width', modes) ?? 36) as number
+  const height = (getVariableByName('autoplayControl/height', modes) ?? 36) as number
+  const radiusRaw = (getVariableByName('autoplayControl/radius', modes) ?? 9999) as number
+  const backgroundColor = (getVariableByName('autoplayControl/background/color', modes) ?? '#ffffff') as string
+  const iconColor = (getVariableByName('autoplayControl/icon/color', modes) ?? '#000000') as string
+
+  const borderRadius = radiusRaw === 9999 ? width / 2 : radiusRaw
+
+  return {
+    containerStyle: {
+      width,
+      height,
+      borderRadius,
+      backgroundColor,
+      alignItems: 'center',
+      justifyContent: 'center',
+      opacity: disabled ? 0.5 : 1,
+    },
+    iconColor,
+  }
+}
+
+/**
+ * AutoplayControl is a button component that toggles between play and pause states.
+ * All styling values are resolved from Figma design tokens.
+ */
+export default function AutoplayControl({
+  state = 'pause',
+  modes,
+  onPress,
+  disabled = false,
+  style,
+}: AutoplayControlProps) {
+  const tokens = useMemo(() => resolveAutoplayControlTokens(modes ?? {}, disabled), [modes, disabled])
+
+  const iconName = state === 'play' ? 'ic_play' : 'ic_pause'
+
+  return (
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      disabled={disabled}
+      style={({ pressed }) => [
+        tokens.containerStyle,
+        pressed && { opacity: 0.7 },
+        style,
+      ]}
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+    >
+      <Icon name={iconName} size={24} color={tokens.iconColor} />
+    </Pressable>
+  )
+}

package/src/components/CardCTA/CardCTA.tsx

@@ -281,22 +281,37 @@ function CardCTA({
         zIndex: 1,
     }
 
-    // NOTE: rightWrap must NOT shrink on native. On Android (Yoga), the default
-    // `flex: 2` shorthand expands to `{ flexGrow: 2, flexShrink: 1, flexBasis: 0 }`,
-    // which — combined with `minWidth: 0` — lets Yoga shrink this wrapper below
-    // its own padding+IconCapsule width when leftWrap's text is long. Once that
-    // happens the horizontal padding collapses, `alignItems: 'flex-end'` pins
-    // the IconCapsule against the inner edge, and the icon ends up visually
-    // touching the body text (the wrapper "appears not to exist"). Web hides
-    // this because browsers honor `min-width: auto` on flex items. Use
-    // explicit `flexGrow`/`flexShrink: 0`/`flexBasis: 'auto'` so the wrapper
-    // is sized to its content as a floor and only grows for the design's
-    // 3:2 ratio when extra space is available. leftWrap already absorbs tight
-    // space via `flexShrink: 1` + `minWidth: 0`.
+    // NOTE: rightWrap must implement the design's TRUE `2fr` column.
+    //
+    // History of this style — two Yoga pitfalls pull in opposite directions:
+    //
+    //  1. `flex: 2` (=> flexBasis: 0, flexShrink: 1): on Android, Yoga could
+    //     shrink the wrapper below its padding+IconCapsule width when the left
+    //     text was long, collapsing the padding and gluing the icon to the
+    //     text. Browsers hide this because they honor `min-width: auto`; Yoga
+    //     always treats min-width as 0 unless told otherwise.
+    //  2. The previous workaround, `flexBasis: 'auto'` + `flexGrow: 2`, fixed
+    //     #1 but broke the column ratio: Yoga then sizes the wrapper to its
+    //     content FIRST (icon + padding) and distributes only the leftover
+    //     space 3:2. The icon width gets baked in on top of the 2fr share, so
+    //     the right column ends up much wider than the design's 2fr and the
+    //     body text wraps early with dead space to its right.
+    //
+    // Fundamental fix: keep the genuine fr-unit geometry (`flexBasis: 0`,
+    // grow 3:2, no shrink) and replace Yoga's missing `min-width: auto` with
+    // an explicit computed floor — the resolved IconCapsule size plus the
+    // wrapper's own horizontal padding. The column is exactly 2fr whenever
+    // space allows and can never collapse below its content.
+    const iconCapsuleModes = { ...modes, 'IconCapsule / Size': 'M', Emphasis: 'Medium', AppearanceBrand: 'Secondary' }
+    const rightWrapMinWidth =
+        ((getVariableByName('iconCapsule/size', iconCapsuleModes) as number) || 0) +
+        ((rightPaddingH as number) || 0) * 2
+
     const rightWrapStyle: ViewStyle = {
         flexGrow: 2,
         flexShrink: 0,
-        flexBasis: 'auto',
+        flexBasis: 0,
+        minWidth: rightWrapMinWidth,
         paddingHorizontal: rightPaddingH,
         paddingVertical: rightPaddingV,
         alignItems: 'flex-end',
@@ -555,9 +570,9 @@ function CardCTA({
             </View>
             <View style={rightWrapStyle}>
                 {iconSlot ? (
-                    cloneChildrenWithModes(iconSlot, {...modes, 'IconCapsule / Size': 'M',Emphasis: 'Medium', AppearanceBrand: 'Secondary'})
+                    cloneChildrenWithModes(iconSlot, iconCapsuleModes)
                 ) : (
-                    <IconCapsule iconName={iconName} modes={{...modes, 'IconCapsule / Size': 'M',Emphasis: 'Medium', AppearanceBrand: 'Secondary'}} />
+                    <IconCapsule iconName={iconName} modes={iconCapsuleModes} />
                 )}
             </View>
         </View>