jfs-components 0.1.50 → 0.1.54

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 (93) hide show
  1. package/.cursor/D2C-FLOW.md +94 -0
  2. package/.cursor/D2C-SCREEN.md +119 -0
  3. package/.cursor/commands/D2C.md +101 -0
  4. package/CHANGELOG.md +18 -0
  5. package/lib/commonjs/components/ActionFooter/ActionFooter.js +319 -135
  6. package/lib/commonjs/components/Badge/Badge.js +20 -1
  7. package/lib/commonjs/components/Button/Button.js +139 -47
  8. package/lib/commonjs/components/ButtonGroup/ButtonGroup.js +1 -1
  9. package/lib/commonjs/components/Card/Card.js +151 -112
  10. package/lib/commonjs/components/Card/assets/gold-logo-mark.png +0 -0
  11. package/lib/commonjs/components/CategoryCard/CategoryCard.js +97 -63
  12. package/lib/commonjs/components/CategoryCard/assets/sample.png +0 -0
  13. package/lib/commonjs/components/CheckboxItem/CheckboxItem.js +59 -10
  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/ExpandableCheckbox/ExpandableCheckbox.js +135 -52
  40. package/lib/module/components/HelloJioInput/HelloJioInput.js +56 -14
  41. package/lib/module/components/IconCapsule/IconCapsule.js +1 -1
  42. package/lib/module/components/MetricData/MetricData.js +26 -14
  43. package/lib/module/components/MoneyValue/MoneyValue.js +1 -1
  44. package/lib/module/components/Nudge/Nudge.js +1 -1
  45. package/lib/module/components/PdpCcCard/PdpCcCard.js +48 -92
  46. package/lib/module/components/PlanComparisonCard/PlanComparisonCard.js +52 -45
  47. package/lib/module/components/PortfolioHero/PortfolioHero.js +1 -1
  48. package/lib/module/components/Slider/Slider.js +3 -3
  49. package/lib/module/components/TextInput/TextInput.js +27 -9
  50. package/lib/module/components/Tooltip/Tooltip.js +3 -5
  51. package/lib/module/components/index.js +1 -1
  52. package/lib/module/design-tokens/Coin Variables-variables-full.json +1 -1
  53. package/lib/module/design-tokens/figma-modes.generated.js +13 -13
  54. package/lib/module/icons/registry.js +1 -1
  55. package/lib/typescript/src/components/ActionFooter/ActionFooter.d.ts +50 -21
  56. package/lib/typescript/src/components/Button/Button.d.ts +24 -1
  57. package/lib/typescript/src/components/ButtonGroup/ButtonGroup.d.ts +2 -2
  58. package/lib/typescript/src/components/Card/Card.d.ts +54 -25
  59. package/lib/typescript/src/components/CategoryCard/CategoryCard.d.ts +29 -12
  60. package/lib/typescript/src/components/CheckboxItem/CheckboxItem.d.ts +27 -9
  61. package/lib/typescript/src/components/ExpandableCheckbox/ExpandableCheckbox.d.ts +37 -12
  62. package/lib/typescript/src/components/IconCapsule/IconCapsule.d.ts +1 -1
  63. package/lib/typescript/src/components/MetricData/MetricData.d.ts +7 -5
  64. package/lib/typescript/src/components/PdpCcCard/PdpCcCard.d.ts +16 -6
  65. package/lib/typescript/src/components/PlanComparisonCard/PlanComparisonCard.d.ts +9 -2
  66. package/lib/typescript/src/components/index.d.ts +2 -2
  67. package/lib/typescript/src/icons/registry.d.ts +1 -1
  68. package/package.json +4 -2
  69. package/src/components/ActionFooter/ActionFooter.tsx +375 -141
  70. package/src/components/Badge/Badge.tsx +21 -1
  71. package/src/components/Button/Button.tsx +192 -44
  72. package/src/components/ButtonGroup/ButtonGroup.tsx +2 -2
  73. package/src/components/Card/Card.tsx +370 -212
  74. package/src/components/Card/assets/gold-logo-mark.png +0 -0
  75. package/src/components/CategoryCard/CategoryCard.tsx +130 -84
  76. package/src/components/CategoryCard/assets/sample.png +0 -0
  77. package/src/components/CheckboxItem/CheckboxItem.tsx +72 -12
  78. package/src/components/ExpandableCheckbox/ExpandableCheckbox.tsx +186 -67
  79. package/src/components/HelloJioInput/HelloJioInput.tsx +58 -17
  80. package/src/components/IconCapsule/IconCapsule.tsx +1 -1
  81. package/src/components/MetricData/MetricData.tsx +39 -22
  82. package/src/components/MoneyValue/MoneyValue.tsx +1 -1
  83. package/src/components/Nudge/Nudge.tsx +1 -1
  84. package/src/components/PdpCcCard/PdpCcCard.tsx +41 -92
  85. package/src/components/PlanComparisonCard/PlanComparisonCard.tsx +73 -58
  86. package/src/components/PortfolioHero/PortfolioHero.tsx +1 -1
  87. package/src/components/Slider/Slider.tsx +3 -3
  88. package/src/components/TextInput/TextInput.tsx +26 -9
  89. package/src/components/Tooltip/Tooltip.tsx +3 -5
  90. package/src/components/index.ts +9 -2
  91. package/src/design-tokens/Coin Variables-variables-full.json +1 -1
  92. package/src/design-tokens/figma-modes.generated.ts +13 -13
  93. package/src/icons/registry.ts +1 -1
