@campxdev/react-native-blueprint 0.1.0

package/src/components/ui/Tooltip.tsx

@@ -0,0 +1,117 @@
+import { NativeOnlyAnimatedView } from './Native-Only-Animated-View';
+import { TextClassContext } from './Text';
+import { cn } from '../../lib/utils';
+import * as TooltipPrimitive from '@rn-primitives/tooltip';
+import * as React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import { FadeInDown, FadeInUp, FadeOut } from 'react-native-reanimated';
+import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
+
+/**
+ * Root tooltip component - provides context for trigger and content
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Tooltip>
+ *   <TooltipTrigger>
+ *     <Button variant="outline">
+ *       <Text>Hover me</Text>
+ *     </Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>
+ *     <Text>Helpful tooltip text</Text>
+ *   </TooltipContent>
+ * </Tooltip>
+ * ```
+ */
+const Tooltip = TooltipPrimitive.Root;
+
+/**
+ * Trigger component that shows tooltip on hover/press
+ *
+ * @component
+ */
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+/**
+ * Full window overlay wrapper for iOS, Fragment for other platforms
+ */
+const FullWindowOverlay =
+  Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
+
+/**
+ * Tooltip content component
+ *
+ * Displays helpful text in a small popup when hovering or pressing the trigger.
+ * Includes directional animations based on positioning.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TooltipContent side="top" sideOffset={8}>
+ *   <Text>Add to favorites</Text>
+ * </TooltipContent>
+ * ```
+ *
+ * @accessibility
+ * - Content is announced by screen readers
+ * - Proper ARIA attributes for tooltips
+ * - Dismissible on escape key (web)
+ */
+function TooltipContent({
+  className,
+  sideOffset = 4,
+  portalHost,
+  side = 'top',
+  ...props
+}: TooltipPrimitive.ContentProps &
+  React.RefAttributes<TooltipPrimitive.ContentRef> & {
+    portalHost?: string;
+  }) {
+  return (
+    <TooltipPrimitive.Portal hostName={portalHost}>
+      <FullWindowOverlay>
+        <TooltipPrimitive.Overlay
+          style={Platform.select({ native: StyleSheet.absoluteFill })}
+        >
+          <NativeOnlyAnimatedView
+            entering={
+              side === 'top'
+                ? FadeInDown.withInitialValues({
+                    transform: [{ translateY: 3 }],
+                  }).duration(150)
+                : FadeInUp.withInitialValues({
+                    transform: [{ translateY: -5 }],
+                  })
+            }
+            exiting={FadeOut}
+          >
+            <TextClassContext.Provider value="text-xs text-primary-foreground">
+              <TooltipPrimitive.Content
+                sideOffset={sideOffset}
+                className={cn(
+                  'bg-primary z-50 rounded-md px-3 py-2 sm:py-1.5',
+                  Platform.select({
+                    web: cn(
+                      'animate-in fade-in-0 zoom-in-95 origin-(--radix-tooltip-content-transform-origin) w-fit text-balance',
+                      side === 'bottom' && 'slide-in-from-top-2',
+                      side === 'left' && 'slide-in-from-right-2',
+                      side === 'right' && 'slide-in-from-left-2',
+                      side === 'top' && 'slide-in-from-bottom-2'
+                    ),
+                  }),
+                  className
+                )}
+                side={side}
+                {...props}
+              />
+            </TextClassContext.Provider>
+          </NativeOnlyAnimatedView>
+        </TooltipPrimitive.Overlay>
+      </FullWindowOverlay>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipContent, TooltipTrigger };

package/src/components/ui/index.ts

@@ -0,0 +1,42 @@
+export * from './Accordion';
+export * from './Alert';
+export * from './Alert-Dialog';
+export * from './AppBar';
+export * from './Aspect-Ratio';
+export * from './Avatar';
+export * from './Badge';
+export * from './Bottom-Sheet';
+export * from './Button';
+export * from './Card';
+export * from './Checkbox';
+export * from './Collapsible';
+export * from './Context-Menu';
+export * from './Custom-Card';
+export * from './Dialog';
+export * from './Dropdown-Menu';
+export * from './Floating-Action';
+export * from './Greeting-Card';
+export * from './Hover-Card';
+export * from './Icon';
+export * from './Input';
+export * from './Label';
+export * from './Menubar';
+export * from './NavBar';
+export * from './Popover';
+export * from './Progress';
+export * from './Radio-Group';
+export * from './Select';
+export * from './Separator';
+export * from './SizedBox';
+export * from './Skeleton';
+export * from './Slider';
+export * from './Switch';
+export * from './Table';
+export * from './Tabs';
+export * from './Text';
+export * from './Textarea';
+export * from './Theme-Toggle';
+export * from './Toast';
+export * from './Toggle';
+export * from './Toggle-Group';
+export * from './Tooltip';

package/src/index.tsx

@@ -0,0 +1,24 @@
+// Export components
+export * from './components/ui';
+
+// Export layout
+export { default as RootLayout } from './app/_layout';
+
+// Export utilities
+export { cn } from './lib/utils';
+export { THEME, NAV_THEME } from './lib/theme';
+export { ThemeProvider, useTheme } from './lib/ThemeProvider';
+
+// Corner radius utilities
+export {
+  getRadiusForHeight,
+  getRadiusForDimensions,
+  getCustomRadius,
+  RADIUS,
+  RADIUS_PRESET,
+  CORNER_SMOOTHING,
+} from './lib/cornerRadius';
+
+// Font configuration
+export { fonts } from './lib/fonts';
+export type { FontName } from './lib/fonts';

package/src/lib/ThemeProvider.tsx

@@ -0,0 +1,204 @@
+import * as React from 'react';
+import { useColorScheme } from 'react-native';
+import { useColorScheme as useNativeWindColorScheme } from 'nativewind';
+
+/**
+ * Available theme modes for the application
+ * @typedef {'light' | 'dark' | 'system'} ThemeMode
+ * - `light`: Force light theme regardless of system preference
+ * - `dark`: Force dark theme regardless of system preference
+ * - `system`: Automatically follow device system theme preference (default)
+ */
+export type ThemeMode = 'light' | 'dark' | 'system';
+
+/**
+ * Context type for theme management
+ * @internal
+ */
+type ThemeContextType = {
+  /** Current theme mode setting */
+  mode: ThemeMode;
+  /** Whether dark mode is currently active (computed from mode and system preference) */
+  isDark: boolean;
+  /** Function to change the theme mode */
+  setMode: (mode: ThemeMode) => void;
+  /** Theme color tokens for the current mode */
+  colors: typeof import('./theme').THEME.light;
+};
+
+const ThemeContext = React.createContext<ThemeContextType | undefined>(
+  undefined
+);
+
+/**
+ * Props for ThemeProvider component
+ */
+type ThemeProviderProps = {
+  /** Application content to provide theme context to */
+  children: React.ReactNode;
+  /**
+   * Initial theme mode
+   * @default 'system'
+   */
+  defaultMode?: ThemeMode;
+  /**
+   * Storage key for persisting theme preference (not yet implemented)
+   * @deprecated Currently not used - will be implemented in future version
+   */
+  storageKey?: string;
+};
+
+/**
+ * Theme Provider component that manages application theme state
+ *
+ * Provides theme context to all child components, enabling dark mode support
+ * throughout the application. Automatically responds to system theme changes
+ * when mode is set to 'system'.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage with system theme
+ * function App() {
+ *   return (
+ *     <ThemeProvider>
+ *       <YourApp />
+ *     </ThemeProvider>
+ *   );
+ * }
+ *
+ * // Start with dark mode
+ * function App() {
+ *   return (
+ *     <ThemeProvider defaultMode="dark">
+ *       <YourApp />
+ *     </ThemeProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @param {ThemeProviderProps} props - Component props
+ * @returns {JSX.Element} Provider component wrapping children with theme context
+ *
+ * @see {@link useTheme} for accessing theme in child components
+ * @see {@link useThemeMode} for optional theme access without error
+ */
+export function ThemeProvider({
+  children,
+  defaultMode = 'system',
+}: ThemeProviderProps) {
+  const systemColorScheme = useColorScheme();
+  const { setColorScheme: setNativeWindColorScheme } =
+    useNativeWindColorScheme();
+  const [mode, setModeState] = React.useState<ThemeMode>(defaultMode);
+
+  const isDark = React.useMemo(() => {
+    if (mode === 'system') {
+      return systemColorScheme === 'dark';
+    }
+    return mode === 'dark';
+  }, [mode, systemColorScheme]);
+
+  // Sync with nativewind when mode or isDark changes
+  React.useEffect(() => {
+    if (mode === 'system') {
+      setNativeWindColorScheme(systemColorScheme === 'dark' ? 'dark' : 'light');
+    } else {
+      setNativeWindColorScheme(mode);
+    }
+  }, [mode, systemColorScheme, setNativeWindColorScheme]);
+
+  const setMode = React.useCallback((newMode: ThemeMode) => {
+    setModeState(newMode);
+  }, []);
+
+  const { THEME } = require('./theme');
+  const colors = React.useMemo(
+    () => (isDark ? THEME.dark : THEME.light),
+    [isDark, THEME]
+  );
+
+  const value = React.useMemo(
+    () => ({
+      mode,
+      isDark,
+      setMode,
+      colors,
+    }),
+    [mode, isDark, setMode, colors]
+  );
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+}
+
+/**
+ * Hook to access theme context and controls
+ *
+ * Provides access to the current theme state and methods to change the theme.
+ * Must be used within a ThemeProvider component tree.
+ *
+ * @returns {ThemeContextType} Theme context object
+ * @throws {Error} If used outside of ThemeProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { mode, isDark, setMode, colors } = useTheme();
+ *
+ *   return (
+ *     <View style={{ backgroundColor: colors.background }}>
+ *       <Text style={{ color: colors.foreground }}>
+ *         Current mode: {mode} (Dark: {isDark ? 'Yes' : 'No'})
+ *       </Text>
+ *       <Button onPress={() => setMode(isDark ? 'light' : 'dark')}>
+ *         <Text>Toggle Theme</Text>
+ *       </Button>
+ *     </View>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link ThemeProvider} for setup
+ * @see {@link useThemeMode} for optional access without error throwing
+ */
+export function useTheme() {
+  const context = React.useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}
+
+/**
+ * Optional hook to get current dark mode state
+ *
+ * Similar to useTheme but only returns the isDark boolean and doesn't throw
+ * an error if used outside ThemeProvider. Useful for components that want
+ * to adapt to theme but don't require it.
+ *
+ * @returns {boolean | undefined} Whether dark mode is active, or undefined if no provider
+ *
+ * @example
+ * ```tsx
+ * function OptionalThemedComponent() {
+ *   const isDark = useThemeMode();
+ *
+ *   // Component works with or without ThemeProvider
+ *   const backgroundColor = isDark ? '#000' : '#fff';
+ *
+ *   return (
+ *     <View style={{ backgroundColor }}>
+ *       <Text>This component adapts if theme is available</Text>
+ *     </View>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link useTheme} for full theme access (requires provider)
+ */
+export function useThemeMode(): boolean | undefined {
+  const context = React.useContext(ThemeContext);
+  return context?.isDark;
+}

package/src/lib/cornerRadius.ts

@@ -0,0 +1,160 @@
+/**
+ * Corner Radius System
+ *
+ * Automatically calculates the appropriate corner radius based on element dimensions.
+ *
+ * Design Rule:
+ * - Elements < 80px height → 12px radius
+ * - Elements ≥ 80px height → 20px radius
+ * - All corners use 100% smoothing (Apple-style squircles)
+ *
+ * Examples:
+ * - Button (50px height) → 12px
+ * - Chip (24px height) → 12px
+ * - Checkbox (16px height) → 4px (special case for very small)
+ * - Small card (60px height) → 12px
+ * - Large card (200px height) → 20px
+ * - Dialog (400px height) → 20px
+ */
+
+/**
+ * Primitive radius values from your design system
+ * Your exact values: 0, 2, 4, 8, 12, 20, 24, 32, 48
+ */
+export const RADIUS = {
+  R0: 0, // None
+  R1: 2, // Tiny
+  R2: 4, // Extra small
+  R3: 8, // Small
+  R4: 12, // Medium
+  R5: 20, // Large
+  R6: 24, // Extra large
+  R7: 32, // 2X large
+  R8: 48, // 3X large / Pill
+} as const;
+
+/**
+ * Height thresholds for radius calculation
+ */
+const HEIGHT_THRESHOLDS = {
+  TINY: 20, // < 20px height → Use R2 (4px) for very small elements
+  SMALL: 80, // < 80px height → Use R4 (12px)
+  LARGE: 80, // ≥ 80px height → Use R5 (20px)
+} as const;
+
+/**
+ * Calculate corner radius based on element height
+ *
+ * @param height - Element height in pixels
+ * @returns Corner radius in pixels
+ *
+ * @example
+ * ```tsx
+ * // Button (50px height)
+ * const radius = getRadiusForHeight(50); // Returns 12
+ *
+ * // Checkbox (16px height)
+ * const radius = getRadiusForHeight(16); // Returns 4
+ *
+ * // Card (160px height)
+ * const radius = getRadiusForHeight(160); // Returns 20
+ * ```
+ */
+export function getRadiusForHeight(height: number): number {
+  if (height < HEIGHT_THRESHOLDS.TINY) {
+    return RADIUS.R2; // 4px for very small elements (checkbox, badge, etc.)
+  }
+
+  if (height < HEIGHT_THRESHOLDS.SMALL) {
+    return RADIUS.R4; // 12px for small-medium elements (button, chip, input, etc.)
+  }
+
+  return RADIUS.R5; // 20px for large elements (card, dialog, sheet, etc.)
+}
+
+/**
+ * Calculate corner radius based on smallest dimension (width or height)
+ * Useful for square or nearly-square elements
+ *
+ * @param width - Element width in pixels
+ * @param height - Element height in pixels
+ * @returns Corner radius in pixels
+ *
+ * @example
+ * ```tsx
+ * // Square checkbox (16×16)
+ * const radius = getRadiusForDimensions(16, 16); // Returns 4
+ *
+ * // Wide button (200×50)
+ * const radius = getRadiusForDimensions(200, 50); // Returns 12 (based on height)
+ *
+ * // Tall card (300×200)
+ * const radius = getRadiusForDimensions(300, 200); // Returns 20 (based on width)
+ * ```
+ */
+export function getRadiusForDimensions(width: number, height: number): number {
+  const smallestDimension = Math.min(width, height);
+  return getRadiusForHeight(smallestDimension);
+}
+
+/**
+ * Get corner radius with custom thresholds
+ * Advanced usage when you need different breakpoints
+ *
+ * @param height - Element height in pixels
+ * @param options - Custom threshold options
+ * @returns Corner radius in pixels
+ *
+ * @example
+ * ```tsx
+ * // Use 20px radius for elements ≥ 100px instead of 80px
+ * const radius = getCustomRadius(90, { largeThreshold: 100 });
+ * ```
+ */
+export function getCustomRadius(
+  height: number,
+  options?: {
+    tinyThreshold?: number;
+    smallThreshold?: number;
+    tinyRadius?: number;
+    smallRadius?: number;
+    largeRadius?: number;
+  }
+): number {
+  const {
+    tinyThreshold = HEIGHT_THRESHOLDS.TINY,
+    smallThreshold = HEIGHT_THRESHOLDS.SMALL,
+    tinyRadius = RADIUS.R2,
+    smallRadius = RADIUS.R4,
+    largeRadius = RADIUS.R5,
+  } = options || {};
+
+  if (height < tinyThreshold) {
+    return tinyRadius;
+  }
+
+  if (height < smallThreshold) {
+    return smallRadius;
+  }
+
+  return largeRadius;
+}
+
+/**
+ * Corner smoothing value (0-1)
+ * 1.0 = 100% smoothing (Apple-style squircles)
+ */
+export const CORNER_SMOOTHING = 1.0;
+
+/**
+ * Preset radius values for common use cases
+ * Use these when you know the exact size you want
+ */
+export const RADIUS_PRESET = {
+  none: RADIUS.R0, // 0px - No radius
+  tiny: RADIUS.R2, // 4px - Checkbox, badge, tooltip
+  small: RADIUS.R4, // 12px - Button, chip, input, small card
+  large: RADIUS.R5, // 20px - Large card, dialog, sheet
+  pill: RADIUS.R6, // 48px - Fully rounded
+  circle: 9999, // Full circle - Avatar, radio button
+} as const;

package/src/lib/fonts.ts

@@ -0,0 +1,28 @@
+import {
+  Poppins_400Regular,
+  Poppins_600SemiBold,
+  Poppins_800ExtraBold,
+} from '@expo-google-fonts/poppins';
+import { Heebo_400Regular, Heebo_600SemiBold } from '@expo-google-fonts/heebo';
+
+/**
+ * Font configuration for CampX Design System
+ *
+ * Fonts:
+ * - Poppins: Used for headings, buttons, labels, subtitles
+ * - Heebo: Used for body text, inputs, captions
+ *
+ * Weights:
+ * - 400 (Regular): Body text, labels, captions
+ * - 600 (Semi Bold): Subtitles, buttons, emphasized body
+ * - 800 (Extra Bold): Headings
+ */
+export const fonts = {
+  Poppins_400Regular,
+  Poppins_600SemiBold,
+  Poppins_800ExtraBold,
+  Heebo_400Regular,
+  Heebo_600SemiBold,
+};
+
+export type FontName = keyof typeof fonts;