import * as react_jsx_runtime from 'react/jsx-runtime';
import * as react from 'react';
import { InputHTMLAttributes, HTMLAttributes, ReactElement, ReactNode } from 'react';
import { DataOrFn } from '@toktokhan-dev/universal';
import { Cookies } from 'react-cookie';

interface UploadTriggerProps extends InputHTMLAttributes<HTMLInputElement> {
    /**
     * 자식 Element 입니다. number 나 string 이 아닌 jsx element 나 component 를 넣어주세요
     */
    children: React.ReactElement;
    /**
     * @default 'onClick'
     * 자식 Element 의 props name 중 트리거 할 이벤트를 지정합니다. 기본값은 'onClick' 입니다.
     */
    by?: string;
}
/**
 * 웹에서 파일 업로드를 트리거 하는 컴포넌트 입니다.
 *
 * 자식 element 에 by 로 지정한 이벤트를 트리거 하면 display none 처리 되어있는 input[type="file"] 클릭되어 파일 선택 창이 열립니다.
 * UploadTrigger 의 props 는 숨겨져 있는 input 의 prop 으로 전달되기때문에,
 * UploadTrigger 의 onChange prop 으로 선택된 파일에 접근이 가능합니다.
 *
 * @category Component
 *
 * @example
 *
 * ```tsx
 * <UploadTrigger by="onClick" onChange={(e) => console.log(e.target.files?.[0]) }>
 *   <button>Upload</button>
 * </UploadTrigger>
 * ```
 *
 */
declare const UploadTrigger: ({ children, by, ...props }: UploadTriggerProps) => react_jsx_runtime.JSX.Element;

/**
 * @category Storage
 *
 * 데이터를 동기화하는 ReactSynced 클래스입니다. 데이터가 업데이트될 때 리스너 함수를 호출합니다.
 */
declare class ReactSynced<T> {
    /**
     * 동기화된 데이터입니다.
     */
    private _data;
    /**
     * 리스너 함수입니다.
     */
    listener: (() => void) | null;
    /**
     * 동기화된 데이터를 가져옵니다.
     * @returns T 타입의 동기화된 데이터 또는 데이터가 설정되지 않은 경우 null을 반환합니다.
     */
    get data(): T | null;
    /**
     * 동기화된 데이터를 설정하고 리스너를 트리거합니다.
     * @param data - 동기화할 데이터입니다.
     */
    set data(data: T | null);
    /**
     * 데이터가 업데이트될 때 호출될 리스너 함수를 연결합니다.
     * @param listener - 호출될 리스너 함수입니다.
     */
    connect: (listener: () => void) => void;
    /**
     * 리스너 함수를 연결 해제합니다.
     */
    unConnect: () => void;
}

/**
 *
 * @category Storage
 *
 * 알림함수를 관리하고,{@link @toktokhan-dev/react-web#SyncedStorage | `SyncedStorage`} 와 {@link @toktokhan-dev/react-web#useSyncWebStorage | `useSyncWebStorage`} 를 연결 하는 모듈입니다.
 *
 * @remarks {@link @toktokhan-dev/react-web#useSyncWebStorage | `useSyncWebStorage`}로 부터 리랜더링을 촉발시키는 알림함수 를 받아 관리하고,
 * {@link @toktokhan-dev/react-web#SyncedStorage | `SyncedStorage`} 모듈에 알림 함수를 넘겨주어  {@link @toktokhan-dev/react-web#useSyncWebStorage | `useSyncWebStorage`}와 연결시켜주는 역할을 합니다.
 *
 * @example
 * ```ts
 * const textStorage = new SyncedStorage<string>("text", localStorage)
 * const textStorageConnector = new ReactSyncConnector(textStorage)
 *
 * // Some Action
 * textStorage.set("Hello, World!")
 *
 * // Some component
 * const text = useSyncWebStorage(textStorageConnector) // Wrapping Hook with useSyncWebStorage
 * console.log(text) // "Hello, World!"
 * ```
 */
declare class ReactSyncConnector<Data> {
    /**
     * 알림함수를 저장하는 배열입니다.
     */
    listeners: Array<() => void>;
    /**
     * ReactSynced 인터페이스를 구현한 객체 또는 null입니다. Storage 모듈에 해당합니다.
     */
    private synced;
    /**
     * 서버 초깃값에 해당합니다.
     */
    private serverSynced?;
    /**
     * ReactSyncConnector 인스턴스를 생성합니다.
     * Storage 모듈에 emitChange 함수를 연결합니다.
     *
     * @param synced - ReactSynced 인터페이스를 구현한 객체입니다.
     * @param serverSynced - 사용자가 제공하는 서버 초기값입니다.
     */
    constructor(synced: ReactSynced<Data> | null, serverSynced?: Data);
    /**
     * {@link https://react.dev/reference/react/useSyncExternalStore | `useSyncExternalStore`}에서 알림함수를 받고, 저장해둡니다.
     *
     * @param listener - 변경 사항을 처리할 콜백 함수입니다.
     * @returns 정리 함수를 반환합니다.
     */
    subscribe: (listener: () => void) => () => void;
    /**
     * 알림함수가 실행되어, 리랜더링 될 시 조회할 데이터를 넘겨줍니다.
     *
     * @returns 동기화된 데이터 또는 null을 반환합니다.
     */
    getSnapshot: () => NonNullable<Data> | null;
    /**
     * 서버 데이터의 스냅샷을 반환합니다.
     *
     * @returns 서버 초깃값 또는 null을 반환합니다.
     */
    getServerSnapShot: () => NonNullable<Data> | null;
    /**
     * 알림함수를 실행시켜 구독 모듈에 알림이 전달해 리랜더링을 촉발시킵니다.
     */
    private emitChange;
}

/**
 * @category Storage
 *
 * useSyncExternalStore 의 wrapper 입니다.
 * {@link @toktokhan-dev/react-web#ReactSyncConnector | `ReactSyncConnector`}를 통해 외부 스토리지와 동기화를 합니다.
 *
 * @example
 * ```ts
 * const textStorage = new SyncedStorage<string>("text", localStorage)
 * const textConnector = new ReactSyncConnector(textStorage)
 *
 * textStorage.set("Hello, World!")
 * textStorage.set((prev) => prev + "!")
 *
 * textStorage.get() // "Hello, World!!"
 *
 * const text = useSyncWebStorage(textConnector)
 *
 * console.log(text) // "Hello, World!!"
 * ```
 */
