import { ClerkAPIError, Autocomplete, PasswordSettingsData, OAuthProvider, Web3Provider, SamlStrategy, EnterpriseSSOStrategy } from '@clerk/types';
import * as _radix_ui_react_form from '@radix-ui/react-form';
import { FormFieldProps as FormFieldProps$1, FormMessageProps, FormControlProps } from '@radix-ui/react-form';
import * as React$1 from 'react';
import React__default from 'react';
import { MetamaskError } from '@clerk/shared';
export { a as FormProps, F as FormSubmitProps, S as Submit } from '../../submit-gXm55DfO.js';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { T as TSignInStep } from '../../step-MsK0UT__.js';
import { T as TSignUpStep } from '../../step-CT_Bsp8r.js';
import 'xstate';
import 'type-fest';

declare abstract class ClerkElementsErrorBase extends Error {
    readonly code: string;
    clerkError: boolean;
    clerkElementsError: boolean;
    rawMessage: string;
    constructor(code: string, message: string);
    toString(): string;
}
declare class ClerkElementsError extends ClerkElementsErrorBase {
    static fromAPIError(error: ClerkAPIError | MetamaskError): ClerkElementsError;
    constructor(code: string, message: string);
}

/** Extracted relevant fields from @clerk/types  */
type ClerkFieldId = 'code' | 'confirmPassword' | 'currentPassword' | 'backup_code' | 'emailAddress' | 'firstName' | 'identifier' | 'lastName' | 'name' | 'newPassword' | 'password' | 'phoneNumber' | 'username' | 'legalAccepted';
declare const FIELD_STATES: {
    readonly success: "success";
    readonly error: "error";
    readonly idle: "idle";
    readonly warning: "warning";
    readonly info: "info";
};
type FieldStates = (typeof FIELD_STATES)[keyof typeof FIELD_STATES];
type FormErrorRenderProps = Pick<ClerkElementsError, 'code' | 'message'>;
type FormErrorPropsAsChild = {
    asChild?: true | never;
    children?: React.ReactElement | ((error: FormErrorRenderProps) => React.ReactNode);
    code?: string;
};
type FormErrorPropsStd = {
    asChild?: false;
    children: React.ReactNode;
    code: string;
};
type FormErrorProps<T> = Omit<T, 'asChild' | 'children'> & (FormErrorPropsStd | FormErrorPropsAsChild);

type FormFieldProps = Omit<FormFieldProps$1, 'children'> & {
    name: Autocomplete<ClerkFieldId>;
    alwaysShow?: boolean;
    children: React$1.ReactNode | ((state: FieldStates) => React$1.ReactNode);
};
/**
 * Field is used to associate its child elements with a specific input. It automatically handles unique ID generation and associating the contained label and input elements.
 *
 * @param name - Give your `<Field>` a unique name inside the current form. If you choose one of the following names Clerk Elements will automatically set the correct type on the `<input />` element: `emailAddress`, `password`, `phoneNumber`, and `code`.
 * @param alwaysShow - Optional. When `true`, the field will always be renydered, regardless of its state. By default, a field is hidden if it's optional or if it's a filled-out required field.
 * @param {Function} children - A function that receives `state` as an argument. `state` is a union of `"success" | "error" | "idle" | "warning" | "info"`.
 *
 * @example
 * <Clerk.Field name="emailAddress">
 *   <Clerk.Label>Email</Clerk.Label>
 *   <Clerk.Input />
 * </Clerk.Field>
 *
 * @example
 * <Clerk.Field name="emailAddress">
 *  {(fieldState) => (
 *    <Clerk.Label>Email</Clerk.Label>
 *    <Clerk.Input className={`text-${fieldState}`} />
 *  )}
 * </Clerk.Field>
 */
declare const Field: React$1.ForwardRefExoticComponent<Omit<FormFieldProps$1, "children"> & {
    name: Autocomplete<ClerkFieldId>;
    alwaysShow?: boolean;
    children: React$1.ReactNode | ((state: FieldStates) => React$1.ReactNode);
} & React$1.RefAttributes<HTMLDivElement>>;

type FormFieldErrorProps = FormErrorProps<FormMessageProps & {
    name?: string;
}>;
/**
 * FieldError renders error messages associated with a specific field. By default, the error's message will be rendered in an unstyled `<span>`. Optionally, the `children` prop accepts a function to completely customize rendering.
 *
 * @param {string} [name] - Used to target a specific field by name when rendering outside of a `<Field>` component.
 * @param {Function} [children] - A function that receives `message` and `code` as arguments.
 *
 * @example
 * <Clerk.Field name="email">
 *   <Clerk.FieldError />
 * </Clerk.Field>
 *
 * @example
 * <Clerk.Field name="email">
 *   <Clerk.FieldError>
 *     {({ message, code }) => (
 *       <span data-error-code={code}>{message}</span>
 *     )}
 *   </Clerk.FieldError>
 * </Clerk.Field>
 */
declare const FieldError: React$1.ForwardRefExoticComponent<FormFieldErrorProps & React$1.RefAttributes<HTMLSpanElement>>;

type ComplexityErrors = {
    [key in keyof Partial<Omit<PasswordSettingsData, 'disable_hibp' | 'min_zxcvbn_strength' | 'show_zxcvbn'>>]?: boolean;
};
declare const errorMessages: Record<keyof Omit<ComplexityErrors, 'allowed_special_characters'>, [string, string] | string>;
type ErrorMessagesKey = Autocomplete<keyof typeof errorMessages>;
type ErrorCodeOrTuple = ErrorMessagesKey | [ErrorMessagesKey, Record<string, string | number>];

type FieldStateRenderFn = {
    children: (state: {
        state: FieldStates;
        message: string | undefined;
        codes: ErrorCodeOrTuple[] | undefined;
    }) => React.ReactNode;
};
/**
 * Programmatically access the state of the wrapping `<Field>`. Useful for implementing animations when direct access to the state value is necessary.
 *
 * @param {Function} children - A function that receives `state`, `message`, and `codes` as an argument. `state` will is a union of `"success" | "error" | "idle" | "warning" | "info"`. `message` will be the corresponding message, e.g. error message. `codes` will be an array of keys that were used to generate the password validation messages. This prop is only available when the field is of type `password` and has `validatePassword` set to `true`.
 *
 * @example
 * <Clerk.Field name="email">
 *  <Clerk.Label>Email</Clerk.Label>
 *  <Clerk.FieldState>
 *    {({ state }) => (
 *      <Clerk.Input className={`text-${state}`} />
 *    )}
 *  </Clerk.FieldState>
 * </Clerk.Field>
 *
 * @example
 * <Clerk.Field name="password">
 *  <Clerk.Label>Password</Clerk.Label>
 *  <Clerk.Input validatePassword />
 *  <Clerk.FieldState>
 *    {({ state, message, codes }) => (
 *      <pre>Field state: {state}</pre>
 *      <pre>Field msg: {message}</pre>
 *      <pre>Pwd keys: {codes.join(', ')}</pre>
 *    )}
 *  </Clerk.FieldState>
 * </Clerk.Field>
 */
declare function FieldState({ children }: FieldStateRenderFn): React$1.ReactNode;
declare namespace FieldState {
    var displayName: string;
}

type FormGlobalErrorProps = FormErrorProps<React$1.ComponentPropsWithoutRef<'div'>>;
/**
 * Used to render errors that are returned from Clerk's API, but that are not associated with a specific form field. By default, will render the error's message wrapped in a `<div>`. Optionally, the `children` prop accepts a function to completely customize rendering. Must be placed **inside** components like `<SignIn>`/`<SignUp>` to have access to the underlying form state.
 *
 * @param {string} [code] - Forces the message with the matching code to be shown. This is useful when using server-side validation.
 * @param {Function} [children] - A function that receives `message` and `code` as arguments.
 * @param {boolean} [asChild] - If `true`, `<GlobalError>` will render as its child element, passing along any necessary props.
 *
 * @example
 * <SignIn.Root>
 *   <Clerk.GlobalError />
 * </SignIn.Root>
 *
 * @example
 * <SignIn.Root>
 *   <Clerk.GlobalError code="user_locked">Your custom error message.</Clerk.GlobalError>
 * </SignIn.Root>
 *
 * @example
 * <SignIn.Root>
 *   <Clerk.GlobalError>
 *     {({ message, code }) => (
 *       <span data-error-code={code}>{message}</span>
 *     )}
 *   </Clerk.GlobalError>
 * </SignIn.Root>
 */
declare const GlobalError: React$1.ForwardRefExoticComponent<FormGlobalErrorProps & React$1.RefAttributes<HTMLDivElement>>;

type OTPInputProps = Exclude<FormControlProps, 'type' | 'autoComplete' | 'minLength' | 'maxLength' | 'inputMode' | 'pattern' | 'spellCheck'> & {
    render?: (props: {
        value: string;
        status: OTPInputSegmentStatus;
        index: number;
    }) => React$1.ReactNode;
    length?: number;
    autoSubmit?: boolean;
    passwordManagerOffset?: number;
};
/**
 * The status of a single segment element in the OTP input
 */
type OTPInputSegmentStatus = 'none' | 'cursor' | 'selected' | 'hovered';

type PasswordInputProps = Exclude<FormControlProps, 'type'> & {
    validatePassword?: boolean;
};
type FormInputProps = FormControlProps | ({
    type: 'otp';
    render: OTPInputProps['render'];
} & Omit<OTPInputProps, 'asChild'>) | ({
    type: 'otp';
    render?: undefined;
} & OTPInputProps) | ({
    type: 'password' | 'text';
} & PasswordInputProps);
/**
 * Handles rendering of `<input>` elements within Clerk's flows. Supports special `type` prop values to render input types that are unique to authentication and user management flows. Additional props will be passed through to the `<input>` element.
 *
 * @param {boolean} [asChild] - If true, `<Input />` will render as its child element, passing along any necessary props.
 * @param {string} [name] - Used to target a specific field by name when rendering outside of a `<Field>` component.
 *
 * @example
 * <Clerk.Field name="identifier">
 *   <Clerk.Label>Email</Clerk.Label>
 *   <Clerk.Input type="email" autoComplete="email" className="emailInput" />
 * </Clerk.Field>
 *
 * @param {Number} [length] - The length of the OTP input. Defaults to 6.
 * @param {Number} [passwordManagerOffset] - Password managers place their icon inside an `<input />`. This default behaviour is not desirable when you use the render prop to display N distinct element. With this prop you can increase the width of the `<input />` so that the icon is rendered outside the OTP inputs.
 * @param {string} [type] - Type of control to render. Supports a special `'otp'` type for one-time password inputs. If the wrapping `<Field>` component has `name='code'`, the type will default to `'otp'`. With the `'otp'` type, the input will have a pattern and length set to 6 by default and render a single `<input />` element.
 *
 * @example
 * <Clerk.Field name="code">
 *   <Clerk.Label>Email code</Clerk.Label>
 *   <Clerk.Input type="otp" />
 * </Clerk.Field>
 *
 * @param {Function} [render] - Optionally, you can use a render prop that controls how each individual character is rendered. If no `render` prop is provided, a single text `<input />` will be rendered.
 *
 * @example
 * <Clerk.Field name="code">
 *   <Clerk.Label>Email code</Clerk.Label>
 *   <Clerk.Input
 *     type="otp"
 *     render={({ value, status }) => <span data-status={status}>{value}</span>}
 *   />
 * </Clerk.Field>
 */
declare const Input: React$1.ForwardRefExoticComponent<FormInputProps & React$1.RefAttributes<HTMLInputElement>>;

/**
 * Renders a `<label>` element that is automatically associated with its sibling `<Input />` inside of a `<Field>`. Additional props will be passed through to the `<label>` element.
 *
 * @param {boolean} [asChild] - If true, `<Label />` will render as its child element, passing along any necessary props.
 *
 * @example
 * <Clerk.Field name="email">
 *   <Clerk.Label>Email</Clerk.Label>
 *   <Clerk.Input />
 * </Clerk.Field>
 */
declare const Label: React$1.ForwardRefExoticComponent<_radix_ui_react_form.FormLabelProps & React$1.RefAttributes<HTMLLabelElement>>;

interface ConnectionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    asChild?: boolean;
    name: OAuthProvider | Web3Provider | SamlStrategy | EnterpriseSSOStrategy;
}
/**
 * Renders a social connection button based on the provided name. If your instance does not have the social connection enabled, this component will throw an error in development.
 *
 * **Tip:** You can use the `<Icon />` component to render the social connection icon.
 *
 * @param {boolean} [asChild] - If true, `<Connection />` will render as its child element, passing along any necessary props.
 * @param {OAuthProvider | Web3Provider} name - The name of the social connection to render.
 *
 * @example
 * <SignIn.Root>
 *  <SignIn.Step name="start">
 *    <Clerk.Connection name="google">
 *      Sign in with Google
 *    </Clerk.Connection>
 *  </SignIn.Step>
 * </SignIn.Root>
 */
