jfs-components 0.0.5 → 0.0.7

package/lib/module/components/ChipSelect/ChipSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Text","TouchableOpacity","getVariableByName","Icon","jsx","_jsx","jsxs","_jsxs","ChipSelect","label","active","icon","close","modes","style","labelSlot","onPress","resolvedModes","gap","parseInt","paddingHorizontal","paddingVertical","radius","backgroundColor","textColor","fontSize","fontFamily","lineHeight","fontWeight","iconSize","containerStyle","flexDirection","alignItems","justifyContent","borderRadius","textStyle","color","textAlign","renderLabel","isValidElement","cloneElement","children","activeOpacity","name","size"],"sourceRoot":"../../../../src","sources":["components/ChipSelect/ChipSelect.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ChipSelect/ChipSelect.mdx

@@ -0,0 +1,80 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as ChipSelectStories from './ChipSelect.stories';
+
+<Meta of={ChipSelectStories} />
+
+<Title />
+<Subtitle>
+  A selection chip component that toggles between Idle and Active states.
+</Subtitle>
+
+<Description>
+  The `ChipSelect` component is used for making selections, such as dates or filters. 
+  It supports two states driven by the `active` prop:
+  - **Idle (`active={false}`)**: Customize with an icon and label.
+  - **Active (`active={true}`)**: Displays the label and a close icon. The start icon remains visible if provided.
+  
+  Styling is driven by Figma tokens via `getVariableByName`.
+</Description>
+
+<Primary />
+
+<Controls />
+
+
+## Available Collections and Modes
+
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
+
+### ChipSelect State
+- **Modes:** Idle | Active
+- **Default:** Idle
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+## Usage
+
+```tsx
+import ChipSelect from './ChipSelect';
+
+// Idle State (Icon + Label)
+<ChipSelect 
+  label="Select Date" 
+  active={false} 
+  icon="ic_calendar_week" 
+/>
+
+// Active State (Icon + Label + Close Icon)
+<ChipSelect 
+  label="12 Oct 2023" 
+  active={true}
+  icon="ic_calendar_week"
+  close={true}
+/>
+```
+
+<Stories />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`chipSelect/background`**
+- **`chipSelect/fontFamily`**
+- **`chipSelect/fontSize`**
+- **`chipSelect/fontWeight`**
+- **`chipSelect/foreground`**
+- **`chipSelect/gap`**
+- **`chipSelect/icon/size`**
+- **`chipSelect/lineHeight`**
+- **`chipSelect/padding/horizontal`**
+- **`chipSelect/padding/vertical`**
+- **`chipSelect/radius`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/module/components/CtaCard/CtaCard.js

@@ -3,8 +3,10 @@
 import React from 'react';
 import { View, Text } 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';
+import { cloneChildrenWithModes } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * CtaCard component that maps directly to the Figma design using design tokens.
@@ -17,13 +19,20 @@ function CtaCard({
   iconName = "ic_upi_number",
   buttonLabel = "Get started",
   onPressButton,
-  modes = {},
+  modes: propModes = {},
   iconSlot,
   titleSlot,
   bodySlot,
   buttonSlot,
   style
 }) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
   // --- Token Resolution ---
   // Container
   const backgroundColor = getVariableByName('ctaCard/background', modes) || '#0078ad';
@@ -78,37 +87,23 @@ function CtaCard({
     lineHeight: bodyLineHeight,
     fontWeight: '400' // Regular
   };
-
-  // --- Slot Helper ---
-  // Helper to clone element with modes if no modes are already present on it (standard in this library)
-  const renderSlot = slot => {
-    if (/*#__PURE__*/React.isValidElement(slot)) {
-      return /*#__PURE__*/React.cloneElement(slot, {
-        modes: {
-          ...modes,
-          ...slot.props.modes
-        }
-      });
-    }
-    return slot;
-  };
   return /*#__PURE__*/_jsxs(View, {
     style: [containerStyle, style],
     children: [/*#__PURE__*/_jsxs(View, {
       style: contentWrapStyle,
-      children: [iconSlot ? renderSlot(iconSlot) : /*#__PURE__*/_jsx(IconCapsule, {
+      children: [iconSlot ? cloneChildrenWithModes(iconSlot, modes) : /*#__PURE__*/_jsx(IconCapsule, {
         iconName: iconName,
         modes: modes
-      }), titleSlot ? renderSlot(titleSlot) : /*#__PURE__*/_jsx(Text, {
+      }), titleSlot ? cloneChildrenWithModes(titleSlot, modes) : /*#__PURE__*/_jsx(Text, {
         style: titleStyle,
         children: title
-      }), bodySlot ? renderSlot(bodySlot) : /*#__PURE__*/_jsx(Text, {
+      }), bodySlot ? cloneChildrenWithModes(bodySlot, modes) : /*#__PURE__*/_jsx(Text, {
         style: bodyStyle,
         children: body
       })]
-    }), buttonSlot ? renderSlot(buttonSlot) : /*#__PURE__*/_jsx(Button, {
+    }), buttonSlot ? cloneChildrenWithModes(buttonSlot, modes) : /*#__PURE__*/_jsx(Button, {
       label: buttonLabel,
-      onPress: onPressButton,
+      onPress: onPressButton || (() => {}),
       modes: modes
     })]
   });

package/lib/module/components/CtaCard/CtaCard.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Text","getVariableByName","IconCapsule","Button","jsx","_jsx","jsxs","_jsxs","CtaCard","title","body","iconName","buttonLabel","onPressButton","modes","iconSlot","titleSlot","bodySlot","buttonSlot","style","backgroundColor","radius","paddingHorizontal","paddingVertical","gap","contentGap","titleColor","titleFontFamily","titleFontSize","titleLineHeight","bodyColor","bodyFontFamily","bodyFontSize","bodyLineHeight","containerStyle","borderRadius","alignItems","width","overflow","contentWrapStyle","titleStyle","color","fontFamily","fontSize","lineHeight","fontWeight","bodyStyle","renderSlot","slot","isValidElement","cloneElement","props","children","label","onPress"],"sourceRoot":"../../../../src","sources":["components/CtaCard/CtaCard.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","View","Text","getVariableByName","useTokens","IconCapsule","Button","cloneChildrenWithModes","jsx","_jsx","jsxs","_jsxs","CtaCard","title","body","iconName","buttonLabel","onPressButton","modes","propModes","iconSlot","titleSlot","bodySlot","buttonSlot","style","globalModes","backgroundColor","radius","paddingHorizontal","paddingVertical","gap","contentGap","titleColor","titleFontFamily","titleFontSize","titleLineHeight","bodyColor","bodyFontFamily","bodyFontSize","bodyLineHeight","containerStyle","borderRadius","alignItems","width","overflow","contentWrapStyle","titleStyle","color","fontFamily","fontSize","lineHeight","fontWeight","bodyStyle","children","label","onPress"],"sourceRoot":"../../../../src","sources":["components/CtaCard/CtaCard.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/CtaCard/CtaCard.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as CtaCardStories from './CtaCard.stories';
 import CtaCard from './CtaCard';
 

package/lib/module/components/Disclaimer/Disclaimer.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
  * Disclaimer text block that mirrors the Figma "Disclaimer" component.
@@ -27,13 +28,20 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
  */
 function Disclaimer({
   disclaimer = 'All financial services are provided by Jio Payments Bank Pvt. Ltd.',
-  modes = {},
+  modes: propModes = {},
   style,
   textStyle,
   accessibilityLabel,
   accessibilityHint,
   ...rest
 }) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
   // Resolve typography and color from Figma variables
   const color = getVariableByName('disclaimer/color', modes) || '#24262b';
   const fontSize = getVariableByName('disclaimer/label/fontSize', modes) || 10;

package/lib/module/components/Disclaimer/Disclaimer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Text","getVariableByName","jsxs","_jsxs","jsx","_jsx","Disclaimer","disclaimer","modes","style","textStyle","accessibilityLabel","accessibilityHint","rest","color","fontSize","lineHeight","fontFamily","fontWeightRaw","fontWeight","toString","baseTextStyle","textAlign","containerStyle","alignItems","justifyContent","maxWidth","width","defaultAccessibilityLabel","accessibilityRole","children","accessibilityElementsHidden","importantForAccessibility"],"sourceRoot":"../../../../src","sources":["components/Disclaimer/Disclaimer.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAwD,cAAc;AACzF,SAASC,iBAAiB,QAAQ,8CAA8C;AAAA,SAAAC,IAAA,IAAAC,KAAA,EAAAC,GAAA,IAAAC,IAAA;AAWhF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,UAAUA,CAAC;EAClBC,UAAU,GAAG,oEAAoE;EACjFC,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK;EACLC,SAAS;EACTC,kBAAkB;EAClBC,iBAAiB;EACjB,GAAGC;AACY,CAAC,EAAE;EAClB;EACA,MAAMC,KAAK,GAAGb,iBAAiB,CAAC,kBAAkB,EAAEO,KAAK,CAAC,IAAI,SAAS;EACvE,MAAMO,QAAQ,GACZd,iBAAiB,CAAC,2BAA2B,EAAEO,KAAK,CAAC,IAAI,EAAE;EAC7D,MAAMQ,UAAU,GACdf,iBAAiB,CAAC,6BAA6B,EAAEO,KAAK,CAAC,IAAI,EAAE;EAC/D,MAAMS,UAAU,GACdhB,iBAAiB,CAAC,6BAA6B,EAAEO,KAAK,CAAC,IAAI,QAAQ;EACrE,MAAMU,aAAa,GACjBjB,iBAAiB,CAAC,6BAA6B,EAAEO,KAAK,CAAC,IAAI,GAAG;EAChE,MAAMW,UAAU,GACd,OAAOD,aAAa,KAAK,QAAQ,GAC7BA,aAAa,CAACE,QAAQ,CAAC,CAAC,GACxBF,aAAa;EAEnB,MAAMG,aAAwB,GAAG;IAC/BP,KAAK;IACLC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACVE,UAAU;IACVG,SAAS,EAAE;EACb,CAAC;EAED,MAAMC,cAAyB,GAAG;IAChCC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxB;IACAC,QAAQ,EAAE,GAAG;IACbC,KAAK,EAAE;EACT,CAAC;;EAED;EACA,MAAMC,yBAAyB,GAAGjB,kBAAkB,IAAIJ,UAAU;EAElE,oBACEF,IAAA,CAACN,IAAI;IACHU,KAAK,EAAE,CAACc,cAAc,EAAEd,KAAK,CAAE;IAC/BoB,iBAAiB,EAAC,MAAM;IACxBlB,kBAAkB,EAAEiB,yBAA0B;IAC9ChB,iBAAiB,EAAEA,iBAAkB;IAAA,GACjCC,IAAI;IAAAiB,QAAA,eAER3B,KAAA,CAACH,IAAI;MACHS,KAAK,EAAE,CAACY,aAAa,EAAEX,SAAS,CAAE;MAClCqB,2BAA2B,EAAE,IAAK;MAClCC,yBAAyB,EAAC,IAAI;MAAAF,QAAA,GAE7BvB,UAAU,EACV,IAAI;IAAA,CACD;EAAC,CACH,CAAC;AAEX;AAEA,eAAeD,UAAU","ignoreList":[]}
+{"version":3,"names":["React","View","Text","getVariableByName","useTokens","jsxs","_jsxs","jsx","_jsx","Disclaimer","disclaimer","modes","propModes","style","textStyle","accessibilityLabel","accessibilityHint","rest","globalModes","color","fontSize","lineHeight","fontFamily","fontWeightRaw","fontWeight","toString","baseTextStyle","textAlign","containerStyle","alignItems","justifyContent","maxWidth","width","defaultAccessibilityLabel","accessibilityRole","children","accessibilityElementsHidden","importantForAccessibility"],"sourceRoot":"../../../../src","sources":["components/Disclaimer/Disclaimer.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAwD,cAAc;AACzF,SAASC,iBAAiB,QAAQ,8CAA8C;AAChF,SAASC,SAAS,QAAQ,sCAAsC;AAAA,SAAAC,IAAA,IAAAC,KAAA,EAAAC,GAAA,IAAAC,IAAA;AAWhE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,UAAUA,CAAC;EAClBC,UAAU,GAAG,oEAAoE;EACjFC,KAAK,EAAEC,SAAS,GAAG,CAAC,CAAC;EACrBC,KAAK;EACLC,SAAS;EACTC,kBAAkB;EAClBC,iBAAiB;EACjB,GAAGC;AACY,CAAC,EAAE;EAClB,MAAM;IAAEN,KAAK,EAAEO;EAAY,CAAC,GAAGd,SAAS,CAAC,CAAC;EAC1C,MAAMO,KAAK,GAAG;IAAE,GAAGO,WAAW;IAAE,GAAGN;EAAU,CAAC;EAC9C;EACA,MAAMO,KAAK,GAAGhB,iBAAiB,CAAC,kBAAkB,EAAEQ,KAAK,CAAC,IAAI,SAAS;EACvE,MAAMS,QAAQ,GACZjB,iBAAiB,CAAC,2BAA2B,EAAEQ,KAAK,CAAC,IAAI,EAAE;EAC7D,MAAMU,UAAU,GACdlB,iBAAiB,CAAC,6BAA6B,EAAEQ,KAAK,CAAC,IAAI,EAAE;EAC/D,MAAMW,UAAU,GACdnB,iBAAiB,CAAC,6BAA6B,EAAEQ,KAAK,CAAC,IAAI,QAAQ;EACrE,MAAMY,aAAa,GACjBpB,iBAAiB,CAAC,6BAA6B,EAAEQ,KAAK,CAAC,IAAI,GAAG;EAChE,MAAMa,UAAU,GACd,OAAOD,aAAa,KAAK,QAAQ,GAC7BA,aAAa,CAACE,QAAQ,CAAC,CAAC,GACxBF,aAAa;EAEnB,MAAMG,aAAwB,GAAG;IAC/BP,KAAK;IACLC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACVE,UAAU;IACVG,SAAS,EAAE;EACb,CAAC;EAED,MAAMC,cAAyB,GAAG;IAChCC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxB;IACAC,QAAQ,EAAE,GAAG;IACbC,KAAK,EAAE;EACT,CAAC;;EAED;EACA,MAAMC,yBAAyB,GAAGlB,kBAAkB,IAAIL,UAAU;EAElE,oBACEF,IAAA,CAACP,IAAI;IACHY,KAAK,EAAE,CAACe,cAAc,EAAEf,KAAK,CAAE;IAC/BqB,iBAAiB,EAAC,MAAM;IACxBnB,kBAAkB,EAAEkB,yBAA0B;IAC9CjB,iBAAiB,EAAEA,iBAAkB;IAAA,GACjCC,IAAI;IAAAkB,QAAA,eAER7B,KAAA,CAACJ,IAAI;MACHW,KAAK,EAAE,CAACa,aAAa,EAAEZ,SAAS,CAAE;MAClCsB,2BAA2B,EAAE,IAAK;MAClCC,yBAAyB,EAAC,IAAI;MAAAF,QAAA,GAE7BzB,UAAU,EACV,IAAI;IAAA,CACD;EAAC,CACH,CAAC;AAEX;AAEA,eAAeD,UAAU","ignoreList":[]}

package/lib/module/components/Disclaimer/Disclaimer.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as DisclaimerStories from './Disclaimer.stories';
 import Disclaimer from './Disclaimer';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -16,6 +16,10 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 <Canvas>

package/lib/module/components/Divider/Divider.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as DividerStories from './Divider.stories';
 import Divider from './Divider';
 
@@ -19,6 +19,10 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 ### Horizontal Divider

package/lib/module/components/Drawer/Drawer.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as DrawerStories from './Drawer.stories';
 import Drawer from './Drawer';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -13,9 +13,17 @@ Lightweight bottom drawer/sheet with a draggable handle.
 
 This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
 
+### Page type
+- **Modes:** MainPage | SubPage
+- **Default:** MainPage
+
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 <Canvas>

package/lib/module/components/EmptyState/EmptyState.js

@@ -0,0 +1,132 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View, Text } 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';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * EmptyState component that displays an icon, title, description and an action button.
+ *
+ * @component
+ */
+function EmptyState({
+  title = "No payments to show",
+  description = "Start by paying bills, recharge or your friends",
+  iconSlot,
+  buttonSlot,
+  modes: propModes = {},
+  style,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+
+  // Container Tokens
+  const gap = getVariableByName('emptyState/gap', modes) || 24;
+  const padding = getVariableByName('emptyState/padding', modes) || 4;
+  const radius = getVariableByName('emptyState/radius', modes) || 16;
+
+  // Content Wrap Tokens
+  const contentGap = getVariableByName('emptyState/content/gap', modes) || 16;
+
+  // Title Tokens
+  const titleColor = getVariableByName('emptyState/title/color', modes) || '#0d0d0f';
+  const titleFontSize = getVariableByName('emptyState/title/fontSize', modes) || 16;
+  const titleFontFamily = getVariableByName('emptyState/title/fontFamily', modes) || 'System';
+  const titleLineHeight = getVariableByName('emptyState/title/lineHeight', modes) || 18;
+  const titleFontWeight = getVariableByName('emptyState/title/fontWeight', modes) || 700;
+
+  // Body Tokens
+  const bodyColor = getVariableByName('emptyState/body/color', modes) || '#1a1c1f';
+  const bodyFontSize = getVariableByName('emptyState/body/fontSize', modes) || 12;
+  const bodyFontFamily = getVariableByName('emptyState/body/fontFamily', modes) || 'System';
+  const bodyLineHeight = getVariableByName('emptyState/body/lineHeight', modes) || 16;
+  const bodyFontWeight = getVariableByName('emptyState/body/fontWeight', modes) || 400;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: gap,
+    padding: padding,
+    borderRadius: radius
+    // Width is set in Figma as fixed 236, but typical practice is to let it be flexible or controlled by parent
+    // However, for strict adherence to "Maximize existing component usage" and specific styles, we can leave width 
+    // to parent or default to auto. 
+  };
+  const contentWrapStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: contentGap,
+    width: '100%'
+  };
+  const titleStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    fontFamily: titleFontFamily,
+    lineHeight: titleLineHeight,
+    fontWeight: String(titleFontWeight),
+    textAlign: 'center'
+  };
+  const bodyStyle = {
+    color: bodyColor,
+    fontSize: bodyFontSize,
+    fontFamily: bodyFontFamily,
+    lineHeight: bodyLineHeight,
+    fontWeight: String(bodyFontWeight),
+    textAlign: 'center'
+  };
+  const defaultIconSlot = useMemo(() => /*#__PURE__*/_jsx(IconCapsule, {
+    modes: modes
+  }), [modes]);
+
+  // Checking if iconSlot is passed; if not use default. 
+  // If it is passed, we assume the user handles everything or we inject props if it's a valid element? 
+  // User instructions say: "whenever there is a slot, that's should be implemented as real react slot... manual passing down modes"
+  // So we just render what is passed, but for defaults we pass modes.
+  // Ideally, if iconSlot is a function we could pass modes, but ReactNode is static.
+  // The instruction "make sure modes are always passed to all slot children" implies we might need to cloneElement if possible, 
+  // AND/OR user needs to pass it manually in usage. 
+  // But for the DEFAULT slots we render, we definitely pass modes.
+
+  const iconContent = iconSlot || defaultIconSlot;
+  const defaultButtonSlot = useMemo(() => /*#__PURE__*/_jsx(Button, {
+    label: "Button",
+    modes: modes
+  }), [modes]);
+  const buttonContent = buttonSlot || defaultButtonSlot;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: contentWrapStyle,
+      children: [iconContent, /*#__PURE__*/_jsx(View, {
+        style: {
+          alignItems: 'center',
+          gap: 0
+        },
+        children: /*#__PURE__*/_jsxs(View, {
+          style: {
+            alignItems: 'center'
+          },
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: titleStyle,
+            children: title
+          }), description ? /*#__PURE__*/_jsx(Text, {
+            style: bodyStyle,
+            children: description
+          }) : null]
+        })
+      })]
+    }), buttonContent]
+  });
+}
+export default EmptyState;
+//# sourceMappingURL=EmptyState.js.map