declare const useSyncWebStorage: <T>(connector: ReactSyncConnector<T>) => NonNullable<T> | null;

type CookieOptions = Parameters<Cookies['set']>[2];
/**
 * @category Storage
 *
 * 데이터를 쿠키에 동기화하는 SyncedCookie 클래스입니다. 데이터가 업데이트될 때 리스너 함수를 호출합니다.
 * {@link @toktokhan-dev/react-web#ReactSyncConnector | `ReactSyncConnector`}와 연결하여 사용합니다.
 *
 * @example
 * ```ts
 * const cookieStorage = new SyncedCookie<string>("cookie-key", { path: '/' })
 * const cookieConnector = new ReactSyncConnector(cookieStorage)
 *
 * cookieStorage.set("Hello, Cookie!")
 * cookieStorage.set((prev) => prev + "!")
 *
 * cookieStorage.get() // "Hello, Cookie!!"
 * cookieStorage.remove()
 *
 * cookieStorage.get() // null
 * ```
 *
 */
declare class SyncedCookie<Data> extends ReactSynced<Data> {
    key: string;
    storage: any;
    defaultOptions: CookieOptions;
    /**
     * SyncedCookie 인스턴스를 생성합니다.
     * 데이터를 저장할 키와 쿠키 옵션을 받습니다.
     *
     * @param key - 데이터를 저장할 키입니다.
     * @param options - 쿠키 옵션입니다. (default: { secure: true, sameSite: 'strict', path: '/' })
     */
    constructor(key: string, options?: CookieOptions);
    /**
     * 쿠키에서 데이터를 가져옵니다.
     * 저장된 json 데이터를 parse 한 후 가져옵니다.
     */
    get: () => Data | null;
    /**
     * 쿠키에 데이터를 저장합니다.
     * 저장할 데이터 혹은 함수를 받아서 데이터를 저장합니다.
     *
     * @param data - 저장할 데이터 혹은 데이터를 반환하는 함수입니다.
     * @param options - 쿠키 옵션입니다.
     */
    set: (data: DataOrFn<Data | null>, options?: CookieOptions) => void;
    /**
     * 쿠키에 저장된 데이터를 삭제합니다.
     *
     * @param options - 쿠키 옵션입니다.
     */
    remove: (options?: CookieOptions) => void;
}

/**
 * @category Storage
 *
 * 데이터를 동기화하는 SyncedStorage 클래스입니다. 데이터가 업데이트될 때 리스너 함수를 호출합니다.
 * {@link @toktokhan-dev/react-web#ReactSyncConnector | `ReactSyncConnector`} 와 연결하여 사용합니다.
 *
 * @example
 * ```ts
 * const textStorage = new SyncedStorage<string>("text", localStorage)
 * const textConnector = new ReactSyncConnector(textStorage)
 *
 * textStorage.set("Hello, World!")
 * textStorage.set((prev) => prev + "!")
 *
 * textStorage.get() // "Hello, World!!"
 * textStorage.remove()
 *
 * textStorage.get() // null
 * ```
 *
 */
declare class SyncedStorage<Data> extends ReactSynced<Data> {
    key: string;
    private storage;
    /**
     * SyncedStorage 인스턴스를 생성합니다.
     * 데이터를 저장할 키와 Storage 객체를 받습니다.
     *
     * 생성될때, storage 이벤트가 등록되며 다른 브라우저에서의 change event를 감지하여, 최신값을 가져옵니다.
     *
     * @param key - 데이터를 저장할 키입니다.
     * @param storage - 데이터를 저장할 Storage 객체입니다.
     */
    constructor(key: string, storage: Storage);
    /**
     * Storage에 저장된 json 데이터를 parse 한 후 가져옵니다.
     */
    get: () => Data | null;
    /**
     * Storage에 데이터를 저장합니다.
     * 저장할 데이터 혹은 함수를 받아서 데이터를 저장합니다.
     */
    set: (data: DataOrFn<Data | null>) => void;
    /**
     * Storage에 저장된 데이터를 삭제합니다.
     */
    remove: () => void;
}

/**
 * @category Storage
 *
 * 동기화된 스토리지를 생성하는 팩토리 역할을 합니다.
 * 해당 클래스의 각 method 는 {@link @toktokhan-dev/react-web#ReactSyncConnector | `ReactSyncConnector`}와 {@link @toktokhan-dev/react-web#SyncedStorage | `SyncedStorage`}를
 * 동시에 생성해줍니다.
 *
 * @example
 * ```ts
 * type TokenType = {
 *  access: string
 *  refresh: string
 * }
 * const { storage, connector } = SyncedStorageFactory.createLocal<TokenType>('token')
 *
 * storage.set({ access: 'access', refresh: 'refresh' })
 *
 * const token = useWebStorage(connector)
 * ```
 */
declare class SyncedStorageFactory {
    /**
     * 로컬 스토리지를 생성합니다.
     * @param key 스토리지 키
     * @returns 생성된 스토리지와 커넥터 객체
     */
    static createLocal: <Data>(key: string) => {
        storage: SyncedStorage<Data> | null;
        connector: ReactSyncConnector<Data>;
    };
    /**
     * 세션 스토리지를 생성합니다.
     * @param key 스토리지 키
     * @returns 생성된 스토리지와 커넥터 객체
     */
    static createSession: <Data>(key: string) => {
        storage: SyncedStorage<Data> | null;
        connector: ReactSyncConnector<Data>;
    };
    /**
     * 쿠키를 생성합니다.
     * @param key 쿠키 키
     * @param store 쿠키 객체
     * @returns 생성된 쿠키와 커넥터 객체
     */
    static createCookie: <Data>(key: string, options?: CookieOptions) => {
        storage: SyncedCookie<Data>;
        connector: ReactSyncConnector<Data>;
    };
    /**
     * 스토리지를 생성합니다.
     * @param key 스토리지 키
     * @param store 스토리지 객체
     * @returns 생성된 스토리지와 커넥터 객체
     */
    static create: <Data>(key: string, store: Storage | null) => {
        storage: SyncedStorage<Data> | null;
        connector: ReactSyncConnector<Data>;
    };
}

