jfs-components 0.0.4 → 0.0.6

package/src/components/CtaCard/CtaCard.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import IconCapsule from '../IconCapsule/IconCapsule';
 import Button from '../Button/Button';
 
@@ -68,13 +69,15 @@ function CtaCard({
     iconName = "ic_upi_number",
     buttonLabel = "Get started",
     onPressButton,
-    modes = {},
+    modes: propModes = {},
     iconSlot,
     titleSlot,
     bodySlot,
     buttonSlot,
     style,
 }: CtaCardProps) {
+    const { modes: globalModes } = useTokens()
+    const modes = { ...globalModes, ...propModes }
     // --- Token Resolution ---
     // Container
     const backgroundColor = getVariableByName('ctaCard/background', modes) || '#0078ad';
@@ -174,7 +177,7 @@ function CtaCard({
             ) : (
                 <Button
                     label={buttonLabel}
-                    onPress={onPressButton}
+                    onPress={onPressButton || (() => { })}
                     modes={modes}
                 />
             )}

package/src/components/Disclaimer/Disclaimer.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
 
 type DisclaimerProps = {
   disclaimer?: string;
@@ -34,13 +35,15 @@ type DisclaimerProps = {
  */
 function Disclaimer({
   disclaimer = 'All financial services are provided by Jio Payments Bank Pvt. Ltd.',
-  modes = {},
+  modes: propModes = {},
   style,
   textStyle,
   accessibilityLabel,
   accessibilityHint,
   ...rest
 }: DisclaimerProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = { ...globalModes, ...propModes }
   // Resolve typography and color from Figma variables
   const color = getVariableByName('disclaimer/color', modes) || '#24262b'
   const fontSize =
@@ -77,14 +80,14 @@ function Disclaimer({
   const defaultAccessibilityLabel = accessibilityLabel || disclaimer
 
   return (
-    <View 
+    <View
       style={[containerStyle, style]}
       accessibilityRole="text"
       accessibilityLabel={defaultAccessibilityLabel}
       accessibilityHint={accessibilityHint}
       {...rest}
     >
-      <Text 
+      <Text
         style={[baseTextStyle, textStyle]}
         accessibilityElementsHidden={true}
         importantForAccessibility="no"

package/src/components/Divider/Divider.tsx

@@ -89,3 +89,4 @@ function Divider({
 
 export default Divider
 
+

package/src/components/IconCapsule/IconCapsule.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, type StyleProp, type ViewStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import Icon from '../../icons/Icon'
 
 type IconCapsuleProps = {
@@ -38,13 +39,15 @@ type IconCapsuleProps = {
  * <IconCapsule iconName="ic_card" accessibilityLabel="Credit card icon" />
  * ```
  */
-function IconCapsule({ 
+function IconCapsule({
   iconName = "ic_card",
-  modes = {},
+  modes: propModes = {},
   accessibilityLabel,
   accessibilityRole = "image",
   ...rest
 }: IconCapsuleProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = { ...globalModes, ...propModes }
   // Resolve design tokens using the provided modes
   const size = getVariableByName('iconCapsule/size', modes) || 42
   const radius = getVariableByName('iconCapsule/radius', modes) || 9999
@@ -72,17 +75,17 @@ function IconCapsule({
 
   // Generate default accessibility label from icon name if not provided
   const defaultAccessibilityLabel = accessibilityLabel || iconName.replace(/^ic_/, '').replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
-  
+
   return (
-    <View 
+    <View
       style={containerStyle}
       accessibilityRole={accessibilityRole}
       accessibilityLabel={defaultAccessibilityLabel}
       {...rest}
     >
-      <Icon 
-        name={iconName} 
-        size={iconSize} 
+      <Icon
+        name={iconName}
+        size={iconSize}
         color={iconColor}
         accessibilityElementsHidden={true}
         importantForAccessibility="no"

package/src/components/Introduction.mdx

@@ -95,7 +95,6 @@ When creating new components:
 
 - [Storybook Documentation](https://storybook.js.org/)
 - [React Native Storybook](https://github.com/storybookjs/react-native)
-- [Styled Components](https://styled-components.com/)
 
 ---
 

package/src/components/NavArrow/NavArrow.tsx

@@ -106,3 +106,4 @@ function NavArrow({
 
 export default NavArrow
 
+

package/src/components/PageTitle/PageTitle.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
 
 type PageTitleProps = {
   title?: string;
@@ -29,7 +30,7 @@ type PageTitleProps = {
  */
 function PageTitle({
   title = 'Page Title',
-  modes = {},
+  modes: propModes = {},
   style,
   textStyle,
   numberOfLines,
@@ -37,6 +38,9 @@ function PageTitle({
   accessibilityHint,
   ...rest
 }: PageTitleProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = { ...globalModes, ...propModes }
+
   // Resolve container padding tokens
   const paddingHorizontal =
     getVariableByName('pageTitle/padding/horizontal', modes) || 16
@@ -79,15 +83,15 @@ function PageTitle({
   const defaultAccessibilityLabel = accessibilityLabel || title
 
   return (
-    <View 
+    <View
       style={[containerStyle, style]}
       accessibilityRole="header"
       accessibilityLabel={defaultAccessibilityLabel}
       accessibilityHint={accessibilityHint}
       {...rest}
     >
-      <Text 
-        style={[textStyleObj, textStyle]} 
+      <Text
+        style={[textStyleObj, textStyle]}
         numberOfLines={numberOfLines !== undefined ? numberOfLines : 1}
         accessibilityElementsHidden={true}
         importantForAccessibility="no"

package/src/components/UpiHandle/UpiHandle.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { Pressable, View, Text, Image, type ViewStyle, type TextStyle, type ImageStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import Icon from '../../icons/Icon'
 
 // Default static asset from the component folder.
@@ -40,7 +41,7 @@ type UpiHandleProps = {
  */
 function UpiHandle({
   label = 'Label',
-  modes = {},
+  modes: propModes = {},
   showIcon = true,
   iconName = 'ic_scan_qr_code',
   onPress,
@@ -49,6 +50,8 @@ function UpiHandle({
   accessibilityHint,
   ...rest
 }: UpiHandleProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = { ...globalModes, ...propModes }
   // Token‑driven container styling
   const backgroundColor =
     getVariableByName('upiHandle/background', modes) || '#f5f5f5'

package/src/design-tokens/JFSThemeProvider.tsx

@@ -0,0 +1,79 @@
+
+import React, { createContext, useContext, ReactNode, useMemo } from 'react';
+import { getVariableByName } from './figma-variables-resolver';
+
+/**
+ * Shape of the TokenContext
+ */
+interface TokenContextType {
+    /**
+     * Current active modes map
+     * @example { 'Color Mode': 'Dark', 'Platform': 'mobile' }
+     */
+    modes: Record<string, any>;
+    /**
+     * Helper to resolve variable by name using the current context modes.
+     */
+    getVariable: (name: string) => any;
+}
+
+const TokenContext = createContext<TokenContextType | undefined>(undefined);
+
+interface JFSThemeProviderProps {
+    /**
+     * Modes to apply globally.
+     * Can be used to set 'Color Mode', 'Platform', 'Density', etc.
+     */
+    modes?: Record<string, any>;
+    children: ReactNode;
+}
+
+/**
+ * Provider component for the JFS Design System.
+ * Wraps your application or a subtree to provide global configuration for design tokens.
+ *
+ * @example
+ * <JFSThemeProvider modes={{ 'Color Mode': 'Dark', 'Platform': 'web' }}>
+ *   <App />
+ * </JFSThemeProvider>
+ */
+export const JFSThemeProvider: React.FC<JFSThemeProviderProps> = ({
+    modes = {},
+    children
+}) => {
+    const value = useMemo(() => {
+        // We bind the current modes to getVariableByName so consumers don't have to pass it
+        const getVariable = (name: string) => getVariableByName(name, modes);
+
+        return {
+            modes,
+            getVariable,
+        };
+    }, [modes]);
+
+    return (
+        <TokenContext.Provider value={value}>
+            {children}
+        </TokenContext.Provider>
+    );
+};
+
+/**
+ * Hook to access the current design token context.
+ *
+ * returns {
+ *   modes: Record<string, any> - The current active modes
+ *   getVariable: (name: string) => any - Function to resolve a token value
+ * }
+ */
+export const useTokens = (): TokenContextType => {
+    const context = useContext(TokenContext);
+    if (!context) {
+        // If used outside provider, fall back to default behavior (empty modes)
+        return {
+            modes: {},
+            getVariable: (name: string) => getVariableByName(name, {}),
+        };
+    }
+    return context;
+};

package/src/design-tokens/index.ts

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

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-01-21T10:51:56.970Z
+ * Generated: 2026-01-22T12:09:47.639Z
  */
 
 // Icon name to SVG data mapping

package/src/Containers.ts

@@ -1,8 +0,0 @@
-import styled from 'styled-components/native'
-
-export const storyContainer = styled.View`
-  height: 100%;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-`