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

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

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

package/lib/module/components/ChipSelect/ChipSelect.mdx

@@ -0,0 +1,80 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as ChipSelectStories from './ChipSelect.stories';
+
+<Meta of={ChipSelectStories} />
+
+<Title />
+<Subtitle>
+  A selection chip component that toggles between Idle and Active states.
+</Subtitle>
+
+<Description>
+  The `ChipSelect` component is used for making selections, such as dates or filters. 
+  It supports two states driven by the `active` prop:
+  - **Idle (`active={false}`)**: Customize with an icon and label.
+  - **Active (`active={true}`)**: Displays the label and a close icon. The start icon remains visible if provided.
+  
+  Styling is driven by Figma tokens via `getVariableByName`.
+</Description>
+
+<Primary />
+
+<Controls />
+
+
+## Available Collections and Modes
+
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
+
+### ChipSelect State
+- **Modes:** Idle | Active
+- **Default:** Idle
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+## Usage
+
+```tsx
+import ChipSelect from './ChipSelect';
+
+// Idle State (Icon + Label)
+<ChipSelect 
+  label="Select Date" 
+  active={false} 
+  icon="ic_calendar_week" 
+/>
+
+// Active State (Icon + Label + Close Icon)
+<ChipSelect 
+  label="12 Oct 2023" 
+  active={true}
+  icon="ic_calendar_week"
+  close={true}
+/>
+```
+
+<Stories />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`chipSelect/background`**
+- **`chipSelect/fontFamily`**
+- **`chipSelect/fontSize`**
+- **`chipSelect/fontWeight`**
+- **`chipSelect/foreground`**
+- **`chipSelect/gap`**
+- **`chipSelect/icon/size`**
+- **`chipSelect/lineHeight`**
+- **`chipSelect/padding/horizontal`**
+- **`chipSelect/padding/vertical`**
+- **`chipSelect/radius`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/module/components/CtaCard/CtaCard.js

@@ -6,6 +6,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import IconCapsule from '../IconCapsule/IconCapsule';
 import Button from '../Button/Button';
+import { cloneChildrenWithModes } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * CtaCard component that maps directly to the Figma design using design tokens.
@@ -86,35 +87,21 @@ function CtaCard({
     lineHeight: bodyLineHeight,
     fontWeight: '400' // Regular
   };
-
-  // --- Slot Helper ---
-  // Helper to clone element with modes if no modes are already present on it (standard in this library)
-  const renderSlot = slot => {
-    if (/*#__PURE__*/React.isValidElement(slot)) {
-      return /*#__PURE__*/React.cloneElement(slot, {
-        modes: {
-          ...modes,
-          ...slot.props.modes
-        }
-      });
-    }
-    return slot;
-  };
   return /*#__PURE__*/_jsxs(View, {
     style: [containerStyle, style],
     children: [/*#__PURE__*/_jsxs(View, {
       style: contentWrapStyle,
-      children: [iconSlot ? renderSlot(iconSlot) : /*#__PURE__*/_jsx(IconCapsule, {
+      children: [iconSlot ? cloneChildrenWithModes(iconSlot, modes) : /*#__PURE__*/_jsx(IconCapsule, {
         iconName: iconName,
         modes: modes
-      }), titleSlot ? renderSlot(titleSlot) : /*#__PURE__*/_jsx(Text, {
+      }), titleSlot ? cloneChildrenWithModes(titleSlot, modes) : /*#__PURE__*/_jsx(Text, {
         style: titleStyle,
         children: title
-      }), bodySlot ? renderSlot(bodySlot) : /*#__PURE__*/_jsx(Text, {
+      }), bodySlot ? cloneChildrenWithModes(bodySlot, modes) : /*#__PURE__*/_jsx(Text, {
         style: bodyStyle,
         children: body
       })]
-    }), buttonSlot ? renderSlot(buttonSlot) : /*#__PURE__*/_jsx(Button, {
+    }), buttonSlot ? cloneChildrenWithModes(buttonSlot, modes) : /*#__PURE__*/_jsx(Button, {
       label: buttonLabel,
       onPress: onPressButton || (() => {}),
       modes: modes