jfs-components 0.1.2 → 0.1.8

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

@@ -39,11 +39,12 @@ export const FIGMA_MODES = {
   "Attached / Output": ["Default"],
   "Avatar / Output": ["Default"],
   "Avatar Group / Output": ["Default"],
-  "Avatar Size": ["L", "M", "S"],
+  "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"],
@@ -69,6 +70,7 @@ export const FIGMA_MODES = {
   "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"],
@@ -84,7 +86,12 @@ export const FIGMA_MODES = {
   "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"],
@@ -95,6 +102,7 @@ export const FIGMA_MODES = {
   "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"],
@@ -123,6 +131,7 @@ export const FIGMA_MODES = {
   "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"],
@@ -130,7 +139,7 @@ export const FIGMA_MODES = {
   "Icon / Output": ["Default"],
   "Icon Button / Output": ["Default"],
   "Icon Capsule / Output": ["Default"],
-  "Icon Capsule Size": ["M", "L", "S"],
+  "Icon Capsule Size": ["M", "L", "S", "XS"],
   "Image / Output": ["Default"],
   "Input / Output": ["Default"],
   "Input/PINSlot  States": ["Idle", "Active", "Error"],
@@ -155,6 +164,7 @@ export const FIGMA_MODES = {
   "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"],
@@ -172,15 +182,18 @@ export const FIGMA_MODES = {
   "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"],
@@ -198,8 +211,10 @@ export const FIGMA_MODES = {
   "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"],
@@ -220,14 +235,19 @@ export const FIGMA_MODES = {
   "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"],
@@ -258,29 +278,33 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "Attached": ["Color Mode"],
   "Avatar": ["Avatar Size", "Color Mode", "Context4"],
   "AvatarGroup": ["Avatar Size", "Context4"],
-  "Badge": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Emphasis", "Semantic Intent"],
+  "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"],
+  "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", "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"],
+  "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", "Button / Size", "Button / State", "Color Mode", "Context", "context7", "Emphasis", "Emphasis / DataViz", "LinearProgress Size", "Nudge padding", "Page type", "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"],
+  "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"],
@@ -321,11 +345,14 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "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"],
@@ -334,6 +361,7 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "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 "],
@@ -347,8 +375,9 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "SwappableAmount": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "Emphasis", "Semantic Intent"],
   "TabItem": ["Color Mode"],
   "TestimonialsCard": ["Avatar Size", "Color Mode", "Context4"],
-  "Text": ["Weight"],
+  "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"],

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-10T14:28:21.260Z
+ * Generated: 2026-06-12T12:48:07.304Z
  */
 
 // Icon name to SVG data mapping

package/src/utils/react-utils.ts

@@ -88,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(): {};
-/**
- * Backwards-compatible helper: just the token names for a 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

package/lib/typescript/scripts/generate-mode-types.d.ts

@@ -1,2 +0,0 @@
-export function generate(): void;
-//# sourceMappingURL=generate-mode-types.d.ts.map

package/lib/typescript/scripts/retype-modes.d.cts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=retype-modes.d.cts.map