jfs-components 0.0.6 → 0.0.7

package/lib/commonjs/components/ChipSelect/ChipSelect.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * ChipSelect component for selecting options (e.g. Date selection).
+ * Based on Figma Node 1901-4727.
+ */
+function ChipSelect({
+  label = 'Date',
+  active = false,
+  icon = 'ic_calendar_week',
+  close = true,
+  modes = {},
+  style,
+  labelSlot,
+  onPress
+}) {
+  // Force control of the 'ChipSelect State' mode based on the active prop
+  // This overrides any 'ChipSelect State' passed from outside, but preserves other modes
+  const resolvedModes = {
+    ...modes,
+    'ChipSelect State': active ? 'Active' : 'Idle'
+  };
+
+  // --- Token Resolution ---
+  const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/gap', resolvedModes), 10) || 4;
+  const paddingHorizontal = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/padding/horizontal', resolvedModes), 10) || 16;
+  const paddingVertical = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/padding/vertical', resolvedModes), 10) || 0;
+  const radius = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/radius', resolvedModes), 10) || 999;
+
+  // Background
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('chipSelect/background', resolvedModes) || '#f5f5f5';
+
+  // Text Styles
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('chipSelect/foreground', resolvedModes) || '#0d0d0f';
+  const fontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/fontSize', resolvedModes), 10) || 14;
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('chipSelect/fontFamily', resolvedModes) || 'JioType Var';
+  const lineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/lineHeight', resolvedModes), 10) || 32;
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('chipSelect/fontWeight', resolvedModes) || '700';
+
+  // Icon Styles
+  const iconSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/icon/size', resolvedModes), 10) || 16;
+
+  // --- Styles ---
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: backgroundColor,
+    borderRadius: radius,
+    paddingHorizontal: paddingHorizontal,
+    paddingVertical: paddingVertical,
+    gap: gap
+  };
+  const textStyle = {
+    color: textColor,
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    lineHeight: lineHeight,
+    fontWeight: fontWeight,
+    textAlign: 'center'
+  };
+  const renderLabel = () => {
+    if (labelSlot) {
+      if (/*#__PURE__*/_react.default.isValidElement(labelSlot)) {
+        // Pass resolved modes to slot
+        return /*#__PURE__*/_react.default.cloneElement(labelSlot, {
+          modes: resolvedModes
+        });
+      }
+      return labelSlot;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: textStyle,
+      children: label
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    style: [containerStyle, style],
+    onPress: onPress,
+    activeOpacity: 0.8,
+    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: icon,
+      size: iconSize,
+      color: textColor
+    }), renderLabel(), active && close && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: "ic_close",
+      size: iconSize,
+      color: textColor
+    })]
+  });
+}
+var _default = exports.default = ChipSelect;
+//# sourceMappingURL=ChipSelect.js.map

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

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

package/lib/commonjs/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/commonjs/components/CtaCard/CtaCard.js

@@ -10,6 +10,7 @@ var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resol
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
 var _Button = _interopRequireDefault(require("../Button/Button"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -91,35 +92,21 @@ 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.default.isValidElement(slot)) {
-      return /*#__PURE__*/_react.default.cloneElement(slot, {
-        modes: {
-          ...modes,
-          ...slot.props.modes
-        }
-      });
-    }
-    return slot;
-  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: contentWrapStyle,
-      children: [iconSlot ? renderSlot(iconSlot) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
+      children: [iconSlot ? (0, _reactUtils.cloneChildrenWithModes)(iconSlot, modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
         iconName: iconName,
         modes: modes
-      }), titleSlot ? renderSlot(titleSlot) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      }), titleSlot ? (0, _reactUtils.cloneChildrenWithModes)(titleSlot, modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: titleStyle,
         children: title
-      }), bodySlot ? renderSlot(bodySlot) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      }), bodySlot ? (0, _reactUtils.cloneChildrenWithModes)(bodySlot, modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: bodyStyle,
         children: body
       })]