declare function Connection({ asChild, name, ...rest }: ConnectionProps): react_jsx_runtime.JSX.Element | null;
interface IconProps extends Omit<React.HTMLAttributes<HTMLImageElement>, 'src'> {
    asChild?: boolean;
}
/**
 * `<Icon>` **must** be used inside `<Connection>`. By default, `<Icon>` will render as an `<img>` element with the `src` pointing to the logo of the currently used `<Connection>`.
 *
 * @param {boolean} [asChild] - If true, `<Icon />` will render as its child element, passing along any necessary props.
 *
 * @example
 * <SignIn.Root>
 *  <SignIn.Step name="start">
 *    <Clerk.Connection name="google">
 *      <Clerk.Icon />
 *      Sign in with Google
 *    </Clerk.Connection>
 *  </SignIn.Step>
 * </SignIn.Root>
 */
declare function Icon({ asChild, ...rest }: IconProps): react_jsx_runtime.JSX.Element;

type Strategy = OAuthProvider | SamlStrategy | EnterpriseSSOStrategy | Web3Provider;
type LoadingScope<T extends TSignInStep | TSignUpStep> = 'global' | `step:${T}` | `provider:${Strategy}` | 'submit' | 'passkey' | undefined;
type LoadingProps = {
    scope?: LoadingScope<TSignInStep | TSignUpStep>;
    children: (isLoading: boolean) => React$1.ReactNode;
};
/**
 * Access the loading state of a chosen scope. Scope can refer to a step, a provider, or the global loading state. The global loading state is `true` when any of the other scopes are loading.
 *
 * @param scope - Optional. Specify which loading state to access. Can be a step, a provider, or the global loading state. If `<Loading>` is used outside a `<Step>`, the scope will default to "global". If used inside a `<Step>` the scope will default to the current step. For external authentication providers, the scope needs to be manually defined in the format of `provider:<provider name>`
 * @param {Function} children - A function that receives `isLoading` as an argument. `isLoading` is a boolean that indicates if the current scope is loading or not.
 *
 * @example
 * <SignIn.Root>
 *   <Clerk.Loading>
 *     {(isLoading) => isLoading && "Global loading..."}
 *   </Clerk.Loading>
 * </SignIn.Root>
 *
 * @example
 * <SignIn.Step name="start">
 *  <Clerk.Action submit>
 *    <Clerk.Loading>
 *      {(isLoading) => isLoading ? "Start is loading..." : "Submit"}
 *    </Clerk.Loading>
 *  </Clerk.Action>
 * </SignIn.Step>
 *
 * @example
 * <SignIn.Step name="start">
 *   <Clerk.Loading scope="provider:google">
 *     {(isLoading) => (
 *       <Clerk.Connection name="google" disabled={isLoading}>
 *         {isLoading ? "Loading..." : "Continue with Google"}
 *       </Clerk.Connection>
 *     )}
 *   </Clerk.Loading>
 * </SignIn.Step>
 */
declare function Loading({ children, scope }: LoadingProps): react_jsx_runtime.JSX.Element;

type Destination = 'sign-in' | 'sign-up';
interface LinkProps extends Omit<React__default.HTMLAttributes<HTMLAnchorElement>, 'children'> {
    navigate: Destination;
    children: React__default.ReactNode | ((props: {
        url: string;
    }) => React__default.ReactNode);
}
/**
 * The `<Link>` component is used to navigate between sign-in and sign-up flows.
 *
 * @param {Destination} navigate - The destination to navigate to.
 *
 * @example
 * ```tsx
 * <Link navigate="sign-in">Sign in</Link>
 * ```
 * @example
 * ```tsx
 * <Link navigate="sign-in">
 *  {({ url }) => (
 *    <NextLink href={url}>Sign in</NextLink>
 *  )}
 * </Link>
 */
declare function Link({ navigate, children, ...rest }: LinkProps): string | number | boolean | Iterable<React__default.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;

export { Connection, type ConnectionProps, Field, FieldError, FieldState, type FormErrorProps, type FormErrorRenderProps, type FormFieldErrorProps, type FormFieldProps, type FormGlobalErrorProps, type FormInputProps, GlobalError, Icon, type IconProps, Input, Label, Link, Loading, type OTPInputSegmentStatus };