@campxdev/react-native-blueprint 0.1.0

package/lib/module/lib/ThemeProvider.js

@@ -0,0 +1,173 @@
+"use strict";
+
+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)
+ */
+
+/**
+ * Context type for theme management
+ * @internal
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const ThemeContext = /*#__PURE__*/React.createContext(undefined);
+
+/**
+ * Props for ThemeProvider component
+ */
+
+/**
+ * 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'
+}) {
+  const systemColorScheme = useColorScheme();
+  const {
+    setColorScheme: setNativeWindColorScheme
+  } = useNativeWindColorScheme();
+  const [mode, setModeState] = React.useState(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 => {
+    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 /*#__PURE__*/_jsx(ThemeContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+
+/**
+ * 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() {
+  const context = React.useContext(ThemeContext);
+  return context?.isDark;
+}
+//# sourceMappingURL=ThemeProvider.js.map

package/lib/module/lib/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useColorScheme","useNativeWindColorScheme","jsx","_jsx","ThemeContext","createContext","undefined","ThemeProvider","children","defaultMode","systemColorScheme","setColorScheme","setNativeWindColorScheme","mode","setModeState","useState","isDark","useMemo","useEffect","setMode","useCallback","newMode","THEME","require","colors","dark","light","value","Provider","useTheme","context","useContext","Error","useThemeMode"],"sourceRoot":"../../../src","sources":["lib/ThemeProvider.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/lib/cornerRadius.js

@@ -0,0 +1,164 @@
+"use strict";
+
+/**
+ * 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
+};
+
+/**
+ * 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)
+};
+
+/**
+ * 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) {
+  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, height) {
+  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, options) {
+  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
+};
+//# sourceMappingURL=cornerRadius.js.map

package/lib/module/lib/cornerRadius.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["RADIUS","R0","R1","R2","R3","R4","R5","R6","R7","R8","HEIGHT_THRESHOLDS","TINY","SMALL","LARGE","getRadiusForHeight","height","getRadiusForDimensions","width","smallestDimension","Math","min","getCustomRadius","options","tinyThreshold","smallThreshold","tinyRadius","smallRadius","largeRadius","CORNER_SMOOTHING","RADIUS_PRESET","none","tiny","small","large","pill","circle"],"sourceRoot":"../../../src","sources":["lib/cornerRadius.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,OAAO,MAAMA,MAAM,GAAG;EACpBC,EAAE,EAAE,CAAC;EAAE;EACPC,EAAE,EAAE,CAAC;EAAE;EACPC,EAAE,EAAE,CAAC;EAAE;EACPC,EAAE,EAAE,CAAC;EAAE;EACPC,EAAE,EAAE,EAAE;EAAE;EACRC,EAAE,EAAE,EAAE;EAAE;EACRC,EAAE,EAAE,EAAE;EAAE;EACRC,EAAE,EAAE,EAAE;EAAE;EACRC,EAAE,EAAE,EAAE,CAAE;AACV,CAAU;;AAEV;AACA;AACA;AACA,MAAMC,iBAAiB,GAAG;EACxBC,IAAI,EAAE,EAAE;EAAE;EACVC,KAAK,EAAE,EAAE;EAAE;EACXC,KAAK,EAAE,EAAE,CAAE;AACb,CAAU;;AAEV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAACC,MAAc,EAAU;EACzD,IAAIA,MAAM,GAAGL,iBAAiB,CAACC,IAAI,EAAE;IACnC,OAAOX,MAAM,CAACG,EAAE,CAAC,CAAC;EACpB;EAEA,IAAIY,MAAM,GAAGL,iBAAiB,CAACE,KAAK,EAAE;IACpC,OAAOZ,MAAM,CAACK,EAAE,CAAC,CAAC;EACpB;EAEA,OAAOL,MAAM,CAACM,EAAE,CAAC,CAAC;AACpB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASU,sBAAsBA,CAACC,KAAa,EAAEF,MAAc,EAAU;EAC5E,MAAMG,iBAAiB,GAAGC,IAAI,CAACC,GAAG,CAACH,KAAK,EAAEF,MAAM,CAAC;EACjD,OAAOD,kBAAkB,CAACI,iBAAiB,CAAC;AAC9C;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASG,eAAeA,CAC7BN,MAAc,EACdO,OAMC,EACO;EACR,MAAM;IACJC,aAAa,GAAGb,iBAAiB,CAACC,IAAI;IACtCa,cAAc,GAAGd,iBAAiB,CAACE,KAAK;IACxCa,UAAU,GAAGzB,MAAM,CAACG,EAAE;IACtBuB,WAAW,GAAG1B,MAAM,CAACK,EAAE;IACvBsB,WAAW,GAAG3B,MAAM,CAACM;EACvB,CAAC,GAAGgB,OAAO,IAAI,CAAC,CAAC;EAEjB,IAAIP,MAAM,GAAGQ,aAAa,EAAE;IAC1B,OAAOE,UAAU;EACnB;EAEA,IAAIV,MAAM,GAAGS,cAAc,EAAE;IAC3B,OAAOE,WAAW;EACpB;EAEA,OAAOC,WAAW;AACpB;;AAEA;AACA;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,GAAG,GAAG;;AAEnC;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,GAAG;EAC3BC,IAAI,EAAE9B,MAAM,CAACC,EAAE;EAAE;EACjB8B,IAAI,EAAE/B,MAAM,CAACG,EAAE;EAAE;EACjB6B,KAAK,EAAEhC,MAAM,CAACK,EAAE;EAAE;EAClB4B,KAAK,EAAEjC,MAAM,CAACM,EAAE;EAAE;EAClB4B,IAAI,EAAElC,MAAM,CAACO,EAAE;EAAE;EACjB4B,MAAM,EAAE,IAAI,CAAE;AAChB,CAAU","ignoreList":[]}

package/lib/module/lib/fonts.js

@@ -0,0 +1,25 @@
+"use strict";
+
+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
+};
+//# sourceMappingURL=fonts.js.map

package/lib/module/lib/fonts.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Poppins_400Regular","Poppins_600SemiBold","Poppins_800ExtraBold","Heebo_400Regular","Heebo_600SemiBold","fonts"],"sourceRoot":"../../../src","sources":["lib/fonts.ts"],"mappings":";;AAAA,SACEA,kBAAkB,EAClBC,mBAAmB,EACnBC,oBAAoB,QACf,4BAA4B;AACnC,SAASC,gBAAgB,EAAEC,iBAAiB,QAAQ,0BAA0B;;AAE9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,KAAK,GAAG;EACnBL,kBAAkB;EAClBC,mBAAmB;EACnBC,oBAAoB;EACpBC,gBAAgB;EAChBC;AACF,CAAC","ignoreList":[]}

package/lib/module/lib/theme.js

@@ -0,0 +1,212 @@
+"use strict";
+
+import { DarkTheme, DefaultTheme } from '@react-navigation/native';
+
+/**
+ * Custom theme colors based on your Figma design tokens
+ * Using your categorized color system:
+ * 1. Surfaces - Page and card backgrounds
+ * 2. Text - All text colors with opacity variants
+ * 3. Primary - Main buttons and CTAs
+ * 4. Secondary - Secondary buttons
+ * 5. Tertiary/Accent - Highlights and selections
+ * 6. Borders - All borders and dividers
+ * 7. Highlights - Status/semantic colors
+ * 8. Brand - Brand accent colors (use sparingly)
+ */
+export const THEME = {
+  light: {
+    // === 1. SURFACES ===
+    background: 'hsl(210, 17%, 97%)',
+    // #F7F8FA
+    card: 'hsl(0, 0%, 100%)',
+    // #FFFFFF
+    popover: 'hsl(0, 0%, 100%)',
+    // #FFFFFF
+    muted: 'hsl(0, 0%, 100%)',
+    // #FFFFFF
+
+    // === 2. TEXT ===
+    foreground: 'hsl(0, 0%, 7%)',
+    // #121212
+    cardForeground: 'hsl(0, 0%, 7%)',
+    // #121212
+    popoverForeground: 'hsl(0, 0%, 7%)',
+    // #121212
+    mutedForeground: 'hsla(0, 0%, 7%, 0.7)',
+    // #121212 at 70%
+
+    // === 3. PRIMARY (Main buttons, CTAs) ===
+    primary: 'hsl(200, 13%, 11%)',
+    // #161A1D - Near black
+    primaryForeground: 'hsl(0, 0%, 100%)',
+    // #FFFFFF
+
+    // === 4. SECONDARY (Secondary buttons) ===
+    secondary: 'hsl(218, 14%, 53%)',
+    // #64748B
+    secondaryForeground: 'hsl(0, 0%, 100%)',
+    // #FFFFFF
+
+    // === 5. TERTIARY/ACCENT (Highlights, selections) ===
+    accent: 'hsl(356, 76%, 57%)',
+    // #E43341 - Crimson
+    accentForeground: 'hsl(0, 0%, 100%)',
+    // #FFFFFF
+
+    // === 6. BORDERS ===
+    border: 'hsl(214, 32%, 84%)',
+    // #CBD5E1
+    input: 'hsl(214, 32%, 84%)',
+    // #CBD5E1
+    ring: 'hsl(200, 13%, 11%)',
+    // #161A1D - Same as primary
+
+    // === 7. HIGHLIGHTS ===
+    destructive: 'hsl(356, 87%, 57%)',
+    // #F2353C - Red
+    destructiveForeground: 'hsl(0, 0%, 100%)',
+    success: 'hsl(88, 37%, 52%)',
+    // #88B053 - Green
+    info: 'hsl(189, 45%, 51%)',
+    // #4BAABE - Blue
+    warning: 'hsl(28, 81%, 57%)',
+    // #ED9035 - Orange
+
+    // === 8. BRAND COLORS (Custom - use manually) ===
+    brand1: 'hsl(252, 97%, 25%)',
+    // #1E027F - Deep violet
+    brand2: 'hsl(356, 76%, 57%)',
+    // #E43341 - Crimson
+    brand3: 'hsl(304, 69%, 33%)',
+    // #931C88 - Magenta
+
+    // === CHART COLORS ===
+    chart1: 'hsl(88, 37%, 52%)',
+    // #88B053 - Green
+    chart2: 'hsl(189, 45%, 51%)',
+    // #4BAABE - Blue
+    chart3: 'hsl(28, 81%, 57%)',
+    // #ED9035 - Orange
+    chart4: 'hsl(254, 46%, 42%)',
+    // #573DAB - Purple
+    chart5: 'hsl(348, 78%, 60%)',
+    // #EA4A6B - Pink
+
+    // === MISC ===
+    radius: '0.5rem'
+  },
+  dark: {
+    // === 1. SURFACES ===
+    background: 'hsl(200, 13%, 10%)',
+    // #161A1D
+    card: 'hsl(180, 14%, 13%)',
+    // #1D2727
+    popover: 'hsl(180, 14%, 13%)',
+    // #1D2727
+    muted: 'hsl(180, 14%, 13%)',
+    // #1D2727
+
+    // === 2. TEXT ===
+    foreground: 'hsl(0, 0%, 100%)',
+    // #FFFFFF
+    cardForeground: 'hsl(0, 0%, 100%)',
+    // #FFFFFF
+    popoverForeground: 'hsl(0, 0%, 100%)',
+    // #FFFFFF
+    mutedForeground: 'hsla(0, 0%, 100%, 0.7)',
+    // #FFFFFF at 70%
+
+    // === 3. PRIMARY (Main buttons, CTAs) ===
+    primary: 'hsl(210, 13%, 85%)',
+    // #D0D5D9 - Light grey (softer than white)
+    primaryForeground: 'hsl(200, 13%, 11%)',
+    // #161A1D - Dark text
+
+    // === 4. SECONDARY (Secondary buttons) ===
+    secondary: 'hsl(218, 14%, 53%)',
+    // #64748B
+    secondaryForeground: 'hsl(0, 0%, 100%)',
+    // #FFFFFF
+
+    // === 5. TERTIARY/ACCENT (Highlights, selections) ===
+    accent: 'hsl(356, 76%, 57%)',
+    // #E43341 - Crimson
+    accentForeground: 'hsl(0, 0%, 100%)',
+    // #FFFFFF
+
+    // === 6. BORDERS ===
+    border: 'hsl(215, 25%, 27%)',
+    // #334155 - Balanced slate-700
+    input: 'hsl(215, 25%, 27%)',
+    // #334155
+    ring: 'hsl(210, 13%, 85%)',
+    // #D0D5D9 - Same as primary
+
+    // === 7. HIGHLIGHTS ===
+    destructive: 'hsl(356, 87%, 57%)',
+    // #F2353C - Red
+    destructiveForeground: 'hsl(0, 0%, 100%)',
+    success: 'hsl(88, 37%, 52%)',
+    // #88B053 - Green
+    info: 'hsl(189, 45%, 51%)',
+    // #4BAABE - Blue
+    warning: 'hsl(28, 81%, 57%)',
+    // #ED9035 - Orange
+
+    // === 8. BRAND COLORS (Custom - use manually) ===
+    brand1: 'hsl(244, 100%, 73%)',
+    // #8075FF - Cool violet
+    brand2: 'hsl(356, 76%, 57%)',
+    // #E43341 - Crimson
+    brand3: 'hsl(291, 46%, 61%)',
+    // #C160D4 - Light magenta
+
+    // === CHART COLORS ===
+    chart1: 'hsl(88, 37%, 52%)',
+    // #88B053 - Green
+    chart2: 'hsl(189, 45%, 51%)',
+    // #4BAABE - Blue
+    chart3: 'hsl(28, 81%, 57%)',
+    // #ED9035 - Orange
+    chart4: 'hsl(254, 46%, 42%)',
+    // #573DAB - Purple
+    chart5: 'hsl(348, 78%, 60%)',
+    // #EA4A6B - Pink
+
+    // === MISC ===
+    radius: '0.5rem'
+  }
+};
+
+/**
+ * React Navigation theme configuration
+ * Maps our custom theme to React Navigation's theme structure
+ */
+export const NAV_THEME = {
+  light: {
+    ...DefaultTheme,
+    colors: {
+      ...DefaultTheme.colors,
+      background: THEME.light.background,
+      border: THEME.light.border,
+      card: THEME.light.card,
+      notification: THEME.light.destructive,
+      primary: THEME.light.primary,
+      text: THEME.light.foreground
+    }
+  },
+  dark: {
+    ...DarkTheme,
+    colors: {
+      ...DarkTheme.colors,
+      background: THEME.dark.background,
+      border: THEME.dark.border,
+      card: THEME.dark.card,
+      notification: THEME.dark.destructive,
+      primary: THEME.dark.primary,
+      text: THEME.dark.foreground
+    }
+  }
+};
+//# sourceMappingURL=theme.js.map

package/lib/module/lib/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DarkTheme","DefaultTheme","THEME","light","background","card","popover","muted","foreground","cardForeground","popoverForeground","mutedForeground","primary","primaryForeground","secondary","secondaryForeground","accent","accentForeground","border","input","ring","destructive","destructiveForeground","success","info","warning","brand1","brand2","brand3","chart1","chart2","chart3","chart4","chart5","radius","dark","NAV_THEME","colors","notification","text"],"sourceRoot":"../../../src","sources":["lib/theme.ts"],"mappings":"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","ignoreList":[]}