-    }), buttonSlot ? renderSlot(buttonSlot) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+    }), buttonSlot ? (0, _reactUtils.cloneChildrenWithModes)(buttonSlot, modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
       label: buttonLabel,
       onPress: onPressButton || (() => {}),
       modes: modes

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_JFSThemeProvider","_IconCapsule","_Button","_jsxRuntime","e","__esModule","default","CtaCard","title","body","iconName","buttonLabel","onPressButton","modes","propModes","iconSlot","titleSlot","bodySlot","buttonSlot","style","globalModes","useTokens","backgroundColor","getVariableByName","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","React","isValidElement","cloneElement","props","jsxs","View","children","jsx","Text","label","onPress","_default","exports"],"sourceRoot":"../../../../src","sources":["components/CtaCard/CtaCard.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_JFSThemeProvider","_IconCapsule","_Button","_reactUtils","_jsxRuntime","e","__esModule","default","CtaCard","title","body","iconName","buttonLabel","onPressButton","modes","propModes","iconSlot","titleSlot","bodySlot","buttonSlot","style","globalModes","useTokens","backgroundColor","getVariableByName","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","jsxs","View","children","cloneChildrenWithModes","jsx","Text","label","onPress","_default","exports"],"sourceRoot":"../../../../src","sources":["components/CtaCard/CtaCard.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/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/commonjs/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/commonjs/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/commonjs/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/commonjs/components/EmptyState/EmptyState.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * 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
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+
+  // Container Tokens
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('emptyState/gap', modes) || 24;
+  const padding = (0, _figmaVariablesResolver.getVariableByName)('emptyState/padding', modes) || 4;
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('emptyState/radius', modes) || 16;
+
+  // Content Wrap Tokens
+  const contentGap = (0, _figmaVariablesResolver.getVariableByName)('emptyState/content/gap', modes) || 16;
+
+  // Title Tokens
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('emptyState/title/color', modes) || '#0d0d0f';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('emptyState/title/fontSize', modes) || 16;
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('emptyState/title/fontFamily', modes) || 'System';
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('emptyState/title/lineHeight', modes) || 18;
+  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('emptyState/title/fontWeight', modes) || 700;
+
+  // Body Tokens
+  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('emptyState/body/color', modes) || '#1a1c1f';
+  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('emptyState/body/fontSize', modes) || 12;
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('emptyState/body/fontFamily', modes) || 'System';
+  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('emptyState/body/lineHeight', modes) || 16;
+  const bodyFontWeight = (0, _figmaVariablesResolver.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 = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
+    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 = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+    label: "Button",
+    modes: modes
+  }), [modes]);
+  const buttonContent = buttonSlot || defaultButtonSlot;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: contentWrapStyle,
+      children: [iconContent, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          alignItems: 'center',
+          gap: 0
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: {
+            alignItems: 'center'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: titleStyle,
+            children: title
+          }), description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: bodyStyle,
+            children: description
+          }) : null]
+        })
+      })]
+    }), buttonContent]
+  });
+}
+var _default = exports.default = EmptyState;
+//# sourceMappingURL=EmptyState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_figmaVariablesResolver","_JFSThemeProvider","_IconCapsule","_interopRequireDefault","_Button","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","EmptyState","title","description","iconSlot","buttonSlot","modes","propModes","style","testID","globalModes","useTokens","gap","getVariableByName","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","useMemo","jsx","iconContent","defaultButtonSlot","label","buttonContent","jsxs","View","children","Text","_default","exports"],"sourceRoot":"../../../../src","sources":["components/EmptyState/EmptyState.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,YAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,OAAA,GAAAD,sBAAA,CAAAL,OAAA;AAAqC,IAAAO,WAAA,GAAAP,OAAA;AAAA,SAAAK,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAT,wBAAAS,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAb,uBAAA,YAAAA,CAAAS,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AA+BrC;AACA;AACA;AACA;AACA;AACA,SAASgB,UAAUA,CAAC;EAChBC,KAAK,GAAG,qBAAqB;EAC7BC,WAAW,GAAG,iDAAiD;EAC/DC,QAAQ;EACRC,UAAU;EACVC,KAAK,EAAEC,SAAS,GAAG,CAAC,CAAC;EACrBC,KAAK;EACLC;AACa,CAAC,EAAE;EAChB,MAAM;IAAEH,KAAK,EAAEI;EAAY,CAAC,GAAG,IAAAC,2BAAS,EAAC,CAAC;EAC1C,MAAML,KAAK,GAAG;IAAE,GAAGI,WAAW;IAAE,GAAGH;EAAU,CAAC;;EAE9C;EACA,MAAMK,GAAG,GAAG,IAAAC,yCAAiB,EAAC,gBAAgB,EAAEP,KAAK,CAAC,IAAI,EAAE;EAC5D,MAAMQ,OAAO,GAAG,IAAAD,yCAAiB,EAAC,oBAAoB,EAAEP,KAAK,CAAC,IAAI,CAAC;EACnE,MAAMS,MAAM,GAAG,IAAAF,yCAAiB,EAAC,mBAAmB,EAAEP,KAAK,CAAC,IAAI,EAAE;;EAElE;EACA,MAAMU,UAAU,GAAG,IAAAH,yCAAiB,EAAC,wBAAwB,EAAEP,KAAK,CAAC,IAAI,EAAE;;EAE3E;EACA,MAAMW,UAAU,GAAG,IAAAJ,yCAAiB,EAAC,wBAAwB,EAAEP,KAAK,CAAC,IAAI,SAAS;EAClF,MAAMY,aAAa,GAAG,IAAAL,yCAAiB,EAAC,2BAA2B,EAAEP,KAAK,CAAC,IAAI,EAAE;EACjF,MAAMa,eAAe,GAAG,IAAAN,yCAAiB,EAAC,6BAA6B,EAAEP,KAAK,CAAC,IAAI,QAAQ;EAC3F,MAAMc,eAAe,GAAG,IAAAP,yCAAiB,EAAC,6BAA6B,EAAEP,KAAK,CAAC,IAAI,EAAE;EACrF,MAAMe,eAAe,GAAG,IAAAR,yCAAiB,EAAC,6BAA6B,EAAEP,KAAK,CAAC,IAAI,GAAG;;EAEtF;EACA,MAAMgB,SAAS,GAAG,IAAAT,yCAAiB,EAAC,uBAAuB,EAAEP,KAAK,CAAC,IAAI,SAAS;EAChF,MAAMiB,YAAY,GAAG,IAAAV,yCAAiB,EAAC,0BAA0B,EAAEP,KAAK,CAAC,IAAI,EAAE;EAC/E,MAAMkB,cAAc,GAAG,IAAAX,yCAAiB,EAAC,4BAA4B,EAAEP,KAAK,CAAC,IAAI,QAAQ;EACzF,MAAMmB,cAAc,GAAG,IAAAZ,yCAAiB,EAAC,4BAA4B,EAAEP,KAAK,CAAC,IAAI,EAAE;EACnF,MAAMoB,cAAc,GAAG,IAAAb,yCAAiB,EAAC,4BAA4B,EAAEP,KAAK,CAAC,IAAI,GAAG;EAGpF,MAAMqB,cAAyB,GAAG;IAC9BC,aAAa,EAAE,QAAQ;IACvBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxBlB,GAAG,EAAEA,GAAG;IACRE,OAAO,EAAEA,OAAO;IAChBiB,YAAY,EAAEhB;IACd;IACA;IACA;EACJ,CAAC;EAED,MAAMiB,gBAA2B,GAAG;IAChCJ,aAAa,EAAE,QAAQ;IACvBC,UAAU,EAAE,QAAQ;IACpBjB,GAAG,EAAEI,UAAU;IACfiB,KAAK,EAAE;EACX,CAAC;EAED,MAAMC,UAAqB,GAAG;IAC1BC,KAAK,EAAElB,UAAU;IACjBmB,QAAQ,EAAElB,aAAa;IACvBmB,UAAU,EAAElB,eAAe;IAC3BmB,UAAU,EAAElB,eAAe;IAC3BmB,UAAU,EAAEC,MAAM,CAACnB,eAAe,CAA4B;IAC9DoB,SAAS,EAAE;EACf,CAAC;EAED,MAAMC,SAAoB,GAAG;IACzBP,KAAK,EAAEb,SAAS;IAChBc,QAAQ,EAAEb,YAAY;IACtBc,UAAU,EAAEb,cAAc;IAC1Bc,UAAU,EAAEb,cAAc;IAC1Bc,UAAU,EAAEC,MAAM,CAACd,cAAc,CAA4B;IAC7De,SAAS,EAAE;EACf,CAAC;EAED,MAAME,eAAe,GAAG,IAAAC,cAAO,EAAC,mBAC5B,IAAA/D,WAAA,CAAAgE,GAAA,EAACnE,YAAA,CAAAM,OAAW;IAACsB,KAAK,EAAEA;EAAM,CAAE,CAC/B,EAAE,CAACA,KAAK,CAAC,CAAC;;EAEX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAEA,MAAMwC,WAAW,GAAG1C,QAAQ,IAAIuC,eAAe;EAE/C,MAAMI,iBAAiB,GAAG,IAAAH,cAAO,EAAC,mBAC9B,IAAA/D,WAAA,CAAAgE,GAAA,EAACjE,OAAA,CAAAI,OAAM;IAACgE,KAAK,EAAC,QAAQ;IAAC1C,KAAK,EAAEA;EAAM,CAAE,CACzC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,MAAM2C,aAAa,GAAG5C,UAAU,IAAI0C,iBAAiB;EAErD,oBACI,IAAAlE,WAAA,CAAAqE,IAAA,EAAC3E,YAAA,CAAA4E,IAAI;IAAC3C,KAAK,EAAE,CAACmB,cAAc,EAAEnB,KAAK,CAAE;IAACC,MAAM,EAAEA,MAAO;IAAA2C,QAAA,gBACjD,IAAAvE,WAAA,CAAAqE,IAAA,EAAC3E,YAAA,CAAA4E,IAAI;MAAC3C,KAAK,EAAEwB,gBAAiB;MAAAoB,QAAA,GAEzBN,WAAW,eAGZ,IAAAjE,WAAA,CAAAgE,GAAA,EAACtE,YAAA,CAAA4E,IAAI;QAAC3C,KAAK,EAAE;UAAEqB,UAAU,EAAE,QAAQ;UAAEjB,GAAG,EAAE;QAAE,CAAE;QAAAwC,QAAA,eA0B1C,IAAAvE,WAAA,CAAAqE,IAAA,EAAC3E,YAAA,CAAA4E,IAAI;UAAC3C,KAAK,EAAE;YAAEqB,UAAU,EAAE;UAAS,CAAE;UAAAuB,QAAA,gBAClC,IAAAvE,WAAA,CAAAgE,GAAA,EAACtE,YAAA,CAAA8E,IAAI;YAAC7C,KAAK,EAAE0B,UAAW;YAAAkB,QAAA,EAAElD;UAAK,CAAO,CAAC,EACtCC,WAAW,gBAAG,IAAAtB,WAAA,CAAAgE,GAAA,EAACtE,YAAA,CAAA8E,IAAI;YAAC7C,KAAK,EAAEkC,SAAU;YAAAU,QAAA,EAAEjD;UAAW,CAAO,CAAC,GAAG,IAAI;QAAA,CAChE;MAAC,CACL,CAAC;IAAA,CACL,CAAC,EAGN8C,aAAa;EAAA,CACZ,CAAC;AAEf;AAAC,IAAAK,QAAA,GAAAC,OAAA,CAAAvE,OAAA,GAEciB,UAAU","ignoreList":[]}

