jfs-components 0.0.1 → 0.0.3

package/src/components/ActionFooter/ActionFooter.mdx

@@ -0,0 +1,101 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as ActionFooterStories from './ActionFooter.stories';
+import ActionFooter from './ActionFooter';
+
+<Meta of={ActionFooterStories} />
+
+# ActionFooter
+
+A fixed footer container for action buttons. Typically used at the bottom of screens to hold primary actions like `IconButton` and `Button` components.
+
+The ActionFooter provides consistent spacing, padding, and shadow styling for action areas at the bottom of your UI.
+
+## Props
+
+<ArgsTable of={ActionFooter} />
+
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+The default configuration shows the typical use case with an IconButton and two Button components:
+
+<Canvas>
+  <Story of={ActionFooterStories.Default} />
+</Canvas>
+
+## Examples
+
+### Single Button
+
+For simple confirmation flows, use a single full-width button:
+
+<Canvas>
+  <Story of={ActionFooterStories.SingleButton} />
+</Canvas>
+
+### Two Buttons
+
+Common pattern for cancel/confirm actions:
+
+<Canvas>
+  <Story of={ActionFooterStories.TwoButtons} />
+</Canvas>
+
+### With Multiple Icon Buttons
+
+For screens requiring multiple secondary actions alongside a primary button:
+
+<Canvas>
+  <Story of={ActionFooterStories.WithMultipleIconButtons} />
+</Canvas>
+
+## Component Usage
+
+```tsx
+import { ActionFooter, IconButton, Button } from 'jsf-components';
+
+function PaymentScreen() {
+  const modes = {};
+  const secondaryModes = { Appearance: 'secondary' };
+  const primaryModes = { Appearance: 'primary' };
+
+  return (
+    <View style={{ flex: 1 }}>
+      {/* Screen content */}
+      
+      <ActionFooter modes={modes}>
+        <IconButton iconName="ic_split" modes={modes} />
+        <Button 
+          label="Request" 
+          modes={secondaryModes} 
+          style={{ flex: 1 }} 
+        />
+        <Button 
+          label="Pay" 
+          modes={primaryModes} 
+          style={{ flex: 1 }} 
+        />
+      </ActionFooter>
+    </View>
+  );
+}
+```
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`actionFooter/background`**
+- **`actionFooter/gap`**
+- **`actionFooter/padding/bottom`**
+- **`actionFooter/padding/horizontal`**
+- **`actionFooter/padding/top`**
+
+All tokens support mode-based theming through the `modes` prop.
+## Accessibility
+
+The ActionFooter uses `accessibilityRole="toolbar"` to indicate it contains a group of action controls. Provide a meaningful `accessibilityLabel` to describe the footer's purpose to screen reader users.
+

package/src/components/ActionFooter/ActionFooter.tsx

