@exyconn/common 2.1.0 → 2.3.3

package/dist/client/web/index.d.mts

@@ -0,0 +1,1461 @@
+import { BrandIdentity, BrandColors } from '../../data/brand-identity.mjs';
+import React from 'react';
+import * as Yup from 'yup';
+
+/**
+ * Theme System Types
+ * Deep-level theming with micro-level customization
+ * Supports light/dark themes with fallback options
+ */
+
+interface ColorPalette {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+}
+interface SemanticColors {
+    primary: string;
+    primaryHover: string;
+    primaryActive: string;
+    primaryDisabled: string;
+    secondary: string;
+    secondaryHover: string;
+    secondaryActive: string;
+    secondaryDisabled: string;
+    accent: string;
+    accentHover: string;
+    success: string;
+    successHover: string;
+    warning: string;
+    warningHover: string;
+    error: string;
+    errorHover: string;
+    info: string;
+    infoHover: string;
+}
+interface BackgroundColors {
+    /** Main page background */
+    default: string;
+    /** Alternate background for sections */
+    paper: string;
+    /** Card backgrounds */
+    card: string;
+    /** Modal/overlay backgrounds */
+    overlay: string;
+    /** Input field backgrounds */
+    input: string;
+    /** Disabled element backgrounds */
+    disabled: string;
+    /** Hover state background */
+    hover: string;
+    /** Selected state background */
+    selected: string;
+}
+interface SurfaceColors {
+    light: string;
+    main: string;
+    dark: string;
+}
+interface TextColors {
+    /** Primary text color */
+    primary: string;
+    /** Secondary/muted text */
+    secondary: string;
+    /** Disabled text */
+    disabled: string;
+    /** Placeholder text */
+    placeholder: string;
+    /** Link text */
+    link: string;
+    /** Link hover */
+    linkHover: string;
+    /** Inverted text (for dark backgrounds) */
+    inverse: string;
+    /** On primary color background */
+    onPrimary: string;
+    /** On secondary color background */
+    onSecondary: string;
+}
+interface BorderColors {
+    default: string;
+    light: string;
+    dark: string;
+    focus: string;
+    error: string;
+    success: string;
+    disabled: string;
+}
+interface Shadows {
+    none: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    inner: string;
+    /** Button specific shadows */
+    button: string;
+    buttonHover: string;
+    /** Card shadows */
+    card: string;
+    cardHover: string;
+    /** Modal/dropdown shadows */
+    modal: string;
+    dropdown: string;
+}
+interface FontFamily {
+    sans: string;
+    serif: string;
+    mono: string;
+    heading: string;
+    body: string;
+}
+interface FontSize {
+    xs: string;
+    sm: string;
+    base: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+}
+interface FontWeight {
+    light: number;
+    normal: number;
+    medium: number;
+    semibold: number;
+    bold: number;
+    extrabold: number;
+}
+interface LineHeight {
+    none: number;
+    tight: number;
+    snug: number;
+    normal: number;
+    relaxed: number;
+    loose: number;
+}
+interface Typography {
+    fontFamily: FontFamily;
+    fontSize: FontSize;
+    fontWeight: FontWeight;
+    lineHeight: LineHeight;
+}
+interface Spacing {
+    0: string;
+    px: string;
+    0.5: string;
+    1: string;
+    1.5: string;
+    2: string;
+    2.5: string;
+    3: string;
+    3.5: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    11: string;
+    12: string;
+    14: string;
+    16: string;
+    20: string;
+    24: string;
+    28: string;
+    32: string;
+    36: string;
+    40: string;
+    44: string;
+    48: string;
+    52: string;
+    56: string;
+    60: string;
+    64: string;
+    72: string;
+    80: string;
+    96: string;
+}
+interface BorderRadius {
+    none: string;
+    sm: string;
+    default: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    full: string;
+}
+interface Breakpoints {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+}
+interface ZIndex {
+    hide: number;
+    auto: string;
+    base: number;
+    dropdown: number;
+    sticky: number;
+    fixed: number;
+    modalBackdrop: number;
+    modal: number;
+    popover: number;
+    tooltip: number;
+    toast: number;
+}
+interface Transitions {
+    none: string;
+    fast: string;
+    normal: string;
+    slow: string;
+    slower: string;
+    /** Specific transitions */
+    colors: string;
+    transform: string;
+    opacity: string;
+    shadow: string;
+    all: string;
+}
+interface ButtonTheme {
+    /** Background colors */
+    bg: string;
+    bgHover: string;
+    bgActive: string;
+    bgDisabled: string;
+    /** Text colors */
+    color: string;
+    colorHover: string;
+    colorDisabled: string;
+    /** Border */
+    border: string;
+    borderHover: string;
+    borderWidth: string;
+    borderRadius: string;
+    /** Shadow */
+    shadow: string;
+    shadowHover: string;
+    /** Sizes */
+    paddingX: string;
+    paddingY: string;
+    fontSize: string;
+    fontWeight: number;
+    /** Variants */
+    variants: {
+        primary: Partial<ButtonTheme>;
+        secondary: Partial<ButtonTheme>;
+        outline: Partial<ButtonTheme>;
+        ghost: Partial<ButtonTheme>;
+        link: Partial<ButtonTheme>;
+        danger: Partial<ButtonTheme>;
+        success: Partial<ButtonTheme>;
+    };
+    /** Sizes */
+    sizes: {
+        xs: Partial<ButtonTheme>;
+        sm: Partial<ButtonTheme>;
+        md: Partial<ButtonTheme>;
+        lg: Partial<ButtonTheme>;
+        xl: Partial<ButtonTheme>;
+    };
+}
+interface InputTheme {
+    bg: string;
+    bgFocus: string;
+    bgDisabled: string;
+    bgError: string;
+    color: string;
+    colorPlaceholder: string;
+    colorDisabled: string;
+    border: string;
+    borderFocus: string;
+    borderError: string;
+    borderWidth: string;
+    borderRadius: string;
+    shadow: string;
+    shadowFocus: string;
+    paddingX: string;
+    paddingY: string;
+    fontSize: string;
+    /** Label styles */
+    labelColor: string;
+    labelFontSize: string;
+    labelFontWeight: number;
+    /** Helper/Error text */
+    helperColor: string;
+    errorColor: string;
+    /** Sizes */
+    sizes: {
+        sm: Partial<InputTheme>;
+        md: Partial<InputTheme>;
+        lg: Partial<InputTheme>;
+    };
+}
+interface CardTheme {
+    bg: string;
+    bgHover: string;
+    border: string;
+    borderWidth: string;
+    borderRadius: string;
+    shadow: string;
+    shadowHover: string;
+    padding: string;
+    /** Header */
+    headerBg: string;
+    headerBorder: string;
+    headerPadding: string;
+    /** Footer */
+    footerBg: string;
+    footerBorder: string;
+    footerPadding: string;
+}
+interface HeaderTheme {
+    bg: string;
+    bgScrolled: string;
+    color: string;
+    border: string;
+    shadow: string;
+    shadowScrolled: string;
+    height: string;
+    paddingX: string;
+    /** Logo */
+    logoHeight: string;
+    /** Nav links */
+    navColor: string;
+    navColorHover: string;
+    navColorActive: string;
+    navFontSize: string;
+    navFontWeight: number;
+    /** Mobile menu */
+    mobileMenuBg: string;
+    mobileMenuShadow: string;
+}
+interface FooterTheme {
+    bg: string;
+    color: string;
+    colorMuted: string;
+    border: string;
+    padding: string;
+    /** Links */
+    linkColor: string;
+    linkColorHover: string;
+    /** Headings */
+    headingColor: string;
+    headingFontSize: string;
+    headingFontWeight: number;
+    /** Copyright */
+    copyrightBg: string;
+    copyrightColor: string;
+}
+interface BannerTheme {
+    bg: string;
+    color: string;
+    border: string;
+    borderRadius: string;
+    padding: string;
+    shadow: string;
+    /** Close button */
+    closeBg: string;
+    closeColor: string;
+    /** Variants */
+    variants: {
+        info: Partial<BannerTheme>;
+        success: Partial<BannerTheme>;
+        warning: Partial<BannerTheme>;
+        error: Partial<BannerTheme>;
+        promo: Partial<BannerTheme>;
+    };
+}
+interface LoaderTheme {
+    color: string;
+    colorSecondary: string;
+    size: string;
+    borderWidth: string;
+    /** Overlay */
+    overlayBg: string;
+    overlayOpacity: number;
+    /** Sizes */
+    sizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}
+interface ModalTheme {
+    bg: string;
+    color: string;
+    border: string;
+    borderRadius: string;
+    shadow: string;
+    padding: string;
+    /** Overlay */
+    overlayBg: string;
+    overlayOpacity: number;
+    /** Header */
+    headerBg: string;
+    headerBorder: string;
+    headerPadding: string;
+    /** Footer */
+    footerBg: string;
+    footerBorder: string;
+    footerPadding: string;
+    /** Close button */
+    closeBg: string;
+    closeColor: string;
+    closeHoverBg: string;
+    /** Sizes */
+    sizes: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+}
+interface ToastTheme {
+    bg: string;
+    color: string;
+    border: string;
+    borderRadius: string;
+    shadow: string;
+    padding: string;
+    /** Variants */
+    variants: {
+        success: Partial<ToastTheme>;
+        error: Partial<ToastTheme>;
+        warning: Partial<ToastTheme>;
+        info: Partial<ToastTheme>;
+    };
+}
+interface NewsletterTheme {
+    bg: string;
+    color: string;
+    border: string;
+    borderRadius: string;
+    padding: string;
+    /** Title */
+    titleColor: string;
+    titleFontSize: string;
+    /** Description */
+    descColor: string;
+    descFontSize: string;
+    /** Input override */
+    inputBg: string;
+    inputBorder: string;
+    /** Button override */
+    buttonBg: string;
+    buttonColor: string;
+}
+interface ComponentThemes {
+    button: ButtonTheme;
+    input: InputTheme;
+    card: CardTheme;
+    header: HeaderTheme;
+    footer: FooterTheme;
+    banner: BannerTheme;
+    loader: LoaderTheme;
+    modal: ModalTheme;
+    toast: ToastTheme;
+    newsletter: NewsletterTheme;
+}
+type ThemeMode = 'light' | 'dark' | 'system';
+interface Theme {
+    /** Theme identifier */
+    name: string;
+    /** Light or dark mode */
+    mode: ThemeMode;
+    /** Brand identity reference */
+    brand?: Partial<BrandIdentity>;
+    /** Color system */
+    colors: {
+        brand: BrandColors;
+        semantic: SemanticColors;
+        background: BackgroundColors;
+        surface: SurfaceColors;
+        text: TextColors;
+        border: BorderColors;
+    };
+    /** Shadow system */
+    shadows: Shadows;
+    /** Typography */
+    typography: Typography;
+    /** Spacing */
+    spacing: Spacing;
+    /** Border radius */
+    borderRadius: BorderRadius;
+    /** Breakpoints */
+    breakpoints: Breakpoints;
+    /** Z-index */
+    zIndex: ZIndex;
+    /** Transitions */
+    transitions: Transitions;
+    /** Component-specific themes */
+    components: ComponentThemes;
+}
+interface ThemeConfig {
+    /** Default theme mode */
+    defaultMode?: ThemeMode;
+    /** URL to load theme from */
+    themeUrl?: string;
+    /** Custom light theme overrides */
+    light?: DeepPartial<Theme>;
+    /** Custom dark theme overrides */
+    dark?: DeepPartial<Theme>;
+    /** Brand identity to apply */
+    brandIdentity?: BrandIdentity;
+    /** Enable system theme detection */
+    enableSystemTheme?: boolean;
+    /** Persist theme preference */
+    persistTheme?: boolean;
+    /** Storage key for persistence */
+    storageKey?: string;
+    /** CSS variable prefix */
+    cssVarPrefix?: string;
+}
+interface ThemeContextValue {
+    /** Current theme */
+    theme: Theme;
+    /** Current mode */
+    mode: ThemeMode;
+    /** Set theme mode */
+    setMode: (mode: ThemeMode) => void;
+    /** Toggle between light/dark */
+    toggleMode: () => void;
+    /** Update theme */
+    updateTheme: (updates: DeepPartial<Theme>) => void;
+    /** Reset to default theme */
+    resetTheme: () => void;
+    /** Check if dark mode */
+    isDark: boolean;
+    /** Check if light mode */
+    isLight: boolean;
+    /** Loading state (for URL themes) */
+    isLoading: boolean;
+    /** Error state */
+    error: string | null;
+}
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+
+/**
+ * Default Light Theme
+ * Complete theme definition with all micro-level customizations
+ */
+
+declare const defaultLightTheme: Theme;
+
+/**
+ * Default Dark Theme
+ * Complete dark theme with all micro-level customizations
+ */
+
+declare const defaultDarkTheme: Theme;
+
+/**
+ * Theme Utilities
+ * Functions for theme manipulation, loading, and CSS variable generation
+ */
+
+/**
+ * Deep merge two objects
+ */
+declare function deepMerge<T extends object>(target: T, source: DeepPartial<T>): T;
+/**
+ * Generate theme colors from brand identity
+ */
+declare function createThemeFromBrand(brand: BrandIdentity, baseTheme?: Theme): Theme;
+/**
+ * Adjust color brightness
+ * @param hex - Hex color
+ * @param percent - Positive to lighten, negative to darken
+ */
+declare function adjustColor(hex: string, percent: number): string;
+/**
+ * Convert hex to rgba
+ */
+declare function hexToRgba(hex: string, alpha?: number): string;
+/**
+ * Get contrasting text color (black or white)
+ */
+declare function getContrastColor(hex: string): string;
+/**
+ * Flatten nested object to CSS variables
+ */
+declare function flattenToCssVars(obj: Record<string, unknown>, prefix?: string): Record<string, string>;
+/**
+ * Generate CSS variables string from theme
+ */
+declare function generateCssVars(theme: Theme, prefix?: string): string;
+/**
+ * Inject CSS variables into document
+ */
+declare function injectCssVars(theme: Theme, prefix?: string): void;
+/**
+ * Remove CSS variables from document
+ */
+declare function removeCssVars(prefix?: string): void;
+/**
+ * Load theme from URL
+ */
+declare function loadThemeFromUrl(url: string): Promise<DeepPartial<Theme> | null>;
+/**
+ * Create theme with config
+ */
+declare function createTheme(config?: ThemeConfig): Promise<{
+    light: Theme;
+    dark: Theme;
+}>;
+/**
+ * Save theme mode to storage
+ */
+declare function saveThemeMode(mode: ThemeMode, storageKey?: string): void;
+/**
+ * Load theme mode from storage
+ */
+declare function loadThemeMode(storageKey?: string): ThemeMode | null;
+/**
+ * Get system preferred color scheme
+ */
+declare function getSystemColorScheme(): 'light' | 'dark';
+/**
+ * Resolve theme mode (handle 'system')
+ */
+declare function resolveThemeMode(mode: ThemeMode): 'light' | 'dark';
+
+/**
+ * ThemeProvider Component
+ * Global theme provider with light/dark mode support and brand identity integration
+ */
+
+declare const ThemeContext: React.Context<ThemeContextValue | null>;
+/**
+ * Hook to access theme context
+ */
+declare function useTheme(): ThemeContextValue;
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    config?: ThemeConfig;
+    /** Initial theme (overrides config) */
+    initialTheme?: Theme;
+}
+declare function ThemeProvider({ children, config, initialTheme, }: ThemeProviderProps): React.ReactElement;
+/**
+ * Get CSS variable value from theme path
+ * @example cssVar('colors.brand.primary') => 'var(--ec-colors-brand-primary)'
+ */
+declare function cssVar(path: string, prefix?: string): string;
+/**
+ * Get theme value directly
+ */
+declare function useThemeValue<T>(selector: (theme: Theme) => T): T;
+interface ThemeToggleProps {
+    className?: string;
+    size?: number;
+    showLabel?: boolean;
+    lightLabel?: string;
+    darkLabel?: string;
+}
+declare function ThemeToggle({ className, size, showLabel, lightLabel, darkLabel, }: ThemeToggleProps): React.ReactElement;
+
+/**
+ * Astro Component Types
+ * Highly typed props for all Astro components with Tailwind class support
+ */
+/** Common Tailwind text colors */
+type TailwindTextColor = 'text-white' | 'text-black' | 'text-gray-50' | 'text-gray-100' | 'text-gray-200' | 'text-gray-300' | 'text-gray-400' | 'text-gray-500' | 'text-gray-600' | 'text-gray-700' | 'text-gray-800' | 'text-gray-900' | 'text-slate-50' | 'text-slate-100' | 'text-slate-200' | 'text-slate-300' | 'text-slate-400' | 'text-slate-500' | 'text-slate-600' | 'text-slate-700' | 'text-slate-800' | 'text-slate-900' | 'text-blue-500' | 'text-blue-600' | 'text-blue-700' | 'text-green-500' | 'text-green-600' | 'text-green-700' | 'text-red-500' | 'text-red-600' | 'text-red-700' | 'text-yellow-500' | 'text-yellow-600' | 'text-yellow-700' | 'text-purple-500' | 'text-purple-600' | 'text-purple-700' | 'text-pink-500' | 'text-pink-600' | 'text-pink-700' | 'text-indigo-500' | 'text-indigo-600' | 'text-indigo-700' | string;
+/** Common Tailwind background colors */
+type TailwindBgColor = 'bg-white' | 'bg-black' | 'bg-transparent' | 'bg-gray-50' | 'bg-gray-100' | 'bg-gray-200' | 'bg-gray-300' | 'bg-gray-400' | 'bg-gray-500' | 'bg-gray-600' | 'bg-gray-700' | 'bg-gray-800' | 'bg-gray-900' | 'bg-slate-50' | 'bg-slate-100' | 'bg-slate-200' | 'bg-slate-300' | 'bg-slate-400' | 'bg-slate-500' | 'bg-slate-600' | 'bg-slate-700' | 'bg-slate-800' | 'bg-slate-900' | 'bg-blue-500' | 'bg-blue-600' | 'bg-blue-700' | 'bg-green-500' | 'bg-green-600' | 'bg-green-700' | 'bg-red-500' | 'bg-red-600' | 'bg-red-700' | 'bg-yellow-500' | 'bg-yellow-600' | 'bg-yellow-700' | 'bg-purple-500' | 'bg-purple-600' | 'bg-purple-700' | 'bg-gradient-to-r' | 'bg-gradient-to-l' | 'bg-gradient-to-t' | 'bg-gradient-to-b' | 'bg-gradient-to-br' | 'bg-gradient-to-bl' | 'bg-gradient-to-tr' | 'bg-gradient-to-tl' | string;
+/** Common Tailwind padding */
+type TailwindPadding = 'p-0' | 'p-1' | 'p-2' | 'p-3' | 'p-4' | 'p-5' | 'p-6' | 'p-8' | 'p-10' | 'p-12' | 'p-16' | 'p-20' | 'p-24' | 'px-0' | 'px-1' | 'px-2' | 'px-3' | 'px-4' | 'px-5' | 'px-6' | 'px-8' | 'px-10' | 'px-12' | 'px-16' | 'py-0' | 'py-1' | 'py-2' | 'py-3' | 'py-4' | 'py-5' | 'py-6' | 'py-8' | 'py-10' | 'py-12' | 'py-16' | 'py-20' | 'py-24' | 'pt-0' | 'pt-4' | 'pt-8' | 'pt-12' | 'pt-16' | 'pt-20' | 'pt-24' | 'pb-0' | 'pb-4' | 'pb-8' | 'pb-12' | 'pb-16' | 'pb-20' | 'pb-24' | string;
+/** Common Tailwind margin */
+type TailwindMargin = 'm-0' | 'm-1' | 'm-2' | 'm-3' | 'm-4' | 'm-5' | 'm-6' | 'm-8' | 'm-auto' | 'mx-auto' | 'mx-0' | 'mx-4' | 'mx-6' | 'mx-8' | 'my-0' | 'my-4' | 'my-6' | 'my-8' | 'my-10' | 'my-12' | 'my-16' | 'mt-0' | 'mt-2' | 'mt-4' | 'mt-6' | 'mt-8' | 'mt-10' | 'mt-12' | 'mt-16' | 'mb-0' | 'mb-2' | 'mb-4' | 'mb-6' | 'mb-8' | 'mb-10' | 'mb-12' | 'mb-16' | 'ml-auto' | 'mr-auto' | string;
+/** Common Tailwind font sizes */
+type TailwindFontSize = 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'text-2xl' | 'text-3xl' | 'text-4xl' | 'text-5xl' | 'text-6xl' | 'text-7xl' | 'text-8xl' | 'text-9xl' | string;
+/** Common Tailwind font weights */
+type TailwindFontWeight = 'font-thin' | 'font-extralight' | 'font-light' | 'font-normal' | 'font-medium' | 'font-semibold' | 'font-bold' | 'font-extrabold' | 'font-black' | string;
+/** Common Tailwind border radius */
+type TailwindBorderRadius = 'rounded-none' | 'rounded-sm' | 'rounded' | 'rounded-md' | 'rounded-lg' | 'rounded-xl' | 'rounded-2xl' | 'rounded-3xl' | 'rounded-full' | string;
+/** Common Tailwind shadow */
+type TailwindShadow = 'shadow-none' | 'shadow-sm' | 'shadow' | 'shadow-md' | 'shadow-lg' | 'shadow-xl' | 'shadow-2xl' | 'shadow-inner' | string;
+/** Common Tailwind width */
+type TailwindWidth = 'w-full' | 'w-screen' | 'w-auto' | 'w-fit' | 'w-max' | 'w-min' | 'w-1/2' | 'w-1/3' | 'w-2/3' | 'w-1/4' | 'w-3/4' | 'w-1/5' | 'w-2/5' | 'w-3/5' | 'w-4/5' | 'w-8' | 'w-10' | 'w-12' | 'w-16' | 'w-20' | 'w-24' | 'w-32' | 'w-40' | 'w-48' | 'w-56' | 'w-64' | 'max-w-sm' | 'max-w-md' | 'max-w-lg' | 'max-w-xl' | 'max-w-2xl' | 'max-w-3xl' | 'max-w-4xl' | 'max-w-5xl' | 'max-w-6xl' | 'max-w-7xl' | 'max-w-full' | string;
+/** Common Tailwind height */
+type TailwindHeight = 'h-full' | 'h-screen' | 'h-auto' | 'h-fit' | 'h-max' | 'h-min' | 'h-8' | 'h-10' | 'h-12' | 'h-16' | 'h-20' | 'h-24' | 'h-32' | 'h-40' | 'h-48' | 'h-56' | 'h-64' | 'min-h-screen' | 'min-h-full' | string;
+/** Common Tailwind gap */
+type TailwindGap = 'gap-0' | 'gap-1' | 'gap-2' | 'gap-3' | 'gap-4' | 'gap-5' | 'gap-6' | 'gap-8' | 'gap-10' | 'gap-12' | 'gap-x-0' | 'gap-x-2' | 'gap-x-4' | 'gap-x-6' | 'gap-x-8' | 'gap-y-0' | 'gap-y-2' | 'gap-y-4' | 'gap-y-6' | 'gap-y-8' | string;
+/** Custom class string */
+type TailwindClasses$1 = string;
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'danger' | 'success';
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+interface ButtonProps {
+    /** Button text content */
+    text: string;
+    /** Button variant */
+    variant?: ButtonVariant;
+    /** Button size */
+    size?: ButtonSize;
+    /** Full width button */
+    fullWidth?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Button type */
+    type?: 'button' | 'submit' | 'reset';
+    /** Link href (renders as anchor) */
+    href?: string;
+    /** Open in new tab */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /** Left icon (SVG string or component) */
+    leftIcon?: string;
+    /** Right icon (SVG string or component) */
+    rightIcon?: string;
+    /** Additional class override */
+    class?: TailwindClasses$1;
+    /** Container class */
+    containerClass?: TailwindClasses$1;
+    /** ID attribute */
+    id?: string;
+    /** Aria label */
+    ariaLabel?: string;
+}
+type LoaderVariant = 'spinner' | 'dots' | 'pulse' | 'bars';
+type LoaderSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+interface LoaderProps {
+    /** Loader variant */
+    variant?: LoaderVariant;
+    /** Loader size */
+    size?: LoaderSize;
+    /** Custom color */
+    color?: TailwindTextColor;
+    /** Label text */
+    label?: string;
+    /** Show label */
+    showLabel?: boolean;
+    /** Additional classes */
+    class?: TailwindClasses$1;
+}
+interface ContainerProps {
+    /** Max width */
+    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | 'full';
+    /** Padding */
+    padding?: TailwindPadding;
+    /** Center content */
+    centered?: boolean;
+    /** Additional classes */
+    class?: TailwindClasses$1;
+}
+interface RowProps {
+    /** Gap between columns */
+    gap?: TailwindGap;
+    /** Vertical alignment */
+    alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    /** Horizontal alignment */
+    justifyContent?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    /** Wrap behavior */
+    wrap?: boolean;
+    /** Reverse order */
+    reverse?: boolean;
+    /** Additional classes */
+    class?: TailwindClasses$1;
+}
+interface ColProps {
+    /** Column span (1-12) */
+    span?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto' | 'full';
+    /** Span on sm screens */
+    sm?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto' | 'full';
+    /** Span on md screens */
+    md?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto' | 'full';
+    /** Span on lg screens */
+    lg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto' | 'full';
+    /** Span on xl screens */
+    xl?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto' | 'full';
+    /** Additional classes */
+    class?: TailwindClasses$1;
+}
+interface TwoColumnProps {
+    /** Left column content ratio */
+    leftRatio?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
+    /** Gap between columns */
+    gap?: TailwindGap;
+    /** Reverse on mobile */
+    reverseMobile?: boolean;
+    /** Vertical alignment */
+    alignItems?: 'start' | 'center' | 'end' | 'stretch';
+    /** Additional classes */
+    class?: TailwindClasses$1;
+    /** Left column class */
+    leftClass?: TailwindClasses$1;
+    /** Right column class */
+    rightClass?: TailwindClasses$1;
+}
+interface ThreeColumnProps {
+    /** Gap between columns */
+    gap?: TailwindGap;
+    /** Vertical alignment */
+    alignItems?: 'start' | 'center' | 'end' | 'stretch';
+    /** Additional classes */
+    class?: TailwindClasses$1;
+    /** Column 1 class */
+    col1Class?: TailwindClasses$1;
+    /** Column 2 class */
+    col2Class?: TailwindClasses$1;
+    /** Column 3 class */
+    col3Class?: TailwindClasses$1;
+}
+interface NavLink {
+    /** Link text */
+    text: string;
+    /** Link URL */
+    href: string;
+    /** Active state */
+    active?: boolean;
+    /** Open in new tab */
+    external?: boolean;
+    /** Dropdown items */
+    children?: NavLink[];
+    /** Icon SVG string */
+    icon?: string;
+}
+interface HeaderProps {
+    /** Logo image URL */
+    logo?: string;
+    /** Logo alt text */
+    logoAlt?: string;
+    /** Logo text (if no image) */
+    logoText?: string;
+    /** Navigation links */
+    navLinks?: NavLink[];
+    /** CTA button */
+    cta?: {
+        text: string;
+        href: string;
+        variant?: ButtonVariant;
+    };
+    /** Sticky header */
+    sticky?: boolean;
+    /** Transparent background */
+    transparent?: boolean;
+    /** Background class */
+    bgClass?: TailwindBgColor;
+    /** Text color class */
+    textClass?: TailwindTextColor;
+    /** Additional classes */
+    class?: TailwindClasses$1;
+    /** Logo class */
+    logoClass?: TailwindClasses$1;
+    /** Nav class */
+    navClass?: TailwindClasses$1;
+    /** Container max width */
+    maxWidth?: ContainerProps['maxWidth'];
+}
+interface FooterColumn {
+    /** Column title */
+    title: string;
+    /** Column links */
+    links: NavLink[];
+}
+interface SocialLink {
+    /** Platform name */
+    platform: 'facebook' | 'twitter' | 'instagram' | 'linkedin' | 'youtube' | 'github' | 'discord' | 'tiktok';
+    /** Profile URL */
+    href: string;
+    /** Icon SVG (optional, defaults based on platform) */
+    icon?: string;
+}
+interface FooterProps {
+    /** Logo image URL */
+    logo?: string;
+    /** Logo alt text */
+    logoAlt?: string;
+    /** Logo text */
+    logoText?: string;
+    /** Company description */
+    description?: string;
+    /** Footer columns */
+    columns?: FooterColumn[];
+    /** Social links */
+    socialLinks?: SocialLink[];
+    /** Copyright text */
+    copyright?: string;
+    /** Background class */
+    bgClass?: TailwindBgColor;
+    /** Text color class */
+    textClass?: TailwindTextColor;
+    /** Additional classes */
+    class?: TailwindClasses$1;
+    /** Container max width */
+    maxWidth?: ContainerProps['maxWidth'];
+    /** Show newsletter signup */
+    showNewsletter?: boolean;
+    /** Newsletter title */
+    newsletterTitle?: string;
+    /** Newsletter description */
+    newsletterDescription?: string;
+}
+interface BannerProps {
+    /** Main heading */
+    title: string;
+    /** Subtitle/description */
+    subtitle?: string;
+    /** Background image URL */
+    backgroundImage?: string;
+    /** Background gradient/color */
+    bgClass?: TailwindBgColor;
+    /** Text color */
+    textClass?: TailwindTextColor;
+    /** Overlay opacity (0-100) */
+    overlayOpacity?: number;
+    /** Overlay color class */
+    overlayClass?: string;
+    /** Primary CTA */
+    primaryCta?: {
+        text: string;
+        href: string;
+        variant?: ButtonVariant;
+    };
+    /** Secondary CTA */
+    secondaryCta?: {
+        text: string;
+        href: string;
+        variant?: ButtonVariant;
+    };
+    /** Banner height */
+    height?: 'sm' | 'md' | 'lg' | 'xl' | 'screen';
+    /** Content alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Additional classes */
+    class?: TailwindClasses$1;
+    /** Title class */
+    titleClass?: TailwindClasses$1;
+    /** Subtitle class */
+    subtitleClass?: TailwindClasses$1;
+    /** Content container class */
+    contentClass?: TailwindClasses$1;
+}
+interface CtaSectionProps {
+    /** Main heading */
+    title: string;
+    /** Description text */
+    description?: string;
+    /** Primary button */
+    primaryButton?: {
+        text: string;
+        href: string;
+        variant?: ButtonVariant;
+    };
+    /** Secondary button */
+    secondaryButton?: {
+        text: string;
+        href: string;
+        variant?: ButtonVariant;
+    };
+    /** Background class */
+    bgClass?: TailwindBgColor;
+    /** Text color */
+    textClass?: TailwindTextColor;
+    /** Content alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Additional classes */
+    class?: TailwindClasses$1;
+    /** Padding */
+    padding?: TailwindPadding;
+}
+interface NewsletterSectionProps {
+    /** Main heading */
+    title?: string;
+    /** Description text */
+    description?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Submit button text */
+    buttonText?: string;
+    /** Success message */
+    successMessage?: string;
+    /** Error message */
+    errorMessage?: string;
+    /** Form action URL */
+    actionUrl?: string;
+    /** Background class */
+    bgClass?: TailwindBgColor;
+    /** Text color */
+    textClass?: TailwindTextColor;
+    /** Additional classes */
+    class?: TailwindClasses$1;
+    /** Input class */
+    inputClass?: TailwindClasses$1;
+    /** Button class */
+    buttonClass?: TailwindClasses$1;
+    /** Show privacy note */
+    showPrivacyNote?: boolean;
+    /** Privacy note text */
+    privacyNote?: string;
+}
+interface CardProps {
+    /** Card title */
+    title?: string;
+    /** Card description */
+    description?: string;
+    /** Card image URL */
+    image?: string;
+    /** Image alt text */
+    imageAlt?: string;
+    /** Image position */
+    imagePosition?: 'top' | 'bottom' | 'left' | 'right';
+    /** Card link */
+    href?: string;
+    /** Background class */
+    bgClass?: TailwindBgColor;
+    /** Text color */
+    textClass?: TailwindTextColor;
+    /** Border radius */
+    rounded?: TailwindBorderRadius;
+    /** Shadow */
+    shadow?: TailwindShadow;
+    /** Hover effect */
+    hoverEffect?: boolean;
+    /** Additional classes */
+    class?: TailwindClasses$1;
+    /** Image class */
+    imageClass?: TailwindClasses$1;
+    /** Content class */
+    contentClass?: TailwindClasses$1;
+    /** Title class */
+    titleClass?: TailwindClasses$1;
+    /** Description class */
+    descriptionClass?: TailwindClasses$1;
+    /** Padding */
+    padding?: TailwindPadding;
+}
+interface Feature {
+    /** Feature title */
+    title: string;
+    /** Feature description */
+    description: string;
+    /** Feature icon (SVG string) */
+    icon?: string;
+    /** Feature image */
+    image?: string;
+    /** Feature link */
+    href?: string;
+}
+interface FeatureSectionProps {
+    /** Section title */
+    title?: string;
+    /** Section subtitle */
+    subtitle?: string;
+    /** Features array */
+    features: Feature[];
+    /** Layout columns */
+    columns?: 2 | 3 | 4;
+    /** Background class */
+    bgClass?: TailwindBgColor;
+    /** Text color */
+    textClass?: TailwindTextColor;
+    /** Additional classes */
+    class?: TailwindClasses$1;
+    /** Feature card class */
+    featureClass?: TailwindClasses$1;
+    /** Icon class */
+    iconClass?: TailwindClasses$1;
+}
+interface Testimonial {
+    /** Author name */
+    name: string;
+    /** Author role/title */
+    role?: string;
+    /** Author company */
+    company?: string;
+    /** Author avatar URL */
+    avatar?: string;
+    /** Testimonial text */
+    text: string;
+    /** Rating (1-5) */
+    rating?: 1 | 2 | 3 | 4 | 5;
+}
+interface TestimonialSectionProps {
+    /** Section title */
+    title?: string;
+    /** Section subtitle */
+    subtitle?: string;
+    /** Testimonials array */
+    testimonials: Testimonial[];
+    /** Layout style */
+    layout?: 'grid' | 'carousel' | 'single';
+    /** Background class */
+    bgClass?: TailwindBgColor;
+    /** Text color */
+    textClass?: TailwindTextColor;
+    /** Additional classes */
+    class?: TailwindClasses$1;
+    /** Testimonial card class */
+    cardClass?: TailwindClasses$1;
+}
+interface PricingFeature {
+    /** Feature text */
+    text: string;
+    /** Included or not */
+    included: boolean;
+}
+interface PricingPlan {
+    /** Plan name */
+    name: string;
+    /** Plan description */
+    description?: string;
+    /** Price */
+    price: string;
+    /** Price period */
+    period?: string;
+    /** Features list */
+    features: PricingFeature[];
+    /** CTA button text */
+    ctaText: string;
+    /** CTA button href */
+    ctaHref: string;
+    /** Highlighted/popular plan */
+    popular?: boolean;
+    /** Badge text */
+    badge?: string;
+}
+interface PricingSectionProps {
+    /** Section title */
+    title?: string;
+    /** Section subtitle */
+    subtitle?: string;
+    /** Pricing plans */
+    plans: PricingPlan[];
+    /** Background class */
+    bgClass?: TailwindBgColor;
+    /** Text color */
+    textClass?: TailwindTextColor;
+    /** Additional classes */
+    class?: TailwindClasses$1;
+    /** Plan card class */
+    planClass?: TailwindClasses$1;
+}
+interface FaqItem {
+    /** Question */
+    question: string;
+    /** Answer */
+    answer: string;
+}
+interface FaqSectionProps {
+    /** Section title */
+    title?: string;
+    /** Section subtitle */
+    subtitle?: string;
+    /** FAQ items */
+    items: FaqItem[];
+    /** Layout style */
+    layout?: 'accordion' | 'grid' | 'list';
+    /** Background class */
+    bgClass?: TailwindBgColor;
+    /** Text color */
+    textClass?: TailwindTextColor;
+    /** Additional classes */
+    class?: TailwindClasses$1;
+}
+/** Generate dummy image URL */
+declare function dummyImage(width: number, height: number, text?: string, bgColor?: string, textColor?: string): string;
+/** Lorem ipsum generator */
+declare function loremIpsum(type?: 'word' | 'sentence' | 'paragraph', count?: number): string;
+declare const dummyHeaderData: HeaderProps;
+declare const dummyFooterData: FooterProps;
+declare const dummyBannerData: BannerProps;
+declare const dummyFeatures: Feature[];
+declare const dummyTestimonials: Testimonial[];
+declare const dummyPricingPlans: PricingPlan[];
+declare const dummyFaqItems: FaqItem[];
+
+/**
+ * Form Types
+ * Types for all form components
+ */
+type TailwindClasses = string;
+interface FormFieldError {
+    field: string;
+    message: string;
+}
+interface FormSubmitResult {
+    success: boolean;
+    message?: string;
+    errors?: FormFieldError[];
+    data?: Record<string, unknown>;
+}
+interface ContactFormValues {
+    name: string;
+    email: string;
+    phone?: string;
+    subject?: string;
+    message: string;
+}
+interface ContactFormProps {
+    /** Form action URL */
+    actionUrl?: string;
+    /** Submit handler */
+    onSubmit?: (values: ContactFormValues) => Promise<FormSubmitResult>;
+    /** Initial values */
+    initialValues?: Partial<ContactFormValues>;
+    /** Show phone field */
+    showPhone?: boolean;
+    /** Show subject field */
+    showSubject?: boolean;
+    /** Subject options (if select) */
+    subjectOptions?: string[];
+    /** Submit button text */
+    submitText?: string;
+    /** Success message */
+    successMessage?: string;
+    /** Container class */
+    className?: TailwindClasses;
+    /** Form class */
+    formClass?: TailwindClasses;
+    /** Input class */
+    inputClass?: TailwindClasses;
+    /** Label class */
+    labelClass?: TailwindClasses;
+    /** Button class */
+    buttonClass?: TailwindClasses;
+    /** Error class */
+    errorClass?: TailwindClasses;
+}
+interface NewsletterFormValues {
+    email: string;
+    firstName?: string;
+    lastName?: string;
+}
+interface NewsletterFormProps {
+    /** Form action URL */
+    actionUrl?: string;
+    /** Submit handler */
+    onSubmit?: (values: NewsletterFormValues) => Promise<FormSubmitResult>;
+    /** Initial values */
+    initialValues?: Partial<NewsletterFormValues>;
+    /** Show name fields */
+    showName?: boolean;
+    /** Placeholder */
+    placeholder?: string;
+    /** Submit button text */
+    submitText?: string;
+    /** Success message */
+    successMessage?: string;
+    /** Layout */
+    layout?: 'inline' | 'stacked';
+    /** Container class */
+    className?: TailwindClasses;
+    /** Form class */
+    formClass?: TailwindClasses;
+    /** Input class */
+    inputClass?: TailwindClasses;
+    /** Button class */
+    buttonClass?: TailwindClasses;
+}
+interface LoginFormValues {
+    email: string;
+    password: string;
+    rememberMe?: boolean;
+}
+interface LoginFormProps {
+    /** Form action URL */
+    actionUrl?: string;
+    /** Submit handler */
+    onSubmit?: (values: LoginFormValues) => Promise<FormSubmitResult>;
+    /** Initial values */
+    initialValues?: Partial<LoginFormValues>;
+    /** Show remember me */
+    showRememberMe?: boolean;
+    /** Forgot password link */
+    forgotPasswordLink?: string;
+    /** Register link */
+    registerLink?: string;
+    /** Submit button text */
+    submitText?: string;
+    /** Success redirect URL */
+    successRedirect?: string;
+    /** Container class */
+    className?: TailwindClasses;
+    /** Form class */
+    formClass?: TailwindClasses;
+    /** Input class */
+    inputClass?: TailwindClasses;
+    /** Button class */
+    buttonClass?: TailwindClasses;
+}
+interface RegisterFormValues {
+    firstName: string;
+    lastName: string;
+    email: string;
+    password: string;
+    confirmPassword: string;
+    acceptTerms: boolean;
+}
+interface RegisterFormProps {
+    /** Form action URL */
+    actionUrl?: string;
+    /** Submit handler */
+    onSubmit?: (values: RegisterFormValues) => Promise<FormSubmitResult>;
+    /** Initial values */
+    initialValues?: Partial<RegisterFormValues>;
+    /** Terms link */
+    termsLink?: string;
+    /** Privacy link */
+    privacyLink?: string;
+    /** Login link */
+    loginLink?: string;
+    /** Submit button text */
+    submitText?: string;
+    /** Success redirect URL */
+    successRedirect?: string;
+    /** Password requirements */
+    passwordRequirements?: {
+        minLength?: number;
+        requireUppercase?: boolean;
+        requireLowercase?: boolean;
+        requireNumber?: boolean;
+        requireSpecial?: boolean;
+    };
+    /** Container class */
+    className?: TailwindClasses;
+    /** Form class */
+    formClass?: TailwindClasses;
+    /** Input class */
+    inputClass?: TailwindClasses;
+    /** Button class */
+    buttonClass?: TailwindClasses;
+}
+declare const VALIDATION_MESSAGES: {
+    readonly required: "This field is required";
+    readonly email: "Please enter a valid email address";
+    readonly phone: "Please enter a valid phone number";
+    readonly minLength: (min: number) => string;
+    readonly maxLength: (max: number) => string;
+    readonly passwordMatch: "Passwords must match";
+    readonly acceptTerms: "You must accept the terms and conditions";
+    readonly passwordUppercase: "Password must contain at least one uppercase letter";
+    readonly passwordLowercase: "Password must contain at least one lowercase letter";
+    readonly passwordNumber: "Password must contain at least one number";
+    readonly passwordSpecial: "Password must contain at least one special character";
+};
+
+/**
+ * Form Validation Schemas
+ * Yup validation schemas for all forms
+ */
+
+declare const contactFormSchema: Yup.ObjectSchema<{
+    name: string;
+    email: string;
+    phone: string | null | undefined;
+    subject: string | null | undefined;
+    message: string;
+}, Yup.AnyObject, {
+    name: undefined;
+    email: undefined;
+    phone: undefined;
+    subject: undefined;
+    message: undefined;
+}, "">;
+declare const newsletterFormSchema: Yup.ObjectSchema<{
+    email: string;
+    firstName: string | null | undefined;
+    lastName: string | null | undefined;
+}, Yup.AnyObject, {
+    email: undefined;
+    firstName: undefined;
+    lastName: undefined;
+}, "">;
+declare const loginFormSchema: Yup.ObjectSchema<{
+    email: string;
+    password: string;
+    rememberMe: boolean | undefined;
+}, Yup.AnyObject, {
+    email: undefined;
+    password: undefined;
+    rememberMe: undefined;
+}, "">;
+interface PasswordRequirements {
+    minLength?: number;
+    requireUppercase?: boolean;
+    requireLowercase?: boolean;
+    requireNumber?: boolean;
+    requireSpecial?: boolean;
+}
+declare function createRegisterFormSchema(requirements?: PasswordRequirements): Yup.ObjectSchema<{
+    firstName: string;
+    lastName: string;
+    email: string;
+    password: string;
+    confirmPassword: string;
+    acceptTerms: boolean | undefined;
+}, Yup.AnyObject, {
+    firstName: undefined;
+    lastName: undefined;
+    email: undefined;
+    password: undefined;
+    confirmPassword: undefined;
+    acceptTerms: undefined;
+}, "">;
+declare const registerFormSchema: Yup.ObjectSchema<{
+    firstName: string;
+    lastName: string;
+    email: string;
+    password: string;
+    confirmPassword: string;
+    acceptTerms: boolean | undefined;
+}, Yup.AnyObject, {
+    firstName: undefined;
+    lastName: undefined;
+    email: undefined;
+    password: undefined;
+    confirmPassword: undefined;
+    acceptTerms: undefined;
+}, "">;
+
+/**
+ * Contact Form Component
+ * React form with Formik and Yup validation
+ */
+
+declare function ContactForm({ actionUrl, onSubmit, initialValues, showPhone, showSubject, subjectOptions, submitText, successMessage, className, formClass, inputClass, labelClass, buttonClass, errorClass, }: ContactFormProps): React.ReactElement;
+
+/**
+ * Newsletter Form Component
+ * React form with Formik and Yup validation
+ */
+
+declare function NewsletterForm({ actionUrl, onSubmit, initialValues, showName, placeholder, submitText, successMessage, layout, className, formClass, inputClass, buttonClass, }: NewsletterFormProps): React.ReactElement;
+
+/**
+ * Login Form Component
+ * React form with Formik and Yup validation
+ */
+
+declare function LoginForm({ actionUrl, onSubmit, initialValues, showRememberMe, forgotPasswordLink, registerLink, submitText, successRedirect, className, formClass, inputClass, buttonClass, }: LoginFormProps): React.ReactElement;
+
+/**
+ * Register Form Component
+ * React form with Formik and Yup validation
+ */
+
+declare function RegisterForm({ actionUrl, onSubmit, initialValues, termsLink, privacyLink, loginLink, submitText, successRedirect, passwordRequirements, className, formClass, inputClass, buttonClass, }: RegisterFormProps): React.ReactElement;
+
+export { type BannerProps, type BorderRadius, type Breakpoints, type ButtonProps, type ButtonSize, type ButtonVariant, type CardProps, type ColProps, type ColorPalette, type ComponentThemes, ContactForm, type ContactFormProps, type ContactFormValues, type ContainerProps, type CtaSectionProps, type FaqItem, type FaqSectionProps, type Feature, type FeatureSectionProps, type FooterColumn, type FooterProps, type FormFieldError, type FormSubmitResult, type HeaderProps, type LoaderProps, type LoaderSize, type LoaderVariant, LoginForm, type LoginFormProps, type LoginFormValues, type NavLink, NewsletterForm, type NewsletterFormProps, type NewsletterFormValues, type NewsletterSectionProps, type PasswordRequirements, type PricingFeature, type PricingPlan, type PricingSectionProps, RegisterForm, type RegisterFormProps, type RegisterFormValues, type RowProps, type SemanticColors, type Shadows, type SocialLink, type Spacing, type TailwindBgColor, type TailwindBorderRadius, type TailwindClasses$1 as TailwindClasses, type TailwindFontSize, type TailwindFontWeight, type TailwindGap, type TailwindHeight, type TailwindMargin, type TailwindPadding, type TailwindShadow, type TailwindTextColor, type TailwindWidth, type Testimonial, type TestimonialSectionProps, type Theme, type ThemeConfig, ThemeContext, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ThreeColumnProps, type TwoColumnProps, type Typography, VALIDATION_MESSAGES, type ThemeMode as WebThemeMode, adjustColor, contactFormSchema, createRegisterFormSchema, createTheme, createThemeFromBrand, cssVar, deepMerge, defaultDarkTheme, defaultLightTheme, dummyBannerData, dummyFaqItems, dummyFeatures, dummyFooterData, dummyHeaderData, dummyImage, dummyPricingPlans, dummyTestimonials, flattenToCssVars, generateCssVars, getContrastColor, getSystemColorScheme, hexToRgba, injectCssVars, loadThemeFromUrl, loadThemeMode, loginFormSchema, loremIpsum, newsletterFormSchema, registerFormSchema, removeCssVars, resolveThemeMode, saveThemeMode, useTheme, useThemeValue };