jfs-components 0.1.51 → 0.1.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (95) hide show
  1. package/.cursor/D2C-SCREEN.md +2 -1
  2. package/.cursor/commands/D2C.md +2 -1
  3. package/CHANGELOG.md +17 -0
  4. package/lib/commonjs/components/ActionFooter/ActionFooter.js +319 -135
  5. package/lib/commonjs/components/Badge/Badge.js +20 -1
  6. package/lib/commonjs/components/Button/Button.js +139 -47
  7. package/lib/commonjs/components/ButtonGroup/ButtonGroup.js +1 -1
  8. package/lib/commonjs/components/Card/Card.js +151 -112
  9. package/lib/commonjs/components/Card/assets/gold-logo-mark.png +0 -0
  10. package/lib/commonjs/components/CategoryCard/CategoryCard.js +97 -63
  11. package/lib/commonjs/components/CategoryCard/assets/sample.png +0 -0
  12. package/lib/commonjs/components/CheckboxItem/CheckboxItem.js +59 -10
  13. package/lib/commonjs/components/CircularProgressBarDoted/CircularProgressBarDoted.js +1 -1
  14. package/lib/commonjs/components/ExpandableCheckbox/ExpandableCheckbox.js +132 -49
  15. package/lib/commonjs/components/HelloJioInput/HelloJioInput.js +56 -14
  16. package/lib/commonjs/components/IconCapsule/IconCapsule.js +1 -1
  17. package/lib/commonjs/components/MetricData/MetricData.js +26 -13
  18. package/lib/commonjs/components/MoneyValue/MoneyValue.js +1 -1
  19. package/lib/commonjs/components/Nudge/Nudge.js +1 -1
  20. package/lib/commonjs/components/PdpCcCard/PdpCcCard.js +47 -91
  21. package/lib/commonjs/components/PlanComparisonCard/PlanComparisonCard.js +52 -45
  22. package/lib/commonjs/components/PortfolioHero/PortfolioHero.js +1 -1
  23. package/lib/commonjs/components/Slider/Slider.js +3 -3
  24. package/lib/commonjs/components/TextInput/TextInput.js +26 -8
  25. package/lib/commonjs/components/Tooltip/Tooltip.js +3 -5
  26. package/lib/commonjs/components/index.js +7 -1
  27. package/lib/commonjs/design-tokens/Coin Variables-variables-full.json +1 -1
  28. package/lib/commonjs/design-tokens/figma-modes.generated.js +13 -13
  29. package/lib/commonjs/icons/registry.js +1 -1
  30. package/lib/module/components/ActionFooter/ActionFooter.js +322 -138
  31. package/lib/module/components/Badge/Badge.js +20 -1
  32. package/lib/module/components/Button/Button.js +140 -48
  33. package/lib/module/components/ButtonGroup/ButtonGroup.js +1 -1
  34. package/lib/module/components/Card/Card.js +152 -114
  35. package/lib/module/components/Card/assets/gold-logo-mark.png +0 -0
  36. package/lib/module/components/CategoryCard/CategoryCard.js +97 -63
  37. package/lib/module/components/CategoryCard/assets/sample.png +0 -0
  38. package/lib/module/components/CheckboxItem/CheckboxItem.js +59 -10
  39. package/lib/module/components/CircularProgressBarDoted/CircularProgressBarDoted.js +1 -1
  40. package/lib/module/components/ExpandableCheckbox/ExpandableCheckbox.js +135 -52
  41. package/lib/module/components/HelloJioInput/HelloJioInput.js +56 -14
  42. package/lib/module/components/IconCapsule/IconCapsule.js +1 -1
  43. package/lib/module/components/MetricData/MetricData.js +26 -14
  44. package/lib/module/components/MoneyValue/MoneyValue.js +1 -1
  45. package/lib/module/components/Nudge/Nudge.js +1 -1
  46. package/lib/module/components/PdpCcCard/PdpCcCard.js +48 -92
  47. package/lib/module/components/PlanComparisonCard/PlanComparisonCard.js +52 -45
  48. package/lib/module/components/PortfolioHero/PortfolioHero.js +1 -1
  49. package/lib/module/components/Slider/Slider.js +3 -3
  50. package/lib/module/components/TextInput/TextInput.js +27 -9
  51. package/lib/module/components/Tooltip/Tooltip.js +3 -5
  52. package/lib/module/components/index.js +1 -1
  53. package/lib/module/design-tokens/Coin Variables-variables-full.json +1 -1
  54. package/lib/module/design-tokens/figma-modes.generated.js +13 -13
  55. package/lib/module/icons/registry.js +1 -1
  56. package/lib/typescript/src/components/ActionFooter/ActionFooter.d.ts +50 -21
  57. package/lib/typescript/src/components/Button/Button.d.ts +24 -1
  58. package/lib/typescript/src/components/ButtonGroup/ButtonGroup.d.ts +2 -2
  59. package/lib/typescript/src/components/Card/Card.d.ts +54 -25
  60. package/lib/typescript/src/components/CategoryCard/CategoryCard.d.ts +29 -12
  61. package/lib/typescript/src/components/CheckboxItem/CheckboxItem.d.ts +27 -9
  62. package/lib/typescript/src/components/ExpandableCheckbox/ExpandableCheckbox.d.ts +37 -12
  63. package/lib/typescript/src/components/IconCapsule/IconCapsule.d.ts +1 -1
  64. package/lib/typescript/src/components/MetricData/MetricData.d.ts +7 -5
  65. package/lib/typescript/src/components/PdpCcCard/PdpCcCard.d.ts +16 -6
  66. package/lib/typescript/src/components/PlanComparisonCard/PlanComparisonCard.d.ts +9 -2
  67. package/lib/typescript/src/components/index.d.ts +2 -2
  68. package/lib/typescript/src/icons/registry.d.ts +1 -1
  69. package/package.json +1 -1
  70. package/src/components/ActionFooter/ActionFooter.tsx +375 -141
  71. package/src/components/Badge/Badge.tsx +21 -1
  72. package/src/components/Button/Button.tsx +192 -44
  73. package/src/components/ButtonGroup/ButtonGroup.tsx +2 -2
  74. package/src/components/Card/Card.tsx +370 -212
  75. package/src/components/Card/assets/gold-logo-mark.png +0 -0
  76. package/src/components/CategoryCard/CategoryCard.tsx +130 -84
  77. package/src/components/CategoryCard/assets/sample.png +0 -0
  78. package/src/components/CheckboxItem/CheckboxItem.tsx +72 -12
  79. package/src/components/CircularProgressBarDoted/CircularProgressBarDoted.tsx +1 -1
  80. package/src/components/ExpandableCheckbox/ExpandableCheckbox.tsx +186 -67
  81. package/src/components/HelloJioInput/HelloJioInput.tsx +58 -17
  82. package/src/components/IconCapsule/IconCapsule.tsx +1 -1
  83. package/src/components/MetricData/MetricData.tsx +39 -22
  84. package/src/components/MoneyValue/MoneyValue.tsx +1 -1
  85. package/src/components/Nudge/Nudge.tsx +1 -1
  86. package/src/components/PdpCcCard/PdpCcCard.tsx +41 -92
  87. package/src/components/PlanComparisonCard/PlanComparisonCard.tsx +73 -58
  88. package/src/components/PortfolioHero/PortfolioHero.tsx +1 -1
  89. package/src/components/Slider/Slider.tsx +3 -3
  90. package/src/components/TextInput/TextInput.tsx +26 -9
  91. package/src/components/Tooltip/Tooltip.tsx +3 -5
  92. package/src/components/index.ts +9 -2
  93. package/src/design-tokens/Coin Variables-variables-full.json +1 -1
  94. package/src/design-tokens/figma-modes.generated.ts +13 -13
  95. package/src/icons/registry.ts +1 -1
