@campxdev/react-native-blueprint 0.1.20 → 0.1.24

package/src/components/Input/Button/Button.tsx

@@ -1,20 +1,20 @@
 // @ts-nocheck
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cssInterop } from 'nativewind';
 import * as React from 'react';
 import {
   Pressable,
-  Text as RNText,
   View,
+  Text as RNText,
   type GestureResponderEvent,
-  type PressableProps,
   type StyleProp,
   type ViewStyle,
+  type PressableProps,
 } from 'react-native';
+import { cssInterop } from 'nativewind';
 import { SquircleView } from 'react-native-figma-squircle';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { useThemeColors } from '../../../lib/theme';
 import { cn } from '../../../lib/utils';
+import { useThemeColors } from '../../../lib/theme';
 
 // NativeWind interop (className -> style)
 cssInterop(Pressable, { className: 'style' });
@@ -48,13 +48,13 @@ function useVariantSquircleParams(variant: string) {
     { fillColor: string; strokeColor: string; strokeWidth: number }
   > = {
     default: {
-      fillColor: colors.brandSecondary,
+      fillColor: colors.brandPrimary,
       strokeColor: 'transparent',
       strokeWidth: 0,
     },
     secondary: {
       fillColor: colors.brandSecondary,
-      strokeColor: colors.brandPrimary,
+      strokeColor: colors.border,
       strokeWidth: 1,
     },
     outline: {
@@ -99,7 +99,7 @@ const buttonVariants = cva('flex-row items-center justify-center', {
       // ✅ Figma-like sizing
       default: 'py-3 px-5',
       lg: 'py-5 px-6',
-      icon: 'h-10 w-10',
+      icon: 'h-10 w-10 p-3 justify-center items-center',
     },
     disabled: {
       false: '',
@@ -178,6 +178,8 @@ export type ButtonProps = PressablePropsWithoutClassName &
 
     showLeftIcon?: boolean;
     showRightIcon?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
 
     style?: StyleProp<ViewStyle>;
     testID?: string;
@@ -211,6 +213,8 @@ export function Button(props: ButtonProps) {
     disabled,
     showLeftIcon,
     showRightIcon,
+    leftIcon,
+    rightIcon,
     style,
     testID,
     children,
@@ -263,7 +267,9 @@ export function Button(props: ButtonProps) {
           )}
           {...rest}
         >
-          {showLeftIcon ? <DummyIcon testID="button-left-icon" /> : null}
+          {showLeftIcon
+            ? leftIcon || <DummyIcon testID="button-left-icon" />
+            : null}
 
           {!isIconOnly ? (
             <RNText
@@ -278,7 +284,9 @@ export function Button(props: ButtonProps) {
             </RNText>
           ) : null}
 
-          {showRightIcon ? <DummyIcon testID="button-right-icon" /> : null}
+          {showRightIcon
+            ? rightIcon || <DummyIcon testID="button-right-icon" />
+            : null}
         </Pressable>
       </SquircleView>
     </View>

package/src/components/Navigation/Appbar/AppBar.figma.tsx

@@ -21,9 +21,11 @@ const FIGMA_URL =
  */
 figma.connect(AppBar, FIGMA_URL, {
   props: {
-    variant: figma.enum('variant', {
-      default: 'default',
-      home: 'home',
+    type: figma.enum('type', {
+      'context': 'context',
+      'brand': 'brand',
+      'brand+switcher': 'brand+switcher',
+      'context+switcher': 'context+switcher',
     }),
     showLeading: figma.boolean('Show Leading'),
     showTrailing: figma.boolean('Show Trailing'),
@@ -37,11 +39,20 @@ figma.connect(AppBar, FIGMA_URL, {
         search: 'search',
       }),
     }),
-    logo: figma.instance('Logo'),
+    logo: figma.nestedProps('Logo', {
+      mode: figma.enum('mode', {
+        light: 'light',
+        dark: 'dark',
+      }),
+      brand: figma.enum('brand', {
+        campx: 'campx',
+        winnify: 'winnify',
+      }),
+    }),
   },
   example: (props) => (
     <AppBar
-      variant={props.variant}
+      type={props.type}
       title={props.title}
       subtitle={props.subtitle}
       showLeading={props.showLeading}
@@ -49,9 +60,10 @@ figma.connect(AppBar, FIGMA_URL, {
       showSubtitle={props.showSubtitle}
       showHeaderBlock={props.showHeaderBlock}
       headerType={props.headerType.type}
+      logoMode={props.logo.mode}
+      logoBrand={props.logo.brand}
       onLeadingPress={() => {}}
       onTrailingPress={() => {}}
     />
   ),
 });
-i;

package/src/components/Navigation/Appbar/AppBar.tsx

@@ -30,10 +30,16 @@ const Pressable = RNPressable as any;
  * --------------------------------------------------- */
 
 export type AppBarVariant = 'default' | 'home';
+export type AppBarType =
+  | 'context'
+  | 'brand'
+  | 'brand+switcher'
+  | 'context+switcher';
 export type HeaderBlockType = 'tabs' | 'search';
 
 export interface AppBarProps {
   variant?: AppBarVariant;
+  type?: AppBarType;
 
   title?: string;
   subtitle?: string;
@@ -51,9 +57,13 @@ export interface AppBarProps {
   leadingIcon?: React.ReactNode;
   trailingIcon?: React.ReactNode;
 
-  /** For home variant logo */
+  /** For home variant logo or brand type */
   logoSource?: ImageSourcePropType;
 
+  /** Avatar for switcher types (brand+switcher, context+switcher) */
+  switcherAvatar?: React.ReactNode;
+  onSwitcherPress?: () => void;
+
   /** Whether to wrap with SafeAreaView for status bar */
   useSafeArea?: boolean;
 
@@ -90,6 +100,7 @@ function HeaderBlock({ type }: { type: 'tabs' | 'search' }) {
 export function AppBar(props: AppBarProps) {
   const {
     variant = 'default',
+    type = 'context',
     title = 'Page Title',
     subtitle = 'This is the page Subtitle',
 
@@ -107,6 +118,8 @@ export function AppBar(props: AppBarProps) {
     trailingIcon,
 
     logoSource,
+    switcherAvatar,
+    onSwitcherPress,
 
     useSafeArea = true,
 
@@ -116,6 +129,8 @@ export function AppBar(props: AppBarProps) {
   const { colorScheme } = useColorScheme();
   const isDark = colorScheme === 'dark';
   const isHome = variant === 'home';
+  const isBrandType = type === 'brand' || type === 'brand+switcher';
+  const hasSwitcher = type === 'brand+switcher' || type === 'context+switcher';
 
   const content = (
     <View
@@ -139,7 +154,22 @@ export function AppBar(props: AppBarProps) {
             </Pressable>
           )}
 
-          {variant === 'default' && (
+          {/* Logo for brand+switcher (on left side) */}
+          {type === 'brand+switcher' && (
+            <View testID="appbar-logo-left">
+              {logoSource ? (
+                <Image
+                  source={logoSource}
+                  resizeMode="contain"
+                  className="w-8 h-8"
+                />
+              ) : (
+                <View className="w-8 h-8 bg-surface-subtle rounded-lg" />
+              )}
+            </View>
+          )}
+
+          {!isBrandType && (
             <View className="gap-1">
               <Text
                 testID="appbar-title"
@@ -160,8 +190,8 @@ export function AppBar(props: AppBarProps) {
           )}
         </View>
 
-        {/* CENTER (Home logo) */}
-        {isHome && (
+        {/* CENTER (Home logo or Brand logo - only for 'brand' type) */}
+        {(isHome || type === 'brand') && (
           <View
             testID="appbar-logo"
             className="flex-1 items-center justify-center"
@@ -179,15 +209,30 @@ export function AppBar(props: AppBarProps) {
         )}
 
         {/* RIGHT */}
-        {showTrailing && (
-          <Pressable
-            testID="appbar-trailing"
-            onPress={onTrailingPress}
-            accessibilityRole="button"
-          >
-            {trailingIcon ?? <View className="w-4 h-4" />}
-          </Pressable>
-        )}
+        <View className="flex-row items-center gap-3">
+          {showTrailing && (
+            <Pressable
+              testID="appbar-trailing"
+              onPress={onTrailingPress}
+              accessibilityRole="button"
+            >
+              {trailingIcon ?? <View className="w-4 h-4" />}
+            </Pressable>
+          )}
+          {hasSwitcher && (
+            <Pressable
+              testID="appbar-switcher"
+              onPress={onSwitcherPress}
+              className="flex-row items-center gap-2 px-2 py-1 rounded-full border border-border-default"
+              accessibilityRole="button"
+            >
+              {switcherAvatar ?? (
+                <View className="w-8 h-8 bg-surface-subtle rounded-full" />
+              )}
+              <View className="w-4 h-4" />
+            </Pressable>
+          )}
+        </View>
       </View>
 
       {/* HEADER BLOCK */}

package/src/components/Navigation/Popover/Popover.tsx

@@ -1,13 +1,13 @@
 // @ts-nocheck
 import * as React from 'react';
-import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import { View, Text, type StyleProp, type ViewStyle } from 'react-native';
 
 import { Button } from '../../Input/Button/Button';
 import {
-  PopoverContainer,
-  PopoverContent,
   Popover as PopoverPrimitive,
   PopoverTrigger,
+  PopoverContent,
+  PopoverContainer,
 } from '../../Layout/PopoverContainer/Popover-Container';
 
 /**

package/src/components/ui/index.ts

@@ -30,6 +30,7 @@ export * from '../DataDisplay/Banner/Banner';
 export * from '../DataDisplay/BannerRow/BannerRow';
 export * from '../DataDisplay/CalendarItem/CalendarItem';
 export * from '../DataDisplay/Card/Card';
+export * from '../DataDisplay/ChatBubble/ChatBubble';
 export * from '../DataDisplay/Chips/Chips';
 export * from '../DataDisplay/ChipsRow/ChipsRow';
 export * from '../DataDisplay/DataCard/DataCard';
@@ -37,6 +38,7 @@ export * from '../DataDisplay/Datalist/Datalist';
 export * from '../DataDisplay/DataListItem/DataListItem';
 export * from '../DataDisplay/FeedCard/FeedCard';
 export * from '../DataDisplay/Greeting/Greeting';
+export * from '../DataDisplay/ProfileCard/ProfileCard';
 export * from '../DataDisplay/MonthCalendar/MonthCalendar';
 export * from '../DataDisplay/Separator/Separator';
 export * from '../DataDisplay/Skeleton/Skeleton';

package/src/lib/theme.ts

@@ -46,8 +46,8 @@ export const THEME = {
     accentForeground: 'hsl(0, 0%, 100%)', // #FFFFFF
 
     // === 6. BORDERS ===
-    border: 'hsl(214, 32%, 84%)', // #CBD5E1
-    input: 'hsl(214, 32%, 84%)', // #CBD5E1
+    border: 'hsl(210, 13%, 80%)', // #CBD5E1
+    input: 'hsl(210, 13%, 80%)', // #CBD5E1
     ring: 'hsl(200, 13%, 11%)', // #161A1D - Same as primary
 
     // === 7. HIGHLIGHTS ===

package/src/patterns/pattern-components/AccountPattern/AccountPattern.figma.tsx

@@ -0,0 +1,193 @@
+import figma from '@figma/code-connect';
+import { AccountPattern } from './AccountPattern';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/YTb27Onq7Zk8OV16fHptxJ/Campx-App?node-id=417-194764';
+
+/**
+ * AccountPattern - Account/Profile screen layout pattern
+ *
+ * Use cases:
+ * - User account and profile management screens
+ * - Settings and preferences pages
+ * - Account information dashboards
+ * - Categorized account options (Academics, Finance, Utilities)
+ *
+ * Features:
+ * - User profile card at the top with name and ID
+ * - Multiple grouped sections with data list items
+ * - Support for custom sections (Academics, Finance, Utilities, etc.)
+ * - Full customization of section items and properties
+ * - Scrollable layout for long content
+ * - All sections independently configurable
+ *
+ * Customization:
+ * - Show/hide profile card
+ * - Customize user profile information
+ * - Add, remove, or customize sections
+ * - Configure each item's visibility toggles and actions
+ * - Set up callbacks for profile and item interactions
+ * - Adapt content based on user role or backend data
+ */
+figma.connect(AccountPattern, FIGMA_URL, {
+  example: () => (
+    <AccountPattern
+      showProfileCard={true}
+      userName="Marshall Mathers"
+      userID="3472732323"
+      avatarInitials="MM"
+      avatarType="image"
+      sections={[
+        {
+          id: 'academics',
+          title: 'Academics',
+          items: [
+            {
+              id: '1',
+              title: 'Data List Row Title',
+              subtitle: 'Data List Row Subtitle',
+              meta: 'Meta Content',
+              density: 'comfortable',
+              state: 'default',
+              showSubtitle: true,
+              showLeading: true,
+              showTrailing: true,
+              showDivider: true,
+              leadingImage: { uri: 'https://example.com/avatar.png' },
+            },
+            {
+              id: '2',
+              title: 'Data List Row Title',
+              subtitle: 'Data List Row Subtitle',
+              meta: 'Meta Content',
+              density: 'comfortable',
+              state: 'default',
+              showSubtitle: true,
+              showLeading: true,
+              showTrailing: true,
+              showDivider: true,
+              leadingImage: { uri: 'https://example.com/avatar.png' },
+            },
+            {
+              id: '3',
+              title: 'Data List Row Title',
+              subtitle: 'Data List Row Subtitle',
+              meta: 'Meta Content',
+              density: 'comfortable',
+              state: 'default',
+              showSubtitle: true,
+              showLeading: true,
+              showTrailing: true,
+              showDivider: true,
+              leadingImage: { uri: 'https://example.com/avatar.png' },
+            },
+            {
+              id: '4',
+              title: 'Data List Row Title',
+              subtitle: 'Data List Row Subtitle',
+              meta: 'Meta Content',
+              density: 'comfortable',
+              state: 'default',
+              showSubtitle: true,
+              showLeading: true,
+              showTrailing: true,
+              showDivider: true,
+              leadingImage: { uri: 'https://example.com/avatar.png' },
+            },
+          ],
+        },
+        {
+          id: 'finance',
+          title: 'Finance',
+          items: [
+            {
+              id: '5',
+              title: 'Data List Row Title',
+              subtitle: 'Data List Row Subtitle',
+              meta: 'Meta Content',
+              density: 'comfortable',
+              state: 'default',
+              showSubtitle: true,
+              showLeading: true,
+              showTrailing: true,
+              showDivider: true,
+              leadingImage: { uri: 'https://example.com/avatar.png' },
+            },
+            {
+              id: '6',
+              title: 'Data List Row Title',
+              subtitle: 'Data List Row Subtitle',
+              meta: 'Meta Content',
+              density: 'comfortable',
+              state: 'default',
+              showSubtitle: true,
+              showLeading: true,
+              showTrailing: true,
+              showDivider: true,
+              leadingImage: { uri: 'https://example.com/avatar.png' },
+            },
+            {
+              id: '7',
+              title: 'Data List Row Title',
+              subtitle: 'Data List Row Subtitle',
+              meta: 'Meta Content',
+              density: 'comfortable',
+              state: 'default',
+              showSubtitle: true,
+              showLeading: true,
+              showTrailing: true,
+              showDivider: true,
+              leadingImage: { uri: 'https://example.com/avatar.png' },
+            },
+          ],
+        },
+        {
+          id: 'utilities',
+          title: 'Utilities',
+          items: [
+            {
+              id: '8',
+              title: 'Data List Row Title',
+              subtitle: 'Data List Row Subtitle',
+              meta: 'Meta Content',
+              density: 'comfortable',
+              state: 'default',
+              showSubtitle: true,
+              showLeading: true,
+              showTrailing: true,
+              showDivider: true,
+              leadingImage: { uri: 'https://example.com/avatar.png' },
+            },
+            {
+              id: '9',
+              title: 'Data List Row Title',
+              subtitle: 'Data List Row Subtitle',
+              meta: 'Meta Content',
+              density: 'comfortable',
+              state: 'default',
+              showSubtitle: true,
+              showLeading: true,
+              showTrailing: true,
+              showDivider: true,
+              leadingImage: { uri: 'https://example.com/avatar.png' },
+            },
+            {
+              id: '10',
+              title: 'Data List Row Title',
+              subtitle: 'Data List Row Subtitle',
+              meta: 'Meta Content',
+              density: 'comfortable',
+              state: 'default',
+              showSubtitle: true,
+              showLeading: true,
+              showTrailing: true,
+              showDivider: true,
+              leadingImage: { uri: 'https://example.com/avatar.png' },
+            },
+          ],
+        },
+      ]}
+      onProfilePress={() => console.log('Profile pressed')}
+    />
+  ),
+});