jfs-components 0.0.5 → 0.0.7

package/lib/module/components/Balance/Balance.js

@@ -0,0 +1,72 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import MoneyValue from '../MoneyValue/MoneyValue';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 = getVariableByName('balance/gap', modes) ?? 6;
+
+  // Title styles
+  const titleColor = getVariableByName('balance/title/foreground', modes) ?? '#0c0d10';
+  const titleFontSize = getVariableByName('balance/title/fontSize', modes) ?? 14;
+  const titleFontFamily = getVariableByName('balance/title/fontFamily', modes) ?? 'System';
+  const titleLineHeight = getVariableByName('balance/title/lineHeight', modes) ?? 18;
+  const titleFontWeightValue = 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.Children.map(children, child => {
+    if (/*#__PURE__*/React.isValidElement(child)) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        modes
+      });
+    }
+    return child;
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    "data-node-id": "1986:6203",
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: titleStyle,
+      "data-node-id": "1986:2613",
+      children: title
+    }), children ? content : /*#__PURE__*/_jsx(MoneyValue, {
+      value: amount,
+      currency: currency,
+      modes: modes
+    })]
+  });
+}
+export default Balance;
+//# sourceMappingURL=Balance.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","getVariableByName","MoneyValue","jsx","_jsx","jsxs","_jsxs","Balance","title","amount","currency","modes","style","children","gap","titleColor","titleFontSize","titleFontFamily","titleLineHeight","titleFontWeightValue","titleFontWeight","toString","containerStyle","flexDirection","alignItems","titleStyle","color","fontSize","fontFamily","lineHeight","fontWeight","content","Children","map","child","isValidElement","cloneElement","value"],"sourceRoot":"../../../../src","sources":["components/Balance/Balance.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAwD,cAAc;AACzF,SAASC,iBAAiB,QAAQ,8CAA8C;AAChF,OAAOC,UAAU,MAAM,0BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAiCjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,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,GAAGb,iBAAiB,CAAC,aAAa,EAAEU,KAAK,CAAC,IAAI,CAAC;;EAExD;EACA,MAAMI,UAAU,GAAGd,iBAAiB,CAAC,0BAA0B,EAAEU,KAAK,CAAC,IAAI,SAAS;EACpF,MAAMK,aAAa,GAAGf,iBAAiB,CAAC,wBAAwB,EAAEU,KAAK,CAAC,IAAI,EAAE;EAC9E,MAAMM,eAAe,GAAGhB,iBAAiB,CAAC,0BAA0B,EAAEU,KAAK,CAAC,IAAI,QAAQ;EACxF,MAAMO,eAAe,GAAGjB,iBAAiB,CAAC,0BAA0B,EAAEU,KAAK,CAAC,IAAI,EAAE;EAClF,MAAMQ,oBAAoB,GAAGlB,iBAAiB,CAAC,0BAA0B,EAAEU,KAAK,CAAC,IAAI,GAAG;EACxF,MAAMS,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;IACxBV,GAAG,EAAEA;EACT,CAAC;EAED,MAAMW,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,GAAGjC,KAAK,CAACkC,QAAQ,CAACC,GAAG,CAACpB,QAAQ,EAAGqB,KAAK,IAAK;IACpD,iBAAIpC,KAAK,CAACqC,cAAc,CAACD,KAAK,CAAC,EAAE;MAC7B,oBAAOpC,KAAK,CAACsC,YAAY,CAACF,KAAK,EAAE;QAAEvB;MAAM,CAAQ,CAAC;IACtD;IACA,OAAOuB,KAAK;EAChB,CAAC,CAAC;EAEF,oBACI5B,KAAA,CAACP,IAAI;IAACa,KAAK,EAAE,CAACU,cAAc,EAAEV,KAAK,CAAE;IAAC,gBAAa,WAAW;IAAAC,QAAA,gBAC1DT,IAAA,CAACJ,IAAI;MAACY,KAAK,EAAEa,UAAW;MAAC,gBAAa,WAAW;MAAAZ,QAAA,EAC5CL;IAAK,CACJ,CAAC,EACNK,QAAQ,GACLkB,OAAO,gBAEP3B,IAAA,CAACF,UAAU;MACPmC,KAAK,EAAE5B,MAAO;MACdC,QAAQ,EAAEA,QAAS;MACnBC,KAAK,EAAEA;IAAM,CAChB,CACJ;EAAA,CACC,CAAC;AAEf;AAEA,eAAeJ,OAAO","ignoreList":[]}