type UseIntersectionObserverParams = {
    onVisible?: (entry?: IntersectionObserverEntry, observer?: IntersectionObserver) => void;
    onHidden?: (entry?: IntersectionObserverEntry, observer?: IntersectionObserver) => void;
    options?: IntersectionObserverInit;
};
/**
 * 반환한 targetRef를 사용하여 대상 컴포넌트에 intersectionObserver 이벤틀르 주기 위한 hooks입니다.
 *
 * hooks 선언시 props 설정이 가능하며, 화면에 표출되는 조건에 따라 onVisible, onHidden 함수가 실행됩니다.
 *
 * @category Hooks
 *
 * @typeParam T - 배열 요소의 타입
 * @typeParam K - Map의 키 타입
 *
 * @param onVisible - targetRef 요소가 보여질 때 실행할 함수
 * @param onHidden - targetRef 요소가 보이지 않을 때 실행할 함수
 * @param options - targetRef에 설정할 intersection observer 옵션
 *
 * @returns intersection Observer 이벤트가 할당된 Element useRef
 *
 * @example
 *
 * ```tsx
 *
 * const { targetRef } = useIntersectionObserver(
 *   {
 *     onVisible: () => onVisibleLast(),
 *     onHidden: () => onHiddenLast(),
 *     options: {
 *       threshold: 0.1,
 *     },
 *   },
 *   [],
 * );
 * ...
 *
 * return (
 *  <LastItem ref={targetRef} w="100%" />
 * )
 *
 * ```
 *
 */
declare const useIntersectionObserver: ({ onVisible, onHidden, options, }: UseIntersectionObserverParams, deps: unknown[]) => {
    targetRef: react.RefObject<HTMLElement>;
};

/**
 * SocialType은 지원하는 소셜 로그인 타입을 나타냅니다.
 */
type SocialType = 'kakao' | 'naver' | 'facebook' | 'google' | 'apple';
/**
 * SocialAuthQueryResponse는 소셜 로그인 인증 응답을 정의합니다.
 */
interface SocialAuthQueryResponse {
    access_token: string | null;
    code: string | null;
    state: string | null;
    error: string | null;
    errorDescription: string | null;
}
interface CommonOauthParams {
    response_type: string;
    client_id: string;
    scope?: string;
    state?: string;
}
/**
 * OauthUserReqParams는 OAuth 인증 요청에 필요한 파라미터를 정의합니다.
 * OauthUserReqParams는 CommonOauthParams를 확장하고, 필요한 추가 속성을 정의합니다.
 * 소셜로그인에 필요한 `response_type` , `client_id`, `scope`, `state` 를 클래스 내부에서 직접 주입해주고 있기 때문에
 * 필수 타입에서 제거하거나 변환하고 `return_url`와 같이 요청시 필요한 타입을 추가하였습니다.
 */
type OauthUserReqParams<T extends CommonOauthParams, State> = Omit<T, keyof CommonOauthParams> & {
    state?: State;
    scope?: string | string[];
};
/**
 * {@link https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api | `Kakao Login Docs`}
 */
interface KakaoAuthQueryParams {
    client_id: string;
    redirect_uri: string;
    response_type: string;
    scope?: string;
    prompt?: 'none' | 'login' | 'create' | 'select_account';
    login_hint?: string;
    service_terms?: string;
    state?: string;
    nonce?: string;
}
/**
 * KaKaoAuthQueryResponse는 카카오 로그인 인증 응답을 정의합니다.
 */
interface KaKaoAuthQueryResponse {
    code?: string;
    error?: string;
    error_description?: string;
    state?: string;
}
/**
 * {@link https://developer.apple.com/documentation/sign_in_with_apple/request_an_authorization_to_the_sign_in_with_apple_server | `Apple Login Docs`}
 */
interface AppleAuthQueryParams {
    client_id: string;
    redirect_uri: string;
    response_type: string;
    nonce?: string;
    response_mode?: string;
    scope?: string;
    state?: string;
}
/**
 * {@link https://developers.facebook.com/docs/facebook-login/guides/advanced/manual-flow/ | `Facebook Login Docs`}
 */
interface FacebookAuthQueryParams {
    client_id: string;
    redirect_uri: string;
    response_type: string;
    state?: string;
    scope?: string;
}
/**
 * {@link https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow?hl=ko | `Google Login Docs`}
 */
interface GoogleAuthQueryParams {
    client_id: string;
    redirect_uri: string;
    response_type: string;
    scope: string;
    state?: string;
    include_granted_scopes?: boolean;
    enable_granular_consent?: boolean;
    login_hint?: string;
    prompt?: 'none' | 'consent' | 'select_account';
}
/**
 * {@link https://developers.naver.com/docs/login/api/api.md#2--api-%EA%B8%B0%EB%B3%B8-%EC%A0%95%EB%B3%B4 | `Naver Login Docs`}
 */
interface NaverAuthQueryParams {
    client_id: string;
    redirect_uri: string;
    response_type: string;
    state: string;
    scope?: string;
}
/**
 * NaverAuthQueryResponse는 네이버 로그인 인증 응답을 정의합니다.
 */
interface NaverAuthQueryResponse {
    code?: string;
    error?: string;
    error_description?: string;
    state?: string;
}

/**
 * `IconButtonProps`는 `IconButton` 컴포넌트가 받는 속성들을 정의합니다.
 * HTMLAnchorElement의 속성을 상속하며, 추가적으로 아래의 속성들을 가집니다.
 */
