import './ui-pc_AYI_4.js';
import { HTMLAttributes, ComponentType } from 'react';

interface IconProps extends HTMLAttributes<unknown> {
    size?: number;
}

/**
 * Usage note: This is not type-safe if you use string as T, you have to constrain T to the icon key, e.g.
 * const iconRegistry: IconRegistry<keyof typeof oauthIcons> = usePresentation().iconRegistry;
 **/
type IconRegistry<T extends string> = Record<T, ComponentType<IconProps>>;

type Theme = Partial<ColorMixFallback> & {
    'color-scheme': 'light' | 'dark' | 'shadcn';
    /** Base font for all text.
     *  @default system-ui */
    'font-family': string;
    /** Font for monospace code, such as TOTP setup and recovery code.
     *  @default ui-monospace. */
    'font-family-mono': string;
    /** Header font override.
     *  @default base font-family */
    'header-font'?: string;
    /** Base sizing variable. Changing this makes most spacing between elements larger or smaller.
     *  @default 4px */
    spacing: string;
    /** Max width for outer container.
     *  @default 400px */
    'container-width': string;
    /** UI components are larger to accommodate touch screens below this size
     *  @default 768px */
    'mobile-breakpoint': string;
    /** Base border radius.
     *  @default 4px */
    'rounded-base': string;
    /** Base font size.
     *  @default 1rem or 16px */
    'text-base': string;
    /** Override for button border radius
     *  @default 2x rounded-base or 8px */
    'button-radius'?: string;
    /** Override for input border radius
     *  @default 2x rounded-base or 8px */
    'input-radius'?: string;
    /** Override for outer container border radius
     *  @default 6x rounded-base or 24px */
    'container-radius'?: string;
    /** Base box shadow, used for both buttons and inputs
     *  @default none */
    shadow?: string;
    'shadow-button'?: string;
    'shadow-input'?: string;
    'transition-duration': string;
    /** Background color of the SDK container. */
    background: string;
    /** Default font color for text in the SDK container. */
    foreground: string;
    /**
     * Your primary brand color. This will be applied to primary action buttons
     * such as form submit buttons.
     */
    primary: string;
    'primary-foreground': string;
    secondary: string;
    'secondary-foreground': string;
    /**
     * A neutral, subtle color for areas such as the unfilled part of a progress bar.
     */
    muted: string;
    /**
     * Text color contrasting with muted, and also the color used for helper and other
     * secondary text.
     */
    'muted-foreground': string;
    /**
     * Your accent brand color. This will be applied to backgrounds to draw user's attention
     * such as backup code for TOTP registration.
     */
    accent: string;
    'accent-foreground': string;
    /** Border color for the outer container and dividers */
    border: string;
    /** Border color for inputs */
    input: string;
    /** Input and button focus ring color */
    ring: string;
    /** Background and font color for destructive actions and error states.
     *  @default Red color */
    destructive: string;
    'destructive-foreground': string;
    /** Background and font color for warning states.
     *  @default Orange color */
    warning: string;
    /** Background and font color for successful states.
     *  @default Green color */
    success: string;
    /** Border color only for the outer container
     *  @default The value of border */
    'container-border'?: string;
};
/**
 * Color mix overrides -
 * These variables are constructed using color-mix() by default. If customer needs to support older browsers,
 * these values can be set using a pre-processor or JS a chroma.js polyfill
 */
type ColorMixFallback = {
    'tab-background': string;
    'primary-button-hover': string;
    'secondary-button-hover': string;
    'destructive-button-hover': string;
    'divider-color': string;
    'focus-ring-shadow': string;
};

type PresentationOptions = {
    /**
     * When this value is false, the header title and description text will be hidden.
     * This is useful if you prefer to display and style the title outside the Stytch component.
     */
    hideHeaderText: boolean;
    /**
     * Optional suffix for <input> id attribute so input IDs are unique.
     */
    inputIdSuffix?: string;
    /**
     * The configuration object for your custom logo.
     */
    logo?: {
        /**
         * The URL of your custom logo.
         */
        url: string;
        /**
         * Alt text for the logo. This would usually be the name of the website or your company,
         * unless this is already repeated nearby in which case this should be left empty.
         */
        alt: string;
    };
    /**
     * Set to true to add id like 'oauth-google' to buttons, or a string to add a suffix to button ids to make
     * them more unique. This exists for backwards compatibility. We do not recommend using this to style or
     * modify elements in Stytch UI.
     */
    buttonId?: string | boolean;
    /**
     * Wraps the Stytch UI components to be contained in a shadow DOM. Use this to enable style isolation.
     * @default false
     */
    enableShadowDOM?: boolean;
    /**
     * Override our icons. Currently, this only supports logos, such as those that appear in Oauth buttons.
     * This should be an object where the key is the icon name and the value is a React component
     * (not React element) with a size prop and the rest spread onto the root element.
     *
     * Note that custom logos not imported from our packages is not yet available in @stytch/vanilla-js.
     * We are looking at provide alternatives in the future.
     *
     * @example
     *
     * // Using a solid black or white icon
     * import { whiteIcons } from '@stytch/react';
     *
     * const presentation = {
     *   options: {
     *     icons: {
     *       outlook: whiteIcons.outlook,
     *     },
     *   },
     * };
     *
     * // Using a custom icon
     * const presentation = {
     *  icons: {
     *    outlook: ({ size, ...props }) => (
     *      <svg width={size} height={size} {...props}>...</svg>
     *    ),
     *  },
     * };
     */
    icons?: IconRegistry<string>;
};

export type { ColorMixFallback as C, IconRegistry as I, PresentationOptions as P, Theme as T };