jfs-components 0.1.0 → 0.1.8

package/src/design-tokens/JFSThemeProvider.tsx

@@ -1,6 +1,7 @@
 
 import React, { createContext, useContext, ReactNode, useMemo } from 'react';
 import { getVariableByName } from './figma-variables-resolver';
+import type { Modes } from './figma-modes.generated'
 
 /**
  * Shape of the TokenContext
@@ -10,7 +11,7 @@ interface TokenContextType {
      * Current active modes map
      * @example { 'Color Mode': 'Dark', 'Platform': 'mobile' }
      */
-    modes: Record<string, any>;
+    modes: Modes;
     /**
      * Helper to resolve variable by name using the current context modes.
      */
@@ -24,7 +25,7 @@ interface JFSThemeProviderProps {
      * Modes to apply globally.
      * Can be used to set 'Color Mode', 'Platform', 'Density', etc.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     children: ReactNode;
 }
 
@@ -61,7 +62,7 @@ export const JFSThemeProvider: React.FC<JFSThemeProviderProps> = ({
  * Hook to access the current design token context.
  *
  * returns {
- *   modes: Record<string, any> - The current active modes
+ *   modes: Modes - The current active modes
  *   getVariable: (name: string) => any - Function to resolve a token value
  * }
  */

package/src/design-tokens/figma-modes.generated.ts

@@ -0,0 +1,425 @@
+/* eslint-disable */
+// -----------------------------------------------------------------------------
+// AUTO-GENERATED — DO NOT EDIT BY HAND.
+//
+// Regenerate with:  node scripts/generate-mode-types.js
+//
+// Source of truth: src/design-tokens/Coin Variables-variables-full.json
+//
+// This file turns the Figma "collection -> modes" data into TypeScript so that
+// the `modes` prop accepts ENUM-like, auto-completing values for BOTH the
+// collection-name keys and the mode-name values — instead of raw strings.
+//
+// NOTE: mode/collection names are reproduced EXACTLY as they exist in Figma,
+// including any typos (e.g. "Defult"). They MUST match the runtime resolver, so
+// do not "fix" them here — fix them in Figma and re-export the JSON.
+// -----------------------------------------------------------------------------
+
+/**
+ * Every design-token collection and its available modes, keyed by the exact
+ * collection name used by the resolver and the `modes` prop.
+ */
+export const FIGMA_MODES = {
+  "Accordion / Output": ["Default"],
+  "Accordion States": ["Idle", "Hover", "Open", "Open Hover", "Disabled"],
+  "AccordionCheckbox / Output": ["Default"],
+  "AccordionGroup / Output": ["Default"],
+  "AccountCard / Output": ["Default"],
+  "Action": ["True", "False"],
+  "ActionFooter / Output": ["Default"],
+  "ActionNumpad / Output": ["Default"],
+  "ActionTile / Output": ["Default"],
+  "Allocation Comparison Chart / Output": ["Default"],
+  "AmountInput / Output": ["Default"],
+  "AppBar.MainPage / Output": ["Default"],
+  "AppBar.SubPage/ Output": ["Default"],
+  "Appearance / DataViz": ["Primary", "Secondary", "Tertiary", "Quaternary", "Quinary", "Senary", "Neutral"],
+  "AppearanceBrand": ["Primary", "Secondary", "Neutral", "Tertiary"],
+  "AppearanceSystem": ["positive", "warning", "negative"],
+  "Attached / Output": ["Default"],
+  "Avatar / Output": ["Default"],
+  "Avatar Group / Output": ["Default"],
+  "Avatar Size": ["L", "M", "S", "XS"],
+  "Avatar Type": ["Avatar", "Icon", "Text"],
+  "Axis / Output": ["Default"],
+  "Background": ["False", "True"],
+  "Badge / Output": ["Default"],
+  "Badge Size": ["Medium", "Small"],
+  "Balance / Output": ["Default"],
+  "BankAccountCard / Output": ["Default"],
+  "Benefit Card": ["Default"],
+  "Blur": ["Default"],
+  "bottomNav / Output": ["Default"],
+  "BottomNavItem / Output": ["Default"],
+  "BottomNavItem / State": ["Idle", "Active"],
+  "Brand": ["Jio Finance"],
+  "Brand Chip / Output": ["Default"],
+  "Button / Output": ["Default"],
+  "Button / Size": ["M", "S", "XS"],
+  "Button / State": ["Idle", "Hover", "Pressed", "Disabled"],
+  "ButtonGroup / Output": ["Default"],
+  "Calendar Glyph / Output": ["Default"],
+  "Calendar Glyph State": ["Idle", "notSaved", "saved"],
+  "Card / Output": ["Default"],
+  "Card Feedback / Output": ["Default"],
+  "Card.Media": ["Default"],
+  "Card/CTA / Output": ["Default"],
+  "Card/Insight": ["Mode 1"],
+  "Card/ProviderInfo / Output": ["Default"],
+  "CardAdvisory / Output": ["Default"],
+  "cardsShared": ["Default"],
+  "Carousel / Output": ["Default"],
+  "CarouselCardAccounts / Output": ["Default"],
+  "ccCard / Output": ["Default"],
+  "checkbox / Output": ["Default"],
+  "Checkbox / Output": ["Default"],
+  "Checkbox states": ["Idle", "Hover", "Focus", "Focus Selected", "Selected Hover", "Disabled/Active", "Disabled", "Selected"],
+  "CheckboxGroup / Output": ["Default"],
+  "CheckboxItem / Output": ["Default"],
+  "Chip / Output": ["Default"],
+  "Chip lineHeight": ["Default"],
+  "ChipGroup / Output": ["Default"],
+  "ChipSelect / Output": ["Default"],
+  "ChipSelect State": ["Idle", "Active"],
+  "Circular Progress Bar / Doted": ["Default"],
+  "Circular Rating / Output": ["Defult"],
+  "circularProgressBar / Output": ["Default"],
+  "circularProgressBar Size": ["S", "M"],
+  "clusterBubble / Output": ["Default"],
+  "coincard": ["Mode 1"],
+  "Color Mode": ["Light", "Dark"],
+  "comparetablecell": ["Mode 1"],
+  "comparetableheader": ["Mode 1"],
+  "Comparison Floating card": ["Default"],
+  "ComparisonCardItem": ["Default"],
+  "Confidence": ["High", "Medium", "Low", "None"],
+  "ContentSheet / Output": ["Default"],
+  "Context": ["Default", "Nudge&Alert", "CTACard", "ListItem"],
+  "Context2": ["Default", "AppBar"],
+  "Context3": ["Default", "Transaction Bubble", "Balance & Cards", "Amount Input"],
+  "Context4": ["Default", "Chip", "Button"],
+  "context5": ["Default", "Fullscreen Modal"],
+  "context7": ["Default", "Card"],
+  "Contrast Context": ["on dark", "on light"],
+  "Conversation Feed / Output": ["Default"],
+  "Counter Badge / Output": ["Mode 1"],
+  "Coverage Bar Comparison / Output": ["Default"],
+  "CoverageRing / Output": ["Mode 1"],
+  "CTACard / Output": ["Default"],
+  "DataViz / Output": ["Default"],
+  "DebitCard / Output": ["Default"],
+  "DebitCard brand": ["JFS", "SBI"],
+  "DebitCardStack / Output": ["Default"],
+  "DetailItem / Output": ["Default"],
+  "Disclaimer / Output": ["Default"],
+  "Divider / Output": ["Default"],
+  "Donut Chart / Output": ["Default"],
+  "Drawer / Output": ["Default"],
+  "Dropdown / Output": ["Default"],
+  "Dropdown Item / Output": ["Default"],
+  "Dropdown Item State": ["Idle", "Selected"],
+  "Emphasis": ["High", "Medium", "Low"],
+  "Emphasis / DataViz": ["High", "Medium", "Low"],
+  "EmptyState / Output": ["Default"],
+  "ExpandableCheckbox / Output": ["Default"],
+  "Feedback / Output": ["Default"],
+  "filterBar / Output": ["Default"],
+  "FinancialConditionCard / Output": ["Default"],
+  "Form / Output": ["Default"],
+  "FormField / Output": ["Default"],
+  "FormField States": ["Idle", "Active", "Read Only", "Error", "Disabled"],
+  "FullScreenModal": ["Default"],
+  "Gap": ["S", "M", "L", "None"],
+  "Gauge / Output": ["Default"],
+  "Handle Boolean": ["False", "True"],
+  "Heading / Output": ["Default"],
+  "Heading text": ["Default", "Slot"],
+  "Holdings card / Output": ["Default"],
+  "HStack / Output": ["Default"],
+  "Icon / Output": ["Default"],
+  "Icon Button / Output": ["Default"],
+  "Icon Capsule / Output": ["Default"],
+  "Icon Capsule Size": ["M", "L", "S", "XS"],
+  "Image / Output": ["Default"],
+  "Input / Output": ["Default"],
+  "Input/PINSlot  States": ["Idle", "Active", "Error"],
+  "Input/PINSlot / Output": ["Default"],
+  "InputField / Output": ["Default"],
+  "InputState": ["Idle", "Active"],
+  "Institution Badge / Output": ["Default"],
+  "isActive": ["False", "True"],
+  "lazyList / Output": ["Default"],
+  "LinearMeter / Output": ["Default"],
+  "LinearProgress / Output": ["Default"],
+  "LinearProgress Size": ["M", "L"],
+  "Link / Output": ["Default"],
+  "List Item / Output": ["Default"],
+  "List Item Style": ["Default", "Boxed", "Minimal"],
+  "listGroup / Output": ["Default"],
+  "ListItem State": ["Idle", "Active"],
+  "LottieIntroBlock / Output": ["Default"],
+  "Media / Output": ["L", "M", "S"],
+  "MediaBlock": ["IconCapsule", "Image"],
+  "MerchantProfile / Output": ["Default"],
+  "Message Direction": ["Incoming (Left)", "Outgoing (Right)"],
+  "Message Row / Output": ["Default"],
+  "MessageField / Output": ["Default"],
+  "metricdata": ["Mode 1"],
+  "MetricLegendItem / Output": ["Default"],
+  "Money Value / Output": ["Default"],
+  "MonthlyStatusGrid / Output": ["Default"],
+  "Multipliers": ["Idle"],
+  "NavArrow": ["Default"],
+  "NavArrow / Output": ["Default"],
+  "NavArrow Direction": ["Left&Right", "Top&Bottom"],
+  "NoteInput / Output": ["Default"],
+  "Nudge / Output": ["Default"],
+  "Nudge padding": ["Default", "None"],
+  "Numpad / Output": ["Default"],
+  "OTP / Output": ["Mode 1"],
+  "Overlay / Output": ["Mode 1"],
+  "Padding": ["Default", "None"],
+  "Page type": ["MainPage", "SubPage", "JioPlus"],
+  "PageHero / Output": ["Default"],
+  "PaymnetFeedback / Output": ["Default"],
+  "PDP cc card": ["Mode 1"],
+  "peekOffset": ["Medium", "Small", "Large", "None"],
+  "Placement": ["Prefix", "Suffix"],
+  "PlanComparisonCard / Output": ["Default"],
+  "Popup / Output": ["Default"],
+  "PortfolioHero / Output": ["Default"],
+  "PoweredByLabel": ["Default"],
+  "Product Merchandising card": ["Mode 1"],
+  "ProductLabel / Output": ["Default"],
+  "ProductOverview / Output": ["Default"],
+  "ProgressBadge / Output": ["Default"],
+  "ProjectionMarker": ["Mode 1"],
+  "QR code / Output": ["Idle"],
+  "Radio / Output": ["Default"],
+  "Radius": ["S", "M", "L", "None"],
+  "RangeTrack / Output": ["Default"],
+  "RechargeCard / Output": ["Default"],
+  "rotfl": ["Default"],
+  "SavingsGoalSummary / Output": ["Default"],
+  "Screen / Output": ["Default"],
+  "SearchFilterBar / Output": ["Default"],
+  "Section / Output": ["Defult"],
+  "SectionBentoGrid / Output": ["Default"],
+  "Segment Indicator / Output": ["Default"],
+  "SegmentedControl / Output": ["Default"],
+  "SegmentedControl/Segment": ["Idle", "Active"],
+  "SegmentedControl/Segment / Output": ["Default"],
+  "SegmentedTrack / Output": ["Default"],
+  "Selectable": ["False", "True"],
+  "selectioncard": ["Mode 1"],
+  "Semantic Intent": ["Brand", "System"],
+  "Skeleton": ["Mode 1"],
+  "Slider / Output": ["Default"],
+  "Slot gap": ["S", "M", "L", "XL"],
+  "special button": ["Default"],
+  "Spinner / Output": ["Default"],
+  "statGroup / Output": ["Default"],
+  "StatItem / Output": ["Default"],
+  "StatItem Label Position ": ["Top", "Bottom"],
+  "Status": ["Auto", "Warning", "Error", "Success", "Loading", "Neutral"],
+  "StatusHero / Output": ["Default"],
+  "Step Indicator / Output": ["Default"],
+  "Step Status": ["active", "inactive", "complete", "error", "warning"],
+  "Steper Item / Output": ["Default"],
+  "Stepper / Output": ["Default"],
+  "StrengthIndicator / Output": ["Default"],
+  "Sufix": ["False", "True"],
+  "SummaryTile / Output": ["Default"],
+  "SupportText / Output": ["Default"],
+  "Swappable subComponent / Output": ["Default"],
+  "SwappableAmount / Output": ["Default"],
+  "tabItem / Output": ["Default"],
+  "Tabs / Output": ["Default"],
+  "TestimonialsCard": ["Default"],
+  "Text / Output": ["Default"],
+  "Text Appearance": ["Neutral", "Primary", "Secondary", "Tertiary"],
+  "Text Sizes": ["Medium", "Small"],
+  "textInput / Output": ["Default"],
+  "TextSegment / Output": ["Default"],
+  "Thread Hero / Output": ["Default"],
+  "Title / Output": ["Default"],
+  "Title Level": ["Default", "Bold"],
+  "Toggle / Output": ["Default"],
+  "Toggle States": ["Off", "On", "Disabled Off", "Disabled On"],
+  "ToggleIconButton / Output": ["Default"],
+  "Tooltip": ["True", "False"],
+  "tooltip / Output": ["Default"],
+  "Tost Output": ["Default"],
+  "Transaction Status": ["Request", "Paid", "Declined", "Expired"],
+  "Transaction Status / Output": ["Default"],
+  "TransactionBubble / Output": ["Default"],
+  "TransationDetails / Output": ["Default"],
+  "UPI Handle / Output": ["Default"],
+  "ValueBar / Output": ["Default"],
+  "VStack / Output": ["Default"],
+  "Weight": ["Medium", "Regular", "Bold"],
+} as const;
+
+/**
+ * Multi-mode collections each component actually uses (derived from the token
+ * tracing in `.token-metadata.json`). Drives the per-component Storybook mode
+ * select controls. Empty until `extract-component-tokens.js` has run.
+ */
+export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
+  "Accordion": ["Accordion States"],
+  "AccordionCheckbox": ["Color Mode"],
+  "AccountCard": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis"],
+  "ActionFooter": ["Color Mode", "context5"],
+  "ActionTile": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Semantic Intent"],
+  "AllocationComparisonChart": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
+  "AmountInput": ["Color Mode", "Context3"],
+  "AppBar": ["Color Mode", "Context2", "context5", "NavArrow Direction", "Page type"],
+  "AreaLineChart": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
+  "Attached": ["Color Mode"],
+  "Avatar": ["Avatar Size", "Color Mode", "Context4"],
+  "AvatarGroup": ["Avatar Size", "Context4"],
+  "Badge": ["AppearanceBrand", "Badge Size", "Color Mode", "Emphasis"],
+  "Balance": ["Color Mode", "Context3"],
+  "BenefitCard": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "Context2", "context5", "Emphasis", "List Item Style", "NavArrow Direction", "Page type", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
+  "BottomNav": ["Color Mode"],
+  "BottomNavItem": ["BottomNavItem / State", "Color Mode"],
+  "BrandChip": ["Avatar Size", "Color Mode", "Context4"],
+  "BubbleChart": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz", "Text Appearance"],
+  "Button": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "Emphasis", "Semantic Intent"],
+  "Card": ["Color Mode", "Gap", "Page type"],
+  "CardAdvisory": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "circularProgressBar Size", "Color Mode", "Context", "Emphasis", "Nudge padding", "Semantic Intent", "Slot gap"],
+  "CardBankAccount": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "Context4", "context5", "Emphasis", "List Item Style", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
+  "CardCTA": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "MediaBlock", "Semantic Intent"],
+  "CardFeedback": ["AppearanceBrand", "AppearanceSystem", "Color Mode"],
+  "CardFinancialCondition": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "circularProgressBar Size", "Color Mode", "Context", "Emphasis", "Nudge padding", "Semantic Intent", "Slot gap"],
+  "CardInsight": ["Appearance / DataViz", "AppearanceBrand", "AppearanceSystem", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "context7", "Emphasis", "Emphasis / DataViz", "LinearProgress Size", "Nudge padding", "Page type", "Semantic Intent", "Slot gap"],
+  "CardProviderInfo": ["AppearanceBrand", "Avatar Size", "Color Mode", "Context4"],
+  "Carousel": ["peekOffset"],
+  "CcCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "Context2", "Context4", "context5", "context7", "Emphasis", "List Item Style", "NavArrow Direction", "Page type", "Radius", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
+  "Checkbox": ["Color Mode"],
+  "CheckboxGroup": ["Color Mode"],
+  "CheckboxItem": ["Color Mode"],
+  "ChipSelect": ["ChipSelect State", "Color Mode"],
+  "CircularProgressBar": ["AppearanceBrand", "AppearanceSystem", "circularProgressBar Size", "Color Mode", "Emphasis", "Semantic Intent"],
+  "CircularRating": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "Emphasis", "Nudge padding", "Semantic Intent", "Slot gap"],
+  "ClusterBubble": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz", "Text Appearance"],
+  "CompareTable": ["Accordion States", "AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Radius"],
+  "ComparisonBar": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Radius", "Semantic Intent"],
+  "CoverageBarComparison": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
+  "CoverageRing": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "circularProgressBar Size", "Color Mode", "Context", "Emphasis", "Semantic Intent"],
+  "DebitCard": ["DebitCard brand"],
+  "Disclaimer": ["Color Mode", "context5"],
+  "Divider": ["Color Mode"],
+  "DonutChart": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
+  "DonutChartSummary": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
+  "Drawer": ["Color Mode", "Page type"],
+  "Dropdown": ["Dropdown Item State"],
+  "DropdownInput": ["AppearanceBrand", "Button / State", "Color Mode", "Dropdown Item State", "Emphasis", "FormField States", "Status"],
+  "EmptyState": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Semantic Intent"],
+  "ExpandableCheckbox": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "Emphasis", "Semantic Intent"],
+  "FilterBar": ["Color Mode", "InputState"],
+  "FormField": ["Color Mode", "FormField States", "Status"],
+  "FullscreenModal": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context5", "Emphasis", "Semantic Intent", "Slot gap"],
+  "Gauge": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "FormField States", "Semantic Intent", "Status"],
+  "HoldingsCard": ["AppearanceBrand", "Color Mode"],
+  "HStack": ["Context", "Padding", "Page type", "Slot gap"],
+  "Icon": ["AppearanceBrand", "Color Mode"],
+  "IconButton": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis"],
+  "IconCapsule": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Semantic Intent"],
+  "InputSearch": ["Color Mode", "FormField States", "InputState", "Status"],
+  "InstitutionBadge": ["Avatar Size", "Context4"],
+  "LinearMeter": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context3", "Emphasis", "LinearProgress Size", "Semantic Intent"],
+  "LinearProgress": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Emphasis", "LinearProgress Size", "Semantic Intent"],
+  "ListGroup": ["Color Mode", "List Item Style", "Title Level"],
+  "ListItem": ["AppearanceBrand", "Color Mode", "Context2", "context5", "List Item Style", "NavArrow Direction", "Page type"],
+  "LottieIntroBlock": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "Emphasis", "Semantic Intent"],
+  "LottiePlayer": ["Media / Output"],
+  "MediaCard": ["Contrast Context"],
+  "MerchantProfile": ["Avatar Size", "Color Mode", "Context4"],
+  "MessageField": ["Color Mode", "FormField States"],
+  "MetricLegendItem": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
+  "MoneyValue": ["Color Mode", "Context3"],
+  "MonthlyStatusGrid": ["Appearance / DataViz", "Calendar Glyph State", "Color Mode", "Emphasis / DataViz"],
+  "NavArrow": ["Color Mode", "Context2", "context5", "NavArrow Direction", "Page type"],
+  "Nudge": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "Emphasis", "Nudge padding", "Semantic Intent", "Slot gap"],
+  "OTP": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "Emphasis", "FormField States", "Input/PINSlot  States", "Semantic Intent", "Status"],
+  "PageHero": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "Emphasis", "Media / Output", "Semantic Intent"],
+  "PaymentFeedback": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Semantic Intent"],
+  "PdpCcCard": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context7", "Emphasis", "Page type", "Radius", "Semantic Intent"],
+  "PlanComparisonCard": ["Color Mode"],
+  "Popup": ["Color Mode", "Context", "Padding", "Page type", "Slot gap"],
+  "PortfolioHero": ["Avatar Size", "Color Mode", "Context3", "Context4"],
+  "ProductLabel": ["Avatar Size", "Color Mode", "Context4"],
+  "ProductMerchandisingCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "Context4", "Emphasis", "Semantic Intent"],
+  "ProductOverview": ["Avatar Size", "Color Mode", "Context4"],
+  "ProjectionMarker": ["Color Mode"],
+  "Radio": ["Color Mode"],
+  "RangeTrack": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
+  "RechargeCard": ["Avatar Size", "Color Mode", "Context3", "Context4"],
+  "SavingsGoalSummary": ["Appearance / DataViz", "AppearanceBrand", "AppearanceSystem", "Color Mode", "context7", "Emphasis", "Emphasis / DataViz", "LinearProgress Size", "Page type", "Semantic Intent"],
+  "Screen": ["Color Mode", "Page type"],
+  "Section": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Context2", "context5", "Emphasis", "Icon Capsule Size", "List Item Style", "NavArrow Direction", "Padding", "Page type", "Semantic Intent", "Slot gap"],
+  "SegmentedControl": ["SegmentedControl/Segment"],
+  "SegmentedTrack": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
+  "Slider": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Emphasis", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
+  "Slot": ["Context", "Slot gap"],
+  "StatGroup": ["Color Mode", "StatItem Label Position "],
+  "StatItem": ["StatItem Label Position "],
+  "StatusHero": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Context3", "Emphasis", "Icon Capsule Size", "Semantic Intent"],
+  "Step": ["Color Mode", "Step Status"],
+  "StepLabel": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Emphasis", "Semantic Intent"],
+  "SuggestiveSearch": ["Color Mode", "Dropdown Item State", "FormField States", "Status"],
+  "SummaryTile": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "Context2", "context5", "Emphasis", "NavArrow Direction", "Page type", "Semantic Intent"],
+  "SupportText": ["Color Mode", "FormField States", "Status"],
+  "SupportTextIcon": ["Color Mode", "FormField States", "Status"],
+  "SwappableAmount": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "Emphasis", "Semantic Intent"],
+  "TabItem": ["Color Mode"],
+  "TestimonialsCard": ["Avatar Size", "Color Mode", "Context4"],
+  "Text": ["Color Mode", "Text Appearance", "Text Sizes", "Weight"],
+  "TextInput": ["Color Mode", "InputState"],
+  "TextSegment": ["Color Mode", "Text Appearance", "Text Sizes", "Weight"],
+  "Title": ["Color Mode", "context7", "Page type"],
+  "Toggle": ["Color Mode", "Toggle States"],
+  "Tooltip": ["Color Mode"],
+  "TransactionBubble": ["Color Mode", "Context2", "Context3", "context5", "NavArrow Direction", "Page type", "Transaction Status"],
+  "TransactionStatus": ["Transaction Status"],
+  "UpiHandle": ["Color Mode"],
+  "VStack": ["Context", "Padding", "Page type", "Slot gap"],
+};
+
+/**
+ * Allow the known literal values to drive autocomplete while still accepting any
+ * `string` — this keeps the typing fully backward compatible with dynamically
+ * computed / forced mode values.
+ */
+type LiteralUnion<T extends string> = T | (string & {});
+
+/** Union of every valid collection name (the keys of a `modes` object). */
+export type CollectionName = keyof typeof FIGMA_MODES;
+
+/** Valid mode names for a given collection. */
+export type ModeOf<C extends CollectionName> = (typeof FIGMA_MODES)[C][number];
+
+/**
+ * The typed `modes` prop. Known collection-name keys and their mode values
+ * drive autocomplete, while an index signature (plus `boolean`/`number` values)
+ * keeps it fully backward compatible with dynamically-built, forced, or legacy
+ * `modes` objects — nothing that compiled before starts failing.
+ *
+ * @example
+ * const modes: Modes = { 'Color Mode': 'Dark', 'Page type': 'JioPlus' }
+ */
+export type Modes = {
+  [K in CollectionName]?: LiteralUnion<ModeOf<K>> | boolean | number;
+} & {
+  [collection: string]: string | boolean | number | undefined;
+};
+
+/**
+ * Strict variant: only real collection-name keys and exact mode values are
+ * allowed (no `string` escape hatch, no unknown keys). Opt in when you want
+ * typos in mode keys/values to be a compile error.
+ */
+export type StrictModes = {
+  [K in CollectionName]?: ModeOf<K>;
+};