package/lib/commonjs/design-tokens/figma-modes.generated.js CHANGED
@@ -314,7 +314,7 @@ const FIGMA_COMPONENT_MODES = exports.FIGMA_COMPONENT_MODES = {
314
314
  "Accordion": ["Accordion States"],
315
315
  "AccordionCheckbox": ["Color Mode", "context 10", "Profile Card Appearance"],
316
316
  "AccountCard": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Page type"],
317
- "ActionFooter": ["Color Mode", "Context", "context5", "Slot gap"],
317
+ "ActionFooter": ["Action Footer Radius", "Color Mode", "Context", "context5", "Slot gap"],
318
318
  "ActionTile": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
319
319
  "Additem": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
320
320
  "AllocationComparisonChart": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
@@ -335,18 +335,18 @@ const FIGMA_COMPONENT_MODES = exports.FIGMA_COMPONENT_MODES = {
335
335
  "Card": ["AppearanceBrand", "AppearanceSystem", "Card Container", "Color Mode", "context 8", "Gap", "Page type", "Semantic Intent"],
336
336
  "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"],
337
337
  "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"],
338
- "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"],
338
+ "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"],
339
339
  "CardFeedback": ["AppearanceBrand", "AppearanceSystem", "Color Mode"],
340
340
  "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"],
341
- "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"],
341
+ "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"],
342
342
  "CardProviderInfo": ["AppearanceBrand", "Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
343
343
  "Carousel": ["peekOffset"],
344
344
  "CarouselCardAccounts": ["peekOffset"],
345
345
  "CategoryCard": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Card Tab State", "Color Mode", "Emphasis", "Radius", "Semantic Intent"],
346
346
  "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"],
347
347
  "Checkbox": ["Color Mode"],
348
- "CheckboxGroup": ["Color Mode"],
349
- "CheckboxItem": ["Color Mode"],
348
+ "CheckboxGroup": ["Color Mode", "Context", "Slot gap"],
349
+ "CheckboxItem": ["Color Mode", "Context", "Slot gap"],
350
350
  "ChipSelect": ["ChipSelect State", "Color Mode"],
351
351
  "CircularProgressBar": ["AppearanceBrand", "AppearanceSystem", "circularProgressBar Size", "Color Mode", "Emphasis", "Semantic Intent"],
352
352
  "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"],
@@ -365,19 +365,19 @@ const FIGMA_COMPONENT_MODES = exports.FIGMA_COMPONENT_MODES = {
365
365
  "Dropdown": ["Dropdown Item State"],
366
366
  "DropdownInput": ["AppearanceBrand", "Button / State", "Color Mode", "Dropdown Item State", "Emphasis", "FormField States", "Page type", "Status"],
367
367
  "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"],
368
- "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"],
368
+ "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"],
369
369
  "FavoriteToggle": ["Color Mode", "Favorite Toggle Color", "Favorite Toggle Size"],
370
370
  "FilterBar": ["Color Mode", "InputState"],
371
371
  "FormField": ["Color Mode", "FormField States", "Status"],
372
372
  "FormUpload": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "FormField States", "Icon Capsule Size", "Page type", "Semantic Intent", "Status"],
