jfs-components 0.1.0 → 0.1.2

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

@@ -0,0 +1,396 @@
+/* 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"],
+  "Avatar Type": ["Avatar", "Icon", "Text"],
+  "Axis / Output": ["Default"],
+  "Background": ["False", "True"],
+  "Badge / Output": ["Default"],
+  "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"],
+  "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"],
+  "Color Mode": ["Light", "Dark"],
+  "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"],
+  "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"],
+  "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"],
+  "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"],
+  "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"],
+  "peekOffset": ["Medium", "Small", "Large", "None"],
+  "Placement": ["Prefix", "Suffix"],
+  "PlanComparisonCard / Output": ["Default"],
+  "Popup / Output": ["Default"],
+  "PortfolioHero / Output": ["Default"],
+  "PoweredByLabel": ["Default"],
+  "ProductLabel / Output": ["Default"],
+  "ProductOverview / Output": ["Default"],
+  "ProgressBadge / Output": ["Default"],
+  "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"],
+  "Semantic Intent": ["Brand", "System"],
+  "Skeleton": ["Mode 1"],
+  "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"],
+  "Text / Output": ["Default"],
+  "textInput / 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 / 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", "AppearanceSystem", "Color Mode", "Emphasis", "Semantic Intent"],
+  "Balance": ["Color Mode", "Context3"],
+  "BottomNav": ["Color Mode"],
+  "BottomNavItem": ["BottomNavItem / State", "Color Mode"],
+  "BrandChip": ["Avatar Size", "Color Mode", "Context4"],
+  "BubbleChart": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
+  "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", "Button / Size", "Button / State", "Color Mode", "Context", "Context4", "context5", "Emphasis", "List Item Style", "Semantic Intent", "Weight"],
+  "CardCTA": ["AppearanceBrand", "AppearanceSystem", "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", "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"],
+  "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"],
+  "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"],
+  "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"],
+  "ProductOverview": ["Avatar Size", "Color Mode", "Context4"],
+  "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"],
+  "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": ["Weight"],
+  "TextInput": ["Color Mode", "InputState"],
+  "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-10T14:28:21.260Z
  */
 
 // 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[] = [];