@campxdev/react-native-blueprint 0.1.23 → 0.1.24

package/src/components/DataDisplay/Banner/Banner.tsx

@@ -2,15 +2,14 @@
 import React from 'react';
 import { View as RNView, Pressable as RNPressable } from 'react-native';
 import { cssInterop } from 'nativewind';
-import { LinearGradient } from 'expo-linear-gradient';
+import { cva } from 'class-variance-authority';
 import { Plus } from 'lucide-react-native';
+import { cn } from '../../../lib/utils';
 import { Text } from '../../Input/Text/Text';
 import { Badge } from '../Badge/Badge';
-import { Icon } from '../../ui/Icon';
 
 cssInterop(RNView, { className: 'style' });
 cssInterop(RNPressable, { className: 'style' });
-cssInterop(LinearGradient, { className: 'style' });
 
 const View = RNView as React.ComponentType<
   React.ComponentProps<typeof RNView> & { className?: string }
@@ -19,6 +18,96 @@ const Pressable = RNPressable as React.ComponentType<
   React.ComponentProps<typeof RNPressable> & { className?: string }
 >;
 
+// ============================================================================
+// VARIANTS
+// ============================================================================
+
+export const BannerVariants = {
+  style: ['solid', 'outline', 'subtle'] as const,
+} as const;
+
+type BannerStyle = (typeof BannerVariants.style)[number];
+
+const bannerVariants = cva(
+  'w-full flex-row items-center justify-between gap-4 rounded-lg p-4',
+  {
+    variants: {
+      style: {
+        solid: 'bg-highlight-highlight-purple',
+        outline: 'border border-border-default bg-surface-default',
+        subtle:
+          'border border-highlight-highlight-purple bg-highlight-highlight-purple-muted',
+      },
+    },
+    defaultVariants: {
+      style: 'solid',
+    },
+  }
+);
+
+const titleVariants = cva('font-semibold text-base', {
+  variants: {
+    style: {
+      solid: 'text-base-white',
+      outline: 'text-text-primary',
+      subtle: 'text-text-primary',
+    },
+  },
+  defaultVariants: {
+    style: 'solid',
+  },
+});
+
+const subtitleVariants = cva('font-medium text-xs opacity-70', {
+  variants: {
+    style: {
+      solid: 'text-base-white',
+      outline: 'text-text-primary',
+      subtle: 'text-text-primary',
+    },
+  },
+  defaultVariants: {
+    style: 'solid',
+  },
+});
+
+const actionItemVariants = cva('font-medium text-xs', {
+  variants: {
+    style: {
+      solid: 'text-base-white',
+      outline: 'text-text-primary',
+      subtle: 'text-text-primary',
+    },
+  },
+  defaultVariants: {
+    style: 'solid',
+  },
+});
+
+const dotVariants = cva('h-1 w-1 rounded-full', {
+  variants: {
+    style: {
+      solid: 'bg-base-white',
+      outline: 'bg-text-primary',
+      subtle: 'bg-text-primary',
+    },
+  },
+  defaultVariants: {
+    style: 'solid',
+  },
+});
+
+// ============================================================================
+// HELPER
+// ============================================================================
+
+function normalizeStyle(v: any): BannerStyle {
+  const s = String(v ?? 'solid').toLowerCase();
+  return (
+    ['solid', 'outline', 'subtle'].includes(s) ? s : 'solid'
+  ) as BannerStyle;
+}
+
 // ============================================================================
 // TYPES
 // ============================================================================
@@ -27,10 +116,20 @@ export interface BannerProps {
   title?: string;
   subtitle?: string;
   showBadge?: boolean;
+  badgeVariant?: string;
+  badgeSize?: string;
+  badgeShowLeftIcon?: boolean;
+  badgeShowRightIcon?: boolean;
   badgeText?: string;
+  actionItem1?: string;
+  actionItem2?: string;
+  moreLabel?: string;
   showActionItems?: boolean;
-  actionItems?: string[];
+  showActionItem2?: boolean;
+  showMoreLabel?: boolean;
   showTrailing?: boolean;
+  trailingIcon?: React.ReactNode;
+  style?: BannerStyle | 'Solid' | 'Outline' | 'Subtle';
   onTrailingPress?: () => void;
   testID?: string;
 }
