jfs-components 0.0.3 → 0.0.5

package/lib/commonjs/components/CtaCard/CtaCard.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * CtaCard component that maps directly to the Figma design using design tokens.
+ *
+ * @component
+ */
+function CtaCard({
+  title = "Lets create your UPI ID",
+  body = "Send and receive money securely.",
+  iconName = "ic_upi_number",
+  buttonLabel = "Get started",
+  onPressButton,
+  modes = {},
+  iconSlot,
+  titleSlot,
+  bodySlot,
+  buttonSlot,
+  style
+}) {
+  // --- Token Resolution ---
+  // Container
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/background', modes) || '#0078ad';
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/radius', modes) || 16;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/padding/horizontal', modes) || 20;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/padding/vertical', modes) || 23;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/gap', modes) || 16;
+
+  // Content Wrap
+  const contentGap = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/content/gap', modes) || 8;
+
+  // Title Text
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/title/color', modes) || '#ffffff';
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/title/fontFamily', modes) || 'JioType Var';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/title/fontSize', modes) || 23;
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/title/lineHeight', modes) || 23;
+
+  // Body Text
+  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/body/color', modes) || '#ffffff';
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/body/fontFamily', modes) || 'JioType Var';
+  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/body/fontSize', modes) || 14;
+  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/body/lineHeight', modes) || 17;
+
+  // --- Styles ---
+  const containerStyle = {
+    backgroundColor,
+    borderRadius: radius,
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+    alignItems: 'flex-start',
+    width: '100%',
+    // Adjust based on layout needs, usually cards take full width available
+    overflow: 'hidden'
+  };
+  const contentWrapStyle = {
+    gap: contentGap,
+    alignItems: 'flex-start',
+    width: '100%'
+  };
+  const titleStyle = {
+    color: titleColor,
+    fontFamily: titleFontFamily,
+    fontSize: titleFontSize,
+    lineHeight: titleLineHeight,
+    fontWeight: '900' // "Black" in Figma often maps to 900
+  };
+  const bodyStyle = {
+    color: bodyColor,
+    fontFamily: bodyFontFamily,
+    fontSize: bodyFontSize,
+    lineHeight: bodyLineHeight,
+    fontWeight: '400' // Regular
+  };
+
+  // --- Slot Helper ---
+  // Helper to clone element with modes if no modes are already present on it (standard in this library)
+  const renderSlot = slot => {
+    if (/*#__PURE__*/_react.default.isValidElement(slot)) {
+      return /*#__PURE__*/_react.default.cloneElement(slot, {
+        modes: {
+          ...modes,
+          ...slot.props.modes
+        }
+      });
+    }
+    return slot;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: contentWrapStyle,
+      children: [iconSlot ? renderSlot(iconSlot) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
+        iconName: iconName,
+        modes: modes
+      }), titleSlot ? renderSlot(titleSlot) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: titleStyle,
+        children: title
+      }), bodySlot ? renderSlot(bodySlot) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: bodyStyle,
+        children: body
+      })]
+    }), buttonSlot ? renderSlot(buttonSlot) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      label: buttonLabel,
+      onPress: onPressButton,
+      modes: modes
+    })]
+  });
+}
+var _default = exports.default = CtaCard;
+//# sourceMappingURL=CtaCard.js.map

package/lib/commonjs/components/CtaCard/CtaCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_IconCapsule","_Button","_jsxRuntime","e","__esModule","default","CtaCard","title","body","iconName","buttonLabel","onPressButton","modes","iconSlot","titleSlot","bodySlot","buttonSlot","style","backgroundColor","getVariableByName","radius","paddingHorizontal","paddingVertical","gap","contentGap","titleColor","titleFontFamily","titleFontSize","titleLineHeight","bodyColor","bodyFontFamily","bodyFontSize","bodyLineHeight","containerStyle","borderRadius","alignItems","width","overflow","contentWrapStyle","titleStyle","color","fontFamily","fontSize","lineHeight","fontWeight","bodyStyle","renderSlot","slot","React","isValidElement","cloneElement","props","jsxs","View","children","jsx","Text","label","onPress","_default","exports"],"sourceRoot":"../../../../src","sources":["components/CtaCard/CtaCard.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/CtaCard/CtaCard.mdx

