@campxdev/react-native-blueprint 0.1.0

package/src/components/theme-config.ts

@@ -0,0 +1,331 @@
+/**
+ * Comprehensive Dark Theme Configuration
+ *
+ * This file provides complete theme tokens and utilities for consistent
+ * dark mode support across all components in the Blueprint library.
+ *
+ * Best Practices:
+ * - Uses HSL color format for better color manipulation
+ * - Provides semantic color tokens (not raw colors)
+ * - Maintains proper contrast ratios for accessibility (WCAG AA/AAA)
+ * - Consistent with Tailwind CSS conventions
+ */
+
+import type { ColorValue } from 'react-native';
+
+/**
+ * Color tokens for light and dark themes
+ * Each token follows the pattern: purpose-variant
+ */
+export const THEME_COLORS = {
+  light: {
+    // Base colors
+    background: 'hsl(0, 0%, 100%)', // Pure white
+    foreground: 'hsl(0, 0%, 3.9%)', // Near black
+
+    // Card colors
+    card: 'hsl(0, 0%, 100%)',
+    cardForeground: 'hsl(0, 0%, 3.9%)',
+
+    // Popover colors
+    popover: 'hsl(0, 0%, 100%)',
+    popoverForeground: 'hsl(0, 0%, 3.9%)',
+
+    // Primary action colors
+    primary: 'hsl(0, 0%, 9%)',
+    primaryForeground: 'hsl(0, 0%, 98%)',
+
+    // Secondary action colors
+    secondary: 'hsl(0, 0%, 96.1%)',
+    secondaryForeground: 'hsl(0, 0%, 9%)',
+
+    // Muted/subtle colors
+    muted: 'hsl(0, 0%, 96.1%)',
+    mutedForeground: 'hsl(0, 0%, 45.1%)',
+
+    // Accent colors
+    accent: 'hsl(0, 0%, 96.1%)',
+    accentForeground: 'hsl(0, 0%, 9%)',
+
+    // Destructive/error colors
+    destructive: 'hsl(0, 84.2%, 60.2%)',
+    destructiveForeground: 'hsl(0, 0%, 98%)',
+
+    // Border and input colors
+    border: 'hsl(0, 0%, 89.8%)',
+    input: 'hsl(0, 0%, 89.8%)',
+    ring: 'hsl(0, 0%, 63%)',
+
+    // Success colors
+    success: 'hsl(142, 76%, 36%)',
+    successForeground: 'hsl(0, 0%, 98%)',
+
+    // Warning colors
+    warning: 'hsl(38, 92%, 50%)',
+    warningForeground: 'hsl(0, 0%, 9%)',
+
+    // Info colors
+    info: 'hsl(199, 89%, 48%)',
+    infoForeground: 'hsl(0, 0%, 98%)',
+  },
+  dark: {
+    // Base colors
+    background: 'hsl(0, 0%, 3.9%)', // Near black
+    foreground: 'hsl(0, 0%, 98%)', // Near white
+
+    // Card colors
+    card: 'hsl(0, 0%, 3.9%)',
+    cardForeground: 'hsl(0, 0%, 98%)',
+
+    // Popover colors
+    popover: 'hsl(0, 0%, 3.9%)',
+    popoverForeground: 'hsl(0, 0%, 98%)',
+
+    // Primary action colors (inverted from light)
+    primary: 'hsl(0, 0%, 98%)',
+    primaryForeground: 'hsl(0, 0%, 9%)',
+
+    // Secondary action colors
+    secondary: 'hsl(0, 0%, 14.9%)',
+    secondaryForeground: 'hsl(0, 0%, 98%)',
+
+    // Muted/subtle colors
+    muted: 'hsl(0, 0%, 14.9%)',
+    mutedForeground: 'hsl(0, 0%, 63.9%)',
+
+    // Accent colors
+    accent: 'hsl(0, 0%, 14.9%)',
+    accentForeground: 'hsl(0, 0%, 98%)',
+
+    // Destructive/error colors
+    destructive: 'hsl(0, 62.8%, 30.6%)',
+    destructiveForeground: 'hsl(0, 0%, 98%)',
+
+    // Border and input colors
+    border: 'hsl(0, 0%, 14.9%)',
+    input: 'hsl(0, 0%, 14.9%)',
+    ring: 'hsl(0, 0%, 45%)',
+
+    // Success colors
+    success: 'hsl(142, 76%, 36%)',
+    successForeground: 'hsl(0, 0%, 98%)',
+
+    // Warning colors
+    warning: 'hsl(38, 92%, 50%)',
+    warningForeground: 'hsl(0, 0%, 9%)',
+
+    // Info colors
+    info: 'hsl(199, 89%, 48%)',
+    infoForeground: 'hsl(0, 0%, 98%)',
+  },
+} as const;
+
+/**
+ * Convert HSL string to React Native ColorValue
+ * Useful for native platform styling where HSL needs to be converted
+ */
+export function hslToRgb(hsl: string): ColorValue {
+  // Extract h, s, l from "hsl(h, s%, l%)" format
+  const match = hsl.match(
+    /hsl\((\d+),\s*(\d+(?:\.\d+)?)%,\s*(\d+(?:\.\d+)?)%\)/
+  );
+  if (!match || !match[1] || !match[2] || !match[3]) return hsl as ColorValue;
+
+  const h = parseInt(match[1], 10) / 360;
+  const s = parseFloat(match[2]) / 100;
+  const l = parseFloat(match[3]) / 100;
+
+  let r, g, b;
+
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const hue2rgb = (p: number, q: number, t: number) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    };
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+
+  const toHex = (x: number) => {
+    const hex = Math.round(x * 255).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  };
+
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}` as ColorValue;
+}
+
+/**
+ * Get theme color value based on current theme mode
+ * Automatically selects the appropriate color from light/dark theme
+ */
+export function getThemeColorValue(
+  colorKey: keyof typeof THEME_COLORS.light,
+  isDark: boolean,
+  asRgb = false
+): ColorValue {
+  const color = isDark
+    ? THEME_COLORS.dark[colorKey]
+    : THEME_COLORS.light[colorKey];
+  return asRgb ? hslToRgb(color) : (color as ColorValue);
+}
+
+/**
+ * Component-specific dark mode class mappings
+ * Use these to ensure consistent styling across all components
+ */
+export const DARK_MODE_CLASSES = {
+  // Text variants
+  text: {
+    default: 'dark:text-foreground',
+    muted: 'dark:text-muted-foreground',
+    primary: 'dark:text-primary-foreground',
+    secondary: 'dark:text-secondary-foreground',
+    accent: 'dark:text-accent-foreground',
+    destructive: 'dark:text-destructive-foreground',
+    card: 'dark:text-card-foreground',
+  },
+
+  // Background variants
+  background: {
+    default: 'dark:bg-background',
+    card: 'dark:bg-card',
+    primary: 'dark:bg-primary',
+    secondary: 'dark:bg-secondary',
+    muted: 'dark:bg-muted',
+    accent: 'dark:bg-accent',
+    destructive: 'dark:bg-destructive',
+    popover: 'dark:bg-popover',
+  },
+
+  // Border variants
+  border: {
+    default: 'dark:border-border',
+    input: 'dark:border-input',
+    primary: 'dark:border-primary',
+    muted: 'dark:border-muted',
+    accent: 'dark:border-accent',
+    destructive: 'dark:border-destructive',
+  },
+
+  // Interactive states
+  state: {
+    hover: 'dark:hover:bg-accent',
+    active: 'dark:active:bg-accent',
+    focus: 'dark:focus:ring-ring',
+    disabled: 'dark:disabled:opacity-50',
+  },
+} as const;
+
+/**
+ * Helper to combine base classes with dark mode classes
+ * Ensures consistent application of dark mode styles
+ */
+export function withDarkMode(
+  baseClass: string,
+  darkClass: string,
+  additionalClasses?: string
+): string {
+  return [baseClass, darkClass, additionalClasses].filter(Boolean).join(' ');
+}
+
+/**
+ * Pre-configured class strings for common component patterns
+ * Use these for consistent styling across the library
+ */
+export const THEME_PRESETS = {
+  // Card-like containers
+  card: 'bg-card text-card-foreground dark:bg-card dark:text-card-foreground border border-border dark:border-border',
+
+  // Input fields
+  input:
+    'bg-background text-foreground dark:bg-background dark:text-foreground border border-input dark:border-input',
+
+  // Buttons - primary
+  buttonPrimary:
+    'bg-primary text-primary-foreground dark:bg-primary dark:text-primary-foreground',
+
+  // Buttons - secondary
+  buttonSecondary:
+    'bg-secondary text-secondary-foreground dark:bg-secondary dark:text-secondary-foreground',
+
+  // Buttons - outline
+  buttonOutline:
+    'bg-background text-foreground dark:bg-background dark:text-foreground border border-input dark:border-input',
+
+  // Buttons - ghost
+  buttonGhost:
+    'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent dark:hover:text-accent-foreground',
+
+  // Destructive elements
+  destructive:
+    'bg-destructive text-destructive-foreground dark:bg-destructive dark:text-destructive-foreground',
+
+  // Muted/subtle elements
+  muted:
+    'bg-muted text-muted-foreground dark:bg-muted dark:text-muted-foreground',
+
+  // Popover/dropdown
+  popover:
+    'bg-popover text-popover-foreground dark:bg-popover dark:text-popover-foreground border border-border dark:border-border',
+} as const;
+
+/**
+ * Semantic color map for native components
+ * Use these for StyleSheet-based styling
+ */
+export function getNativeThemeColors(isDark: boolean) {
+  return {
+    background: hslToRgb(getThemeColorValue('background', isDark) as string),
+    foreground: hslToRgb(getThemeColorValue('foreground', isDark) as string),
+    card: hslToRgb(getThemeColorValue('card', isDark) as string),
+    cardForeground: hslToRgb(
+      getThemeColorValue('cardForeground', isDark) as string
+    ),
+    primary: hslToRgb(getThemeColorValue('primary', isDark) as string),
+    primaryForeground: hslToRgb(
+      getThemeColorValue('primaryForeground', isDark) as string
+    ),
+    secondary: hslToRgb(getThemeColorValue('secondary', isDark) as string),
+    secondaryForeground: hslToRgb(
+      getThemeColorValue('secondaryForeground', isDark) as string
+    ),
+    muted: hslToRgb(getThemeColorValue('muted', isDark) as string),
+    mutedForeground: hslToRgb(
+      getThemeColorValue('mutedForeground', isDark) as string
+    ),
+    accent: hslToRgb(getThemeColorValue('accent', isDark) as string),
+    accentForeground: hslToRgb(
+      getThemeColorValue('accentForeground', isDark) as string
+    ),
+    destructive: hslToRgb(getThemeColorValue('destructive', isDark) as string),
+    destructiveForeground: hslToRgb(
+      getThemeColorValue('destructiveForeground', isDark) as string
+    ),
+    border: hslToRgb(getThemeColorValue('border', isDark) as string),
+    input: hslToRgb(getThemeColorValue('input', isDark) as string),
+    ring: hslToRgb(getThemeColorValue('ring', isDark) as string),
+  };
+}
+
+/**
+ * Type-safe theme color keys
+ */
+export type ThemeColorKey = keyof typeof THEME_COLORS.light;
+
+/**
+ * Check if a color key exists in the theme
+ */
+export function isValidThemeColor(key: string): key is ThemeColorKey {
+  return key in THEME_COLORS.light;
+}

package/src/components/ui/Accordion.tsx

@@ -0,0 +1,253 @@
+import * as AccordionPrimitive from '@rn-primitives/accordion';
+import { ChevronDown } from 'lucide-react-native';
+import { cssInterop } from 'nativewind';
+import { Platform, Pressable, View } from 'react-native';
+import Animated, {
+  FadeOutUp,
+  LayoutAnimationConfig,
+  LinearTransition,
+  useAnimatedStyle,
+  useDerivedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { cn } from '../../lib/utils';
+import { Icon } from './Icon';
+import { TextClassContext } from './Text';
+
+cssInterop(View, { className: 'style' });
+cssInterop(Pressable, { className: 'style' });
+
+/**
+ * Root accordion container with smooth animations
+ *
+ * A vertically stacked set of interactive panels where only one or multiple panels can be expanded at a time.
+ * Features smooth layout animations using Reanimated for a polished user experience.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Single selection
+ * <Accordion type="single" collapsible defaultValue="item-1">
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>
+ *       <Text>Question 1</Text>
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       <Text>Answer 1</Text>
+ *     </AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ * // Multiple selection
+ * <Accordion type="multiple">
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger><Text>Section 1</Text></AccordionTrigger>
+ *     <AccordionContent><Text>Content 1</Text></AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="item-2">
+ *     <AccordionTrigger><Text>Section 2</Text></AccordionTrigger>
+ *     <AccordionContent><Text>Content 2</Text></AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * @accessibility
+ * - Implements WAI-ARIA accordion pattern
+ * - Keyboard navigation with arrow keys and Enter/Space
+ * - Proper ARIA attributes for expanded/collapsed states
+ */
+function Accordion({
+  children,
+  ...props
+}: Omit<AccordionPrimitive.RootProps, 'asChild'> &
+  React.RefAttributes<AccordionPrimitive.RootRef>) {
+  return (
+    <LayoutAnimationConfig skipEntering>
+      <AccordionPrimitive.Root
+        {...(props as AccordionPrimitive.RootProps)}
+        asChild={Platform.OS !== 'web'}
+      >
+        <Animated.View layout={LinearTransition.duration(200)}>
+          {children}
+        </Animated.View>
+      </AccordionPrimitive.Root>
+    </LayoutAnimationConfig>
+  );
+}
+
+/**
+ * Individual accordion item with border styling
+ *
+ * Contains a trigger and content section. Each item must have a unique value prop
+ * for identification within the parent Accordion.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AccordionItem value="item-1">
+ *   <AccordionTrigger>
+ *     <Text>Click to expand</Text>
+ *   </AccordionTrigger>
+ *   <AccordionContent>
+ *     <Text>Hidden content revealed on expansion</Text>
+ *   </AccordionContent>
+ * </AccordionItem>
+ * ```
+ */
+function AccordionItem({
+  children,
+  className,
+  value,
+  ...props
+}: AccordionPrimitive.ItemProps &
+  React.RefAttributes<AccordionPrimitive.ItemRef>) {
+  return (
+    <AccordionPrimitive.Item
+      className={cn(
+        'border-border border-b',
+        Platform.select({ web: 'last:border-b-0' }),
+        className
+      )}
+      value={value}
+      asChild
+      {...props}
+    >
+      <Animated.View
+        className="native:overflow-hidden"
+        layout={Platform.select({ native: LinearTransition.duration(200) })}
+      >
+        {children}
+      </Animated.View>
+    </AccordionPrimitive.Item>
+  );
+}
+
+const Trigger = Platform.OS === 'web' ? View : Pressable;
+
+/**
+ * Clickable trigger button that toggles accordion item expansion
+ *
+ * Features an animated chevron icon that rotates based on expansion state.
+ * Automatically manages focus states and hover effects on web.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AccordionTrigger>
+ *   <Text>Click to toggle</Text>
+ * </AccordionTrigger>
+ * ```
+ *
+ * @accessibility
+ * - Automatically includes chevron icon for visual expansion indicator
+ * - Focus visible states for keyboard navigation on web
+ * - Disabled state prevents interaction
+ */
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.TriggerProps & {
+  children?: React.ReactNode;
+} & React.RefAttributes<AccordionPrimitive.TriggerRef>) {
+  const { isExpanded } = AccordionPrimitive.useItemContext();
+
+  const progress = useDerivedValue(
+    () =>
+      isExpanded
+        ? withTiming(1, { duration: 250 })
+        : withTiming(0, { duration: 200 }),
+    [isExpanded]
+  );
+  const chevronStyle = useAnimatedStyle(
+    () => ({
+      transform: [{ rotate: `${progress.value * 180}deg` }],
+    }),
+    [progress]
+  );
+
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        'text-foreground text-left text-sm font-medium',
+        Platform.select({ web: 'group-hover:underline' })
+      )}
+    >
+      <AccordionPrimitive.Header>
+        <AccordionPrimitive.Trigger {...props} asChild>
+          <Trigger
+            className={cn(
+              'flex-row items-start justify-between gap-4 rounded-md py-4 disabled:opacity-50',
+              Platform.select({
+                web: 'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 outline-none transition-all hover:underline focus-visible:ring-[3px] disabled:pointer-events-none [&[data-state=open]>svg]:rotate-180',
+              }),
+              className
+            )}
+          >
+            <>{children}</>
+            <Animated.View style={chevronStyle}>
+              <Icon
+                as={ChevronDown}
+                size={16}
+                className={cn(
+                  'text-muted-foreground shrink-0',
+                  Platform.select({
+                    web: 'pointer-events-none translate-y-0.5 transition-transform duration-200',
+                  })
+                )}
+              />
+            </Animated.View>
+          </Trigger>
+        </AccordionPrimitive.Trigger>
+      </AccordionPrimitive.Header>
+    </TextClassContext.Provider>
+  );
+}
+
+/**
+ * Collapsible content container with smooth animations
+ *
+ * Automatically animates height changes when expanding/collapsing. Uses platform-specific
+ * animations (CSS transitions on web, Reanimated on native).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AccordionContent>
+ *   <Text>This content slides in and out smoothly</Text>
+ *   <View className="mt-2">
+ *     <Text>Additional content here</Text>
+ *   </View>
+ * </AccordionContent>
+ * ```
+ */
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.ContentProps &
+  React.RefAttributes<AccordionPrimitive.ContentRef>) {
+  const { isExpanded } = AccordionPrimitive.useItemContext();
+  return (
+    <TextClassContext.Provider value="text-foreground text-sm">
+      <AccordionPrimitive.Content
+        className={cn(
+          'overflow-hidden',
+          Platform.select({
+            web: isExpanded ? 'animate-accordion-down' : 'animate-accordion-up',
+          })
+        )}
+        {...props}
+      >
+        <Animated.View
+          exiting={Platform.select({ native: FadeOutUp.duration(200) })}
+          className={cn('pb-4', className)}
+        >
+          {children}
+        </Animated.View>
+      </AccordionPrimitive.Content>
+    </TextClassContext.Provider>
+  );
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };