@campxdev/react-native-blueprint 0.1.0

package/src/components/ui/Badge.tsx

@@ -0,0 +1,121 @@
+import * as Slot from '@rn-primitives/slot';
+import type { SlottableViewProps, ViewRef } from '@rn-primitives/types';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cssInterop } from 'nativewind';
+import * as React from 'react';
+import { View } from 'react-native';
+import { cn } from '../../lib/utils';
+import { TextClassContext } from './Text';
+
+cssInterop(View, { className: 'style' });
+cssInterop(Slot.View, { className: 'style' });
+
+/**
+ * Badge container style variants
+ *
+ * @variant default - Primary badge with solid background
+ * @variant secondary - Secondary badge with muted background
+ * @variant destructive - Destructive badge with danger/error styling
+ * @variant outline - Badge with border and transparent background
+ */
+const badgeVariants = cva(
+  'flex-row items-center rounded-full border border-border px-2.5 py-0.5 web:inline-flex',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary',
+        secondary: 'border-transparent bg-secondary',
+        destructive: 'border-transparent bg-destructive',
+        outline: 'border-border',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+/**
+ * Badge text style variants for matching text colors with badge variants
+ * Applied through TextClassContext to child Text components
+ *
+ * Variants match badgeVariants to ensure proper contrast
+ * @see badgeVariants
+ */
+const badgeTextVariants = cva('text-xs font-semibold', {
+  variants: {
+    variant: {
+      default: 'text-primary-foreground',
+      secondary: 'text-secondary-foreground',
+      destructive: 'text-destructive-foreground',
+      outline: 'text-foreground',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+/**
+ * Props for Badge component
+ *
+ * @extends SlottableViewProps - Includes all View props plus asChild for slot composition
+ * @extends VariantProps - Includes variant styling options from badgeVariants
+ *
+ * @property {string} [className] - Additional Tailwind classes for custom styling
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {'default' | 'secondary' | 'destructive' | 'outline'} [variant='default'] - Badge style variant
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="default">
+ *   <Text>New</Text>
+ * </Badge>
+ * ```
+ */
+type BadgeProps = SlottableViewProps &
+  VariantProps<typeof badgeVariants> & { className?: string };
+
+/**
+ * A compact badge component for displaying status, labels, or counts
+ *
+ * Small, pill-shaped component for highlighting information. Supports multiple
+ * variants for different contexts and automatically styles child Text components.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Status badge
+ * <Badge variant="default">
+ *   <Text>Active</Text>
+ * </Badge>
+ *
+ * // Count badge
+ * <Badge variant="destructive">
+ *   <Text>5</Text>
+ * </Badge>
+ *
+ * // Outline badge
+ * <Badge variant="outline">
+ *   <Text>Draft</Text>
+ * </Badge>
+ * ```
+ */
+const Badge = React.forwardRef<ViewRef, BadgeProps>(
+  ({ className, variant, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <TextClassContext.Provider value={cn(badgeTextVariants({ variant }))}>
+        <Component
+          className={cn(badgeVariants({ variant, className }))}
+          ref={ref as any}
+          {...props}
+        />
+      </TextClassContext.Provider>
+    );
+  }
+);
+Badge.displayName = 'Badge';
+
+export { Badge, badgeTextVariants, badgeVariants };
+export type { BadgeProps };

package/src/components/ui/Bottom-Sheet.tsx

@@ -0,0 +1,224 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+import { StyleSheet, View, ViewStyle } from 'react-native';
+import BottomSheetPrimitive, {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetView,
+} from '@gorhom/bottom-sheet';
+import { cn } from '../../lib/utils';
+import { useTheme } from '../../lib/ThemeProvider';
+import { hslToRgb } from '../theme-config';
+
+type BottomSheetRef = {
+  open: () => void;
+  close: () => void;
+  expand: () => void;
+  collapse: () => void;
+  snapToIndex: (index: number) => void;
+};
+
+interface BottomSheetProps {
+  children: React.ReactNode;
+  snapPoints?: (string | number)[];
+  initialSnapIndex?: number;
+  enablePanDownToClose?: boolean;
+  enableDynamicSizing?: boolean;
+  backdropOpacity?: number;
+  enableBackdropDismiss?: boolean;
+  handleIndicatorStyle?: ViewStyle;
+  backgroundStyle?: ViewStyle;
+  className?: string;
+  containerClassName?: string;
+  onChange?: (index: number) => void;
+  onClose?: () => void;
+}
+
+const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
+  (
+    {
+      children,
+      snapPoints: customSnapPoints,
+      initialSnapIndex = -1,
+      enablePanDownToClose = true,
+      enableDynamicSizing = false,
+      backdropOpacity = 0.5,
+      enableBackdropDismiss = true,
+      handleIndicatorStyle,
+      backgroundStyle,
+      className,
+      containerClassName,
+      onChange,
+      onClose,
+    },
+    ref
+  ) => {
+    const bottomSheetRef = useRef<BottomSheetPrimitive>(null);
+    const { colors } = useTheme();
+
+    // Default snap points if not provided
+    const snapPoints = useMemo(
+      () => customSnapPoints ?? ['25%', '50%', '90%'],
+      [customSnapPoints]
+    );
+
+    // Expose methods via ref (similar to Flutter's showModalBottomSheet)
+    useImperativeHandle(ref, () => ({
+      open: () => bottomSheetRef.current?.expand(),
+      close: () => bottomSheetRef.current?.close(),
+      expand: () => bottomSheetRef.current?.expand(),
+      collapse: () => bottomSheetRef.current?.collapse(),
+      snapToIndex: (index: number) =>
+        bottomSheetRef.current?.snapToIndex(index),
+    }));
+
+    // Custom backdrop component
+    const renderBackdrop = useCallback(
+      (props: BottomSheetBackdropProps) => (
+        <BottomSheetBackdrop
+          {...props}
+          opacity={backdropOpacity}
+          appearsOnIndex={0}
+          disappearsOnIndex={-1}
+          pressBehavior={enableBackdropDismiss ? 'close' : 'none'}
+        />
+      ),
+      [backdropOpacity, enableBackdropDismiss]
+    );
+
+    // Handle sheet changes
+    const handleSheetChanges = useCallback(
+      (index: number) => {
+        onChange?.(index);
+        if (index === -1) {
+          onClose?.();
+        }
+      },
+      [onChange, onClose]
+    );
+
+    // Theme-aware background style - convert HSL to RGB for React Native
+    const themedBackgroundStyle = useMemo(
+      () => [
+        styles.background,
+        { backgroundColor: hslToRgb(colors.card) },
+        backgroundStyle,
+      ],
+      [colors.card, backgroundStyle]
+    );
+
+    // Theme-aware handle indicator style - convert HSL to RGB for React Native
+    const themedHandleStyle = useMemo(
+      () => [
+        styles.handleIndicator,
+        { backgroundColor: hslToRgb(colors.border) },
+        handleIndicatorStyle,
+      ],
+      [colors.border, handleIndicatorStyle]
+    );
+
+    return (
+      <BottomSheetPrimitive
+        ref={bottomSheetRef}
+        index={initialSnapIndex}
+        snapPoints={snapPoints}
+        enablePanDownToClose={enablePanDownToClose}
+        enableDynamicSizing={enableDynamicSizing}
+        backdropComponent={renderBackdrop}
+        onChange={handleSheetChanges}
+        handleIndicatorStyle={themedHandleStyle}
+        backgroundStyle={themedBackgroundStyle}
+        style={styles.container}
+        animateOnMount={false}
+      >
+        <BottomSheetView
+          style={[styles.contentContainer]}
+          className={cn('flex-1 bg-card', containerClassName)}
+        >
+          <View className={cn('flex-1', className)}>{children}</View>
+        </BottomSheetView>
+      </BottomSheetPrimitive>
+    );
+  }
+);
+
+BottomSheet.displayName = 'BottomSheet';
+
+const styles = StyleSheet.create({
+  container: {
+    zIndex: 9999,
+  },
+  contentContainer: {
+    flex: 1,
+  },
+  background: {
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  handleIndicator: {
+    width: 40,
+    height: 4,
+  },
+});
+
+// Helper component for bottom sheet header
+interface BottomSheetHeaderProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const BottomSheetHeader = ({ children, className }: BottomSheetHeaderProps) => {
+  return (
+    <View
+      className={cn('border-b border-border px-4 py-3 web:px-6', className)}
+    >
+      {children}
+    </View>
+  );
+};
+
+// Helper component for bottom sheet content
+interface BottomSheetContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const BottomSheetContent = ({
+  children,
+  className,
+}: BottomSheetContentProps) => {
+  return (
+    <View className={cn('flex-1 px-4 py-4 web:px-6', className)}>
+      {children}
+    </View>
+  );
+};
+
+// Helper component for bottom sheet footer
+interface BottomSheetFooterProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const BottomSheetFooter = ({ children, className }: BottomSheetFooterProps) => {
+  return (
+    <View
+      className={cn('border-t border-border px-4 py-3 web:px-6', className)}
+    >
+      {children}
+    </View>
+  );
+};
+
+export {
+  BottomSheet,
+  BottomSheetHeader,
+  BottomSheetContent,
+  BottomSheetFooter,
+};
+export type { BottomSheetRef, BottomSheetProps };

package/src/components/ui/Button.tsx

@@ -0,0 +1,100 @@
+import * as Slot from '@rn-primitives/slot';
+import type {
+  PressableRef,
+  SlottablePressableProps,
+} from '@rn-primitives/types';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cssInterop } from 'nativewind';
+import * as React from 'react';
+import { Pressable } from 'react-native';
+import { cn } from '../../lib/utils';
+import { TextClassContext } from './Text';
+
+cssInterop(Pressable, { className: 'style' });
+cssInterop(Slot.Pressable, { className: 'style' });
+
+const buttonVariants = cva(
+  'group flex items-center justify-center rounded-4 web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary active:opacity-20',
+        destructive: 'bg-destructive active:opacity-90',
+        outline: 'border border-input bg-background active:bg-accent',
+        secondary: 'bg-secondary active:opacity-80',
+        ghost: 'active:bg-accent',
+        link: 'web:underline-offset-4',
+      },
+      size: {
+        default:
+          'h-10 px-button-x py-button-y native:h-12 native:px-button-x native:py-button-y',
+        sm: 'h-9 px-3',
+        lg: 'h-11 px-8 native:h-14',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+const buttonTextVariants = cva(
+  'web:whitespace-nowrap text-sm native:text-base font-medium web:transition-colors',
+  {
+    variants: {
+      variant: {
+        default: 'text-primary-foreground',
+        destructive: 'text-destructive-foreground',
+        outline: 'text-foreground group-active:text-accent-foreground',
+        secondary:
+          'text-secondary-foreground group-active:text-secondary-foreground',
+        ghost: 'text-foreground group-active:text-accent-foreground',
+        link: 'text-primary group-active:underline',
+      },
+      size: {
+        default: '',
+        sm: '',
+        lg: 'native:text-lg',
+        icon: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+type ButtonProps = SlottablePressableProps &
+  VariantProps<typeof buttonVariants> & {
+    className?: string;
+  };
+
+const Button = React.forwardRef<PressableRef, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot.Pressable : Pressable;
+
+    return (
+      <TextClassContext.Provider
+        value={cn(buttonTextVariants({ variant, size }))}
+      >
+        <Component
+          ref={ref}
+          role="button"
+          className={cn(
+            buttonVariants({ variant, size, className }),
+            props.disabled && 'opacity-50 web:pointer-events-none'
+          )}
+          {...props}
+        />
+      </TextClassContext.Provider>
+    );
+  }
+);
+
+Button.displayName = 'Button';
+
+export { Button, buttonTextVariants, buttonVariants };
+export type { ButtonProps };

package/src/components/ui/Card.tsx

@@ -0,0 +1,185 @@
+import * as Slot from '@rn-primitives/slot';
+import type { SlottableViewProps, ViewRef } from '@rn-primitives/types';
+import { cssInterop } from 'nativewind';
+import * as React from 'react';
+import { View } from 'react-native';
+import { cn } from '../../lib/utils';
+import { TextClassContext } from './Text';
+
+cssInterop(View, { className: 'style' });
+cssInterop(Slot.View, { className: 'style' });
+
+/**
+ * Card container component - Main wrapper for card content
+ *
+ * Provides elevated container with border, rounded corners, and shadow.
+ * Use with CardHeader, CardTitle, CardDescription, CardContent, and CardFooter
+ * for a complete card structure.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle><Text>Title</Text></CardTitle>
+ *     <CardDescription><Text>Description</Text></CardDescription>
+ *   </CardHeader>
+ *   <CardContent>
+ *     <Text>Card content goes here</Text>
+ *   </CardContent>
+ *   <CardFooter>
+ *     <Button>Action</Button>
+ *   </CardFooter>
+ * </Card>
+ * ```
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {string} [className] - Additional Tailwind classes
+ */
+const Card = React.forwardRef<
+  ViewRef,
+  SlottableViewProps & { className?: string }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <Component
+      className={cn(
+        'rounded-lg border border-border dark:border-border bg-card dark:bg-card p-6 shadow-sm shadow-foreground/10 dark:shadow-white/10',
+        className
+      )}
+      ref={ref as any}
+      {...props}
+    />
+  );
+});
+Card.displayName = 'Card';
+
+/**
+ * CardHeader - Container for card title and description
+ *
+ * Provides proper spacing for title and description elements at the top of a card.
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {string} [className] - Additional Tailwind classes
+ */
+const CardHeader = React.forwardRef<
+  ViewRef,
+  SlottableViewProps & { className?: string }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <Component
+      className={cn('flex flex-col gap-1.5 p-6', className)}
+      ref={ref as any}
+      {...props}
+    />
+  );
+});
+CardHeader.displayName = 'CardHeader';
+
+/**
+ * CardTitle - Main title text for the card
+ *
+ * Automatically styles child Text components with large, semibold typography.
+ * Uses TextClassContext to apply consistent styling to nested Text elements.
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {string} [className] - Additional Tailwind classes for text styling
+ */
+const CardTitle = React.forwardRef<
+  ViewRef,
+  SlottableViewProps & { className?: string }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        'text-2xl font-semibold leading-none tracking-tight text-card-foreground dark:text-card-foreground',
+        className
+      )}
+    >
+      <Component ref={ref as any} {...props} />
+    </TextClassContext.Provider>
+  );
+});
+CardTitle.displayName = 'CardTitle';
+
+/**
+ * CardDescription - Subtitle or description text for the card
+ *
+ * Automatically styles child Text components with muted, smaller typography.
+ * Uses TextClassContext to apply consistent styling to nested Text elements.
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {string} [className] - Additional Tailwind classes for text styling
+ */
+const CardDescription = React.forwardRef<
+  ViewRef,
+  SlottableViewProps & { className?: string }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        'text-sm text-muted-foreground dark:text-muted-foreground',
+        className
+      )}
+    >
+      <Component ref={ref as any} {...props} />
+    </TextClassContext.Provider>
+  );
+});
+CardDescription.displayName = 'CardDescription';
+
+/**
+ * CardContent - Main content area of the card
+ *
+ * Container for the primary card content with appropriate padding.
+ * Top padding is removed to flow naturally after CardHeader.
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {string} [className] - Additional Tailwind classes
+ */
+const CardContent = React.forwardRef<
+  ViewRef,
+  SlottableViewProps & { className?: string }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <Component className={cn('p-6 pt-0', className)} ref={ref} {...props} />
+  );
+});
+CardContent.displayName = 'CardContent';
+
+/**
+ * CardFooter - Footer area for actions or additional info
+ *
+ * Typically contains buttons or other interactive elements.
+ * Arranged as a row with centered items.
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {string} [className] - Additional Tailwind classes
+ */
+const CardFooter = React.forwardRef<
+  ViewRef,
+  SlottableViewProps & { className?: string }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <Component
+      className={cn('flex flex-row items-center p-6 pt-0', className)}
+      ref={ref as any}
+      {...props}
+    />
+  );
+});
+CardFooter.displayName = 'CardFooter';
+
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};