package/lib/module/design-tokens/figma-modes.generated.js CHANGED
@@ -310,7 +310,7 @@ export const FIGMA_COMPONENT_MODES = {
310
310
  "Accordion": ["Accordion States"],
311
311
  "AccordionCheckbox": ["Color Mode", "context 10", "Profile Card Appearance"],
312
312
  "AccountCard": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Page type"],
313
- "ActionFooter": ["Color Mode", "Context", "context5", "Slot gap"],
313
+ "ActionFooter": ["Action Footer Radius", "Color Mode", "Context", "context5", "Slot gap"],
314
314
  "ActionTile": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
315
315
  "Additem": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
316
316
  "AllocationComparisonChart": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
@@ -331,18 +331,18 @@ export const FIGMA_COMPONENT_MODES = {
331
331
  "Card": ["AppearanceBrand", "AppearanceSystem", "Card Container", "Color Mode", "context 8", "Gap", "Page type", "Semantic Intent"],
332
332
  "CardAdvisory": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "circularProgressBar Size", "Color Mode", "Context", "context 10", "Emphasis", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
333
333
  "CardBankAccount": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Context4", "context5", "Emphasis", "List Item Style", "Page type", "Profile Card Appearance", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
334
- "CardCTA": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "context 8", "Context4", "Emphasis", "Icon Capsule Size", "MediaBlock", "Page type", "Profile Card Appearance", "Semantic Intent"],
334
+ "CardCTA": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "context 8", "context 9", "Context4", "Emphasis", "Icon Capsule Size", "MediaBlock", "Page type", "Profile Card Appearance", "Semantic Intent"],
335
335
  "CardFeedback": ["AppearanceBrand", "AppearanceSystem", "Color Mode"],