@@ -0,0 +1,65 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as CtaCardStories from './CtaCard.stories';
+import CtaCard from './CtaCard';
+
+<Meta of={CtaCardStories} />
+
+# CtaCard
+
+`CtaCard` is a component used to display a Call-to-Action with an icon, title, body text, and a button.
+It is designed to be flexible, allowing content to be passed via props or fully customized via slots.
+
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+```tsx
+import { CtaCard } from 'jfs-components'; // Adjust import based on your package structure
+
+// Basic Usage
+<CtaCard
+  title="Lets create your UPI ID"
+  body="Send and receive money securely."
+  iconName="ic_upi_number"
+  buttonLabel="Get started"
+  onPressButton={() => console.log('Pressed')}
+/>
+
+// Using Slots
+<CtaCard
+  titleSlot={<CustomTitle />}
+  buttonSlot={<CustomButton />}
+/>
+```
+
+<Canvas>
+  <Story of={CtaCardStories.Default} />
+</Canvas>
+
+## Props
+
+<ArgsTable of={CtaCard} />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`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`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/commonjs/components/CtaCard/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _CtaCard.default;
+  }
+});
+var _CtaCard = _interopRequireDefault(require("./CtaCard"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/CtaCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_CtaCard","_interopRequireDefault","require","e","__esModule","default"],"sourceRoot":"../../../../src","sources":["components/CtaCard/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAoC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}

package/lib/commonjs/components/Introduction.mdx

@@ -95,7 +95,6 @@ When creating new components:
 
 - [Storybook Documentation](https://storybook.js.org/)
 - [React Native Storybook](https://github.com/storybookjs/react-native)
-- [Styled Components](https://styled-components.com/)
 
 ---
 

package/lib/commonjs/components/ThreadHero/ThreadHero.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ThreadHero;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * ThreadHero component displaying a central identity with avatar, title, subtitle, and caption.
+ */
+function ThreadHero({
+  title = 'Subhash Rajan',
+  subtitle = 'Banking name: SHIVASHANKAR RAJAN',
+  caption,
+  renderAvatar,
+  modes = {},
+  style
+}) {
+  // Container Gaps
+  const containerGap = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/gap', modes)) || 8;
+  const detailsGap = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/details/gap', modes)) || 2;
+
+  // Title Styles
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('threadHero/title/color', modes) || '#191b1e';
+  const titleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/title/fontSize', modes)) || 16;
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('threadHero/title/fontFamily', modes) || 'System';
+  const titleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/title/lineHeight', modes)) || 20;
+  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('threadHero/title/fontWeight', modes) || '600';
+
+  // Subtitle Styles
+  const subtitleColor = (0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/color', modes) || '#5d5d61';
+  const subtitleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/fontSize', modes)) || 12;
+  const subtitleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/fontFamily', modes) || 'System';
+  const subtitleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/lineHeight', modes)) || 18;
+  const subtitleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/fontWeight', modes) || '500';
+
+  // Caption Styles
+  const captionColor = (0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/color', modes) || '#5d5d61';
+  const captionFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/fontSize', modes)) || 12;
+  const captionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/fontFamily', modes) || 'System';
+  const captionLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/lineHeight', modes)) || 18;
+  const captionFontWeight = (0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/fontWeight', modes) || '500';
+
+  // Styles
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: containerGap,
+    ...style
+  };
+  const detailsStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: detailsGap,
+    width: '100%'
+  };
+  const titleStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    fontFamily: titleFontFamily,
+    lineHeight: titleLineHeight,
+    fontWeight: titleFontWeight,
+    textAlign: 'center',
+    minWidth: '100%'
+  };
+  const subtitleStyle = {
+    color: subtitleColor,
+    fontSize: subtitleFontSize,
+    fontFamily: subtitleFontFamily,
+    lineHeight: subtitleLineHeight,
+    fontWeight: subtitleFontWeight,
+    textAlign: 'center',
+    minWidth: '100%'
+  };
+  const captionStyle = {
+    color: captionColor,
+    fontSize: captionFontSize,
+    fontFamily: captionFontFamily,
+    lineHeight: captionLineHeight,
+    fontWeight: captionFontWeight,
+    textAlign: 'center',
+    width: '100%'
+  };
+
+  // Process Avatar Slot to inject modes
+  const avatarContent = /*#__PURE__*/(0, _react.isValidElement)(renderAvatar) ? /*#__PURE__*/(0, _react.cloneElement)(renderAvatar, {
+    modes
+  }) : renderAvatar;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: containerStyle,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: detailsStyle,
+      children: [avatarContent, title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: titleStyle,
+        children: title
+      }) : null, subtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: subtitleStyle,
+        numberOfLines: 1,
+        ellipsizeMode: "tail",
+        children: subtitle
+      }) : null]
+    }), caption ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: captionStyle,
+      numberOfLines: 1,
+      ellipsizeMode: "tail",
+      children: caption
+    }) : null]
+  });
+}
+//# sourceMappingURL=ThreadHero.js.map

package/lib/commonjs/components/ThreadHero/ThreadHero.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_figmaVariablesResolver","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ThreadHero","title","subtitle","caption","renderAvatar","modes","style","containerGap","Number","getVariableByName","detailsGap","titleColor","titleFontSize","titleFontFamily","titleLineHeight","titleFontWeight","subtitleColor","subtitleFontSize","subtitleFontFamily","subtitleLineHeight","subtitleFontWeight","captionColor","captionFontSize","captionFontFamily","captionLineHeight","captionFontWeight","containerStyle","flexDirection","alignItems","gap","detailsStyle","width","titleStyle","color","fontSize","fontFamily","lineHeight","fontWeight","textAlign","minWidth","subtitleStyle","captionStyle","avatarContent","isValidElement","cloneElement","jsxs","View","children","jsx","Text","numberOfLines","ellipsizeMode"],"sourceRoot":"../../../../src","sources":["components/ThreadHero/ThreadHero.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/ThreadHero/ThreadHero.mdx

