@campxdev/react-native-blueprint 0.1.23 → 0.1.24

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

@@ -1,17 +1,25 @@
 // @ts-nocheck
-import { cva, type VariantProps } from 'class-variance-authority';
 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 { useTheme } from '../../shared/theme';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+import { useThemeColors } from '../../../lib/theme';
+
+// NativeWind interop (className -> style)
+cssInterop(Pressable, { className: 'style' });
+cssInterop(View, { className: 'style' });
+cssInterop(RNText, { className: 'style' });
 
 /**
  * ✅ Canonical values (match Figma)
@@ -22,38 +30,31 @@ export const ButtonVariants = {
 } as const;
 
 /**
- * Local lightweight placeholder icon
+ * Local lightweight placeholder icon (used in demos/tests)
+ * ✅ No inline styles (satisfies react-native/no-inline-styles)
  */
 function DummyIcon({ testID }: { testID?: string }) {
-  return (
-    <View
-      testID={testID}
-      style={{
-        width: 16,
-        height: 16,
-        borderRadius: 4,
-        backgroundColor: '#6a7282',
-      }}
-    />
-  );
+  return <View testID={testID} className="w-4 h-4 rounded bg-text-inverse" />;
 }
 
 /**
- * Returns squircle fill & stroke colors per variant from theme
+ * Returns squircle fill & stroke colors per variant from THEME tokens
  */