package/lib/module/components/EmptyState/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","View","Text","getVariableByName","useTokens","IconCapsule","Button","jsx","_jsx","jsxs","_jsxs","EmptyState","title","description","iconSlot","buttonSlot","modes","propModes","style","testID","globalModes","gap","padding","radius","contentGap","titleColor","titleFontSize","titleFontFamily","titleLineHeight","titleFontWeight","bodyColor","bodyFontSize","bodyFontFamily","bodyLineHeight","bodyFontWeight","containerStyle","flexDirection","alignItems","justifyContent","borderRadius","contentWrapStyle","width","titleStyle","color","fontSize","fontFamily","lineHeight","fontWeight","String","textAlign","bodyStyle","defaultIconSlot","iconContent","defaultButtonSlot","label","buttonContent","children"],"sourceRoot":"../../../../src","sources":["components/EmptyState/EmptyState.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/EmptyState/EmptyState.mdx

@@ -0,0 +1,73 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
+import * as EmptyStateStories from './EmptyState.stories';
+import EmptyState from './EmptyState';
+
+<Meta of={EmptyStateStories} />
+
+# EmptyState
+
+The `EmptyState` component is used to display messages when there is no content to show, typically with an icon, title, description, and an action button.
+
+
+## Available Collections and Modes
+
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+## Usage
+
+```tsx
+import { EmptyState } from 'jfs-components';
+
+<EmptyState
+  title="No payments to show"
+  description="Start by paying bills, recharge or your friends"
+  modes={{}}
+/>
+```
+
+## Props
+
+<Controls />
+
+## Examples
+
+### Default
+
+<Canvas of={EmptyStateStories.Default} />
+
+### Custom Text
+
+<Canvas of={EmptyStateStories.WithCustomText} />
+
+### Custom Slots
+
+<Canvas of={EmptyStateStories.CustomSlots} />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`emptyState/body/color`**
+- **`emptyState/body/fontFamily`**
+- **`emptyState/body/fontSize`**
+- **`emptyState/body/fontWeight`**
+- **`emptyState/body/lineHeight`**
+- **`emptyState/content/gap`**
+- **`emptyState/gap`**
+- **`emptyState/padding`**
+- **`emptyState/radius`**
+- **`emptyState/title/color`**
+- **`emptyState/title/fontFamily`**
+- **`emptyState/title/fontSize`**
+- **`emptyState/title/fontWeight`**
+- **`emptyState/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/module/components/FilterBar/FilterBar.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as FilterBarStories from './FilterBar.stories';
 import FilterBar from './FilterBar';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';

package/lib/module/components/HStack/HStack.js

@@ -0,0 +1,61 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * HStack component for horizontal layout using design token spacing.
+ */
+export const HStack = ({
+  children,
+  alignVertical,
+  justifyHorizontal,
+  wrap,
+  reverse = false,
+  as,
+  modes: propModes = {},
+  style,
+  ...rest
+}) => {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const paddingTop = getVariableByName('hstack/padding/top', modes);
+  const paddingBottom = getVariableByName('hstack/padding/bottom', modes);
+  const paddingLeft = getVariableByName('hstack/padding/left', modes);
+  const paddingRight = getVariableByName('hstack/padding/right', modes);
+  const gap = getVariableByName('hstack/gap', modes);
+  const flexWrap = typeof wrap === 'boolean' ? wrap ? 'wrap' : 'nowrap' : wrap;
+  const containerStyle = {
+    flexDirection: reverse ? 'row-reverse' : 'row',
+    alignItems: alignVertical,
+    justifyContent: justifyHorizontal,
+    flexWrap,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    gap
+  };
+
+  // Pass modes down to children
+  const processedChildren = children ? cloneChildrenWithModes(children, modes) : null;
+  const viewProps = {
+    ...rest,
+    as
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    ...viewProps,
+    children: processedChildren
+  });
+};
+export default HStack;
+//# sourceMappingURL=HStack.js.map

package/lib/module/components/HStack/HStack.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","getVariableByName","useTokens","cloneChildrenWithModes","jsx","_jsx","HStack","children","alignVertical","justifyHorizontal","wrap","reverse","as","modes","propModes","style","rest","globalModes","paddingTop","paddingBottom","paddingLeft","paddingRight","gap","flexWrap","containerStyle","flexDirection","alignItems","justifyContent","processedChildren","viewProps"],"sourceRoot":"../../../../src","sources":["components/HStack/HStack.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAyC,cAAc;AACpE,SAASC,iBAAiB,QAAQ,8CAA8C;AAChF,SAASC,SAAS,QAAQ,sCAAsC;AAChE,SAASC,sBAAsB,QAAQ,yBAAyB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAoChE;AACA;AACA;AACA,OAAO,MAAMC,MAAM,GAAGA,CAAC;EACnBC,QAAQ;EACRC,aAAa;EACbC,iBAAiB;EACjBC,IAAI;EACJC,OAAO,GAAG,KAAK;EACfC,EAAE;EACFC,KAAK,EAAEC,SAAS,GAAG,CAAC,CAAC;EACrBC,KAAK;EACL,GAAGC;AACM,CAAC,KAAK;EACf,MAAM;IAAEH,KAAK,EAAEI;EAAY,CAAC,GAAGf,SAAS,CAAC,CAAC;EAC1C,MAAMW,KAAK,GAAG;IAAE,GAAGI,WAAW;IAAE,GAAGH;EAAU,CAAC;EAE9C,MAAMI,UAAU,GAAGjB,iBAAiB,CAAC,oBAAoB,EAAEY,KAAK,CAAC;EACjE,MAAMM,aAAa,GAAGlB,iBAAiB,CAAC,uBAAuB,EAAEY,KAAK,CAAC;EACvE,MAAMO,WAAW,GAAGnB,iBAAiB,CAAC,qBAAqB,EAAEY,KAAK,CAAC;EACnE,MAAMQ,YAAY,GAAGpB,iBAAiB,CAAC,sBAAsB,EAAEY,KAAK,CAAC;EACrE,MAAMS,GAAG,GAAGrB,iBAAiB,CAAC,YAAY,EAAEY,KAAK,CAAC;EAElD,MAAMU,QAAQ,GAAG,OAAOb,IAAI,KAAK,SAAS,GAAIA,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAIA,IAAI;EAE9E,MAAMc,cAAyB,GAAG;IAC9BC,aAAa,EAAEd,OAAO,GAAG,aAAa,GAAG,KAAK;IAC9Ce,UAAU,EAAElB,aAAa;IACzBmB,cAAc,EAAElB,iBAAiB;IACjCc,QAAQ;IACRL,UAAU;IACVC,aAAa;IACbC,WAAW;IACXC,YAAY;IACZC;EACJ,CAAC;;EAED;EACA,MAAMM,iBAAiB,GAAGrB,QAAQ,GAC5BJ,sBAAsB,CAACI,QAAQ,EAAEM,KAAK,CAAC,GACvC,IAAI;EAEV,MAAMgB,SAAS,GAAG;IACd,GAAGb,IAAI;IACPJ;EACJ,CAAC;EAED,oBACIP,IAAA,CAACL,IAAI;IAACe,KAAK,EAAE,CAACS,cAAc,EAAET,KAAK,CAAE;IAAA,GAAKc,SAAS;IAAAtB,QAAA,EAC9CqB;EAAiB,CAChB,CAAC;AAEf,CAAC;AAED,eAAetB,MAAM","ignoreList":[]}

package/lib/module/components/HStack/HStack.mdx

@@ -0,0 +1,44 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
+import * as HStackStories from './HStack.stories';
+import HStack from './HStack';
+
+<Meta of={HStackStories} />
+
+# HStack
+
+`HStack` arranges its children in a horizontal line. It uses design tokens for spacing and gap.
+
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+```tsx
+import { HStack } from 'jfs-components';
+
+<HStack justifyHorizontal="space-between" modes={{ 'hstack/gap': 16 }}>
+  <View>Left</View>
+  <View>Right</View>
+</HStack>
+```
+
+<Canvas>
+  <Story of={HStackStories.Default} />
+</Canvas>
+
+## Props
+
+<Controls of={HStackStories.Default} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`hstack/gap`**
+- **`hstack/padding/bottom`**
+- **`hstack/padding/left`**
+- **`hstack/padding/right`**
+- **`hstack/padding/top`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/module/components/IconButton/IconButton.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as IconButtonStories from './IconButton.stories';
 import IconButton from './IconButton';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -28,6 +28,10 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 <Canvas>