ui-auth/dist/useAuthPanel.js

/**
 * useAuthPanel Hook
 *
 * Convenience hook for managing rich auth panel state.
 * Supports all three panel types: Split, Slide, and Fullscreen.
 * Handles open/close, mode switching, theming, and info panel content.
 */
import { useState, useCallback, useMemo } from 'react';
import { getAuthTheme } from './themes';
export function useAuthPanel(options = {}) {
    const { ssoUrl, authHandler, initialMode = 'login', defaultRole: initialDefaultRole, showRoleSelector = true, panelType: initialPanelType = 'split', theme: initialTheme = 'default', customTheme, slideDirection: initialSlideDirection = 'right', slideWidth = 420, backgroundImage, infoPanelContent: initialInfoContent, allowModeSwitch = true, showCloseButton = true, glassEffect = true, overlayBlur = true, onSuccess, onError, } = options;
    // State
    const [isOpen, setIsOpen] = useState(false);
    const [mode, setModeState] = useState(initialMode);
    const [defaultRole, setDefaultRole] = useState(initialDefaultRole);
    const [panelType, setPanelTypeState] = useState(initialPanelType);
    const [themeVariant, setThemeVariant] = useState(initialTheme);
    const [slideDirection] = useState(initialSlideDirection);
    const [infoPanelContent, setInfoPanelContent] = useState(initialInfoContent);
    // Resolved theme
    const theme = useMemo(() => {
        return customTheme || getAuthTheme(themeVariant);
    }, [customTheme, themeVariant]);
    // Actions
    const openLogin = useCallback(() => {
        setModeState('login');
        setIsOpen(true);
    }, []);
    const openRegister = useCallback((role) => {
        setModeState('register');
        if (role) {
            setDefaultRole(role);
        }
        setIsOpen(true);
    }, []);
    const open = useCallback((config) => {
        if (config?.mode)
            setModeState(config.mode);
        if (config?.role)
            setDefaultRole(config.role);
        if (config?.panelType)
            setPanelTypeState(config.panelType);
        if (config?.theme)
            setThemeVariant(config.theme);
        setIsOpen(true);
    }, []);
    const close = useCallback(() => {
        setIsOpen(false);
    }, []);
    const toggle = useCallback(() => {
        setIsOpen(prev => !prev);
    }, []);
    const setMode = useCallback((newMode) => {
        setModeState(newMode);
    }, []);
    const setPanelType = useCallback((type) => {
        setPanelTypeState(type);
    }, []);
    const setTheme = useCallback((newTheme) => {
        setThemeVariant(newTheme);
    }, []);
    const setInfoContent = useCallback((content) => {
        setInfoPanelContent(content);
    }, []);
    const handleSuccess = useCallback((user) => {
        setIsOpen(false);
        onSuccess?.(user);
    }, [onSuccess]);
    const handleError = useCallback((error) => {
        onError?.(error);
    }, [onError]);
    // Props generators
    const getSplitPanelProps = useCallback(() => ({
        mode,
        theme: themeVariant,
        customTheme,
        infoPanel: infoPanelContent,
        authHandler,
        ssoUrl,
        defaultRole,
        showRoleSelector,
        onSuccess: handleSuccess,
        onClose: close,
        onError: handleError,
        showCloseButton,
        allowModeSwitch,
    }), [
        mode,
        themeVariant,
        customTheme,
        infoPanelContent,
        authHandler,
        ssoUrl,
        defaultRole,
        showRoleSelector,
        handleSuccess,
        close,
        handleError,
        showCloseButton,
        allowModeSwitch,
    ]);
    const getSlidePanelProps = useCallback(() => ({
        isOpen,
        mode,
        direction: slideDirection,
        theme: themeVariant,
        customTheme,
        authHandler,
        ssoUrl,
        defaultRole,
        showRoleSelector,
        overlayBlur,
        width: slideWidth,
        onSuccess: handleSuccess,
        onClose: close,
        onError: handleError,
        allowModeSwitch,
    }), [
        isOpen,
        mode,
        slideDirection,
        themeVariant,
        customTheme,
        authHandler,
        ssoUrl,
        defaultRole,
        showRoleSelector,
        overlayBlur,
        slideWidth,
        handleSuccess,
        close,
        handleError,
        allowModeSwitch,
    ]);
    const getFullscreenPanelProps = useCallback(() => ({
        isOpen,
        mode,
        theme: themeVariant,
        customTheme,
        backgroundImage,
        authHandler,
        ssoUrl,
        defaultRole,
        showRoleSelector,
        glassEffect,
        backgroundBlur: overlayBlur,
        onSuccess: handleSuccess,
        onClose: close,
        onError: handleError,
        allowModeSwitch,
        showCloseButton,
    }), [
        isOpen,
        mode,
        themeVariant,
        customTheme,
        backgroundImage,
        authHandler,
        ssoUrl,
        defaultRole,
        showRoleSelector,
        glassEffect,
        overlayBlur,
        handleSuccess,
        close,
        handleError,
        allowModeSwitch,
        showCloseButton,
    ]);
    return {
        // State
        isOpen,
        mode,
        panelType,
        themeVariant,
        theme,
        // Config pass-through
        ssoUrl,
        authHandler,
        defaultRole,
        showRoleSelector,
        slideDirection,
        slideWidth,
        backgroundImage,
        infoPanelContent,
        allowModeSwitch,
        showCloseButton,
        glassEffect,
        overlayBlur,
        // Actions
        openLogin,
        openRegister,
        open,
        close,
        toggle,
        setMode,
        setPanelType,
        setTheme,
        setInfoContent,
        handleSuccess,
        handleError,
        // Props generators
        getSplitPanelProps,
        getSlidePanelProps,
        getFullscreenPanelProps,
    };
}
//# sourceMappingURL=useAuthPanel.js.map