-function useVariantSquircleParams(variant: string, colors: any) {
+function useVariantSquircleParams(variant: string) {
+  const colors = useThemeColors();
+
   const map: Record<
     string,
     { fillColor: string; strokeColor: string; strokeWidth: number }
   > = {
     default: {
-      fillColor: colors.primary,
+      fillColor: colors.brandPrimary,
       strokeColor: 'transparent',
       strokeWidth: 0,
     },
     secondary: {
-      fillColor: colors.secondary,
-      strokeColor: colors.primary,
+      fillColor: colors.brandSecondary,
+      strokeColor: colors.border,
       strokeWidth: 1,
     },
     outline: {
@@ -81,34 +82,37 @@ function useVariantSquircleParams(variant: string, colors: any) {
   return map[variant] ?? map.default;
 }
 
-const CORNER_RADIUS = 12;
-const CORNER_SMOOTHING = 1;
+const CORNER_RADIUS = 8; // radius-lg
+const CORNER_SMOOTHING = 1; // maximum smoothing
 
 const buttonVariants = cva('flex-row items-center justify-center', {
   variants: {
     variant: {
-      default: 'gap-2',
-      secondary: 'gap-2',
-      outline: 'gap-2',
-      ghost: 'gap-2',
-      destructive: 'gap-2',
+      default: 'gap-2 active:opacity-90',
+      secondary: 'active:opacity-90',
+      outline: 'active:opacity-90',
+      ghost: 'active:opacity-90',
+      destructive: 'active:opacity-90',
       link: '',
     },
     size: {
+      // ✅ Figma-like sizing
       default: 'py-3 px-5',
-      lg: 'py-4 px-6',
-      icon: 'h-10 w-10',
+      lg: 'py-5 px-6',
+      icon: 'h-10 w-10 p-3 justify-center items-center',
     },
     disabled: {
       false: '',
       true: 'opacity-50',
     },
+    // Optional icon toggles still affect spacing correctly
     hasIcons: {
       false: '',
       true: 'gap-2',
     },
   },
   compoundVariants: [
+    // ✅ Link should not have forced height/padding
     { variant: 'link', size: 'default', className: 'h-auto p-0' },
     { variant: 'link', size: 'lg', className: 'h-auto p-0' },
     { variant: 'link', size: 'icon', className: 'h-auto p-0 w-auto' },
@@ -124,11 +128,11 @@ const buttonVariants = cva('flex-row items-center justify-center', {
 const buttonTextVariants = cva('font-semibold', {
   variants: {
     variant: {
-      default: 'text-white',
+      default: 'text-text-inverse',
       secondary: 'text-foreground',
       outline: 'text-foreground',
       ghost: 'text-foreground',
-      destructive: 'text-white',
+      destructive: 'text-primary-foreground',
       link: 'text-primary underline',
     },
     size: {
@@ -148,11 +152,21 @@ const buttonTextVariants = cva('font-semibold', {
   },
 });
 
+/**
+ * ✅ Strict rule: className must NOT be accepted as a prop.
+ * So we omit it explicitly from PressableProps.
+ */
 type PressablePropsWithoutClassName = Omit<PressableProps, 'style'> & {
   className?: never;
 };
 
-export type ButtonComponentProps = PressablePropsWithoutClassName &
+/**
+ * ✅ Backward compatible types:
+ * - supports boolean disabled (new)
+ * - supports 'True'/'False' and 'true'/'false' and '1'/'0' (old)
+ * - supports capitalized variant/size (old)
+ */
+export type ButtonProps = PressablePropsWithoutClassName &
   VariantProps<typeof buttonVariants> & {
     variant?:
       | (typeof ButtonVariants.variant)[number]
@@ -192,7 +206,7 @@ function normalizeDisabled(v: any): boolean {
   return s === 'true' || s === '1';
 }
 
-export function ButtonComponent(props: ButtonComponentProps) {
+export function Button(props: ButtonProps) {
   const {
     variant,
     size,
@@ -208,16 +222,17 @@ export function ButtonComponent(props: ButtonComponentProps) {
     ...rest
   } = props;
 
-  const { colors } = useTheme();
-
   const v = normalizeVariant(variant);
   const s = normalizeSize(size);
   const d = normalizeDisabled(disabled);
 
+  // ✅ icon button must be square and must NOT show label (prevents long button)
   const isIconOnly = s === 'icon';
+
+  // spacing only when icons exist
   const hasIcons = Boolean(showLeftIcon || showRightIcon);
 
-  const squircleParams = useVariantSquircleParams(v, colors);
+  const squircleParams = useVariantSquircleParams(v);
 
   const handlePress = React.useCallback(
     (e: GestureResponderEvent) => {
@@ -227,100 +242,9 @@ export function ButtonComponent(props: ButtonComponentProps) {
     [d, onPress]
   );
 
-  // Get text color based on variant
-  const getTextColor = () => {
-    switch (v) {
-      case 'default':
-        return colors.primaryForeground;
-      case 'secondary':
-        return colors.secondaryForeground;
-      case 'outline':
-        return colors.foreground;
-      case 'ghost':
-        return colors.foreground;
-      case 'destructive':
-        return colors.destructiveForeground;
-      case 'link':
-        return colors.primary;
-      default:
-        return colors.primaryForeground;
-    }
-  };
-
-  // Get size styles
-  const getSizeStyles = () => {
-    switch (s) {
-      case 'lg':
-        return { height: 52, paddingHorizontal: 16 };
-      case 'icon':
-        return { height: 40, width: 40 };
-      case 'default':
-      default:
-        return { height: 48, paddingHorizontal: 16 };
-    }
-  };
-
-  const sizeStyles = getSizeStyles();
-
-  if (v === 'link') {
-    // Link variant doesn't use SquircleView
-    return (
-      <Pressable
-        testID={testID ?? 'button'}
-        accessibilityRole="button"
-        accessibilityState={{ disabled: d }}
-        disabled={d}
-        onPress={handlePress}
-        style={[
-          {
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            opacity: d ? 0.5 : 1,
-          },
-          style,
-        ]}
-        {...rest}
-      >
-        {showLeftIcon ? (
-          leftIcon ? (
-            leftIcon
-          ) : (
-            <DummyIcon testID="button-left-icon" />
-          )
-        ) : null}
-
-        {!isIconOnly ? (
-          <RNText
-            testID="button-label"
-            style={{
-              color: getTextColor(),
-              fontSize: s === 'lg' ? 16 : 14,
-              fontWeight: '600',
-              textDecorationLine: 'underline',
-            }}
-            numberOfLines={1}
-            ellipsizeMode="tail"
-          >
-            {children}
-          </RNText>
-        ) : null}
-
-        {showRightIcon ? (
-          rightIcon ? (
-            rightIcon
-          ) : (
-            <DummyIcon testID="button-right-icon" />
-          )
-        ) : null}
-      </Pressable>
-    );
-  }
-
   return (
     <View style={style}>
       <SquircleView
-        style={sizeStyles}
         squircleParams={{
           cornerRadius: CORNER_RADIUS,
           cornerSmoothing: CORNER_SMOOTHING,
@@ -333,32 +257,26 @@ export function ButtonComponent(props: ButtonComponentProps) {
           accessibilityState={{ disabled: d }}
           disabled={d}
           onPress={handlePress}
-          style={{
-            flex: 1,
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: hasIcons ? 8 : 0,
-            opacity: d ? 0.5 : 1,
-          }}
+          className={cn(
+            buttonVariants({
+              variant: v,
+              size: s,
+              disabled: d,
+              hasIcons,
+            })
+          )}
           {...rest}
         >
-          {showLeftIcon ? (
-            leftIcon ? (
-              leftIcon
-            ) : (
-              <DummyIcon testID="button-left-icon" />
-            )
-          ) : null}
+          {showLeftIcon
+            ? leftIcon || <DummyIcon testID="button-left-icon" />
+            : null}
 
           {!isIconOnly ? (
             <RNText
               testID="button-label"
-              style={{
-                color: getTextColor(),
-                fontSize: s === 'lg' ? 16 : 14,
-                fontWeight: '600',
-              }}
+              className={cn(
+                buttonTextVariants({ variant: v, size: s, disabled: d })
+              )}
               numberOfLines={1}
               ellipsizeMode="tail"
             >
@@ -366,19 +284,15 @@ export function ButtonComponent(props: ButtonComponentProps) {
             </RNText>
           ) : null}
 
-          {showRightIcon ? (
-            rightIcon ? (
-              rightIcon
-            ) : (
-              <DummyIcon testID="button-right-icon" />
-            )
-          ) : null}
+          {showRightIcon
+            ? rightIcon || <DummyIcon testID="button-right-icon" />
+            : null}
         </Pressable>
       </SquircleView>
     </View>
   );
 }
 
-ButtonComponent.displayName = 'Button';
+Button.displayName = 'Button';
 
-export { ButtonComponent as Button, buttonTextVariants, buttonVariants };
+export { buttonTextVariants, buttonVariants };

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 ===