@campxdev/react-native-blueprint 0.1.23 → 0.1.24

package/lib/module/components/DataDisplay/ChatBubble/ChatBubble.js

@@ -0,0 +1,318 @@
+"use strict";
+
+// @ts-nocheck
+import React from 'react';
+import { View, Text as RNText, Image as RNImage, Pressable } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { Avatar } from "../Avatar/Avatar.js";
+import { Badge } from "../Badge/Badge.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+cssInterop(View, {
+  className: 'style'
+});
+cssInterop(RNText, {
+  className: 'style'
+});
+cssInterop(RNImage, {
+  className: 'style'
+});
+cssInterop(Pressable, {
+  className: 'style'
+});
+const View_ = View;
+const Text = RNText;
+const Image = RNImage;
+
+/* ============================================================================
+ * Types
+ * ============================================================================ */
+
+/* ============================================================================
+ * Component
+ * ============================================================================ */
+
+/**
+ * ChatBubble Component
+ *
+ * A comprehensive chat message bubble component for chat interfaces.
+ * Supports incoming/outgoing messages with default and AI variants.
+ *
+ * @example
+ * ```tsx
+ * <ChatBubble
+ *   type="incoming"
+ *   variant="default"
+ *   message="Hello!"
+ *   userName="John"
+ *   timestamp="09:10 PM"
+ * />
+ * ```
+ */
+export function ChatBubble({
+  type = 'incoming',
+  variant = 'default',
+  message = 'This is the Message bubble content. This will have truncated content and we can fix the width as 300px.',
+  userName = 'User Name',
+  _userAvatar,
+  timestamp = '09:10 PM',
+  showUser = true,
+  showMessage = true,
+  showEditedIndication = true,
+  showQuotedReply = true,
+  quotedMessage = {
+    author: 'John Doe',
+    text: 'This is a quoted reply section'
+  },
+  showMessageAttachment = true,
+  attachment,
+  showReactions = true,
+  reactions = ['👍', '❤️'],
+  showActions = true,
+  onCopy,
+  onLike,
+  onDislike,
+  onRegenerate,
+  style,
+  testID
+}) {
+  const isIncoming = type === 'incoming';
+  const isOutgoing = type === 'outgoing';
+  const isAi = variant === 'ai';
+  const isDefault = variant === 'default';
+  if (isIncoming && isDefault) {
+    return /*#__PURE__*/_jsxs(View_, {
+      testID: testID ?? 'chat-bubble',
+      style: style,
+      className: "flex-row gap-2 px-5 py-2 items-end",
+      children: [showUser && /*#__PURE__*/_jsx(Avatar, {
+        size: "sm",
+        type: "initials",
+        initials: userName?.slice(0, 2).toUpperCase() ?? 'AK',
+        showRing: true
+      }), /*#__PURE__*/_jsxs(View_, {
+        className: "flex-1 gap-1",
+        children: [/*#__PURE__*/_jsxs(View_, {
+          className: "flex-row items-center justify-between px-4",
+          children: [/*#__PURE__*/_jsx(Text, {
+            className: "text-xs font-medium text-text-secondary",
+            children: userName
+          }), /*#__PURE__*/_jsxs(View_, {
+            className: "flex-row items-center gap-1",
+            children: [showEditedIndication && /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                className: "text-xs font-medium text-text-secondary",
+                children: "Edited"
+              }), /*#__PURE__*/_jsx(View_, {
+                className: "w-0.5 h-0.5 rounded-full bg-text-secondary"
+              })]
+            }), /*#__PURE__*/_jsx(Text, {
+              className: "text-xs font-medium text-text-secondary",
+              children: timestamp
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(View_, {
+          className: "rounded-3xl rounded-bl-none bg-white px-4 py-3 gap-3",
+          children: [showQuotedReply && quotedMessage && /*#__PURE__*/_jsxs(View_, {
+            className: "bg-white rounded-xl border-l-4 border-l-highlight-purple px-3 py-2 gap-0.5",
+            children: [/*#__PURE__*/_jsx(Text, {
+              className: "text-xs font-semibold text-text-primary",
+              children: quotedMessage.author
+            }), /*#__PURE__*/_jsx(Text, {
+              className: "text-xs font-medium text-text-secondary",
+              children: quotedMessage.text
+            })]
+          }), showMessage && /*#__PURE__*/_jsx(Text, {
+            className: "text-sm font-medium text-text-primary leading-5",
+            children: message
+          }), showMessageAttachment && attachment?.type === 'image' && attachment.uri && /*#__PURE__*/_jsx(Image, {
+            source: {
+              uri: attachment.uri
+            },
+            style: {
+              width: '100%',
+              height: 160,
+              borderRadius: 16
+            },
+            resizeMode: "cover"
+          })]
+        }), showReactions && reactions && reactions.length > 0 && /*#__PURE__*/_jsx(View_, {
+          className: "flex-row gap-1 px-4 pt-1",
+          children: reactions.map((reaction, idx) => /*#__PURE__*/_jsx(Badge, {
+            variant: "default",
+            size: "sm",
+            className: "rounded-full",
+            children: /*#__PURE__*/_jsx(Text, {
+              className: "text-sm",
+              children: reaction
+            })
+          }, idx))
+        })]
+      })]
+    });
+  }
+  if (isOutgoing && isDefault) {
+    return /*#__PURE__*/_jsxs(View_, {
+      testID: testID ?? 'chat-bubble',
+      style: style,
+      className: "flex-row-reverse gap-2 px-5 py-2 items-end",
+      children: [showUser && /*#__PURE__*/_jsx(Avatar, {
+        size: "sm",
+        type: "image",
+        initials: userName?.slice(0, 2).toUpperCase() ?? 'AK',
+        showRing: true
+      }), /*#__PURE__*/_jsxs(View_, {
+        className: "flex-1 gap-1",
+        children: [/*#__PURE__*/_jsxs(View_, {
+          className: "flex-row items-center justify-between px-4",
+          children: [/*#__PURE__*/_jsxs(View_, {
+            className: "flex-row items-center gap-1",
+            children: [/*#__PURE__*/_jsx(Text, {
+              className: "text-xs font-medium text-text-secondary",
+              children: timestamp
+            }), showEditedIndication && /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(View_, {
+                className: "w-0.5 h-0.5 rounded-full bg-text-secondary"
+              }), /*#__PURE__*/_jsx(Text, {
+                className: "text-xs font-medium text-text-secondary",
+                children: "Edited"
+              })]
+            })]
+          }), /*#__PURE__*/_jsx(Text, {
+            className: "text-xs font-medium text-text-secondary",
+            children: "You"
+          })]
+        }), /*#__PURE__*/_jsxs(View_, {
+          className: "rounded-3xl rounded-br-none bg-surface-subtle px-4 py-3 gap-3",
+          children: [showQuotedReply && quotedMessage && /*#__PURE__*/_jsxs(View_, {
+            className: "bg-surface-default rounded-xl border-l-4 border-l-white px-3 py-2 gap-0.5",
+            children: [/*#__PURE__*/_jsx(Text, {
+              className: "text-xs font-semibold text-text-primary",
+              children: quotedMessage.author
+            }), /*#__PURE__*/_jsx(Text, {
+              className: "text-xs font-medium text-text-secondary",
+              children: quotedMessage.text
+            })]
+          }), showMessage && /*#__PURE__*/_jsx(Text, {
+            className: "text-sm font-medium text-text-primary leading-5",
+            children: message
+          }), showMessageAttachment && attachment?.type === 'link' && /*#__PURE__*/_jsxs(View_, {
+            className: "gap-2",
+            children: [/*#__PURE__*/_jsxs(View_, {
+              className: "bg-white rounded-2xl px-3 py-2 gap-1",
+              children: [/*#__PURE__*/_jsx(Text, {
+                className: "text-xs font-semibold text-text-primary",
+                children: attachment.title
+              }), /*#__PURE__*/_jsx(Text, {
+                className: "text-xs font-medium text-text-muted",
+                children: attachment.description
+              }), /*#__PURE__*/_jsx(Text, {
+                className: "text-xs font-medium text-text-secondary",
+                children: attachment.url
+              })]
+            }), /*#__PURE__*/_jsx(Pressable, {
+              children: /*#__PURE__*/_jsx(Text, {
+                className: "text-xs font-medium text-highlight-purple underline",
+                children: attachment.url && `https://${attachment.url}/home`
+              })
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(View_, {
+          className: "flex-row items-center justify-between px-4 pt-1",
+          children: [showReactions && reactions && reactions.length > 0 && /*#__PURE__*/_jsx(View_, {
+            className: "flex-row gap-1",
+            children: reactions.map((reaction, idx) => /*#__PURE__*/_jsx(Badge, {
+              variant: "default",
+              size: "sm",
+              className: "rounded-full",
+              children: /*#__PURE__*/_jsx(Text, {
+                className: "text-sm",
+                children: reaction
+              })
+            }, idx))
+          }), /*#__PURE__*/_jsxs(View_, {
+            className: "flex-row items-center gap-1",
+            children: [/*#__PURE__*/_jsx(View_, {
+              className: "w-3 h-3 rounded-full bg-text-muted"
+            }), /*#__PURE__*/_jsx(Text, {
+              className: "text-xs font-medium text-text-muted",
+              children: "Sent"
+            })]
+          })]
+        })]
+      })]
+    });
+  }
+  if (isIncoming && isAi) {
+    return /*#__PURE__*/_jsxs(View_, {
+      testID: testID ?? 'chat-bubble',
+      style: style,
+      className: "flex-row gap-2 px-5 py-2 items-end",
+      children: [showUser && /*#__PURE__*/_jsx(Avatar, {
+        size: "sm",
+        type: "icon",
+        initials: "AI",
+        showRing: true
+      }), /*#__PURE__*/_jsxs(View_, {
+        className: "flex-1 gap-1",
+        children: [/*#__PURE__*/_jsxs(View_, {
+          className: "flex-row items-center justify-between px-4",
+          children: [/*#__PURE__*/_jsx(Text, {
+            className: "text-lg",
+            children: "\u2728"
+          }), /*#__PURE__*/_jsx(Text, {
+            className: "text-xs font-medium text-text-secondary",
+            children: timestamp
+          })]
+        }), /*#__PURE__*/_jsxs(View_, {
+          className: "rounded-3xl rounded-bl-none bg-white px-4 py-3 gap-3",
+          children: [showMessage && /*#__PURE__*/_jsx(Text, {
+            className: "text-sm font-medium text-text-primary leading-5",
+            children: message
+          }), showMessageAttachment && attachment?.type === 'image' && attachment.uri && /*#__PURE__*/_jsx(Image, {
+            source: {
+              uri: attachment.uri
+            },
+            style: {
+              width: '100%',
+              height: 160,
+              borderRadius: 16
+            },
+            resizeMode: "cover"
+          })]
+        }), /*#__PURE__*/_jsx(View_, {
+          className: "flex-row items-center gap-5 px-4 pt-2",
+          children: showActions && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Pressable, {
+              onPress: onCopy,
+              children: /*#__PURE__*/_jsx(Text, {
+                className: "text-base",
+                children: "\uD83D\uDCCB"
+              })
+            }), /*#__PURE__*/_jsx(Pressable, {
+              onPress: onLike,
+              children: /*#__PURE__*/_jsx(Text, {
+                className: "text-base",
+                children: "\uD83D\uDC4D"
+              })
+            }), /*#__PURE__*/_jsx(Pressable, {
+              onPress: onDislike,
+              children: /*#__PURE__*/_jsx(Text, {
+                className: "text-base",
+                children: "\uD83D\uDC4E"
+              })
+            }), /*#__PURE__*/_jsx(Pressable, {
+              onPress: onRegenerate,
+              children: /*#__PURE__*/_jsx(Text, {
+                className: "text-base",
+                children: "\uD83D\uDD04"
+              })
+            })]
+          })
+        })]
+      })]
+    });
+  }
+  return null;
+}
+ChatBubble.displayName = 'ChatBubble';
+//# sourceMappingURL=ChatBubble.js.map

package/lib/module/components/DataDisplay/ChatBubble/ChatBubble.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","RNText","Image","RNImage","Pressable","cssInterop","Avatar","Badge","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","className","View_","ChatBubble","type","variant","message","userName","_userAvatar","timestamp","showUser","showMessage","showEditedIndication","showQuotedReply","quotedMessage","author","text","showMessageAttachment","attachment","showReactions","reactions","showActions","onCopy","onLike","onDislike","onRegenerate","style","testID","isIncoming","isOutgoing","isAi","isDefault","children","size","initials","slice","toUpperCase","showRing","uri","source","width","height","borderRadius","resizeMode","length","map","reaction","idx","title","description","url","onPress","displayName"],"sourceRoot":"../../../../../src","sources":["components/DataDisplay/ChatBubble/ChatBubble.tsx"],"mappings":";;AAAA;AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,IAAI,EACJC,IAAI,IAAIC,MAAM,EACdC,KAAK,IAAIC,OAAO,EAChBC,SAAS,QAIJ,cAAc;AACrB,SAASC,UAAU,QAAQ,YAAY;AAEvC,SAASC,MAAM,QAAQ,qBAAkB;AACzC,SAASC,KAAK,QAAQ,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAEvCR,UAAU,CAACN,IAAI,EAAE;EAAEe,SAAS,EAAE;AAAQ,CAAC,CAAC;AACxCT,UAAU,CAACJ,MAAM,EAAE;EAAEa,SAAS,EAAE;AAAQ,CAAC,CAAC;AAC1CT,UAAU,CAACF,OAAO,EAAE;EAAEW,SAAS,EAAE;AAAQ,CAAC,CAAC;AAC3CT,UAAU,CAACD,SAAS,EAAE;EAAEU,SAAS,EAAE;AAAQ,CAAC,CAAC;AAE7C,MAAMC,KAAK,GAAGhB,IAAW;AACzB,MAAMC,IAAI,GAAGC,MAAa;AAC1B,MAAMC,KAAK,GAAGC,OAAc;;AAE5B;AACA;AACA;;AA2CA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASa,UAAUA,CAAC;EACzBC,IAAI,GAAG,UAAU;EACjBC,OAAO,GAAG,SAAS;EACnBC,OAAO,GAAG,yGAAyG;EACnHC,QAAQ,GAAG,WAAW;EACtBC,WAAW;EACXC,SAAS,GAAG,UAAU;EACtBC,QAAQ,GAAG,IAAI;EACfC,WAAW,GAAG,IAAI;EAClBC,oBAAoB,GAAG,IAAI;EAC3BC,eAAe,GAAG,IAAI;EACtBC,aAAa,GAAG;IACdC,MAAM,EAAE,UAAU;IAClBC,IAAI,EAAE;EACR,CAAC;EACDC,qBAAqB,GAAG,IAAI;EAC5BC,UAAU;EACVC,aAAa,GAAG,IAAI;EACpBC,SAAS,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC;EACxBC,WAAW,GAAG,IAAI;EAClBC,MAAM;EACNC,MAAM;EACNC,SAAS;EACTC,YAAY;EACZC,KAAK;EACLC;AACe,CAAC,EAAE;EAClB,MAAMC,UAAU,GAAGxB,IAAI,KAAK,UAAU;EACtC,MAAMyB,UAAU,GAAGzB,IAAI,KAAK,UAAU;EACtC,MAAM0B,IAAI,GAAGzB,OAAO,KAAK,IAAI;EAC7B,MAAM0B,SAAS,GAAG1B,OAAO,KAAK,SAAS;EAEvC,IAAIuB,UAAU,IAAIG,SAAS,EAAE;IAC3B,oBACE/B,KAAA,CAACE,KAAK;MACJyB,MAAM,EAAEA,MAAM,IAAI,aAAc;MAChCD,KAAK,EAAEA,KAAM;MACbzB,SAAS,EAAC,oCAAoC;MAAA+B,QAAA,GAG7CtB,QAAQ,iBACPd,IAAA,CAACH,MAAM;QACLwC,IAAI,EAAC,IAAI;QACT7B,IAAI,EAAC,UAAU;QACf8B,QAAQ,EAAE3B,QAAQ,EAAE4B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAACC,WAAW,CAAC,CAAC,IAAI,IAAK;QACtDC,QAAQ,EAAE;MAAK,CAChB,CACF,eAGDrC,KAAA,CAACE,KAAK;QAACD,SAAS,EAAC,cAAc;QAAA+B,QAAA,gBAE7BhC,KAAA,CAACE,KAAK;UAACD,SAAS,EAAC,4CAA4C;UAAA+B,QAAA,gBAC3DpC,IAAA,CAACT,IAAI;YAACc,SAAS,EAAC,yCAAyC;YAAA+B,QAAA,EACtDzB;UAAQ,CACL,CAAC,eACPP,KAAA,CAACE,KAAK;YAACD,SAAS,EAAC,6BAA6B;YAAA+B,QAAA,GAC3CpB,oBAAoB,iBACnBZ,KAAA,CAAAF,SAAA;cAAAkC,QAAA,gBACEpC,IAAA,CAACT,IAAI;gBAACc,SAAS,EAAC,yCAAyC;gBAAA+B,QAAA,EAAC;cAE1D,CAAM,CAAC,eACPpC,IAAA,CAACM,KAAK;gBAACD,SAAS,EAAC;cAA4C,CAAE,CAAC;YAAA,CAChE,CACH,eACDL,IAAA,CAACT,IAAI;cAACc,SAAS,EAAC,yCAAyC;cAAA+B,QAAA,EACtDvB;YAAS,CACN,CAAC;UAAA,CACF,CAAC;QAAA,CACH,CAAC,eAGRT,KAAA,CAACE,KAAK;UAACD,SAAS,EAAC,sDAAsD;UAAA+B,QAAA,GAEpEnB,eAAe,IAAIC,aAAa,iBAC/Bd,KAAA,CAACE,KAAK;YAACD,SAAS,EAAC,4EAA4E;YAAA+B,QAAA,gBAC3FpC,IAAA,CAACT,IAAI;cAACc,SAAS,EAAC,yCAAyC;cAAA+B,QAAA,EACtDlB,aAAa,CAACC;YAAM,CACjB,CAAC,eACPnB,IAAA,CAACT,IAAI;cAACc,SAAS,EAAC,yCAAyC;cAAA+B,QAAA,EACtDlB,aAAa,CAACE;YAAI,CACf,CAAC;UAAA,CACF,CACR,EAGAL,WAAW,iBACVf,IAAA,CAACT,IAAI;YAACc,SAAS,EAAC,iDAAiD;YAAA+B,QAAA,EAC9D1B;UAAO,CACJ,CACP,EAGAW,qBAAqB,IACpBC,UAAU,EAAEd,IAAI,KAAK,OAAO,IAC5Bc,UAAU,CAACoB,GAAG,iBACZ1C,IAAA,CAACP,KAAK;YACJkD,MAAM,EAAE;cAAED,GAAG,EAAEpB,UAAU,CAACoB;YAAI,CAAE;YAChCZ,KAAK,EAAE;cACLc,KAAK,EAAE,MAAM;cACbC,MAAM,EAAE,GAAG;cACXC,YAAY,EAAE;YAChB,CAAE;YACFC,UAAU,EAAC;UAAO,CACnB,CACF;QAAA,CACE,CAAC,EAGPxB,aAAa,IAAIC,SAAS,IAAIA,SAAS,CAACwB,MAAM,GAAG,CAAC,iBACjDhD,IAAA,CAACM,KAAK;UAACD,SAAS,EAAC,0BAA0B;UAAA+B,QAAA,EACxCZ,SAAS,CAACyB,GAAG,CAAC,CAACC,QAAQ,EAAEC,GAAG,kBAC3BnD,IAAA,CAACF,KAAK;YAEJW,OAAO,EAAC,SAAS;YACjB4B,IAAI,EAAC,IAAI;YACThC,SAAS,EAAC,cAAc;YAAA+B,QAAA,eAExBpC,IAAA,CAACT,IAAI;cAACc,SAAS,EAAC,SAAS;cAAA+B,QAAA,EAAEc;YAAQ,CAAO;UAAC,GALtCC,GAMA,CACR;QAAC,CACG,CACR;MAAA,CACI,CAAC;IAAA,CACH,CAAC;EAEZ;EAEA,IAAIlB,UAAU,IAAIE,SAAS,EAAE;IAC3B,oBACE/B,KAAA,CAACE,KAAK;MACJyB,MAAM,EAAEA,MAAM,IAAI,aAAc;MAChCD,KAAK,EAAEA,KAAM;MACbzB,SAAS,EAAC,4CAA4C;MAAA+B,QAAA,GAGrDtB,QAAQ,iBACPd,IAAA,CAACH,MAAM;QACLwC,IAAI,EAAC,IAAI;QACT7B,IAAI,EAAC,OAAO;QACZ8B,QAAQ,EAAE3B,QAAQ,EAAE4B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAACC,WAAW,CAAC,CAAC,IAAI,IAAK;QACtDC,QAAQ,EAAE;MAAK,CAChB,CACF,eAGDrC,KAAA,CAACE,KAAK;QAACD,SAAS,EAAC,cAAc;QAAA+B,QAAA,gBAE7BhC,KAAA,CAACE,KAAK;UAACD,SAAS,EAAC,4CAA4C;UAAA+B,QAAA,gBAC3DhC,KAAA,CAACE,KAAK;YAACD,SAAS,EAAC,6BAA6B;YAAA+B,QAAA,gBAC5CpC,IAAA,CAACT,IAAI;cAACc,SAAS,EAAC,yCAAyC;cAAA+B,QAAA,EACtDvB;YAAS,CACN,CAAC,EACNG,oBAAoB,iBACnBZ,KAAA,CAAAF,SAAA;cAAAkC,QAAA,gBACEpC,IAAA,CAACM,KAAK;gBAACD,SAAS,EAAC;cAA4C,CAAE,CAAC,eAChEL,IAAA,CAACT,IAAI;gBAACc,SAAS,EAAC,yCAAyC;gBAAA+B,QAAA,EAAC;cAE1D,CAAM,CAAC;YAAA,CACP,CACH;UAAA,CACI,CAAC,eACRpC,IAAA,CAACT,IAAI;YAACc,SAAS,EAAC,yCAAyC;YAAA+B,QAAA,EAAC;UAAG,CAAM,CAAC;QAAA,CAC/D,CAAC,eAGRhC,KAAA,CAACE,KAAK;UAACD,SAAS,EAAC,+DAA+D;UAAA+B,QAAA,GAE7EnB,eAAe,IAAIC,aAAa,iBAC/Bd,KAAA,CAACE,KAAK;YAACD,SAAS,EAAC,2EAA2E;YAAA+B,QAAA,gBAC1FpC,IAAA,CAACT,IAAI;cAACc,SAAS,EAAC,yCAAyC;cAAA+B,QAAA,EACtDlB,aAAa,CAACC;YAAM,CACjB,CAAC,eACPnB,IAAA,CAACT,IAAI;cAACc,SAAS,EAAC,yCAAyC;cAAA+B,QAAA,EACtDlB,aAAa,CAACE;YAAI,CACf,CAAC;UAAA,CACF,CACR,EAGAL,WAAW,iBACVf,IAAA,CAACT,IAAI;YAACc,SAAS,EAAC,iDAAiD;YAAA+B,QAAA,EAC9D1B;UAAO,CACJ,CACP,EAGAW,qBAAqB,IAAIC,UAAU,EAAEd,IAAI,KAAK,MAAM,iBACnDJ,KAAA,CAACE,KAAK;YAACD,SAAS,EAAC,OAAO;YAAA+B,QAAA,gBACtBhC,KAAA,CAACE,KAAK;cAACD,SAAS,EAAC,sCAAsC;cAAA+B,QAAA,gBACrDpC,IAAA,CAACT,IAAI;gBAACc,SAAS,EAAC,yCAAyC;gBAAA+B,QAAA,EACtDd,UAAU,CAAC8B;cAAK,CACb,CAAC,eACPpD,IAAA,CAACT,IAAI;gBAACc,SAAS,EAAC,qCAAqC;gBAAA+B,QAAA,EAClDd,UAAU,CAAC+B;cAAW,CACnB,CAAC,eACPrD,IAAA,CAACT,IAAI;gBAACc,SAAS,EAAC,yCAAyC;gBAAA+B,QAAA,EACtDd,UAAU,CAACgC;cAAG,CACX,CAAC;YAAA,CACF,CAAC,eACRtD,IAAA,CAACL,SAAS;cAAAyC,QAAA,eACRpC,IAAA,CAACT,IAAI;gBAACc,SAAS,EAAC,qDAAqD;gBAAA+B,QAAA,EAClEd,UAAU,CAACgC,GAAG,IAAI,WAAWhC,UAAU,CAACgC,GAAG;cAAO,CAC/C;YAAC,CACE,CAAC;UAAA,CACP,CACR;QAAA,CACI,CAAC,eAGRlD,KAAA,CAACE,KAAK;UAACD,SAAS,EAAC,iDAAiD;UAAA+B,QAAA,GAC/Db,aAAa,IAAIC,SAAS,IAAIA,SAAS,CAACwB,MAAM,GAAG,CAAC,iBACjDhD,IAAA,CAACM,KAAK;YAACD,SAAS,EAAC,gBAAgB;YAAA+B,QAAA,EAC9BZ,SAAS,CAACyB,GAAG,CAAC,CAACC,QAAQ,EAAEC,GAAG,kBAC3BnD,IAAA,CAACF,KAAK;cAEJW,OAAO,EAAC,SAAS;cACjB4B,IAAI,EAAC,IAAI;cACThC,SAAS,EAAC,cAAc;cAAA+B,QAAA,eAExBpC,IAAA,CAACT,IAAI;gBAACc,SAAS,EAAC,SAAS;gBAAA+B,QAAA,EAAEc;cAAQ,CAAO;YAAC,GALtCC,GAMA,CACR;UAAC,CACG,CACR,eAED/C,KAAA,CAACE,KAAK;YAACD,SAAS,EAAC,6BAA6B;YAAA+B,QAAA,gBAC5CpC,IAAA,CAACM,KAAK;cAACD,SAAS,EAAC;YAAoC,CAAE,CAAC,eACxDL,IAAA,CAACT,IAAI;cAACc,SAAS,EAAC,qCAAqC;cAAA+B,QAAA,EAAC;YAAI,CAAM,CAAC;UAAA,CAC5D,CAAC;QAAA,CACH,CAAC;MAAA,CACH,CAAC;IAAA,CACH,CAAC;EAEZ;EAEA,IAAIJ,UAAU,IAAIE,IAAI,EAAE;IACtB,oBACE9B,KAAA,CAACE,KAAK;MACJyB,MAAM,EAAEA,MAAM,IAAI,aAAc;MAChCD,KAAK,EAAEA,KAAM;MACbzB,SAAS,EAAC,oCAAoC;MAAA+B,QAAA,GAG7CtB,QAAQ,iBACPd,IAAA,CAACH,MAAM;QAACwC,IAAI,EAAC,IAAI;QAAC7B,IAAI,EAAC,MAAM;QAAC8B,QAAQ,EAAC,IAAI;QAACG,QAAQ,EAAE;MAAK,CAAE,CAC9D,eAGDrC,KAAA,CAACE,KAAK;QAACD,SAAS,EAAC,cAAc;QAAA+B,QAAA,gBAE7BhC,KAAA,CAACE,KAAK;UAACD,SAAS,EAAC,4CAA4C;UAAA+B,QAAA,gBAC3DpC,IAAA,CAACT,IAAI;YAACc,SAAS,EAAC,SAAS;YAAA+B,QAAA,EAAC;UAAC,CAAM,CAAC,eAClCpC,IAAA,CAACT,IAAI;YAACc,SAAS,EAAC,yCAAyC;YAAA+B,QAAA,EACtDvB;UAAS,CACN,CAAC;QAAA,CACF,CAAC,eAGRT,KAAA,CAACE,KAAK;UAACD,SAAS,EAAC,sDAAsD;UAAA+B,QAAA,GAEpErB,WAAW,iBACVf,IAAA,CAACT,IAAI;YAACc,SAAS,EAAC,iDAAiD;YAAA+B,QAAA,EAC9D1B;UAAO,CACJ,CACP,EAGAW,qBAAqB,IACpBC,UAAU,EAAEd,IAAI,KAAK,OAAO,IAC5Bc,UAAU,CAACoB,GAAG,iBACZ1C,IAAA,CAACP,KAAK;YACJkD,MAAM,EAAE;cAAED,GAAG,EAAEpB,UAAU,CAACoB;YAAI,CAAE;YAChCZ,KAAK,EAAE;cACLc,KAAK,EAAE,MAAM;cACbC,MAAM,EAAE,GAAG;cACXC,YAAY,EAAE;YAChB,CAAE;YACFC,UAAU,EAAC;UAAO,CACnB,CACF;QAAA,CACE,CAAC,eAGR/C,IAAA,CAACM,KAAK;UAACD,SAAS,EAAC,uCAAuC;UAAA+B,QAAA,EACrDX,WAAW,iBACVrB,KAAA,CAAAF,SAAA;YAAAkC,QAAA,gBACEpC,IAAA,CAACL,SAAS;cAAC4D,OAAO,EAAE7B,MAAO;cAAAU,QAAA,eACzBpC,IAAA,CAACT,IAAI;gBAACc,SAAS,EAAC,WAAW;gBAAA+B,QAAA,EAAC;cAAE,CAAM;YAAC,CAC5B,CAAC,eACZpC,IAAA,CAACL,SAAS;cAAC4D,OAAO,EAAE5B,MAAO;cAAAS,QAAA,eACzBpC,IAAA,CAACT,IAAI;gBAACc,SAAS,EAAC,WAAW;gBAAA+B,QAAA,EAAC;cAAE,CAAM;YAAC,CAC5B,CAAC,eACZpC,IAAA,CAACL,SAAS;cAAC4D,OAAO,EAAE3B,SAAU;cAAAQ,QAAA,eAC5BpC,IAAA,CAACT,IAAI;gBAACc,SAAS,EAAC,WAAW;gBAAA+B,QAAA,EAAC;cAAE,CAAM;YAAC,CAC5B,CAAC,eACZpC,IAAA,CAACL,SAAS;cAAC4D,OAAO,EAAE1B,YAAa;cAAAO,QAAA,eAC/BpC,IAAA,CAACT,IAAI;gBAACc,SAAS,EAAC,WAAW;gBAAA+B,QAAA,EAAC;cAAE,CAAM;YAAC,CAC5B,CAAC;UAAA,CACZ;QACH,CACI,CAAC;MAAA,CACH,CAAC;IAAA,CACH,CAAC;EAEZ;EAEA,OAAO,IAAI;AACb;AAEA7B,UAAU,CAACiD,WAAW,GAAG,YAAY","ignoreList":[]}

package/lib/module/components/DataDisplay/ChatBubble/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { ChatBubble } from "./ChatBubble.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["ChatBubble"],"sourceRoot":"../../../../../src","sources":["components/DataDisplay/ChatBubble/index.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,iBAAc","ignoreList":[]}

package/lib/module/components/DataDisplay/FeedCard/AttachmentDetails.js

@@ -0,0 +1,69 @@
+"use strict";
+
+// @ts-nocheck
+import { View as RNView, Text as RNTextBase } from 'react-native';
+import { cssInterop } from 'nativewind';
+
+// NativeWind interop (className -> style)
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const View = cssInterop(RNView, {
+  className: 'style'
+});
+const RNText = cssInterop(RNTextBase, {
+  className: 'style'
+});
+/**
+ * AttachmentDetails - Displays file attachment metadata
+ *
+ * Shows file name, pages, size, and file type in a compact card format
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AttachmentDetails
+ *   fileName="Document"
+ *   pages={27}
+ *   sizeMB={3}
+ *   fileType="PDF"
+ * />
+ * ```
+ */
+export function AttachmentDetails({
+  fileName = 'File Name',
+  pages = 27,
+  sizeMB = 3,
+  fileType = 'Pdf',
+  style,
+  testID
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID ?? 'attachment-details',
+    className: "bg-surface-subtle rounded-lg px-4 py-3 flex-col gap-1 w-full",
+    style: style,
+    children: [/*#__PURE__*/_jsx(RNText, {
+      testID: "attachment-file-name",
+      numberOfLines: 1,
+      className: "text-sm font-semibold text-text-primary",
+      children: fileName
+    }), /*#__PURE__*/_jsxs(View, {
+      testID: "attachment-meta",
+      className: "flex-row items-center gap-2",
+      children: [/*#__PURE__*/_jsxs(RNText, {
+        className: "text-xs font-medium text-text-secondary",
+        children: [pages, " Pages"]
+      }), /*#__PURE__*/_jsx(View, {
+        className: "w-1 h-1 rounded-full bg-text-secondary"
+      }), /*#__PURE__*/_jsxs(RNText, {
+        className: "text-xs font-medium text-text-secondary",
+        children: [sizeMB, " MB"]
+      }), /*#__PURE__*/_jsx(View, {
+        className: "w-1 h-1 rounded-full bg-text-secondary"
+      }), /*#__PURE__*/_jsx(RNText, {
+        className: "text-xs font-medium text-text-secondary",
+        children: fileType
+      })]
+    })]
+  });
+}
+AttachmentDetails.displayName = 'AttachmentDetails';
+//# sourceMappingURL=AttachmentDetails.js.map

package/lib/module/components/DataDisplay/FeedCard/AttachmentDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","RNView","Text","RNTextBase","cssInterop","jsx","_jsx","jsxs","_jsxs","className","RNText","AttachmentDetails","fileName","pages","sizeMB","fileType","style","testID","children","numberOfLines","displayName"],"sourceRoot":"../../../../../src","sources":["components/DataDisplay/FeedCard/AttachmentDetails.tsx"],"mappings":";;AAAA;AACA,SACEA,IAAI,IAAIC,MAAM,EACdC,IAAI,IAAIC,UAAU,QAGb,cAAc;AACrB,SAASC,UAAU,QAAQ,YAAY;;AAEvC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AACA,MAAMR,IAAI,GAAGI,UAAU,CAACH,MAAM,EAAE;EAAEQ,SAAS,EAAE;AAAQ,CAAC,CAAC;AACvD,MAAMC,MAAM,GAAGN,UAAU,CAACD,UAAU,EAAE;EAAEM,SAAS,EAAE;AAAQ,CAAC,CAAC;AAqB7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,iBAAiBA,CAAC;EAChCC,QAAQ,GAAG,WAAW;EACtBC,KAAK,GAAG,EAAE;EACVC,MAAM,GAAG,CAAC;EACVC,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACLC;AACsB,CAAC,EAAE;EACzB,oBACET,KAAA,CAACR,IAAI;IACHiB,MAAM,EAAEA,MAAM,IAAI,oBAAqB;IACvCR,SAAS,EAAC,8DAA8D;IACxEO,KAAK,EAAEA,KAAM;IAAAE,QAAA,gBAGbZ,IAAA,CAACI,MAAM;MACLO,MAAM,EAAC,sBAAsB;MAC7BE,aAAa,EAAE,CAAE;MACjBV,SAAS,EAAC,yCAAyC;MAAAS,QAAA,EAElDN;IAAQ,CACH,CAAC,eAGTJ,KAAA,CAACR,IAAI;MAACiB,MAAM,EAAC,iBAAiB;MAACR,SAAS,EAAC,6BAA6B;MAAAS,QAAA,gBACpEV,KAAA,CAACE,MAAM;QAACD,SAAS,EAAC,yCAAyC;QAAAS,QAAA,GACxDL,KAAK,EAAC,QACT;MAAA,CAAQ,CAAC,eAGTP,IAAA,CAACN,IAAI;QAACS,SAAS,EAAC;MAAwC,CAAE,CAAC,eAE3DD,KAAA,CAACE,MAAM;QAACD,SAAS,EAAC,yCAAyC;QAAAS,QAAA,GACxDJ,MAAM,EAAC,KACV;MAAA,CAAQ,CAAC,eAGTR,IAAA,CAACN,IAAI;QAACS,SAAS,EAAC;MAAwC,CAAE,CAAC,eAE3DH,IAAA,CAACI,MAAM;QAACD,SAAS,EAAC,yCAAyC;QAAAS,QAAA,EACxDH;MAAQ,CACH,CAAC;IAAA,CACL,CAAC;EAAA,CACH,CAAC;AAEX;AAEAJ,iBAAiB,CAACS,WAAW,GAAG,mBAAmB","ignoreList":[]}

package/lib/module/components/DataDisplay/FeedCard/FeedCard.figma.js

@@ -10,33 +10,35 @@ figma.connect(FeedCard, FIGMA_URL, {
       post: 'post',
       announcement: 'announcement'
     }),
-    authorName: figma.string('authorName'),
-    postTitle: figma.string('postTitle'),
-    subtitle: figma.string('subtitle'),
-    postContent: figma.string('postContent'),
-    showHeader: figma.boolean('Show Header'),
-    showLeading: figma.boolean('Show Leading'),
     showMedia: figma.boolean('Show Media'),
-    showPostContent: figma.boolean('Show PostContent'),
-    showSubtitle: figma.boolean('Show Subtitle'),
+    showHeader: figma.boolean('Show Header'),
+    showPostContent: figma.boolean('Show Post Content'),
+    showBody: figma.boolean('Show Body'),
     showBadges: figma.boolean('Show Badges'),
     showFooterActions: figma.boolean('Show FooterActions'),
-    showSecondaryButton: figma.boolean('Show SecondaryButton')
+    showLeading: figma.boolean('Show Leading'),
+    showSubtitle: figma.boolean('Show Subtitle'),
+    showSecondaryButton: figma.boolean('Show SecondaryButton'),
+    authorName: figma.string('Author Name'),
+    postTitle: figma.string('Post Title'),
+    subtitle: figma.string('Subtitle'),
+    postContent: figma.string('Post Content')
   },
   example: props => /*#__PURE__*/_jsx(FeedCard, {
     type: props.type,
-    authorName: props.authorName,
-    postTitle: props.postTitle,
-    subtitle: props.subtitle,
-    postContent: props.postContent,
-    showHeader: props.showHeader,
-    showLeading: props.showLeading,
     showMedia: props.showMedia,
+    showHeader: props.showHeader,
     showPostContent: props.showPostContent,
-    showSubtitle: props.showSubtitle,
+    showBody: props.showBody,
     showBadges: props.showBadges,
     showFooterActions: props.showFooterActions,
-    showSecondaryButton: props.showSecondaryButton
+    showLeading: props.showLeading,
+    showSubtitle: props.showSubtitle,
+    showSecondaryButton: props.showSecondaryButton,
+    authorName: props.authorName,
+    postTitle: props.postTitle,
+    subtitle: props.subtitle,
+    postContent: props.postContent
   })
 });
 //# sourceMappingURL=FeedCard.figma.js.map