373
- "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"],
373
+ "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"],
374
374
  "Gauge": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "FormField States", "Semantic Intent", "Status"],
375
375
  "Grid": ["Background", "Color Mode", "Context", "Grid Gap", "Padding", "Page type", "Slot gap"],
376
376
  "HelloJioInput": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Context2", "Emphasis", "Hello Jio Input Size", "Hello Jio Input State", "Page type"],
377
377
  "HeroSection": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "context 9", "context7", "Emphasis", "FormField States", "InputState", "Page type", "Status"],
378
378
  "HoldingsCard": ["AppearanceBrand", "Color Mode"],
379
379
  "HStack": ["Context", "Padding", "Page type", "Slot gap", "Stack Context"],
380
- "Icon": ["AppearanceBrand", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
380
+ "Icon": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
381
381
  "IconButton": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Page type"],
382
382
  "IconCapsule": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
383
383
  "InputSearch": ["Color Mode", "FormField States", "InputState", "Status"],
@@ -392,7 +392,7 @@ const FIGMA_COMPONENT_MODES = exports.FIGMA_COMPONENT_MODES = {
392
392
  "MediaCard": ["Contrast Context"],
393
393
  "MerchantProfile": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
394
394
  "MessageField": ["Color Mode", "FormField States"],
395
- "MetricData": ["AppearanceBrand", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
395
+ "MetricData": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
396
396
  "MetricLegendItem": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
397
397
  "MoneyValue": ["Color Mode", "Context3"],
398
398
  "MonthlyStatusGrid": ["Appearance / DataViz", "Calendar Glyph State", "Color Mode", "Emphasis / DataViz"],
@@ -401,20 +401,20 @@ const FIGMA_COMPONENT_MODES = exports.FIGMA_COMPONENT_MODES = {
401
401
  "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"],
402
402
  "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"],
403
403
  "PaymentFeedback": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
404
- "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"],
404
+ "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"],
405
405
  "PlanComparisonCard": ["Color Mode"],
406
406
  "Popup": ["Color Mode", "Context", "Padding", "Page type", "Slot gap", "Stack Context"],
407
407
  "PortfolioHero": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context3", "Context4", "Profile Card Appearance"],
408
408
  "ProductLabel": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
409
409
  "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"],
410
- "ProductOverview": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
410
+ "ProductOverview": ["Avatar Size", "Badge Size", "Color Mode", "Context", "context 10", "Context4", "Profile Card Appearance", "Text Appearance"],
411
411
  "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"],
412
412
  "ProjectionMarker": ["Color Mode", "context 10", "Profile Card Appearance"],
413
413
  "Radio": ["Color Mode"],
414
414
  "RangeTrack": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
415
415
  "Rating": ["Color Mode", "Rating Star Size", "Rating Star State"],
416
416
  "RechargeCard": ["Avatar Size", "Badge Size", "Color Mode", "Context3", "Context4"],
417
- "SavingsGoalSummary": ["Appearance / DataViz", "AppearanceBrand", "AppearanceSystem", "Color Mode", "Emphasis", "Emphasis / DataViz", "LinearProgress Size", "Semantic Intent"],
417
+ "SavingsGoalSummary": ["Appearance / DataViz", "AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Emphasis / DataViz", "LinearProgress Size", "Semantic Intent", "Text Appearance"],
418
418
  "Screen": ["Color Mode", "Page type"],
419
419
  "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"],
420
420
  "SegmentedControl": ["SegmentedControl/Segment"],
@@ -443,7 +443,7 @@ const FIGMA_COMPONENT_MODES = exports.FIGMA_COMPONENT_MODES = {
443
443
  "TransactionBubble": ["Color Mode", "context 10", "Context2", "Context3", "context5", "List Item Style", "NavArrow Direction", "Page type", "Profile Card Appearance", "Transaction Status"],
444
444
  "TransactionStatus": ["Transaction Status"],
445
445
  "UpiHandle": ["Color Mode", "context 10", "Profile Card Appearance", "UPI Handle Image"],
446
- "ValueBackMetric": ["AppearanceBrand", "Badge Size", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
446
+ "ValueBackMetric": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
447
447
  "VStack": ["Context", "Padding", "Page type", "Slot gap", "Stack Context"]
448
448
  };
449
449