jfs-components 0.0.2 → 0.0.4

package/lib/module/components/TransactionDetails/TransactionDetails.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","getVariableByName","jsx","_jsx","jsxs","_jsxs","cloneChildrenWithModes","children","modes","result","Children","map","child","isValidElement","childChildren","props","hasChildren","undefined","existingModes","mergedModes","processedChildren","toArray","cloneElement","Item","label","value","style","labelStyle","valueStyle","accessibilityLabel","rest","gap","labelColor","labelFontSize","labelFontFamily","labelLineHeight","labelFontWeightRaw","labelFontWeight","toString","valueColor","valueFontSize","valueFontFamily","valueLineHeight","valueFontWeightRaw","valueFontWeight","containerStyle","flexDirection","alignItems","justifyContent","labelTextStyle","color","fontSize","fontFamily","lineHeight","fontWeight","valueTextStyle","defaultAccessibilityLabel","accessibilityRole","accessibilityElementsHidden","importantForAccessibility","TransactionDetails","paddingHorizontal","paddingVertical"],"sourceRoot":"../../../../src","sources":["components/TransactionDetails/TransactionDetails.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/TransactionDetails/TransactionDetails.mdx

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

package/lib/module/components/TransactionStatus/TransactionStatus.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","Svg","Path","getVariableByName","jsx","_jsx","jsxs","_jsxs","StatusIcon","modes","width","height","color","resolvedColor","viewBox","fill","children","d","fillRule","TransactionStatus","status","date","style","gap","Number","textColor","fontSize","lineHeight","fontFamily","fontWeight","iconColor","iconSize","containerStyle","flexDirection","alignItems","textStyle","numberOfLines"],"sourceRoot":"../../../../src","sources":["components/TransactionStatus/TransactionStatus.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAwC,cAAc;AACzE,SAASC,GAAG,EAAEC,IAAI,QAAQ,kBAAkB;AAC5C,SAASC,iBAAiB,QAAQ,8CAA8C;;AAEhF;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAQA,MAAMC,UAAU,GAAGA,CAAC;EAChBC,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK,GAAG,EAAE;EACVC,MAAM,GAAG,EAAE;EACXC;AACa,CAAC,KAAK;EACnB,MAAMC,aAAa,GAAGD,KAAK,IAAIT,iBAAiB,CAAC,8BAA8B,EAAEM,KAAK,CAAC,IAAI,SAAS;EAEpG,oBACIJ,IAAA,CAACJ,GAAG;IACAS,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfG,OAAO,EAAC,WAAW;IACnBC,IAAI,EAAC,MAAM;IAAAC,QAAA,eAEXX,IAAA,CAACH,IAAI;MACDe,CAAC,EAAC,s2CAAs2C;MACx2CF,IAAI,EAAEF,aAAc;MACpBK,QAAQ,EAAC,SAAS,CAAC;IAAA,CACtB;EAAC,CACD,CAAC;AAEd,CAAC;;AAED;;AAaA;AACA;AACA;AACA,eAAe,SAASC,iBAAiBA,CAAC;EACtCC,MAAM,GAAG,SAAS;EAClBC,IAAI,GAAG,aAAa;EACpBZ,KAAK,GAAG,CAAC,CAAC;EACVa;AACoB,CAAC,EAAE;EACvB,MAAMC,GAAG,GAAGC,MAAM,CAACrB,iBAAiB,CAAC,kCAAkC,EAAEM,KAAK,CAAC,CAAC,IAAI,CAAC;EACrF;EACA,MAAMgB,SAAS,GAAGtB,iBAAiB,CAAC,yBAAyB,EAAEM,KAAK,CAAC,IAAI,SAAS;EAClF,MAAMiB,QAAQ,GAAGF,MAAM,CAACrB,iBAAiB,CAAC,4BAA4B,EAAEM,KAAK,CAAC,CAAC,IAAI,EAAE;EACrF,MAAMkB,UAAU,GAAGH,MAAM,CAACrB,iBAAiB,CAAC,8BAA8B,EAAEM,KAAK,CAAC,CAAC,IAAI,EAAE;EACzF,MAAMmB,UAAU,GAAGzB,iBAAiB,CAAC,8BAA8B,EAAEM,KAAK,CAAC,IAAI,QAAQ;EACvF,MAAMoB,UAAU,GAAG1B,iBAAiB,CAAC,+BAA+B,EAAEM,KAAK,CAAC,IAAI,KAAK;EAErF,MAAMqB,SAAS,GAAG3B,iBAAiB,CAAC,8BAA8B,EAAEM,KAAK,CAAC,IAAI,SAAS;EACvF,MAAMsB,QAAQ,GAAGP,MAAM,CAACrB,iBAAiB,CAAC,4BAA4B,EAAEM,KAAK,CAAC,CAAC,IAAI,EAAE;EAErF,MAAMuB,cAAyB,GAAG;IAC9BC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBX,GAAG;IACH,GAAGD;EACP,CAAC;EAED,MAAMa,SAAoB,GAAG;IACzBvB,KAAK,EAAEa,SAAS;IAChBC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACVC,UAAU,EAAEA;EAChB,CAAC;EAED,oBACItB,KAAA,CAACR,IAAI;IAACuB,KAAK,EAAEU,cAAe;IAAAhB,QAAA,gBACxBX,IAAA,CAACG,UAAU;MAACE,KAAK,EAAEqB,QAAS;MAACpB,MAAM,EAAEoB,QAAS;MAACnB,KAAK,EAAEkB,SAAU;MAACrB,KAAK,EAAEA;IAAM,CAAE,CAAC,eACjFF,KAAA,CAACP,IAAI;MAACsB,KAAK,EAAEa,SAAU;MAACC,aAAa,EAAE,CAAE;MAAApB,QAAA,GACpCI,MAAM,EAAC,QAAG,EAACC,IAAI;IAAA,CACd,CAAC;EAAA,CACL,CAAC;AAEf","ignoreList":[]}

package/lib/module/components/TransactionStatus/TransactionStatus.mdx

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

package/lib/module/components/index.js

@@ -13,6 +13,7 @@ export { default as CardFeedback } from './CardFeedback/CardFeedback';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider } from './Divider/Divider';
 export { default as Drawer } from './Drawer/Drawer';
+export { default as CtaCard } from './CtaCard/CtaCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
 export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
@@ -29,6 +30,10 @@ export { default as Stepper } from './Stepper/Stepper';
 export { Step } from './Stepper/Step';
 export { StepLabel } from './Stepper/StepLabel';
 export { default as TextInput } from './TextInput/TextInput';
+export { default as ThreadHero } from './ThreadHero/ThreadHero';
 export { Tooltip } from './Tooltip/Tooltip';
+export { default as TransactionBubble } from './TransactionBubble/TransactionBubble';
+export { default as TransactionDetails } from './TransactionDetails/TransactionDetails';
+export { default as TransactionStatus } from './TransactionStatus/TransactionStatus';
 export { default as UpiHandle } from './UpiHandle/UpiHandle';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["default","ActionFooter","AppBar","Avatar","AvatarGroup","Badge","BottomNav","BottomNavItem","Button","Card","CardFeedback","Disclaimer","Divider","Drawer","FilterBar","IconButton","IconCapsule","LazyList","ListGroup","ListItem","MediaCard","MerchantProfile","MoneyValue","NavArrow","PageTitle","Section","Stepper","Step","StepLabel","TextInput","Tooltip","UpiHandle"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,YAAY,QAAgC,6BAA6B;AAC7F,SAASD,OAAO,IAAIE,MAAM,QAAQ,iBAAiB;AACnD,SAASF,OAAO,IAAIG,MAAM,QAA0B,iBAAiB;AACrE,SAASH,OAAO,IAAII,WAAW,QAAQ,2BAA2B;AAClE,SAASJ,OAAO,IAAIK,KAAK,QAAQ,eAAe;AAChD,SAASL,OAAO,IAAIM,SAAS,QAAQ,uBAAuB;AAC5D,SAASN,OAAO,IAAIO,aAAa,QAAQ,+BAA+B;AACxE,SAASP,OAAO,IAAIQ,MAAM,QAA0B,iBAAiB;AACrE,SAASR,OAAO,IAAIS,IAAI,QAAQ,aAAa;AAC7C,SAAST,OAAO,IAAIU,YAAY,QAAQ,6BAA6B;AACrE,SAASV,OAAO,IAAIW,UAAU,QAAQ,yBAAyB;AAC/D,SAASX,OAAO,IAAIY,OAAO,QAAkD,mBAAmB;AAChG,SAASZ,OAAO,IAAIa,MAAM,QAAQ,iBAAiB;AACnD,SAASb,OAAO,IAAIc,SAAS,QAAQ,uBAAuB;AAC5D,SAASd,OAAO,IAAIe,UAAU,QAAQ,yBAAyB;AAC/D,SAASf,OAAO,IAAIgB,WAAW,QAAQ,2BAA2B;AAClE,SAAShB,OAAO,IAAIiB,QAAQ,QAAQ,qBAAqB;AACzD,SAASjB,OAAO,IAAIkB,SAAS,QAAQ,uBAAuB;AAC5D,SAASlB,OAAO,IAAImB,QAAQ,QAAQ,qBAAqB;AACzD,SAASnB,OAAO,IAAIoB,SAAS,QAAQ,uBAAuB;AAC5D,SAASpB,OAAO,IAAIqB,eAAe,QAAmC,mCAAmC;AACzG,SAASrB,OAAO,IAAIsB,UAAU,QAAQ,yBAAyB;AAC/D,SAAStB,OAAO,IAAIuB,QAAQ,QAAQ,qBAAqB;AACzD,SAASvB,OAAO,IAAIwB,SAAS,QAAQ,uBAAuB;AAC5D,SAASxB,OAAO,IAAIyB,OAAO,QAAQ,mBAAmB;AACtD,SAASzB,OAAO,IAAI0B,OAAO,QAAQ,mBAAmB;AACtD,SAASC,IAAI,QAAQ,gBAAgB;AACrC,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,SAAS5B,OAAO,IAAI6B,SAAS,QAAQ,uBAAuB;AAC5D,SAASC,OAAO,QAAQ,mBAAmB;AAC3C,SAAS9B,OAAO,IAAI+B,SAAS,QAAQ,uBAAuB","ignoreList":[]}
+{"version":3,"names":["default","ActionFooter","AppBar","Avatar","AvatarGroup","Badge","BottomNav","BottomNavItem","Button","Card","CardFeedback","Disclaimer","Divider","Drawer","CtaCard","FilterBar","IconButton","IconCapsule","LazyList","ListGroup","ListItem","MediaCard","MerchantProfile","MoneyValue","NavArrow","PageTitle","Section","Stepper","Step","StepLabel","TextInput","ThreadHero","Tooltip","TransactionBubble","TransactionDetails","TransactionStatus","UpiHandle"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,YAAY,QAAgC,6BAA6B;AAC7F,SAASD,OAAO,IAAIE,MAAM,QAAQ,iBAAiB;AACnD,SAASF,OAAO,IAAIG,MAAM,QAA0B,iBAAiB;AACrE,SAASH,OAAO,IAAII,WAAW,QAAQ,2BAA2B;AAClE,SAASJ,OAAO,IAAIK,KAAK,QAAQ,eAAe;AAChD,SAASL,OAAO,IAAIM,SAAS,QAAQ,uBAAuB;AAC5D,SAASN,OAAO,IAAIO,aAAa,QAAQ,+BAA+B;AACxE,SAASP,OAAO,IAAIQ,MAAM,QAA0B,iBAAiB;AACrE,SAASR,OAAO,IAAIS,IAAI,QAAQ,aAAa;AAC7C,SAAST,OAAO,IAAIU,YAAY,QAAQ,6BAA6B;AACrE,SAASV,OAAO,IAAIW,UAAU,QAAQ,yBAAyB;AAC/D,SAASX,OAAO,IAAIY,OAAO,QAAkD,mBAAmB;AAChG,SAASZ,OAAO,IAAIa,MAAM,QAAQ,iBAAiB;AACnD,SAASb,OAAO,IAAIc,OAAO,QAAQ,mBAAmB;AACtD,SAASd,OAAO,IAAIe,SAAS,QAAQ,uBAAuB;AAC5D,SAASf,OAAO,IAAIgB,UAAU,QAAQ,yBAAyB;AAC/D,SAAShB,OAAO,IAAIiB,WAAW,QAAQ,2BAA2B;AAClE,SAASjB,OAAO,IAAIkB,QAAQ,QAAQ,qBAAqB;AACzD,SAASlB,OAAO,IAAImB,SAAS,QAAQ,uBAAuB;AAC5D,SAASnB,OAAO,IAAIoB,QAAQ,QAAQ,qBAAqB;AACzD,SAASpB,OAAO,IAAIqB,SAAS,QAAQ,uBAAuB;AAC5D,SAASrB,OAAO,IAAIsB,eAAe,QAAmC,mCAAmC;AACzG,SAAStB,OAAO,IAAIuB,UAAU,QAAQ,yBAAyB;AAC/D,SAASvB,OAAO,IAAIwB,QAAQ,QAAQ,qBAAqB;AACzD,SAASxB,OAAO,IAAIyB,SAAS,QAAQ,uBAAuB;AAC5D,SAASzB,OAAO,IAAI0B,OAAO,QAAQ,mBAAmB;AACtD,SAAS1B,OAAO,IAAI2B,OAAO,QAAQ,mBAAmB;AACtD,SAASC,IAAI,QAAQ,gBAAgB;AACrC,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,SAAS7B,OAAO,IAAI8B,SAAS,QAAQ,uBAAuB;AAC5D,SAAS9B,OAAO,IAAI+B,UAAU,QAA8B,yBAAyB;AACrF,SAASC,OAAO,QAAQ,mBAAmB;AAC3C,SAAShC,OAAO,IAAIiC,iBAAiB,QAAQ,uCAAuC;AACpF,SAASjC,OAAO,IAAIkC,kBAAkB,QAAQ,yCAAyC;AACvF,SAASlC,OAAO,IAAImC,iBAAiB,QAAQ,uCAAuC;AACpF,SAASnC,OAAO,IAAIoC,SAAS,QAAQ,uBAAuB","ignoreList":[]}