jfs-components 0.0.5 → 0.0.7

package/lib/commonjs/components/AppBar/AppBar.mdx

@@ -1,63 +1,75 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
 import * as AppBarStories from './AppBar.stories';
-import AppBar from './AppBar';
-import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
 
 <Meta of={AppBarStories} />
 
 # AppBar
 
-Helper function to recursively clone children and pass modes prop to components that accept it.
+The `AppBar` component supports two main types tailored for different hierarchy levels in the app:
+- **MainPage**: Taller bar, typically used on landing pages. Supports branding (leading), and varied actions.
+- **SubPage**: Standard height, used for inner pages. Typically features a "Back" arrow and a page title.
+
 
 ## Available Collections and Modes
 
-This component does not use any design token collections with multiple modes.
-## Usage
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
 
-<Canvas>
-  <Story of={AppBarStories.Default} />
-</Canvas>
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+## Usage
 
+```tsx
+import { AppBar } from 'jfs-components';
+// or relative path...
 
-<AccessibilitySection
-  items={[
-    'Set `accessibilityLabel` and `accessibilityHint` on AppBar/AppBarHome to describe the screen or navigation target.',
-    'Give every IconButton in leading/actions slots a readable label; pair with `onLeadingPress` for back/home navigation instead of relying on gestures.',
-    'Keep middle slot content informational only—the wrapper is hidden from the accessibility tree to avoid duplicate announcements.',
-    'Hide decorative icons from assistive tech by setting `accessibilityElementsHidden`/`importantForAccessibility` on custom elements.',
-  ]}
+// MainPage Example
+<AppBar
+  type="MainPage"
+  leadingSlot={<JioLogo />}
+  actionsSlot={
+    <>
+      <IconButton iconName="ic_search" />
+      <IconButton iconName="ic_notification" />
+      <Avatar />
+    </>
+  }
 />
 
-<AnatomySection>
-  <ul>
-    <li><strong>Leading</strong> — default back IconButton; replace with any element (receives merged `modes`).</li>
-    <li><strong>Middle slot</strong> — centered, non-interactive title/search content layered above the bar.</li>
-    <li><strong>Actions slot</strong> — right-aligned IconButtons; defaults to search and overflow buttons.</li>
-    <li><strong>AppBarHome</strong> — leading IconButton + actions + Avatar arranged on the right.</li>
-  </ul>
-</AnatomySection>
-
-<UsageConstraintsSection
-  items={[
-    'Pass shared `modes` so token-driven spacing and sizes stay consistent across slots and Avatar.',
-    'Avoid focusable controls in the middle slot; it is for display content and hidden from the accessibility tree.',
-    'Provide explicit `onLeadingPress`/`onPress` handlers to avoid inert navigation controls.',
-    'Override layout with `style` sparingly—keep token padding to preserve tap targets.',
-  ]}
+// SubPage Example
+<AppBar
+  type="SubPage"
+  // Default leading is back arrow, so leadingSlot can be omitted if that's desired
+  onLeadingPress={() => navigation.goBack()}
+  middleSlot={<Text style={{ fontWeight: 'bold' }}>Settings</Text>}
+  actionsSlot={<IconButton iconName="ic_more_horizontal" />}
 />
+```
+
 ## Props
 
-<ArgsTable of={AppBar} />
+<Controls />
+
+## Slots & Modes
+
+The `AppBar` automatically passes `modes` down to all children within `leadingSlot`, `middleSlot`, and `actionsSlot`.
+This ensures that if you switch the AppBar's mode (e.g. to Dark Mode), all buttons and text inside will adapt if they respect the `modes` prop.
 
 ## Design Tokens
 
 This component uses the following design tokens, resolved through `getVariableByName`:
 
-- **`appBarActions/actions/gap`**
-- **`appBarActions/padding/horizontal`**
-- **`appBarActions/padding/vertical`**
-- **`appBarHome/actions/gap`**
-- **`appBarHome/padding/horizontal`**
-- **`appBarHome/padding/vertical`**
+- **`appBar/mainPage/actions/gap`**
+- **`appBar/mainPage/background`**
+- **`appBar/mainPage/padding/horizontal`**
+- **`appBar/mainPage/padding/vertical`**
+- **`appBar/subPage/actions/gap`**
+- **`appBar/subPage/background`**
+- **`appBar/subPage/padding/horizontal`**
+- **`appBar/subPage/padding/vertical`**
 
 All tokens support mode-based theming through the `modes` prop.

package/lib/commonjs/components/Avatar/Avatar.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 AvatarStories from './Avatar.stories';
 import Avatar from './Avatar';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -13,6 +13,10 @@ Avatar component that displays either an image or a monogram.
 
 This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
 
+### Context4
+- **Modes:** Default | Chip
+- **Default:** Default
+
 ### Avatar Size
 - **Modes:** L | M | S
 - **Default:** L
@@ -20,6 +24,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/AvatarGroup/AvatarGroup.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 AvatarGroupStories from './AvatarGroup.stories';
 import AvatarGroup from './AvatarGroup';
 
@@ -12,9 +12,17 @@ AvatarGroup component with design-token-driven styling.
 
 This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
 
+### Context4
+- **Modes:** Default | Chip
+- **Default:** Default
+
 ### Avatar Size
 - **Modes:** L | M | S
 - **Default:** L
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 <Canvas>

package/lib/commonjs/components/Badge/Badge.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 BadgeStories from './Badge.stories';
 import Badge from './Badge';
 

package/lib/commonjs/components/Balance/Balance.js