package/src/design-tokens/index.ts

@@ -1,2 +1,3 @@
 export * from './figma-variables-resolver';
 export * from './JFSThemeProvider';
+export * from './figma-modes.generated';

package/src/icons/registry.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-06-09T13:55:40.250Z
+ * Generated: 2026-06-12T12:48:07.304Z
  */
 
 // Icon name to SVG data mapping

package/src/skeleton/Skeleton.tsx

@@ -27,6 +27,7 @@ import {
   type SkeletonKind,
 } from './shimmer-tokens'
 import { useSkeleton, useStaggerIndex } from './SkeletonGroup'
+import type { Modes } from '../design-tokens'
 
 export interface SkeletonProps {
   /**
@@ -48,7 +49,7 @@ export interface SkeletonProps {
    * Modes for token resolution (forwarded to `getVariableByName`). Most
    * consumers can omit this — defaults work for every standard mode.
    */
-  modes?: Record<string, any>;
+  modes?: Modes;
 }
 
 // Solid-white overlay used by reduced-motion mode (also acts as the safe

package/src/utils/react-utils.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { Modes } from '../design-tokens'
 
 /**
  * A shared, frozen empty modes object.
@@ -22,8 +23,8 @@ export const EMPTY_MODES: Readonly<Record<string, any>> = Object.freeze({});
  */
 export function cloneChildrenWithModes(
     children: React.ReactNode,
-    modes: Record<string, any>,
-    forcedModes?: Record<string, any>
+    modes: Modes,
+    forcedModes?: Modes
 ): React.ReactNode[] {
     const result: React.ReactNode[] = [];
 
@@ -87,6 +88,29 @@ export function cloneChildrenWithModes(
     return React.Children.toArray(result);
 }
 
+/**
+ * Combines several refs (object refs and/or callback refs) into a single
+ * callback ref. Useful when a component needs to keep its own internal ref to a
+ * node while still honouring a ref forwarded by the consumer.
+ *
+ * @example
+ * const inputRef = useRef<RNTextInput>(null)
+ * <RNTextInput ref={mergeRefs(inputRef, forwardedRef)} />
+ */
+export function mergeRefs<T>(
+    ...refs: Array<React.Ref<T> | undefined | null>
+): React.RefCallback<T> {
+    return (value: T | null) => {
+        refs.forEach((ref) => {
+            if (typeof ref === 'function') {
+                ref(value);
+            } else if (ref != null) {
+                (ref as React.MutableRefObject<T | null>).current = value;
+            }
+        });
+    };
+}
+
 /**
  * Flattens React children, extracting them from Fragments.
  * Useful for Group components that need to process individual items (e.g., for layout or styling)

package/lib/typescript/scripts/extract-component-tokens.d.ts

@@ -1,9 +0,0 @@
-/**
- * Main extraction function
- */
-export function extractAllTokens(): {};
-/**
- * Extract all getVariableByName calls from a component file
- */
-export function extractTokensFromFile(filePath: any): any[];
-//# sourceMappingURL=extract-component-tokens.d.ts.map

package/lib/typescript/scripts/generate-component-docs.d.ts

@@ -1,9 +0,0 @@
-/**
- * Main generation function
- */
-export function generateAllDocs(): void;
-/**
- * Generate MDX documentation for a component
- */
-export function generateMDX(componentName: any, metadata: any, componentPath: any): string;
-//# sourceMappingURL=generate-component-docs.d.ts.map

package/lib/typescript/scripts/generate-icon-registry.d.ts

@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-export {};
-//# sourceMappingURL=generate-icon-registry.d.ts.map