@@ -0,0 +1,142 @@
+import React from 'react'
+import {
+  View,
+  type ViewStyle,
+  type StyleProp,
+  Platform,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+export type ActionFooterProps = {
+  /**
+   * Content to render inside the action footer slot.
+   * Typically includes IconButton and Button components.
+   */
+  children?: React.ReactNode
+  /**
+   * Mode configuration passed to the token resolver.
+   * Pass the same modes to children components for consistent theming.
+   */
+  modes?: Record<string, any>
+  /**
+   * Optional style overrides for the container
+   */
+  style?: StyleProp<ViewStyle>
+  /**
+   * Accessibility label for the footer region
+   */
+  accessibilityLabel?: string
+}
+
+/**
+ * ActionFooter component that provides a fixed footer container for action buttons.
+ * 
+ * This component is designed to hold action items like IconButton and Button components
+ * at the bottom of a screen. It includes a shadow for visual separation from content above.
+ * 
+ * The `modes` prop is automatically passed to all slot children. If a child has its own
+ * `modes` prop, it will be merged with the parent's modes (child modes take precedence).
+ * 
+ * @component
+ * @param {Object} props - Component props
+ * @param {React.ReactNode} [props.children] - Action elements to display (e.g., IconButton, Button)
+ * @param {Object} [props.modes={}] - Mode configuration for design tokens (automatically passed to children)
+ * @param {Object} [props.style] - Optional style overrides
+ * @param {string} [props.accessibilityLabel] - Accessibility label for the footer region
+ * 
+ * @example
+ * ```tsx
+ * // Basic usage - modes are automatically passed to all children
+ * <ActionFooter modes={modes}>
+ *   <IconButton iconName="ic_split" />
+ *   <Button label="Request" style={{ flex: 1 }} />
+ *   <Button label="Pay" style={{ flex: 1 }} />
+ * </ActionFooter>
+ * 
+ * // Children can override with their own modes (merged with parent)
+ * <ActionFooter modes={modes}>
+ *   <IconButton iconName="ic_split" />
+ *   <Button label="Request" modes={{ Appearance: 'secondary' }} style={{ flex: 1 }} />
+ *   <Button label="Pay" modes={{ Appearance: 'primary' }} style={{ flex: 1 }} />
+ * </ActionFooter>
+ * ```
+ */
+function ActionFooter({
+  children,
+  modes = {},
+  style,
+  accessibilityLabel = 'Action footer',
+}: ActionFooterProps) {
+  // Resolve design tokens
+  const backgroundColor = getVariableByName('actionFooter/background', modes) ?? '#ffffff'
+  const gap = getVariableByName('actionFooter/gap', modes) ?? 8
+  const paddingHorizontal = getVariableByName('actionFooter/padding/horizontal', modes) ?? 16
+  const paddingTop = getVariableByName('actionFooter/padding/top', modes) ?? 10
+  const paddingBottom = getVariableByName('actionFooter/padding/bottom', modes) ?? 41
+
+  // Shadow styles - cross-platform
+  const shadowStyle: ViewStyle = Platform.select({
+    ios: {
+      shadowColor: 'rgba(12, 13, 16, 1)',
+      shadowOffset: { width: 0, height: -12 },
+      shadowOpacity: 0.16,
+      shadowRadius: 24,
+    },
+    android: {
+      elevation: 16,
+    },
+    default: {
+      // Web shadow using boxShadow (RNW supports this)
+    },
+  }) as ViewStyle
+
+  const containerStyle: ViewStyle = {
+    backgroundColor,
+    paddingLeft: paddingHorizontal,
+    paddingRight: paddingHorizontal,
+    paddingTop,
+    paddingBottom,
+    ...shadowStyle,
+  }
+
+  // Slot container style for horizontal layout of action items
+  const slotStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap,
+    flex: 1,
+  }
+
+  // Web-specific box-shadow
+  const webShadow = Platform.OS === 'web' 
+    ? { boxShadow: '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)' } as any
+    : {}
+
+  // Pass modes prop to all slot children
+  const childrenWithModes = React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      // Merge modes: child's modes take precedence over parent's modes
+      const childModes = (child.props as any).modes
+      const mergedModes = childModes ? { ...modes, ...childModes } : modes
+      return React.cloneElement(child as React.ReactElement<any>, {
+        modes: mergedModes,
+      })
+    }
+    return child
+  })
+
+  return (
+    <View
+      style={[containerStyle, webShadow, style]}
+      accessibilityRole="toolbar"
+      accessibilityLabel={accessibilityLabel}
+    >
+      <View style={slotStyle}>
+        {childrenWithModes}
+      </View>
+    </View>
+  )
+}
+
+export default ActionFooter
+

package/src/components/Button/Button.mdx

@@ -34,7 +34,7 @@ This component uses the following design token collections. Each collection supp
 - **Default:** positive
 
 ### Context
-- **Modes:** Default | Nudge&Alert
+- **Modes:** Default | Nudge&Alert | CTACard | ListItem
 - **Default:** Default
 
 ### Button / Size
