jfs-components 0.0.1 → 0.0.2

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>
 

package/src/components/ListItem/ListItem.tsx

@@ -2,16 +2,20 @@ import React, { useMemo } from 'react'
 import { View, Text, Pressable, type StyleProp, type ViewStyle, type TextStyle, type AccessibilityState } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import IconCapsule from '../IconCapsule/IconCapsule'
-import Button from '../Button/Button'
+import NavArrow from '../NavArrow/NavArrow'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 
 /**
  * Helper function to recursively clone children and pass modes prop to components that accept it.
  * This ensures that all child components in slots receive the modes prop from the parent.
+ *
+ * @param forcedModes - Optional modes that will ALWAYS be applied last, overriding any other modes.
+ *                      Useful for slots that need to enforce specific context values.
  */
 function cloneChildrenWithModes(
   children: React.ReactNode,
-  modes: Record<string, any>
+  modes: Record<string, any>,
+  forcedModes?: Record<string, any>
 ): React.ReactNode[] {
   const result = React.Children.map(children, (child) => {
     if (!React.isValidElement(child)) {
@@ -24,15 +28,21 @@ function cloneChildrenWithModes(
 
     // Clone the child with modes prop if it doesn't already have one
     // or merge with existing modes if it does
-    // Merge order: parent modes first, then child's explicit modes override them
+    // Merge order: parent modes first, then child's explicit modes override them,
+    // then forcedModes (if provided) are applied last and can never be overridden
     const existingModes = (child.props as any)?.modes
-    const mergedModes = existingModes ? { ...modes, ...existingModes } : modes
+    const mergedModes = forcedModes
+      ? { ...modes, ...(existingModes || {}), ...forcedModes }
+      : existingModes
+        ? { ...modes, ...existingModes }
+        : modes
 
     // Recursively process children if they exist
     const processedChildren: React.ReactNode | undefined = hasChildren
       ? cloneChildrenWithModes(
           React.Children.toArray(childChildren),
-          modes
+          modes,
+          forcedModes
         )
       : undefined
 
@@ -57,7 +67,8 @@ type ListItemProps = {
   leading?: React.ReactNode;
   supportSlot?: React.ReactNode;
   endSlot?: React.ReactNode;
-  showTrailing?: boolean;
+  /** Whether to show the NavArrow on the far right (Horizontal layout only). Defaults to true. */
+  navArrow?: boolean;
   modes?: Record<string, any>;
   onPress?: () => void;
   style?: StyleProp<ViewStyle>;
@@ -94,7 +105,7 @@ type ListItemProps = {
  * @param {React.ReactNode} [props.leading] - Optional leading element. Defaults to `IconCapsule`.
  * @param {React.ReactNode} [props.supportSlot] - Optional custom slot used instead of the default support text block.
  * @param {React.ReactNode} [props.endSlot] - Optional custom trailing slot (Figma Slot "end").
- * @param {boolean} [props.showTrailing=true] - When `true`, renders the default trailing Button in Horizontal layout if `endSlot` is not provided.
+ * @param {boolean} [props.navArrow=true] - Whether to show NavArrow on the far right (Horizontal layout only).
  * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens.
  * @param {Function} [props.onPress] - When provided, the entire item becomes pressable (navigation variant).
  * @param {Object} [props.style] - Optional container style overrides.
@@ -111,7 +122,7 @@ function ListItem({
   leading,
   supportSlot,
   endSlot,
-  showTrailing = true,
+  navArrow = true,
   modes = {},
   onPress,
   style,
@@ -275,8 +286,9 @@ function ListItem({
 
   if (layout === 'Horizontal') {
     // Process endSlot to pass modes to children
+    // Force Context: 'ListItem' - this value can never be overridden by external modes
     const processedEndSlot = endSlot
-      ? cloneChildrenWithModes(React.Children.toArray(endSlot), modes)
+      ? cloneChildrenWithModes(React.Children.toArray(endSlot), modes, { "Context": 'ListItem' })
       : []
     // Extract single element if array has one element, otherwise use array
     const trailingContent =
@@ -284,8 +296,6 @@ function ListItem({
         ? processedEndSlot.length === 1
           ? processedEndSlot[0]
           : processedEndSlot
-        : showTrailing
-        ? <Button label="Button" modes={modes} {...({} as any)} />
         : null
 
     const innerContent = (
@@ -310,6 +320,7 @@ function ListItem({
         {trailingContent ? (
           <View style={trailingWrapperStyle}>{trailingContent}</View>
         ) : null}
+        {navArrow && <NavArrow direction="Forward" modes={modes} />}
       </View>
     )