interface IconButtonProps {
    /**
     * anchor 태그의 스타일을 설정합니다.
     */
    style?: HTMLAttributes<HTMLAnchorElement>['style'];
    /**
     * onClick 속성을 설정합니다.
     */
    onClick?: HTMLAttributes<HTMLAnchorElement>['onClick'];
    /**
     * 아이콘 버튼의 모양을 결정합니다. 'full', 'rounded', 'square' 중 하나를 선택할 수 있습니다.
     * @default 'full'
     */
    variant?: 'full' | 'rounded' | 'square';
    /**
     * 아이콘 버튼의 색상 모드를 설정합니다. 'light' 또는 'dark' 중 하나를 선택할 수 있습니다.
     * @default 'dark'
     */
    colorMode?: 'light' | 'dark';
    /**
     * 소셜 타입을 지정합니다. 이를 통해 버튼의 스타일과 레이블이 결정됩니다.
     */
    socialType: SocialType;
    /**
     * 버튼의 언어를 설정합니다. 'en' 또는 'ko' 중 하나를 선택할 수 있습니다.
     * @default 'ko'
     */
    lang?: 'en' | 'ko';
    /**
     * 버튼에 표시될 레이블을 설정합니다. null 값을 통해 레이블을 숨길 수 있습니다.
     */
    label?: string | null;
    /**
     * 버튼에 표시될 아이콘을 설정합니다. ReactElement 타입이어야 합니다.
     */
    icon: ReactElement;
    /**
     * 아이콘의 스타일을 설정합니다.
     */
    iconStyle?: HTMLAttributes<HTMLOrSVGElement>['style'];
    /**
     * 레이블의 스타일을 설정합니다.
     */
    labelStyle?: HTMLAttributes<HTMLLabelElement>['style'];
}

/**
 * IconButtonProps에서 'socialType'과 'icon'을 제외한 속성들을 상속받습니다.
 */
interface GoogleIconButtonProps extends Omit<IconButtonProps, 'socialType' | 'icon'> {
}
/**
 * @category Socials/Google
 *
 * 구글 아이콘 버튼 UI 컴포넌트입니다.
 * {@link @toktokhan-dev/react-web#IconButton | `IconButton`} 컴포넌트를 기반으로 하며, 구글 아이콘 및 버튼 스타일링이 가능합니다.
 *
 *  @param props - IconButtonProps에서 'socialType'과 'icon'을 제외한 속성들을 상속받습니다.
 * @returns 구글 아이콘 버튼 컴포넌트를 반환합니다.
 */
declare const GoogleIconButton: ({ style, iconStyle, ...props }: GoogleIconButtonProps) => react_jsx_runtime.JSX.Element;

/**
 * `FullButtonProps`는 `FullButton` 컴포넌트가 받는 속성들을 정의합니다.
 * HTMLAnchorElement의 속성을 상속하며, 추가적으로 아래의 속성들을 가집니다.
 */
interface FullButtonProps {
    /**
     * anchor 태그의 스타일을 설정합니다.
     */
    style?: HTMLAttributes<HTMLAnchorElement>['style'];
    /**
     * onClick 속성을 설정합니다.
     */
    onClick?: HTMLAttributes<HTMLAnchorElement>['onClick'];
    /**
     * 버튼의 색상 모드를 설정합니다. 'light' 또는 'dark' 중 하나를 선택할 수 있습니다.
     * @default 'dark'
     */
    colorMode?: 'light' | 'dark';
    /**
     * 소셜 타입을 지정합니다. 이를 통해 버튼의 스타일과 레이블이 결정됩니다.
     */
    socialType: SocialType;
    /**
     * 버튼의 모양을 결정합니다. 'rounded', 'square' 중 하나를 선택할 수 있습니다.
     * @default 'square'
     */
    variant?: 'rounded' | 'square';
    /**
     * 버튼 내 콘텐츠의 정렬을 지정합니다. 'left' 또는 'center' 중 하나를 선택할 수 있습니다.
     * @default 'center'
     */
    align?: 'left' | 'center';
    /**
     * 버튼의 언어를 설정합니다. 'en' 또는 'ko' 중 하나를 선택할 수 있습니다.
     * @default 'ko'
     */
    lang?: 'en' | 'ko';
    /**
     * 버튼에 표시될 레이블을 설정합니다. null 값을 통해 레이블을 숨길 수 있습니다.
     */
    label?: string | null;
    /**
     * 버튼에 표시될 아이콘을 설정합니다. ReactElement 타입이어야 합니다.
     */
    icon: ReactElement;
    /**
     * 아이콘의 스타일을 설정합니다.
     */
    iconStyle?: HTMLAttributes<HTMLOrSVGElement>['style'];
    /**
     * 레이블의 스타일을 설정합니다.
     */
    labelStyle?: HTMLAttributes<HTMLLabelElement>['style'];
}

/**
 * FullButtonProps에서 'socialType'과 'icon'을 제외한 속성들을 상속받습니다.
 */
interface GoogleButtonProps extends Omit<FullButtonProps, 'socialType' | 'icon'> {
}
/**
 * @category Socials/Google
 *
 * 구글 버튼 UI 컴포넌트입니다.
 * {@link @toktokhan-dev/react-web#FullButton | `FullButton`} 컴포넌트를 기반으로 하여, 구글 아이콘과 스타일, 레이블을 포함합니다.
 *
 * @param props -FullButtonProps에서 'socialType'과 'icon'을 제외한 속성들을 상속받습니다.
 * @returns 구글 버튼 컴포넌트를 반환합니다.
 */
declare const GoogleButton: ({ style, ...props }: GoogleButtonProps) => react_jsx_runtime.JSX.Element;

/**
 * OauthStateReturnType은 OAuth 상태 반환 타입을 정의합니다.
 * type: 소셜 로그인 타입을 나타냅니다.
 * returnUrl: 로그인 후 리다이렉트 될 URL을 나타냅니다.
 */
interface OauthStateReturnType {
    type: string | null;
    returnUrl: string | null;
}
/**
 * SocialOauthInit 클래스는 소셜 로그인 초기화를 담당합니다.
 */
declare class SocialOauthInit {
    clientID: string;
    oAuthBaseUrl: string;
    /**
     * 생성자 함수에서는 클라이언트 ID를 받아 초기화합니다.
     * @param clientID - 소셜 로그인을 위한 클라이언트 ID
     */
    constructor(clientID: string);
    /**
     * createOauthUrl 메서드는 OAuth 인증 URL을 생성합니다.
     * @param params - OAuth 인증 요청에 필요한 파라미터
     * @returns 생성된 OAuth 인증 URL
     */
    createOauthUrl(params: Record<string, any>): string;
    /**
     * encodeOAuthState 메서드는 OAuth 상태를 인코딩합니다.
     * @param type - 소셜 로그인 타입
     * @param returnUrl - 로그인 후 리다이렉트 될 URL
     * @returns 인코딩된 OAuth 상태
     */
    static encodeOAuthState: <T>(state: T) => string;
    /**
     * decodeOAuthState 메서드는 인코딩된 OAuth 상태를 디코딩합니다.
     * @param state - 인코딩된 OAuth 상태
     * @returns 디코딩된 OAuth 상태. 디코딩에 실패하면 null을 반환합니다.
     */
    static decodeOAuthState: <T>(state: string) => T | null;
}

declare const GOOGLE_AUTH_SCOPE: {
    readonly email: "https://www.googleapis.com/auth/userinfo.email";
    readonly profile: "https://www.googleapis.com/auth/userinfo.profile";
};
/**
 * @category Socials/Google
 *
 * Google OAuth 인증을 처리하는 클래스입니다.
 * SocialOauthInit 클래스를 상속받아 구현되었습니다.
 */
declare class Google extends SocialOauthInit {
    oAuthBaseUrl: string;
    /**
     * Google 클래스의 생성자입니다.
     * @param clientID - Google OAuth 클라이언트 ID
     */
    constructor(clientID?: string);
    /**
     * OAuth 인증 URL을 생성합니다.
     * @param params - OAuth 인증 요청에 필요한 파라미터
     * @param params.state - 트랜잭션 동안 유지할 상태
     * @param params.scope - 요청할 OAuth 스코프
     * @returns 생성된 OAuth 인증 URL
     */
    createOauthUrl: <State>({ state, scope, ...params }: OauthUserReqParams<GoogleAuthQueryParams, State>) => string;
    /**
     * OAuth 인증 링크로 리다이렉트합니다.
     * @param params - OAuth 인증 요청에 필요한 파라미터
     * @param params.state - 트랜잭션 동안 유지할 상태
     * @param params.scope - 요청할 OAuth 스코프
     */
    loginToLink: <State>(params: OauthUserReqParams<GoogleAuthQueryParams, State>) => void;
    /**
     * OAuth 인증 팝업을 엽니다.
     * @param params - OAuth 인증 요청에 필요한 파라미터
     * @param params.state - 트랜잭션 동안 유지할 상태
     * @param params.scope - 요청할 OAuth 스코프 (이메일, 프로필 등)
     */
    loginToPopup: <State>(params: OauthUserReqParams<GoogleAuthQueryParams, State>) => void;
}

/**
 * FullButtonProps에서 'socialType'과 'icon'을 제외한 속성들을 상속받습니다.
 */
interface KakaoButtonProps extends Omit<FullButtonProps, 'socialType' | 'icon'> {
}
/**
 * @category Socials/Kakao
 *
 * 카카오 버튼 UI 컴포넌트입니다.
 * {@link @toktokhan-dev/react-web#FullButton | `FullButton`} 컴포넌트를 기반으로 하여, 카카오 아이콘과 스타일, 레이블을 포함합니다.
 *
 * @param props -FullButtonProps에서 'socialType'과 'icon'을 제외한 속성들을 상속받습니다.
 * @returns 카카오 버튼 컴포넌트를 반환합니다.
 */
declare const KakaoButton: (props: KakaoButtonProps) => ReactNode;

/**
 * @category Socials/Kakao
 *
 * Kakao OAuth 인증을 처리하는 클래스입니다.
 * SocialOauthInit 클래스를 상속받아 구현되었습니다.
 */
declare class Kakao extends SocialOauthInit {
    oAuthBaseUrl: string;
    /**
     * Kakao 클래스의 생성자입니다.
     * @param clientID - Kakao OAuth 클라이언트 ID
     */
    constructor(clientID?: string);
    /**
     * OAuth 인증 URL을 생성합니다.
     * @param params - OAuth 인증 요청에 필요한 파라미터
     * @param params.state - 트랜잭션 동안 유지할 상태
     * @returns 생성된 OAuth 인증 URL
     */
    createOauthUrl: <State>({ state, scope, ...params }: OauthUserReqParams<KakaoAuthQueryParams, State>) => string;
    /**
     * OAuth 인증 링크로 리다이렉트합니다.
     * @param params - OAuth 인증 요청에 필요한 파라미터
     * @param params.state - 트랜잭션 동안 유지할 상태
     */
    loginToLink: <State>(params: OauthUserReqParams<KakaoAuthQueryParams, State>) => void;
    /**
     * OAuth 인증 팝업을 엽니다.
     * @param params - OAuth 인증 요청에 필요한 파라미터
     * @param params.state - 트랜잭션 동안 유지할 상태
     */
    loginToPopup: <State>(params: OauthUserReqParams<KakaoAuthQueryParams, State>) => void;
}

/**
 * IconButtonProps에서 'socialType'과 'icon'을 제외한 속성들을 상속받습니다.
 */
interface KakaoIconButtonProps extends Omit<IconButtonProps, 'socialType' | 'icon'> {
}
/**
 * @category Socials/Kakao
 *
 * 카카오 아이콘 버튼 UI 컴포넌트입니다.
 * {@link @toktokhan-dev/react-web#IconButton | `IconButton`} 컴포넌트를 기반으로 하며, 카카오 아이콘 및 버튼 스타일링이 가능합니다.
 *
 *  @param props - IconButtonProps에서 'socialType'과 'icon'을 제외한 속성들을 상속받습니다.
 * @returns 카카오 아이콘 버튼 컴포넌트를 반환합니다.
 */
declare const KakaoIconButton: (props: KakaoIconButtonProps) => ReactNode;

/**
 * IconButtonProps에서 'socialType'과 'icon'을 제외한 속성들을 상속받습니다.
 */
interface NaverIconButtonProps extends Omit<IconButtonProps, 'socialType' | 'icon'> {
}
/**
 * @category Socials/Naver
 *
 * 네이버 아이콘 버튼 UI 컴포넌트입니다.
 * {@link @toktokhan-dev/react-web#IconButton | `IconButton`} 컴포넌트를 기반으로 하며, 네이버 아이콘 및 버튼 스타일링이 가능합니다.
 *
 *  @param props - IconButtonProps에서 'socialType'과 'icon'을 제외한 속성들을 상속받습니다.
 * @returns 네이버 아이콘 버튼 컴포넌트를 반환합니다.
 */