@@ -0,0 +1,77 @@
+"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 _MoneyValue = _interopRequireDefault(require("../MoneyValue/MoneyValue"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Balance component that displays a title and a monetary value.
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <Balance title="Total Balance" amount="12500" />
+ * ```
+ */
+function Balance({
+  title = "Total owed to people",
+  amount = "500",
+  currency = "₹",
+  modes = {},
+  style,
+  children
+}) {
+  // Resolve design tokens
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('balance/gap', modes) ?? 6;
+
+  // Title styles
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('balance/title/foreground', modes) ?? '#0c0d10';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('balance/title/fontSize', modes) ?? 14;
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('balance/title/fontFamily', modes) ?? 'System';
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('balance/title/lineHeight', modes) ?? 18;
+  const titleFontWeightValue = (0, _figmaVariablesResolver.getVariableByName)('balance/title/fontWeight', modes) ?? 500;
+  const titleFontWeight = typeof titleFontWeightValue === 'number' ? titleFontWeightValue.toString() : titleFontWeightValue;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: gap
+  };
+  const titleStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    fontFamily: titleFontFamily,
+    lineHeight: titleLineHeight,
+    fontWeight: titleFontWeight
+  };
+
+  // Handle slot children or default content
+  const content = _react.default.Children.map(children, child => {
+    if (/*#__PURE__*/_react.default.isValidElement(child)) {
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        modes
+      });
+    }
+    return child;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    "data-node-id": "1986:6203",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: titleStyle,
+      "data-node-id": "1986:2613",
+      children: title
+    }), children ? content : /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoneyValue.default, {
+      value: amount,
+      currency: currency,
+      modes: modes
+    })]
+  });
+}
+var _default = exports.default = Balance;
+//# sourceMappingURL=Balance.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_MoneyValue","_jsxRuntime","e","__esModule","default","Balance","title","amount","currency","modes","style","children","gap","getVariableByName","titleColor","titleFontSize","titleFontFamily","titleLineHeight","titleFontWeightValue","titleFontWeight","toString","containerStyle","flexDirection","alignItems","titleStyle","color","fontSize","fontFamily","lineHeight","fontWeight","content","React","Children","map","child","isValidElement","cloneElement","jsxs","View","jsx","Text","value","_default","exports"],"sourceRoot":"../../../../src","sources":["components/Balance/Balance.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAAiD,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAiCjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,OAAOA,CAAC;EACbC,KAAK,GAAG,sBAAsB;EAC9BC,MAAM,GAAG,KAAK;EACdC,QAAQ,GAAG,GAAG;EACdC,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK;EACLC;AACU,CAAC,EAAE;EACb;EACA,MAAMC,GAAG,GAAG,IAAAC,yCAAiB,EAAC,aAAa,EAAEJ,KAAK,CAAC,IAAI,CAAC;;EAExD;EACA,MAAMK,UAAU,GAAG,IAAAD,yCAAiB,EAAC,0BAA0B,EAAEJ,KAAK,CAAC,IAAI,SAAS;EACpF,MAAMM,aAAa,GAAG,IAAAF,yCAAiB,EAAC,wBAAwB,EAAEJ,KAAK,CAAC,IAAI,EAAE;EAC9E,MAAMO,eAAe,GAAG,IAAAH,yCAAiB,EAAC,0BAA0B,EAAEJ,KAAK,CAAC,IAAI,QAAQ;EACxF,MAAMQ,eAAe,GAAG,IAAAJ,yCAAiB,EAAC,0BAA0B,EAAEJ,KAAK,CAAC,IAAI,EAAE;EAClF,MAAMS,oBAAoB,GAAG,IAAAL,yCAAiB,EAAC,0BAA0B,EAAEJ,KAAK,CAAC,IAAI,GAAG;EACxF,MAAMU,eAAe,GAAG,OAAOD,oBAAoB,KAAK,QAAQ,GAC1DA,oBAAoB,CAACE,QAAQ,CAAC,CAAC,GAC/BF,oBAAoB;EAE1B,MAAMG,cAAyB,GAAG;IAC9BC,aAAa,EAAE,QAAQ;IACvBC,UAAU,EAAE,YAAY;IACxBX,GAAG,EAAEA;EACT,CAAC;EAED,MAAMY,UAAqB,GAAG;IAC1BC,KAAK,EAAEX,UAAU;IACjBY,QAAQ,EAAEX,aAAa;IACvBY,UAAU,EAAEX,eAAe;IAC3BY,UAAU,EAAEX,eAAe;IAC3BY,UAAU,EAAEV;EAChB,CAAC;;EAED;EACA,MAAMW,OAAO,GAAGC,cAAK,CAACC,QAAQ,CAACC,GAAG,CAACtB,QAAQ,EAAGuB,KAAK,IAAK;IACpD,iBAAIH,cAAK,CAACI,cAAc,CAACD,KAAK,CAAC,EAAE;MAC7B,oBAAOH,cAAK,CAACK,YAAY,CAACF,KAAK,EAAE;QAAEzB;MAAM,CAAQ,CAAC;IACtD;IACA,OAAOyB,KAAK;EAChB,CAAC,CAAC;EAEF,oBACI,IAAAjC,WAAA,CAAAoC,IAAA,EAACvC,YAAA,CAAAwC,IAAI;IAAC5B,KAAK,EAAE,CAACW,cAAc,EAAEX,KAAK,CAAE;IAAC,gBAAa,WAAW;IAAAC,QAAA,gBAC1D,IAAAV,WAAA,CAAAsC,GAAA,EAACzC,YAAA,CAAA0C,IAAI;MAAC9B,KAAK,EAAEc,UAAW;MAAC,gBAAa,WAAW;MAAAb,QAAA,EAC5CL;IAAK,CACJ,CAAC,EACNK,QAAQ,GACLmB,OAAO,gBAEP,IAAA7B,WAAA,CAAAsC,GAAA,EAACvC,WAAA,CAAAI,OAAU;MACPqC,KAAK,EAAElC,MAAO;MACdC,QAAQ,EAAEA,QAAS;MACnBC,KAAK,EAAEA;IAAM,CAChB,CACJ;EAAA,CACC,CAAC;AAEf;AAAC,IAAAiC,QAAA,GAAAC,OAAA,CAAAvC,OAAA,GAEcC,OAAO","ignoreList":[]}

package/lib/commonjs/components/Balance/Balance.mdx

@@ -0,0 +1,62 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import Balance from './Balance';
+import * as BalanceStories from './Balance.stories';
+
+<Meta of={BalanceStories} />
+
+# Balance
+
+The `Balance` component displays a title and a monetary value, typically used to show total amounts or outstanding balances.
+
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+```tsx
+import { Balance } from 'jfs-components';
+
+// Basic usage
+<Balance 
+  title="Total owed to people" 
+  amount="50,000.67" 
+  currency="₹"
+/>
+
+// With modes
+<Balance 
+  title="Total Balance" 
+  amount="12,500.00"
+  modes={{ "Color Mode": "Dark" }}
+/>
+```
+
+## Props
+
+<ArgsTable of={Balance} />
+
+## Stories
+
+### Default
+<Canvas of={BalanceStories.Default} />
+
+### With Modes
+<Canvas of={BalanceStories.WithModes} />
+
+### Custom Slot
+<Canvas of={BalanceStories.CustomSlot} />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`balance/gap`**
+- **`balance/title/fontFamily`**
+- **`balance/title/fontSize`**
+- **`balance/title/fontWeight`**
+- **`balance/title/foreground`**
+- **`balance/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/commonjs/components/BottomNav/BottomNav.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 _BottomNavItem = _interopRequireDefault(require("../BottomNavItem/BottomNavItem"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -53,13 +54,20 @@ function BottomNav({
     label: 'Explore',
     iconName: 'ic_search'
   }],
-  modes = {},
+  modes: propModes = {},
   onItemPress,
   style,
   accessibilityLabel = "Bottom navigation",
   accessibilityHint,
   ...rest
 }) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
   // Resolve container styling tokens
   const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('bottomNav/background', modes) || '#ffffff';
   const borderColor = (0, _figmaVariablesResolver.getVariableByName)('bottomNav/border/color', modes) || '#cccfd1';

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_BottomNavItem","_jsxRuntime","e","__esModule","default","BottomNav","items","key","label","iconName","modes","onItemPress","style","accessibilityLabel","accessibilityHint","rest","backgroundColor","getVariableByName","borderColor","borderWidth","paddingTop","paddingBottom","paddingHorizontal","containerStyle","flexDirection","alignItems","borderTopWidth","borderTopColor","borderLeftWidth","borderRightWidth","borderBottomWidth","renderItem","item","itemModes","handlePress","onPress","jsx","undefined","onKeyPress","nativeEvent","disabled","flex","labelStyle","iconColor","iconSize","View","accessibilityRole","children","map","_default","exports"],"sourceRoot":"../../../../src","sources":["components/BottomNav/BottomNav.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAA0D,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAwB1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,SAASA,CAAC;EACjBC,KAAK,GAAG,CACN;IAAEC,GAAG,EAAE,MAAM;IAAEC,KAAK,EAAE,MAAM;IAAEC,QAAQ,EAAE;EAAU,CAAC,EACnD;IAAEF,GAAG,EAAE,UAAU;IAAEC,KAAK,EAAE,UAAU;IAAEC,QAAQ,EAAE;EAAW,CAAC,EAC5D;IAAEF,GAAG,EAAE,KAAK;IAAEC,KAAK,EAAE,KAAK;IAAEC,QAAQ,EAAE;EAAkB,CAAC,EACzD;IAAEF,GAAG,EAAE,QAAQ;IAAEC,KAAK,EAAE,QAAQ;IAAEC,QAAQ,EAAE;EAAgB,CAAC,EAC7D;IAAEF,GAAG,EAAE,SAAS;IAAEC,KAAK,EAAE,SAAS;IAAEC,QAAQ,EAAE;EAAY,CAAC,CAC5D;EACDC,KAAK,GAAG,CAAC,CAAC;EACVC,WAAW;EACXC,KAAK;EACLC,kBAAkB,GAAG,mBAAmB;EACxCC,iBAAiB;EACjB,GAAGC;AACW,CAAC,EAAE;EACjB;EACA,MAAMC,eAAe,GAAG,IAAAC,yCAAiB,EAAC,sBAAsB,EAAEP,KAAK,CAAC,IAAI,SAAS;EACrF,MAAMQ,WAAW,GAAG,IAAAD,yCAAiB,EAAC,wBAAwB,EAAEP,KAAK,CAAC,IAAI,SAAS;EACnF,MAAMS,WAAW,GAAG,IAAAF,yCAAiB,EAAC,wBAAwB,EAAEP,KAAK,CAAC,IAAI,CAAC;EAC3E,MAAMU,UAAU,GAAG,IAAAH,yCAAiB,EAAC,uBAAuB,EAAEP,KAAK,CAAC,IAAI,EAAE;EAC1E,MAAMW,aAAa,GAAG,IAAAJ,yCAAiB,EAAC,0BAA0B,EAAEP,KAAK,CAAC,IAAI,EAAE;EAChF,MAAMY,iBAAiB,GAAG,IAAAL,yCAAiB,EAAC,8BAA8B,EAAEP,KAAK,CAAC,IAAI,EAAE;EAExF,MAAMa,cAAyB,GAAG;IAChCC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBT,eAAe;IACfI,UAAU;IACVC,aAAa;IACbC,iBAAiB;IACjBI,cAAc,EAAEP,WAAW;IAC3BQ,cAAc,EAAET,WAAW;IAC3BU,eAAe,EAAE,CAAC;IAClBC,gBAAgB,EAAE,CAAC;IACnBC,iBAAiB,EAAE;EACrB,CAAC;EAED,MAAMC,UAAU,GAAIC,IAAuB,IAAK;IAC9C,MAAMC,SAAS,GAAGD,IAAI,CAACtB,KAAK,GAAG;MAAE,GAAGA,KAAK;MAAE,GAAGsB,IAAI,CAACtB;IAAM,CAAC,GAAGA,KAAK;IAClE,MAAMwB,WAAW,GAAGA,CAAA,KAAM;MACxB,IAAIF,IAAI,CAACG,OAAO,EAAE;QAChBH,IAAI,CAACG,OAAO,CAAC,CAAC;MAChB;MACA,IAAIxB,WAAW,EAAE;QACfA,WAAW,CAACqB,IAAI,CAAC;MACnB;IACF,CAAC;IAED,oBACE,IAAA/B,WAAA,CAAAmC,GAAA,EAACpC,cAAA,CAAAI,OAAa;MAAA,IAEP4B,IAAI,CAACvB,QAAQ,KAAK4B,SAAS,GAAG;QAAE5B,QAAQ,EAAEuB,IAAI,CAACvB;MAAS,CAAC,GAAG,CAAC,CAAC;MAAA,IAC9DuB,IAAI,CAACxB,KAAK,KAAK6B,SAAS,GAAG;QAAE7B,KAAK,EAAEwB,IAAI,CAACxB;MAAM,CAAC,GAAG,CAAC,CAAC;MAC1DE,KAAK,EAAEuB,SAAU;MAAA,IACXD,IAAI,CAACG,OAAO,KAAKE,SAAS,IAAI1B,WAAW,KAAK0B,SAAS,GAAI;QAC/DF,OAAO,EAAED,WAAW;QACpB;QACAI,UAAU,EAAGpC,CAAM,IAAK;UACtB,MAAMK,GAAG,GAAGL,CAAC,EAAEqC,WAAW,EAAEhC,GAAG,KAAKL,CAAC,EAAEK,GAAG,IAAI,EAAE,CAAC;UACjD,IAAIA,GAAG,KAAK,OAAO,IAAIA,GAAG,KAAK,GAAG,IAAIA,GAAG,KAAK,UAAU,EAAE;YACxD2B,WAAW,CAAC,CAAC;UACf;UACA;UAAEF,IAAI,EAAUM,UAAU,GAAGpC,CAAC,CAAC;QACjC;MACF,CAAC,GAAG,CAAC,CAAC;MAAA,IACD8B,IAAI,CAACQ,QAAQ,KAAKH,SAAS,GAAG;QAAEG,QAAQ,EAAER,IAAI,CAACQ;MAAS,CAAC,GAAG,CAAC,CAAC;MACnE5B,KAAK,EAAE,CAAC;QAAE6B,IAAI,EAAE;MAAE,CAAC,EAAET,IAAI,CAACpB,KAAK,CAAE;MAAA,IAC5BoB,IAAI,CAACU,UAAU,KAAKL,SAAS,GAAG;QAAEK,UAAU,EAAEV,IAAI,CAACU;MAAW,CAAC,GAAG,CAAC,CAAC;MAAA,IACpEV,IAAI,CAACW,SAAS,KAAKN,SAAS,GAAG;QAAEM,SAAS,EAAEX,IAAI,CAACW;MAAU,CAAC,GAAG,CAAC,CAAC;MAAA,IACjEX,IAAI,CAACY,QAAQ,KAAKP,SAAS,GAAG;QAAEO,QAAQ,EAAEZ,IAAI,CAACY;MAAS,CAAC,GAAG,CAAC,CAAC;IAAA,GAnB9DZ,IAAI,CAACzB,GAAG,IAAIyB,IAAI,CAACxB,KAoBvB,CAAC;EAEN,CAAC;EAED,oBACE,IAAAP,WAAA,CAAAmC,GAAA,EAACtC,YAAA,CAAA+C,IAAI;IACHjC,KAAK,EAAE,CAACW,cAAc,EAAEX,KAAK,CAAE;IAC/BkC,iBAAiB,EAAC,SAAS;IAC3BjC,kBAAkB,EAAEA,kBAAmB;IAAA,IAClCC,iBAAiB,KAAKuB,SAAS,GAAG;MAAEvB;IAAkB,CAAC,GAAG,CAAC,CAAC;IAAA,GAC7DC,IAAI;IAAAgC,QAAA,EAEPzC,KAAK,CAAC0C,GAAG,CAACjB,UAAU;EAAC,CAClB,CAAC;AAEX;AAAC,IAAAkB,QAAA,GAAAC,OAAA,CAAA9C,OAAA,GAEcC,SAAS","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_JFSThemeProvider","_BottomNavItem","_jsxRuntime","e","__esModule","default","BottomNav","items","key","label","iconName","modes","propModes","onItemPress","style","accessibilityLabel","accessibilityHint","rest","globalModes","useTokens","backgroundColor","getVariableByName","borderColor","borderWidth","paddingTop","paddingBottom","paddingHorizontal","containerStyle","flexDirection","alignItems","borderTopWidth","borderTopColor","borderLeftWidth","borderRightWidth","borderBottomWidth","renderItem","item","itemModes","handlePress","onPress","jsx","undefined","onKeyPress","nativeEvent","disabled","flex","labelStyle","iconColor","iconSize","View","accessibilityRole","children","map","_default","exports"],"sourceRoot":"../../../../src","sources":["components/BottomNav/BottomNav.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/BottomNav/BottomNav.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 BottomNavStories from './BottomNav.stories';
 import BottomNav from './BottomNav';
 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/BottomNavItem/BottomNavItem.js

