august-design-system/dist/theme.types-BF73i5o1.d.mts

A comprehensive React Native design system following Apple Human Interface Guidelines

import { a as DesignTokens, C as ColorTokens } from './tokens.types-kLhwMiT-.mjs';

/**
 * AugustDesignSystem - Theme Type Definitions
 *
 * Type definitions for the theme system supporting light/dark modes
 * and custom theme extensions.
 */

/**
 * Supported color modes.
 */
type ColorMode = 'light' | 'dark';
/**
 * Color mode preference including system detection.
 */
type ColorModePreference = ColorMode | 'system';
/**
 * Complete theme definition containing all tokens.
 */
interface Theme extends DesignTokens {
    /**
     * Current color mode.
     */
    readonly mode: ColorMode;
    /**
     * Theme identifier for debugging and logging.
     */
    readonly name: string;
}
/**
 * Theme configuration for both light and dark modes.
 */
interface ThemeConfig {
    readonly light: Theme;
    readonly dark: Theme;
}
/**
 * Partial theme for extending/overriding base theme values.
 * Uses recursive partial to allow deep overrides.
 */
type DeepPartial<T> = {
    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};
/**
 * Theme extension type for custom theme creation.
 */
type ThemeExtension = DeepPartial<Omit<Theme, 'mode' | 'name'>>;
/**
 * Configuration for creating a custom theme.
 */
interface CustomThemeConfig {
    /**
     * Name identifier for the custom theme.
     */
    readonly name: string;
    /**
     * Light mode overrides.
     */
    readonly light?: ThemeExtension;
    /**
     * Dark mode overrides.
     */
    readonly dark?: ThemeExtension;
}
/**
 * Theme context value provided to consumers.
 */
interface ThemeContextValue {
    /**
     * Current active theme with all tokens.
     */
    readonly theme: Theme;
    /**
     * Current color mode.
     */
    readonly colorMode: ColorMode;
    /**
     * User's color mode preference.
     */
    readonly colorModePreference: ColorModePreference;
    /**
     * Toggle between light and dark modes.
     */
    readonly toggleColorMode: () => void;
    /**
     * Set specific color mode or preference.
     */
    readonly setColorMode: (mode: ColorModePreference) => void;
    /**
     * Whether the system is in dark mode.
     */
    readonly isDark: boolean;
    /**
     * Whether the system is in light mode.
     */
    readonly isLight: boolean;
}
/**
 * Props for the ThemeProvider component.
 */
interface ThemeProviderProps {
    /**
     * Child components to receive theme context.
     */
    readonly children: React.ReactNode;
    /**
     * Initial color mode preference.
     * @default 'system'
     */
    readonly defaultColorMode?: ColorModePreference;
    /**
     * Custom theme configuration to merge with defaults.
     */
    readonly theme?: CustomThemeConfig;
    /**
     * Storage key for persisting color mode preference.
     * @default 'august-color-mode'
     */
    readonly storageKey?: string;
}
/**
 * Props interface for styled components that need theme access.
 */
interface ThemedProps {
    readonly theme: Theme;
}
/**
 * Helper type for creating themed style functions.
 */
type ThemedStyleFunction<T> = (theme: Theme) => T;
/**
 * Variant prop helper for components with multiple visual variants.
 */
type VariantProps<T extends string> = {
    readonly variant?: T;
};
/**
 * Size prop helper for components with multiple sizes.
 */
type SizeProps<T extends string = 'sm' | 'md' | 'lg'> = {
    readonly size?: T;
};
/**
 * Color path type for accessing nested color tokens.
 * Enables type-safe color access like 'background.primary'.
 */
type ColorPath = {
    [K in keyof ColorTokens]: ColorTokens[K] extends string ? K : `${K}.${keyof ColorTokens[K] & string}`;
}[keyof ColorTokens];
/**
 * Semantic color names for quick access.
 */
type SemanticColor = keyof ColorTokens['semantic'];
/**
 * System color names.
 */
type SystemColor = keyof ColorTokens['system'];
/**
 * Breakpoint keys for responsive design.
 */
type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
/**
 * Responsive value type allowing different values at breakpoints.
 */
type ResponsiveValue<T> = T | Partial<Record<Breakpoint, T>>;
/**
 * Responsive style object.
 */
type ResponsiveStyle<T> = {
    [P in keyof T]?: ResponsiveValue<T[P]>;
};

export type { Breakpoint as B, ColorMode as C, DeepPartial as D, ResponsiveValue as R, SizeProps as S, Theme as T, VariantProps as V, ColorModePreference as a, ThemeConfig as b, ThemeExtension as c, CustomThemeConfig as d, ThemeContextValue as e, ThemeProviderProps as f, ThemedProps as g, ThemedStyleFunction as h, ColorPath as i, SemanticColor as j, SystemColor as k, ResponsiveStyle as l };