@geekyhawks/react-native-ui-components
Version:
A lightweight and reusable React Native UI components library with customizable Text, TextInput, FloatingLabelTextInput, Button, and more. Built with TypeScript, fully typed, and designed for easy integration into any React Native project.
121 lines • 2.67 kB
TypeScript
/**
* Theme Definitions
*
* Provides default light and dark themes with colors, spacing, and fontFamily.
* Users can override these themes to create a custom design system for their app.
* Supports optional user-defined extensions for colors and spacing.
*
* Author: Geeky Hawks FZE LLC
*/
/**
* ThemeColors
*
* Required color tokens for the theme.
*/
export type ThemeColors = {
background: string;
border: string;
error: string;
muted: string;
onPrimary: string;
onSecondary: string;
onSurface: string;
primary: string;
secondary: string;
surface: string;
text: string;
};
/**
* ThemeSpacing
*
* Spacing scale for padding, margin, gap, etc.
* Keys are semantically named for clarity.
*/
export type ThemeSpacing = {
none: number;
xs: number;
sm: number;
md: number;
lg: number;
xl: number;
};
/**
* Theme
*
* Theme config with colors, spacing, fontFamily,
* and support for user-defined extensions.
*/
export type Theme = {
fontFamily?: string;
colors: ThemeColors & Record<string, string>;
spacing: ThemeSpacing & Record<string, number>;
};
/**
* createTheme
*
* Helper function to define a theme object with proper TypeScript typing.
* Users can pass colors, spacing, fontFamily, and optional custom extensions.
*
* Example usage:
*
* const myTheme = createTheme({
* fontFamily: "Inter",
* colors: {
* background: "#fff",
* border: "#dee2e6",
* error: "#dc3545",
* muted: "#6c757d",
* onPrimary: "#ffffff";
* onSecondary: "#ffffff";
* onSurface: "#000000",
* primary: "#007bff",
* secondary: "#6c757d",
* surface: "#f8f9fa",
* text: "#111",
* },
* spacing: {
* none: 0,
* xs: 4,
* sm: 8,
* md: 16,
* lg: 24,
* xl: 32,
* },
* });
*/
export declare function createTheme<T extends Theme>(theme: T): T;
/**
* Default Font Family
* Can be overridden per theme if needed.
*/
export declare const defaultFontFamily = "System";
/**
* Default spacing scale
* Can be overridden per theme if needed.
*/
export declare const defaultSpacing: ThemeSpacing;
/**
* Default light colors
*/
export declare const defaultLightColors: ThemeColors;
/**
* Default dark colors
*/
export declare const defaultDarkColors: ThemeColors;
/**
* Default light theme
*/
export declare const defaultLightTheme: {
fontFamily: string;
colors: ThemeColors;
spacing: ThemeSpacing;
};
/**
* Default dark theme
*/
export declare const defaultDarkTheme: {
fontFamily: string;
colors: ThemeColors;
spacing: ThemeSpacing;
};
//# sourceMappingURL=Theme.d.ts.map