jfs-components 0.0.2 → 0.0.4

package/src/components/TransactionDetails/TransactionDetails.mdx

@@ -0,0 +1,98 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as TransactionDetailsStories from './TransactionDetails.stories';
+import TransactionDetails from './TransactionDetails';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={TransactionDetailsStories} />
+
+# TransactionDetails
+
+TransactionDetails is a container component that displays a list of transaction detail items, each showing a label-value pair. It uses design tokens from Figma for consistent styling.
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+<Canvas>
+  <Story of={TransactionDetailsStories.Default} />
+</Canvas>
+
+## Usage Example
+
+```tsx
+import TransactionDetails from 'jfs-components';
+
+function PaymentConfirmation() {
+  return (
+    <TransactionDetails>
+      <TransactionDetails.Item label="UPI transaction ID" value="101674916166" />
+      <TransactionDetails.Item label="From: 5678 XXXX XXXX 1234" value="JioFinance • shivashankar@okjio" />
+      <TransactionDetails.Item label="To: SHIVASHANKAR RAJAN" value="JioFinance • shivashankar@okjio" />
+      <TransactionDetails.Item label="Payment method" value="UPI" />
+    </TransactionDetails>
+  );
+}
+```
+
+## Single Item
+
+<Canvas>
+  <Story of={TransactionDetailsStories.SingleItem} />
+</Canvas>
+
+<AccessibilitySection
+  items={[
+    'TransactionDetails has role "summary" for screen readers to announce it as a summary section.',
+    'Each DetailItem has role "text" with a combined label and value for clear reading.',
+    'Use descriptive labels that clearly indicate what the value represents.',
+    'Ensure sufficient color contrast between label and value text.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>TransactionDetails (Container)</strong> — Wraps all Item children with consistent gap and padding.</li>
+    <li><strong>TransactionDetails.Item</strong> — Individual label-value pair component.</li>
+    <li><strong>Label</strong> — Descriptive text above the value, using token typography.</li>
+    <li><strong>Value</strong> — The actual data/content text, using token typography.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Always use TransactionDetails.Item as direct children of TransactionDetails for proper mode propagation.',
+    'Keep label text concise and descriptive.',
+    'Values can be longer but consider text wrapping on smaller screens.',
+    'Use consistent date/time and number formatting across all detail items.',
+  ]}
+/>
+
+## TransactionDetails Props
+
+<ArgsTable of={TransactionDetails} />
+
+## TransactionDetails.Item Props
+
+<ArgsTable of={TransactionDetails.Item} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`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`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/TransactionDetails/TransactionDetails.tsx

@@ -0,0 +1,236 @@
+import React from 'react'
+import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+/**
+ * Helper function to recursively clone children and pass modes prop to components that accept it.
+ */
+function cloneChildrenWithModes(
+  children: React.ReactNode,
+  modes: Record<string, any>
+): React.ReactNode[] {
+  const result = React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return child
+    }
+
+    const childChildren = (child.props as any)?.children
+    const hasChildren = childChildren !== undefined && childChildren !== null
+
+    const existingModes = (child.props as any)?.modes
+    const mergedModes = existingModes
+      ? { ...modes, ...existingModes }
+      : modes
+
+    const processedChildren: React.ReactNode | undefined = hasChildren
+      ? cloneChildrenWithModes(
+          React.Children.toArray(childChildren),
+          modes
+        )
+      : undefined
+
+    return React.cloneElement(
+      child,
+      {
+        ...(child.props as any),
+        modes: mergedModes,
+      },
+      processedChildren
+    )
+  })
+  return result || []
+}
+
+// ===== Item Subcomponent =====
+
+export type TransactionDetailsItemProps = {
+  /** The label text displayed above the value (e.g., "UPI transaction ID") */
+  label?: string
+  /** The value text displayed below the label (e.g., "101674916166") */
+  value?: string
+  /** Modes object passed to `getVariableByName` for design token resolution */
+  modes?: Record<string, any>
+  /** Optional container style overrides */
+  style?: StyleProp<ViewStyle>
+  /** Optional label text style overrides */
+  labelStyle?: StyleProp<TextStyle>
+  /** Optional value text style overrides */
+  valueStyle?: StyleProp<TextStyle>
+  /** Accessibility label for screen readers */
+  accessibilityLabel?: string
+} & React.ComponentProps<typeof View>
+
+/**
+ * Item component that displays a label-value pair, used within TransactionDetails.
+ * Access via `TransactionDetails.Item`.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.label='Label'] - The label text displayed above the value.
+ * @param {string} [props.value='Value'] - The value text displayed below the label.
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for design tokens.
+ * @param {Object} [props.style] - Optional container style overrides.
+ * @param {Object} [props.labelStyle] - Optional label text style overrides.
+ * @param {Object} [props.valueStyle] - Optional value text style overrides.
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers.
+ */
+function Item({
+  label = 'Label',
+  value = 'Value',
+  modes = {},
+  style,
+  labelStyle,
+  valueStyle,
+  accessibilityLabel,
+  ...rest
+}: TransactionDetailsItemProps) {
+  // Resolve design tokens for Item
+  const gap = getVariableByName('detailItem/gap', modes) ?? 4
+
+  // Label typography tokens
+  const labelColor = getVariableByName('detailItem/label/color', modes) || '#0c0d10'
+  const labelFontSize = getVariableByName('detailItem/label/fontSize', modes) || 14
+  const labelFontFamily = getVariableByName('detailItem/label/fontFamily', modes) || 'System'
+  const labelLineHeight = getVariableByName('detailItem/label/lineHeight', modes) || 17
+  const labelFontWeightRaw = getVariableByName('detailItem/label/fontWeight', modes) || 500
+  const labelFontWeight = typeof labelFontWeightRaw === 'number'
+    ? labelFontWeightRaw.toString()
+    : labelFontWeightRaw
+
+  // Value typography tokens
+  const valueColor = getVariableByName('detailItem/value/color', modes) || '#24262b'
+  const valueFontSize = getVariableByName('detailItem/value/fontSize', modes) || 14
+  const valueFontFamily = getVariableByName('detailItem/value/fontFamily', modes) || 'System'
+  const valueLineHeight = getVariableByName('detailItem/value/lineHeight', modes) || 17
+  const valueFontWeightRaw = getVariableByName('detailItem/value/fontWeight', modes) || 'Medium'
+  const valueFontWeight = typeof valueFontWeightRaw === 'number'
+    ? valueFontWeightRaw.toString()
+    : valueFontWeightRaw === 'Medium' ? '500' : valueFontWeightRaw
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    gap,
+  }
+
+  const labelTextStyle: TextStyle = {
+    color: labelColor,
+    fontSize: labelFontSize,
+    fontFamily: labelFontFamily,
+    lineHeight: labelLineHeight,
+    fontWeight: labelFontWeight,
+  }
+
+  const valueTextStyle: TextStyle = {
+    color: valueColor,
+    fontSize: valueFontSize,
+    fontFamily: valueFontFamily,
+    lineHeight: valueLineHeight,
+    fontWeight: valueFontWeight,
+  }
+
+  const defaultAccessibilityLabel = accessibilityLabel || `${label}: ${value}`
+
+  return (
+    <View
+      style={[containerStyle, style]}
+      accessibilityRole="text"
+      accessibilityLabel={defaultAccessibilityLabel}
+      {...rest}
+    >
+      <Text
+        style={[labelTextStyle, labelStyle]}
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no"
+      >
+        {label}
+      </Text>
+      <Text
+        style={[valueTextStyle, valueStyle]}
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no"
+      >
+        {value}
+      </Text>
+    </View>
+  )
+}
+
+// ===== TransactionDetails Component =====
+
+export type TransactionDetailsProps = {
+  /** Slot for TransactionDetails.Item children */
+  children?: React.ReactNode
+  /** Modes object passed to `getVariableByName` for design token resolution */
+  modes?: Record<string, any>
+  /** Optional container style overrides */
+  style?: StyleProp<ViewStyle>
+  /** Accessibility label for screen readers */
+  accessibilityLabel?: string
+} & React.ComponentProps<typeof View>
+
+/**
+ * TransactionDetails component that displays a list of transaction detail items.
+ *
+ * This component serves as a container for TransactionDetails.Item children, applying consistent
+ * spacing and padding as defined by Figma design tokens.
+ *
+ * @component
+ * @param {Object} props
+ * @param {React.ReactNode} [props.children] - TransactionDetails.Item children to render.
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for design tokens.
+ * @param {Object} [props.style] - Optional container style overrides.
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers.
+ *
+ * @example
+ * ```tsx
+ * <TransactionDetails modes={{ 'Color Mode': 'Light' }}>
+ *   <TransactionDetails.Item label="UPI transaction ID" value="101674916166" />
+ *   <TransactionDetails.Item label="From" value="JioFinance • shivashankar@okjio" />
+ *   <TransactionDetails.Item label="To" value="JioFinance • shivashankar@okjio" />
+ *   <TransactionDetails.Item label="Payment method" value="UPI" />
+ * </TransactionDetails>
+ * ```
+ */
+function TransactionDetails({
+  children,
+  modes = {},
+  style,
+  accessibilityLabel,
+  ...rest
+}: TransactionDetailsProps) {
+  // Resolve design tokens for TransactionDetails
+  const gap = getVariableByName('transationDetails/gap', modes) ?? 16
+  const paddingHorizontal = getVariableByName('transationDetails/padding/horizontal', modes) ?? 0
+  const paddingVertical = getVariableByName('transationDetails/padding/vertical', modes) ?? 0
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+  }
+
+  // Process children to pass modes prop
+  const processedChildren = children
+    ? cloneChildrenWithModes(React.Children.toArray(children), modes)
+    : null
+
+  return (
+    <View
+      style={[containerStyle, style]}
+      accessibilityRole="summary"
+      accessibilityLabel={accessibilityLabel || 'Transaction details'}
+      {...rest}
+    >
+      {processedChildren}
+    </View>
+  )
+}
+
+// Attach Item as a static property for compound component pattern
+TransactionDetails.Item = Item
+
+export default TransactionDetails

package/src/components/TransactionStatus/TransactionStatus.mdx

@@ -0,0 +1,41 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as TransactionStatusStories from './TransactionStatus.stories';
+import TransactionStatus from './TransactionStatus';
+
+<Meta of={TransactionStatusStories} />
+
+# TransactionStatus
+
+TransactionStatus component with design-token-driven styling.
+
+## 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.
+
+### Transaction Status
+- **Modes:** Request | Paid | Declined | Expired
+- **Default:** Request
+## Usage
+
+<Canvas>
+  <Story of={TransactionStatusStories.Default} />
+</Canvas>
+
+## Props
+
+<ArgsTable of={TransactionStatus} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`transactionBubble/statusWrap/gap`**
+- **`transactionStatus/color`**
+- **`transactionStatus/fontFamily`**
+- **`transactionStatus/fontSize`**
+- **`transactionStatus/fontWeight2`**
+- **`transactionStatus/icon/color`**
+- **`transactionStatus/iconSize`**
+- **`transactionStatus/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/TransactionStatus/TransactionStatus.tsx

@@ -0,0 +1,94 @@
+import React from 'react'
+import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
+import { Svg, Path } from 'react-native-svg'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+// --- Internal Icon Component ---
+type StatusIconProps = {
+    modes?: Record<string, any>
+    width?: number
+    height?: number
+    color?: string
+}
+
+const StatusIcon = ({
+    modes = {},
+    width = 15,
+    height = 15,
+    color,
+}: StatusIconProps) => {
+    const resolvedColor = color || getVariableByName('transactionStatus/icon/color', modes) || '#F06D0F'
+
+    return (
+        <Svg
+            width={width}
+            height={height}
+            viewBox="0 0 15 15"
+            fill="none"
+        >
+            <Path
+                d="M7.5 0C6.01664 0 4.5666 0.439867 3.33323 1.26398C2.09986 2.08809 1.13856 3.25943 0.570907 4.62987C0.00324963 6.00032 -0.145275 7.50832 0.144114 8.96318C0.433503 10.418 1.14781 11.7544 2.1967 12.8033C3.2456 13.8522 4.58197 14.5665 6.03683 14.8559C7.49168 15.1453 8.99968 14.9968 10.3701 14.4291C11.7406 13.8614 12.9119 12.9001 13.736 11.6668C14.5601 10.4334 15 8.98336 15 7.5C15 6.51509 14.806 5.53982 14.4291 4.62987C14.0522 3.71993 13.4997 2.89314 12.8033 2.1967C12.1069 1.50026 11.2801 0.947814 10.3701 0.570904C9.46019 0.193993 8.48492 0 7.5 0V0ZM6.75 3.375C6.75 3.17609 6.82902 2.98532 6.96967 2.84467C7.11033 2.70402 7.30109 2.625 7.5 2.625C7.69892 2.625 7.88968 2.70402 8.03033 2.84467C8.17099 2.98532 8.25 3.17609 8.25 3.375V7.875C8.25 8.07391 8.17099 8.26468 8.03033 8.40533C7.88968 8.54598 7.69892 8.625 7.5 8.625C7.30109 8.625 7.11033 8.54598 6.96967 8.40533C6.82902 8.26468 6.75 8.07391 6.75 7.875V3.375ZM7.5 12.375C7.2775 12.375 7.05999 12.309 6.87499 12.1854C6.68998 12.0618 6.54579 11.8861 6.46064 11.6805C6.37549 11.475 6.35321 11.2488 6.39662 11.0305C6.44003 10.8123 6.54717 10.6118 6.70451 10.4545C6.86184 10.2972 7.0623 10.19 7.28053 10.1466C7.49876 10.1032 7.72496 10.1255 7.93052 10.2106C8.13609 10.2958 8.31179 10.44 8.43541 10.625C8.55902 10.81 8.625 11.0275 8.625 11.25C8.625 11.5484 8.50648 11.8345 8.2955 12.0455C8.08452 12.2565 7.79837 12.375 7.5 12.375Z"
+                fill={resolvedColor}
+                fillRule="evenodd" // Added based on typical icon behavior, though Figma output said 'nonzero' default. SVG data usually needs checking.
+            />
+        </Svg>
+    )
+}
+
+// --- Main Component ---
+
+export type TransactionStatusProps = {
+    /** Status text, e.g. "Expired" */
+    status?: string
+    /** Date text, e.g. "20 Mar 2025" */
+    date?: string
+    /** Modes for design token resolution */
+    modes?: Record<string, any>
+    /** Optional container style */
+    style?: ViewStyle
+}
+
+/**
+ * TransactionStatus component displaying status icon, label, and date.
+ */
+export default function TransactionStatus({
+    status = 'Expired',
+    date = '20 Mar 2025',
+    modes = {},
+    style,
+}: TransactionStatusProps) {
+    const gap = Number(getVariableByName('transactionBubble/statusWrap/gap', modes)) || 4
+    // Using 'transactionStatus' tokens for text
+    const textColor = getVariableByName('transactionStatus/color', modes) || '#191b1e'
+    const fontSize = Number(getVariableByName('transactionStatus/fontSize', modes)) || 12
+    const lineHeight = Number(getVariableByName('transactionStatus/lineHeight', modes)) || 16
+    const fontFamily = getVariableByName('transactionStatus/fontFamily', modes) || 'System'
+    const fontWeight = getVariableByName('transactionStatus/fontWeight2', modes) || '500'
+
+    const iconColor = getVariableByName('transactionStatus/icon/color', modes) || '#f06d0f'
+    const iconSize = Number(getVariableByName('transactionStatus/iconSize', modes)) || 18
+
+    const containerStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap,
+        ...style,
+    }
+
+    const textStyle: TextStyle = {
+        color: textColor,
+        fontSize,
+        lineHeight,
+        fontFamily,
+        fontWeight: fontWeight as any,
+    }
+
+    return (
+        <View style={containerStyle}>
+            <StatusIcon width={iconSize} height={iconSize} color={iconColor} modes={modes} />
+            <Text style={textStyle} numberOfLines={1}>
+                {status} · {date}
+            </Text>
+        </View>
+    )
+}

package/src/components/index.ts

@@ -11,6 +11,7 @@ export { default as CardFeedback } from './CardFeedback/CardFeedback';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
 export { default as Drawer } from './Drawer/Drawer';
+export { default as CtaCard } from './CtaCard/CtaCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
 export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
@@ -27,5 +28,9 @@ export { default as Stepper } from './Stepper/Stepper';
 export { Step } from './Stepper/Step';
 export { StepLabel } from './Stepper/StepLabel';
 export { default as TextInput } from './TextInput/TextInput';
+export { default as ThreadHero, type ThreadHeroProps } from './ThreadHero/ThreadHero';
 export { Tooltip } from './Tooltip/Tooltip';
+export { default as TransactionBubble } from './TransactionBubble/TransactionBubble';
+export { default as TransactionDetails } from './TransactionDetails/TransactionDetails';
+export { default as TransactionStatus } from './TransactionStatus/TransactionStatus';
 export { default as UpiHandle } from './UpiHandle/UpiHandle';

package/src/icons/registry.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  * 
- * Generated: 2026-01-17T17:17:24.583Z
+ * Generated: 2026-01-21T10:51:56.970Z
  */
 
 // Icon name to SVG data mapping