jfs-components 0.0.5 → 0.0.7

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":"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","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":[]}

package/lib/commonjs/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/commonjs/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>

package/lib/commonjs/components/IconCapsule/IconCapsule.js

@@ -7,6 +7,7 @@ exports.default = 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 _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -40,18 +41,25 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 function IconCapsule({
   iconName = "ic_card",
-  modes = {},
+  modes: propModes = {},
   accessibilityLabel,
   accessibilityRole = "image",
   ...rest
 }) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
   // Resolve design tokens using the provided modes
   const size = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/size', modes) || 42;
   const radius = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/radius', modes) || 9999;
   const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/background', modes) || '#cfa159';
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsuleborder/color', modes) || 'rgba(255,255,255,0)';
-  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('iconCapsuleborder/size', modes) || 1;
-  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsuleicon/color', modes) || '#0f0d0a';
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/border/color', modes) || 'rgba(255,255,255,0)';
+  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/border/size', modes) || 1;
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/icon/color', modes) || '#0f0d0a';
   const iconSize = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/icon/size', modes) || 18;
 
   // Convert radius to React Native format (if 9999, use size/2 for perfect circle)

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_Icon","_jsxRuntime","e","__esModule","default","IconCapsule","iconName","modes","accessibilityLabel","accessibilityRole","rest","size","getVariableByName","radius","backgroundColor","borderColor","borderSize","iconColor","iconSize","borderRadius","containerStyle","width","height","borderWidth","overflow","alignItems","justifyContent","defaultAccessibilityLabel","replace","l","toUpperCase","jsx","View","style","children","name","color","accessibilityElementsHidden","importantForAccessibility","_default","exports"],"sourceRoot":"../../../../src","sources":["components/IconCapsule/IconCapsule.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAAmC,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AASnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,WAAWA,CAAC;EACnBC,QAAQ,GAAG,SAAS;EACpBC,KAAK,GAAG,CAAC,CAAC;EACVC,kBAAkB;EAClBC,iBAAiB,GAAG,OAAO;EAC3B,GAAGC;AACa,CAAC,EAAE;EACnB;EACA,MAAMC,IAAI,GAAG,IAAAC,yCAAiB,EAAC,kBAAkB,EAAEL,KAAK,CAAC,IAAI,EAAE;EAC/D,MAAMM,MAAM,GAAG,IAAAD,yCAAiB,EAAC,oBAAoB,EAAEL,KAAK,CAAC,IAAI,IAAI;EACrE,MAAMO,eAAe,GAAG,IAAAF,yCAAiB,EAAC,wBAAwB,EAAEL,KAAK,CAAC,IAAI,SAAS;EACvF,MAAMQ,WAAW,GAAG,IAAAH,yCAAiB,EAAC,yBAAyB,EAAEL,KAAK,CAAC,IAAI,qBAAqB;EAChG,MAAMS,UAAU,GAAG,IAAAJ,yCAAiB,EAAC,wBAAwB,EAAEL,KAAK,CAAC,IAAI,CAAC;EAC1E,MAAMU,SAAS,GAAG,IAAAL,yCAAiB,EAAC,uBAAuB,EAAEL,KAAK,CAAC,IAAI,SAAS;EAChF,MAAMW,QAAQ,GAAG,IAAAN,yCAAiB,EAAC,uBAAuB,EAAEL,KAAK,CAAC,IAAI,EAAE;;EAExE;EACA,MAAMY,YAAY,GAAGN,MAAM,KAAK,IAAI,GAAGF,IAAI,GAAG,CAAC,GAAGE,MAAM;;EAExD;EACA,MAAMO,cAAyB,GAAG;IAChCC,KAAK,EAAEV,IAAI;IACXW,MAAM,EAAEX,IAAI;IACZQ,YAAY,EAAEA,YAAY;IAC1BI,WAAW,EAAEP,UAAU;IACvBD,WAAW,EAAEA,WAAW;IACxBD,eAAe,EAAEA,eAAe;IAChCU,QAAQ,EAAE,QAAQ;IAClBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;;EAED;EACA,MAAMC,yBAAyB,GAAGnB,kBAAkB,IAAIF,QAAQ,CAACsB,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAACA,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAACA,OAAO,CAAC,OAAO,EAAEC,CAAC,IAAIA,CAAC,CAACC,WAAW,CAAC,CAAC,CAAC;EAE9I,oBACE,IAAA7B,WAAA,CAAA8B,GAAA,EAACjC,YAAA,CAAAkC,IAAI;IACHC,KAAK,EAAEb,cAAe;IACtBX,iBAAiB,EAAEA,iBAAkB;IACrCD,kBAAkB,EAAEmB,yBAA0B;IAAA,GAC1CjB,IAAI;IAAAwB,QAAA,eAER,IAAAjC,WAAA,CAAA8B,GAAA,EAAC/B,KAAA,CAAAI,OAAI;MACH+B,IAAI,EAAE7B,QAAS;MACfK,IAAI,EAAEO,QAAS;MACfkB,KAAK,EAAEnB,SAAU;MACjBoB,2BAA2B,EAAE,IAAK;MAClCC,yBAAyB,EAAC;IAAI,CAC/B;EAAC,CACE,CAAC;AAEX;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAApC,OAAA,GAEcC,WAAW","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_JFSThemeProvider","_Icon","_jsxRuntime","e","__esModule","default","IconCapsule","iconName","modes","propModes","accessibilityLabel","accessibilityRole","rest","globalModes","useTokens","size","getVariableByName","radius","backgroundColor","borderColor","borderSize","iconColor","iconSize","borderRadius","containerStyle","width","height","borderWidth","overflow","alignItems","justifyContent","defaultAccessibilityLabel","replace","l","toUpperCase","jsx","View","style","children","name","color","accessibilityElementsHidden","importantForAccessibility","_default","exports"],"sourceRoot":"../../../../src","sources":["components/IconCapsule/IconCapsule.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/IconCapsule/IconCapsule.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 IconCapsuleStories from './IconCapsule.stories';
 import IconCapsule from './IconCapsule';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -17,6 +17,10 @@ This component uses the following design token collections. Each collection supp
 - **Modes:** M | L | S
 - **Default:** M
 
