@umituz/react-native-design-system 4.25.99 → 4.25.100

package/dist/theme/core/CustomColors.d.ts

@@ -0,0 +1,81 @@
+/**
+ * Custom Colors Types
+ *
+ * Types for custom theme color overrides
+ */
+import type { ColorPalette } from './ColorPalette';
+export interface CustomThemeColors {
+    primary?: string;
+    primaryLight?: string;
+    primaryDark?: string;
+    secondary?: string;
+    secondaryLight?: string;
+    secondaryDark?: string;
+    accent?: string;
+    accentLight?: string;
+    accentDark?: string;
+    onPrimary?: string;
+    onSecondary?: string;
+    onSuccess?: string;
+    onError?: string;
+    onWarning?: string;
+    onInfo?: string;
+    onSurface?: string;
+    onBackground?: string;
+    onSurfaceDisabled?: string;
+    onSurfaceVariant?: string;
+    primaryContainer?: string;
+    onPrimaryContainer?: string;
+    secondaryContainer?: string;
+    onSecondaryContainer?: string;
+    errorContainer?: string;
+    onErrorContainer?: string;
+    outline?: string;
+    outlineVariant?: string;
+    outlineDisabled?: string;
+    success?: string;
+    successLight?: string;
+    successDark?: string;
+    error?: string;
+    errorLight?: string;
+    errorDark?: string;
+    warning?: string;
+    warningLight?: string;
+    warningDark?: string;
+    info?: string;
+    infoLight?: string;
+    infoDark?: string;
+    successContainer?: string;
+    onSuccessContainer?: string;
+    warningContainer?: string;
+    onWarningContainer?: string;
+    infoContainer?: string;
+    onInfoContainer?: string;
+    backgroundPrimary?: string;
+    backgroundSecondary?: string;
+    surface?: string;
+    surfaceVariant?: string;
+    surfaceSecondary?: string;
+    surfaceDisabled?: string;
+    textPrimary?: string;
+    textSecondary?: string;
+    textTertiary?: string;
+    textDisabled?: string;
+    textInverse?: string;
+    border?: string;
+    borderLight?: string;
+    borderMedium?: string;
+    borderFocus?: string;
+    borderDisabled?: string;
+    buttonPrimary?: string;
+    buttonSecondary?: string;
+    inputBackground?: string;
+    inputBorder?: string;
+    cardBackground?: string;
+    transparent?: string;
+    black?: string;
+    white?: string;
+    modalOverlay?: string;
+}
+export declare const validateCustomColors: (customColors: CustomThemeColors) => boolean;
+export declare const applyCustomColors: (palette: ColorPalette, customColors?: CustomThemeColors) => ColorPalette;

package/dist/theme/core/NavigationTheme.d.ts

@@ -0,0 +1,38 @@
+import type { ColorPalette, ThemeMode } from "./ColorPalette";
+/**
+ * Font weight type compatible with React Navigation v7
+ */
+type FontWeight = "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+/**
+ * Font configuration for navigation theme
+ */
+interface FontConfig {
+    fontFamily: string;
+    fontWeight: FontWeight;
+}
+/**
+ * Navigation theme type compatible with React Navigation v7
+ */
+export interface NavigationTheme {
+    dark: boolean;
+    colors: {
+        primary: string;
+        background: string;
+        card: string;
+        text: string;
+        border: string;
+        notification: string;
+    };
+    fonts: {
+        regular: FontConfig;
+        medium: FontConfig;
+        bold: FontConfig;
+        heavy: FontConfig;
+    };
+}
+/**
+ * Creates a React Navigation theme from design system colors
+ * Compatible with React Navigation v7+
+ */
+export declare const createNavigationTheme: (colors: ColorPalette, themeMode: ThemeMode) => NavigationTheme;
+export {};

package/dist/theme/core/TokenFactory.d.ts

@@ -0,0 +1,15 @@
+import { withAlpha, type ThemeMode, type ColorPalette } from './ColorPalette';
+import { type CustomThemeColors } from './CustomColors';
+import { type DesignTokens } from '../types/ThemeTypes';
+/**
+ * Create complete design tokens for a specific theme mode
+ *
+ * @param mode - Theme mode ('light' or 'dark')
+ * @param customColors - Optional custom colors to override default colors
+ * @param multiplier - Device-based spacing multiplier
+ * @param getFontSize - Function to get responsive font size
+ * @returns Complete responsive design tokens object
+ */
+export declare const createDesignTokens: (mode: ThemeMode, customColors?: CustomThemeColors, multiplier?: number, getFontSize?: (size: number) => number) => DesignTokens;
+export { withAlpha };
+export type { ThemeMode, ColorPalette };

package/dist/theme/core/colors/ColorUtils.d.ts

@@ -0,0 +1,18 @@
+/**
+ * COLOR UTILITIES
+ *
+ * Color manipulation and validation utilities
+ */
+/**
+ * Validate hex color format
+ * @param hexColor - Hex color string to validate
+ * @returns true if valid hex color
+ */
+export declare const isValidHexColor: (hexColor: string) => boolean;
+/**
+ * Add alpha transparency to hex color
+ * @param hexColor - Hex color string (#RRGGBB or #RGB)
+ * @param alpha - Alpha value 0-1
+ * @returns Hex color with alpha (#RRGGBBAA)
+ */
+export declare const withAlpha: (hexColor: string, alpha: number) => string;

package/dist/theme/core/colors/DarkColors.d.ts

@@ -0,0 +1,103 @@
+/**
+ * DARK THEME COLORS
+ *
+ * Dark theme color palette — Forest Green & Warm Orange (MoveLog theme)
+ */
+export declare const darkColors: {
+    primary: string;
+    primaryLight: string;
+    primaryDark: string;
+    secondary: string;
+    secondaryLight: string;
+    secondaryDark: string;
+    accent: string;
+    accentLight: string;
+    accentDark: string;
+    onPrimary: string;
+    onSecondary: string;
+    onSuccess: string;
+    onError: string;
+    onWarning: string;
+    onInfo: string;
+    onSurface: string;
+    onBackground: string;
+    onSurfaceDisabled: string;
+    onSurfaceVariant: string;
+    primaryContainer: string;
+    onPrimaryContainer: string;
+    secondaryContainer: string;
+    onSecondaryContainer: string;
+    errorContainer: string;
+    onErrorContainer: string;
+    outline: string;
+    outlineVariant: string;
+    outlineDisabled: string;
+    success: string;
+    successLight: string;
+    successDark: string;
+    error: string;
+    errorLight: string;
+    errorDark: string;
+    warning: string;
+    warningLight: string;
+    warningDark: string;
+    info: string;
+    infoLight: string;
+    infoDark: string;
+    successContainer: string;
+    onSuccessContainer: string;
+    warningContainer: string;
+    onWarningContainer: string;
+    infoContainer: string;
+    onInfoContainer: string;
+    gray50: string;
+    gray100: string;
+    gray200: string;
+    gray300: string;
+    gray400: string;
+    gray500: string;
+    gray600: string;
+    gray700: string;
+    gray800: string;
+    gray900: string;
+    backgroundPrimary: string;
+    backgroundSecondary: string;
+    surface: string;
+    surfaceVariant: string;
+    surfaceSecondary: string;
+    surfaceDisabled: string;
+    textPrimary: string;
+    textSecondary: string;
+    textTertiary: string;
+    textDisabled: string;
+    textInverse: string;
+    border: string;
+    borderLight: string;
+    borderMedium: string;
+    borderFocus: string;
+    borderDisabled: string;
+    buttonPrimary: string;
+    buttonSecondary: string;
+    inputBackground: string;
+    inputBorder: string;
+    cardBackground: string;
+    text: string;
+    background: string;
+    card: string;
+    transparent: string;
+    black: string;
+    white: string;
+    modalOverlay: string;
+    overlaySubtle: string;
+    overlayLight: string;
+    overlayMedium: string;
+    overlayBackground: string;
+    whiteOverlay: string;
+    whiteOverlayStrong: string;
+    whiteOverlayBorder: string;
+    textWhiteOpacity: string;
+    errorBackground: string;
+    primaryBackground: string;
+    cardOverlay: string;
+    inputBackground_RGBA: string;
+};

package/dist/theme/core/colors/LightColors.d.ts

@@ -0,0 +1,103 @@
+/**
+ * LIGHT THEME COLORS
+ *
+ * Light theme color palette — Forest Green & Warm Orange (MoveLog theme)
+ */
+export declare const lightColors: {
+    primary: string;
+    primaryLight: string;
+    primaryDark: string;
+    secondary: string;
+    secondaryLight: string;
+    secondaryDark: string;
+    accent: string;
+    accentLight: string;
+    accentDark: string;
+    onPrimary: string;
+    onSecondary: string;
+    onSuccess: string;
+    onError: string;
+    onWarning: string;
+    onInfo: string;
+    onSurface: string;
+    onBackground: string;
+    onSurfaceDisabled: string;
+    onSurfaceVariant: string;
+    primaryContainer: string;
+    onPrimaryContainer: string;
+    secondaryContainer: string;
+    onSecondaryContainer: string;
+    errorContainer: string;
+    onErrorContainer: string;
+    outline: string;
+    outlineVariant: string;
+    outlineDisabled: string;
+    success: string;
+    successLight: string;
+    successDark: string;
+    error: string;
+    errorLight: string;
+    errorDark: string;
+    warning: string;
+    warningLight: string;
+    warningDark: string;
+    info: string;
+    infoLight: string;
+    infoDark: string;
+    successContainer: string;
+    onSuccessContainer: string;
+    warningContainer: string;
+    onWarningContainer: string;
+    infoContainer: string;
+    onInfoContainer: string;
+    gray50: string;
+    gray100: string;
+    gray200: string;
+    gray300: string;
+    gray400: string;
+    gray500: string;
+    gray600: string;
+    gray700: string;
+    gray800: string;
+    gray900: string;
+    backgroundPrimary: string;
+    backgroundSecondary: string;
+    surface: string;
+    surfaceVariant: string;
+    surfaceSecondary: string;
+    surfaceDisabled: string;
+    textPrimary: string;
+    textSecondary: string;
+    textTertiary: string;
+    textDisabled: string;
+    textInverse: string;
+    border: string;
+    borderLight: string;
+    borderMedium: string;
+    borderFocus: string;
+    borderDisabled: string;
+    buttonPrimary: string;
+    buttonSecondary: string;
+    inputBackground: string;
+    inputBorder: string;
+    cardBackground: string;
+    text: string;
+    background: string;
+    card: string;
+    transparent: string;
+    black: string;
+    white: string;
+    modalOverlay: string;
+    overlaySubtle: string;
+    overlayLight: string;
+    overlayMedium: string;
+    overlayBackground: string;
+    whiteOverlay: string;
+    whiteOverlayStrong: string;
+    whiteOverlayBorder: string;
+    textWhiteOpacity: string;
+    errorBackground: string;
+    primaryBackground: string;
+    cardOverlay: string;
+    inputBackground_RGBA: string;
+};

package/dist/theme/core/constants/DesignConstants.d.ts

@@ -0,0 +1,17 @@
+/**
+ * DESIGN SYSTEM CONSTANTS
+ *
+ * Magic numbers and constants used throughout the design system
+ */
+export declare const DESIGN_CONSTANTS: {
+    readonly FULL_BORDER_RADIUS: 9999;
+    readonly ALPHA_TRANSPARENT: 0;
+    readonly ALPHA_MINIMUM: 0;
+    readonly ALPHA_MAXIMUM: 1;
+    readonly SPACING_BASE_UNIT: 4;
+    readonly MINIMUM_TOUCH_TARGET: 44;
+    readonly STORAGE_NAMESPACE: "@umituz/react-native-design-system-theme";
+    readonly HEX_COLOR_REGEX: RegExp;
+    readonly MINIMUM_FONT_SIZE: 10;
+    readonly MAXIMUM_FONT_SIZE: 57;
+};

package/dist/theme/core/themes.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Theme Objects - Light and Dark Themes
+ *
+ * Combines BASE_TOKENS + ColorPalette into complete theme objects
+ */
+import { BASE_TOKENS } from './BaseTokens';
+import type { ColorPalette } from './ColorPalette';
+/**
+ * Complete Theme Object
+ * Combines colors, spacing, typography, borders, and design tokens
+ */
+export interface Theme {
+    colors: ColorPalette;
+    spacing: typeof BASE_TOKENS.spacing;
+    typography: typeof BASE_TOKENS.typography;
+    borders: typeof BASE_TOKENS.borders;
+    iconSizes: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        xxl: number;
+        hero: number;
+    };
+    opacity: {
+        disabled: number;
+        inactive: number;
+        subtle: number;
+        medium: number;
+        full: number;
+    };
+}
+/**
+ * Light Theme
+ * Combines static BASE_TOKENS + lightColors
+ */
+export declare const lightTheme: Theme;
+/**
+ * Dark Theme
+ * Combines static BASE_TOKENS + darkColors
+ */
+export declare const darkTheme: Theme;
+/**
+ * Utility function for responsive design
+ */
+export declare const createResponsiveValue: <T>(_theme: Theme, values: Partial<Record<string, T>>) => T;

package/dist/theme/core/tokens/BaseTokens.d.ts

@@ -0,0 +1,123 @@
+/**
+ * BASE TOKENS - Type Definitions
+ *
+ * Type definitions for all static design tokens
+ */
+import type { TextStyle, ViewStyle } from 'react-native';
+export type Spacing = {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+    xxxl: number;
+    screenPadding: number;
+    cardPadding: number;
+    buttonPadding: number;
+    inputPadding: number;
+    sectionSpacing: number;
+    iconSizeSmall: number;
+    iconSizeMedium: number;
+    iconSizeLarge: number;
+    iconSizeXLarge: number;
+    iconSizeHero: number;
+    buttonHeight: number;
+    inputHeight: number;
+    appBarHeight: number;
+    tabBarHeight: number;
+};
+export type Typography = {
+    displayLarge: TextStyle;
+    displayMedium: TextStyle;
+    displaySmall: TextStyle;
+    headlineLarge: TextStyle;
+    headlineMedium: TextStyle;
+    headlineSmall: TextStyle;
+    titleLarge: TextStyle;
+    titleMedium: TextStyle;
+    titleSmall: TextStyle;
+    bodyLarge: TextStyle;
+    bodyMedium: TextStyle;
+    bodySmall: TextStyle;
+    labelLarge: TextStyle;
+    labelMedium: TextStyle;
+    labelSmall: TextStyle;
+    button: TextStyle;
+    caption: TextStyle;
+    overline: TextStyle;
+    semibold: '600';
+    medium: '500';
+    bold: '700';
+};
+export type Borders = {
+    radius: {
+        none: number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        xxl: number;
+        full: number;
+    };
+    width: {
+        none: number;
+        thin: number;
+        medium: number;
+        thick: number;
+    };
+    button: ViewStyle;
+    card: ViewStyle;
+    input: ViewStyle;
+    pill: ViewStyle;
+};
+export type IconSizes = {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+    hero: number;
+};
+export type Opacity = {
+    disabled: number;
+    inactive: number;
+    subtle: number;
+    medium: number;
+    full: number;
+};
+export type AvatarSizes = {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+};
+export type ComponentSizes = {
+    touchTarget: number;
+    progressBar: {
+        normal: number;
+        thick: number;
+    };
+    dot: {
+        active: number;
+        inactive: number;
+    };
+    buttonHeight: {
+        sm: number;
+        md: number;
+        lg: number;
+    };
+};
+export type BaseTokens = {
+    spacing: Spacing;
+    typography: Typography;
+    borders: Borders;
+    iconSizes: IconSizes;
+    opacity: Opacity;
+    avatarSizes: AvatarSizes;
+    sizes: ComponentSizes;
+};

package/dist/theme/core/tokens/Borders.d.ts

@@ -0,0 +1,7 @@
+/**
+ * BORDER TOKENS
+ *
+ * Border radius, width, and component-specific border styles
+ */
+import type { Borders } from './BaseTokens';
+export declare const borders: Borders;

package/dist/theme/core/tokens/Sizes.d.ts

@@ -0,0 +1,10 @@
+/**
+ * SIZE TOKENS
+ *
+ * Icon sizes, opacity levels, avatar sizes, and component dimensions
+ */
+import type { IconSizes, Opacity, AvatarSizes, ComponentSizes } from './BaseTokens';
+export declare const iconSizes: IconSizes;
+export declare const opacity: Opacity;
+export declare const avatarSizes: AvatarSizes;
+export declare const sizes: ComponentSizes;

package/dist/theme/core/tokens/Spacing.d.ts

@@ -0,0 +1,7 @@
+/**
+ * SPACING TOKENS
+ *
+ * Spacing scale and semantic spacing values
+ */
+import type { Spacing } from './BaseTokens';
+export declare const spacing: Spacing;

package/dist/theme/core/tokens/Typography.d.ts

@@ -0,0 +1,7 @@
+/**
+ * TYPOGRAPHY TOKENS
+ *
+ * Typography scale and text styles following Material Design 3
+ */
+import type { Typography } from './BaseTokens';
+export declare const typography: Typography;

package/dist/theme/hooks/commonStyles/formStyles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Form Styles
+ */
+import type { ViewStyle } from 'react-native';
+import type { DesignTokens } from '../../types/ThemeTypes';
+export declare const createFormStyles: (tokens: DesignTokens) => {
+    form: ViewStyle;
+    formHeader: ViewStyle;
+};

package/dist/theme/hooks/commonStyles/layoutStyles.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Layout Styles
+ */
+import type { ViewStyle } from 'react-native';
+import type { DesignTokens } from '../../types/ThemeTypes';
+export declare const createLayoutStyles: (tokens: DesignTokens) => {
+    centerContainer: ViewStyle;
+    centerContainerPadded: ViewStyle;
+    row: ViewStyle;
+    rowBetween: ViewStyle;
+    rowCenter: ViewStyle;
+};

package/dist/theme/hooks/commonStyles/paddingStyles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Padding Styles
+ */
+import type { ViewStyle } from 'react-native';
+import type { DesignTokens } from '../../types/ThemeTypes';
+export declare const createPaddingStyles: (tokens: DesignTokens) => {
+    paddedHorizontal: ViewStyle;
+    paddedVertical: ViewStyle;
+    padded: ViewStyle;
+};

package/dist/theme/hooks/commonStyles/screenContainerStyles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Screen Container Styles
+ */
+import type { ViewStyle } from 'react-native';
+import type { DesignTokens } from '../../types/ThemeTypes';
+export declare const createScreenContainerStyles: (tokens: DesignTokens) => {
+    screenContainer: ViewStyle;
+    flexContainer: ViewStyle;
+    screenContainerSecondary: ViewStyle;
+};

package/dist/theme/hooks/commonStyles/scrollContainerStyles.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Scroll Container Styles
+ */
+import type { ViewStyle } from 'react-native';
+import type { DesignTokens } from '../../types/ThemeTypes';
+export declare const createScrollContainerStyles: (tokens: DesignTokens) => {
+    scrollView: ViewStyle;
+    scrollContent: ViewStyle;
+    scrollContentGrow: ViewStyle;
+    scrollContentCentered: ViewStyle;
+};

package/dist/theme/hooks/commonStyles/sectionStyles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Section Styles
+ */
+import type { ViewStyle } from 'react-native';
+import type { DesignTokens } from '../../types/ThemeTypes';
+export declare const createSectionStyles: (tokens: DesignTokens) => {
+    section: ViewStyle;
+    sectionPadded: ViewStyle;
+};

package/dist/theme/hooks/commonStyles/textStyles.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Text Styles
+ */
+import type { TextStyle } from 'react-native';
+import type { DesignTokens } from '../../types/ThemeTypes';
+export declare const createTextStyles: (tokens: DesignTokens) => {
+    screenTitle: TextStyle;
+    sectionTitle: TextStyle;
+    subtitle: TextStyle;
+    bodyText: TextStyle;
+    secondaryText: TextStyle;
+};

package/dist/theme/hooks/useAppDesignTokens.d.ts

@@ -0,0 +1,7 @@
+import { type DesignTokens } from '../types/ThemeTypes';
+/**
+ * Hook to access current design tokens (colors, spacing, typography, etc.)
+ *
+ * Uses useTheme directly - single source of truth for theme state.
+ */
+export declare const useAppDesignTokens: () => DesignTokens;