@campxdev/react-native-blueprint 0.1.0

package/src/components/ui/Textarea.tsx

@@ -0,0 +1,93 @@
+import { cn } from '../../lib/utils';
+import { Platform, TextInput, type TextInputProps } from 'react-native';
+import { cssInterop } from 'nativewind';
+
+cssInterop(TextInput, { className: 'style' });
+
+/**
+ * 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 TextInputProps {
+  className?: string;
+  placeholderClassName?: string;
+}
+
+/**
+ * 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<TextInput>) {
+  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

@@ -0,0 +1,204 @@
+import * as React from 'react';
+import { View, Pressable } 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';
+
+cssInterop(View, { className: 'style' });
+cssInterop(Pressable, { className: 'style' });
+
+/**
+ * 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 };

package/src/components/ui/Toast.tsx

@@ -0,0 +1,127 @@
+import { cn } from '../../lib/utils';
+import { Text, TextClassContext } from './Text';
+import { Icon } from './Icon';
+import type { LucideIcon } from 'lucide-react-native';
+import * as React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cssInterop } from 'nativewind';
+
+cssInterop(View, { className: 'style' });
+
+/**
+ * Toast notification component
+ *
+ * Displays temporary messages or notifications with optional icons.
+ * Supports default and destructive variants for different message types.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Toast icon={CheckCircle}>
+ *   <ToastTitle>
+ *     <Text>Success</Text>
+ *   </ToastTitle>
+ *   <ToastDescription>
+ *     <Text>Your changes have been saved</Text>
+ *   </ToastDescription>
+ * </Toast>
+ *
+ * <Toast variant="destructive" icon={AlertCircle}>
+ *   <ToastTitle>
+ *     <Text>Error</Text>
+ *   </ToastTitle>
+ *   <ToastDescription>
+ *     <Text>Failed to save changes</Text>
+ *   </ToastDescription>
+ * </Toast>
+ * ```
+ *
+ * @accessibility
+ * - Announces messages to screen readers
+ * - Proper role for notifications
+ */
+function Toast({
+  className,
+  variant,
+  children,
+  icon,
+  iconClassName,
+  ...props
+}: ViewProps &
+  React.RefAttributes<View> & {
+    icon?: LucideIcon;
+    variant?: 'default' | 'destructive';
+    iconClassName?: string;
+  }) {
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        'text-sm text-foreground',
+        variant === 'destructive' && 'text-destructive',
+        className
+      )}
+    >
+      <View
+        className={cn(
+          'bg-background border-border relative flex-row items-start gap-3 rounded-lg border p-4 shadow-lg shadow-black/10',
+          variant === 'destructive' && 'border-destructive',
+          className
+        )}
+        {...props}
+      >
+        {icon && (
+          <Icon
+            as={icon}
+            className={cn(
+              'size-5 shrink-0',
+              variant === 'destructive' && 'text-destructive',
+              iconClassName
+            )}
+          />
+        )}
+        <View className="flex-1 gap-1">{children}</View>
+      </View>
+    </TextClassContext.Provider>
+  );
+}
+
+/**
+ * Toast title component
+ *
+ * @component
+ */
+function ToastTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof Text> & React.RefAttributes<Text>) {
+  return (
+    <Text
+      className={cn('font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Toast description component
+ *
+ * @component
+ */
+function ToastDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof Text> & React.RefAttributes<Text>) {
+  const textClass = React.useContext(TextClassContext);
+  return (
+    <Text
+      className={cn(
+        'text-muted-foreground text-sm',
+        textClass?.includes('text-destructive') && 'text-destructive/90',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Toast, ToastDescription, ToastTitle };

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

@@ -0,0 +1,160 @@
+import { Icon } from './Icon';
+import { TextClassContext } from './Text';
+import { toggleVariants } from './Toggle';
+import { cn } from '../../lib/utils';
+import * as ToggleGroupPrimitive from '@rn-primitives/toggle-group';
+import type { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { Platform } from 'react-native';
+
+/**
+ * Context for sharing variant and size props across toggle group items
+ */
+const ToggleGroupContext = React.createContext<VariantProps<
+  typeof toggleVariants
+> | null>(null);
+
+/**
+ * Toggle group component for grouping related toggle buttons
+ *
+ * Allows single or multiple selection among a set of toggle buttons.
+ * Supports both outline and default variants.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ToggleGroup type="single" value={alignment} onValueChange={setAlignment}>
+ *   <ToggleGroupItem value="left" isFirst>
+ *     <ToggleGroupIcon as={AlignLeft} />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="center">
+ *     <ToggleGroupIcon as={AlignCenter} />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="right" isLast>
+ *     <ToggleGroupIcon as={AlignRight} />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ *
+ * @accessibility
+ * - Uses proper ARIA attributes for grouped toggles
+ * - Keyboard navigation support
+ */
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: ToggleGroupPrimitive.RootProps &
+  VariantProps<typeof toggleVariants> &
+  React.RefAttributes<ToggleGroupPrimitive.RootRef>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      className={cn(
+        'flex flex-row items-center rounded-md shadow-none',
+        Platform.select({ web: 'w-fit' }),
+        variant === 'outline' && 'shadow-sm shadow-black/5',
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  );
+}
+
+/**
+ * Hook to access toggle group context
+ *
+ * @throws Error if used outside of ToggleGroup component
+ */
+function useToggleGroupContext() {
+  const context = React.useContext(ToggleGroupContext);
+  if (context === null) {
+    throw new Error(
+      'ToggleGroup compound components cannot be rendered outside the ToggleGroup component'
+    );
+  }
+  return context;
+}
+
+/**
+ * Individual toggle item within a toggle group
+ *
+ * @component
+ */
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  isFirst,
+  isLast,
+  ...props
+}: ToggleGroupPrimitive.ItemProps &
+  VariantProps<typeof toggleVariants> &
+  React.RefAttributes<ToggleGroupPrimitive.ItemRef> & {
+    isFirst?: boolean;
+    isLast?: boolean;
+  }) {
+  const context = useToggleGroupContext();
+  const { value } = ToggleGroupPrimitive.useRootContext();
+
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        'text-sm text-foreground font-medium',
+        ToggleGroupPrimitive.utils.getIsSelected(value, props.value)
+          ? 'text-accent-foreground'
+          : Platform.select({ web: 'group-hover:text-muted-foreground' })
+      )}
+    >
+      <ToggleGroupPrimitive.Item
+        className={cn(
+          toggleVariants({
+            variant: context.variant || variant,
+            size: context.size || size,
+          }),
+          props.disabled && 'opacity-50',
+          ToggleGroupPrimitive.utils.getIsSelected(value, props.value) &&
+            'bg-accent',
+          'min-w-0 shrink-0 rounded-none shadow-none',
+          isFirst && 'rounded-l-md',
+          isLast && 'rounded-r-md',
+          (context.variant === 'outline' || variant === 'outline') &&
+            'border-l-0',
+          (context.variant === 'outline' || variant === 'outline') &&
+            isFirst &&
+            'border-l',
+          Platform.select({
+            web: 'flex-1 focus:z-10 focus-visible:z-10',
+          }),
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </ToggleGroupPrimitive.Item>
+    </TextClassContext.Provider>
+  );
+}
+
+/**
+ * Icon component for use within toggle group items
+ *
+ * @component
+ */
+function ToggleGroupIcon({
+  className,
+  ...props
+}: React.ComponentProps<typeof Icon>) {
+  const textClass = React.useContext(TextClassContext);
+  return (
+    <Icon className={cn('size-4 shrink-0', textClass, className)} {...props} />
+  );
+}
+
+export { ToggleGroup, ToggleGroupIcon, ToggleGroupItem };

package/src/components/ui/Toggle.tsx

@@ -0,0 +1,122 @@
+import { Icon } from './Icon';
+import { TextClassContext } from './Text';
+import { cn } from '../../lib/utils';
+import * as TogglePrimitive from '@rn-primitives/toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { Platform } from 'react-native';
+
+/**
+ * Toggle button style variants using class-variance-authority
+ *
+ * @variant default - Standard toggle with transparent background
+ * @variant outline - Toggle with border and background
+ *
+ * @size default - Standard size (40px/36px)
+ * @size sm - Small size (36px/32px)
+ * @size lg - Large size (44px/40px)
+ */
+const toggleVariants = cva(
+  cn(
+    'active:bg-muted group flex flex-row items-center justify-center gap-2 rounded-md',
+    Platform.select({
+      web: 'hover:bg-muted hover: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 inline-flex cursor-default whitespace-nowrap outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:pointer-events-none [&_svg]:pointer-events-none',
+    })
+  ),
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: cn(
+          'border-input active:bg-accent border bg-transparent shadow-sm shadow-black/5',
+          Platform.select({
+            web: 'hover:bg-accent hover:text-accent-foreground',
+          })
+        ),
+      },
+      size: {
+        default: 'h-10 min-w-10 px-2.5 sm:h-9 sm:min-w-9 sm:px-2',
+        sm: 'h-9 min-w-9 px-2 sm:h-8 sm:min-w-8 sm:px-1.5',
+        lg: 'h-11 min-w-11 px-3 sm:h-10 sm:min-w-10 sm:px-2.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+/**
+ * Toggle button component for on/off states
+ *
+ * A two-state button that can be toggled between pressed and unpressed states.
+ * Supports multiple variants and sizes.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Toggle pressed={isBold} onPressedChange={setIsBold}>
+ *   <ToggleIcon as={Bold} />
+ *   <Text>Bold</Text>
+ * </Toggle>
+ *
+ * <Toggle variant="outline" size="sm">
+ *   <ToggleIcon as={Italic} />
+ * </Toggle>
+ * ```
+ *
+ * @accessibility
+ * - Uses proper ARIA pressed state
+ * - Disabled state prevents interaction
+ * - Focus visible states on web
+ */
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: TogglePrimitive.RootProps &
+  VariantProps<typeof toggleVariants> &
+  React.RefAttributes<TogglePrimitive.RootRef>) {
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        'text-sm text-foreground font-medium',
+        props.pressed
+          ? 'text-accent-foreground'
+          : Platform.select({ web: 'group-hover:text-muted-foreground' }),
+        className
+      )}
+    >
+      <TogglePrimitive.Root
+        className={cn(
+          toggleVariants({ variant, size }),
+          props.disabled && 'opacity-50',
+          props.pressed && 'bg-accent',
+          className
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
+
+/**
+ * Icon component for use within Toggle buttons
+ *
+ * Automatically inherits text styling from the toggle context.
+ *
+ * @component
+ */
+function ToggleIcon({
+  className,
+  ...props
+}: React.ComponentProps<typeof Icon>) {
+  const textClass = React.useContext(TextClassContext);
+  return (
+    <Icon className={cn('size-4 shrink-0', textClass, className)} {...props} />
+  );
+}
+
+export { Toggle, ToggleIcon, toggleVariants };