jfs-components 0.1.55 → 0.1.57

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 (25) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/lib/commonjs/components/ButtonGroup/ButtonGroup.js +16 -26
  3. package/lib/commonjs/components/CardCTA/CardCTA.js +35 -12
  4. package/lib/commonjs/components/Carousel/Carousel.js +73 -12
  5. package/lib/commonjs/design-tokens/figma-modes.generated.js +10 -9
  6. package/lib/commonjs/icons/registry.js +1 -1
  7. package/lib/commonjs/utils/react-utils.js +4 -1
  8. package/lib/module/components/ButtonGroup/ButtonGroup.js +17 -27
  9. package/lib/module/components/CardCTA/CardCTA.js +35 -12
  10. package/lib/module/components/Carousel/Carousel.js +74 -13
  11. package/lib/module/design-tokens/figma-modes.generated.js +10 -9
  12. package/lib/module/icons/registry.js +1 -1
  13. package/lib/module/utils/react-utils.js +4 -1
  14. package/lib/typescript/src/components/ButtonGroup/ButtonGroup.d.ts +5 -5
  15. package/lib/typescript/src/components/CardCTA/CardCTA.d.ts +14 -1
  16. package/lib/typescript/src/components/Carousel/Carousel.d.ts +30 -2
  17. package/lib/typescript/src/design-tokens/figma-modes.generated.d.ts +1 -0
  18. package/lib/typescript/src/icons/registry.d.ts +1 -1
  19. package/package.json +1 -1
  20. package/src/components/ButtonGroup/ButtonGroup.tsx +22 -24
  21. package/src/components/CardCTA/CardCTA.tsx +65 -20
  22. package/src/components/Carousel/Carousel.tsx +125 -11
  23. package/src/design-tokens/figma-modes.generated.ts +10 -9
  24. package/src/icons/registry.ts +1 -1
  25. package/src/utils/react-utils.ts +8 -1
package/src/design-tokens/figma-modes.generated.ts CHANGED
@@ -196,6 +196,7 @@ export const FIGMA_MODES = {
196
196
  "NavArrow Direction": ["Left&Right", "Top&Bottom"],
197
197
  "NoteInput / Output": ["Default"],
198
198
  "Nudge / Output": ["Default"],
199
+ "Nudge Border Radius ": ["Default", "Pill"],
199
200
  "Nudge padding": ["Default", "None"],
200
201
  "number pagination": ["Default"],
201
202
  "Numpad / Output": ["Default"],
@@ -320,19 +321,19 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
320
321
  "AvatarGroup": ["Avatar Size", "Badge Size", "Context4"],
321
322
  "Badge": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "Emphasis", "Semantic Intent"],
322
323
  "Balance": ["Color Mode", "Context3"],
323
- "BenefitCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap", "Text Appearance", "Text Sizes", "Weight"],
324
+ "BenefitCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Nudge Border Radius ", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap", "Text Appearance", "Text Sizes", "Weight"],
324
325
  "BottomNav": ["Color Mode"],
325
326
  "BottomNavItem": ["BottomNavItem / State", "Color Mode"],
326
327
  "BrandChip": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
327
328
  "BubbleChart": ["Appearance / DataViz", "Color Mode", "Context", "context 10", "Emphasis / DataViz", "Profile Card Appearance", "Text Appearance"],
328
329
  "Button": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
329
330
  "Card": ["AppearanceBrand", "AppearanceSystem", "Card Container", "Color Mode", "context 8", "Gap", "Page type", "Semantic Intent"],
330
- "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"],
331
+ "CardAdvisory": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "circularProgressBar Size", "Color Mode", "Context", "context 10", "Emphasis", "Nudge Border Radius ", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
331
332
  "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"],
332
333
  "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"],
333
334
  "CardFeedback": ["AppearanceBrand", "AppearanceSystem", "Color Mode"],