package/lib/module/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/module/components/BottomNav/BottomNav.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import BottomNavItem from '../BottomNavItem/BottomNavItem';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -48,13 +49,20 @@ function BottomNav({
     label: 'Explore',
     iconName: 'ic_search'
   }],
-  modes = {},
+  modes: propModes = {},
   onItemPress,
   style,
   accessibilityLabel = "Bottom navigation",
   accessibilityHint,
   ...rest
 }) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
   // Resolve container styling tokens
   const backgroundColor = getVariableByName('bottomNav/background', modes) || '#ffffff';
   const borderColor = getVariableByName('bottomNav/border/color', modes) || '#cccfd1';

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

@@ -1 +1 @@
-{"version":3,"names":["React","View","getVariableByName","BottomNavItem","jsx","_jsx","BottomNav","items","key","label","iconName","modes","onItemPress","style","accessibilityLabel","accessibilityHint","rest","backgroundColor","borderColor","borderWidth","paddingTop","paddingBottom","paddingHorizontal","containerStyle","flexDirection","alignItems","borderTopWidth","borderTopColor","borderLeftWidth","borderRightWidth","borderBottomWidth","renderItem","item","itemModes","handlePress","onPress","undefined","onKeyPress","e","nativeEvent","disabled","flex","labelStyle","iconColor","iconSize","accessibilityRole","children","map"],"sourceRoot":"../../../../src","sources":["components/BottomNav/BottomNav.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","View","getVariableByName","useTokens","BottomNavItem","jsx","_jsx","BottomNav","items","key","label","iconName","modes","propModes","onItemPress","style","accessibilityLabel","accessibilityHint","rest","globalModes","backgroundColor","borderColor","borderWidth","paddingTop","paddingBottom","paddingHorizontal","containerStyle","flexDirection","alignItems","borderTopWidth","borderTopColor","borderLeftWidth","borderRightWidth","borderBottomWidth","renderItem","item","itemModes","handlePress","onPress","undefined","onKeyPress","e","nativeEvent","disabled","flex","labelStyle","iconColor","iconSize","accessibilityRole","children","map"],"sourceRoot":"../../../../src","sources":["components/BottomNav/BottomNav.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/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/module/components/BottomNavItem/BottomNavItem.js

@@ -3,6 +3,7 @@
 import React, { useState } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import Icon from '../../icons/Icon';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -31,7 +32,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 function BottomNavItem({
   iconName = 'ic_home',
   label = 'Home',
-  modes = {},
+  modes: propModes = {},
   onPress,
   disabled = false,
   style,
@@ -44,6 +45,13 @@ function BottomNavItem({
   webAccessibilityProps,
   ...rest
 }) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
   const [isFocused, setIsFocused] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const pressedStyle = {

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

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Pressable","Text","View","getVariableByName","Icon","usePressableWebSupport","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","BottomNavItem","iconName","label","modes","onPress","disabled","style","labelStyle","iconColor","iconColorOverride","iconSize","iconSizeOverride","accessibilityLabel","accessibilityHint","accessibilityState","webAccessibilityProps","rest","isFocused","setIsFocused","isHovered","setIsHovered","pressedStyle","opacity","focusStyle","borderBottomWidth","borderBottomColor","hoverStyle","gap","fontFamily","fontWeightRaw","fontWeight","toString","fontSize","lineHeight","labelColor","resolvedIconColor","resolvedIconSize","baseContainerStyle","alignItems","textStyle","color","textAlign","marginTop","defaultAccessibilityLabel","webProps","restProps","undefined","renderContent","children","name","size","accessibilityElementsHidden","importantForAccessibility","accessibilityRole","selected","onPressIn","e","onPressOut","onFocus","onBlur","onHoverIn","onHoverOut","pressed"],"sourceRoot":"../../../../src","sources":["components/BottomNavItem/BottomNavItem.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","Pressable","Text","View","getVariableByName","useTokens","Icon","usePressableWebSupport","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","BottomNavItem","iconName","label","modes","propModes","onPress","disabled","style","labelStyle","iconColor","iconColorOverride","iconSize","iconSizeOverride","accessibilityLabel","accessibilityHint","accessibilityState","webAccessibilityProps","rest","globalModes","isFocused","setIsFocused","isHovered","setIsHovered","pressedStyle","opacity","focusStyle","borderBottomWidth","borderBottomColor","hoverStyle","gap","fontFamily","fontWeightRaw","fontWeight","toString","fontSize","lineHeight","labelColor","resolvedIconColor","resolvedIconSize","baseContainerStyle","alignItems","textStyle","color","textAlign","marginTop","defaultAccessibilityLabel","webProps","restProps","undefined","renderContent","children","name","size","accessibilityElementsHidden","importantForAccessibility","accessibilityRole","selected","onPressIn","e","onPressOut","onFocus","onBlur","onHoverIn","onHoverOut","pressed"],"sourceRoot":"../../../../src","sources":["components/BottomNavItem/BottomNavItem.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/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/module/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/module/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,59 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 = getVariableByName('buttonGroup/padding/gap', modes) ?? 12;
+  const paddingHorizontal = getVariableByName('buttonGroup/padding/horizontal', modes) ?? 0;
+  const paddingVertical = 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.Children.map(children, child => {
+    if (/*#__PURE__*/React.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.cloneElement(child, {
+        modes: modes
+      });
+    }
+    return child;
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    children: childrenWithModes
+  });
+}
+export default ButtonGroup;
+//# sourceMappingURL=ButtonGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","getVariableByName","jsx","_jsx","ButtonGroup","children","modes","style","gap","paddingHorizontal","paddingVertical","containerStyle","flexDirection","alignItems","childrenWithModes","Children","map","child","isValidElement","cloneElement"],"sourceRoot":"../../../../src","sources":["components/ButtonGroup/ButtonGroup.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACIC,IAAI,QAGD,cAAc;AACrB,SAASC,iBAAiB,QAAQ,8CAA8C;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAmBhF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,WAAWA,CAAC;EACjBC,QAAQ;EACRC,KAAK,GAAG,CAAC,CAAC;EACVC;AACc,CAAC,EAAE;EACjB;EACA,MAAMC,GAAG,GAAGP,iBAAiB,CAAC,yBAAyB,EAAEK,KAAK,CAAC,IAAI,EAAE;EACrE,MAAMG,iBAAiB,GAAGR,iBAAiB,CAAC,gCAAgC,EAAEK,KAAK,CAAC,IAAI,CAAC;EACzF,MAAMI,eAAe,GAAGT,iBAAiB,CAAC,8BAA8B,EAAEK,KAAK,CAAC,IAAI,CAAC;;EAErF;EACA,MAAMK,cAAyB,GAAG;IAC9BC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBL,GAAG,EAAEA,GAAG;IACRC,iBAAiB,EAAEA,iBAAiB;IACpCC,eAAe,EAAEA;EACrB,CAAC;;EAED;EACA,MAAMI,iBAAiB,GAAGf,KAAK,CAACgB,QAAQ,CAACC,GAAG,CAACX,QAAQ,EAAGY,KAAK,IAAK;IAC9D,iBAAIlB,KAAK,CAACmB,cAAc,CAACD,KAAK,CAAC,EAAE;MAC7B;MACA;MACA;MACA,oBAAOlB,KAAK,CAACoB,YAAY,CAACF,KAAK,EAAE;QAAEX,KAAK,EAAEA;MAAM,CAAQ,CAAC;IAC7D;IACA,OAAOW,KAAK;EAChB,CAAC,CAAC;EAEF,oBACId,IAAA,CAACH,IAAI;IAACO,KAAK,EAAE,CAACI,cAAc,EAAEJ,KAAK,CAAE;IAAAF,QAAA,EAChCS;EAAiB,CAChB,CAAC;AAEf;AAEA,eAAeV,WAAW","ignoreList":[]}

package/lib/module/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/module/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/module/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/module/components/ChipGroup/ChipGroup.js

@@ -0,0 +1,49 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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(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.Children.map(children, child => {
+    if (/*#__PURE__*/React.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.cloneElement(child, {
+        modes: modes
+      });
+    }
+    return child;
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    testID: testID,
+    children: childrenWithModes
+  });
+}
+export default ChipGroup;
+//# sourceMappingURL=ChipGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","getVariableByName","jsx","_jsx","ChipGroup","children","modes","style","testID","gap","parseInt","containerStyle","flexDirection","alignItems","flexWrap","childrenWithModes","Children","map","child","isValidElement","cloneElement"],"sourceRoot":"../../../../src","sources":["components/ChipGroup/ChipGroup.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAwC,cAAc;AACnE,SAASC,iBAAiB,QAAQ,8CAA8C;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAuBjF;AACA;AACA;AACA;AACA,SAASC,SAASA,CAAC;EACfC,QAAQ;EACRC,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK;EACLC;AACY,CAAC,EAAE;EACf;EACA,MAAMC,GAAG,GAAGC,QAAQ,CAACT,iBAAiB,CAAC,eAAe,EAAEK,KAAK,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC;;EAExE;EACA,MAAMK,cAAyB,GAAG;IAC9BC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,YAAY;IACxBC,QAAQ,EAAE,MAAM;IAChBL,GAAG,EAAEA;EACT,CAAC;;EAED;EACA,MAAMM,iBAAiB,GAAGhB,KAAK,CAACiB,QAAQ,CAACC,GAAG,CAACZ,QAAQ,EAAGa,KAAK,IAAK;IAC9D,iBAAInB,KAAK,CAACoB,cAAc,CAACD,KAAK,CAAC,EAAE;MAC7B;MACA;MACA;MACA;MACA;MACA,oBAAOnB,KAAK,CAACqB,YAAY,CAACF,KAAK,EAAE;QAAEZ,KAAK,EAAEA;MAAM,CAAQ,CAAC;IAC7D;IACA,OAAOY,KAAK;EAChB,CAAC,CAAC;EAEF,oBACIf,IAAA,CAACH,IAAI;IAACO,KAAK,EAAE,CAACI,cAAc,EAAEJ,KAAK,CAAE;IAACC,MAAM,EAAEA,MAAO;IAAAH,QAAA,EAChDU;EAAiB,CAChB,CAAC;AAEf;AAEA,eAAeX,SAAS","ignoreList":[]}

package/lib/module/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.

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

@@ -0,0 +1,98 @@
+"use strict";
+
+import React from 'react';
+import { Text, TouchableOpacity } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import Icon from '../../icons/Icon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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(getVariableByName('chipSelect/gap', resolvedModes), 10) || 4;
+  const paddingHorizontal = parseInt(getVariableByName('chipSelect/padding/horizontal', resolvedModes), 10) || 16;
+  const paddingVertical = parseInt(getVariableByName('chipSelect/padding/vertical', resolvedModes), 10) || 0;
+  const radius = parseInt(getVariableByName('chipSelect/radius', resolvedModes), 10) || 999;
+
+  // Background
+  const backgroundColor = getVariableByName('chipSelect/background', resolvedModes) || '#f5f5f5';
+
+  // Text Styles
+  const textColor = getVariableByName('chipSelect/foreground', resolvedModes) || '#0d0d0f';
+  const fontSize = parseInt(getVariableByName('chipSelect/fontSize', resolvedModes), 10) || 14;
+  const fontFamily = getVariableByName('chipSelect/fontFamily', resolvedModes) || 'JioType Var';
+  const lineHeight = parseInt(getVariableByName('chipSelect/lineHeight', resolvedModes), 10) || 32;
+  const fontWeight = getVariableByName('chipSelect/fontWeight', resolvedModes) || '700';
+
+  // Icon Styles
+  const iconSize = parseInt(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.isValidElement(labelSlot)) {
+        // Pass resolved modes to slot
+        return /*#__PURE__*/React.cloneElement(labelSlot, {
+          modes: resolvedModes
+        });
+      }
+      return labelSlot;
+    }
+    return /*#__PURE__*/_jsx(Text, {
+      style: textStyle,
+      children: label
+    });
+  };
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    style: [containerStyle, style],
+    onPress: onPress,
+    activeOpacity: 0.8,
+    children: [icon && /*#__PURE__*/_jsx(Icon, {
+      name: icon,
+      size: iconSize,
+      color: textColor
+    }), renderLabel(), active && close && /*#__PURE__*/_jsx(Icon, {
+      name: "ic_close",
+      size: iconSize,
+      color: textColor
+    })]
+  });
+}
+export default ChipSelect;
+//# sourceMappingURL=ChipSelect.js.map