package/src/components/ui/Checkbox.tsx

@@ -0,0 +1,81 @@
+import { Icon } from './Icon';
+import { cn } from '../../lib/utils';
+import * as CheckboxPrimitive from '@rn-primitives/checkbox';
+import { Check } from 'lucide-react-native';
+import { Platform } from 'react-native';
+
+const DEFAULT_HIT_SLOP = 24;
+
+/**
+ * Interactive checkbox for boolean selections
+ *
+ * A control that allows users to toggle between checked and unchecked states.
+ * Features a checkmark indicator, configurable styling, and accessible touch targets.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic checkbox
+ * <Checkbox checked={isChecked} onCheckedChange={setIsChecked} />
+ *
+ * // Checkbox with label
+ * <View className="flex-row items-center gap-2">
+ *   <Checkbox id="terms" checked={accepted} onCheckedChange={setAccepted} />
+ *   <Label htmlFor="terms">Accept terms and conditions</Label>
+ * </View>
+ *
+ * // Disabled checkbox
+ * <Checkbox checked={true} disabled />
+ * ```
+ *
+ * @accessibility
+ * - Uses 24px hit slop for easier touch interaction
+ * - Supports keyboard navigation on web
+ * - Proper ARIA attributes for screen readers
+ * - Visual focus indicators on web
+ */
+function Checkbox({
+  className,
+  checkedClassName,
+  indicatorClassName,
+  iconClassName,
+  ...props
+}: CheckboxPrimitive.RootProps &
+  React.RefAttributes<CheckboxPrimitive.RootRef> & {
+    checkedClassName?: string;
+    indicatorClassName?: string;
+    iconClassName?: string;
+  }) {
+  return (
+    <CheckboxPrimitive.Root
+      className={cn(
+        'border-input dark:bg-input/30 size-4 shrink-0 rounded-[4px] border shadow-sm shadow-black/5',
+        Platform.select({
+          web: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer cursor-default outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed',
+          native: 'overflow-hidden',
+        }),
+        props.checked && cn('border-primary', checkedClassName),
+        props.disabled && 'opacity-50',
+        className
+      )}
+      hitSlop={DEFAULT_HIT_SLOP}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        className={cn(
+          'bg-primary h-full w-full items-center justify-center',
+          indicatorClassName
+        )}
+      >
+        <Icon
+          as={Check}
+          size={12}
+          strokeWidth={Platform.OS === 'web' ? 2.5 : 3.5}
+          className={cn('text-primary-foreground', iconClassName)}
+        />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };