@campxdev/react-native-blueprint 0.1.20 → 0.1.24

package/src/components/DataDisplay/Card/Card.tsx

@@ -32,76 +32,113 @@ const Image = cssInterop(RNImage, { className: 'style' });
  * --------------------------------------------------- */
 
 export const CardVariants = {
-  density: ['comfortable', 'compact'] as const,
-  tone: ['default', 'subtle'] as const,
+  size: ['sm', 'lg'] as const,
 } as const;
 
-type CardDensity = (typeof CardVariants.density)[number];
-type CardTone = (typeof CardVariants.tone)[number];
+type CardSize = (typeof CardVariants.size)[number];
 
-const rootVariants = cva('w-full overflow-hidden rounded-2xl border', {
+const rootVariants = cva('overflow-hidden rounded-2xl border border-border', {
   variants: {
-    tone: {
-      default: 'bg-background border-border',
-      subtle: 'bg-muted border-border',
+    size: {
+      sm: 'w-48',
+      lg: 'w-full',
     },
   },
   defaultVariants: {
-    tone: 'default',
+    size: 'lg',
   },
 });
 
-const mediaWrapVariants = cva('w-full bg-muted overflow-hidden', {
+// Apply surface colors via inline styles
+const cardStyle = (style?: any) => ({
+  ...style,
+  backgroundColor: 'var(--colors-surface-default, white)',
+});
+
+const mediaWrapVariants = cva('bg-muted overflow-hidden rounded-lg', {
   variants: {
-    density: {
-      comfortable: 'h-56',
-      compact: 'h-40',
+    size: {
+      sm: 'h-24 w-full',
+      lg: 'w-full h-56',
     },
   },
   defaultVariants: {
-    density: 'comfortable',
+    size: 'lg',
   },
 });
 
-const contentWrapVariants = cva('w-full', {
+// Media container wrapper to add padding (using spacing-md = 12px)
+const mediaContainerVariants = cva('', {
   variants: {
-    density: {
-      comfortable: 'px-4 py-4 gap-4',
-      compact: 'px-4 py-3 gap-3',
+    size: {
+      sm: 'p-3 pb-2',
+      lg: 'p-3 pb-0',
     },
   },
   defaultVariants: {
-    density: 'comfortable',
+    size: 'lg',
+  },
+});
+
+const contentWrapVariants = cva('flex flex-col', {
+  variants: {
+    size: {
+      sm: 'w-full px-4 py-4 gap-2',
+      lg: 'w-full px-4 py-4 gap-4',
+    },
+  },
+  defaultVariants: {
+    size: 'lg',
   },
 });
 
 const headerRowVariants = cva('w-full flex-row items-center', {
   variants: {
-    density: {
-      comfortable: 'gap-3',
-      compact: 'gap-3',
+    size: {
+      sm: 'gap-2',
+      lg: 'gap-3',
     },
   },
   defaultVariants: {
-    density: 'comfortable',
+    size: 'lg',
   },
 });
 
 const titleColumnVariants = cva('flex-1 flex-col', {
   variants: {
-    density: {
-      comfortable: 'gap-1',
-      compact: 'gap-1',
+    size: {
+      sm: 'gap-0.5',
+      lg: 'gap-1',
     },
   },
   defaultVariants: {
-    density: 'comfortable',
+    size: 'lg',
   },
 });
 
-const titleVariants = cva('text-base font-semibold text-foreground');
+const titleVariants = cva('text-base font-semibold text-foreground', {
+  variants: {
+    size: {
+      sm: 'text-sm',
+      lg: 'text-base',
+    },
+  },
+  defaultVariants: {
+    size: 'lg',
+  },
+});
 const subtitleVariants = cva('text-xs font-medium text-muted-foreground');
-const bodyVariants = cva('text-sm font-medium text-foreground');
+const bodyVariants = cva('text-sm font-medium text-foreground', {
+  variants: {
+    size: {
+      sm: 'text-xs',
+      lg: 'text-sm',
+    },
+  },
+  defaultVariants: {
+    size: 'lg',
+  },
+});
 
 const badgesRowVariants = cva('flex-row items-center gap-2');
 const footerRowVariants = cva('w-full flex-row items-center justify-between');
@@ -109,16 +146,16 @@ const leftButtonsVariants = cva('flex-row items-center gap-2');
 const rightButtonsVariants = cva('flex-row items-center gap-2');
 
 const overflowBtnVariants = cva(
-  'absolute right-4 top-4 items-center justify-center rounded-lg border bg-muted',
+  'absolute right-4 top-4 items-center justify-center rounded-lg border border-border bg-muted',
   {
     variants: {
-      density: {
-        comfortable: 'w-10 h-10',
-        compact: 'w-9 h-9',
+      size: {
+        sm: 'w-8 h-8',
+        lg: 'w-10 h-10',
       },
     },
     defaultVariants: {
-      density: 'comfortable',
+      size: 'lg',
     },
   }
 );
@@ -127,14 +164,9 @@ const overflowBtnVariants = cva(
  * Helpers
  * --------------------------------------------------- */
 
-function normalizeDensity(v: any): CardDensity {
-  const s = String(v ?? 'comfortable').toLowerCase();
-  return s === 'compact' ? 'compact' : 'comfortable';
-}
-
-function normalizeTone(v: any): CardTone {
-  const s = String(v ?? 'default').toLowerCase();
-  return s === 'subtle' ? 'subtle' : 'default';
+function normalizeSize(v: any): CardSize {
+  const s = String(v ?? 'lg').toLowerCase();
+  return s === 'sm' ? 'sm' : 'lg';
 }
 
 /* -----------------------------------------------------
@@ -194,7 +226,7 @@ export type CardProps = Omit<
     VariantProps<typeof contentWrapVariants> &
     VariantProps<typeof mediaWrapVariants> &
     VariantProps<typeof overflowBtnVariants>,
-  'density' | 'tone'
+  'tone'
 > & {
   title?: string;
   subtitle?: string;
@@ -217,8 +249,7 @@ export type CardProps = Omit<
   avatarInitials?: string;
 
   /** variants */
-  density?: CardDensity | 'Comfortable' | 'Compact';
-  tone?: CardTone | 'Default' | 'Subtle';
+  size?: CardSize | 'Sm' | 'Lg';
 
   /** optional badge labels */
   badge1Text?: string;
@@ -265,8 +296,7 @@ export function Card(props: CardProps) {
     leadingChecked,
     avatarInitials,
 
-    density,
-    tone,
+    size = 'lg',
 
     badge1Text = 'Badge 1',
     badge2Text = 'Badge 2',
@@ -282,43 +312,44 @@ export function Card(props: CardProps) {
     testID,
   } = props;
 
-  const den = normalizeDensity(density);
-  const tn = normalizeTone(tone);
+  const sz = normalizeSize(size);
 
   return (
     <View
       testID={testID ?? 'card'}
-      className={cn(rootVariants({ tone: tn }))}
-      style={style}
+      className={cn(rootVariants({ size: sz }))}
+      style={cardStyle(style)}
     >
       {showMedia ? (
-        <View
-          testID="card-media-wrap"
-          className={cn(mediaWrapVariants({ density: den }))}
-        >
-          {image ? (
-            <Image
-              testID="card-media"
-              source={image}
-              resizeMode="cover"
-              className="w-full h-full"
-            />
-          ) : (
-            <View
-              testID="card-media-placeholder"
-              className="w-full h-full bg-muted"
-            />
-          )}
+        <View className={cn(mediaContainerVariants({ size: sz }))}>
+          <View
+            testID="card-media-wrap"
+            className={cn(mediaWrapVariants({ size: sz }))}
+          >
+            {image ? (
+              <Image
+                testID="card-media"
+                source={image}
+                resizeMode="cover"
+                className="w-full h-full"
+              />
+            ) : (
+              <View
+                testID="card-media-placeholder"
+                className="w-full h-full bg-muted"
+              />
+            )}
+          </View>
         </View>
       ) : null}
 
       <View
         testID="card-content"
-        className={cn(contentWrapVariants({ density: den }))}
+        className={cn(contentWrapVariants({ size: sz }))}
       >
         <View
           testID="card-header"
-          className={cn(headerRowVariants({ density: den }))}
+          className={cn(headerRowVariants({ size: sz }))}
         >
           {showLeading ? (
             <View testID="card-leading" className="items-center justify-center">
@@ -332,12 +363,12 @@ export function Card(props: CardProps) {
 
           <View
             testID="card-title-column"
-            className={cn(titleColumnVariants({ density: den }))}
+            className={cn(titleColumnVariants({ size: sz }))}
           >
             <RNText
               testID="card-title"
               numberOfLines={1}
-              className={cn(titleVariants())}
+              className={cn(titleVariants({ size: sz }))}
             >
               {title}
             </RNText>
@@ -357,7 +388,7 @@ export function Card(props: CardProps) {
         <RNText
           testID="card-body"
           numberOfLines={2}
-          className={cn(bodyVariants())}
+          className={cn(bodyVariants({ size: sz }))}
         >
           {body}
         </RNText>
@@ -385,33 +416,53 @@ export function Card(props: CardProps) {
 
         {showFooterActions ? (
           <View testID="card-footer" className={cn(footerRowVariants())}>
-            <View
-              testID="card-footer-left"
-              className={cn(leftButtonsVariants())}
-            >
-              <Button
-                testID="card-primary-action"
-                disabled={false}
-                size="default"
-                variant="default"
-                showLeftIcon={false}
-                showRightIcon={false}
-                onPress={onPrimaryActionPress}
+            {sz === 'lg' && (
+              <View
+                testID="card-footer-left"
+                className={cn(leftButtonsVariants())}
               >
-                {primaryActionText}
-              </Button>
-              <Button
-                testID="card-secondary-action"
-                disabled={false}
-                size="default"
-                variant="secondary"
-                showLeftIcon={false}
-                showRightIcon={false}
-                onPress={onSecondaryActionPress}
+                <Button
+                  testID="card-primary-action"
+                  disabled={false}
+                  size="default"
+                  variant="default"
+                  showLeftIcon={false}
+                  showRightIcon={false}
+                  onPress={onPrimaryActionPress}
+                >
+                  {primaryActionText}
+                </Button>
+                <Button
+                  testID="card-secondary-action"
+                  disabled={false}
+                  size="default"
+                  variant="secondary"
+                  showLeftIcon={false}
+                  showRightIcon={false}
+                  onPress={onSecondaryActionPress}
+                >
+                  {secondaryActionText}
+                </Button>
+              </View>
+            )}
+            {sz === 'sm' && (
+              <View
+                testID="card-footer-left"
+                className={cn(leftButtonsVariants())}
               >
-                {secondaryActionText}
-              </Button>
-            </View>
+                <Button
+                  testID="card-primary-action"
+                  disabled={false}
+                  size="default"
+                  variant="default"
+                  showLeftIcon={false}
+                  showRightIcon={false}
+                  onPress={onPrimaryActionPress}
+                >
+                  {primaryActionText}
+                </Button>
+              </View>
+            )}
 
             <View
               testID="card-footer-right"
@@ -430,16 +481,16 @@ export function Card(props: CardProps) {
         ) : null}
       </View>
 
-      {showOverflowMenu ? (
+      {showOverflowMenu && sz === 'lg' && (
         <Pressable
           testID="card-overflow"
           onPress={onOverflowPress}
-          className={cn(overflowBtnVariants({ density: den }))}
+          className={cn(overflowBtnVariants({ size: sz }))}
           hitSlop={8}
         >
           <MoreHorizontal size={18} color="hsl(var(--foreground))" />
         </Pressable>
-      ) : null}
+      )}
     </View>
   );
 }

package/src/components/DataDisplay/ChatBubble/ChatBubble.figma.tsx

@@ -0,0 +1,54 @@
+import figma from '@figma/code-connect';
+import { ChatBubble } from './ChatBubble';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=306-9226';
+
+/**
+ * ChatBubble - Message bubble component for chat interfaces
+ *
+ * Use cases:
+ * - Chat applications and messaging interfaces
+ * - Message threads and conversations
+ * - AI assistant responses
+ * - User message display
+ *
+ * Features:
+ * - Three variants: incoming default, outgoing default, and AI message
+ * - User avatars for message identification
+ * - Message metadata (timestamp, edited status)
+ * - Quoted reply support for context
+ * - Message attachments (images, links)
+ * - Reaction badges
+ * - AI-specific actions (copy, like, dislike, regenerate)
+ * - Fully customizable appearance and behavior
+ *
+ * Customization:
+ * - Show/hide individual sections
+ * - Customize message content and user info
+ * - Add attachments and reactions
+ * - Configure action callbacks
+ * - Customize styling per variant
+ */
+figma.connect(ChatBubble, FIGMA_URL, {
+  example: () => (
+    <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"
+      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}
+      showReactions={true}
+      reactions={['👍', '❤️']}
+    />
+  ),
+});