jfs-components 0.0.1 → 0.0.3

package/lib/module/components/ListItem/ListItem.js

@@ -4,15 +4,18 @@ import React, { useMemo } from 'react';
 import { View, Text, Pressable } 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 } 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.
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function cloneChildrenWithModes(children, modes) {
+function cloneChildrenWithModes(children, modes, forcedModes) {
   const result = React.Children.map(children, child => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return child;
@@ -24,15 +27,20 @@ function cloneChildrenWithModes(children, modes) {
 
     // 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?.modes;
-    const mergedModes = existingModes ? {
+    const mergedModes = forcedModes ? {
+      ...modes,
+      ...(existingModes || {}),
+      ...forcedModes
+    } : existingModes ? {
       ...modes,
       ...existingModes
     } : modes;
 
     // Recursively process children if they exist
-    const processedChildren = hasChildren ? cloneChildrenWithModes(React.Children.toArray(childChildren), modes) : undefined;
+    const processedChildren = hasChildren ? cloneChildrenWithModes(React.Children.toArray(childChildren), modes, forcedModes) : undefined;
 
     // Clone element with modes and processed children
     return /*#__PURE__*/React.cloneElement(child, {
@@ -65,7 +73,7 @@ function cloneChildrenWithModes(children, modes) {
  * @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.
@@ -82,7 +90,7 @@ function ListItem({
   leading,
   supportSlot,
   endSlot,
-  showTrailing = true,
+  navArrow = true,
   modes = {},
   onPress,
   style,
@@ -203,12 +211,12 @@ function ListItem({
   };
   if (layout === 'Horizontal') {
     // Process endSlot to pass modes to children
-    const processedEndSlot = endSlot ? cloneChildrenWithModes(React.Children.toArray(endSlot), modes) : [];
+    // Force Context: 'ListItem' - this value can never be overridden by external modes
+    const processedEndSlot = endSlot ? cloneChildrenWithModes(React.Children.toArray(endSlot), modes, {
+      "Context": 'ListItem'
+    }) : [];
     // Extract single element if array has one element, otherwise use array
-    const trailingContent = processedEndSlot.length > 0 ? processedEndSlot.length === 1 ? processedEndSlot[0] : processedEndSlot : showTrailing ? /*#__PURE__*/_jsx(Button, {
-      label: "Button",
-      modes: modes
-    }) : null;
+    const trailingContent = processedEndSlot.length > 0 ? processedEndSlot.length === 1 ? processedEndSlot[0] : processedEndSlot : null;
     const innerContent = /*#__PURE__*/_jsxs(View, {
       style: [innerContentBaseStyle, contentStyle],
       children: [leadingElement, /*#__PURE__*/_jsxs(View, {
@@ -224,7 +232,10 @@ function ListItem({
       }), trailingContent ? /*#__PURE__*/_jsx(View, {
         style: trailingWrapperStyle,
         children: trailingContent
-      }) : null]
+      }) : null, navArrow && /*#__PURE__*/_jsx(NavArrow, {
+        direction: "Forward",
+        modes: modes
+      })]
     });
     if (onPress) {
       return /*#__PURE__*/_jsx(Pressable, {

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

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","View","Text","Pressable","getVariableByName","IconCapsule","Button","usePressableWebSupport","jsx","_jsx","jsxs","_jsxs","cloneChildrenWithModes","children","modes","result","Children","map","child","isValidElement","childChildren","props","hasChildren","undefined","existingModes","mergedModes","processedChildren","toArray","cloneElement","ListItem","layout","title","supportText","showSupportText","leading","supportSlot","endSlot","showTrailing","onPress","style","contentStyle","accessibilityLabel","accessibilityHint","accessibilityState","webAccessibilityProps","rest","gap","paddingTop","paddingBottom","paddingLeft","paddingRight","titleColor","titleFontSize","titleLineHeight","titleFontFamily","titleFontWeightRaw","titleFontWeight","toString","supportColor","supportFontSize","supportLineHeight","supportFontFamily","supportFontWeightRaw","supportFontWeight","baseContainerStyle","sharedLayoutStyle","flexDirection","alignItems","innerContentBaseStyle","flex","verticalContentBaseStyle","titleTextStyle","color","fontSize","lineHeight","fontFamily","fontWeight","supportTextStyle","trailingWrapperStyle","marginLeft","defaultAccessibilityLabel","webPropsHorizontal","restProps","disabled","webPropsVertical","processedLeading","leadingElement","length","renderSupportContent","processedSupportSlot","numberOfLines","processedEndSlot","trailingContent","label","innerContent","minWidth","accessibilityRole","pressed","opacity","verticalContent"],"sourceRoot":"../../../../src","sources":["components/ListItem/ListItem.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useMemo","View","Text","Pressable","getVariableByName","IconCapsule","NavArrow","usePressableWebSupport","jsx","_jsx","jsxs","_jsxs","cloneChildrenWithModes","children","modes","forcedModes","result","Children","map","child","isValidElement","childChildren","props","hasChildren","undefined","existingModes","mergedModes","processedChildren","toArray","cloneElement","ListItem","layout","title","supportText","showSupportText","leading","supportSlot","endSlot","navArrow","onPress","style","contentStyle","accessibilityLabel","accessibilityHint","accessibilityState","webAccessibilityProps","rest","gap","paddingTop","paddingBottom","paddingLeft","paddingRight","titleColor","titleFontSize","titleLineHeight","titleFontFamily","titleFontWeightRaw","titleFontWeight","toString","supportColor","supportFontSize","supportLineHeight","supportFontFamily","supportFontWeightRaw","supportFontWeight","baseContainerStyle","sharedLayoutStyle","flexDirection","alignItems","innerContentBaseStyle","flex","verticalContentBaseStyle","titleTextStyle","color","fontSize","lineHeight","fontFamily","fontWeight","supportTextStyle","trailingWrapperStyle","marginLeft","defaultAccessibilityLabel","webPropsHorizontal","restProps","disabled","webPropsVertical","processedLeading","leadingElement","length","renderSupportContent","processedSupportSlot","numberOfLines","processedEndSlot","trailingContent","innerContent","minWidth","direction","accessibilityRole","pressed","opacity","verticalContent"],"sourceRoot":"../../../../src","sources":["components/ListItem/ListItem.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/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/lib/module/components/MerchantProfile/MerchantProfile.js

@@ -0,0 +1,128 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import Avatar from '../Avatar/Avatar';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * MerchantProfile component that displays a merchant's identity.
+ * 
+ * This component shows a centered profile layout with:
+ * - A circular avatar image
+ * - A title (merchant name)
+ * - A subtitle (typically UPI ID)
+ * 
+ * All styling values are resolved from Figma design tokens using the provided modes.
+ * 
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} [props.title="Uber India Systems Private Limited"] - The merchant's display name
+ * @param {string} [props.subtitle="UPI ID: uberindia@ybl"] - Subtitle text, typically the UPI ID
+ * @param {Object} [props.modes={}] - Mode configuration for design tokens
+ * @param {Object} [props.style] - Optional style overrides for the container
+ * @param {Object} [props.avatarProps] - Props to pass to the Avatar component
+ * @param {string} [props.accessibilityLabel] - Accessibility label for the region
+ * 
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <MerchantProfile
+ *   title="Uber India Systems Private Limited"
+ *   subtitle="UPI ID: uberindia@ybl"
+ *   modes={{}}
+ * />
+ * 
+ * // With custom avatar
+ * <MerchantProfile
+ *   title="Amazon Pay"
+ *   subtitle="UPI ID: amazonpay@apl"
+ *   avatarProps={{ imageSource: 'https://example.com/logo.png' }}
+ * />
+ * ```
+ */
+function MerchantProfile({
+  title = 'Uber India Systems Private Limited',
+  subtitle = 'UPI ID: uberindia@ybl',
+  modes = {},
+  style,
+  avatarProps,
+  accessibilityLabel
+}) {
+  // Resolve design tokens with fallback values matching Figma design
+  const gap = getVariableByName('merchantProfile/gap', modes) ?? 12;
+  const paddingHorizontal = getVariableByName('merchantProfile/padding/horizontal', modes) ?? 16;
+
+  // Title typography tokens
+  const titleColor = getVariableByName('merchantProfile/title/color', modes) ?? '#0c0d10';
+  const titleFontSize = getVariableByName('merchantProfile/title/fontSize', modes) ?? 16;
+  const titleLineHeight = getVariableByName('merchantProfile/title/lineHeight', modes) ?? 18;
+  const titleFontFamily = getVariableByName('merchantProfile/title/fontFamily', modes) ?? 'System';
+  const titleFontWeightRaw = getVariableByName('merchantProfile/title/fontWeight', modes) ?? 700;
+  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
+
+  // Subtitle typography tokens
+  const subtitleColor = getVariableByName('merchantProfile/subtitle/color', modes) ?? '#191b1e';
+  const subtitleFontSize = getVariableByName('merchantProfile/subtitle/fontSize', modes) ?? 12;
+  const subtitleLineHeight = getVariableByName('merchantProfile/subtitle/lineHeight', modes) ?? 16;
+  const subtitleFontFamily = getVariableByName('merchantProfile/subtitle/fontFamily', modes) ?? 'System';
+  const subtitleFontWeightRaw = getVariableByName('merchantProfile/subtitle/fontWeight', modes) ?? 500;
+  const subtitleFontWeight = typeof subtitleFontWeightRaw === 'number' ? subtitleFontWeightRaw.toString() : subtitleFontWeightRaw;
+
+  // Container style
+  const containerStyle = {
+    alignItems: 'center',
+    paddingHorizontal,
+    gap
+  };
+
+  // Title text style
+  const titleTextStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    lineHeight: titleLineHeight,
+    fontFamily: titleFontFamily,
+    fontWeight: titleFontWeight,
+    textAlign: 'center'
+  };
+
+  // Subtitle text style
+  const subtitleTextStyle = {
+    color: subtitleColor,
+    fontSize: subtitleFontSize,
+    lineHeight: subtitleLineHeight,
+    fontFamily: subtitleFontFamily,
+    fontWeight: subtitleFontWeight,
+    textAlign: 'center'
+  };
+
+  // Default accessibility label
+  const defaultAccessibilityLabel = accessibilityLabel || `Merchant profile for ${title}${subtitle ? `, ${subtitle}` : ''}`;
+
+  // Avatar modes - use provided modes to ensure consistent theming
+  // Override to use a larger avatar size for the merchant profile
+  const avatarModes = {
+    ...modes,
+    ...(avatarProps?.modes || {})
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    accessibilityRole: "header",
+    accessibilityLabel: defaultAccessibilityLabel,
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      style: "Image",
+      modes: avatarModes,
+      ...avatarProps
+    }), /*#__PURE__*/_jsx(Text, {
+      style: titleTextStyle,
+      accessibilityRole: "text",
+      children: title
+    }), /*#__PURE__*/_jsx(Text, {
+      style: subtitleTextStyle,
+      accessibilityRole: "text",
+      children: subtitle
+    })]
+  });
+}
+export default MerchantProfile;
+//# sourceMappingURL=MerchantProfile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","getVariableByName","Avatar","jsx","_jsx","jsxs","_jsxs","MerchantProfile","title","subtitle","modes","style","avatarProps","accessibilityLabel","gap","paddingHorizontal","titleColor","titleFontSize","titleLineHeight","titleFontFamily","titleFontWeightRaw","titleFontWeight","toString","subtitleColor","subtitleFontSize","subtitleLineHeight","subtitleFontFamily","subtitleFontWeightRaw","subtitleFontWeight","containerStyle","alignItems","titleTextStyle","color","fontSize","lineHeight","fontFamily","fontWeight","textAlign","subtitleTextStyle","defaultAccessibilityLabel","avatarModes","accessibilityRole","children"],"sourceRoot":"../../../../src","sources":["components/MerchantProfile/MerchantProfile.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/MerchantProfile/MerchantProfile.mdx

@@ -0,0 +1,139 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as MerchantProfileStories from './MerchantProfile.stories';
+import MerchantProfile from './MerchantProfile';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={MerchantProfileStories} />
+
+# MerchantProfile
+
+Displays a merchant's identity in a centered vertical layout with an avatar, title, and subtitle. Commonly used on payment confirmation screens, transaction receipts, and merchant identification flows.
+
+## Props
+
+<ArgsTable of={MerchantProfile} />
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+The default configuration shows the typical merchant profile layout:
+
+<Canvas>
+  <Story of={MerchantProfileStories.Default} />
+</Canvas>
+
+## Examples
+
+### Short Name
+
+For merchants with shorter names:
+
+<Canvas>
+  <Story of={MerchantProfileStories.ShortName} />
+</Canvas>
+
+### Long Name
+
+Handles longer merchant names gracefully with text wrapping:
+
+<Canvas>
+  <Story of={MerchantProfileStories.LongName} />
+</Canvas>
+
+### Without Subtitle
+
+When only the merchant name is needed:
+
+<Canvas>
+  <Story of={MerchantProfileStories.WithoutSubtitle} />
+</Canvas>
+
+### Multiple Profiles
+
+Multiple profiles displayed in a list:
+
+<Canvas>
+  <Story of={MerchantProfileStories.MultipleProfiles} />
+</Canvas>
+
+## Component Usage
+
+```tsx
+import { MerchantProfile } from 'jsf-components';
+
+function PaymentConfirmation() {
+  return (
+    <View style={{ flex: 1 }}>
+      <MerchantProfile
+        title="Uber India Systems Private Limited"
+        subtitle="UPI ID: uberindia@ybl"
+        modes={{}}
+      />
+      
+      {/* Payment amount and other details */}
+    </View>
+  );
+}
+```
+
+### Custom Avatar
+
+You can customize the avatar using the `avatarProps` prop:
+
+```tsx
+<MerchantProfile
+  title="Amazon Pay"
+  subtitle="UPI ID: amazonpay@apl"
+  avatarProps={{
+    imageSource: 'https://example.com/merchant-logo.png',
+    modes: { 'Avatar Size': 'XL' },
+  }}
+/>
+```
+
+<AccessibilitySection
+  items={[
+    'The component uses `accessibilityRole="header"` to identify it as a header region.',
+    'A default accessibility label is generated from the title and subtitle.',
+    'Provide a custom `accessibilityLabel` for more context if needed.',
+    'The Avatar child component handles its own accessibility attributes.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Avatar</strong> — circular merchant logo/image at the top.</li>
+    <li><strong>Title</strong> — bold merchant name centered below the avatar.</li>
+    <li><strong>Subtitle</strong> — lighter text, typically the UPI ID or additional info.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Keep titles concise; very long names will wrap but may affect layout balance.',
+    'Use consistent modes across the MerchantProfile and its siblings for visual harmony.',
+    'The component is designed for centered layouts; avoid placing in left-aligned contexts.',
+    'For interactive merchant profiles (e.g., tappable), wrap in a Pressable component.',
+  ]}
+/>
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`merchantProfile/gap`**
+- **`merchantProfile/padding/horizontal`**
+- **`merchantProfile/subtitle/color`**
+- **`merchantProfile/subtitle/fontFamily`**
+- **`merchantProfile/subtitle/fontSize`**
+- **`merchantProfile/subtitle/fontWeight`**
+- **`merchantProfile/subtitle/lineHeight`**
+- **`merchantProfile/title/color`**
+- **`merchantProfile/title/fontFamily`**
+- **`merchantProfile/title/fontSize`**
+- **`merchantProfile/title/fontWeight`**
+- **`merchantProfile/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/module/components/MoneyValue/MoneyValue.js

@@ -49,29 +49,56 @@ const CURRENCY_SYMBOLS = {
  * (e.g. "INR", "USD"). When an ISO code is provided, it will be mapped to the
  * appropriate symbol, with special care to support INR and other major currencies.
  *
+ * Negative values are auto-detected from the value prop (e.g., -500 or "-500").
+ * The `negative` prop can be used to explicitly override this behavior.
+ *
  * @component
  * @param {Object} props
- * @param {string|number} [props.value="500"] - Monetary value to display.
+ * @param {string|number} [props.value="500"] - Monetary value to display. Negative values are auto-detected.
  * @param {string} [props.currency="₹"] - Currency symbol or ISO code (e.g. "INR").
+ * @param {boolean} [props.negative] - Explicitly override negative display. If undefined, auto-detects from value.
  * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
  *                                   Example: {"MoneyValue / Theme": "Default"}
  * @param {Object} [props.style] - Optional container style overrides.
  * @param {Object} [props.valueStyle] - Optional value text style overrides.
  * @param {Object} [props.currencyStyle] - Optional currency text style overrides.
+ * @param {Object} [props.negativeSignStyle] - Optional negative sign text style overrides.
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, generates from value and currency
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  */
 function MoneyValue({
   value = '500',
   currency = '₹',
+  negative,
   modes = {},
   style,
   valueStyle,
   currencyStyle,
+  negativeSignStyle,
   accessibilityLabel,
   accessibilityHint,
   ...rest
 }) {
+  // Auto-detect negative from value and compute display value
+  const {
+    isNegative,
+    displayValue
+  } = React.useMemo(() => {
+    const stringValue = String(value);
+    const trimmed = stringValue.trim();
+    const valueIsNegative = trimmed.startsWith('-') || typeof value === 'number' && value < 0;
+
+    // Strip leading minus sign for display (we show it separately)
+    const absoluteValue = trimmed.startsWith('-') ? trimmed.slice(1) : trimmed;
+
+    // Use explicit negative prop if provided, otherwise use auto-detected
+    const showNegative = negative !== undefined ? negative : valueIsNegative;
+    return {
+      isNegative: showNegative,
+      displayValue: absoluteValue
+    };
+  }, [value, negative]);
+
   // Resolve typography and layout tokens from Figma
   const textColor = getVariableByName('moneyValue/text/color', modes) || '#0f0d0a';
   const fontSize = getVariableByName('moneyValue/supportText/fontSize', modes) || 14;
@@ -101,14 +128,19 @@ function MoneyValue({
   };
 
   // Generate default accessibility label from value and currency
-  const defaultAccessibilityLabel = accessibilityLabel || `${resolvedCurrency} ${value}`;
+  const defaultAccessibilityLabel = accessibilityLabel || `${isNegative ? 'negative ' : ''}${resolvedCurrency} ${displayValue}`;
   return /*#__PURE__*/_jsxs(View, {
     style: [containerStyle, style],
     accessibilityRole: "text",
     accessibilityLabel: defaultAccessibilityLabel,
     accessibilityHint: accessibilityHint,
     ...rest,
-    children: [/*#__PURE__*/_jsx(Text, {
+    children: [isNegative && /*#__PURE__*/_jsx(Text, {
+      style: [baseTextStyle, negativeSignStyle],
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      children: "-"
+    }), /*#__PURE__*/_jsx(Text, {
       style: [baseTextStyle, currencyStyle],
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
@@ -117,7 +149,7 @@ function MoneyValue({
       style: [baseTextStyle, valueStyle],
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
-      children: value
+      children: displayValue
     })]
   });
 }

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

@@ -1 +1 @@
-{"version":3,"names":["React","View","Text","getVariableByName","jsx","_jsx","jsxs","_jsxs","CURRENCY_SYMBOLS","INR","USD","EUR","GBP","JPY","CNY","AUD","CAD","CHF","HKD","SGD","NZD","SEK","NOK","DKK","RUB","BRL","ZAR","AED","SAR","TRY","KRW","IDR","THB","MYR","PHP","VND","PKR","BDT","LKR","NPR","MoneyValue","value","currency","modes","style","valueStyle","currencyStyle","accessibilityLabel","accessibilityHint","rest","textColor","fontSize","lineHeight","fontWeightValue","fontWeight","toString","fontFamily","gap","resolvedCurrency","useMemo","upper","toUpperCase","baseTextStyle","color","containerStyle","flexDirection","alignItems","defaultAccessibilityLabel","accessibilityRole","children","accessibilityElementsHidden","importantForAccessibility"],"sourceRoot":"../../../../src","sources":["components/MoneyValue/MoneyValue.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","View","Text","getVariableByName","jsx","_jsx","jsxs","_jsxs","CURRENCY_SYMBOLS","INR","USD","EUR","GBP","JPY","CNY","AUD","CAD","CHF","HKD","SGD","NZD","SEK","NOK","DKK","RUB","BRL","ZAR","AED","SAR","TRY","KRW","IDR","THB","MYR","PHP","VND","PKR","BDT","LKR","NPR","MoneyValue","value","currency","negative","modes","style","valueStyle","currencyStyle","negativeSignStyle","accessibilityLabel","accessibilityHint","rest","isNegative","displayValue","useMemo","stringValue","String","trimmed","trim","valueIsNegative","startsWith","absoluteValue","slice","showNegative","undefined","textColor","fontSize","lineHeight","fontWeightValue","fontWeight","toString","fontFamily","gap","resolvedCurrency","upper","toUpperCase","baseTextStyle","color","containerStyle","flexDirection","alignItems","defaultAccessibilityLabel","accessibilityRole","children","accessibilityElementsHidden","importantForAccessibility"],"sourceRoot":"../../../../src","sources":["components/MoneyValue/MoneyValue.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/MoneyValue/MoneyValue.mdx

@@ -16,6 +16,10 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Context3
+- **Modes:** Default | Transaction Bubble
+- **Default:** Default
 ## Usage
 
 <Canvas>