@@ -43,49 +142,77 @@ function Banner({
   title = 'Banner Title',
   subtitle = 'Subtitle of the banner goes here',
   showBadge = true,
+  badgeVariant = 'secondary',
+  badgeSize = 'sm',
+  badgeShowLeftIcon = false,
+  badgeShowRightIcon = false,
   badgeText = 'Badge',
+  actionItem1 = 'Action Item',
+  actionItem2 = 'Action Item',
+  moreLabel = '+ N Items',
   showActionItems = true,
-  actionItems = ['Action Item', 'Action Item', 'Action Item'],
+  showActionItem2 = true,
+  showMoreLabel = true,
   showTrailing = true,
+  trailingIcon,
+  style = 'solid',
   onTrailingPress,
   testID,
 }: BannerProps) {
+  const st = normalizeStyle(style);
+  const defaultTrailingIcon = (
+    <Plus
+      size={16}
+      color={st === 'solid' ? 'white' : 'hsl(var(--foreground))'}
+    />
+  );
+
   return (
-    <LinearGradient
-      testID={testID}
-      colors={['#573dab', '#573dab33']}
-      start={{ x: 0, y: 0 }}
-      end={{ x: 1, y: 1 }}
-      className="w-full max-w-[400px] flex-row items-center justify-between gap-4 rounded-lg p-4"
-    >
+    <View testID={testID} className={cn(bannerVariants({ style: st }))}>
       {/* Main Content */}
       <View className="flex-1 flex-col gap-5">
         {/* Header with Title and Badge */}
         <View className="flex-col gap-1">
           <View className="flex-row items-center gap-2">
-            <Text className="font-semibold text-base text-white">{title}</Text>
+            <Text className={cn(titleVariants({ style: st }))}>{title}</Text>
             {showBadge && (
-              <Badge variant="default" size="sm">
+              <Badge
+                variant={badgeVariant}
+                size={badgeSize}
+                showLeftIcon={badgeShowLeftIcon}
+                showRightIcon={badgeShowRightIcon}
+              >
                 <Text>{badgeText}</Text>
               </Badge>
             )}
           </View>
-          <Text className="font-medium text-xs text-white opacity-70">
+          <Text className={cn(subtitleVariants({ style: st }))}>
             {subtitle}
           </Text>
         </View>
 
         {/* Action Items */}
-        {showActionItems && actionItems && actionItems.length > 0 && (
+        {showActionItems && (
           <View className="flex-row items-center gap-3">
-            {actionItems.map((item, index) => (
-              <React.Fragment key={index}>
-                {index > 0 && (
-                  <View className="h-1 w-1 rounded-full bg-white" />
-                )}
-                <Text className="font-medium text-xs text-white">{item}</Text>
-              </React.Fragment>
-            ))}
+            <Text className={cn(actionItemVariants({ style: st }))}>
+              {actionItem1}
+            </Text>
+            {showActionItem2 && (
+              <>
+                <View className={cn(dotVariants({ style: st }))} />
+                <Text className={cn(actionItemVariants({ style: st }))}>
+                  {actionItem2}
+                </Text>
+              </>
+            )}
+            {showMoreLabel && (
+              <>
+                <View className={cn(dotVariants({ style: st }))} />
+                <Text className={cn(actionItemVariants({ style: st }))}>
+                  {moreLabel}
+                </Text>
+              </>
+            )}
           </View>
         )}
       </View>
@@ -97,10 +224,10 @@ function Banner({
           hitSlop={12}
           className="flex-row items-center justify-center"
         >
-          <Icon as={Plus} size={16} color="white" />
+          {trailingIcon || defaultTrailingIcon}
         </Pressable>
       )}
-    </LinearGradient>
+    </View>
   );
 }
 

package/src/components/DataDisplay/CalendarItem/CalendarItem.tsx

@@ -1,11 +1,11 @@
 // @ts-nocheck
-import { cssInterop } from 'nativewind';
 import * as React from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { cssInterop } from 'nativewind';
 
-import { cn } from '../../../lib/utils';
 import { Badge, type BadgeProps } from '../../DataDisplay/Badge/Badge';
 import { Text } from '../../Input/Text/Text';
+import { cn } from '../../../lib/utils';
 
 cssInterop(View, { className: 'style' });
 

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

@@ -2,30 +2,34 @@ import figma from '@figma/code-connect';
 import { Card } from './Card';
 
 const FIGMA_URL =
-  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=111-406';
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=371-4790';
 
 figma.connect(Card, FIGMA_URL, {
   props: {
+    size: figma.enum('size', { lg: 'lg', sm: 'sm' }),
     showMedia: figma.boolean('Show Media'),
-    showHeader: figma.boolean('Show Header'),
     title: figma.string('Title'),
     showSubtitle: figma.boolean('Show Subtitle'),
     subtitle: figma.string('Subtitle'),
-    showBody: figma.boolean('Show Body'),
     showLeading: figma.boolean('Show Leading'),
     showFooterActions: figma.boolean('Show FooterActions'),
     showBadges: figma.boolean('Show Badges'),
+    showBody: figma.boolean('Show Body'),
+    showOverflowMenu: figma.boolean('Show CardOptions'),
   },
 
   example: (props) => (
     <Card
+      size={props.size}
       showMedia={props.showMedia}
       showSubtitle={props.showSubtitle}
       showBadges={props.showBadges}
       showFooterActions={props.showFooterActions}
       showLeading={props.showLeading}
+      showOverflowMenu={props.showOverflowMenu}
       title={props.title}
       subtitle={props.subtitle}
+      body="The card may contain body content which can be truncated to 1-2 lines."
       avatarInitials="AB"
       badge1Text="Badge 1"
       badge2Text="Badge 2"