@frank-auth/react

import { AppearanceConfig, ColorVariant, ComponentAppearance, ComponentSize, OrganizationConfig } from './types'; import { DEFAULT_APPEARANCE_CONFIG, DEFAULT_BRANDING_CONFIG, DEFAULT_COMPONENT_APPEARANCE, DEFAULT_LAYOUT_CONFIG } from './defaults'; /** * Input component appearance variants */ export declare const INPUT_VARIANTS: { readonly flat: { readonly className: "bg-default-100 hover:bg-default-200 focus:bg-default-100"; readonly style: { readonly backgroundColor: "hsl(var(--color-default-100))"; readonly border: "none"; readonly borderRadius: "var(--border-radius-md)"; }; }; readonly bordered: { readonly className: "border-2 border-default-200 hover:border-default-300 focus:border-primary"; readonly style: { readonly backgroundColor: "transparent"; readonly border: "2px solid hsl(var(--color-default-200))"; readonly borderRadius: "var(--border-radius-md)"; }; }; readonly underlined: { readonly className: "border-b-2 border-default-300 hover:border-default-400 focus:border-primary"; readonly style: { readonly backgroundColor: "transparent"; readonly border: "none"; readonly borderBottom: "2px solid hsl(var(--color-default-300))"; readonly borderRadius: "0"; }; }; readonly faded: { readonly className: "bg-default-50 hover:bg-default-100 focus:bg-default-100 border border-default-200"; readonly style: { readonly backgroundColor: "hsl(var(--color-default-50))"; readonly border: "1px solid hsl(var(--color-default-200))"; readonly borderRadius: "var(--border-radius-md)"; }; }; }; /** * Button component appearance variants */ export declare const BUTTON_VARIANTS: { readonly solid: { readonly className: "bg-primary text-primary-foreground hover:bg-primary-600 focus:bg-primary-700"; readonly style: { readonly backgroundColor: "hsl(var(--color-primary))"; readonly color: "hsl(var(--color-primary-foreground))"; readonly border: "none"; }; }; readonly bordered: { readonly className: "border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground"; readonly style: { readonly backgroundColor: "transparent"; readonly color: "hsl(var(--color-primary))"; readonly border: "2px solid hsl(var(--color-primary))"; }; }; readonly light: { readonly className: "bg-primary-100 text-primary-700 hover:bg-primary-200"; readonly style: { readonly backgroundColor: "hsl(var(--color-primary-100))"; readonly color: "hsl(var(--color-primary-700))"; readonly border: "none"; }; }; readonly flat: { readonly className: "bg-default-100 text-default-700 hover:bg-default-200"; readonly style: { readonly backgroundColor: "hsl(var(--color-default-100))"; readonly color: "hsl(var(--color-default-700))"; readonly border: "none"; }; }; readonly faded: { readonly className: "bg-default-50 text-default-700 hover:bg-default-100 border border-default-200"; readonly style: { readonly backgroundColor: "hsl(var(--color-default-50))"; readonly color: "hsl(var(--color-default-700))"; readonly border: "1px solid hsl(var(--color-default-200))"; }; }; readonly shadow: { readonly className: "bg-primary text-primary-foreground hover:bg-primary-600 shadow-lg hover:shadow-xl"; readonly style: { readonly backgroundColor: "hsl(var(--color-primary))"; readonly color: "hsl(var(--color-primary-foreground))"; readonly border: "none"; readonly boxShadow: "var(--shadow-lg)"; }; }; readonly ghost: { readonly className: "text-primary hover:bg-primary-100 hover:text-primary-700"; readonly style: { readonly backgroundColor: "transparent"; readonly color: "hsl(var(--color-primary))"; readonly border: "none"; }; }; }; /** * Card component appearance variants */ export declare const CARD_VARIANTS: { readonly shadow: { readonly className: "bg-card text-card-foreground shadow-md"; readonly style: { readonly backgroundColor: "hsl(var(--color-card))"; readonly color: "hsl(var(--color-card-foreground))"; readonly boxShadow: "var(--shadow-md)"; }; }; readonly bordered: { readonly className: "bg-card text-card-foreground border border-border"; readonly style: { readonly backgroundColor: "hsl(var(--color-card))"; readonly color: "hsl(var(--color-card-foreground))"; readonly border: "1px solid hsl(var(--color-border))"; }; }; readonly flat: { readonly className: "bg-default-50 text-default-900"; readonly style: { readonly backgroundColor: "hsl(var(--color-default-50))"; readonly color: "hsl(var(--color-default-900))"; }; }; }; /** * Component size configurations */ export declare const SIZE_CONFIGS: { readonly sm: { readonly padding: "var(--spacing-sm)"; readonly fontSize: "var(--font-size-sm)"; readonly height: "32px"; readonly minHeight: "32px"; }; readonly md: { readonly padding: "var(--spacing-md)"; readonly fontSize: "var(--font-size-base)"; readonly height: "40px"; readonly minHeight: "40px"; }; readonly lg: { readonly padding: "var(--spacing-lg)"; readonly fontSize: "var(--font-size-lg)"; readonly height: "48px"; readonly minHeight: "48px"; }; }; /** * Modal size configurations */ export declare const MODAL_SIZES: { readonly xs: { readonly width: "320px"; readonly maxWidth: "90vw"; }; readonly sm: { readonly width: "400px"; readonly maxWidth: "90vw"; }; readonly md: { readonly width: "512px"; readonly maxWidth: "90vw"; }; readonly lg: { readonly width: "640px"; readonly maxWidth: "90vw"; }; readonly xl: { readonly width: "768px"; readonly maxWidth: "90vw"; }; readonly '2xl': { readonly width: "896px"; readonly maxWidth: "95vw"; }; readonly '3xl': { readonly width: "1024px"; readonly maxWidth: "95vw"; }; readonly '4xl': { readonly width: "1280px"; readonly maxWidth: "95vw"; }; readonly '5xl': { readonly width: "1536px"; readonly maxWidth: "95vw"; }; readonly full: { readonly width: "100vw"; readonly height: "100vh"; readonly maxWidth: "100vw"; readonly maxHeight: "100vh"; }; }; /** * Responsive breakpoints */ export declare const BREAKPOINTS: { readonly sm: "640px"; readonly md: "768px"; readonly lg: "1024px"; readonly xl: "1280px"; readonly '2xl': "1536px"; }; /** * Responsive utilities */ export declare const RESPONSIVE_UTILITIES: { /** * Check if screen size matches breakpoint */ isBreakpoint: (breakpoint: keyof typeof BREAKPOINTS) => boolean; /** * Get current breakpoint */ getCurrentBreakpoint: () => keyof typeof BREAKPOINTS; /** * Create responsive value getter */ getResponsiveValue: <T>(values: Partial<Record<keyof typeof BREAKPOINTS, T>>, fallback: T) => T; }; export declare class AppearanceManager { private config; private listeners; constructor(initialConfig?: Partial<AppearanceConfig>); /** * Get current appearance configuration */ getConfig(): AppearanceConfig; /** * Update appearance configuration */ updateConfig(updates: Partial<AppearanceConfig>): void; /** * Apply organization branding */ applyOrganizationBranding(organization: OrganizationConfig): void; /** * Get component styles for a specific component */ getComponentStyles(componentType: keyof ComponentAppearance, variant?: string, size?: ComponentSize, color?: ColorVariant): { className: string; style: React.CSSProperties; }; /** * Get layout styles */ getLayoutStyles(): React.CSSProperties; /** * Get branding CSS variables */ getBrandingVariables(): Record<string, string>; /** * Generate complete CSS for appearance */ generateCSS(): string; /** * Apply appearance to DOM */ applyToDOM(): void; /** * Subscribe to appearance changes */ subscribe(callback: (config: AppearanceConfig) => void): () => void; private mergeAppearanceConfig; private getBaseComponentStyles; private getVariantStyles; private getSizeStyles; private getColorStyles; private mergeStyles; private notifyListeners; } /** * Create an appearance manager instance */ export declare function createAppearanceManager(config?: Partial<AppearanceConfig>): AppearanceManager; /** * Get component class names based on configuration */ export declare function getComponentClassNames(componentType: keyof ComponentAppearance, config: ComponentAppearance, variant?: string, size?: ComponentSize, color?: ColorVariant, additionalClasses?: string[]): string; /** * Convert appearance config to Tailwind classes */ export declare function appearanceConfigToTailwind(config: ComponentAppearance): Record<string, string>; /** * Create responsive component props */ export declare function createResponsiveProps<T>(values: Partial<Record<keyof typeof BREAKPOINTS, T>>, fallback: T): T; export { DEFAULT_APPEARANCE_CONFIG, DEFAULT_COMPONENT_APPEARANCE, DEFAULT_LAYOUT_CONFIG, DEFAULT_BRANDING_CONFIG, }; //# sourceMappingURL=appearance.d.ts.map