@frank-auth/react/dist/cjs/hooks/use-theme.cjs.map

Flexible and customizable React UI components for Frank Authentication

{"version":3,"file":"use-theme.cjs","sources":["../../../src/hooks/use-theme.ts"],"sourcesContent":["/**\n * @frank-auth/react - useTheme Hook\n *\n * Enhanced theme hook that provides comprehensive theme management,\n * organization branding, and CSS customization capabilities.\n */\n\nimport {useCallback, useMemo} from 'react';\n\nimport type {Organization} from '@frank-auth/client';\nimport type {Theme} from '../config';\n\nimport {useTheme as useThemeProvider} from '../provider/theme-provider';\nimport {useAuth} from './use-auth';\n\nimport type {OrganizationBranding} from '../provider/types';\n\n// ============================================================================\n// Theme Hook Interface\n// ============================================================================\n\nexport interface UseThemeReturn {\n    // Theme state\n    theme: Theme;\n    mode: 'light' | 'dark' | 'system';\n    effectiveMode: 'light' | 'dark';\n    isSystemMode: boolean;\n    isCustomized: boolean;\n\n    // CSS variables and styling\n    cssVariables: Record<string, string>;\n    generateCSS: () => string;\n\n    // Theme management\n    setTheme: (theme: Partial<Theme>) => void;\n    setMode: (mode: 'light' | 'dark' | 'system') => void;\n    resetTheme: () => void;\n\n    // Organization branding\n    organizationBranding?: OrganizationBranding;\n    applyBranding: (branding: OrganizationBranding) => void;\n    applyOrganizationBranding: (organization: Organization) => void;\n    isCustomBranded: boolean;\n\n    // Color management\n    colors: Theme['colors'];\n    primaryColor: string;\n    secondaryColor: string;\n    backgroundColor: string;\n    foregroundColor: string;\n\n    // Typography\n    typography: Theme['typography'];\n    fontFamily: string[];\n\n    // Spacing and layout\n    spacing: Theme['spacing'];\n    borderRadius: Theme['borderRadius'];\n    shadows: Theme['shadows'];\n\n    // Utilities\n    getColorValue: (colorName: string, shade?: string) => string;\n    getFontSize: (size: string) => string;\n    getSpacing: (size: string) => string;\n    getBorderRadius: (size: string) => string;\n    getShadow: (size: string) => string;\n\n    // Mode switching\n    toggleMode: () => void;\n    setLightMode: () => void;\n    setDarkMode: () => void;\n    setSystemMode: () => void;\n\n    // Theme presets\n    applyPreset: (preset: ThemePreset) => void;\n    availablePresets: ThemePreset[];\n}\n\nexport type ThemePreset = 'blue' | 'purple' | 'green' | 'orange' | 'pink' | 'red' | 'gray';\n\n// ============================================================================\n// Theme Presets\n// ============================================================================\n\nconst THEME_PRESETS: Record<ThemePreset, Partial<Theme>> = {\n    blue: {\n        colors: {\n            primary: {\n                50: '#eff6ff',\n                100: '#dbeafe',\n                200: '#bfdbfe',\n                300: '#93c5fd',\n                400: '#60a5fa',\n                500: '#3b82f6',\n                600: '#2563eb',\n                700: '#1d4ed8',\n                800: '#1e40af',\n                900: '#1e3a8a',\n                950: '#172554',\n                DEFAULT: '#3b82f6',\n                foreground: '#ffffff',\n            },\n        },\n    },\n    purple: {\n        colors: {\n            primary: {\n                50: '#faf5ff',\n                100: '#f3e8ff',\n                200: '#e9d5ff',\n                300: '#d8b4fe',\n                400: '#c084fc',\n                500: '#a855f7',\n                600: '#9333ea',\n                700: '#7c3aed',\n                800: '#6b21a8',\n                900: '#581c87',\n                950: '#3b0764',\n                DEFAULT: '#a855f7',\n                foreground: '#ffffff',\n            },\n        },\n    },\n    green: {\n        colors: {\n            primary: {\n                50: '#f0fdf4',\n                100: '#dcfce7',\n                200: '#bbf7d0',\n                300: '#86efac',\n                400: '#4ade80',\n                500: '#22c55e',\n                600: '#16a34a',\n                700: '#15803d',\n                800: '#166534',\n                900: '#14532d',\n                950: '#052e16',\n                DEFAULT: '#22c55e',\n                foreground: '#ffffff',\n            },\n        },\n    },\n    orange: {\n        colors: {\n            primary: {\n                50: '#fff7ed',\n                100: '#ffedd5',\n                200: '#fed7aa',\n                300: '#fdba74',\n                400: '#fb923c',\n                500: '#f97316',\n                600: '#ea580c',\n                700: '#c2410c',\n                800: '#9a3412',\n                900: '#7c2d12',\n                950: '#431407',\n                DEFAULT: '#f97316',\n                foreground: '#ffffff',\n            },\n        },\n    },\n    pink: {\n        colors: {\n            primary: {\n                50: '#fdf2f8',\n                100: '#fce7f3',\n                200: '#fbcfe8',\n                300: '#f9a8d4',\n                400: '#f472b6',\n                500: '#ec4899',\n                600: '#db2777',\n                700: '#be185d',\n                800: '#9d174d',\n                900: '#831843',\n                950: '#500724',\n                DEFAULT: '#ec4899',\n                foreground: '#ffffff',\n            },\n        },\n    },\n    red: {\n        colors: {\n            primary: {\n                50: '#fef2f2',\n                100: '#fee2e2',\n                200: '#fecaca',\n                300: '#fca5a5',\n                400: '#f87171',\n                500: '#ef4444',\n                600: '#dc2626',\n                700: '#b91c1c',\n                800: '#991b1b',\n                900: '#7f1d1d',\n                950: '#450a0a',\n                DEFAULT: '#ef4444',\n                foreground: '#ffffff',\n            },\n        },\n    },\n    gray: {\n        colors: {\n            primary: {\n                50: '#f9fafb',\n                100: '#f3f4f6',\n                200: '#e5e7eb',\n                300: '#d1d5db',\n                400: '#9ca3af',\n                500: '#6b7280',\n                600: '#4b5563',\n                700: '#374151',\n                800: '#1f2937',\n                900: '#111827',\n                950: '#030712',\n                DEFAULT: '#6b7280',\n                foreground: '#ffffff',\n            },\n        },\n    },\n};\n\n// ============================================================================\n// Main useTheme Hook\n// ============================================================================\n\n/**\n * Enhanced theme hook providing comprehensive theme management capabilities\n *\n * @example Basic theme usage\n * ```tsx\n * import { useTheme } from '@frank-auth/react';\n *\n * function ThemeManager() {\n *   const {\n *     mode,\n *     effectiveMode,\n *     toggleMode,\n *     primaryColor,\n *     setLightMode,\n *     setDarkMode,\n *     applyPreset\n *   } = useTheme();\n *\n *   return (\n *     <div>\n *       <p>Current mode: {mode} (effective: {effectiveMode})</p>\n *       <p>Primary color: {primaryColor}</p>\n *\n *       <button onClick={toggleMode}>Toggle Mode</button>\n *       <button onClick={setLightMode}>Light Mode</button>\n *       <button onClick={setDarkMode}>Dark Mode</button>\n *\n *       <select onChange={(e) => applyPreset(e.target.value as any)}>\n *         <option value=\"blue\">Blue</option>\n *         <option value=\"purple\">Purple</option>\n *         <option value=\"green\">Green</option>\n *       </select>\n *     </div>\n *   );\n * }\n * ```\n *\n * @example Organization branding\n * ```tsx\n * function BrandedTheme() {\n *   const { applyOrganizationBranding, isCustomBranded } = useTheme();\n *   const { activeOrganization } = useAuth();\n *\n *   useEffect(() => {\n *     if (activeOrganization) {\n *       applyOrganizationBranding(activeOrganization);\n *     }\n *   }, [activeOrganization, applyOrganizationBranding]);\n *\n *   return (\n *     <div>\n *       {isCustomBranded ? (\n *         <p>Custom organization branding applied</p>\n *       ) : (\n *         <p>Using default theme</p>\n *       )}\n *     </div>\n *   );\n * }\n * ```\n *\n * @example CSS utilities\n * ```tsx\n * function StyledComponent() {\n *   const {\n *     getColorValue,\n *     getFontSize,\n *     getSpacing,\n *     cssVariables\n *   } = useTheme();\n *\n *   const customStyles = {\n *     backgroundColor: getColorValue('primary', '100'),\n *     fontSize: getFontSize('lg'),\n *     padding: getSpacing('md'),\n *   };\n *\n *   return (\n *     <div style={customStyles}>\n *       <p>Themed component with utility functions</p>\n *       <p>CSS Variables available: {Object.keys(cssVariables).length}</p>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useTheme(): UseThemeReturn {\n    const themeProvider = useThemeProvider();\n    const { activeOrganization } = useAuth();\n\n    // Enhanced mode switching\n    const toggleMode = useCallback(() => {\n        if (themeProvider.mode === 'light') {\n            themeProvider.setMode('dark');\n        } else if (themeProvider.mode === 'dark') {\n            themeProvider.setMode('system');\n        } else {\n            themeProvider.setMode('light');\n        }\n    }, [themeProvider]);\n\n    const setLightMode = useCallback(() => themeProvider.setMode('light'), [themeProvider]);\n    const setDarkMode = useCallback(() => themeProvider.setMode('dark'), [themeProvider]);\n    const setSystemMode = useCallback(() => themeProvider.setMode('system'), [themeProvider]);\n\n    // Color utilities\n    const colors = useMemo(() => themeProvider.theme.colors, [themeProvider.theme.colors]);\n    const primaryColor = useMemo(() => colors.primary.DEFAULT, [colors.primary]);\n    const secondaryColor = useMemo(() => colors.secondary.DEFAULT, [colors.secondary]);\n    const backgroundColor = useMemo(() => colors.background, [colors.background]);\n    const foregroundColor = useMemo(() => colors.foreground, [colors.foreground]);\n\n    // Typography utilities\n    const typography = useMemo(() => themeProvider.theme.typography, [themeProvider.theme.typography]);\n    const fontFamily = useMemo(() => typography.fontFamily.sans, [typography.fontFamily.sans]);\n\n    // Layout utilities\n    const spacing = useMemo(() => themeProvider.theme.spacing, [themeProvider.theme.spacing]);\n    const borderRadius = useMemo(() => themeProvider.theme.borderRadius, [themeProvider.theme.borderRadius]);\n    const shadows = useMemo(() => themeProvider.theme.shadows, [themeProvider.theme.shadows]);\n\n    // Utility functions\n    const getColorValue = useCallback((colorName: string, shade?: string): string => {\n        const colorObj = (colors as any)[colorName];\n        if (!colorObj) return '';\n\n        if (shade && typeof colorObj === 'object') {\n            return colorObj[shade] || colorObj.DEFAULT || '';\n        }\n\n        return typeof colorObj === 'string' ? colorObj : colorObj.DEFAULT || '';\n    }, [colors]);\n\n    const getFontSize = useCallback((size: string): string => {\n        const fontSize = (typography.fontSize as any)[size];\n        if (Array.isArray(fontSize)) {\n            return fontSize[0];\n        }\n        return fontSize || '';\n    }, [typography.fontSize]);\n\n    const getSpacing = useCallback((size: string): string => {\n        return (spacing as any)[size] || '';\n    }, [spacing]);\n\n    const getBorderRadius = useCallback((size: string): string => {\n        return (borderRadius as any)[size] || '';\n    }, [borderRadius]);\n\n    const getShadow = useCallback((size: string): string => {\n        return (shadows as any)[size] || '';\n    }, [shadows]);\n\n    // Theme presets\n    const applyPreset = useCallback((preset: ThemePreset) => {\n        const presetTheme = THEME_PRESETS[preset];\n        if (presetTheme) {\n            themeProvider.setTheme(presetTheme);\n        }\n    }, [themeProvider]);\n\n    const availablePresets = useMemo(() => Object.keys(THEME_PRESETS) as ThemePreset[], []);\n\n    // Organization branding\n    const applyOrganizationBranding = useCallback((organization: Organization) => {\n        if (organization.settings?.branding) {\n            const branding: OrganizationBranding = {\n                primaryColor: organization.settings.branding.primaryColor,\n                secondaryColor: organization.settings.branding.secondaryColor,\n                logo: organization.logoUrl,\n                favicon: organization.settings.branding.favicon,\n                customCSS: organization.settings.branding.customCSS,\n            };\n\n            themeProvider.applyBranding(branding);\n        }\n    }, [themeProvider]);\n\n    const isCustomBranded = useMemo(() => {\n        return !!(themeProvider.organizationBranding?.primaryColor ||\n            themeProvider.organizationBranding?.logo ||\n            themeProvider.organizationBranding?.customCSS);\n    }, [themeProvider.organizationBranding]);\n\n    return {\n        // Theme state\n        theme: themeProvider.theme,\n        mode: themeProvider.mode,\n        effectiveMode: themeProvider.effectiveMode,\n        isSystemMode: themeProvider.isSystemMode,\n        isCustomized: themeProvider.isCustomized,\n\n        // CSS variables and styling\n        cssVariables: themeProvider.cssVariables,\n        generateCSS: themeProvider.generateCSS,\n\n        // Theme management\n        setTheme: themeProvider.setTheme,\n        setMode: themeProvider.setMode,\n        resetTheme: themeProvider.resetTheme,\n\n        // Organization branding\n        organizationBranding: themeProvider.organizationBranding,\n        applyBranding: themeProvider.applyBranding,\n        applyOrganizationBranding,\n        isCustomBranded,\n\n        // Color management\n        colors,\n        primaryColor,\n        secondaryColor,\n        backgroundColor,\n        foregroundColor,\n\n        // Typography\n        typography,\n        fontFamily,\n\n        // Spacing and layout\n        spacing,\n        borderRadius,\n        shadows,\n\n        // Utilities\n        getColorValue,\n        getFontSize,\n        getSpacing,\n        getBorderRadius,\n        getShadow,\n\n        // Mode switching\n        toggleMode,\n        setLightMode,\n        setDarkMode,\n        setSystemMode,\n\n        // Theme presets\n        applyPreset,\n        availablePresets,\n    };\n}\n\n// ============================================================================\n// Specialized Theme Hooks\n// ============================================================================\n\n/**\n * Hook for color management and utilities\n */\nexport function useThemeColors() {\n    const {\n        colors,\n        primaryColor,\n        secondaryColor,\n        backgroundColor,\n        foregroundColor,\n        getColorValue,\n        setTheme,\n        theme,\n    } = useTheme();\n\n    const setPrimaryColor = useCallback((color: string) => {\n        setTheme({\n            colors: {\n                ...theme.colors,\n                primary: {\n                    ...theme.colors.primary,\n                    DEFAULT: color,\n                },\n            },\n        });\n    }, [setTheme, theme.colors]);\n\n    const setSecondaryColor = useCallback((color: string) => {\n        setTheme({\n            colors: {\n                ...theme.colors,\n                secondary: {\n                    ...theme.colors.secondary,\n                    DEFAULT: color,\n                },\n            },\n        });\n    }, [setTheme, theme.colors]);\n\n    return {\n        colors,\n        primaryColor,\n        secondaryColor,\n        backgroundColor,\n        foregroundColor,\n        getColorValue,\n        setPrimaryColor,\n        setSecondaryColor,\n\n        // Color palette helpers\n        getPrimaryShade: (shade: string) => getColorValue('primary', shade),\n        getSecondaryShade: (shade: string) => getColorValue('secondary', shade),\n        getSuccessColor: () => getColorValue('success'),\n        getWarningColor: () => getColorValue('warning'),\n        getDangerColor: () => getColorValue('danger'),\n        getInfoColor: () => getColorValue('info'),\n    };\n}\n\n/**\n * Hook for typography management\n */\nexport function useThemeTypography() {\n    const {\n        typography,\n        fontFamily,\n        getFontSize,\n        setTheme,\n        theme,\n    } = useTheme();\n\n    const setFontFamily = useCallback((fonts: string[]) => {\n        setTheme({\n            typography: {\n                ...theme.typography,\n                fontFamily: {\n                    ...theme.typography.fontFamily,\n                    sans: fonts,\n                },\n            },\n        });\n    }, [setTheme, theme.typography]);\n\n    return {\n        typography,\n        fontFamily,\n        getFontSize,\n        setFontFamily,\n\n        // Typography helpers\n        fontSizes: typography.fontSize,\n        fontWeights: typography.fontWeight,\n        lineHeights: typography.lineHeight,\n        letterSpacing: typography.letterSpacing,\n\n        // Quick size getters\n        getSmallSize: () => getFontSize('sm'),\n        getBaseSize: () => getFontSize('base'),\n        getLargeSize: () => getFontSize('lg'),\n        getXLSize: () => getFontSize('xl'),\n    };\n}\n\n/**\n * Hook for spacing and layout utilities\n */\nexport function useThemeLayout() {\n    const {\n        spacing,\n        borderRadius,\n        shadows,\n        getSpacing,\n        getBorderRadius,\n        getShadow,\n    } = useTheme();\n\n    return {\n        spacing,\n        borderRadius,\n        shadows,\n        getSpacing,\n        getBorderRadius,\n        getShadow,\n\n        // Spacing helpers\n        getSmallSpacing: () => getSpacing('sm'),\n        getMediumSpacing: () => getSpacing('md'),\n        getLargeSpacing: () => getSpacing('lg'),\n\n        // Border radius helpers\n        getSmallRadius: () => getBorderRadius('sm'),\n        getMediumRadius: () => getBorderRadius('md'),\n        getLargeRadius: () => getBorderRadius('lg'),\n        getFullRadius: () => getBorderRadius('full'),\n\n        // Shadow helpers\n        getSmallShadow: () => getShadow('sm'),\n        getMediumShadow: () => getShadow('md'),\n        getLargeShadow: () => getShadow('lg'),\n    };\n}\n\n/**\n * Hook for CSS-in-JS styling with theme values\n */\nexport function useThemeStyles() {\n    const {\n        cssVariables,\n        generateCSS,\n        getColorValue,\n        getFontSize,\n        getSpacing,\n        getBorderRadius,\n        getShadow,\n    } = useTheme();\n\n    const createStyles = useCallback((stylesFn: (theme: any) => any) => {\n        return stylesFn({\n            colors: { get: getColorValue },\n            fontSize: { get: getFontSize },\n            spacing: { get: getSpacing },\n            borderRadius: { get: getBorderRadius },\n            shadows: { get: getShadow },\n        });\n    }, [getColorValue, getFontSize, getSpacing, getBorderRadius, getShadow]);\n\n    const getThemeValue = useCallback((path: string) => {\n        return cssVariables[`--${path.replace('.', '-')}`] || '';\n    }, [cssVariables]);\n\n    return {\n        cssVariables,\n        generateCSS,\n        createStyles,\n        getThemeValue,\n\n        // Pre-built common styles\n        cardStyles: {\n            backgroundColor: getColorValue('card'),\n            color: getColorValue('cardForeground'),\n            borderRadius: getBorderRadius('lg'),\n            boxShadow: getShadow('md'),\n            padding: getSpacing('lg'),\n        },\n        buttonStyles: {\n            backgroundColor: getColorValue('primary'),\n            color: getColorValue('primaryForeground'),\n            borderRadius: getBorderRadius('md'),\n            padding: `${getSpacing('sm')} ${getSpacing('md')}`,\n            fontSize: getFontSize('base'),\n            fontWeight: '500',\n            border: 'none',\n            cursor: 'pointer',\n        },\n        inputStyles: {\n            backgroundColor: getColorValue('input'),\n            color: getColorValue('foreground'),\n            border: `1px solid ${getColorValue('border')}`,\n            borderRadius: getBorderRadius('md'),\n            padding: getSpacing('sm'),\n            fontSize: getFontSize('base'),\n        },\n    };\n}"],"names":["THEME_PRESETS","useTheme","themeProvider","useThemeProvider","activeOrganization","useAuth","toggleMode","useCallback","setLightMode","setDarkMode","setSystemMode","colors","useMemo","primaryColor","secondaryColor","backgroundColor","foregroundColor","typography","fontFamily","spacing","borderRadius","shadows","getColorValue","colorName","shade","colorObj","getFontSize","size","fontSize","getSpacing","getBorderRadius","getShadow","applyPreset","preset","presetTheme","availablePresets","applyOrganizationBranding","organization","branding","isCustomBranded","useThemeColors","setTheme","theme","setPrimaryColor","color","setSecondaryColor","useThemeTypography","setFontFamily","fonts","useThemeLayout","useThemeStyles","cssVariables","generateCSS","createStyles","stylesFn","getThemeValue","path"],"mappings":"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"}