declare const NaverIconButton: (props: NaverIconButtonProps) => react_jsx_runtime.JSX.Element;

/**
 * FullButtonProps에서 'socialType'과 'icon'을 제외한 속성들을 상속받습니다.
 */
interface NaverButtonProps extends Omit<FullButtonProps, 'socialType' | 'icon'> {
}
/**
 * @category Socials/Naver
 *
 * 네이버 버튼 UI 컴포넌트입니다.
 * {@link @toktokhan-dev/react-web#FullButton | `FullButton`} 컴포넌트를 기반으로 하여, 네이버 아이콘과 스타일, 레이블을 포함합니다.
 *
 * @param props -FullButtonProps에서 'socialType'과 'icon'을 제외한 속성들을 상속받습니다.
 * @returns 네이버 버튼 컴포넌트를 반환합니다.
 */
declare const NaverButton: (props: NaverButtonProps) => ReactNode;

/**
 * @category Socials/Naver
 *
 * 네이버 OAuth 인증을 처리하는 클래스입니다.
 * SocialOauthInit 클래스를 상속받아 구현되었습니다.
 */
declare class Naver extends SocialOauthInit {
    oAuthBaseUrl: string;
    /**
     * Naver 클래스의 생성자입니다.
     * @param clientID - Naver OAuth 클라이언트 ID
     */
    constructor(clientID?: string);
    /**
     * OAuth 인증 URL을 생성합니다.
     * @param params - OAuth 인증 요청에 필요한 파라미터
     * @param params.scope - 요청할 OAuth 스코프
     * @param params.state - 트랜잭션 동안 유지할 상태
     * @returns 생성된 OAuth 인증 URL
     */
    createOauthUrl: <State>({ scope, state, ...params }: OauthUserReqParams<NaverAuthQueryParams, State>) => string;
    /**
     * 로그인을 위한 OAuth 인증 링크로 리다이렉트합니다.
     * @param params - OAuth 인증 요청에 필요한 파라미터
     * @param params.scope - 요청할 OAuth 스코프
     * @param params.state - 트랜잭션 동안 유지할 상태
     */
    loginToLink: <State>(params: OauthUserReqParams<NaverAuthQueryParams, State>) => void;
    /**
     * 로그인을 위한 OAuth 인증 팝업을 엽니다.
     * @param params - OAuth 인증 요청에 필요한 파라미터
     * @param params.scope - 요청할 OAuth 스코프
     * @param params.state - 트랜잭션 동안 유지할 상태
     */
    loginToPopup: <State>(params: OauthUserReqParams<NaverAuthQueryParams, State>) => void;
}

/**
 * IconButtonProps에서 'socialType'과 'icon'을 제외한 속성들을 상속받습니다.
 */
interface AppleIconButtonProps extends Omit<IconButtonProps, 'socialType' | 'icon'> {
}
/**
 * @category Socials/Apple
 *
 * 애플 아이콘 버튼 UI 컴포넌트입니다.
 * {@link @toktokhan-dev/react-web#IconButton | `IconButton`} 컴포넌트를 기반으로 하며, 애플 아이콘 및 버튼 스타일링이 가능합니다.
 *
 *  @param props - IconButtonProps에서 'socialType'과 'icon'을 제외한 속성들을 상속받습니다.
 * @returns 애플 아이콘 버튼 컴포넌트를 반환합니다.
 */
declare const AppleIconButton: (props: AppleIconButtonProps) => react_jsx_runtime.JSX.Element;

/**
 * FullButtonProps에서 'socialType'과 'icon'을 제외한 속성들을 상속받습니다.
 */
interface AppleButtonProps extends Omit<FullButtonProps, 'socialType' | 'icon'> {
}
/**
 * @category Socials/Apple
 *
 * 애플 버튼 UI 컴포넌트입니다.
 * {@link @toktokhan-dev/react-web#FullButton | `FullButton`} 컴포넌트를 기반으로 하여, 애플 아이콘과 스타일, 레이블을 포함합니다.
 *
 * @param props -FullButtonProps에서 'socialType'과 'icon'을 제외한 속성들을 상속받습니다.
 * @returns 애플 버튼 컴포넌트를 반환합니다.
 */
declare const AppleButton: (props: AppleButtonProps) => react_jsx_runtime.JSX.Element;

/**
 * @category Socials/Apple
 *
 * Apple OAuth 인증을 처리하는 클래스입니다.
 * SocialOauthInit 클래스를 상속받아 구현되었습니다.
 */
declare class Apple extends SocialOauthInit {
    oAuthBaseUrl: string;
    /**
     * Apple 클래스의 생성자입니다.
     * @param clientID - Apple OAuth 클라이언트 ID
     */
    constructor(clientID?: string);
    /**
     * OAuth 인증 URL을 생성합니다.
     * @param params - OAuth 인증 요청에 필요한 파라미터
     * @param params.scope - 요청할 OAuth 스코프
     * @param params.state - 트랜잭션 동안 유지할 상태
     * @returns 생성된 OAuth 인증 URL
     */
    createOauthUrl: <State>({ scope, state, ...params }: OauthUserReqParams<AppleAuthQueryParams, State>) => string;
    /**
     * 로그인을 위한 OAuth 인증 링크로 리다이렉트합니다.
     * @param params - OAuth 인증 요청에 필요한 파라미터
     * @param params.scope - 요청할 OAuth 스코프
     * @param params.state - 트랜잭션 동안 유지할 상태
     */
    loginToLink: <State>(params: OauthUserReqParams<AppleAuthQueryParams, State>) => void;
    /**
     * 로그인을 위한 OAuth 인증 팝업을 엽니다.
     * @param params - OAuth 인증 요청에 필요한 파라미터
     * @param params.scope - 요청할 OAuth 스코프
     * @param params.state - 트랜잭션 동안 유지할 상태
     */
    loginToPopup: <State>(params: OauthUserReqParams<AppleAuthQueryParams, State>) => void;
}

/**
 * IconButtonProps에서 'socialType'과 'icon'을 제외한 속성들을 상속받습니다.
 */
interface FacebookIconButtonProps extends Omit<IconButtonProps, 'socialType' | 'icon'> {
}
/**
 * @category Socials/Facebook
 *
 * 페이스북 아이콘 버튼 UI 컴포넌트입니다.
 * {@link @toktokhan-dev/react-web#IconButton | `IconButton`} 컴포넌트를 기반으로 하며, 페이스북 아이콘 및 버튼 스타일링이 가능합니다.
 *
 *  @param props - IconButtonProps에서 'socialType'과 'icon'을 제외한 속성들을 상속받습니다.
 * @returns 페이스북 아이콘 버튼 컴포넌트를 반환합니다.
 */
declare const FacebookIconButton: (props: FacebookIconButtonProps) => react_jsx_runtime.JSX.Element;

/**
 * FullButtonProps에서 'socialType'과 'icon'을 제외한 속성들을 상속받습니다.
 */
interface FacebookButtonProps extends Omit<FullButtonProps, 'socialType' | 'icon'> {
}
/**
 * @category Socials/Facebook
 *
 * 페이스북 버튼 UI 컴포넌트입니다.
 * {@link @toktokhan-dev/react-web#FullButton | `FullButton`} 컴포넌트를 기반으로 하여, 페이스북 아이콘과 스타일, 레이블을 포함합니다.
 *
 * @param props -FullButtonProps에서 'socialType'과 'icon'을 제외한 속성들을 상속받습니다.
 * @returns 페이스북 버튼 컴포넌트를 반환합니다.
 */
declare const FacebookButton: (props: FacebookButtonProps) => react_jsx_runtime.JSX.Element;

/**
 * @category Socials/FaceBook
 *
 * Facebook OAuth 인증을 처리하는 클래스입니다.
 * SocialOauthInit 클래스를 상속받아 구현되었습니다.
 */
declare class Facebook extends SocialOauthInit {
    oAuthBaseUrl: string;
    /**
     * Facebook 클래스의 생성자입니다.
     * @param clientID - Facebook OAuth 클라이언트 ID
     */
    constructor(clientID?: string);
    /**
     * OAuth 인증 URL을 생성합니다.
     * @param params - OAuth 인증 요청에 필요한 파라미터
     * @param params.scope - 요청할 OAuth 스코프
     * @param params.state - 트랜잭션 동안 유지할 상태
     * @returns 생성된 OAuth 인증 URL
     */
    createOauthUrl: <State>({ scope, state, ...params }: OauthUserReqParams<FacebookAuthQueryParams, State>) => string;
    /**
     * 로그인을 위한 OAuth 인증 링크로 리다이렉트합니다.
     * @param params - OAuth 인증 요청에 필요한 파라미터
     * @param params.scope - 요청할 OAuth 스코프
     * @param params.state - 트랜잭션 동안 유지할 상태
     */
    loginToLink: <State>(params: OauthUserReqParams<FacebookAuthQueryParams, State>) => void;
    /**
     * 로그인을 위한 OAuth 인증 팝업을 엽니다.
     * @param params - OAuth 인증 요청에 필요한 파라미터
     * @param params.scope - 요청할 OAuth 스코프
     * @param params.return_url - 인증 후 리다이렉션될 URL
     */
    loginToPopup: <State>(params: OauthUserReqParams<FacebookAuthQueryParams, State>) => void;
}

interface OauthResponse<T> {
    code: string | null;
    error: string | null;
    errorDescription: string | null;
    state: T | null;
}
interface useOauthCallbackParams<T = any, U = any> {
    onSuccess?: (params: T | null) => void;
    onFail?: (params: U | null) => void;
}

/**
 * `useOauthLinkCallback` 훅의 반환 타입을 정의합니다.
 */
interface LinkReturnType<T> {
    /**
     * OAuth 응답 데이터를 나타냅니다.
     */
    data: OauthResponse<T> | null;
    /**
     * OAuth 콜백 처리 상태를 나타냅니다. 처리 중이면 `true`, 아니면 `false`입니다.
     */
    isLoading: boolean;
}
/**
 * @category Socials
 *
 * OAuth 링크 콜백을 처리하는 React Hook입니다.
 * 이 Hook은 OAuth 인증 후 리다이렉트된 페이지에서 사용됩니다.
 *
 * @param params 콜백 함수 파라미터. `onSuccess`와 `onFail` 콜백 함수를 포함할 수 있습니다.
 * @returns {LinkReturnType} OAuth 응답 데이터와 로딩 상태를 반환합니다.
 *
 * @example
 *
 * ```tsx
 * // pages/login.tsx
 *
 * const kakao = new Kakao(ENV.CLIENT_ID)
 * const Login = () =>
 *      <KakaoButton
 *        onClick={() =>
 *          kakao.loginToLink({
 *            redirect_uri: `${window.origin}/social/callback`,
 *            state: {
 *              returnUrl: returnUrl || '/login',
 *              type: 'kakao',
 *            },
 *          })
 *        }
 *      />
 * }
 *
 *
 * // pages/social/callback.tsx
 *
 * const { data, isLoading } = useOauthLinkCallback<{type: string; returnUrl:string}>({
 *    onSuccess: (response) => {
 *      console.log(response.state.returnUrl)
 *    },
 * })
 * ```
 */
declare const useOauthLinkCallback: <State>(params?: useOauthCallbackParams<OauthResponse<State>, OauthResponse<State>>) => {
    data: OauthResponse<State> | null;
    isLoading: boolean;
};

/**
 * `useOauthPopupCallback` 훅의 반환 타입을 정의합니다.
 */
