jfs-components 0.0.4 → 0.0.5

package/lib/typescript/Containers.d.ts

@@ -1,2 +1,3 @@
-export declare const storyContainer: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+import { type ViewProps } from 'react-native';
+export declare const storyContainer: (props: ViewProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Containers.d.ts.map

package/lib/typescript/Containers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Containers.d.ts","sourceRoot":"","sources":["../../src/Containers.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,+KAK1B,CAAA"}
+{"version":3,"file":"Containers.d.ts","sourceRoot":"","sources":["../../src/Containers.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhE,eAAO,MAAM,cAAc,GAAI,OAAO,SAAS,4CAE9C,CAAC"}

package/lib/typescript/design-tokens/JFSThemeProvider.d.ts

@@ -0,0 +1,44 @@
+import React, { ReactNode } from 'react';
+/**
+ * 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;
+}
+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 declare const JFSThemeProvider: React.FC<JFSThemeProviderProps>;
+/**
+ * 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 declare const useTokens: () => TokenContextType;
+export {};
+//# sourceMappingURL=JFSThemeProvider.d.ts.map

package/lib/typescript/design-tokens/JFSThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JFSThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/design-tokens/JFSThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAA6B,SAAS,EAAW,MAAM,OAAO,CAAC;AAG7E;;GAEG;AACH,UAAU,gBAAgB;IACtB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B;;OAEG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC;CACtC;AAID,UAAU,qBAAqB;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAmB5D,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,QAAO,gBAU5B,CAAC"}

package/lib/typescript/design-tokens/index.d.ts

@@ -1,2 +1,3 @@
 export * from './figma-variables-resolver';
+export * from './JFSThemeProvider';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/design-tokens/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/design-tokens/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/design-tokens/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC"}

package/lib/typescript/icons/registry.d.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-22T08:22:14.301Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -77,8 +77,7 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*",
-    "styled-components": "*"
+    "react-native": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",
@@ -102,11 +101,9 @@
     "@types/jest": "^30.0.0",
     "@types/react": "^19.2.7",
     "@types/react-native": "^0.73.0",
-    "@types/styled-components": "^5.1.36",
     "@typescript-eslint/eslint-plugin": "^8.50.0",
     "@typescript-eslint/parser": "^8.50.0",
     "babel-loader": "^10.0.0",
-    "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^9.39.1",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
@@ -126,7 +123,6 @@
     "react-test-renderer": "19.1.1",
     "remark-gfm": "^4.0.1",
     "storybook": "^10.0.8",
-    "styled-components": "^6.3.8",
     "ts-migrate": "^0.1.35",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",
@@ -136,4 +132,4 @@
   "jest": {
     "preset": "react-native"
   }
-}
+}

package/src/Containers.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { View, StyleSheet, type ViewProps } from 'react-native';
+
+export const storyContainer = (props: ViewProps) => (
+  <View style= { styles.container } { ...props } />
+);
+
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/Accordion/Accordion.mdx

@@ -120,3 +120,4 @@ function PaymentSection() {
 
 
 
+

package/src/components/ActionFooter/ActionFooter.mdx

@@ -99,3 +99,4 @@ All tokens support mode-based theming through the `modes` prop.
 
 The ActionFooter uses `accessibilityRole="toolbar"` to indicate it contains a group of action controls. Provide a meaningful `accessibilityLabel` to describe the footer's purpose to screen reader users.
 
+

package/src/components/CtaCard/CtaCard.mdx

@@ -62,5 +62,4 @@ This component uses the following design tokens, resolved through `getVariableBy
 - **`ctaCard/title/fontSize`**
 - **`ctaCard/title/lineHeight`**
 
-All tokens support mode-based theming through the `modes` prop.
-
+All tokens support mode-based theming through the `modes` prop.

package/src/components/Divider/Divider.tsx

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

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/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-22T08:22:14.301Z
  */
 
 // 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;
-`