jfs-components 0.0.6 → 0.0.7

package/src/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/src/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/src/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/src/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/src/components/Balance/Balance.tsx

@@ -0,0 +1,107 @@
+import React from 'react'
+import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import MoneyValue from '../MoneyValue/MoneyValue'
+
+export type BalanceProps = {
+    /**
+     * Title text displayed above the balance amount.
+     * @default "Total owed to people"
+     */
+    title?: string;
+    /**
+     * Amount to display in the balance.
+     * @default "500"
+     */
+    amount?: string;
+    /**
+     * Currency symbol or code.
+     * @default "₹"
+     */
+    currency?: string;
+    /**
+     * Mode configuration for design tokens.
+     */
+    modes?: Record<string, any>;
+    /**
+     * Optional style overrides for the container.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Optional children content to render instead of the default MoneyValue.
+     * Use this slot for custom money value implementations.
+     */
+    children?: React.ReactNode;
+};
+
+/**
+ * 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,
+}: BalanceProps) {
+    // 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: ViewStyle = {
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: gap,
+    }
+
+    const titleStyle: TextStyle = {
+        color: titleColor,
+        fontSize: titleFontSize,
+        fontFamily: titleFontFamily,
+        lineHeight: titleLineHeight,
+        fontWeight: titleFontWeight as any,
+    }
+
+    // Handle slot children or default content
+    const content = React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+            return React.cloneElement(child, { modes } as any)
+        }
+        return child
+    })
+
+    return (
+        <View style={[containerStyle, style]} data-node-id="1986:6203">
+            <Text style={titleStyle} data-node-id="1986:2613">
+                {title}
+            </Text>
+            {children ? (
+                content
+            ) : (
+                <MoneyValue
+                    value={amount}
+                    currency={currency}
+                    modes={modes}
+                />
+            )}
+        </View>
+    )
+}
+
+export default Balance

package/src/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/src/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/src/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/src/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/src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import {
+    View,
+    type StyleProp,
+    type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+export type ButtonGroupProps = {
+    /**
+     * Child elements to be rendered inside the button group.
+     * Typically generic buttons or icon buttons.
+     */
+    children?: React.ReactNode;
+    /**
+     * Mode configuration for design tokens (e.g., {"Button / Size": "M", "Appearance": "high"})
+     * These modes are passed down to all child components.
+     */
+    modes?: Record<string, any>;
+    /**
+     * Additional styles for the container
+     */
+    style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * 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,
+}: ButtonGroupProps) {
+    // 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: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: gap,
+        paddingHorizontal: paddingHorizontal,
+        paddingVertical: paddingVertical,
+    }
+
+    // Clone children to pass `modes` prop
+    const childrenWithModes = React.Children.map(children, (child) => {
+        if (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 React.cloneElement(child, { modes: modes } as any)
+        }
+        return child
+    })
+
+    return (
+        <View style={[containerStyle, style]}>
+            {childrenWithModes}
+        </View>
+    )
+}
+
+export default ButtonGroup

package/src/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/src/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/src/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/src/components/ChipGroup/ChipGroup.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+
+export type ChipGroupProps = {
+    /**
+     * Child elements to be rendered inside the chip group.
+     * Expects ChipSelect components.
+     */
+    children?: React.ReactNode;
+    /**
+     * Mode configuration for design tokens.
+     * These modes are passed down to all child components.
+     */
+    modes?: Record<string, any>;
+    /**
+     * Additional styles for the container.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Test ID for testing.
+     */
+    testID?: string;
+};
+
+/**
+ * ChipGroup component that handles layout and spacing for ChipSelect components.
+ * Based on Figma Node 1905-5123.
+ */
+function ChipGroup({
+    children,
+    modes = {},
+    style,
+    testID,
+}: ChipGroupProps) {
+    // --- Token Resolution ---
+    const gap = parseInt(getVariableByName('chipGroup/gap', modes), 10) || 8;
+
+    // --- Styles ---
+    const containerStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        flexWrap: 'wrap',
+        gap: gap,
+    };
+
+    // Clone children to pass `modes` prop
+    const childrenWithModes = React.Children.map(children, (child) => {
+        if (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 React.cloneElement(child, { modes: modes } as any);
+        }
+        return child;
+    });
+
+    return (
+        <View style={[containerStyle, style]} testID={testID}>
+            {childrenWithModes}
+        </View>
+    );
+}
+
+export default ChipGroup;

package/src/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.