+### Emphasis
+- **Modes:** High | Medium | Low
+- **Default:** High
+
 ### Appearance.Brand
 - **Modes:** Primary | Secondary | Neutral
 - **Default:** Primary
@@ -24,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>
@@ -62,11 +70,11 @@ This component uses the following design token collections. Each collection supp
 This component uses the following design tokens, resolved through `getVariableByName`:
 
 - **`iconCapsule/background`**
+- **`iconCapsule/border/color`**
+- **`iconCapsule/border/size`**
+- **`iconCapsule/icon/color`**
 - **`iconCapsule/icon/size`**
 - **`iconCapsule/radius`**
 - **`iconCapsule/size`**
-- **`iconCapsuleborder/color`**
-- **`iconCapsuleborder/size`**
-- **`iconCapsuleicon/color`**
 
 All tokens support mode-based theming through the `modes` prop.

package/lib/commonjs/components/Introduction.mdx

@@ -1,102 +1,7 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Introduction" />
 
-# Welcome to React Native Storybook
-
-Welcome to the component library documentation for this React Native project. This Storybook instance provides comprehensive documentation and interactive examples of all components in the application.
-
-## What is Storybook?
-
-Storybook is a tool for building UI components in isolation. It makes development, testing, and documentation easier by providing a sandbox environment where you can:
-
-- **Develop components in isolation** - Build components without worrying about app-specific dependencies
-- **Test edge cases** - Easily test components with different props and states
-- **Document components** - Create living documentation that stays in sync with your code
-- **Share with your team** - Provide a visual reference for designers and developers
-
-## Documentation Contract
-
-Every component page now follows a consistent template:
-
-- **Accessibility** — how to label, hint, and expose roles/states so assistive tech users get the right cues.
-- **Anatomy** — key slots/parts you can compose or override (leading/trailing, slots, tokens).
-- **Usage Constraints** — safe overrides, layout expectations, and behaviors to avoid.
-
-Use these sections as a checklist when creating or reviewing stories so guidance stays close to the API.
-
-## Performance Panel
-
-A lightweight performance panel is enabled for all stories. Open the **Performance** addon in the Storybook toolbar to inspect mount/remount timings and interaction costs. Use it to:
-
-- Compare render timing between variants without creating extra stories.
-- Spot regressions when props or modes change.
-- Validate that heavy children (lists, drawers, sheets) still mount within budget.
-
-## Getting Started
-
-### Running Storybook
-
-#### For Web (Development)
-```bash
-yarn storybook-web
-```
-This will start Storybook on `http://localhost:6006`
-
-#### For React Native (iOS/Android)
-```bash
-# iOS
-yarn ios
-
-# Android
-yarn android
-```
-
-### Building Storybook for Production
-```bash
-yarn build:storybook-web
-```
-
-## Component Organization
-
-Components are organized in the `src/components` directory. Each component typically includes:
-
-- **Component file** - The main component implementation
-- **Story file** - Interactive examples and test cases
-- **Documentation** - Comprehensive documentation with usage examples
-
-## Available Components
-
-### Avatar
-- **Avatar** - A flexible avatar component that displays user profile pictures or monogram initials. Supports multiple size modes and is fully integrated with Figma design tokens.
-
-### IconCapsule
-- **IconCapsule** - A flexible icon capsule component that displays an icon within a styled circular or rounded container. Supports different icons and appearance modes, fully integrated with Figma design tokens.
-
-## Documentation Features
-
-This Storybook instance includes:
-
-- ✅ **Automatic documentation** - Generated from JSDoc comments and component metadata
-- ✅ **Interactive examples** - Live, editable component examples
-- ✅ **Props documentation** - Automatic props table generation
-- ✅ **MDX support** - Rich documentation with Markdown and JSX
-
-## Best Practices
-
-When creating new components:
-
-1. **Add JSDoc comments** - Document your components with JSDoc for automatic documentation
-2. **Create stories** - Add multiple stories showing different states and use cases
-3. **Use TypeScript/PropTypes** - Define prop types for better documentation
-4. **Write MDX docs** - Create comprehensive documentation pages when needed
-
-## Resources
-
-- [Storybook Documentation](https://storybook.js.org/)
-- [React Native Storybook](https://github.com/storybookjs/react-native)
-
----
-
-Happy coding! 🚀
+# Introduction
 
+Welcome to the JFS Components Library.

package/lib/commonjs/components/LazyList/LazyList.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 LazyListStories from './LazyList.stories';
 import LazyList from './LazyList';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';

package/lib/commonjs/components/ListGroup/ListGroup.js

@@ -7,41 +7,14 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Helper function to recursively clone children and pass modes prop to components that accept it.
  * This ensures that all child components in slots receive the modes prop from the parent.
- */function cloneChildrenWithModes(children, modes) {
-  const result = _react.default.Children.map(children, child => {
-    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
-      return child;
-    }
-
-    // Get existing children
-    const childChildren = child.props?.children;
-    const hasChildren = childChildren !== undefined && childChildren !== null;
-
-    // Clone the child with modes prop if it doesn't already have one
-    // or merge with existing modes if it does
-    // Merge order: parent modes first, then child's explicit modes override them
-    const existingModes = child.props?.modes;
-    const mergedModes = existingModes ? {
-      ...modes,
-      ...existingModes
-    } : modes;
-
-    // Recursively process children if they exist
-    const processedChildren = hasChildren ? cloneChildrenWithModes(_react.default.Children.toArray(childChildren), modes) : undefined;
+ */
 
-    // Clone element with modes and processed children
-    return /*#__PURE__*/_react.default.cloneElement(child, {
-      ...child.props,
-      modes: mergedModes
-    }, processedChildren);
-  });
-  return result || [];
-}
 /**
  * ListGroup component that mirrors the Figma "List Group" component.
  *
@@ -103,7 +76,7 @@ function ListGroup({
   };
 
   // Clone listGroupSlot children and pass modes to all children that accept it
-  const processedSlot = listGroupSlot ? cloneChildrenWithModes(_react.default.Children.toArray(listGroupSlot), modes) : null;
+  const processedSlot = listGroupSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(listGroupSlot), modes) : null;
 
   // Use provided accessibilityLabel or fall back to label
   const defaultAccessibilityLabel = accessibilityLabel || label || "List group";