package/lib/module/components/DataDisplay/FeedCard/FeedCard.figma.js.map

@@ -1 +1 @@
-{"version":3,"names":["figma","FeedCard","jsx","_jsx","FIGMA_URL","connect","props","type","enum","post","announcement","authorName","string","postTitle","subtitle","postContent","showHeader","boolean","showLeading","showMedia","showPostContent","showSubtitle","showBadges","showFooterActions","showSecondaryButton","example"],"sourceRoot":"../../../../../src","sources":["components/DataDisplay/FeedCard/FeedCard.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,QAAQ,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtC,MAAMC,SAAS,GACb,sGAAsG;AAExGJ,KAAK,CAACK,OAAO,CAACJ,QAAQ,EAAEG,SAAS,EAAE;EACjCE,KAAK,EAAE;IACLC,IAAI,EAAEP,KAAK,CAACQ,IAAI,CAAC,MAAM,EAAE;MACvBC,IAAI,EAAE,MAAM;MACZC,YAAY,EAAE;IAChB,CAAC,CAAC;IACFC,UAAU,EAAEX,KAAK,CAACY,MAAM,CAAC,YAAY,CAAC;IACtCC,SAAS,EAAEb,KAAK,CAACY,MAAM,CAAC,WAAW,CAAC;IACpCE,QAAQ,EAAEd,KAAK,CAACY,MAAM,CAAC,UAAU,CAAC;IAClCG,WAAW,EAAEf,KAAK,CAACY,MAAM,CAAC,aAAa,CAAC;IACxCI,UAAU,EAAEhB,KAAK,CAACiB,OAAO,CAAC,aAAa,CAAC;IACxCC,WAAW,EAAElB,KAAK,CAACiB,OAAO,CAAC,cAAc,CAAC;IAC1CE,SAAS,EAAEnB,KAAK,CAACiB,OAAO,CAAC,YAAY,CAAC;IACtCG,eAAe,EAAEpB,KAAK,CAACiB,OAAO,CAAC,kBAAkB,CAAC;IAClDI,YAAY,EAAErB,KAAK,CAACiB,OAAO,CAAC,eAAe,CAAC;IAC5CK,UAAU,EAAEtB,KAAK,CAACiB,OAAO,CAAC,aAAa,CAAC;IACxCM,iBAAiB,EAAEvB,KAAK,CAACiB,OAAO,CAAC,oBAAoB,CAAC;IACtDO,mBAAmB,EAAExB,KAAK,CAACiB,OAAO,CAAC,sBAAsB;EAC3D,CAAC;EACDQ,OAAO,EAAGnB,KAAK,iBACbH,IAAA,CAACF,QAAQ;IACPM,IAAI,EAAED,KAAK,CAACC,IAAK;IACjBI,UAAU,EAAEL,KAAK,CAACK,UAAW;IAC7BE,SAAS,EAAEP,KAAK,CAACO,SAAU;IAC3BC,QAAQ,EAAER,KAAK,CAACQ,QAAS;IACzBC,WAAW,EAAET,KAAK,CAACS,WAAY;IAC/BC,UAAU,EAAEV,KAAK,CAACU,UAAW;IAC7BE,WAAW,EAAEZ,KAAK,CAACY,WAAY;IAC/BC,SAAS,EAAEb,KAAK,CAACa,SAAU;IAC3BC,eAAe,EAAEd,KAAK,CAACc,eAAgB;IACvCC,YAAY,EAAEf,KAAK,CAACe,YAAa;IACjCC,UAAU,EAAEhB,KAAK,CAACgB,UAAW;IAC7BC,iBAAiB,EAAEjB,KAAK,CAACiB,iBAAkB;IAC3CC,mBAAmB,EAAElB,KAAK,CAACkB;EAAoB,CAChD;AAEL,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["figma","FeedCard","jsx","_jsx","FIGMA_URL","connect","props","type","enum","post","announcement","showMedia","boolean","showHeader","showPostContent","showBody","showBadges","showFooterActions","showLeading","showSubtitle","showSecondaryButton","authorName","string","postTitle","subtitle","postContent","example"],"sourceRoot":"../../../../../src","sources":["components/DataDisplay/FeedCard/FeedCard.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,QAAQ,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtC,MAAMC,SAAS,GACb,sGAAsG;AAExGJ,KAAK,CAACK,OAAO,CAACJ,QAAQ,EAAEG,SAAS,EAAE;EACjCE,KAAK,EAAE;IACLC,IAAI,EAAEP,KAAK,CAACQ,IAAI,CAAC,MAAM,EAAE;MACvBC,IAAI,EAAE,MAAM;MACZC,YAAY,EAAE;IAChB,CAAC,CAAC;IACFC,SAAS,EAAEX,KAAK,CAACY,OAAO,CAAC,YAAY,CAAC;IACtCC,UAAU,EAAEb,KAAK,CAACY,OAAO,CAAC,aAAa,CAAC;IACxCE,eAAe,EAAEd,KAAK,CAACY,OAAO,CAAC,mBAAmB,CAAC;IACnDG,QAAQ,EAAEf,KAAK,CAACY,OAAO,CAAC,WAAW,CAAC;IACpCI,UAAU,EAAEhB,KAAK,CAACY,OAAO,CAAC,aAAa,CAAC;IACxCK,iBAAiB,EAAEjB,KAAK,CAACY,OAAO,CAAC,oBAAoB,CAAC;IACtDM,WAAW,EAAElB,KAAK,CAACY,OAAO,CAAC,cAAc,CAAC;IAC1CO,YAAY,EAAEnB,KAAK,CAACY,OAAO,CAAC,eAAe,CAAC;IAC5CQ,mBAAmB,EAAEpB,KAAK,CAACY,OAAO,CAAC,sBAAsB,CAAC;IAC1DS,UAAU,EAAErB,KAAK,CAACsB,MAAM,CAAC,aAAa,CAAC;IACvCC,SAAS,EAAEvB,KAAK,CAACsB,MAAM,CAAC,YAAY,CAAC;IACrCE,QAAQ,EAAExB,KAAK,CAACsB,MAAM,CAAC,UAAU,CAAC;IAClCG,WAAW,EAAEzB,KAAK,CAACsB,MAAM,CAAC,cAAc;EAC1C,CAAC;EACDI,OAAO,EAAGpB,KAAK,iBACbH,IAAA,CAACF,QAAQ;IACPM,IAAI,EAAED,KAAK,CAACC,IAAK;IACjBI,SAAS,EAAEL,KAAK,CAACK,SAAU;IAC3BE,UAAU,EAAEP,KAAK,CAACO,UAAW;IAC7BC,eAAe,EAAER,KAAK,CAACQ,eAAgB;IACvCC,QAAQ,EAAET,KAAK,CAACS,QAAS;IACzBC,UAAU,EAAEV,KAAK,CAACU,UAAW;IAC7BC,iBAAiB,EAAEX,KAAK,CAACW,iBAAkB;IAC3CC,WAAW,EAAEZ,KAAK,CAACY,WAAY;IAC/BC,YAAY,EAAEb,KAAK,CAACa,YAAa;IACjCC,mBAAmB,EAAEd,KAAK,CAACc,mBAAoB;IAC/CC,UAAU,EAAEf,KAAK,CAACe,UAAW;IAC7BE,SAAS,EAAEjB,KAAK,CAACiB,SAAU;IAC3BC,QAAQ,EAAElB,KAAK,CAACkB,QAAS;IACzBC,WAAW,EAAEnB,KAAK,CAACmB;EAAY,CAChC;AAEL,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/DataDisplay/FeedCard/FeedCard.js

@@ -9,11 +9,11 @@ import { Button } from "../../Input/Button/Button.js";
 import { Badge } from "../Badge/Badge.js";
 import { Text } from "../../Input/Text/Text.js";
 import { Avatar } from "../Avatar/Avatar.js";
-import { AspectRatio } from "../../Layout/AspectRatio/Aspect-Ratio.js";
+import { AttachmentDetails } from "./AttachmentDetails.js";
 
-// Default placeholder image
+// Gradient image asset (same as Card demo)
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_MEDIA_IMAGE = 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe3e?w=400&h=224&fit=crop';
+const GRADIENT_IMAGE = require('../../../assets/icons/Image.png');
 
 // NativeWind interop (className -> style)
 const View = cssInterop(RNView, {
@@ -33,30 +33,30 @@ const Image = cssInterop(RNImage, {
 export const FeedCardVariants = {
   type: ['post', 'announcement']
 };
-const rootVariants = cva('w-full overflow-hidden rounded-3xl', {
+const rootVariants = cva('w-full overflow-hidden rounded-lg bg-surface-default', {
   variants: {
     type: {
-      post: 'bg-surface-default',
-      announcement: 'bg-surface-default border border-border-default'
+      post: '',
+      announcement: 'border border-border-default'
     }
   },
   defaultVariants: {
     type: 'post'
   }
 });
-const metaRowVariants = cva('w-full flex-row p-4', {
+const metaRowVariants = cva('w-full flex-row p-4 items-center', {
   variants: {
     type: {
-      post: 'items-center gap-2',
-      announcement: 'items-center justify-between'
+      post: 'gap-2',
+      announcement: 'justify-between gap-2'
     }
   },
   defaultVariants: {
     type: 'post'
   }
 });
-const mediaWrapVariants = cva('w-full overflow-hidden px-4 pb-4');
-const contentWrapVariants = cva('w-full px-4 pb-4 flex-col');
+const mediaWrapVariants = cva('w-full overflow-hidden px-4 pb-0 pt-0');
+const contentWrapVariants = cva('w-full px-4 pb-4 flex-col gap-4');
 const headerVariants = cva('w-full gap-1 flex-col');
 const titleVariants = cva('text-base font-semibold text-text-primary');
 const subtitleVariants = cva('text-xs font-medium text-text-secondary');
@@ -90,12 +90,18 @@ export function FeedCard(props) {
     subtitle = 'Subtitle of the card goes here',
     postContent = 'The card may contain body content which can be truncated to 1-2 lines. Swap Content in Props.',
     image,
+    mediaType = 'image',
+    fileName = 'File Name',
+    filePages = 27,
+    fileSizeMB = 3,
+    fileType = 'PDF',
     type = 'post',
     showHeader = true,
     showLeading = true,
     showMedia = true,
     showPostContent = true,
     showSubtitle = true,
+    showBody = true,
     showBadges = true,
     showFooterActions = true,
     showSecondaryButton = true,
@@ -157,18 +163,22 @@ export function FeedCard(props) {
     }), showMedia && /*#__PURE__*/_jsx(View, {
       testID: "feed-card-media-wrap",
       className: cn(mediaWrapVariants()),
-      children: /*#__PURE__*/_jsx(AspectRatio, {
-        variant: "16:9",
-        children: /*#__PURE__*/_jsx(View, {
-          className: "w-full h-full bg-surface-subtle rounded-3xl overflow-hidden",
+      children: /*#__PURE__*/_jsx(View, {
+        className: "w-full pb-4",
+        children: mediaType === 'image' ? /*#__PURE__*/_jsx(View, {
+          className: "w-full aspect-[16/9] bg-surface-subtle rounded-xl overflow-hidden",
           children: /*#__PURE__*/_jsx(Image, {
             testID: "feed-card-media",
-            source: image || {
-              uri: DEFAULT_MEDIA_IMAGE
-            },
+            source: image || GRADIENT_IMAGE,
             resizeMode: "cover",
             className: "w-full h-full"
           })
+        }) : /*#__PURE__*/_jsx(AttachmentDetails, {
+          testID: "feed-card-attachment",
+          fileName: fileName,
+          pages: filePages,
+          sizeMB: fileSizeMB,
+          fileType: fileType
         })
       })
     }), showPostContent && /*#__PURE__*/_jsxs(View, {
@@ -180,6 +190,7 @@ export function FeedCard(props) {
         children: [/*#__PURE__*/_jsx(RNText, {
           testID: "feed-card-title",
           numberOfLines: 1,
+          ellipsizeMode: "tail",
           className: cn(titleVariants()),
           children: postTitle
         }), showSubtitle && /*#__PURE__*/_jsx(RNText, {
@@ -188,7 +199,7 @@ export function FeedCard(props) {
           className: cn(subtitleVariants()),
           children: subtitle
         })]
-      }), /*#__PURE__*/_jsx(RNText, {
+      }), showBody && /*#__PURE__*/_jsx(RNText, {
         testID: "feed-card-body",
         numberOfLines: 2,
         className: cn(bodyVariants()),