@@ -7,6 +7,7 @@ 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 _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _webPlatformUtils = require("../../utils/web-platform-utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -37,7 +38,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function BottomNavItem({
   iconName = 'ic_home',
   label = 'Home',
-  modes = {},
+  modes: propModes = {},
   onPress,
   disabled = false,
   style,
@@ -50,6 +51,13 @@ function BottomNavItem({
   webAccessibilityProps,
   ...rest
 }) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [isHovered, setIsHovered] = (0, _react.useState)(false);
   const pressedStyle = {

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_figmaVariablesResolver","_Icon","_interopRequireDefault","_webPlatformUtils","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BottomNavItem","iconName","label","modes","onPress","disabled","style","labelStyle","iconColor","iconColorOverride","iconSize","iconSizeOverride","accessibilityLabel","accessibilityHint","accessibilityState","webAccessibilityProps","rest","isFocused","setIsFocused","useState","isHovered","setIsHovered","pressedStyle","opacity","focusStyle","borderBottomWidth","borderBottomColor","hoverStyle","gap","getVariableByName","fontFamily","fontWeightRaw","fontWeight","toString","fontSize","lineHeight","labelColor","resolvedIconColor","resolvedIconSize","baseContainerStyle","alignItems","textStyle","color","textAlign","marginTop","defaultAccessibilityLabel","webProps","usePressableWebSupport","restProps","undefined","renderContent","jsxs","Fragment","children","jsx","name","size","accessibilityElementsHidden","importantForAccessibility","Text","View","accessibilityRole","Pressable","selected","onPressIn","onPressOut","onFocus","onBlur","onHoverIn","onHoverOut","pressed","_default","exports"],"sourceRoot":"../../../../src","sources":["components/BottomNavItem/BottomNavItem.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_figmaVariablesResolver","_JFSThemeProvider","_Icon","_interopRequireDefault","_webPlatformUtils","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BottomNavItem","iconName","label","modes","propModes","onPress","disabled","style","labelStyle","iconColor","iconColorOverride","iconSize","iconSizeOverride","accessibilityLabel","accessibilityHint","accessibilityState","webAccessibilityProps","rest","globalModes","useTokens","isFocused","setIsFocused","useState","isHovered","setIsHovered","pressedStyle","opacity","focusStyle","borderBottomWidth","borderBottomColor","hoverStyle","gap","getVariableByName","fontFamily","fontWeightRaw","fontWeight","toString","fontSize","lineHeight","labelColor","resolvedIconColor","resolvedIconSize","baseContainerStyle","alignItems","textStyle","color","textAlign","marginTop","defaultAccessibilityLabel","webProps","usePressableWebSupport","restProps","undefined","renderContent","jsxs","Fragment","children","jsx","name","size","accessibilityElementsHidden","importantForAccessibility","Text","View","accessibilityRole","Pressable","selected","onPressIn","onPressOut","onFocus","onBlur","onHoverIn","onHoverOut","pressed","_default","exports"],"sourceRoot":"../../../../src","sources":["components/BottomNavItem/BottomNavItem.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/BottomNavItem/BottomNavItem.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 BottomNavItemStories from './BottomNavItem.stories';
 import BottomNavItem from './BottomNavItem';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -20,6 +20,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/Button/Button.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 ButtonStories from './Button.stories';
 import Button from './Button';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -29,6 +29,10 @@ This component uses the following design token collections. Each collection supp
 - **Modes:** Light | Dark
 - **Default:** Light
 
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+
 ### Appearance.System
 - **Modes:** positive | warning | negative
 - **Default:** positive

package/lib/commonjs/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,64 @@
+"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 _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * ButtonGroup component that aggregates multiple buttons (e.g., IconButton)
+ * and handles their layout and styling/theming via design tokens.
+ *
+ * It passes the provided `modes` to all its immediate React Element children.
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <ButtonGroup modes={{"Appearance": "light"}}>
+ *   <IconButton iconName="ic_qr_code" />
+ *   <IconButton iconName="ic_photo" />
+ * </ButtonGroup>
+ * ```
+ */
+function ButtonGroup({
+  children,
+  modes = {},
+  style
+}) {
+  // Resolve design tokens
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('buttonGroup/padding/gap', modes) ?? 12;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('buttonGroup/padding/horizontal', modes) ?? 0;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('buttonGroup/padding/vertical', modes) ?? 0;
+
+  // Container style
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: gap,
+    paddingHorizontal: paddingHorizontal,
+    paddingVertical: paddingVertical
+  };
+
+  // Clone children to pass `modes` prop
+  const childrenWithModes = _react.default.Children.map(children, child => {
+    if (/*#__PURE__*/_react.default.isValidElement(child)) {
+      // We safely try to pass `modes` to the child.
+      // If the child doesn't accept `modes`, it will just be an extra prop which is usually fine in React,
+      // but ideally children should be components that respect `modes`.
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        modes: modes
+      });
+    }
+    return child;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    children: childrenWithModes
+  });
+}
+var _default = exports.default = ButtonGroup;
+//# sourceMappingURL=ButtonGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_jsxRuntime","e","__esModule","default","ButtonGroup","children","modes","style","gap","getVariableByName","paddingHorizontal","paddingVertical","containerStyle","flexDirection","alignItems","childrenWithModes","React","Children","map","child","isValidElement","cloneElement","jsx","View","_default","exports"],"sourceRoot":"../../../../src","sources":["components/ButtonGroup/ButtonGroup.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAKA,IAAAE,uBAAA,GAAAF,OAAA;AAAgF,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAmBhF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,WAAWA,CAAC;EACjBC,QAAQ;EACRC,KAAK,GAAG,CAAC,CAAC;EACVC;AACc,CAAC,EAAE;EACjB;EACA,MAAMC,GAAG,GAAG,IAAAC,yCAAiB,EAAC,yBAAyB,EAAEH,KAAK,CAAC,IAAI,EAAE;EACrE,MAAMI,iBAAiB,GAAG,IAAAD,yCAAiB,EAAC,gCAAgC,EAAEH,KAAK,CAAC,IAAI,CAAC;EACzF,MAAMK,eAAe,GAAG,IAAAF,yCAAiB,EAAC,8BAA8B,EAAEH,KAAK,CAAC,IAAI,CAAC;;EAErF;EACA,MAAMM,cAAyB,GAAG;IAC9BC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBN,GAAG,EAAEA,GAAG;IACRE,iBAAiB,EAAEA,iBAAiB;IACpCC,eAAe,EAAEA;EACrB,CAAC;;EAED;EACA,MAAMI,iBAAiB,GAAGC,cAAK,CAACC,QAAQ,CAACC,GAAG,CAACb,QAAQ,EAAGc,KAAK,IAAK;IAC9D,iBAAIH,cAAK,CAACI,cAAc,CAACD,KAAK,CAAC,EAAE;MAC7B;MACA;MACA;MACA,oBAAOH,cAAK,CAACK,YAAY,CAACF,KAAK,EAAE;QAAEb,KAAK,EAAEA;MAAM,CAAQ,CAAC;IAC7D;IACA,OAAOa,KAAK;EAChB,CAAC,CAAC;EAEF,oBACI,IAAAnB,WAAA,CAAAsB,GAAA,EAACxB,YAAA,CAAAyB,IAAI;IAAChB,KAAK,EAAE,CAACK,cAAc,EAAEL,KAAK,CAAE;IAAAF,QAAA,EAChCU;EAAiB,CAChB,CAAC;AAEf;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAtB,OAAA,GAEcC,WAAW","ignoreList":[]}

package/lib/commonjs/components/ButtonGroup/ButtonGroup.mdx

@@ -0,0 +1,56 @@
+{/* ButtonGroup.mdx */}
+
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
+import * as ButtonGroupStories from './ButtonGroup.stories';
+
+<Meta of={ButtonGroupStories} />
+
+# Button Group
+
+A layout container that organizes multiple buttons (typically `IconButton`) in a horizontal row with consistent spacing as defined by design tokens.
+
+The `ButtonGroup` component automatically passes its `modes` prop down to all valid React children, ensuring that the entire group responds to theme or mode changes in unison.
+
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+```tsx
+import { ButtonGroup, IconButton } from 'jfs-components';
+
+function MyHeader() {
+  return (
+    <ButtonGroup modes={{ "Appearance": "dark" }}>
+        <IconButton iconName="ic_qr_code" />
+        <IconButton iconName="ic_photo" />
+    </ButtonGroup>
+  );
+}
+```
+
+## Props
+
+<Controls />
+
+## Examples
+
+### Default
+
+<Canvas of={ButtonGroupStories.Default} />
+
+### With Custom Modes
+
+<Canvas of={ButtonGroupStories.WithModes} />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`buttonGroup/padding/gap`**
+- **`buttonGroup/padding/horizontal`**
+- **`buttonGroup/padding/vertical`**
+
+All tokens support mode-based theming through the `modes` prop.

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