jfs-components 0.0.3 → 0.0.5

package/src/components/.token-metadata.json

@@ -1,4 +1,35 @@
 {
+  "Accordion": {
+    "tokens": [
+      "accordion/border/color",
+      "accordion/content/gap",
+      "accordion/content/padding/bottom",
+      "accordion/content/padding/top",
+      "accordion/header/background",
+      "accordion/header/gap",
+      "accordion/header/padding/vertical",
+      "accordion/icon/color",
+      "accordion/icon/size",
+      "accordion/title/color",
+      "accordion/title/fontFamily",
+      "accordion/title/fontSize",
+      "accordion/title/lineHeight"
+    ],
+    "collections": {
+      "Accordion States": {
+        "modes": [
+          "Idle",
+          "Hover",
+          "Open",
+          "Open Hover",
+          "Disabled"
+        ],
+        "defaultMode": "Idle",
+        "hasMultipleModes": true
+      }
+    },
+    "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/Accordion/Accordion.tsx"
+  },
   "ActionFooter": {
     "tokens": [
       "actionFooter/background",
@@ -10,6 +41,31 @@
     "collections": {},
     "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/ActionFooter/ActionFooter.tsx"
   },
+  "ActionTile": {
+    "tokens": [
+      "actionTile/background",
+      "actionTile/fontFamily",
+      "actionTile/fontSize",
+      "actionTile/fontWeight",
+      "actionTile/foreground",
+      "actionTile/gap",
+      "actionTile/lineHeight",
+      "actionTile/padding/horizontal",
+      "actionTile/padding/vertical",
+      "actionTile/radius"
+    ],
+    "collections": {
+      "Color Mode": {
+        "modes": [
+          "Light",
+          "Dark"
+        ],
+        "defaultMode": "Light",
+        "hasMultipleModes": true
+      }
+    },
+    "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/ActionTile/ActionTile.tsx"
+  },
   "AppBar": {
     "tokens": [
       "appBarActions/actions/gap",
@@ -317,6 +373,26 @@
     },
     "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/CardFeedback/CardFeedback.tsx"
   },
+  "CtaCard": {
+    "tokens": [
+      "ctaCard/background",
+      "ctaCard/body/color",
+      "ctaCard/body/fontFamily",
+      "ctaCard/body/fontSize",
+      "ctaCard/body/lineHeight",
+      "ctaCard/content/gap",
+      "ctaCard/gap",
+      "ctaCard/padding/horizontal",
+      "ctaCard/padding/vertical",
+      "ctaCard/radius",
+      "ctaCard/title/color",
+      "ctaCard/title/fontFamily",
+      "ctaCard/title/fontSize",
+      "ctaCard/title/lineHeight"
+    ],
+    "collections": {},
+    "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/CtaCard/CtaCard.tsx"
+  },
   "Disclaimer": {
     "tokens": [
       "disclaimer/color",
@@ -852,6 +928,29 @@
     },
     "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/TextInput/TextInput.tsx"
   },
+  "ThreadHero": {
+    "tokens": [
+      "threadHero/caption/color",
+      "threadHero/caption/fontFamily",
+      "threadHero/caption/fontSize",
+      "threadHero/caption/fontWeight",
+      "threadHero/caption/lineHeight",
+      "threadHero/details/gap",
+      "threadHero/gap",
+      "threadHero/subtitle/color",
+      "threadHero/subtitle/fontFamily",
+      "threadHero/subtitle/fontSize",
+      "threadHero/subtitle/fontWeight",
+      "threadHero/subtitle/lineHeight",
+      "threadHero/title/color",
+      "threadHero/title/fontFamily",
+      "threadHero/title/fontSize",
+      "threadHero/title/fontWeight",
+      "threadHero/title/lineHeight"
+    ],
+    "collections": {},
+    "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/ThreadHero/ThreadHero.tsx"
+  },
   "Tooltip": {
     "tokens": [
       "maxWidth",
@@ -879,6 +978,68 @@
     },
     "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/Tooltip/Tooltip.tsx"
   },
+  "TransactionBubble": {
+    "tokens": [
+      "transactionBubble/background",
+      "transactionBubble/border/color",
+      "transactionBubble/border/size",
+      "transactionBubble/description/color",
+      "transactionBubble/description/fontFamily",
+      "transactionBubble/description/fontSize",
+      "transactionBubble/description/lineHeight",
+      "transactionBubble/gap",
+      "transactionBubble/padding",
+      "transactionBubble/radius",
+      "transactionBubble/statusWrap/height"
+    ],
+    "collections": {},
+    "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/TransactionBubble/TransactionBubble.tsx"
+  },
+  "TransactionDetails": {
+    "tokens": [
+      "detailItem/gap",
+      "detailItem/label/color",
+      "detailItem/label/fontFamily",
+      "detailItem/label/fontSize",
+      "detailItem/label/fontWeight",
+      "detailItem/label/lineHeight",
+      "detailItem/value/color",
+      "detailItem/value/fontFamily",
+      "detailItem/value/fontSize",
+      "detailItem/value/fontWeight",
+      "detailItem/value/lineHeight",
+      "transationDetails/gap",
+      "transationDetails/padding/horizontal",
+      "transationDetails/padding/vertical"
+    ],
+    "collections": {},
+    "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/TransactionDetails/TransactionDetails.tsx"
+  },
+  "TransactionStatus": {
+    "tokens": [
+      "transactionBubble/statusWrap/gap",
+      "transactionStatus/color",
+      "transactionStatus/fontFamily",
+      "transactionStatus/fontSize",
+      "transactionStatus/fontWeight2",
+      "transactionStatus/icon/color",
+      "transactionStatus/iconSize",
+      "transactionStatus/lineHeight"
+    ],
+    "collections": {
+      "Transaction Status": {
+        "modes": [
+          "Request",
+          "Paid",
+          "Declined",
+          "Expired"
+        ],
+        "defaultMode": "Request",
+        "hasMultipleModes": true
+      }
+    },
+    "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/TransactionStatus/TransactionStatus.tsx"
+  },
   "UpiHandle": {
     "tokens": [
       "upiHandle/background",

package/src/components/Accordion/Accordion.mdx

@@ -0,0 +1,123 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as AccordionStories from './Accordion.stories';
+import Accordion from './Accordion';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={AccordionStories} />
+
+# Accordion
+
+Accordion component that mirrors the Figma "Accordion" component. It provides an expandable/collapsible container for content with smooth animation.
+
+## 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.
+
+### Accordion States
+- **Modes:** Idle | Hover | Open | Open Hover | Disabled
+- **Default:** Idle
+## Usage
+
+<Canvas>
+  <Story of={AccordionStories.Default} />
+</Canvas>
+
+## With ListItem Content
+
+<Canvas>
+  <Story of={AccordionStories.WithListItems} />
+</Canvas>
+
+## Accordion Group
+
+<Canvas>
+  <Story of={AccordionStories.AccordionGroup} />
+</Canvas>
+
+<AccessibilitySection
+  items={[
+    'The accordion header has `accessibilityRole="button"` for proper screen reader announcement.',
+    'The `accessibilityState.expanded` property indicates the current state to assistive technology.',
+    'When disabled, `accessibilityState.disabled` is set to true.',
+    'Custom `accessibilityLabel` and `accessibilityHint` can be provided for better context.',
+    'Content within the accordion should maintain its own accessibility attributes.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Header</strong> — Pressable area containing the title and expand/collapse icon (plus/minus).</li>
+    <li><strong>Content Slot</strong> — Expandable area that shows/hides with animation. Pass any React children.</li>
+    <li><strong>Border</strong> — Bottom border separating accordions when stacked.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Use the `modes` prop to ensure consistent theming with surrounding components.',
+    'When nesting components in the content slot, they automatically receive the parent modes via cloning.',
+    'Avoid deeply nested interactive elements that may confuse keyboard navigation.',
+    'For controlled behavior, provide both `expanded` and `onExpandedChange` props.',
+    'Keep accordion titles concise; they are truncated to a single line.',
+  ]}
+/>
+
+## Props
+
+<ArgsTable of={Accordion} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`accordion/border/color`**
+- **`accordion/content/gap`**
+- **`accordion/content/padding/bottom`**
+- **`accordion/content/padding/top`**
+- **`accordion/header/background`**
+- **`accordion/header/gap`**
+- **`accordion/header/padding/vertical`**
+- **`accordion/icon/color`**
+- **`accordion/icon/size`**
+- **`accordion/title/color`**
+- **`accordion/title/fontFamily`**
+- **`accordion/title/fontSize`**
+- **`accordion/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.
+## Example Usage
+
+```tsx
+import { Accordion, ListItem, IconCapsule, MoneyValue } from '@jsf/components';
+
+function PaymentSection() {
+  return (
+    <Accordion 
+      title="Payment Methods"
+      defaultExpanded={true}
+      modes={{ 'Color Mode': 'Light' }}
+    >
+      <ListItem
+        layout="Horizontal"
+        title="Credit Card"
+        supportText="Ending in 4242"
+        leading={<IconCapsule iconName="ic_card" />}
+        endSlot={<MoneyValue value="500" currency="₹" />}
+        navArrow={true}
+      />
+      <ListItem
+        layout="Horizontal"
+        title="Savings Account"
+        supportText="HDFC Bank"
+        leading={<IconCapsule iconName="ic_bank_account" />}
+        endSlot={<MoneyValue value="25,000" currency="₹" />}
+        navArrow={true}
+      />
+    </Accordion>
+  );
+}
+```
+
+
+
+

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,279 @@
+import React, { useState } from 'react'
+import {
+  View,
+  Text,
+  Pressable,
+  LayoutAnimation,
+  Platform,
+  UIManager,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+  type AccessibilityState,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import Icon from '../../icons/Icon'
+import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
+
+// Enable LayoutAnimation on Android
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true)
+}
+
+/**
+ * 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.
+ */
+function cloneChildrenWithModes(
+  children: React.ReactNode,
+  modes: Record<string, any>
+): React.ReactNode[] {
+  const result = React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return child
+    }
+
+    // Get existing children
+    const childChildren = (child.props as any)?.children
+    const hasChildren = childChildren !== undefined && childChildren !== null
+
+    // Merge modes: parent modes first, then child's explicit modes override them
+    const existingModes = (child.props as any)?.modes
+    const mergedModes = existingModes
+      ? { ...modes, ...existingModes }
+      : modes
+
+    // Recursively process children if they exist
+    const processedChildren: React.ReactNode | undefined = hasChildren
+      ? cloneChildrenWithModes(
+          React.Children.toArray(childChildren),
+          modes
+        )
+      : undefined
+
+    // Clone element with modes and processed children
+    return React.cloneElement(
+      child,
+      {
+        ...(child.props as any),
+        modes: mergedModes,
+      },
+      processedChildren
+    )
+  })
+  return result || []
+}
+
+export type AccordionProps = {
+  /** The accordion header title */
+  title?: string;
+  /** Initial expanded state. Defaults to false (collapsed) */
+  defaultExpanded?: boolean;
+  /** Controlled expanded state. When provided, the component becomes controlled */
+  expanded?: boolean;
+  /** Callback fired when the accordion's expanded state changes */
+  onExpandedChange?: (expanded: boolean) => void;
+  /** Whether the accordion is disabled */
+  disabled?: boolean;
+  /** Content to display when the accordion is expanded (Figma Slot: 'content') */
+  children?: React.ReactNode;
+  /** Modes object passed to getVariableByName for all design tokens */
+  modes?: Record<string, any>;
+  /** Optional container style overrides */
+  style?: StyleProp<ViewStyle>;
+  /** Accessibility label for screen readers. If not provided, uses title */
+  accessibilityLabel?: string;
+  /** Additional accessibility hint for screen readers */
+  accessibilityHint?: string;
+  /** Additional accessibility state information */
+  accessibilityState?: AccessibilityState;
+  /** Web-specific accessibility props (only used on web platform) */
+  webAccessibilityProps?: WebAccessibilityProps;
+} & React.ComponentProps<typeof View>;
+
+/**
+ * Accordion component that mirrors the Figma "Accordion" component.
+ *
+ * This component supports:
+ *  - **Expandable/collapsible content** with smooth animation
+ *  - **States**: Idle, Hover, Open, Disabled
+ *  - **Slot** for custom content
+ *  - **Design-token driven styling** via `getVariableByName` and `modes`
+ *
+ * Wherever the Figma layer name contains "Slot", this component exposes a
+ * dedicated React "slot" prop:
+ *  - Slot "content" → `children`
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.title='Accordion title'] - The accordion header title
+ * @param {boolean} [props.defaultExpanded=false] - Initial expanded state
+ * @param {boolean} [props.expanded] - Controlled expanded state
+ * @param {Function} [props.onExpandedChange] - Callback fired when expanded state changes
+ * @param {boolean} [props.disabled=false] - Whether the accordion is disabled
+ * @param {React.ReactNode} [props.children] - Content to display when expanded
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
+ * @param {Object} [props.style] - Optional container style overrides
+ * @param {string} [props.accessibilityLabel] - Accessibility label for the accordion. If not provided, uses title
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+function Accordion({
+  title = 'Accordion title',
+  defaultExpanded = false,
+  expanded: controlledExpanded,
+  onExpandedChange,
+  disabled = false,
+  children,
+  modes = {},
+  style,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  webAccessibilityProps,
+  ...rest
+}: AccordionProps) {
+  // Internal state for uncontrolled mode
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded)
+  
+  // Determine if controlled or uncontrolled
+  const isControlled = controlledExpanded !== undefined
+  const isExpanded = isControlled ? controlledExpanded : internalExpanded
+  
+  // Hover state for web
+  const [isHovered, setIsHovered] = useState(false)
+  
+  // Handle toggle
+  const handleToggle = () => {
+    if (disabled) return
+    
+    // Animate the layout change
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+    
+    if (isControlled) {
+      onExpandedChange?.(!isExpanded)
+    } else {
+      setInternalExpanded(!isExpanded)
+      onExpandedChange?.(!isExpanded)
+    }
+  }
+  
+  // Resolve design tokens
+  const titleColor = disabled
+    ? '#999999'
+    : getVariableByName('accordion/title/color', modes) || '#0d0d0d'
+  const titleFontSize = getVariableByName('accordion/title/fontSize', modes) || 18
+  const titleLineHeight = getVariableByName('accordion/title/lineHeight', modes) || 20
+  const titleFontFamily = getVariableByName('accordion/title/fontFamily', modes) || 'System'
+  
+  const iconColor = getVariableByName('accordion/icon/color', modes) || '#141414'
+  const iconSize = getVariableByName('accordion/icon/size', modes) || 24
+  
+  const headerGap = getVariableByName('accordion/header/gap', modes) || 12
+  const headerPaddingVertical = getVariableByName('accordion/header/padding/vertical', modes) || 24
+  const headerBackground = isHovered && !disabled
+    ? '#f2f2f2'
+    : getVariableByName('accordion/header/background', modes) || 'transparent'
+  
+  const contentGap = getVariableByName('accordion/content/gap', modes) || 12
+  const contentPaddingTop = getVariableByName('accordion/content/padding/top', modes) || 8
+  const contentPaddingBottom = isExpanded
+    ? (getVariableByName('accordion/content/padding/bottom', modes) ?? 24)
+    : 8
+  
+  const borderColor = getVariableByName('accordion/border/color', modes) || '#e6e6e6'
+  
+  // Styles
+  const containerStyle: ViewStyle = {
+    borderBottomWidth: 1,
+    borderBottomColor: borderColor,
+  }
+  
+  const headerStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: headerGap,
+    paddingVertical: headerPaddingVertical,
+    paddingHorizontal: 0,
+    backgroundColor: headerBackground,
+    overflow: 'hidden',
+  }
+  
+  const titleStyle: TextStyle = {
+    flex: 1,
+    color: titleColor,
+    fontSize: titleFontSize,
+    lineHeight: titleLineHeight,
+    fontFamily: titleFontFamily,
+    fontWeight: '700',
+  }
+  
+  const contentStyle: ViewStyle = {
+    backgroundColor: 'transparent',
+    gap: contentGap,
+    paddingTop: contentPaddingTop,
+    paddingBottom: contentPaddingBottom,
+    paddingHorizontal: 0,
+    overflow: 'hidden',
+  }
+  
+  // Generate default accessibility label
+  const defaultAccessibilityLabel = accessibilityLabel || title
+  
+  // Web platform support
+  const webProps = usePressableWebSupport({
+    restProps: {},
+    onPress: handleToggle,
+    disabled,
+    accessibilityLabel: defaultAccessibilityLabel,
+    webAccessibilityProps,
+  })
+  
+  // Process children to pass modes
+  const processedChildren = children
+    ? cloneChildrenWithModes(React.Children.toArray(children), modes)
+    : null
+  
+  return (
+    <View style={[containerStyle, style]} {...rest}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={defaultAccessibilityLabel}
+        accessibilityHint={accessibilityHint || (isExpanded ? 'Collapse accordion' : 'Expand accordion')}
+        accessibilityState={{
+          expanded: isExpanded,
+          disabled,
+          ...accessibilityState,
+        }}
+        onPress={handleToggle}
+        disabled={disabled}
+        onHoverIn={() => setIsHovered(true)}
+        onHoverOut={() => setIsHovered(false)}
+        style={({ pressed }) => [
+          headerStyle,
+          pressed && !disabled ? { opacity: 0.9 } : null,
+        ]}
+        {...webProps}
+      >
+        <Text style={titleStyle} numberOfLines={1}>
+          {title}
+        </Text>
+        <Icon
+          name={isExpanded ? 'ic_minus' : 'ic_add'}
+          size={iconSize}
+          color={disabled ? '#999999' : iconColor}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no"
+        />
+      </Pressable>
+      
+      {isExpanded && processedChildren && (
+        <View style={contentStyle}>
+          {processedChildren}
+        </View>
+      )}
+    </View>
+  )
+}
+
+export default Accordion
+

package/src/components/ActionFooter/ActionFooter.mdx

@@ -99,3 +99,4 @@ All tokens support mode-based theming through the `modes` prop.
 
 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/ActionTile/ActionTile.mdx

@@ -0,0 +1,54 @@
+import { Meta, Story, Canvas, PureArgsTable as Controls } from '@storybook/addon-docs/blocks';
+import * as ActionTileStories from './ActionTile.stories';
+
+<Meta of={ActionTileStories} />
+
+# ActionTile
+
+A tile component used for dashboard actions, displaying an icon and a label.
+
+
+## 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
+
+```tsx
+import ActionTile from './ActionTile';
+import IconCapsule from '../IconCapsule/IconCapsule';
+
+// Default usage
+<ActionTile label="Cards" />
+
+// With custom icon
+<ActionTile 
+  label="Offers" 
+  icon={<IconCapsule iconName="ic_offers" />} 
+/>
+```
+
+<Canvas of={ActionTileStories.Default} />
+
+<Controls />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`actionTile/background`**
+- **`actionTile/fontFamily`**
+- **`actionTile/fontSize`**
+- **`actionTile/fontWeight`**
+- **`actionTile/foreground`**
+- **`actionTile/gap`**
+- **`actionTile/lineHeight`**
+- **`actionTile/padding/horizontal`**
+- **`actionTile/padding/vertical`**
+- **`actionTile/radius`**
+
+All tokens support mode-based theming through the `modes` prop.