jfs-components 0.0.6 → 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.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.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';

package/lib/commonjs/components/CardFeedback/CardFeedback.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 CardFeedbackStories from './CardFeedback.stories';
 import CardFeedback from './CardFeedback';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -21,6 +21,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.Brand
 - **Modes:** Primary | Secondary | Neutral
 - **Default:** Primary

package/lib/commonjs/components/ChipGroup/ChipGroup.js

@@ -0,0 +1,54 @@
+"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 }; }
+/**
+ * ChipGroup component that handles layout and spacing for ChipSelect components.
+ * Based on Figma Node 1905-5123.
+ */
+function ChipGroup({
+  children,
+  modes = {},
+  style,
+  testID
+}) {
+  // --- Token Resolution ---
+  const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipGroup/gap', modes), 10) || 8;
+
+  // --- Styles ---
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    flexWrap: 'wrap',
+    gap: gap
+  };
+
+  // Clone children to pass `modes` prop
+  const childrenWithModes = _react.default.Children.map(children, child => {
+    if (/*#__PURE__*/_react.default.isValidElement(child)) {
+      // Pass merged modes (parent modes + child modes)
+      // Note: We don't have access to child's existing props here to merge modes perfectly if they were passed directly to child
+      // But usually we want parent modes to override or augment.
+      // For now, simpler approach: just pass the parent modes, assuming child will handle merging if it needs to.
+      // Actually, based on previous ButtonGroup example, we just pass { modes: modes }.
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        modes: modes
+      });
+    }
+    return child;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    testID: testID,
+    children: childrenWithModes
+  });
+}
+var _default = exports.default = ChipGroup;
+//# sourceMappingURL=ChipGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_jsxRuntime","e","__esModule","default","ChipGroup","children","modes","style","testID","gap","parseInt","getVariableByName","containerStyle","flexDirection","alignItems","flexWrap","childrenWithModes","React","Children","map","child","isValidElement","cloneElement","jsx","View","_default","exports"],"sourceRoot":"../../../../src","sources":["components/ChipGroup/ChipGroup.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AAAiF,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAuBjF;AACA;AACA;AACA;AACA,SAASG,SAASA,CAAC;EACfC,QAAQ;EACRC,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK;EACLC;AACY,CAAC,EAAE;EACf;EACA,MAAMC,GAAG,GAAGC,QAAQ,CAAC,IAAAC,yCAAiB,EAAC,eAAe,EAAEL,KAAK,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC;;EAExE;EACA,MAAMM,cAAyB,GAAG;IAC9BC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,YAAY;IACxBC,QAAQ,EAAE,MAAM;IAChBN,GAAG,EAAEA;EACT,CAAC;;EAED;EACA,MAAMO,iBAAiB,GAAGC,cAAK,CAACC,QAAQ,CAACC,GAAG,CAACd,QAAQ,EAAGe,KAAK,IAAK;IAC9D,iBAAIH,cAAK,CAACI,cAAc,CAACD,KAAK,CAAC,EAAE;MAC7B;MACA;MACA;MACA;MACA;MACA,oBAAOH,cAAK,CAACK,YAAY,CAACF,KAAK,EAAE;QAAEd,KAAK,EAAEA;MAAM,CAAQ,CAAC;IAC7D;IACA,OAAOc,KAAK;EAChB,CAAC,CAAC;EAEF,oBACI,IAAApB,WAAA,CAAAuB,GAAA,EAACzB,YAAA,CAAA0B,IAAI;IAACjB,KAAK,EAAE,CAACK,cAAc,EAAEL,KAAK,CAAE;IAACC,MAAM,EAAEA,MAAO;IAAAH,QAAA,EAChDW;EAAiB,CAChB,CAAC;AAEf;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAvB,OAAA,GAEcC,SAAS","ignoreList":[]}

package/lib/commonjs/components/ChipGroup/ChipGroup.mdx

@@ -0,0 +1,40 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Story } from '@storybook/addon-docs';
+import * as ChipGroupStories from './ChipGroup.stories';
+
+<Meta of={ChipGroupStories} />
+
+<Title />
+<Subtitle />
+<Description />
+
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+```tsx
+import { ChipGroup } from 'jfs-components';
+import { ChipSelect } from 'jfs-components';
+
+const MyComponent = () => (
+  <ChipGroup>
+    <ChipSelect label="Option 1" />
+    <ChipSelect label="Option 2" />
+    <ChipSelect label="Option 3" />
+  </ChipGroup>
+);
+```
+
+<Primary />
+<Controls />
+<Stories />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`chipGroup/gap`**
+
+All tokens support mode-based theming through the `modes` prop.