import * as react_jsx_runtime from 'react/jsx-runtime';
import * as React$1 from 'react';
import { PropsWithChildren } from 'react';
import { ActiveSessionResource, PublicUserData, SignInFactor, SignInStrategy as SignInStrategy$1 } from '@clerk/types';
import { a as FormProps } from './submit-gXm55DfO.js';

type SignInActiveSessionListItem = Pick<ActiveSessionResource, 'id'> & PublicUserData;

type SignInChooseSessionProps = React$1.HTMLAttributes<HTMLDivElement> & {
    asChild?: boolean;
};
type SignInSessionListProps = React$1.HTMLAttributes<HTMLUListElement> & {
    asChild?: boolean;
    includeCurrentSession?: true;
};
type SignInSessionListItemProps = Omit<React$1.HTMLAttributes<HTMLLIElement>, 'children'> & {
    asChild?: boolean;
    children: ({ session }: {
        session: SignInActiveSessionListItem;
    }) => React$1.ReactNode;
};
declare function SignInSessionList({ asChild, children, includeCurrentSession, ...props }: SignInSessionListProps): react_jsx_runtime.JSX.Element | null;
declare function SignInSessionListItem(props: SignInSessionListItemProps): react_jsx_runtime.JSX.Element;

type SignInChooseStrategyProps = React$1.HTMLAttributes<HTMLDivElement> & {
    asChild?: boolean;
};
type SignInSupportedStrategyProps = {
    asChild?: boolean;
    name: Exclude<SignInFactor['strategy'], `oauth_${string}` | 'saml'>;
    children: React$1.ReactNode;
};
/**
 * By default, renders a button which will trigger a change in the chosen sign-in strategy. It **must** be used within a `<Step name='choose-strategy'>` component.
 *
 * @description This component will only render its contents if the chosen strategy is enabled (in the Clerk dashboard) and if it's not the current strategy.
 *
 * @param name - Define a strategy to be used.
 * @param {boolean} [asChild] - When `true`, the component will render its child and passes all props to it.
 *
 * @example
 * <SignIn.Step name='choose-strategy'>
 *   <SignIn.SupportedStrategy name='password'>
 *     Sign in with password
 *   </SignIn.SupportedStrategy>
 * </SignIn.Step>
 */
declare const SignInSupportedStrategy: React$1.ForwardRefExoticComponent<SignInSupportedStrategyProps & React$1.RefAttributes<HTMLButtonElement>>;

type SignInStrategyName = SignInStrategy$1 | 'oauth' | 'web3';

type SignInResetPasswordProps = FormProps;

type SignInSSOCallbackProps = PropsWithChildren;

type SignInStartProps = FormProps;

type SignInVerificationsProps = {
    preferred?: SignInStrategy$1;
} & FormProps;
type SignInStrategyProps = {
    name: SignInStrategyName;
    children: React.ReactNode;
};
/**
 * Generic component to handle both first and second factor verifications.
 *
 * @param {string} name - The name of the strategy for which its children will be rendered.
 *
 * @example
 * <SignIn.Step name="verifications">
 *   <SignIn.Strategy name="password">...</SignIn.Strategy>
 * </SignIn.Step>
 */
declare function SignInStrategy({ children, name }: SignInStrategyProps): react_jsx_runtime.JSX.Element | null;
/**
 * Component to handle specifically first factor verifications.
 * Generally, you should use the <SignInVerifications> component instead via <Step name="verifications">.
 *
 * @example
 * <FirstFactor>...</FirstFactor>
 */
declare function SignInFirstFactor(props: SignInVerificationsProps): react_jsx_runtime.JSX.Element | null;
/**
 * Component to handle specifically second factor verifications.
 * Generally, you should use the <SignInVerifications> component instead via <Step name="verifications">.
 *
 * @example
 * <SecondFactor>...</SecondFactor>
 */
declare function SignInSecondFactor(props: SignInVerificationsProps): react_jsx_runtime.JSX.Element | null;

declare const SIGN_IN_STEPS: {
    readonly start: "start";
    readonly verifications: "verifications";
    readonly 'choose-strategy': "choose-strategy";
    readonly 'choose-session': "choose-session";
    readonly 'forgot-password': "forgot-password";
    readonly 'reset-password': "reset-password";
    readonly 'sso-callback': "sso-callback";
};
type TSignInStep = (typeof SIGN_IN_STEPS)[keyof typeof SIGN_IN_STEPS];
type StepWithProps<N extends TSignInStep, T> = {
    name: N;
} & T;
type SignInStepProps = StepWithProps<'start', SignInStartProps> | StepWithProps<'verifications', SignInVerificationsProps> | StepWithProps<'choose-strategy' | 'forgot-password', SignInChooseStrategyProps> | StepWithProps<'reset-password', SignInResetPasswordProps> | StepWithProps<'choose-session', SignInChooseSessionProps> | StepWithProps<'sso-callback', SignInSSOCallbackProps>;
/**
 * Render different steps of the sign-in flow. Initially the `'start'` step is rendered. Once a sign-in attempt has been created, `'verifications'` will be displayed. If during that verification step the user decides to choose a different method of signing in or verifying, the `'choose-strategy'` step will be displayed.
 *
 * You typically want to place fields like username, password, or social providers in the `'start'` step. The `'verifications'` step is used to verify the user's credentials like password or MFA. Once the user has been verified, the sign-in attempt will be completed.
 *
 * @param {string} name - Step name. Use `'start'`, `'verifications'`, `'choose-strategy'`, `'reset-password'`, or `'forgot-password'`.
 *
 * @example
 * <SignIn.Root>
 *  <SignIn.Step name='start' />
 *  <SignIn.Step name='verifications' />
 *  <SignIn.Step name='choose-strategy' />
 *  <SignIn.Step name='forgot-password' />
 *  <SignIn.Step name='reset-password' />
 *  <SignIn.Step name='choose-session' />
 * </SignIn.Root>
 */
declare function SignInStep(props: SignInStepProps): react_jsx_runtime.JSX.Element;

export { SignInStep as S, type TSignInStep as T, SignInSupportedStrategy as a, SignInSessionList as b, SignInSessionListItem as c, SignInFirstFactor as d, SignInSecondFactor as e, SignInStrategy as f };