@whitemordred/react-native-bootstrap5
Version:
A complete React Native library that replicates Bootstrap 5.3 with 100% feature parity, full theming support, CSS variables, and dark/light mode
988 lines • 28.3 kB
TypeScript
import { ThemeMode, ThemePreferences, Theme } from './defaultTheme';
import { ColorUtils } from './themeUtils';
/**
* Advanced hook for theme management with persistence and system integration
*/
export declare const useAdvancedTheme: () => {
theme: {
colors: {
input: {
background: string;
border: string;
borderFocus: string;
placeholder: string;
};
button: {
primaryBg: string;
primaryText: string;
primaryBorder: string;
primaryHover: string;
primaryActive: string;
primaryDisabled: string;
};
textPrimary: "#212529";
textSecondary: "#6c757d";
textMuted: "#adb5bd";
textDisabled: "#dee2e6";
backgroundPrimary: "#ffffff";
backgroundSecondary: "#f8f9fa";
backgroundTertiary: "#e9ecef";
surfaceElevated: "#ffffff";
surfaceCard: "#ffffff";
surfaceModal: "#ffffff";
borderPrimary: "#dee2e6";
borderSecondary: "#e9ecef";
borderFocus: "#86b7fe";
linkDefault: "#0d6efd";
linkHover: "#0a58ca";
linkVisited: "#6f42c1";
successBg: "#d1e7dd";
infoBg: "#d1ecf1";
warningBg: "#fff3cd";
dangerBg: "#f8d7da";
primary: string;
secondary: string;
success: string;
info: string;
warning: string;
danger: string;
light: string;
dark: string;
white: string;
black: string;
blue: string;
indigo: string;
purple: string;
pink: string;
red: string;
orange: string;
yellow: string;
green: string;
teal: string;
cyan: string;
gray: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
};
darkColors: {
input: {
background: string;
border: string;
borderFocus: string;
placeholder: string;
};
button: {
primaryBg: string;
primaryText: string;
primaryBorder: string;
primaryHover: string;
primaryActive: string;
primaryDisabled: string;
};
textPrimary: "#ffffff";
textSecondary: "#adb5bd";
textMuted: "#6c757d";
textDisabled: "#495057";
backgroundPrimary: "#0d1117";
backgroundSecondary: "#161b22";
backgroundTertiary: "#21262d";
surfaceElevated: "#21262d";
surfaceCard: "#161b22";
surfaceModal: "#21262d";
borderPrimary: "#30363d";
borderSecondary: "#21262d";
borderFocus: "#1f6feb";
linkDefault: "#58a6ff";
linkHover: "#79c0ff";
linkVisited: "#d2a8ff";
successBg: "#1a2e1a";
infoBg: "#0c2d48";
warningBg: "#3d2914";
dangerBg: "#4c1e1e";
primary: string;
secondary: string;
success: string;
info: string;
warning: string;
danger: string;
light: string;
dark: string;
white: string;
black: string;
blue: string;
indigo: string;
purple: string;
pink: string;
red: string;
orange: string;
yellow: string;
green: string;
teal: string;
cyan: string;
gray: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
};
spacing: {
0: number;
px: number;
0.5: number;
1: number;
1.5: number;
2: number;
2.5: number;
3: number;
3.5: number;
4: number;
5: number;
6: number;
7: number;
8: number;
9: number;
10: number;
11: number;
12: number;
14: number;
16: number;
20: number;
24: number;
28: number;
32: number;
36: number;
40: number;
44: number;
48: number;
52: number;
56: number;
60: number;
64: number;
72: number;
80: number;
96: number;
auto: string;
};
typography: {
fontFamily: {
sans: string;
serif: string;
mono: string;
};
fontSizes: {
xs: number;
sm: number;
base: number;
lg: number;
xl: number;
'2xl': number;
'3xl': number;
'4xl': number;
'5xl': number;
'6xl': number;
'7xl': number;
'8xl': number;
'9xl': number;
};
fontWeights: {
thin: "100";
extralight: "200";
light: "300";
normal: "400";
medium: "500";
semibold: "600";
bold: "700";
extrabold: "800";
black: "900";
};
lineHeights: {
none: number;
tight: number;
snug: number;
normal: number;
relaxed: number;
loose: number;
3: number;
4: number;
5: number;
6: number;
7: number;
8: number;
9: number;
10: number;
};
letterSpacing: {
tighter: number;
tight: number;
normal: number;
wide: number;
wider: number;
widest: number;
};
};
borderRadius: {
none: number;
xs: number;
sm: number;
base: number;
md: number;
lg: number;
xl: number;
'2xl': number;
'3xl': number;
full: number;
};
shadows: {
none: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
xs: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
sm: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
base: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
md: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
lg: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
xl: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
'2xl': {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
inner: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
};
animation: {
duration: {
fastest: number;
fast: number;
normal: number;
slow: number;
slowest: number;
};
easing: {
linear: string;
easeIn: string;
easeOut: string;
easeInOut: string;
easeInQuart: string;
easeOutQuart: string;
easeInOutQuart: string;
};
};
breakpoints: {
xs: number;
sm: number;
md: number;
lg: number;
xl: number;
xxl: number;
};
zIndex: {
hide: number;
auto: string;
base: number;
docked: number;
dropdown: number;
sticky: number;
banner: number;
overlay: number;
modal: number;
popover: number;
skipLink: number;
toast: number;
tooltip: number;
};
};
mode: ThemeMode;
isLoading: boolean;
preferences: ThemePreferences | null;
systemTheme: "light" | "dark";
systemPreferences: {
prefersReducedMotion: boolean;
prefersHighContrast: boolean;
};
isFollowingSystem: boolean;
toggleMode: () => Promise<void>;
setThemeMode: (newMode: ThemeMode) => Promise<void>;
followSystemTheme: () => Promise<void>;
stopFollowingSystem: () => void;
savePreferences: (newPreferences: Partial<ThemePreferences>) => Promise<void>;
};
/**
* Hook for color utilities and manipulations
*/
export declare const useColorUtils: () => {
lighten: typeof ColorUtils.lighten;
darken: typeof ColorUtils.darken;
hexToRgba: typeof ColorUtils.hexToRgba;
getContrastColor: typeof ColorUtils.getContrastColor;
isDark: typeof ColorUtils.isDark;
generateColorVariations: typeof ColorUtils.generateColorVariations;
getCurrentColor: (colorKey: string, alpha?: number) => any;
getColorVariations: (colorKey: string) => {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
getContrastForCurrent: (colorKey: string) => string;
};
/**
* Hook for theme animations and transitions
*/
export declare const useThemeAnimations: () => {
isTransitioning: boolean;
createTransition: (duration?: number) => void;
respectReducedMotion: () => void;
};
/**
* Hook for responsive theme breakpoints
*/
export declare const useThemeBreakpoints: () => {
current: string;
isXs: boolean;
isSm: boolean;
isMd: boolean;
isLg: boolean;
isXl: boolean;
isUp: (breakpoint: "sm" | "md" | "lg" | "xl" | "xs" | "xxl") => boolean;
isDown: (breakpoint: "sm" | "md" | "lg" | "xl" | "xs" | "xxl") => boolean;
width: number;
height: number;
};
/**
* Hook for system appearance changes (React Native specific)
*/
export declare const useSystemAppearance: () => "light" | "dark";
/**
* Hook for theme-aware styles
*/
export declare const useThemeStyles: () => {
colors: {
input: {
background: string;
border: string;
borderFocus: string;
placeholder: string;
};
button: {
primaryBg: string;
primaryText: string;
primaryBorder: string;
primaryHover: string;
primaryActive: string;
primaryDisabled: string;
};
textPrimary: "#212529";
textSecondary: "#6c757d";
textMuted: "#adb5bd";
textDisabled: "#dee2e6";
backgroundPrimary: "#ffffff";
backgroundSecondary: "#f8f9fa";
backgroundTertiary: "#e9ecef";
surfaceElevated: "#ffffff";
surfaceCard: "#ffffff";
surfaceModal: "#ffffff";
borderPrimary: "#dee2e6";
borderSecondary: "#e9ecef";
borderFocus: "#86b7fe";
linkDefault: "#0d6efd";
linkHover: "#0a58ca";
linkVisited: "#6f42c1";
successBg: "#d1e7dd";
infoBg: "#d1ecf1";
warningBg: "#fff3cd";
dangerBg: "#f8d7da";
primary: string;
secondary: string;
success: string;
info: string;
warning: string;
danger: string;
light: string;
dark: string;
white: string;
black: string;
blue: string;
indigo: string;
purple: string;
pink: string;
red: string;
orange: string;
yellow: string;
green: string;
teal: string;
cyan: string;
gray: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
} | {
input: {
background: string;
border: string;
borderFocus: string;
placeholder: string;
};
button: {
primaryBg: string;
primaryText: string;
primaryBorder: string;
primaryHover: string;
primaryActive: string;
primaryDisabled: string;
};
textPrimary: "#ffffff";
textSecondary: "#adb5bd";
textMuted: "#6c757d";
textDisabled: "#495057";
backgroundPrimary: "#0d1117";
backgroundSecondary: "#161b22";
backgroundTertiary: "#21262d";
surfaceElevated: "#21262d";
surfaceCard: "#161b22";
surfaceModal: "#21262d";
borderPrimary: "#30363d";
borderSecondary: "#21262d";
borderFocus: "#1f6feb";
linkDefault: "#58a6ff";
linkHover: "#79c0ff";
linkVisited: "#d2a8ff";
successBg: "#1a2e1a";
infoBg: "#0c2d48";
warningBg: "#3d2914";
dangerBg: "#4c1e1e";
primary: string;
secondary: string;
success: string;
info: string;
warning: string;
danger: string;
light: string;
dark: string;
white: string;
black: string;
blue: string;
indigo: string;
purple: string;
pink: string;
red: string;
orange: string;
yellow: string;
green: string;
teal: string;
cyan: string;
gray: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
};
theme: {
colors: {
input: {
background: string;
border: string;
borderFocus: string;
placeholder: string;
};
button: {
primaryBg: string;
primaryText: string;
primaryBorder: string;
primaryHover: string;
primaryActive: string;
primaryDisabled: string;
};
textPrimary: "#212529";
textSecondary: "#6c757d";
textMuted: "#adb5bd";
textDisabled: "#dee2e6";
backgroundPrimary: "#ffffff";
backgroundSecondary: "#f8f9fa";
backgroundTertiary: "#e9ecef";
surfaceElevated: "#ffffff";
surfaceCard: "#ffffff";
surfaceModal: "#ffffff";
borderPrimary: "#dee2e6";
borderSecondary: "#e9ecef";
borderFocus: "#86b7fe";
linkDefault: "#0d6efd";
linkHover: "#0a58ca";
linkVisited: "#6f42c1";
successBg: "#d1e7dd";
infoBg: "#d1ecf1";
warningBg: "#fff3cd";
dangerBg: "#f8d7da";
primary: string;
secondary: string;
success: string;
info: string;
warning: string;
danger: string;
light: string;
dark: string;
white: string;
black: string;
blue: string;
indigo: string;
purple: string;
pink: string;
red: string;
orange: string;
yellow: string;
green: string;
teal: string;
cyan: string;
gray: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
};
darkColors: {
input: {
background: string;
border: string;
borderFocus: string;
placeholder: string;
};
button: {
primaryBg: string;
primaryText: string;
primaryBorder: string;
primaryHover: string;
primaryActive: string;
primaryDisabled: string;
};
textPrimary: "#ffffff";
textSecondary: "#adb5bd";
textMuted: "#6c757d";
textDisabled: "#495057";
backgroundPrimary: "#0d1117";
backgroundSecondary: "#161b22";
backgroundTertiary: "#21262d";
surfaceElevated: "#21262d";
surfaceCard: "#161b22";
surfaceModal: "#21262d";
borderPrimary: "#30363d";
borderSecondary: "#21262d";
borderFocus: "#1f6feb";
linkDefault: "#58a6ff";
linkHover: "#79c0ff";
linkVisited: "#d2a8ff";
successBg: "#1a2e1a";
infoBg: "#0c2d48";
warningBg: "#3d2914";
dangerBg: "#4c1e1e";
primary: string;
secondary: string;
success: string;
info: string;
warning: string;
danger: string;
light: string;
dark: string;
white: string;
black: string;
blue: string;
indigo: string;
purple: string;
pink: string;
red: string;
orange: string;
yellow: string;
green: string;
teal: string;
cyan: string;
gray: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
};
spacing: {
0: number;
px: number;
0.5: number;
1: number;
1.5: number;
2: number;
2.5: number;
3: number;
3.5: number;
4: number;
5: number;
6: number;
7: number;
8: number;
9: number;
10: number;
11: number;
12: number;
14: number;
16: number;
20: number;
24: number;
28: number;
32: number;
36: number;
40: number;
44: number;
48: number;
52: number;
56: number;
60: number;
64: number;
72: number;
80: number;
96: number;
auto: string;
};
typography: {
fontFamily: {
sans: string;
serif: string;
mono: string;
};
fontSizes: {
xs: number;
sm: number;
base: number;
lg: number;
xl: number;
'2xl': number;
'3xl': number;
'4xl': number;
'5xl': number;
'6xl': number;
'7xl': number;
'8xl': number;
'9xl': number;
};
fontWeights: {
thin: "100";
extralight: "200";
light: "300";
normal: "400";
medium: "500";
semibold: "600";
bold: "700";
extrabold: "800";
black: "900";
};
lineHeights: {
none: number;
tight: number;
snug: number;
normal: number;
relaxed: number;
loose: number;
3: number;
4: number;
5: number;
6: number;
7: number;
8: number;
9: number;
10: number;
};
letterSpacing: {
tighter: number;
tight: number;
normal: number;
wide: number;
wider: number;
widest: number;
};
};
borderRadius: {
none: number;
xs: number;
sm: number;
base: number;
md: number;
lg: number;
xl: number;
'2xl': number;
'3xl': number;
full: number;
};
shadows: {
none: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
xs: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
sm: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
base: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
md: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
lg: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
xl: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
'2xl': {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
inner: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
};
animation: {
duration: {
fastest: number;
fast: number;
normal: number;
slow: number;
slowest: number;
};
easing: {
linear: string;
easeIn: string;
easeOut: string;
easeInOut: string;
easeInQuart: string;
easeOutQuart: string;
easeInOutQuart: string;
};
};
breakpoints: {
xs: number;
sm: number;
md: number;
lg: number;
xl: number;
xxl: number;
};
zIndex: {
hide: number;
auto: string;
base: number;
docked: number;
dropdown: number;
sticky: number;
banner: number;
overlay: number;
modal: number;
popover: number;
skipLink: number;
toast: number;
tooltip: number;
};
};
mode: ThemeMode;
createStyles: <T extends Record<string, any>>(styleFactory: (theme: Theme, colors: any, mode: ThemeMode) => T) => T;
};
/**
* Hook for theme preferences management
*/
export declare const useThemePreferences: () => {
preferences: ThemePreferences | null;
isLoading: boolean;
updatePreferences: (updates: Partial<ThemePreferences>) => Promise<void>;
resetPreferences: () => Promise<void>;
};
//# sourceMappingURL=themeHooks.d.ts.map