@campxdev/react-native-blueprint 0.1.13 → 0.1.14

package/src/components/ui/Badge.tsx

@@ -1,121 +0,0 @@
-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

@@ -1,232 +0,0 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from 'react';
-import { StyleSheet, View as RNView, ViewStyle } from 'react-native';
-import BottomSheetPrimitive, {
-  BottomSheetBackdrop,
-  BottomSheetBackdropProps,
-  BottomSheetView as BSView,
-} from '@gorhom/bottom-sheet';
-import { cssInterop } from 'nativewind';
-import { cn } from '../../lib/utils';
-import { useTheme } from '../../lib/ThemeProvider';
-import { hslToRgb } from '../theme-config';
-
-const View = cssInterop(RNView, {
-  className: 'style',
-}) as React.ComponentType<any>;
-const BottomSheetView = cssInterop(BSView, {
-  className: 'style',
-}) as React.ComponentType<any>;
-
-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

@@ -1,100 +0,0 @@
-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

@@ -1,185 +0,0 @@
-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,
-};