jfs-components 0.1.48 → 0.1.49

package/CHANGELOG.md

@@ -4,7 +4,7 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
-## [0.1.48] - 2026-07-22
+## [0.1.48] - 2026-07-23
 
 - `CompareTable` (fixed-width scroll mode) — selection cards pin above the scroll surface (`stickyCards`, default `true`); accordion section titles stick under the cards and replace each other as you scroll (`stickyAccordionTitles`, default `true`); gray table-header sticky is now opt-in (`stickyHeaders` default `false`). Selection cards are square (corner radius forced to `0`).
 - `Accordion` — new `showHeader` / `showContent` props so hosts can split sticky titles from bodies in scroll layouts (used by `CompareTable`).

package/lib/commonjs/components/Section/Section.js

@@ -546,6 +546,7 @@ function SectionSlot({
  * @param {Object} props
  * @param {React.ReactNode} [props.navSlot] - Optional custom slot for navigation items (Figma Slot "Nav wrap")
  * @param {React.ReactNode} [props.upiSlot] - Optional custom slot for UPI handles (Figma Slot "UPI wrap")
+ * @param {boolean} [props.upi=true] - Toggles the UPI wrap (Figma boolean property "upi")
  * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
  * @param {Object} [props.style] - Optional container style overrides
  * @param {string} [props.accessibilityLabel] - Accessibility label for the section
@@ -558,6 +559,7 @@ const sectionBentoUpiRowStyle = {
 function SectionBento({
   navSlot,
   upiSlot,
+  upi = true,
   modes = _reactUtils.EMPTY_MODES,
   style,
   // Same rationale as Section: accepted on the type but unused internally.
@@ -648,7 +650,7 @@ function SectionBento({
         animateExtrasFromIndex: collapsedCount,
         animateContainerLayout: true
       } : null)
-    }), processedUpiSlot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    }), upi && processedUpiSlot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: sectionBentoUpiRowStyle,
       children: processedUpiSlot
     })]

package/lib/commonjs/design-tokens/figma-modes.generated.js

@@ -69,7 +69,7 @@ const FIGMA_MODES = exports.FIGMA_MODES = {
   "Calendar Glyph / Output": ["Default"],
   "Calendar Glyph State": ["Idle", "notSaved", "saved"],
   "Card / Output": ["Default"],
-  "Card Apperance": ["Default", "Plain"],
+  "Card Container": ["Default", "Plain"],
   "Card Feedback / Output": ["Default"],
   "Card Tab / output": ["Default"],
   "Card Tab State": ["Default", "Active"],
@@ -254,6 +254,7 @@ const FIGMA_MODES = exports.FIGMA_MODES = {
   "Slot gap": ["S", "M", "L", "XL", "XS"],
   "special button": ["Default"],
   "Spinner / Output": ["Default"],
+  "Stack Context": ["Root", "Nested"],
   "statGroup / Output": ["Default"],
   "StatItem / Output": ["Default"],
   "StatItem Label Position ": ["Top", "Bottom"],
@@ -310,7 +311,7 @@ const FIGMA_COMPONENT_MODES = exports.FIGMA_COMPONENT_MODES = {
   "Accordion": ["Accordion States"],
   "AccordionCheckbox": ["Color Mode", "context 10", "Profile Card Appearance"],
   "AccountCard": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Page type"],
-  "ActionFooter": ["Color Mode", "context5"],
+  "ActionFooter": ["Color Mode", "Context", "context5", "Slot gap"],
   "ActionTile": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
   "Additem": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
   "AllocationComparisonChart": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
@@ -328,7 +329,7 @@ const FIGMA_COMPONENT_MODES = exports.FIGMA_COMPONENT_MODES = {
   "BrandChip": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
   "BubbleChart": ["Appearance / DataViz", "Color Mode", "Context", "context 10", "Emphasis / DataViz", "Profile Card Appearance", "Text Appearance"],
   "Button": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
-  "Card": ["AppearanceBrand", "AppearanceSystem", "Border Boolean", "Card Apperance", "Color Mode", "Gap", "Page type", "Semantic Intent"],
+  "Card": ["AppearanceBrand", "AppearanceSystem", "Card Container", "Color Mode", "Gap", "Page type", "Semantic Intent"],
   "CardAdvisory": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "circularProgressBar Size", "Color Mode", "Context", "context 10", "Emphasis", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
   "CardBankAccount": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Context4", "context5", "Emphasis", "List Item Style", "Page type", "Profile Card Appearance", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
   "CardCTA": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "context 8", "Context4", "Emphasis", "Icon Capsule Size", "MediaBlock", "Page type", "Profile Card Appearance", "Semantic Intent"],
@@ -347,7 +348,7 @@ const FIGMA_COMPONENT_MODES = exports.FIGMA_COMPONENT_MODES = {
   "CircularProgressBar": ["AppearanceBrand", "AppearanceSystem", "circularProgressBar Size", "Color Mode", "Emphasis", "Semantic Intent"],
   "CircularRating": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
   "ClusterBubble": ["Appearance / DataViz", "Color Mode", "Context", "context 10", "Emphasis / DataViz", "Profile Card Appearance", "Text Appearance"],
-  "CompareTable": ["Accordion States", "AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Page type", "Radius", "Selection Card Radius"],
+  "CompareTable": ["Accordion States", "AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Page type", "Radius"],
   "ComparisonBar": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "Icon Capsule Size", "Page type", "Profile Card Appearance", "Radius", "Semantic Intent"],
   "ContentSheet": ["Color Mode", "Page type"],
   "CoverageBarComparison": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
@@ -372,7 +373,7 @@ const FIGMA_COMPONENT_MODES = exports.FIGMA_COMPONENT_MODES = {
   "HelloJioInput": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Hello Jio Input Size", "Hello Jio Input State", "Page type"],
   "HeroSection": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "context 9", "context7", "Emphasis", "FormField States", "InputState", "Page type", "Status"],
   "HoldingsCard": ["AppearanceBrand", "Color Mode"],
-  "HStack": ["Context", "Padding", "Page type", "Slot gap"],
+  "HStack": ["Context", "Padding", "Page type", "Slot gap", "Stack Context"],
   "Icon": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
   "IconButton": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Page type"],
   "IconCapsule": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
@@ -399,7 +400,7 @@ const FIGMA_COMPONENT_MODES = exports.FIGMA_COMPONENT_MODES = {
   "PaymentFeedback": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
   "PdpCcCard": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "context7", "Emphasis", "Page type", "Profile Card Appearance", "Radius", "Semantic Intent"],
   "PlanComparisonCard": ["Color Mode"],
-  "Popup": ["Color Mode", "Context", "Padding", "Page type", "Slot gap"],
+  "Popup": ["Color Mode", "Context", "Padding", "Page type", "Slot gap", "Stack Context"],
   "PortfolioHero": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context3", "Context4", "Profile Card Appearance"],
   "ProductLabel": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
   "ProductMerchandisingCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
@@ -440,7 +441,7 @@ const FIGMA_COMPONENT_MODES = exports.FIGMA_COMPONENT_MODES = {
   "TransactionStatus": ["Transaction Status"],
   "UpiHandle": ["Color Mode", "context 10", "Profile Card Appearance", "UPI Handle Image"],
   "ValueBackMetric": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
-  "VStack": ["Context", "Padding", "Page type", "Slot gap"]
+  "VStack": ["Context", "Padding", "Page type", "Slot gap", "Stack Context"]
 };
 
 /**