jfs-components 0.0.1

package/src/components/BottomNav/BottomNav.tsx

@@ -0,0 +1,137 @@
+import React from 'react'
+import { View, type StyleProp, type ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import BottomNavItem from '../BottomNavItem/BottomNavItem'
+
+type BottomNavItemType = {
+  key?: string;
+  label?: string;
+  iconName?: string;
+  onPress?: () => void;
+  iconColor?: string;
+  iconSize?: number;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: any;
+  modes?: Record<string, any>;
+};
+
+type BottomNavProps = {
+  items?: BottomNavItemType[];
+  modes?: Record<string, any>;
+  onItemPress?: (item: BottomNavItemType) => void;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+} & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel' | 'accessibilityHint'>;
+
+/**
+ * Bottom navigation bar composed of multiple `BottomNavItem`s.
+ *
+ * Styling is resolved from Figma design tokens via `getVariableByName`, with
+ * the `modes` object passed through just like other components in this
+ * library.
+ *
+ * @component
+ * @param {Object} props
+ * @param {Array} [props.items] - Items to render. Each item can include:
+ *  - key: unique key
+ *  - label: string
+ *  - iconName: icon from registry
+ *  - onPress: optional handler
+ *  - iconColor/iconSize/disabled/style/labelStyle
+ * @param {Object} [props.modes={}] - Modes forwarded to token resolver.
+ * @param {Function} [props.onItemPress] - Called with the item when pressed.
+ * @param {Object} [props.style] - Optional container style overrides.
+ * @param {string} [props.accessibilityLabel] - Accessibility label for the navigation bar
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+function BottomNav({
+  items = [
+    { key: 'home', label: 'Home', iconName: 'ic_home' },
+    { key: 'finances', label: 'Finances', iconName: 'ic_rupee' },
+    { key: 'pay', label: 'Pay', iconName: 'ic_scan_qr_code' },
+    { key: 'invest', label: 'Invest', iconName: 'ic_rupee_coin' },
+    { key: 'explore', label: 'Explore', iconName: 'ic_search' },
+  ],
+  modes = {},
+  onItemPress,
+  style,
+  accessibilityLabel = "Bottom navigation",
+  accessibilityHint,
+  ...rest
+}: BottomNavProps) {
+  // Resolve container styling tokens
+  const backgroundColor = getVariableByName('bottomNav/background', modes) || '#ffffff'
+  const borderColor = getVariableByName('bottomNav/border/color', modes) || '#cccfd1'
+  const borderWidth = getVariableByName('bottomNav/border/width', modes) ?? 1
+  const paddingTop = getVariableByName('bottomNav/padding/top', modes) ?? 10
+  const paddingBottom = getVariableByName('bottomNav/padding/bottom', modes) ?? 23
+  const paddingHorizontal = getVariableByName('bottomNav/padding/horizontal', modes) ?? 16
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor,
+    paddingTop,
+    paddingBottom,
+    paddingHorizontal,
+    borderTopWidth: borderWidth,
+    borderTopColor: borderColor,
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderBottomWidth: 0,
+  }
+
+  const renderItem = (item: BottomNavItemType) => {
+    const itemModes = item.modes ? { ...modes, ...item.modes } : modes
+    const handlePress = () => {
+      if (item.onPress) {
+        item.onPress()
+      }
+      if (onItemPress) {
+        onItemPress(item)
+      }
+    }
+
+    return (
+      <BottomNavItem
+        key={item.key || item.label}
+        {...(item.iconName !== undefined ? { iconName: item.iconName } : {})}
+        {...(item.label !== undefined ? { label: item.label } : {})}
+        modes={itemModes}
+        {...((item.onPress !== undefined || onItemPress !== undefined) ? {
+          onPress: handlePress,
+          // Provide basic keyboard-on-web support: call press handler for Enter/Space
+          onKeyPress: (e: any) => {
+            const key = e?.nativeEvent?.key || (e?.key ?? '')
+            if (key === 'Enter' || key === ' ' || key === 'Spacebar') {
+              handlePress()
+            }
+            ;(item as any)?.onKeyPress?.(e)
+          },
+        } : {})}
+        {...(item.disabled !== undefined ? { disabled: item.disabled } : {})}
+        style={[{ flex: 1 }, item.style]}
+        {...(item.labelStyle !== undefined ? { labelStyle: item.labelStyle } : {})}
+        {...(item.iconColor !== undefined ? { iconColor: item.iconColor } : {})}
+        {...(item.iconSize !== undefined ? { iconSize: item.iconSize } : {})}
+      />
+    )
+  }
+
+  return (
+    <View 
+      style={[containerStyle, style]}
+      accessibilityRole="tablist"
+      accessibilityLabel={accessibilityLabel}
+      {...(accessibilityHint !== undefined ? { accessibilityHint } : {})}
+      {...rest}
+    >
+      {items.map(renderItem)}
+    </View>
+  )
+}
+
+export default BottomNav
+

package/src/components/BottomNavItem/BottomNavItem.mdx

@@ -0,0 +1,70 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as BottomNavItemStories from './BottomNavItem.stories';
+import BottomNavItem from './BottomNavItem';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={BottomNavItemStories} />
+
+# BottomNavItem
+
+Bottom navigation item with icon and label stacked vertically.
+
+## 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.
+
+### BottomNavItem / State
+- **Modes:** Idle | Active
+- **Default:** Idle
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+## Usage
+
+<Canvas>
+  <Story of={BottomNavItemStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Use `accessibilityLabel` when the visible label is abbreviated; defaults to the label text.',
+    'Expose selection with `accessibilityState.selected` on the active destination.',
+    'Keep disabled items in the tree and pass `disabled` so assistive tech announces state.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Pressable</strong> — tab role container applying opacity on press.</li>
+    <li><strong>Icon</strong> — registry icon hidden from the accessibility tree.</li>
+    <li><strong>Label</strong> — token typography beneath the icon.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Use short labels to avoid wrapping; adjust typography through tokens rather than inline styles.',
+    'Only supply `onPress` when actionable; otherwise render as static tab context.',
+    'Let the parent manage selection; do not store selection locally.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={BottomNavItem} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`bottomNavItem/fontFamily`**
+- **`bottomNavItem/fontSize`**
+- **`bottomNavItem/fontWeight`**
+- **`bottomNavItem/gap`**
+- **`bottomNavItem/icon/color`**
+- **`bottomNavItem/icon/size`**
+- **`bottomNavItem/label/color`**
+- **`bottomNavItem/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/BottomNavItem/BottomNavItem.tsx

@@ -0,0 +1,208 @@
+import React, { useState } from 'react'
+import {
+  Pressable,
+  Text,
+  View,
+  type AccessibilityState,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import Icon from '../../icons/Icon'
+import { usePressableWebSupport, type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils'
+
+type BottomNavItemProps = SafePressableProps & {
+  iconName?: string;
+  label?: string;
+  modes?: Record<string, any>;
+  onPress?: () => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  iconColor?: string;
+  iconSize?: number;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  accessibilityState?: AccessibilityState;
+  /**
+   * Web-specific accessibility props (only used on web platform)
+   */
+  webAccessibilityProps?: WebAccessibilityProps;
+};
+
+/**
+ * Bottom navigation item with icon and label stacked vertically.
+ *
+ * All visual attributes resolve from Figma tokens via `getVariableByName`,
+ * with the `modes` object passed straight through (same pattern as the rest
+ * of the library). Defaults reflect the Figma design for the base state.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.iconName="ic_home"] - Icon name from the registry.
+ * @param {string} [props.label="Home"] - Text label displayed under the icon.
+ * @param {Object} [props.modes={}] - Modes object forwarded to token resolver.
+ * @param {Function} [props.onPress] - Optional press handler.
+ * @param {boolean} [props.disabled=false] - When true, lowers opacity and disables press.
+ * @param {Object} [props.style] - Optional style overrides for the outer container.
+ * @param {Object} [props.labelStyle] - Optional style overrides for the label text.
+ * @param {string} [props.iconColor] - Optional explicit icon color override.
+ * @param {number} [props.iconSize] - Optional explicit icon size override.
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses label
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ * @param {Object} [props.accessibilityState] - Additional accessibility state information
+ */
+function BottomNavItem({
+  iconName = 'ic_home',
+  label = 'Home',
+  modes = {},
+  onPress,
+  disabled = false,
+  style,
+  labelStyle,
+  iconColor: iconColorOverride,
+  iconSize: iconSizeOverride,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  webAccessibilityProps,
+  ...rest
+}: BottomNavItemProps) {
+  const [isFocused, setIsFocused] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
+  const pressedStyle = { opacity: 0.7 }
+  const focusStyle = { borderBottomWidth: 2, borderBottomColor: '#222' }
+  const hoverStyle = { opacity: 0.85 }
+  // Resolve spacing and typography
+  const gap = getVariableByName('bottomNavItem/gap', modes) ?? 6
+
+  const fontFamily =
+    getVariableByName('bottomNavItem/fontFamily', modes) || 'JioType_Var:Medium'
+  const fontWeightRaw = getVariableByName('bottomNavItem/fontWeight', modes) ?? 500
+  const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw
+  const fontSize = getVariableByName('bottomNavItem/fontSize', modes) ?? 11
+  const lineHeight = getVariableByName('bottomNavItem/lineHeight', modes) ?? 14
+  const labelColor = getVariableByName('bottomNavItem/label/color', modes) || '#0d0d0f'
+
+  // Resolve icon appearance
+  const resolvedIconColor =
+    iconColorOverride || getVariableByName('bottomNavItem/icon/color', modes) || '#ad8545'
+  const resolvedIconSize = iconSizeOverride ?? getVariableByName('bottomNavItem/icon/size', modes) ?? 24
+
+  const baseContainerStyle: ViewStyle = {
+    alignItems: 'center',
+    opacity: disabled ? 0.5 : 1,
+  }
+
+  const textStyle: TextStyle = {
+    color: labelColor,
+    fontFamily,
+    fontWeight,
+    fontSize,
+    lineHeight,
+    textAlign: 'center',
+    marginTop: gap,
+  }
+
+  // Use provided accessibilityLabel or fall back to label
+  const defaultAccessibilityLabel = accessibilityLabel || label
+
+  // Get web platform support props (only used when onPress is defined)
+  const webProps = usePressableWebSupport({
+    restProps: rest,
+    onPress: disabled ? undefined : onPress,
+    disabled,
+    accessibilityLabel: defaultAccessibilityLabel,
+    webAccessibilityProps,
+  })
+
+  const renderContent = () => (
+    <>
+      <Icon 
+        name={iconName} 
+        size={resolvedIconSize} 
+        color={resolvedIconColor}
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no"
+      />
+      <Text 
+        style={[textStyle, labelStyle]}
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no"
+      >
+        {label}
+      </Text>
+    </>
+  )
+
+  if (!onPress) {
+    return (
+      <View 
+        style={[baseContainerStyle, style]}
+        accessibilityRole="tab"
+        accessibilityLabel={defaultAccessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        accessibilityState={{ 
+          disabled,
+          ...accessibilityState 
+        }}
+        {...rest}
+      >
+        {renderContent()}
+      </View>
+    )
+  }
+
+  return (
+    <Pressable
+      accessibilityRole="tab"
+      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityState={{ 
+        disabled,
+        selected: accessibilityState?.selected,
+        ...accessibilityState 
+      }}
+      onPress={onPress}
+      disabled={disabled}
+      onPressIn={(e: any) => {
+        ;(rest as any)?.onPressIn?.(e)
+      }}
+      onPressOut={(e: any) => {
+        ;(rest as any)?.onPressOut?.(e)
+      }}
+      onFocus={(e: any) => {
+        setIsFocused(true)
+        ;(rest as any)?.onFocus?.(e)
+      }}
+      onBlur={(e: any) => {
+        setIsFocused(false)
+        ;(rest as any)?.onBlur?.(e)
+      }}
+      onHoverIn={(e: any) => {
+        setIsHovered(true)
+        ;(rest as any)?.onHoverIn?.(e)
+      }}
+      onHoverOut={(e: any) => {
+        setIsHovered(false)
+        ;(rest as any)?.onHoverOut?.(e)
+      }}
+      style={({ pressed }) =>
+        [
+          baseContainerStyle,
+          style,
+          pressed && !disabled ? pressedStyle : null,
+          isHovered && !disabled ? hoverStyle : null,
+          isFocused && !disabled ? focusStyle : null,
+        ] as StyleProp<ViewStyle>
+      }
+      {...webProps}
+    >
+      {renderContent()}
+    </Pressable>
+  )
+}
+
+export default BottomNavItem
+

package/src/components/Button/Button.mdx

@@ -0,0 +1,105 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as ButtonStories from './Button.stories';
+import Button from './Button';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+Button component that maps directly to the Figma design using design tokens.
+
+## 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.
+
+### Semantic Intent
+- **Modes:** Brand | System
+- **Default:** Brand
+
+### Emphasis
+- **Modes:** High | Medium | Low
+- **Default:** High
+
+### Appearance.Brand
+- **Modes:** Primary | Secondary | Neutral
+- **Default:** Primary
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
+### Appearance.System
+- **Modes:** positive | warning | negative
+- **Default:** positive
+
+### Context
+- **Modes:** Default | Nudge&Alert
+- **Default:** Default
+
+### Button / Size
+- **Modes:** M | S
+- **Default:** M
+## Usage
+
+<Canvas>
+  <Story of={ButtonStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Provide `accessibilityLabel` when the visual label is an icon or custom child; otherwise the visible `label` is announced.',
+    'Pair tap actions with `accessibilityHint` when navigation or destructive behavior is not obvious.',
+    'Respect disabled states so screen readers announce `disabled`; avoid removing the control from the tree when disabled.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Container</strong> — token-driven padding, radius, border.</li>
+    <li><strong>Leading</strong> — optional icon or element before the label.</li>
+    <li>
+      <strong>Label/Content</strong> — by default, a token-styled Text node driven by <code>label</code> and <code>labelStyle</code>;
+      can be replaced via <code>renderContent(styles)</code> (reusing the styles) or fully overridden with <code>children</code>.
+    </li>
+    <li><strong>Trailing</strong> — optional icon or status after the label.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Use `modes` to align size/emphasis with adjacent IconButtons and form controls.',
+    'Keep labels short (1–3 words) to avoid truncation; long labels should be handled with `numberOfLines` in a custom child or in `renderContent`.',
+    'Avoid nesting other Pressables inside the button; use leading/trailing slots for icons only.',
+    'When providing `children`, treat it as a full-content override: `label` and `labelStyle` are ignored and you are responsible for typography and accessibility.',
+    'Prefer `renderContent(styles)` when you need custom content but still want to inherit the design-token typography.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={Button} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`button/background`**
+- **`button/border/color`**
+- **`button/border/size`**
+- **`button/fontFamily`**
+- **`button/fontSize`**
+- **`button/fontWeight`**
+- **`button/forground`**
+- **`button/gap`**
+- **`button/lineHeight`**
+- **`button/padding/horizontal`**
+- **`button/padding/vertical`**
+- **`button/radius`**
+
+All tokens support mode-based theming through the `modes` prop.
+## Custom content patterns
+
+- Use <code>label</code> (and optional <code>labelStyle</code>) for the standard, token-driven text label.
+- Use <code>renderContent(styles)</code> to take over the inner content while still reusing the merged label text styles passed via <code>styles</code>.
+- Use <code>children</code> only when you want to fully replace the inner content; in this mode <code>label</code> and <code>labelStyle</code> are ignored, and you must supply an appropriate <code>accessibilityLabel</code> when the visual content is non-text or ambiguous.