interface PopupReturnType<T> {
    /**
     * OAuth 응답 데이터를 나타냅니다.
     */
    data: OauthResponse<T> | null;
    /**
     * OAuth 콜백 처리 상태를 나타냅니다. 처리 중이면 `true`, 아니면 `false`입니다.
     */
    isLoading: boolean;
    /**
     * 팝업을 닫는 함수를 나타냅니다.
     * 팝업이 닫힐때 부모 창에 OAuth 응답 데이터를 전달합니다.
     * `useOauthPopupListener` 훅을 사용하여 부모 창에서 OAuth 응답 데이터를 수신할 수 있습니다.
     *
     * @param extra - 모달을 닫을때 부모 창에게 추가적인 데이터를 전달할 수 있습니다.
     */
    closePopup(extra?: any): void;
}
interface PopupResponse<T> extends OauthResponse<T> {
    /**
     * 팝업을 닫는 함수를 나타냅니다.
     * 팝업이 닫힐때 부모 창에 OAuth 응답 데이터를 전달합니다.
     * `useOauthPopupListener` 훅을 사용하여 부모 창에서 OAuth 응답 데이터를 수신할 수 있습니다.
     *
     * @param extra - 모달을 닫을때 부모 창에게 추가적인 데이터를 전달할 수 있습니다.
     */
    closePopup(extra?: any): void;
}
/**
 * @category Socials
 *
 * OAuth 팝업 콜백을 처리하는 React Hook입니다.
 * 이 Hook은 OAuth 인증 후 팝업에서 사용됩니다.
 *
 * @param params 콜백 함수 파라미터. `onSuccess`와 `onFail` 콜백 함수를 포함할 수 있습니다.
 * @returns  OAuth 응답 데이터, 로딩 상태, 팝업을 닫는 함수를 반환합니다.
 *
 * @example
 * ```tsx
 * // pages/login.tsx (parents window)
 *
 * const kakao = new Kakao(ENV.CLIENT_ID)
 * const Login = () => {
 *   const { data } = useOauthPopupListener()
 *   console.log(data, data.state.returnUrl, data.extra) // { code: '...', state: { returnUrl: '/my', type: 'kakao' }, extra: 'hello parents' }
 *
 *      <KakaoButton
 *        onClick={() =>
 *          kakao.loginToPopup({
 *            redirect_uri: `${window.origin}/social/callback`,
 *            state: {
 *              returnUrl: '/my',
 *              type: 'kakao',
 *            },
 *          })
 *        }
 *      />
 * }
 *
 * // pages/social/callback.tsx (popup window)
 *
 * const { data, isLoading } = useOauthPopupCallback<{type: string; returnUrl:string}>({
 *    onSuccess: (response) => {
 *      console.log(response.state.returnUrl)
 *      response.closePopup({ extra: 'hello parents' })
 *    },
 * })
 * ```
 */
declare const useOauthPopupCallback: <State>(cb?: useOauthCallbackParams<PopupResponse<State>, PopupResponse<State>>) => {
    data: OauthResponse<State> | null;
    isLoading: boolean;
    closePopup: (extra?: any) => void;
};

interface ExtraState<T> {
    extra: T;
}
/**
 * @category Socials
 *
 * OAuth 팝업에서 전달된 메시지를 수신하는 React Hook입니다.
 * 이 Hook은 OAuth 인증 후 팝업에서 전달된 메시지를 수신하여 처리합니다.
 *
 * @returns - OAuth 응답 데이터와 로딩 상태를 반환합니다.
 * @returns data - OAuth 응답 데이터입니다. 초기값은 `null`입니다. `useOauthPopupCallback` 애서 `closePopup` 함수에서 인자로 추가적인 데이터를 전달했다면, extra 프로퍼티에 추가적인 데이터가 포함됩니다.
 * @returns isLoading - OAuth 콜백 처리 상태를 나타냅니다. 처리 중이면 `true`, 아니면 `false`입니다.
 *
 * @example
 * ```tsx
 * // pages/login.tsx (parents window)
 *
 * const kakao = new Kakao(ENV.CLIENT_ID)
 * const Login = () => {
 *   const { data } = useOauthPopupListener()
 *   console.log(data, data.state.returnUrl, data.extra) // { code: '...', state: { returnUrl: '/my', type: 'kakao' }, extra: 'hello parents' }
 *
 *      <KakaoButton
 *        onClick={() =>
 *          kakao.loginToPopup({
 *            redirect_uri: `${window.origin}/social/callback`,
 *            state: {
 *              returnUrl: '/my',
 *              type: 'kakao',
 *            },
 *          })
 *        }
 *      />
 * }
 *
 * // pages/social/callback.tsx (popup window)
 *
 * const { data, isLoading } = useOauthPopupCallback<{type: string; returnUrl:string}>({
 *    onSuccess: (response) => {
 *      console.log(response.state.returnUrl)
 *      response.closePopup({ extra: 'hello parents' })
 *    },
 * })
 * ```
 */
declare const ERROR_MESSAGES: {
    NO_RESPONSE: string;
    ORIGIN_MISMATCH: string;
    NO_AUTH_CODE: string;
};
declare const useOauthPopupListener: <State, Extra = unknown>(params?: useOauthCallbackParams<OauthResponse<State> & ExtraState<Extra>, Partial<OauthResponse<State> & ExtraState<Extra> & {
    msg?: string;
}>>) => {
    data: Partial<OauthResponse<State> & ExtraState<Extra>> | null;
    isLoading: boolean;
};

export { Apple, type AppleAuthQueryParams, AppleButton, type AppleButtonProps, AppleIconButton, type AppleIconButtonProps, type CommonOauthParams, type CookieOptions, ERROR_MESSAGES, type ExtraState, Facebook, type FacebookAuthQueryParams, FacebookButton, type FacebookButtonProps, FacebookIconButton, type FacebookIconButtonProps, type FullButtonProps, GOOGLE_AUTH_SCOPE, Google, type GoogleAuthQueryParams, GoogleButton, type GoogleButtonProps, GoogleIconButton, type GoogleIconButtonProps, type IconButtonProps, type KaKaoAuthQueryResponse, Kakao, type KakaoAuthQueryParams, KakaoButton, type KakaoButtonProps, KakaoIconButton, type KakaoIconButtonProps, type LinkReturnType, Naver, type NaverAuthQueryParams, type NaverAuthQueryResponse, NaverButton, type NaverButtonProps, NaverIconButton, type NaverIconButtonProps, type OauthResponse, type OauthStateReturnType, type OauthUserReqParams, type PopupResponse, type PopupReturnType, ReactSyncConnector, ReactSynced, type SocialAuthQueryResponse, SocialOauthInit, type SocialType, SyncedCookie, SyncedStorage, SyncedStorageFactory, UploadTrigger, type UploadTriggerProps, useIntersectionObserver, type useOauthCallbackParams, useOauthLinkCallback, useOauthPopupCallback, useOauthPopupListener, useSyncWebStorage };