334
- "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"],
335
- "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"],
335
+ "CardFinancialCondition": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "circularProgressBar Size", "Color Mode", "Context", "context 10", "Emphasis", "Nudge Border Radius ", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
336
+ "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 Border Radius ", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap", "Text Appearance"],
336
337
  "CardProviderInfo": ["AppearanceBrand", "Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
337
338
  "Carousel": ["peekOffset"],
338
339
  "CarouselCardAccounts": ["peekOffset"],
@@ -343,7 +344,7 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
343
344
  "CheckboxItem": ["Color Mode", "Context", "Slot gap"],
344
345
  "ChipSelect": ["ChipSelect State", "Color Mode"],
345
346
  "CircularProgressBar": ["AppearanceBrand", "AppearanceSystem", "circularProgressBar Size", "Color Mode", "Emphasis", "Semantic Intent"],
346
- "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"],
347
+ "CircularRating": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Emphasis", "Nudge Border Radius ", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
347
348
  "ClusterBubble": ["Appearance / DataViz", "Color Mode", "Context", "context 10", "Emphasis / DataViz", "Profile Card Appearance", "Text Appearance"],
348
349
  "CompareTable": ["Accordion States", "AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Page type", "Radius"],
349
350
  "ComparisonBar": ["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", "Radius", "Semantic Intent"],
@@ -371,7 +372,7 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
371
372
  "HeroSection": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "context 9", "context7", "Emphasis", "FormField States", "InputState", "Page type", "Status"],
372
373
  "HoldingsCard": ["AppearanceBrand", "Color Mode"],
373
374
  "HStack": ["Context", "Padding", "Page type", "Slot gap", "Stack Context"],
374
- "Icon": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
375
+ "Icon": ["AppearanceBrand", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
375
376
  "IconButton": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Page type"],
376
377
  "IconCapsule": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
377
378
  "InputSearch": ["Color Mode", "FormField States", "InputState", "Status"],
@@ -386,12 +387,12 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
386
387
  "MediaCard": ["Contrast Context"],
387
388
  "MerchantProfile": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
388
389
  "MessageField": ["Color Mode", "FormField States"],
389
- "MetricData": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
390
+ "MetricData": ["AppearanceBrand", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
390
391
  "MetricLegendItem": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
391
392
  "MoneyValue": ["Color Mode", "Context3"],
392
393
  "MonthlyStatusGrid": ["Appearance / DataViz", "Calendar Glyph State", "Color Mode", "Emphasis / DataViz"],
393
394
  "NavArrow": ["Color Mode", "context 10", "Context2", "context5", "List Item Style", "NavArrow Direction", "Page type", "Profile Card Appearance"],
394
- "Nudge": ["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"],
395
+ "Nudge": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Emphasis", "Nudge Border Radius ", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
395
396
  "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"],
396
397
  "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"],
397
398
  "PaymentFeedback": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
@@ -437,7 +438,7 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
437
438
  "TransactionBubble": ["Color Mode", "context 10", "Context2", "Context3", "context5", "List Item Style", "NavArrow Direction", "Page type", "Profile Card Appearance", "Transaction Status"],
438
439
  "TransactionStatus": ["Transaction Status"],
439
440
  "UpiHandle": ["Color Mode", "context 10", "Profile Card Appearance", "UPI Handle Image"],
440
- "ValueBackMetric": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
441
+ "ValueBackMetric": ["AppearanceBrand", "Badge Size", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
441
442
  "VStack": ["Context", "Padding", "Page type", "Slot gap", "Stack Context"],
442
443
  };
443
444
 
package/src/icons/registry.ts CHANGED
@@ -4,7 +4,7 @@
4
4
  * Auto-generated from SVG files in src/icons/
5
5
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
6
6
  *
7
- * Generated: 2026-07-27T16:45:55.755Z
7
+ * Generated: 2026-07-27T20:45:13.986Z
8
8
  */
9
9
 
10
10
  // Icon name to SVG data mapping
package/src/utils/react-utils.ts CHANGED
@@ -67,8 +67,15 @@ export function cloneChildrenWithModes(
67
67
 
68
68
  let processedChildren: React.ReactNode | React.ReactNode[] | undefined
69
69
  if (hasChildren) {
70
+ // Descendants inherit this child's merged modes, not the ancestor's
71
+ // raw modes — so nested containers (e.g. ButtonGroup Neutral inside
72
+ // a CardCTA slot that injects Secondary) can cascade correctly.
70
73
  const childArray = React.Children.toArray(childChildren)
71
- const processed = cloneChildrenWithModes(childArray, modes, forcedModes)
74
+ const processed = cloneChildrenWithModes(
75
+ childArray,
76
+ mergedModes,
77
+ forcedModes,
78
+ )
72
79
  processedChildren = processed.length === 1 ? processed[0] : processed
73
80
  }
74
81