@campxdev/react-native-blueprint 0.1.13 → 0.1.15

package/src/components/Navigation/Dialog/Dialog.tsx

@@ -0,0 +1,249 @@
+import {
+  View,
+  Text as RNText,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva } from 'class-variance-authority';
+import { X } from 'lucide-react-native';
+
+import { cn } from '../../../lib/utils';
+import { Button } from '../../Input/Button/Button';
+import { TextField } from '../../Input/TextField/Textfield';
+
+// NativeWind interop (className -> style)
+cssInterop(View, { className: 'style' });
+cssInterop(RNText, { className: 'style' });
+
+// Internal components with loose typing to allow className passing internally
+// while keeping the public API strict.
+const StyledView = View as any;
+const StyledText = RNText as any;
+
+/* -----------------------------------------------------
+ * DialogContent with different content types
+ * --------------------------------------------------- */
+interface DialogContentProps {
+  testID?: string;
+  type?: 'placeholder' | 'form' | 'text' | 'list';
+}
+
+function DialogContent({ testID, type = 'placeholder' }: DialogContentProps) {
+  switch (type) {
+    case 'form':
+      return (
+        <StyledView testID={testID} className="w-full gap-4">
+          <TextField
+            state="default"
+            content="placeholder"
+            type="text"
+            showLabel={true}
+            showHelpText={true}
+            showLeftIcon={false}
+            showRightIcon={false}
+            label="Email Address"
+            helpText="Enter your email address"
+            inputProps={{
+              placeholder: 'name@example.com',
+            }}
+          />
+        </StyledView>
+      );
+    case 'text':
+      return (
+        <StyledView testID={testID} className="w-full">
+          <StyledText className="text-base text-text-primary text-left leading-6">
+            This is a text content area. You can display detailed information,
+            instructions, or any text-based content here.
+          </StyledText>
+        </StyledView>
+      );
+    case 'list':
+      return (
+        <StyledView testID={testID} className="w-full gap-2">
+          <StyledView className="gap-2">
+            <StyledView className="py-2 border-b border-gray-200">
+              <StyledText className="text-base text-text-primary">
+                Item 1
+              </StyledText>
+            </StyledView>
+            <StyledView className="py-2 border-b border-gray-200">
+              <StyledText className="text-base text-text-primary">
+                Item 2
+              </StyledText>
+            </StyledView>
+            <StyledView className="py-2">
+              <StyledText className="text-base text-text-primary">
+                Item 3
+              </StyledText>
+            </StyledView>
+          </StyledView>
+        </StyledView>
+      );
+    case 'placeholder':
+    default:
+      return (
+        <StyledView testID={testID} className="w-full">
+          <StyledText className="text-base text-text-primary text-left">
+            Placeholder Content
+          </StyledText>
+        </StyledView>
+      );
+  }
+}
+
+/* -----------------------------------------------------
+ * Variants
+ * --------------------------------------------------- */
+
+const rootVariants = cva(
+  'self-stretch flex-col items-start rounded-[20px] bg-surface-default px-5 py-5 gap-5'
+);
+
+const headerWrapVariants = cva('w-full flex-col items-start gap-1');
+const headerRowVariants = cva(
+  'w-full flex-row items-start justify-between gap-2'
+);
+const headerTextVariants = cva('flex-1 flex-col items-start gap-2');
+
+const titleVariants = cva('text-2xl font-bold text-text-primary');
+const descriptionVariants = cva('text-sm font-medium text-text-secondary');
+
+const contentWrapVariants = cva('w-full flex-col items-start');
+
+const footerVariants = cva('w-full flex-row items-start gap-3');
+
+/* -----------------------------------------------------
+ * Props
+ * --------------------------------------------------- */
+
+export interface DialogProps {
+  // Header
+  showDialogHeader?: boolean;
+  showTitle?: boolean;
+  title?: string;
+  showDescription?: boolean;
+  description?: string;
+  showCloseIcon?: boolean;
+
+  // Footer
+  showFooterActions?: boolean;
+
+  // Content
+  dialogContentType?: 'placeholder' | 'form' | 'text' | 'list';
+
+  /** Used to override the default root style. */
+  style?: StyleProp<ViewStyle>;
+
+  /** Used to locate this view in end-to-end tests. */
+  testID?: string;
+
+  /** Prevent passing className */
+  className?: never;
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function Dialog(props: DialogProps) {
+  const {
+    title,
+    description,
+    showFooterActions = true,
+    showCloseIcon = true,
+    showDescription = true,
+    showDialogHeader = true,
+    showTitle = true,
+    dialogContentType = 'placeholder',
+    style,
+    testID,
+  } = props;
+
+  return (
+    <StyledView
+      testID={testID ?? 'dialog'}
+      className={cn(rootVariants())}
+      style={style}
+    >
+      {showDialogHeader ? (
+        <StyledView testID="dialog-header" className={cn(headerWrapVariants())}>
+          <StyledView
+            testID="dialog-header-row"
+            className={cn(headerRowVariants())}
+          >
+            <StyledView
+              testID="dialog-header-text"
+              className={cn(headerTextVariants())}
+            >
+              {showTitle ? (
+                <StyledText
+                  testID="dialog-title"
+                  className={cn(titleVariants())}
+                >
+                  {title}
+                </StyledText>
+              ) : null}
+
+              {showDescription ? (
+                <StyledText
+                  testID="dialog-description"
+                  className={cn(descriptionVariants())}
+                >
+                  {description}
+                </StyledText>
+              ) : null}
+            </StyledView>
+
+            {showCloseIcon ? (
+              <StyledView
+                testID="dialog-close"
+                className="items-center justify-center p-1"
+              >
+                <X size={20} color={'#121212'} />
+              </StyledView>
+            ) : null}
+          </StyledView>
+        </StyledView>
+      ) : null}
+
+      <StyledView testID="dialog-content" className={cn(contentWrapVariants())}>
+        <DialogContent
+          testID="dialog-content-placeholder"
+          type={dialogContentType}
+        />
+      </StyledView>
+
+      {showFooterActions ? (
+        <StyledView testID="dialog-footer" className={cn(footerVariants())}>
+          <Button
+            testID="dialog-primary"
+            disabled={false}
+            size="default"
+            variant="default"
+            showLeftIcon={false}
+            showRightIcon={false}
+          >
+            PrimaryAction
+          </Button>
+
+          <Button
+            testID="dialog-secondary"
+            disabled={false}
+            size="default"
+            variant="outline"
+            showLeftIcon={false}
+            showRightIcon={false}
+          >
+            SecondaryAction
+          </Button>
+        </StyledView>
+      ) : null}
+    </StyledView>
+  );
+}
+
+Dialog.displayName = 'Dialog';
+
+export { rootVariants };

package/src/components/Navigation/FloatingAction/Floating-Action.figma.tsx

@@ -0,0 +1,30 @@
+import figma from '@figma/code-connect';
+import { FloatingActionButton } from './Floating-Action';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=202-567';
+
+figma.connect(FloatingActionButton, FIGMA_URL, {
+  props: {
+    size: figma.enum('size', {
+      sm: 'sm',
+      md: 'md',
+      lg: 'lg',
+    }),
+
+    variant: figma.enum('variant', {
+      default: 'default',
+      disabled: 'disabled',
+    }),
+
+    label: figma.boolean('label'),
+  },
+
+  example: (props) => (
+    <FloatingActionButton
+      size={props.size}
+      variant={props.variant}
+      label={props.label}
+    />
+  ),
+});

package/src/components/Navigation/FloatingAction/Floating-Action.tsx

@@ -0,0 +1,78 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  Text,
+  TouchableOpacity,
+  Image,
+  type TouchableOpacityProps,
+} from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cssInterop } from 'nativewind';
+import { cn } from '../../../lib/utils';
+
+cssInterop(Image, { className: 'style' });
+
+const floatingActionVariants = cva(
+  'flex-row items-center justify-center rounded-rounded bg-brand-primary gap-sm',
+  {
+    variants: {
+      size: {
+        sm: 'h-[48px] p-md',
+        md: 'h-[60px] px-[18px] py-md',
+        lg: 'w-[80px] h-[80px] p-md aspect-square',
+      },
+      variant: {
+        default: 'opacity-100',
+        disabled: 'opacity-40',
+      },
+    },
+    defaultVariants: {
+      size: 'sm',
+      variant: 'default',
+    },
+  }
+);
+
+export interface FloatingActionButtonProps
+  extends TouchableOpacityProps,
+    VariantProps<typeof floatingActionVariants> {
+  label?: boolean;
+}
+
+export function FloatingActionButton({
+  label = false,
+  size = 'sm',
+  variant = 'default',
+  className,
+  ...props
+}: FloatingActionButtonProps) {
+  const isDisabled = variant === 'disabled';
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      disabled={isDisabled}
+      className={cn(floatingActionVariants({ size, variant }), className)}
+      {...props}
+    >
+      <Image
+        source={{
+          uri:
+            size === 'sm'
+              ? 'https://www.figma.com/api/mcp/asset/0c75c1c6-b436-42d0-9f9f-c51df3ee2c29'
+              : 'https://www.figma.com/api/mcp/asset/67a84733-aac5-4c1c-b280-959f74aaac9e',
+        }}
+        className="w-[16px] h-[16px]"
+        resizeMode="contain"
+      />
+
+      {label && (
+        <Text className="text-text-inverse text-[14px] font-semibold ml-2">
+          Create
+        </Text>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+export default FloatingActionButton;

package/src/components/Navigation/Navbar/NavBar.figma.tsx

@@ -0,0 +1,41 @@
+import { NavBar } from './NavBar';
+import type { NavBarProps, NavBarItemConfig } from './NavBar';
+import { figma } from '@figma/code-connect';
+
+export type { NavBarProps, NavBarItemConfig };
+
+figma.connect(
+  NavBar,
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=217-614',
+  {
+    example: () => (
+      <NavBar
+        activeIndex={0}
+        showCenterGlow={true}
+        items={[
+          {
+            key: 'dashboard',
+            icon: /* <DashboardIcon /> */ null,
+            activeIcon: /* <DashboardIconActive /> */ null,
+          },
+          {
+            key: 'analytics',
+            icon: /* <AnalyticsIcon /> */ null,
+          },
+          {
+            key: 'chat',
+            icon: /* <ChatIcon /> */ null,
+          },
+          {
+            key: 'notifications',
+            icon: /* <BellIcon /> */ null,
+          },
+          {
+            key: 'profile',
+            icon: /* <UserIcon /> */ null,
+          },
+        ]}
+      />
+    ),
+  }
+);

package/src/components/Navigation/Navbar/NavBar.tsx

@@ -0,0 +1,214 @@
+import * as React from 'react';
+import {
+  View as RNView,
+  Pressable as RNPressable,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { cssInterop } from 'nativewind';
+import Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg';
+import { SquircleView } from 'react-native-figma-squircle';
+import { cn } from '../../../lib/utils';
+import { CORNER_SMOOTHING, RADIUS } from '../../../lib/cornerRadius';
+
+/* -----------------------------------------------------
+ * NavBar Design Token References
+ * Maps CSS variable names to their values for SquircleView
+ * (SquircleView can't resolve CSS vars directly)
+ * --------------------------------------------------- */
+const NAVBAR_TOKENS = {
+  // --colors-base-black
+  background: 'var(--colors-base-black)',
+  backgroundValue: '#121212',
+  // --colors-border-default
+  border: 'var(--colors-border-default)',
+  borderValue: '#CBD5E1',
+  // --radius-5 / --radius-lg (20px)
+  radius: RADIUS.R5,
+} as const;
+
+// NativeWind interop (className -> style)
+cssInterop(RNView, { className: 'style' });
+cssInterop(RNPressable, { className: 'style' });
+
+const View = RNView as React.ComponentType<any>;
+const Pressable = RNPressable as React.ComponentType<any>;
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+export type NavBarItemConfig = {
+  /** Unique key for the item */
+  key: string;
+  /** Icon component to render */
+  icon: React.ReactNode;
+  /** Active state icon (optional, uses icon if not provided) */
+  activeIcon?: React.ReactNode;
+  /** Label text (optional) */
+  label?: string;
+  /** Whether item is disabled */
+  disabled?: boolean;
+  /** Press handler */
+  onPress?: () => void;
+  /** Test ID for testing */
+  testID?: string;
+};
+
+export interface NavBarProps {
+  /** Array of navigation items (icons are passed here) */
+  items: NavBarItemConfig[];
+  /** Index of the currently active item */
+  activeIndex?: number;
+  /** Whether to show the center glow effect */
+  showCenterGlow?: boolean;
+  /** Style override */
+  style?: StyleProp<ViewStyle>;
+  /** Additional className */
+  className?: string;
+  /** Test ID */
+  testID?: string;
+}
+
+/* -----------------------------------------------------
+ * Center Glow SVG Component
+ * Uses --colors-highlight-highlight-purple token
+ * Arc curves downward (rotated 180°)
+ * --------------------------------------------------- */
+function CenterGlow({
+  width = 52,
+  height = 28,
+}: {
+  width?: number;
+  height?: number;
+}) {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 52 28" fill="none">
+      <Defs>
+        <LinearGradient
+          id="glowGradient"
+          x1="26"
+          y1="28"
+          x2="26"
+          y2="0"
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop offset="0" stopColor="#8B5CF6" stopOpacity="1" />
+          <Stop offset="0.5" stopColor="#7C3AED" stopOpacity="0.7" />
+          <Stop offset="1" stopColor="#573dab" stopOpacity="0" />
+        </LinearGradient>
+      </Defs>
+      <Path
+        d="M0 0 C0 16 12 28 26 28 C40 28 52 16 52 0"
+        stroke="url(#glowGradient)"
+        strokeWidth="3"
+        fill="none"
+      />
+    </Svg>
+  );
+}
+
+/* -----------------------------------------------------
+ * NavBar Component
+ *
+ * Design tokens used (from global.css):
+ * - Background: bg-[--colors-base-black] (#121212)
+ * - Border: border-[--colors-border-default] (#CBD5E1)
+ * - Padding: py-[--spacing-xl] (20px), px-[--space-8] (32px)
+ * - Border radius: rounded-[--radius-xl] (20px)
+ * - Active indicator: bg-[--colors-highlight-alert-red] (#F2353C)
+ * --------------------------------------------------- */
+function NavBarComponent(props: NavBarProps) {
+  const {
+    items = [],
+    activeIndex = 0,
+    showCenterGlow = true,
+    style,
+    className,
+    testID,
+  } = props;
+
+  const centerIndex = Math.floor(items.length / 2);
+
+  return (
+    <View style={style}>
+      <SquircleView
+        squircleParams={{
+          cornerRadius: NAVBAR_TOKENS.radius, // --radius-5 (20px)
+          cornerSmoothing: CORNER_SMOOTHING, // 100% Apple-style squircle
+          fillColor: NAVBAR_TOKENS.backgroundValue, // --colors-base-black
+          strokeColor: NAVBAR_TOKENS.borderValue, // --colors-border-default
+          strokeWidth: 1,
+        }}
+      >
+        <View
+          testID={testID ?? 'navbar'}
+          className={cn(
+            'flex-row justify-between items-start',
+            'px-8 py-5', // px-8 = 32px (--space-8), py-5 = 20px (--spacing-xl)
+            className
+          )}
+        >
+          {items.map((item, index) => {
+            const isActive = index === activeIndex;
+            const isCenter = index === centerIndex && items.length % 2 === 1;
+            const disabled = !!item.disabled;
+
+            return (
+              <Pressable
+                key={item.key}
+                testID={item.testID ?? `navbar-item-${item.key}`}
+                accessibilityRole="button"
+                accessibilityState={{ selected: isActive, disabled }}
+                disabled={disabled}
+                onPress={item.onPress}
+                hitSlop={8}
+                className={cn(
+                  'items-center',
+                  'h-[38px]', // Fixed height to prevent layout shift
+                  isCenter ? 'w-[52px]' : 'w-6', // 52px for center, 24px for others
+                  disabled
+                    ? 'opacity-30'
+                    : isActive
+                      ? 'opacity-100'
+                      : 'opacity-50'
+                )}
+              >
+                {/* Icon */}
+                <View className={cn(isCenter && !isActive && 'opacity-50')}>
+                  {isActive && item.activeIcon ? item.activeIcon : item.icon}
+                </View>
+
+                {/* Active Indicator Dot - always reserve space, only show when active */}
+                {!isCenter && (
+                  <View
+                    className={cn(
+                      'w-1.5 h-1.5', // 6px
+                      'rounded-full',
+                      'mt-2', // 8px margin top
+                      isActive ? 'bg-[#F2353C]' : 'bg-transparent' // --colors-highlight-alert-red or transparent
+                    )}
+                  />
+                )}
+
+                {/* Center Glow Effect */}
+                {isCenter && showCenterGlow && (
+                  <View className="absolute top-3">
+                    <CenterGlow />
+                  </View>
+                )}
+              </Pressable>
+            );
+          })}
+        </View>
+      </SquircleView>
+    </View>
+  );
+}
+
+NavBarComponent.displayName = 'NavBar';
+
+// Export with backwards compatible aliases
+export const NavBar = NavBarComponent;
+export const Navbar = NavBarComponent;
+export type { NavBarProps as NavbarProps, NavBarItemConfig as NavbarItemModel };

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

@@ -0,0 +1,64 @@
+// @ts-nocheck
+import figma from '@figma/code-connect';
+import React from 'react';
+import { View as RNView } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { Popover } from './Popover';
+
+cssInterop(RNView, { className: 'style' });
+
+const View = RNView as React.ComponentType<
+  React.ComponentProps<typeof RNView> & { className?: string }
+>;
+
+const POPOVER_FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=312-6769';
+
+figma.connect(Popover, POPOVER_FIGMA_URL, {
+  props: {
+    open: figma.boolean('open'),
+    placement: figma.enum('placement', {
+      top: 'top',
+      bottom: 'bottom',
+    }),
+  },
+  example: (props) => (
+    <Popover
+      open={props.open}
+      placement={props.placement}
+      title="Popover Title"
+      description="Popover Description"
+      content="PopoverContent - Switch content type in Props"
+    />
+  ),
+});
+
+export default function PopoverFigma() {
+  return (
+    <View className="bg-background p-5 gap-6 flex-col">
+      <Popover
+        open={false}
+        placement="bottom"
+        title="Popover Title"
+        description="Popover Description"
+        content="PopoverContent - Switch content type in Props"
+      />
+
+      <Popover
+        open={true}
+        placement="bottom"
+        title="Popover Title"
+        description="Popover Description"
+        content="PopoverContent - Switch content type in Props"
+      />
+
+      <Popover
+        open={true}
+        placement="top"
+        title="Popover Title"
+        description="Popover Description"
+        content="PopoverContent - Switch content type in Props"
+      />
+    </View>
+  );
+}