@@ -90,7 +90,7 @@ This component uses the following design tokens, resolved through `getVariableBy
 - **`button/fontFamily`**
 - **`button/fontSize`**
 - **`button/fontWeight`**
-- **`button/forground`**
+- **`button/foreground`**
 - **`button/gap`**
 - **`button/lineHeight`**
 - **`button/padding/horizontal`**

package/src/components/Button/Button.tsx

@@ -89,7 +89,7 @@ function Button({
   const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue
   const lineHeight = getVariableByName('button/lineHeight', modes) || 19
   const fontSize = getVariableByName('button/fontSize', modes) || 16
-  const textColor = getVariableByName('button/forground', modes) || '#0f0d0a'
+  const textColor = getVariableByName('button/foreground', modes) || '#0f0d0a'
 
   const baseLabelTextStyle: TextStyle = {
     color: textColor,

package/src/components/CardFeedback/CardFeedback.mdx

@@ -62,6 +62,7 @@ This component uses the following design token collections. Each collection supp
 
 This component uses the following design tokens, resolved through `getVariableByName`:
 
+- **`appearanceFeedback/cardFeedback/icon/color`**
 - **`cardFeedback/actionSlot/gap`**
 - **`cardFeedback/background`**
 - **`cardFeedback/body/color`**

package/src/components/CardFeedback/CardFeedback.tsx

@@ -1,6 +1,7 @@
 import React, { createContext, useContext, isValidElement, cloneElement } from 'react';
 import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, Image } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import IconComponent from '../../icons/Icon';
 
 /**
  * Context to share 'modes' with child components.
@@ -29,9 +30,15 @@ export interface CardFeedbackProps {
  */
 export function CardFeedback({
     children,
-    modes = {},
+    modes: propModes,
     style,
 }: CardFeedbackProps) {
+    const modes = {
+        'Appearance.System': 'positive',
+        'Context': 'Nudge&Alert',
+        'Semantic Intent': 'System',
+        ...propModes,
+    };
     // Container Tokens
     const backgroundColor = getVariableByName('cardFeedback/background', modes) || '#dbf0d9';
     const radius = parseFloat(getVariableByName('cardFeedback/radius', modes) || '12');
@@ -66,16 +73,16 @@ export function CardFeedback({
 
 /**
  * Icon Wrapper
- * Tokens: cardFeedback/icon/size, cardFeedback/icon/color
+ * Tokens: cardFeedback/icon/size, appearanceFeedback/cardFeedback/icon/color
  */
-export function Icon({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Record<string, any> }) {
+export function Icon({ children, style, modes: propModes, icon }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Record<string, any>; icon?: string }) {
     const context = useContext(CardFeedbackContext);
     const modes = propModes || context.modes || {};
 
     const size = parseFloat(getVariableByName('cardFeedback/icon/size', modes) || '20');
-    // Color is usually applied to the SVG/Icon itself, but we can access it here if needed
-    // const color = getVariableByName('cardFeedback/icon/color', modes); 
-
+    // Color for the icon itself
+    const color = getVariableByName('appearanceFeedback/cardFeedback/icon/color', modes);
+    console.log(color);
     const containerStyle: ViewStyle = {
         width: size,
         height: size,
@@ -84,11 +91,21 @@ export function Icon({ children, style, modes: propModes }: { children?: React.R
         overflow: 'hidden',
     };
 
-    // If children is an SVG or Icon component, we might need to clone it to pass color?
-    // For now, just render children in the sized box.
+    // Pass modes to children (e.g., icon components that accept modes)
+    const childrenWithModes = React.Children.map(children, child => {
+        if (isValidElement(child)) {
+            return cloneElement(child as React.ReactElement<{ modes?: Record<string, any> }>, { modes: { ...(child.props as any).modes, ...modes } });
+        }
+        return child;
+    });
+
     return (
         <View style={[containerStyle, style]}>
-            {children}
+            {icon ? (
+                <IconComponent name={icon} size={size} color={color} />
+            ) : (
+                childrenWithModes
+            )}
         </View>
     );
 }
@@ -104,9 +121,17 @@ export function Content({ children, style, modes: propModes }: { children?: Reac
 
     const gap = parseFloat(getVariableByName('cardFeedback/text/gap', modes) || '8');
 
+    // Pass modes to children (Title, Body, etc.)
+    const childrenWithModes = React.Children.map(children, child => {
+        if (isValidElement(child)) {
+            return cloneElement(child as React.ReactElement<{ modes?: Record<string, any> }>, { modes: { ...(child.props as any).modes, ...modes } });
+        }
+        return child;
+    });
+
     return (
         <View style={[{ gap, width: '100%' }, style]}>
-            {children}
+            {childrenWithModes}
         </View>
     );
 }
@@ -169,12 +194,12 @@ export function Action({ children, style, modes: propModes }: { children?: React
     const context = useContext(CardFeedbackContext);
     const modes = propModes || context.modes || {};
 
-    const gap = parseFloat(getVariableByName('cardFeedback/actionSlot/gap', modes) || '4');
+    const gap = parseFloat(getVariableByName('cardFeedback/actionSlot/gap', modes) || '0');
 
     // "Maximise existing component usage" -> Pass modes to children (Buttons)
     const childrenWithModes = React.Children.map(children, child => {
         if (isValidElement(child)) {
-            return cloneElement(child as any, { modes: { ...(child.props as any).modes, ...modes } });
+            return cloneElement(child as React.ReactElement<{ modes?: Record<string, any> }>, { modes: { ...(child.props as any).modes, ...modes } });
         }
         return child;
     });

package/src/components/Divider/Divider.mdx

@@ -0,0 +1,91 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as DividerStories from './Divider.stories';
+import Divider from './Divider';
+
+<Meta of={DividerStories} />
+
+# Divider
+
+A simple divider component that renders a horizontal or vertical separator line. Uses design tokens for consistent sizing and color.
+
+## Props
+
+<ArgsTable of={Divider} />
+
+## 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.
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+## Usage
+
+### Horizontal Divider
+
+The default horizontal divider stretches to fill its container width:
+
+<Canvas>
+  <Story of={DividerStories.Horizontal} />
+</Canvas>
+
+### Vertical Divider
+
+Vertical dividers stretch to fill their container height:
+
+<Canvas>
+  <Story of={DividerStories.Vertical} />
+</Canvas>
+
+### In Content Layout
+
+Use horizontal dividers to separate content sections:
+
+<Canvas>
+  <Story of={DividerStories.InContentLayout} />
+</Canvas>
+
+### In Row Layout
+
+Use vertical dividers to separate items in a horizontal row:
+
+<Canvas>
+  <Story of={DividerStories.InRowLayout} />
+</Canvas>
+
+## Component Usage
+
+```tsx
+import { Divider } from 'jsf-components';
+
+// Horizontal divider (default)
+<Divider />
+
+// Vertical divider
+<Divider direction="vertical" />
+
+// In a vertical layout
+<View>
+  <Text>Section 1</Text>
+  <Divider />
+  <Text>Section 2</Text>
+</View>
+
+// In a horizontal layout
+<View style={{ flexDirection: 'row', alignItems: 'center' }}>
+  <Text>Item 1</Text>
+  <View style={{ marginHorizontal: 8 }}>
+    <Divider direction="vertical" />
+  </View>
+  <Text>Item 2</Text>
+</View>
+```
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`divider/color`**
+- **`divider/size`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+import {
+  View,
+  type ViewStyle,
+  type StyleProp,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+export type DividerDirection = 'horizontal' | 'vertical'
+
+export type DividerProps = {
+  /**
+   * Direction of the divider line.
+   * - 'horizontal': renders a horizontal line (default)
+   * - 'vertical': renders a vertical line
+   */
+  direction?: DividerDirection
+  /**
+   * Mode configuration passed to the token resolver.
+   */
+  modes?: Record<string, any>
+  /**
+   * Optional style overrides for the divider
+   */
+  style?: StyleProp<ViewStyle>
+  /**
+   * Accessibility label for the divider
+   */
+  accessibilityLabel?: string
+}
+
+/**
+ * Divider component that renders a horizontal or vertical separator line.
+ * 
+ * This component is used to visually separate content sections. It supports
+ * both horizontal and vertical orientations based on the `direction` prop.
+ * 
+ * @component
+ * @param {Object} props - Component props
+ * @param {'horizontal' | 'vertical'} [props.direction='horizontal'] - Direction of the divider
+ * @param {Object} [props.modes={}] - Mode configuration for design tokens
+ * @param {Object} [props.style] - Optional style overrides
+ * @param {string} [props.accessibilityLabel] - Accessibility label for the divider
+ * 
+ * @example
+ * ```tsx
+ * // Horizontal divider (default)
+ * <Divider />
+ * 
+ * // Vertical divider
+ * <Divider direction="vertical" />
+ * 
+ * // With custom modes
+ * <Divider modes={{ Appearance: 'dark' }} />
+ * ```
+ */
+function Divider({
+  direction = 'horizontal',
+  modes = {},
+  style,
+  accessibilityLabel = 'Divider',
+}: DividerProps) {
+  // Resolve design tokens
+  const size = getVariableByName('divider/size', modes) ?? 1
+  const color = getVariableByName('divider/color', modes) ?? '#1a1c1f'
+
+  const isVertical = direction === 'vertical'
+
+  const dividerStyle: ViewStyle = isVertical
+    ? {
+        width: size,
+        backgroundColor: color,
+        alignSelf: 'stretch',
+      }
+    : {
+        height: size,
+        backgroundColor: color,
+        alignSelf: 'stretch',
+      }
+
+  return (
+    <View
+      style={[dividerStyle, style]}
+      accessibilityRole="none"
+      accessibilityLabel={accessibilityLabel}
+    />
+  )
+}
+
+export default Divider
+

package/src/components/ListItem/ListItem.mdx

@@ -7,7 +7,9 @@ import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '.
 
 # ListItem
 
-Helper function to recursively clone children and pass modes prop to components that accept it.
+A token-driven list item component supporting vertical and horizontal layouts, with optional navigation behaviour and slots for leading, support text and trailing content.
+
+The horizontal layout includes a **NavArrow** on the far right by default, which can be hidden via the `navArrow` prop.
 
 ## Available Collections and Modes
 
@@ -26,9 +28,47 @@ This component uses the following design token collections. Each collection supp
 - **Default:** Light
 ## Usage
 
-<Canvas>
-  <Story of={ListItemStories.Default} />
-</Canvas>
+### Horizontal Layout with NavArrow
+
+<Canvas of={ListItemStories.HorizontalNavigation} />
+
+### Horizontal Layout (NavArrow only, no endSlot)
+
+<Canvas of={ListItemStories.HorizontalWithNavArrowOnly} />
+
+### Vertical Layout
+
+<Canvas of={ListItemStories.VerticalStatic} />
+
+### Usage Example
+
+```tsx
+import ListItem from './ListItem';
+import Button from '../Button/Button';
+
+// Horizontal with NavArrow (default)
+<ListItem
+  layout="Horizontal"
+  title="Navigate to Details"
+  supportText="Tap to view more"
+  navArrow={true}
+/>
+
+// Horizontal without NavArrow
+<ListItem
+  layout="Horizontal"
+  title="Balance"
+  supportText="₹500"
+  navArrow={false}
+  endSlot={<Button label="Add Money" />}
+/>
+
+// Vertical layout (NavArrow not applicable)
+<ListItem
+  layout="Vertical"
+  supportText="Payments"
+/>
+```
 
 
 <AccessibilitySection
@@ -43,7 +83,8 @@ This component uses the following design token collections. Each collection supp
   <ul>
     <li><strong>Leading slot</strong> — optional icon/avatar.</li>
     <li><strong>Title & support</strong> — primary and secondary text.</li>
-    <li><strong>Trailing slot</strong> — optional meta info or action affordance.</li>
+    <li><strong>Trailing slot (endSlot)</strong> — optional meta info or action affordance. <strong>Note:</strong> This slot strictly enforces <code>Context: 'ListItem'</code> for its children, overriding any conflicting context passed via the <code>modes</code> prop.</li>
+    <li><strong>NavArrow</strong> — navigation chevron on the far right (Horizontal layout only). Shown by default, can be hidden via <code>navArrow=&#123;false&#125;</code>.</li>
   </ul>
 </AnatomySection>