jfs-components 0.0.1

package/lib/module/components/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,126 @@
+"use strict";
+
+import React from 'react';
+import { View, Platform } from 'react-native';
+import MaskedView from '@react-native-masked-view/masked-view';
+import Svg, { Path } from 'react-native-svg';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { jsx as _jsx } from "react/jsx-runtime";
+function AvatarGroup({
+  modes = {},
+  children,
+  style,
+  ...rest
+}) {
+  const gap = getVariableByName('avatarGroup/gap', modes) || 0;
+  const avatarSize = getVariableByName('avatar/size', modes) || 29;
+  const avatarRadius = getVariableByName('avatar/radius', modes) || 9999;
+  const borderSize = getVariableByName('avatar/border/size', modes) || 1;
+  const borderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)';
+  const paddingLeft = getVariableByName('avatarGroup/padding/left', modes) || 0;
+  const paddingRight = getVariableByName('avatarGroup/padding/right', modes) || 0;
+  const paddingTop = getVariableByName('avatarGroup/padding/top', modes) || 0;
+  const paddingBottom = getVariableByName('avatarGroup/padding/bottom', modes) || 0;
+  const validChildren = React.Children.toArray(children).filter(React.isValidElement);
+  const totalChildren = validChildren.length;
+
+  // shared geometry logic
+  const r = avatarSize / 2;
+  const gapInt = parseInt(gap.toString(), 10);
+  const avatarSizeInt = parseInt(avatarSize.toString(), 10);
+  const borderSizeInt = parseInt(borderSize.toString(), 10);
+  const avatarRadiusInt = parseInt(avatarRadius.toString(), 10);
+  const nextAvatarX = avatarSizeInt + gapInt;
+  // If radius is 9999 (full circle), use actual radius r.
+  // Effective radius for the hole includes the border of the next avatar.
+  const effectiveRadius = avatarRadiusInt >= 9999 ? r : avatarRadiusInt;
+  const holeRadius = effectiveRadius + borderSizeInt;
+  const holeCenter = {
+    x: nextAvatarX + r,
+    y: r
+  };
+
+  // Native Mask Path
+  const rectPath = `M 0 0 h ${avatarSizeInt} v ${avatarSizeInt} h -${avatarSizeInt} z`;
+  const circlePath = `M ${holeCenter.x},${holeCenter.y} m -${holeRadius},0 a ${holeRadius},${holeRadius} 0 1,0 ${holeRadius * 2},0 a ${holeRadius},${holeRadius} 0 1,0 -${holeRadius * 2},0`;
+  const maskPath = `${rectPath} ${circlePath}`;
+
+  // Web Mask Gradient
+  // radial-gradient(circle at CX CY, transparent R, black R+1)
+  const webMaskImage = `radial-gradient(circle at ${holeCenter.x}px ${holeCenter.y}px, transparent ${holeRadius}px, black ${holeRadius + 0.5}px)`;
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: parseInt(paddingLeft.toString(), 10),
+    paddingRight: parseInt(paddingRight.toString(), 10),
+    paddingTop: parseInt(paddingTop.toString(), 10),
+    paddingBottom: parseInt(paddingBottom.toString(), 10)
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    ...rest,
+    children: validChildren.map((child, index) => {
+      const isLast = index === totalChildren - 1;
+      const element = child;
+      const elementProps = element.props || {};
+      const clonedChild = /*#__PURE__*/React.cloneElement(element, {
+        modes: {
+          ...modes,
+          ...(elementProps.modes || {})
+        }
+      });
+      if (isLast) {
+        return /*#__PURE__*/_jsx(View, {
+          style: {
+            zIndex: index
+          },
+          children: clonedChild
+        }, index);
+      }
+
+      // Wrapper style for avatar dimension
+      const wrapperStyle = {
+        zIndex: index,
+        width: avatarSizeInt,
+        height: avatarSizeInt,
+        marginRight: isLast ? 0 : gapInt,
+        // Apply negative gap here
+        // On web, we apply the mask directly to the container
+        ...(Platform.OS === 'web' ? {
+          maskImage: webMaskImage,
+          WebkitMaskImage: webMaskImage
+        } : {})
+      };
+      if (Platform.OS === 'web') {
+        return /*#__PURE__*/_jsx(View, {
+          style: wrapperStyle,
+          children: clonedChild
+        }, index);
+      }
+
+      // Native MaskedView
+      return /*#__PURE__*/_jsx(View, {
+        style: wrapperStyle,
+        children: /*#__PURE__*/_jsx(MaskedView, {
+          style: {
+            flex: 1,
+            height: '100%'
+          },
+          maskElement: /*#__PURE__*/_jsx(Svg, {
+            height: "100%",
+            width: "100%",
+            viewBox: `0 0 ${avatarSizeInt} ${avatarSizeInt}`,
+            children: /*#__PURE__*/_jsx(Path, {
+              d: maskPath,
+              fill: "black",
+              fillRule: "evenodd"
+            })
+          }),
+          children: clonedChild
+        })
+      }, index);
+    })
+  });
+}
+export default AvatarGroup;
+//# sourceMappingURL=AvatarGroup.js.map

package/lib/module/components/AvatarGroup/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Platform","MaskedView","Svg","Path","getVariableByName","jsx","_jsx","AvatarGroup","modes","children","style","rest","gap","avatarSize","avatarRadius","borderSize","borderColor","paddingLeft","paddingRight","paddingTop","paddingBottom","validChildren","Children","toArray","filter","isValidElement","totalChildren","length","r","gapInt","parseInt","toString","avatarSizeInt","borderSizeInt","avatarRadiusInt","nextAvatarX","effectiveRadius","holeRadius","holeCenter","x","y","rectPath","circlePath","maskPath","webMaskImage","containerStyle","flexDirection","alignItems","map","child","index","isLast","element","elementProps","props","clonedChild","cloneElement","zIndex","wrapperStyle","width","height","marginRight","OS","maskImage","WebkitMaskImage","flex","maskElement","viewBox","d","fill","fillRule"],"sourceRoot":"../../../../src","sources":["components/AvatarGroup/AvatarGroup.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/AvatarGroup/AvatarGroup.mdx

@@ -0,0 +1,42 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as AvatarGroupStories from './AvatarGroup.stories';
+import AvatarGroup from './AvatarGroup';
+
+<Meta of={AvatarGroupStories} />
+
+# AvatarGroup
+
+AvatarGroup 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.
+
+### Avatar Size
+- **Modes:** L | M | S
+- **Default:** L
+## Usage
+
+<Canvas>
+  <Story of={AvatarGroupStories.Default} />
+</Canvas>
+
+## Props
+
+<ArgsTable of={AvatarGroup} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`avatar/border/color`**
+- **`avatar/border/size`**
+- **`avatar/radius`**
+- **`avatar/size`**
+- **`avatarGroup/gap`**
+- **`avatarGroup/padding/bottom`**
+- **`avatarGroup/padding/left`**
+- **`avatarGroup/padding/right`**
+- **`avatarGroup/padding/top`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/module/components/Badge/Badge.js

@@ -0,0 +1,63 @@
+"use strict";
+
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { jsx as _jsx } from "react/jsx-runtime";
+function Badge({
+  label = 'Label',
+  modes = {},
+  onPress,
+  accessibilityLabel,
+  style,
+  labelStyle,
+  ...rest
+}) {
+  // Resolve token values (fall back to sensible defaults)
+  const backgroundColor = getVariableByName('badge/color/background', modes) || '#d8effe';
+  const labelColor = getVariableByName('badge/color/label', modes) || '#000000';
+  const fontSize = Number(getVariableByName('badge/label/fontSize', modes)) || 12;
+  const fontFamily = getVariableByName('badge/fontFamily', modes) || undefined;
+  const fontWeight = getVariableByName('badge/label/fontWeight', modes) || '600';
+  const paddingHorizontal = Number(getVariableByName('badge/padding/horizontal', modes)) || 6;
+  const paddingVertical = Number(getVariableByName('badge/padding/vertical', modes)) || 4;
+  const borderRadius = Number(getVariableByName('badge/radius', modes)) || 4;
+  const lineHeight = Number(getVariableByName('badge/label/lineHeight', modes)) || Math.round(fontSize * 1.2);
+  const Container = onPress ? Pressable : View;
+  const containerStyle = {
+    backgroundColor,
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius,
+    alignSelf: 'flex-start',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...(style || {})
+  };
+  const textStyle = {
+    color: labelColor,
+    fontSize,
+    fontFamily,
+    fontWeight: fontWeight,
+    lineHeight,
+    includeFontPadding: false,
+    ...(labelStyle || {})
+  };
+  const defaultAccessibilityLabel = accessibilityLabel || label;
+  return /*#__PURE__*/_jsx(Container, {
+    style: containerStyle,
+    accessibilityRole: onPress ? 'button' : 'text',
+    accessibilityLabel: defaultAccessibilityLabel,
+    onPress: onPress,
+    ...rest,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: textStyle,
+      numberOfLines: 1,
+      ellipsizeMode: "tail",
+      accessibilityElementsHidden: false,
+      children: label
+    })
+  });
+}
+export default Badge;
+//# sourceMappingURL=Badge.js.map

package/lib/module/components/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","Pressable","getVariableByName","jsx","_jsx","Badge","label","modes","onPress","accessibilityLabel","style","labelStyle","rest","backgroundColor","labelColor","fontSize","Number","fontFamily","undefined","fontWeight","paddingHorizontal","paddingVertical","borderRadius","lineHeight","Math","round","Container","containerStyle","alignSelf","alignItems","justifyContent","textStyle","color","includeFontPadding","defaultAccessibilityLabel","accessibilityRole","children","numberOfLines","ellipsizeMode","accessibilityElementsHidden"],"sourceRoot":"../../../../src","sources":["components/Badge/Badge.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,IAAI,EACJC,IAAI,EACJC,SAAS,QAGJ,cAAc;AACrB,SAASC,iBAAiB,QAAQ,8CAA8C;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAchF,SAASC,KAAKA,CAAC;EACbC,KAAK,GAAG,OAAO;EACfC,KAAK,GAAG,CAAC,CAAC;EACVC,OAAO;EACPC,kBAAkB;EAClBC,KAAK;EACLC,UAAU;EACV,GAAGC;AACO,CAAC,EAAE;EACb;EACA,MAAMC,eAAe,GAClBX,iBAAiB,CAAC,wBAAwB,EAAEK,KAAK,CAAC,IAAe,SAAS;EAC7E,MAAMO,UAAU,GACbZ,iBAAiB,CAAC,mBAAmB,EAAEK,KAAK,CAAC,IAAe,SAAS;EACxE,MAAMQ,QAAQ,GACZC,MAAM,CAACd,iBAAiB,CAAC,sBAAsB,EAAEK,KAAK,CAAY,CAAC,IAAI,EAAE;EAC3E,MAAMU,UAAU,GACbf,iBAAiB,CAAC,kBAAkB,EAAEK,KAAK,CAAC,IAAeW,SAAS;EACvE,MAAMC,UAAU,GACbjB,iBAAiB,CAAC,wBAAwB,EAAEK,KAAK,CAAC,IAAe,KAAK;EACzE,MAAMa,iBAAiB,GACrBJ,MAAM,CAACd,iBAAiB,CAAC,0BAA0B,EAAEK,KAAK,CAAY,CAAC,IAAI,CAAC;EAC9E,MAAMc,eAAe,GACnBL,MAAM,CAACd,iBAAiB,CAAC,wBAAwB,EAAEK,KAAK,CAAY,CAAC,IAAI,CAAC;EAC5E,MAAMe,YAAY,GAChBN,MAAM,CAACd,iBAAiB,CAAC,cAAc,EAAEK,KAAK,CAAY,CAAC,IAAI,CAAC;EAClE,MAAMgB,UAAU,GACdP,MAAM,CAACd,iBAAiB,CAAC,wBAAwB,EAAEK,KAAK,CAAY,CAAC,IACrEiB,IAAI,CAACC,KAAK,CAACV,QAAQ,GAAG,GAAG,CAAC;EAE5B,MAAMW,SAAc,GAAGlB,OAAO,GAAGP,SAAS,GAAGF,IAAI;EAEjD,MAAM4B,cAAyB,GAAG;IAChCd,eAAe;IACfO,iBAAiB;IACjBC,eAAe;IACfC,YAAY;IACZM,SAAS,EAAE,YAAY;IACvBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxB,IAAKpB,KAAK,IAAY,CAAC,CAAC;EAC1B,CAAC;EAED,MAAMqB,SAAoB,GAAG;IAC3BC,KAAK,EAAElB,UAAU;IACjBC,QAAQ;IACRE,UAAU;IACVE,UAAU,EAAEA,UAAqC;IACjDI,UAAU;IACVU,kBAAkB,EAAE,KAAY;IAChC,IAAKtB,UAAU,IAAY,CAAC,CAAC;EAC/B,CAAC;EAED,MAAMuB,yBAAyB,GAAGzB,kBAAkB,IAAIH,KAAK;EAE7D,oBACEF,IAAA,CAACsB,SAAS;IACRhB,KAAK,EAAEiB,cAAe;IACtBQ,iBAAiB,EAAE3B,OAAO,GAAG,QAAQ,GAAG,MAAO;IAC/CC,kBAAkB,EAAEyB,yBAA0B;IAC9C1B,OAAO,EAAEA,OAAQ;IAAA,GACbI,IAAI;IAAAwB,QAAA,eAERhC,IAAA,CAACJ,IAAI;MACHU,KAAK,EAAEqB,SAAU;MACjBM,aAAa,EAAE,CAAE;MACjBC,aAAa,EAAC,MAAM;MACpBC,2BAA2B,EAAE,KAAM;MAAAH,QAAA,EAElC9B;IAAK,CACF;EAAC,CACE,CAAC;AAEhB;AAEA,eAAeD,KAAK","ignoreList":[]}

package/lib/module/components/Badge/Badge.mdx

@@ -0,0 +1,42 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as BadgeStories from './Badge.stories';
+import Badge from './Badge';
+
+<Meta of={BadgeStories} />
+
+# Badge
+
+Simple, token-driven badge component used to surface short labels or statuses.
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Props
+
+<ArgsTable of={Badge} />
+
+## Usage
+
+<Canvas>
+  <Story of={BadgeStories} />
+</Canvas>
+
+
+
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`badge/color/background`**
+- **`badge/color/label`**
+- **`badge/fontFamily`**
+- **`badge/label/fontSize`**
+- **`badge/label/fontWeight`**
+- **`badge/label/lineHeight`**
+- **`badge/padding/horizontal`**
+- **`badge/padding/vertical`**
+- **`badge/radius`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/module/components/BottomNav/BottomNav.js

@@ -0,0 +1,140 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import BottomNavItem from '../BottomNavItem/BottomNavItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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
+}) {
+  // 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 = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor,
+    paddingTop,
+    paddingBottom,
+    paddingHorizontal,
+    borderTopWidth: borderWidth,
+    borderTopColor: borderColor,
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderBottomWidth: 0
+  };
+  const renderItem = item => {
+    const itemModes = item.modes ? {
+      ...modes,
+      ...item.modes
+    } : modes;
+    const handlePress = () => {
+      if (item.onPress) {
+        item.onPress();
+      }
+      if (onItemPress) {
+        onItemPress(item);
+      }
+    };
+    return /*#__PURE__*/_jsx(BottomNavItem, {
+      ...(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 => {
+          const key = e?.nativeEvent?.key || (e?.key ?? '');
+          if (key === 'Enter' || key === ' ' || key === 'Spacebar') {
+            handlePress();
+          }
+          ;
+          item?.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
+      } : {})
+    }, item.key || item.label);
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityRole: "tablist",
+    accessibilityLabel: accessibilityLabel,
+    ...(accessibilityHint !== undefined ? {
+      accessibilityHint
+    } : {}),
+    ...rest,
+    children: items.map(renderItem)
+  });
+}
+export default BottomNav;
+//# sourceMappingURL=BottomNav.js.map