@@ -0,0 +1,69 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as ThreadHeroStories from './ThreadHero.stories';
+import ThreadHero from './ThreadHero';
+
+<Meta of={ThreadHeroStories} />
+
+# ThreadHero
+
+The `ThreadHero` component displays a central user identity with an avatar, title, subtitle, and an optional caption.
+
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+```tsx
+import ThreadHero from './ThreadHero';
+import Avatar from '../Avatar/Avatar';
+
+<ThreadHero
+  title="Subhash Rajan"
+  subtitle="Banking name: SHIVASHANKAR RAJAN"
+  caption="+91 00000 00000"
+  renderAvatar={<Avatar size="small" initials="SR" />}
+/>
+```
+
+## Props
+
+<ArgsTable of={ThreadHero} />
+
+## Stories
+
+### Default
+
+<Canvas>
+  <Story of={ThreadHeroStories.Default} />
+</Canvas>
+
+### Without Caption
+
+<Canvas>
+  <Story of={ThreadHeroStories.WithoutCaption} />
+</Canvas>
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`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`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/commonjs/components/TransactionBubble/TransactionBubble.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TransactionBubble;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _MoneyValue = _interopRequireDefault(require("../MoneyValue/MoneyValue"));
+var _NavArrow = _interopRequireDefault(require("../NavArrow/NavArrow"));
+var _TransactionStatus = _interopRequireDefault(require("../TransactionStatus/TransactionStatus"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * TransactionBubble component displaying transaction details in a bubble card.
+ *
+ * @component
+ */
+function TransactionBubble({
+  description = 'Payment to Uber India',
+  amount = '56',
+  currency = '₹',
+  status = 'Expired',
+  statusDate = '20 Mar 2025',
+  modes = {},
+  style
+}) {
+  // --- Container Tokens ---
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/background', modes) || '#ffffff';
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/border/color', modes) || '#e5e5e5';
+  const borderWidth = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/border/size', modes)) || 1;
+  const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/radius', modes)) || 23;
+  const padding = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/padding', modes)) || 16;
+  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/gap', modes)) || 8;
+
+  // --- Description Tokens ---
+  const descColor = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/color', modes) || '#24262b';
+  const descFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/fontSize', modes)) || 14;
+  const descLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/lineHeight', modes)) || 17;
+  const descFontFamily = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/fontFamily', modes) || 'System';
+
+  // --- Status Row Tokens ---
+  // Status wrapping gap from TransactionBubble definition for the row container
+  const statusHeight = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/statusWrap/height', modes)) || 18;
+  const containerStyle = {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    padding,
+    gap,
+    alignItems: 'flex-start',
+    width: 231,
+    // Fixed width from design or prop? Design shows w-[231px]. We can make it auto or fixed. Let's respect style prop.
+    ...style
+  };
+  const descriptionStyle = {
+    color: descColor,
+    fontSize: descFontSize,
+    lineHeight: descLineHeight,
+    fontFamily: descFontFamily,
+    fontWeight: '500' // Hardcoded in design as 'Medium' -> 500
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: containerStyle,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        gap: 8,
+        width: '100%'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: descriptionStyle,
+        numberOfLines: 1,
+        ellipsizeMode: "tail",
+        children: description
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoneyValue.default, {
+        value: amount,
+        currency: currency,
+        modes: modes
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%',
+        height: statusHeight // Enforce height from design
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TransactionStatus.default, {
+        status: status,
+        date: statusDate,
+        modes: modes
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavArrow.default, {
+        direction: "Forward",
+        modes: modes
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=TransactionBubble.js.map

package/lib/commonjs/components/TransactionBubble/TransactionBubble.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_MoneyValue","_NavArrow","_TransactionStatus","_jsxRuntime","e","__esModule","default","TransactionBubble","description","amount","currency","status","statusDate","modes","style","backgroundColor","getVariableByName","borderColor","borderWidth","Number","borderRadius","padding","gap","descColor","descFontSize","descLineHeight","descFontFamily","statusHeight","containerStyle","alignItems","width","descriptionStyle","color","fontSize","lineHeight","fontFamily","fontWeight","jsxs","View","children","jsx","Text","numberOfLines","ellipsizeMode","value","flexDirection","justifyContent","height","date","direction"],"sourceRoot":"../../../../src","sources":["components/TransactionBubble/TransactionBubble.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/TransactionBubble/TransactionBubble.mdx

@@ -0,0 +1,40 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as TransactionBubbleStories from './TransactionBubble.stories';
+import TransactionBubble from './TransactionBubble';
+
+<Meta of={TransactionBubbleStories} />
+
+# TransactionBubble
+
+TransactionBubble component with design-token-driven styling.
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+<Canvas>
+  <Story of={TransactionBubbleStories.Default} />
+</Canvas>
+
+## Props
+
+<ArgsTable of={TransactionBubble} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`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`**
+
+All tokens support mode-based theming through the `modes` prop.