@campxdev/react-native-blueprint 0.1.13 → 0.1.14

package/src/components/ui/Separator.tsx

@@ -1,70 +0,0 @@
-import * as React from 'react';
-import { View as RNView } from 'react-native';
-import { cssInterop } from 'nativewind';
-import { cn } from '../../lib/utils';
-import type { ViewRef, SlottableViewProps } from '@rn-primitives/types';
-
-const View = cssInterop(RNView, {
-  className: 'style',
-}) as React.ComponentType<any>;
-
-/**
- * Visual divider for separating content sections
- *
- * A thin line that creates visual separation between content areas. Can be oriented
- * horizontally or vertically and supports decorative or semantic roles.
- *
- * @component
- * @example
- * ```tsx
- * // Horizontal separator (default)
- * <View>
- *   <Text>Section 1</Text>
- *   <Separator className="my-4" />
- *   <Text>Section 2</Text>
- * </View>
- *
- * // Vertical separator
- * <View className="flex-row items-center gap-4">
- *   <Text>Left</Text>
- *   <Separator orientation="vertical" className="h-4" />
- *   <Text>Right</Text>
- * </View>
- *
- * // Semantic separator for screen readers
- * <Separator decorative={false} />
- * ```
- *
- * @accessibility
- * - Decorative separators (default) have role="none" for screen readers
- * - Non-decorative separators have role="separator" for semantic meaning
- */
-const Separator = React.forwardRef<
-  ViewRef,
-  SlottableViewProps & {
-    className?: string;
-    orientation?: 'horizontal' | 'vertical';
-    decorative?: boolean;
-  }
->(
-  (
-    { className, orientation = 'horizontal', decorative = true, ...props },
-    ref
-  ) => {
-    return (
-      <View
-        role={decorative ? 'none' : 'separator'}
-        className={cn(
-          'shrink-0 bg-border dark:bg-border',
-          orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Separator.displayName = 'Separator';
-
-export { Separator };

package/src/components/ui/Skeleton.tsx

@@ -1,57 +0,0 @@
-import { cn } from '../../lib/utils';
-import { View as RNView, type ViewProps } from 'react-native';
-import { cssInterop } from 'nativewind';
-
-const View = cssInterop(RNView, {
-  className: 'style',
-}) as React.ComponentType<any>;
-
-/**
- * Skeleton loading placeholder component
- *
- * Displays an animated placeholder during content loading states. Provides visual feedback
- * to users while data is being fetched, improving perceived performance.
- *
- * @component
- * @example
- * ```tsx
- * // Text skeleton
- * <Skeleton className="h-4 w-[250px]" />
- *
- * // Avatar skeleton
- * <Skeleton className="h-12 w-12 rounded-full" />
- *
- * // Card skeleton
- * <View className="flex gap-3">
- *   <Skeleton className="h-[125px] w-full rounded-xl" />
- *   <View className="gap-2">
- *     <Skeleton className="h-4 w-full" />
- *     <Skeleton className="h-4 w-[80%]" />
- *   </View>
- * </View>
- *
- * // List skeleton
- * {[1, 2, 3].map((i) => (
- *   <View key={i} className="flex-row items-center gap-4">
- *     <Skeleton className="h-12 w-12 rounded-full" />
- *     <View className="flex-1 gap-2">
- *       <Skeleton className="h-4 w-full" />
- *       <Skeleton className="h-4 w-3/4" />
- *     </View>
- *   </View>
- * ))}
- * ```
- */
-function Skeleton({
-  className,
-  ...props
-}: ViewProps & { className?: string } & React.RefAttributes<RNView>) {
-  return (
-    <View
-      className={cn('bg-muted animate-pulse rounded-md', className)}
-      {...props}
-    />
-  );
-}
-
-export { Skeleton };

package/src/components/ui/Switch.tsx

@@ -1,67 +0,0 @@
-import { cn } from '../../lib/utils';
-import * as SwitchPrimitives from '@rn-primitives/switch';
-import { Platform } from 'react-native';
-
-/**
- * A toggle switch component for binary on/off states
- *
- * Provides a visual toggle control with smooth animations and platform-specific styling.
- * Automatically handles checked/unchecked states and disabled interactions.
- *
- * @component
- * @example
- * ```tsx
- * const [enabled, setEnabled] = useState(false);
- *
- * <Switch
- *   checked={enabled}
- *   onCheckedChange={setEnabled}
- * />
- *
- * // Disabled switch
- * <Switch checked={true} disabled />
- * ```
- *
- * @param {boolean} checked - Current state of the switch
- * @param {(checked: boolean) => void} onCheckedChange - Callback when switch is toggled
- * @param {boolean} [disabled] - Whether the switch is disabled
- * @param {string} [className] - Additional Tailwind classes
- *
- * @accessibility
- * - Proper focus states on web for keyboard navigation
- * - Disabled state prevents interaction
- * - Visual feedback for checked/unchecked states
- */
-function Switch({
-  className,
-  ...props
-}: SwitchPrimitives.RootProps & React.RefAttributes<SwitchPrimitives.RootRef>) {
-  return (
-    <SwitchPrimitives.Root
-      className={cn(
-        'flex h-[1.15rem] w-8 shrink-0 flex-row items-center rounded-full border border-transparent shadow-sm shadow-black/5',
-        Platform.select({
-          web: 'focus-visible:border-ring focus-visible:ring-ring/50 peer inline-flex outline-none transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed',
-        }),
-        props.checked ? 'bg-primary' : 'bg-input dark:bg-input/80',
-        props.disabled && 'opacity-50',
-        className
-      )}
-      {...props}
-    >
-      <SwitchPrimitives.Thumb
-        className={cn(
-          'bg-background size-4 rounded-full transition-transform',
-          Platform.select({
-            web: 'pointer-events-none block ring-0',
-          }),
-          props.checked
-            ? 'dark:bg-primary-foreground translate-x-3.5'
-            : 'dark:bg-foreground translate-x-0'
-        )}
-      />
-    </SwitchPrimitives.Root>
-  );
-}
-
-export { Switch };

package/src/components/ui/Tabs.tsx

@@ -1,119 +0,0 @@
-import { TextClassContext } from './Text';
-import { cn } from '../../lib/utils';
-import * as TabsPrimitive from '@rn-primitives/tabs';
-import { Platform } from 'react-native';
-
-/**
- * Root tabs component for organizing content into panels
- *
- * @component
- * @example
- * ```tsx
- * <Tabs value={activeTab} onValueChange={setActiveTab}>
- *   <TabsList>
- *     <TabsTrigger value="account">
- *       <Text>Account</Text>
- *     </TabsTrigger>
- *     <TabsTrigger value="password">
- *       <Text>Password</Text>
- *     </TabsTrigger>
- *   </TabsList>
- *   <TabsContent value="account">
- *     <Text>Account settings content</Text>
- *   </TabsContent>
- *   <TabsContent value="password">
- *     <Text>Password settings content</Text>
- *   </TabsContent>
- * </Tabs>
- * ```
- *
- * @accessibility
- * - Keyboard navigation support (arrow keys)
- * - Proper ARIA attributes for tab structure
- * - Screen reader friendly
- */
-function Tabs({
-  className,
-  ...props
-}: TabsPrimitive.RootProps & React.RefAttributes<TabsPrimitive.RootRef>) {
-  return (
-    <TabsPrimitive.Root
-      className={cn('flex flex-col gap-2', className)}
-      {...props}
-    />
-  );
-}
-
-/**
- * Container for tab triggers
- *
- * @component
- */
-function TabsList({
-  className,
-  ...props
-}: TabsPrimitive.ListProps & React.RefAttributes<TabsPrimitive.ListRef>) {
-  return (
-    <TabsPrimitive.List
-      className={cn(
-        'bg-muted flex h-9 flex-row items-center justify-center rounded-lg p-[3px]',
-        Platform.select({ web: 'inline-flex w-fit', native: 'mr-auto' }),
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-/**
- * Individual tab trigger button
- *
- * @component
- */
-function TabsTrigger({
-  className,
-  ...props
-}: TabsPrimitive.TriggerProps & React.RefAttributes<TabsPrimitive.TriggerRef>) {
-  const { value } = TabsPrimitive.useRootContext();
-  return (
-    <TextClassContext.Provider
-      value={cn(
-        'text-foreground dark:text-muted-foreground text-sm font-medium',
-        value === props.value && 'dark:text-foreground'
-      )}
-    >
-      <TabsPrimitive.Trigger
-        className={cn(
-          'flex h-[calc(100%-1px)] flex-row items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 shadow-none shadow-black/5',
-          Platform.select({
-            web: 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex cursor-default whitespace-nowrap transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0',
-          }),
-          props.disabled && 'opacity-50',
-          props.value === value &&
-            'bg-background dark:border-foreground/10 dark:bg-input/30',
-          className
-        )}
-        {...(props as any)}
-      />
-    </TextClassContext.Provider>
-  );
-}
-
-/**
- * Tab content panel
- *
- * @component
- */
-function TabsContent({
-  className,
-  ...props
-}: TabsPrimitive.ContentProps & React.RefAttributes<TabsPrimitive.ContentRef>) {
-  return (
-    <TabsPrimitive.Content
-      className={cn(Platform.select({ web: 'flex-1 outline-none' }), className)}
-      {...props}
-    />
-  );
-}
-
-export { Tabs, TabsContent, TabsList, TabsTrigger };

package/src/components/ui/Text.tsx

@@ -1,68 +0,0 @@
-import * as Slot from '@rn-primitives/slot';
-import type { SlottableTextProps, TextRef } from '@rn-primitives/types';
-import { cssInterop } from 'nativewind';
-import * as React from 'react';
-import { Text as RNText } from 'react-native';
-import { cn } from '../../lib/utils';
-
-cssInterop(RNText, { className: 'style' });
-
-/**
- * Context for sharing text class styles with child Text components
- * Used by components like Button, Card, Badge to automatically style nested Text
- */
-const TextClassContext = React.createContext<string | undefined>(undefined);
-
-/**
- * Enhanced Text component with NativeWind styling support
- *
- * Extends React Native's Text with:
- * - Automatic style inheritance from TextClassContext
- * - NativeWind className support
- * - Slot pattern support for composition
- * - Web-specific selection styling
- *
- * @component
- * @example
- * ```tsx
- * // Basic text
- * <Text>Hello World</Text>
- *
- * // With custom styling
- * <Text className="text-lg font-bold">Title</Text>
- *
- * // Inside a styled context (e.g., Button)
- * <Button variant="default">
- *   <Text>Button Text</Text> // Automatically inherits button text styling
- * </Button>
- *
- * // Using asChild for composition
- * <Text asChild>
- *   <Link href="/home">Home</Link>
- * </Text>
- * ```
- *
- * @property {string} [className] - Additional Tailwind classes
- * @property {boolean} [asChild] - When true, merges props into immediate child
- */
-const Text = React.forwardRef<
-  TextRef,
-  SlottableTextProps & {
-    className?: string;
-    children?: React.ReactNode;
-  }
->(({ className, asChild = false, style, ...props }, ref) => {
-  const textClass = React.useContext(TextClassContext);
-  const Component = asChild ? Slot.Text : RNText;
-
-  const finalClassName = textClass
-    ? cn('text-base web:select-text', textClass, className)
-    : cn('text-base text-foreground web:select-text', className);
-
-  return (
-    <Component className={finalClassName} style={style} ref={ref} {...props} />
-  );
-});
-Text.displayName = 'Text';
-
-export { Text, TextClassContext };

package/src/components/ui/Textarea.tsx

@@ -1,104 +0,0 @@
-import { cn } from '../../lib/utils';
-import * as React from 'react';
-import {
-  Platform,
-  TextInput as RNTextInput,
-  type TextInputProps,
-} from 'react-native';
-import { cssInterop } from 'nativewind';
-
-const TextInput = cssInterop(RNTextInput, {
-  className: 'style',
-}) as React.ComponentType<any>;
-
-/**
- * Props for Textarea component
- *
- * @extends TextInputProps - All React Native TextInput properties
- * @property {string} [className] - Additional Tailwind classes for styling
- * @property {string} [placeholderClassName] - Tailwind classes for placeholder text styling
- *
- * @example
- * ```tsx
- * <Textarea
- *   placeholder="Enter your message"
- *   value={message}
- *   onChangeText={setMessage}
- *   numberOfLines={4}
- * />
- * ```
- */
-interface TextareaProps
-  extends Omit<TextInputProps, 'multiline' | 'numberOfLines' | 'editable'> {
-  className?: string;
-  placeholderClassName?: string;
-  multiline?: boolean;
-  numberOfLines?: number;
-  editable?: boolean;
-}
-
-/**
- * Multi-line text input component
- *
- * A textarea component for longer text input with configurable height and styling.
- * Automatically configured for multi-line input with appropriate platform-specific defaults.
- *
- * @component
- * @example
- * ```tsx
- * // Basic textarea
- * <Textarea
- *   placeholder="Enter description"
- *   value={description}
- *   onChangeText={setDescription}
- * />
- *
- * // Controlled textarea with validation
- * <Textarea
- *   value={bio}
- *   onChangeText={setBio}
- *   placeholder="Tell us about yourself"
- *   numberOfLines={6}
- *   maxLength={500}
- * />
- *
- * // Disabled textarea
- * <Textarea value={content} editable={false} />
- * ```
- *
- * @accessibility
- * - Supports standard TextInput accessibility props
- * - Placeholder text with appropriate color contrast
- * - Focus states on web for keyboard navigation
- * - Disabled state with reduced opacity
- */
-function Textarea({
-  className,
-  multiline = true,
-  numberOfLines = Platform.select({ web: 2, native: 8 }),
-  placeholderClassName,
-  editable = true,
-  ...props
-}: TextareaProps & React.RefAttributes<RNTextInput>) {
-  return (
-    <TextInput
-      className={cn(
-        'text-foreground border-input dark:bg-input/30 flex min-h-16 w-full flex-row rounded-md border bg-transparent px-3 py-2 text-base shadow-sm shadow-black/5 md:text-sm',
-        Platform.select({
-          web: 'placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive field-sizing-content resize-y outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed',
-        }),
-        !editable && 'opacity-50',
-        className
-      )}
-      placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
-      multiline={multiline}
-      numberOfLines={numberOfLines}
-      textAlignVertical="top"
-      editable={editable}
-      {...props}
-    />
-  );
-}
-
-export { Textarea };
-export type { TextareaProps };

package/src/components/ui/Theme-Toggle.tsx

@@ -1,208 +0,0 @@
-import * as React from 'react';
-import { View as RNView, Pressable as RNPressable } from 'react-native';
-import { cssInterop } from 'nativewind';
-import { Moon, Sun, Monitor } from 'lucide-react-native';
-import { cn } from '../../lib/utils';
-import { useTheme, type ThemeMode } from '../../lib/ThemeProvider';
-import { Icon } from './Icon';
-import { Text } from './Text';
-import type { SlottableViewProps, ViewRef } from '@rn-primitives/types';
-
-const View = cssInterop(RNView, {
-  className: 'style',
-}) as React.ComponentType<any>;
-const Pressable = cssInterop(RNPressable, {
-  className: 'style',
-}) as React.ComponentType<any>;
-
-/**
- * Theme toggle button variants
- */
-type ThemeToggleVariant = 'icon' | 'button' | 'segmented';
-
-/**
- * Props for ThemeToggle component
- *
- * @property {'icon' | 'button' | 'segmented'} [variant='icon'] - Visual style variant
- * @property {boolean} [showLabel=false] - Show text label next to icon (for button variant)
- * @property {string} [className] - Additional Tailwind classes
- *
- * @example
- * ```tsx
- * // Icon only (default)
- * <ThemeToggle />
- *
- * // Button with label
- * <ThemeToggle variant="button" showLabel />
- *
- * // Segmented control
- * <ThemeToggle variant="segmented" />
- * ```
- */
-type ThemeToggleProps = SlottableViewProps & {
-  variant?: ThemeToggleVariant;
-  showLabel?: boolean;
-  className?: string;
-};
-
-/**
- * Theme toggle component for switching between light, dark, and system themes
- *
- * Provides three variants:
- * - **icon**: Simple icon button that cycles through themes (light → dark → system)
- * - **button**: Button with icon and optional label
- * - **segmented**: Segmented control showing all three options
- *
- * @component
- * @example
- * ```tsx
- * // Icon toggle (minimal)
- * <ThemeToggle />
- *
- * // Button with label
- * <ThemeToggle variant="button" showLabel />
- *
- * // Segmented control (shows all options)
- * <ThemeToggle variant="segmented" />
- *
- * // Custom styling
- * <ThemeToggle className="my-4" />
- * ```
- *
- * @accessibility
- * - Proper button role for screen readers
- * - Announces current theme state
- * - Keyboard navigable on web
- */
-const ThemeToggle = React.forwardRef<ViewRef, ThemeToggleProps>(
-  ({ variant = 'icon', showLabel = false, className, ...props }, ref) => {
-    const { mode, isDark, setMode } = useTheme();
-
-    // Cycle through themes: light → dark → system → light
-    const cycleTheme = () => {
-      const nextMode: ThemeMode =
-        mode === 'light' ? 'dark' : mode === 'dark' ? 'system' : 'light';
-      setMode(nextMode);
-    };
-
-    if (variant === 'segmented') {
-      return (
-        <View
-          ref={ref as any}
-          className={cn(
-            'flex-row bg-muted dark:bg-muted rounded-lg p-1',
-            className
-          )}
-          {...props}
-        >
-          {(['light', 'dark', 'system'] as const).map((themeMode) => {
-            const isActive = mode === themeMode;
-            const IconComponent =
-              themeMode === 'light'
-                ? Sun
-                : themeMode === 'dark'
-                  ? Moon
-                  : Monitor;
-
-            return (
-              <Pressable
-                key={themeMode}
-                onPress={() => setMode(themeMode)}
-                className={cn(
-                  'flex-1 flex-row items-center justify-center rounded-md px-3 py-2 transition-colors',
-                  isActive
-                    ? 'bg-background dark:bg-background shadow-sm'
-                    : 'active:bg-background/50 dark:active:bg-background/50'
-                )}
-                role="button"
-                accessibilityLabel={`Switch to ${themeMode} theme`}
-                accessibilityState={{ selected: isActive }}
-              >
-                <Icon
-                  as={IconComponent}
-                  size={16}
-                  className={cn(
-                    isActive
-                      ? 'text-foreground dark:text-foreground'
-                      : 'text-muted-foreground dark:text-muted-foreground'
-                  )}
-                />
-                <Text
-                  className={cn(
-                    'ml-2 text-sm font-medium capitalize',
-                    isActive
-                      ? 'text-foreground dark:text-foreground'
-                      : 'text-muted-foreground dark:text-muted-foreground'
-                  )}
-                >
-                  {themeMode}
-                </Text>
-              </Pressable>
-            );
-          })}
-        </View>
-      );
-    }
-
-    if (variant === 'button') {
-      const IconComponent = isDark ? Moon : Sun;
-      const label = mode === 'system' ? 'System' : isDark ? 'Dark' : 'Light';
-
-      return (
-        <Pressable
-          ref={ref as any}
-          onPress={cycleTheme}
-          className={cn(
-            'flex-row items-center justify-center rounded-md px-4 py-2',
-            'bg-secondary dark:bg-secondary active:opacity-80',
-            className
-          )}
-          role="button"
-          accessibilityLabel={`Current theme: ${label}. Tap to change.`}
-          {...props}
-        >
-          <Icon
-            as={IconComponent}
-            size={16}
-            className="text-secondary-foreground dark:text-secondary-foreground"
-          />
-          {showLabel && (
-            <Text className="ml-2 text-sm font-medium text-secondary-foreground dark:text-secondary-foreground">
-              {label}
-            </Text>
-          )}
-        </Pressable>
-      );
-    }
-
-    // Default: icon variant
-    const IconComponent = mode === 'system' ? Monitor : isDark ? Moon : Sun;
-
-    return (
-      <Pressable
-        ref={ref as any}
-        onPress={cycleTheme}
-        className={cn(
-          'h-10 w-10 items-center justify-center rounded-md',
-          'active:bg-accent dark:active:bg-accent',
-          'web:hover:bg-accent/50 dark:web:hover:bg-accent/50',
-          'web:transition-colors',
-          className
-        )}
-        role="button"
-        accessibilityLabel={`Current theme: ${mode}. Tap to cycle themes.`}
-        {...props}
-      >
-        <Icon
-          as={IconComponent}
-          size={20}
-          className="text-foreground dark:text-foreground"
-        />
-      </Pressable>
-    );
-  }
-);
-ThemeToggle.displayName = 'ThemeToggle';
-
-export { ThemeToggle };
-export type { ThemeToggleProps, ThemeToggleVariant };