package/lib/module/components/BottomNav/BottomNav.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","getVariableByName","BottomNavItem","jsx","_jsx","BottomNav","items","key","label","iconName","modes","onItemPress","style","accessibilityLabel","accessibilityHint","rest","backgroundColor","borderColor","borderWidth","paddingTop","paddingBottom","paddingHorizontal","containerStyle","flexDirection","alignItems","borderTopWidth","borderTopColor","borderLeftWidth","borderRightWidth","borderBottomWidth","renderItem","item","itemModes","handlePress","onPress","undefined","onKeyPress","e","nativeEvent","disabled","flex","labelStyle","iconColor","iconSize","accessibilityRole","children","map"],"sourceRoot":"../../../../src","sources":["components/BottomNav/BottomNav.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/BottomNav/BottomNav.mdx

@@ -0,0 +1,64 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as BottomNavStories from './BottomNav.stories';
+import BottomNav from './BottomNav';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={BottomNavStories} />
+
+# BottomNav
+
+Bottom navigation bar composed of multiple `BottomNavItem`s.
+
+## 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
+
+<Canvas>
+  <Story of={BottomNavStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Set `accessibilityLabel`/`accessibilityHint` on the bar to describe the destinations it controls.',
+    'Mark the active destination by passing `accessibilityState={{ selected: true }}` to the active `BottomNavItem`.',
+    'Keep item labels concise (1–2 words); icons alone are not announced.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Container</strong> — token-styled bar with padding and border.</li>
+    <li><strong>Items</strong> — `BottomNavItem` children laid out evenly.</li>
+    <li><strong>Press handling</strong> — `onItemPress` invoked with the tapped item.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Keep 3–5 items to preserve tap target width; give each item a stable `key`.',
+    'Forward shared `modes` so the bar and items stay in sync across themes.',
+    'Avoid wrapping the bar in another Pressable; rely on item-level handlers.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={BottomNav} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`bottomNav/background`**
+- **`bottomNav/border/color`**
+- **`bottomNav/border/width`**
+- **`bottomNav/padding/bottom`**
+- **`bottomNav/padding/horizontal`**
+- **`bottomNav/padding/top`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/module/components/BottomNavItem/BottomNavItem.js

@@ -0,0 +1,167 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import Icon from '../../icons/Icon';
+import { usePressableWebSupport } from '../../utils/web-platform-utils';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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
+}) {
+  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 = {
+    alignItems: 'center',
+    opacity: disabled ? 0.5 : 1
+  };
+  const 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 = () => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Icon, {
+      name: iconName,
+      size: resolvedIconSize,
+      color: resolvedIconColor,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [textStyle, labelStyle],
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      children: label
+    })]
+  });
+  if (!onPress) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [baseContainerStyle, style],
+      accessibilityRole: "tab",
+      accessibilityLabel: defaultAccessibilityLabel,
+      accessibilityHint: accessibilityHint,
+      accessibilityState: {
+        disabled,
+        ...accessibilityState
+      },
+      ...rest,
+      children: renderContent()
+    });
+  }
+  return /*#__PURE__*/_jsx(Pressable, {
+    accessibilityRole: "tab",
+    accessibilityLabel: defaultAccessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    accessibilityState: {
+      disabled,
+      selected: accessibilityState?.selected,
+      ...accessibilityState
+    },
+    onPress: onPress,
+    disabled: disabled,
+    onPressIn: e => {
+      ;
+      rest?.onPressIn?.(e);
+    },
+    onPressOut: e => {
+      ;
+      rest?.onPressOut?.(e);
+    },
+    onFocus: e => {
+      setIsFocused(true);
+      rest?.onFocus?.(e);
+    },
+    onBlur: e => {
+      setIsFocused(false);
+      rest?.onBlur?.(e);
+    },
+    onHoverIn: e => {
+      setIsHovered(true);
+      rest?.onHoverIn?.(e);
+    },
+    onHoverOut: e => {
+      setIsHovered(false);
+      rest?.onHoverOut?.(e);
+    },
+    style: ({
+      pressed
+    }) => [baseContainerStyle, style, pressed && !disabled ? pressedStyle : null, isHovered && !disabled ? hoverStyle : null, isFocused && !disabled ? focusStyle : null],
+    ...webProps,
+    children: renderContent()
+  });
+}
+export default BottomNavItem;
+//# sourceMappingURL=BottomNavItem.js.map