336
336
  "CardFinancialCondition": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "circularProgressBar Size", "Color Mode", "Context", "context 10", "Emphasis", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
337
- "CardInsight": ["Appearance / DataViz", "AppearanceBrand", "AppearanceSystem", "Badge Size", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "context 8", "Emphasis", "Emphasis / DataViz", "LinearProgress Size", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
337
+ "CardInsight": ["Appearance / DataViz", "AppearanceBrand", "AppearanceSystem", "Badge Size", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "context 8", "Emphasis", "Emphasis / DataViz", "LinearProgress Size", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap", "Text Appearance"],
338
338
  "CardProviderInfo": ["AppearanceBrand", "Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
339
339
  "Carousel": ["peekOffset"],
340
340
  "CarouselCardAccounts": ["peekOffset"],
341
341
  "CategoryCard": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Card Tab State", "Color Mode", "Emphasis", "Radius", "Semantic Intent"],
342
342
  "CcCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "context 8", "Context2", "Context4", "context5", "context7", "Emphasis", "List Item Style", "ListItem State", "NavArrow Direction", "Page type", "Profile Card Appearance", "Radius", "Selectable", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
343
343
  "Checkbox": ["Color Mode"],
344
- "CheckboxGroup": ["Color Mode"],
345
- "CheckboxItem": ["Color Mode"],
344
+ "CheckboxGroup": ["Color Mode", "Context", "Slot gap"],
345
+ "CheckboxItem": ["Color Mode", "Context", "Slot gap"],
346
346
  "ChipSelect": ["ChipSelect State", "Color Mode"],
347
347
  "CircularProgressBar": ["AppearanceBrand", "AppearanceSystem", "circularProgressBar Size", "Color Mode", "Emphasis", "Semantic Intent"],
348
348
  "CircularRating": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Emphasis", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
@@ -361,19 +361,19 @@ export const FIGMA_COMPONENT_MODES = {
361
361
  "Dropdown": ["Dropdown Item State"],
362
362
  "DropdownInput": ["AppearanceBrand", "Button / State", "Color Mode", "Dropdown Item State", "Emphasis", "FormField States", "Page type", "Status"],
363
363
  "EmptyState": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Emphasis", "Icon Capsule Size", "Page type", "Profile Card Appearance", "Semantic Intent"],
364
- "ExpandableCheckbox": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
364
+ "ExpandableCheckbox": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "contentInset/Left", "contentInset/Right", "Context", "context 10", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap", "Text Appearance", "Text Sizes", "Weight"],
365
365
  "FavoriteToggle": ["Color Mode", "Favorite Toggle Color", "Favorite Toggle Size"],
366
366
  "FilterBar": ["Color Mode", "InputState"],
367
367
  "FormField": ["Color Mode", "FormField States", "Status"],
368
368
  "FormUpload": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "FormField States", "Icon Capsule Size", "Page type", "Semantic Intent", "Status"],
369
- "FullscreenModal": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "context5", "Emphasis", "Page type", "PageHero Size", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
369
+ "FullscreenModal": ["Action Footer Radius", "AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "context5", "Emphasis", "Page type", "PageHero Size", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
370
370
  "Gauge": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "FormField States", "Semantic Intent", "Status"],
371
371
  "Grid": ["Background", "Color Mode", "Context", "Grid Gap", "Padding", "Page type", "Slot gap"],
372
372
  "HelloJioInput": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Context2", "Emphasis", "Hello Jio Input Size", "Hello Jio Input State", "Page type"],
373
373
  "HeroSection": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "context 9", "context7", "Emphasis", "FormField States", "InputState", "Page type", "Status"],
374
374
  "HoldingsCard": ["AppearanceBrand", "Color Mode"],
375
375
  "HStack": ["Context", "Padding", "Page type", "Slot gap", "Stack Context"],
376
- "Icon": ["AppearanceBrand", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
376
+ "Icon": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
377
377
  "IconButton": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Page type"],
378
378
  "IconCapsule": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
379
379
  "InputSearch": ["Color Mode", "FormField States", "InputState", "Status"],
@@ -388,7 +388,7 @@ export const FIGMA_COMPONENT_MODES = {
388
388
  "MediaCard": ["Contrast Context"],
389
389
  "MerchantProfile": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
390
390
  "MessageField": ["Color Mode", "FormField States"],
391
- "MetricData": ["AppearanceBrand", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
391
+ "MetricData": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
392
392
  "MetricLegendItem": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
393
393
  "MoneyValue": ["Color Mode", "Context3"],
394
394
  "MonthlyStatusGrid": ["Appearance / DataViz", "Calendar Glyph State", "Color Mode", "Emphasis / DataViz"],
@@ -397,20 +397,20 @@ export const FIGMA_COMPONENT_MODES = {
397
397
  "OTP": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Emphasis", "FormField States", "Input/PINSlot States", "Page type", "Profile Card Appearance", "Semantic Intent", "Status"],
398
398
  "PageHero": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "PageHero Size", "Profile Card Appearance", "Semantic Intent", "Video / Output"],
399
399
  "PaymentFeedback": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
400
- "PdpCcCard": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "context7", "Emphasis", "Page type", "Profile Card Appearance", "Radius", "Semantic Intent"],
400
+ "PdpCcCard": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Context4", "context7", "Emphasis", "Page type", "Profile Card Appearance", "Radius", "Semantic Intent"],
401
401
  "PlanComparisonCard": ["Color Mode"],
402
402
  "Popup": ["Color Mode", "Context", "Padding", "Page type", "Slot gap", "Stack Context"],
403
403
  "PortfolioHero": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context3", "Context4", "Profile Card Appearance"],
404
404
  "ProductLabel": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
405
405
  "ProductMerchandisingCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
406
- "ProductOverview": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
406
+ "ProductOverview": ["Avatar Size", "Badge Size", "Color Mode", "Context", "context 10", "Context4", "Profile Card Appearance", "Text Appearance"],
407
407
  "ProfileCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Color Mode", "Context", "context 10", "Context2", "Context4", "context5", "Emphasis", "Icon Capsule Size", "List Item Style", "ListItem State", "NavArrow Direction", "Page type", "Profile Card Appearance", "Selectable", "Semantic Intent", "Slot gap", "UPI Handle Image"],
408
408
  "ProjectionMarker": ["Color Mode", "context 10", "Profile Card Appearance"],
409
409
  "Radio": ["Color Mode"],
410
410
  "RangeTrack": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
411
411
  "Rating": ["Color Mode", "Rating Star Size", "Rating Star State"],
412
412
  "RechargeCard": ["Avatar Size", "Badge Size", "Color Mode", "Context3", "Context4"],
413
- "SavingsGoalSummary": ["Appearance / DataViz", "AppearanceBrand", "AppearanceSystem", "Color Mode", "Emphasis", "Emphasis / DataViz", "LinearProgress Size", "Semantic Intent"],
413
+ "SavingsGoalSummary": ["Appearance / DataViz", "AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Emphasis / DataViz", "LinearProgress Size", "Semantic Intent", "Text Appearance"],
414
414
  "Screen": ["Color Mode", "Page type"],
415
415
  "Section": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "context 10", "context 9", "Context2", "context5", "Emphasis", "Icon Capsule Size", "List Item Style", "ListItem State", "NavArrow Direction", "Padding", "Page type", "Profile Card Appearance", "Selectable", "Semantic Intent", "Slot gap"],
416
416
  "SegmentedControl": ["SegmentedControl/Segment"],
@@ -439,7 +439,7 @@ export const FIGMA_COMPONENT_MODES = {
439
439
  "TransactionBubble": ["Color Mode", "context 10", "Context2", "Context3", "context5", "List Item Style", "NavArrow Direction", "Page type", "Profile Card Appearance", "Transaction Status"],
440
440
  "TransactionStatus": ["Transaction Status"],
441
441
  "UpiHandle": ["Color Mode", "context 10", "Profile Card Appearance", "UPI Handle Image"],
442
- "ValueBackMetric": ["AppearanceBrand", "Badge Size", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
442
+ "ValueBackMetric": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
443
443
  "VStack": ["Context", "Padding", "Page type", "Slot gap", "Stack Context"]
444
444
  };
445
445