@campxdev/react-native-blueprint 0.1.20 → 0.1.24

package/src/components/DataDisplay/FeedCard/FeedCard.tsx

@@ -15,11 +15,10 @@ import { Button } from '../../Input/Button/Button';
 import { Badge } from '../Badge/Badge';
 import { Text } from '../../Input/Text/Text';
 import { Avatar } from '../Avatar/Avatar';
-import { AspectRatio } from '../../Layout/AspectRatio/Aspect-Ratio';
+import { AttachmentDetails } from './AttachmentDetails';
 
-// Default placeholder image
-const DEFAULT_MEDIA_IMAGE =
-  'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe3e?w=400&h=224&fit=crop';
+// Gradient image asset (same as Card demo)
+const GRADIENT_IMAGE = require('../../../assets/icons/Image.png');
 
 // NativeWind interop (className -> style)
 const View = cssInterop(RNView, { className: 'style' });
@@ -36,23 +35,26 @@ export const FeedCardVariants = {
 
 type FeedCardType = (typeof FeedCardVariants.type)[number];
 
-const rootVariants = cva('w-full overflow-hidden rounded-3xl', {
-  variants: {
-    type: {
-      post: 'bg-surface-default',
-      announcement: 'bg-surface-default border border-border-default',
+const rootVariants = cva(
+  'w-full overflow-hidden rounded-lg bg-surface-default',
+  {
+    variants: {
+      type: {
+        post: '',
+        announcement: 'border border-border-default',
+      },
     },
-  },
-  defaultVariants: {
-    type: 'post',
-  },
-});
+    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: {
@@ -60,9 +62,9 @@ const metaRowVariants = cva('w-full flex-row p-4', {
   },
 });
 
-const mediaWrapVariants = cva('w-full overflow-hidden px-4 pb-4');
+const mediaWrapVariants = cva('w-full overflow-hidden px-4 pb-0 pt-0');
 
-const contentWrapVariants = cva('w-full px-4 pb-4 flex-col');
+const contentWrapVariants = cva('w-full px-4 pb-4 flex-col gap-4');
 
 const headerVariants = cva('w-full gap-1 flex-col');
 
@@ -111,6 +113,15 @@ export type FeedCardProps = {
   /** Optional image/media */
   image?: ImageSourcePropType;
 
+  /** Media type variant */
+  mediaType?: 'image' | 'file';
+
+  /** File attachment details (for file media type) */
+  fileName?: string;
+  filePages?: number;
+  fileSizeMB?: number;
+  fileType?: string;
+
   /** Card type variant */
   type?: FeedCardType | 'Post' | 'Announcement';
 
@@ -120,6 +131,7 @@ export type FeedCardProps = {
   showMedia?: boolean;
   showPostContent?: boolean;
   showSubtitle?: boolean;
+  showBody?: boolean;
   showBadges?: boolean;
   showFooterActions?: boolean;
   showSecondaryButton?: boolean;
@@ -155,6 +167,11 @@ export function FeedCard(props: FeedCardProps) {
     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',
 
@@ -163,6 +180,7 @@ export function FeedCard(props: FeedCardProps) {
     showMedia = true,
     showPostContent = true,
     showSubtitle = true,
+    showBody = true,
     showBadges = true,
     showFooterActions = true,
     showSecondaryButton = true,
@@ -243,16 +261,26 @@ export function FeedCard(props: FeedCardProps) {
       {/* Media Section */}
       {showMedia && (
         <View testID="feed-card-media-wrap" className={cn(mediaWrapVariants())}>
-          <AspectRatio variant="16:9">
-            <View className="w-full h-full bg-surface-subtle rounded-3xl overflow-hidden">
-              <Image
-                testID="feed-card-media"
-                source={image || { uri: DEFAULT_MEDIA_IMAGE }}
-                resizeMode="cover"
-                className="w-full h-full"
+          <View className="w-full pb-4">
+            {mediaType === 'image' ? (
+              <View className="w-full aspect-[16/9] bg-surface-subtle rounded-xl overflow-hidden">
+                <Image
+                  testID="feed-card-media"
+                  source={image || GRADIENT_IMAGE}
+                  resizeMode="cover"
+                  className="w-full h-full"
+                />
+              </View>
+            ) : (
+              <AttachmentDetails
+                testID="feed-card-attachment"
+                fileName={fileName}
+                pages={filePages}
+                sizeMB={fileSizeMB}
+                fileType={fileType}
               />
-            </View>
-          </AspectRatio>
+            )}
+          </View>
         </View>
       )}
 
@@ -265,6 +293,7 @@ export function FeedCard(props: FeedCardProps) {
               <RNText
                 testID="feed-card-title"
                 numberOfLines={1}
+                ellipsizeMode="tail"
                 className={cn(titleVariants())}
               >
                 {postTitle}
@@ -283,13 +312,15 @@ export function FeedCard(props: FeedCardProps) {
           )}
 
           {/* Body */}
-          <RNText
-            testID="feed-card-body"
-            numberOfLines={2}
-            className={cn(bodyVariants())}
-          >
-            {postContent}
-          </RNText>
+          {showBody && (
+            <RNText
+              testID="feed-card-body"
+              numberOfLines={2}
+              className={cn(bodyVariants())}
+            >
+              {postContent}
+            </RNText>
+          )}
         </View>
       )}
 

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

@@ -6,11 +6,11 @@ const FIGMA_URL =
 
 figma.connect(Greeting, FIGMA_URL, {
   props: {
-    ctaLayout: figma.enum('CTA Layout', {
-      'icon': 'icon',
-      'none': 'none',
-      'floating': 'floating',
-      'ai summary': 'ai summary',
+    ctaLayout: figma.enum('ctaLayout', {
+      icon: 'icon',
+      row: 'row',
+      none: 'none',
+      floating: 'floating',
     }),
     showNextUp: figma.boolean('Show NextUp'),
   },

package/src/components/DataDisplay/Greeting/Greeting.tsx

@@ -16,10 +16,6 @@ cssInterop(LinearGradient, { className: 'style' });
 const View = RNView as React.ComponentType<
   React.ComponentProps<typeof RNView> & { className?: string }
 >;
-const Pressable = RNPressable as React.ComponentType<
-  React.ComponentProps<typeof RNPressable> & { className?: string }
->;
-
 /**
  * Props for the Greeting component
  */
@@ -31,9 +27,7 @@ export interface GreetingProps {
   /** Subtitle/secondary text below greeting */
   subtitle?: string;
   /** CTA (Call-to-Action) layout style */
-  ctaLayout?: 'icon' | 'none' | 'floating' | 'ai summary';
-  /** Whether to show the schedule/calendar button - deprecated, use ctaLayout instead */
-  showScheduleButton?: boolean;
+  ctaLayout?: 'icon' | 'none' | 'floating' | 'row';
   /** Callback when schedule button is pressed */
   onSchedulePress?: () => void;
   /** Whether to show the "Next up" section */
@@ -52,12 +46,16 @@ export interface GreetingProps {
  * Greeting - A personalized greeting card with schedule information
  *
  * Displays a personalized greeting with user name, class information, and upcoming
- * class details. Features a prominent purple schedule button with calendar icon,
- * "Next up" section with course name and time, and flexible visibility controls.
+ * class details. Supports multiple CTA layouts: icon button, row button, floating button,
+ * or none. Features "Next up" section with course name and time.
  *
- * Design from Figma: node-id=448-8146
+ * Design from Figma: node-id=495-8995
  * - Header: "Hey {name}, {greeting}" + Subtitle
- * - Schedule Button: Purple (#573dab) with calendar icon and shadow
+ * - CTA Layouts:
+ *   - icon: Calendar icon button in header
+ *   - row: Full-width button below content
+ *   - floating: Full-width button at bottom with separate styling
+ *   - none: No CTA button
  * - Next Up: Course name + divider dot + time
  *
  * @component
@@ -70,6 +68,7 @@ export interface GreetingProps {
  *   nextUpTitle="Digital Logic Design"
  *   nextUpTime="10:00 AM"
  *   showNextUp={true}
+ *   ctaLayout="icon"
  *   onSchedulePress={() => navigate('Schedule')}
  * />
  * ```
@@ -79,7 +78,6 @@ export function Greeting({
   greetingText = 'Good Morning',
   subtitle = 'You have 3 Classes today',
   ctaLayout = 'icon',
-  showScheduleButton,
   onSchedulePress,
   showNextUp = true,
   nextUpTitle = 'Digital Logic Design',
@@ -87,49 +85,31 @@ export function Greeting({
   className,
   testID,
 }: GreetingProps) {
-  // Handle backwards compatibility: showScheduleButton prop takes precedence if explicitly set
-  const effectiveCtaLayout =
-    showScheduleButton !== undefined
-      ? showScheduleButton
-        ? 'icon'
-        : 'none'
-      : ctaLayout;
-
-  const isAiSummary = effectiveCtaLayout === 'ai summary';
-  const isFloating = effectiveCtaLayout === 'floating';
-  const isIconOrFloatingOrNoneOrAiSummary = [
-    'icon',
-    'floating',
-    'none',
-    'ai summary',
-  ].includes(effectiveCtaLayout);
-  const isNone = effectiveCtaLayout === 'none';
+  const isFloating = ctaLayout === 'floating';
+  const isRow = ctaLayout === 'row';
+  const isIcon = ctaLayout === 'icon';
 
   return (
     <View
       testID={testID}
       className={cn(
-        'w-full max-w-[400px] flex-col items-start justify-end bg-surface-default',
+        'w-full max-w-[400px] flex-col items-start justify-end bg-surface-default rounded-xl border border-border-default',
         // Base styling based on ctaLayout
-        isAiSummary
-          ? 'gap-4 rounded-3xl border border-border-default px-0 pt-4 pb-0 overflow-hidden'
-          : isFloating
-            ? 'gap-4 rounded-3xl border border-border-default px-0 pt-4 pb-0 overflow-hidden'
-            : isNone
-              ? 'gap-4 rounded-3xl border border-border-default px-0 py-4'
-              : 'gap-4 rounded-3xl border border-border-default px-0 py-4',
+        isFloating
+          ? 'gap-5 px-0 py-5'
+          : isRow
+            ? 'gap-4 px-0 pt-4 pb-0'
+            : 'gap-4 px-0 py-3',
         className
       )}
     >
-      {/* Header Section: Greeting + Schedule Button */}
+      {/* Header Section: Greeting + Optional Calendar Icon */}
       <View
         className={cn(
-          'w-full flex-row items-center',
-          isFloating || isAiSummary
-            ? 'justify-between px-3'
-            : isNone
-              ? 'px-3'
-              : 'px-3'
+          'w-full flex-row',
+          isFloating
+            ? 'justify-between px-3 items-start'
+            : 'justify-between px-3 items-center'
         )}
       >
         {/* Header Content: Title and Subtitle */}
@@ -142,32 +122,36 @@ export function Greeting({
           </Text>
         </View>
 
-        {/* Schedule Button with Calendar Icon - Icon Layout */}
-        {effectiveCtaLayout === 'icon' && (
-          <Pressable
+        {/* Schedule Button - Icon Layout (top-right in icon layout) */}
+        {isIcon && (
+          <Button
+            variant="default"
+            size="icon"
+            showLeftIcon
+            leftIcon={<Icon as={Calendar} size={16} color="white" />}
             onPress={onSchedulePress}
-            hitSlop={12}
-            className="ml-3 flex-row items-center justify-center rounded-lg p-3 bg-highlight-purple"
-          >
-            <Icon as={Calendar} size={16} color="white" />
-          </Pressable>
+            style={{ marginLeft: 12 }}
+          />
         )}
 
-        {/* Calendar Icon for AI Summary and Floating layouts */}
-        {isAiSummary && (
-          <Pressable
+        {/* Schedule Button - Floating Layout (top-right in floating layout) */}
+        {isFloating && (
+          <Button
+            variant="default"
+            size="default"
             onPress={onSchedulePress}
-            hitSlop={12}
-            className="ml-3 flex-row items-center justify-center rounded-lg p-3 bg-highlight-purple"
+            style={{ marginLeft: 12 }}
           >
-            <Icon as={Calendar} size={16} color="white" />
-          </Pressable>
+            My Schedule
+          </Button>
         )}
       </View>
 
-      {/* Next Up Section - For icon, none, floating, and ai summary layouts */}
-      {isIconOrFloatingOrNoneOrAiSummary && showNextUp && (
-        <View className="w-full flex-col gap-1 px-3">
+      {/* Next Up Section - For icon, row, none, and floating layouts */}
+      {showNextUp && (
+        <View
+          className={cn('w-full flex-col gap-1', isFloating ? 'px-3' : 'px-3')}
+        >
           <Text className="font-medium text-xs text-text-secondary">
             Next up
           </Text>
@@ -185,44 +169,22 @@ export function Greeting({
         </View>
       )}
 
-      {/* AI Summary Button - Purple to Red Gradient - Full Width */}
-      {isAiSummary && (
-        <LinearGradient
-          colors={['#573dab', '#f2353c']}
-          start={{ x: 0, y: 0 }}
-          end={{ x: 1, y: 0 }}
-          className="w-full items-center justify-center"
-          style={{
-            paddingVertical: 8,
-            borderBottomLeftRadius: 20,
-            borderBottomRightRadius: 20,
-          }}
-        >
-          <Pressable
-            onPress={onSchedulePress}
-            className="w-full items-center justify-center"
-            style={{ paddingVertical: 0 }}
-          >
-            <Text className="font-semibold text-sm text-white">
-              AI Summary for Today
-            </Text>
-          </Pressable>
-        </LinearGradient>
-      )}
+      {/* Divider and Button Container for Row Layout */}
+      {isRow && (
+        <View className="w-full flex-col">
+          {/* Divider Line */}
+          <View className="w-full border-t border-border-default" />
 
-      {/* Floating Button - Full width at bottom - Card color (white) */}
-      {isFloating && (
-        <View
-          className="w-full bg-surface-default"
-          style={{ borderBottomLeftRadius: 20, borderBottomRightRadius: 20 }}
-        >
+          {/* Row Button - Full width ghost button */}
           <Button
-            variant="outline"
+            variant="ghost"
             size="default"
-            showRightIcon
-            rightIcon={Calendar}
+            showLeftIcon
+            leftIcon={<Icon as={Calendar} size={16} />}
             onPress={onSchedulePress}
-            style={{ width: '100%' }}
+            style={{
+              width: '100%',
+            }}
           >
             View Schedule
           </Button>

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

@@ -0,0 +1,17 @@
+import figma from '@figma/code-connect';
+import { ProfileCard } from './ProfileCard';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=637-2039';
+
+figma.connect(ProfileCard, FIGMA_URL, {
+  example: () => (
+    <ProfileCard
+      userName="Marshall Mathers"
+      userID="3472732323"
+      avatarInitials="MM"
+      avatarType="image"
+      onPress={() => console.log('Profile card pressed')}
+    />
+  ),
+});

package/src/components/DataDisplay/ProfileCard/ProfileCard.tsx

@@ -0,0 +1,173 @@
+// @ts-nocheck
+import {
+  View as RNView,
+  Text as RNTextBase,
+  Pressable as RNPressable,
+  Image as RNImage,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ChevronRight } from 'lucide-react-native';
+
+import { cn } from '../../../lib/utils';
+
+// NativeWind interop (className -> style)
+const View = cssInterop(RNView, { className: 'style' });
+const RNText = cssInterop(RNTextBase, { className: 'style' });
+const Pressable = cssInterop(RNPressable, { className: 'style' });
+
+/* -----------------------------------------------------
+ * Variants
+ * --------------------------------------------------- */
+
+export const ProfileCardVariants = {} as const;
+
+const rootVariants = cva(
+  'w-full rounded-[20px] overflow-hidden flex-row items-center justify-between gap-3 px-3 py-3 bg-highlight-highlight-purple',
+  {
+    variants: {},
+    defaultVariants: {},
+  }
+);
+
+const profileCardStyle = (style?: any) => ({
+  ...style,
+});
+
+const contentContainerVariants = cva('flex-1 flex-row items-center gap-3');
+
+const infoColumnVariants = cva('flex-1 flex-col gap-1 justify-center');
+
+const nameTextVariants = cva(
+  "font-['Geist:SemiBold',sans-serif] font-semibold text-base text-white"
+);
+
+const idTextVariants = cva(
+  "font-['Geist:Medium',sans-serif] font-medium text-xs text-white opacity-70"
+);
+
+const trailingIconVariants = cva('items-center justify-center rounded-lg p-2');
+
+/* -----------------------------------------------------
+ * Props
+ * --------------------------------------------------- */
+
+export type ProfileCardProps = VariantProps<typeof rootVariants> & {
+  /** User name */
+  userName?: string;
+
+  /** User ID or identifier */
+  userID?: string;
+
+  /** Avatar initials */
+  avatarInitials?: string;
+
+  /** Avatar image source */
+  avatarSource?: any;
+
+  /** Avatar type */
+  avatarType?: 'initials' | 'image' | 'icon';
+
+  /** Callback when profile card is pressed */
+  onPress?: () => void;
+
+  /** Used to override the default root style. */
+  style?: StyleProp<ViewStyle>;
+
+  /** Used to locate this view in end-to-end tests. */
+  testID?: string;
+
+  /** Strictly block passing className */
+  className?: never;
+};
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function ProfileCard(props: ProfileCardProps) {
+  const {
+    userName = 'Marshall Mathers',
+    userID = '3472732323',
+    avatarInitials = 'MM',
+    avatarSource,
+    avatarType = 'initials',
+    onPress,
+    style,
+    testID,
+  } = props;
+
+  return (
+    <Pressable
+      testID={testID ?? 'profile-card'}
+      onPress={onPress}
+      className={cn(rootVariants())}
+      style={profileCardStyle(style)}
+      hitSlop={8}
+    >
+      <View
+        testID="profile-card-content"
+        className={cn(contentContainerVariants())}
+      >
+        {/* Avatar - Square */}
+        <View
+          testID="profile-card-avatar-wrapper"
+          className="rounded-[12px] overflow-hidden items-center justify-center bg-surface-subtle"
+          style={{
+            width: '80',
+            height: '80',
+          }}
+        >
+          {avatarType === 'image' && avatarSource ? (
+            <RNImage
+              testID="profile-card-avatar-image"
+              source={avatarSource}
+              className="w-full h-full"
+            />
+          ) : (
+            <RNText
+              testID="profile-card-avatar-initials"
+              className="font-semibold text-xl text-muted-foreground"
+            >
+              {avatarInitials}
+            </RNText>
+          )}
+        </View>
+
+        {/* User Info */}
+        <View testID="profile-card-info" className={cn(infoColumnVariants())}>
+          <RNText
+            testID="profile-card-name"
+            numberOfLines={1}
+            className={cn(nameTextVariants())}
+          >
+            {userName}
+          </RNText>
+
+          <RNText
+            testID="profile-card-id"
+            numberOfLines={1}
+            className={cn(idTextVariants())}
+          >
+            {userID}
+          </RNText>
+        </View>
+      </View>
+
+      {/* Trailing Icon */}
+      <View
+        testID="profile-card-trailing"
+        className={cn(trailingIconVariants())}
+      >
+        <ChevronRight size={16} color="white" />
+      </View>
+    </Pressable>
+  );
+}
+
+ProfileCard.displayName = 'ProfileCard';
+
+export { rootVariants };
+export type { ProfileCardProps };

package/src/components/DataDisplay/ProfileCard/index.ts

@@ -0,0 +1 @@
+export * from './ProfileCard';