package/lib/commonjs/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/commonjs/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/commonjs/components/HStack/HStack.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.HStack = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * HStack component for horizontal layout using design token spacing.
+ */
+const HStack = ({
+  children,
+  alignVertical,
+  justifyHorizontal,
+  wrap,
+  reverse = false,
+  as,
+  modes: propModes = {},
+  style,
+  ...rest
+}) => {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('hstack/padding/top', modes);
+  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('hstack/padding/bottom', modes);
+  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('hstack/padding/left', modes);
+  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('hstack/padding/right', modes);
+  const gap = (0, _figmaVariablesResolver.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 ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : null;
+  const viewProps = {
+    ...rest,
+    as
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    ...viewProps,
+    children: processedChildren
+  });
+};
+exports.HStack = HStack;
+var _default = exports.default = HStack;
+//# sourceMappingURL=HStack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_JFSThemeProvider","_reactUtils","_jsxRuntime","e","__esModule","default","HStack","children","alignVertical","justifyHorizontal","wrap","reverse","as","modes","propModes","style","rest","globalModes","useTokens","paddingTop","getVariableByName","paddingBottom","paddingLeft","paddingRight","gap","flexWrap","containerStyle","flexDirection","alignItems","justifyContent","processedChildren","cloneChildrenWithModes","viewProps","jsx","View","exports","_default"],"sourceRoot":"../../../../src","sources":["components/HStack/HStack.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AAAgE,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAD,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAoChE;AACA;AACA;AACO,MAAMG,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,GAAG,IAAAC,2BAAS,EAAC,CAAC;EAC1C,MAAML,KAAK,GAAG;IAAE,GAAGI,WAAW;IAAE,GAAGH;EAAU,CAAC;EAE9C,MAAMK,UAAU,GAAG,IAAAC,yCAAiB,EAAC,oBAAoB,EAAEP,KAAK,CAAC;EACjE,MAAMQ,aAAa,GAAG,IAAAD,yCAAiB,EAAC,uBAAuB,EAAEP,KAAK,CAAC;EACvE,MAAMS,WAAW,GAAG,IAAAF,yCAAiB,EAAC,qBAAqB,EAAEP,KAAK,CAAC;EACnE,MAAMU,YAAY,GAAG,IAAAH,yCAAiB,EAAC,sBAAsB,EAAEP,KAAK,CAAC;EACrE,MAAMW,GAAG,GAAG,IAAAJ,yCAAiB,EAAC,YAAY,EAAEP,KAAK,CAAC;EAElD,MAAMY,QAAQ,GAAG,OAAOf,IAAI,KAAK,SAAS,GAAIA,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAIA,IAAI;EAE9E,MAAMgB,cAAyB,GAAG;IAC9BC,aAAa,EAAEhB,OAAO,GAAG,aAAa,GAAG,KAAK;IAC9CiB,UAAU,EAAEpB,aAAa;IACzBqB,cAAc,EAAEpB,iBAAiB;IACjCgB,QAAQ;IACRN,UAAU;IACVE,aAAa;IACbC,WAAW;IACXC,YAAY;IACZC;EACJ,CAAC;;EAED;EACA,MAAMM,iBAAiB,GAAGvB,QAAQ,GAC5B,IAAAwB,kCAAsB,EAACxB,QAAQ,EAAEM,KAAK,CAAC,GACvC,IAAI;EAEV,MAAMmB,SAAS,GAAG;IACd,GAAGhB,IAAI;IACPJ;EACJ,CAAC;EAED,oBACI,IAAAV,WAAA,CAAA+B,GAAA,EAACnC,YAAA,CAAAoC,IAAI;IAACnB,KAAK,EAAE,CAACW,cAAc,EAAEX,KAAK,CAAE;IAAA,GAAKiB,SAAS;IAAAzB,QAAA,EAC9CuB;EAAiB,CAChB,CAAC;AAEf,CAAC;AAAAK,OAAA,CAAA7B,MAAA,GAAAA,MAAA;AAAA,IAAA8B,QAAA,GAAAD,OAAA,CAAA9B,OAAA,GAEcC,MAAM","ignoreList":[]}