@sikka/hawa/dist/blocks/index.d.ts

Modern UI Kit made with Tailwind

import React__default, { FC, InputHTMLAttributes } from 'react';
import { ThirdPartyAuthTextsTypes, LoginFormTextsTypes, RegisterFormTextsTypes, NewPasswordTextsTypes, ResetPasswordTextsTypes, BaseInputType, TextInputType, PricingCardProps, PlanFeature, PricingPlanTexts } from '../types/index.js';
import { P as PhoneInputProps, S as SelectOptionProps, L as LabelProps, R as RadioOptionsTypes } from '../Radio-DlPwVCG4.js';
import { D as DirectionType, a as RadioOptionType, O as OrientationType } from '../commonTypes-C-g8nFFC.js';
import { M as MenuItemType } from '../DropdownMenu-CDnFCzfc.js';
import '@radix-ui/react-popover';
import '@radix-ui/react-dropdown-menu';

type AuthButtonsType = {
    texts?: ThirdPartyAuthTextsTypes;
    viaMetamask?: boolean;
    viaNafath?: boolean;
    viaGoogle?: boolean;
    viaTwitter?: boolean;
    viaGithub?: boolean;
    viaMicrosoft?: boolean;
    viaEmail?: boolean;
    viaPhone?: boolean;
    viaApple?: boolean;
    isMetamaskLoading?: boolean;
    isNafathLoading?: boolean;
    isGoogleLoading?: boolean;
    isGithubLoading?: boolean;
    isTwitterLoading?: boolean;
    isMicrosoftLoading?: boolean;
    isEmailLoading?: boolean;
    isPhoneLoading?: boolean;
    isAppleLoading?: boolean;
    handleMetamask?: () => void;
    handleNafath?: () => void;
    handleGoogle?: () => void;
    handleTwitter?: () => void;
    handleApple?: () => void;
    handleMicrosoft?: () => void;
    handleGithub?: () => void;
    handleEmail?: () => void;
    handlePhone?: () => void;
};
declare const AuthButtons: React__default.FC<AuthButtonsType>;

type LoginFormTypes = {
    /** Object containing text labels used throughout the form. */
    texts?: LoginFormTextsTypes;
    /** If true, only logos are displayed in third-party auth buttons.*/
    logosOnly?: boolean;
    /** Direction of text and UI elements, either left-to-right or right-to-left.   */
    direction?: DirectionType;
    /** If true, an error alert is displayed at the top of the form.   */
    showError?: boolean;
    /** Callback function triggered when the error alert is dismissed. */
    onErrorDismissed?: () => void;
    /** Title text of error alert.*/
    errorTitle?: string;
    /** Description text of error alert.   */
    errorText?: string;
    /** Login identifier type user will use to log in.   */
    loginType?: "email" | "username" | "phone" | "link";
    /** If true, the reset password option is hidden.   */
    withResetPassword?: boolean;
    /** If true, the register option is hidden.   */
    allowRegister?: boolean;
    /** If true, a loading spinner is displayed within the main form submit button.   */
    isLoading?: boolean;
    /** If true, a loading spinner is displayed within the Google login button.   */
    isGoogleLoading?: boolean;
    /** If true, a loading spinner is displayed within the Twitter login button.   */
    isTwitterLoading?: boolean;
    /** If true, a loading spinner is displayed within the Github login button.   */
    isGithubLoading?: boolean;
    /** If true, Google login option is displayed.   */
    viaGoogle?: boolean;
    /** If true, Github login option is displayed.   */
    viaGithub?: boolean;
    /** If true, Twitter login option is displayed.   */
    viaTwitter?: boolean;
    /** Function to handle form submission.   */
    onLogin: (e: any) => void;
    /** Function to route user to the register page.   */
    onRouteToRegister?: () => void;
    /** Function to handle forgotten password case.   */
    onForgotPassword?: () => void;
    /** Function to handle Google login.   */
    onGoogleLogin?: () => void;
    /** Function to handle Github login.   */
    onGithubLogin?: () => void;
    /** Function to handle Twitter login.   */
    onTwitterLogin?: () => void;
    /** Additional buttons to add under the login button */
    additionalButtons?: any;
    /** The minimum length of the password input field */
    minPasswordLength?: number;
    /** If true, the form is displayed without a card container styling.*/
    cardless?: boolean;
    /** Props to pass to the PhoneInput component */
    phoneInputProps?: PhoneInputProps;
};
declare const LoginForm: FC<LoginFormTypes>;

type RegisterFormTypes = {
    /** Object containing text labels used throughout the form. */
    texts?: RegisterFormTextsTypes;
    /** Direction of text and layout, either 'rtl' (right-to-left) or 'ltr' (left-to-right). */
    direction?: DirectionType;
    /** Determines whether to display logos only or with text in the social media registration section. */
    logosOnly?: boolean;
    /** Enables registration via Google when set to true. */
    viaGoogle?: boolean;
    /** Enables registration via Github when set to true. */
    viaGithub?: boolean;
    /** Enables registration via Twitter when set to true. */
    viaTwitter?: boolean;
    /** Determines whether to show the referral code field. */
    showRefCode?: boolean;
    /** Determines whether to show the user source selection. */
    showUserSource?: boolean;
    /** Determines whether to show the terms acceptance checkbox. */
    showTermsOption?: boolean;
    /** Determines whether to show the newsletter subscription checkbox. */
    showNewsletterOption?: boolean;
    /** Callback function triggered on form submission. */
    onRegister: (e: any) => void;
    /** Callback function triggered to route to the login page. */
    onRouteToLogin?: () => void;
    /** Callback function triggered to handle registration via Google. */
    onGoogleRegister?: () => void;
    /** Callback function triggered to handle registration via Github. */
    onGithubRegister?: () => void;
    /** Callback function triggered to handle registration via Twitter. */
    onTwitterRegister?: () => void;
    /** Callback function triggered to route to the Terms of Service page. */
    onRouteToTOS?: () => void;
    /** Determines whether to show an error alert. */
    showError?: boolean;
    /** Callback function triggered when the error alert is dismissed. */
    onErrorDismissed?: () => void;
    /** Title for the error alert. */
    errorTitle?: any;
    /** Text for the error alert. */
    errorText?: any;
    /** Array containing the fields to be included in the form. */
    registerFields?: string[];
    /** Indicates whether the form submission is in progress. */
    isLoading?: boolean;
    /** If true, a loading spinner is displayed within the Google login button.   */
    isGoogleLoading?: boolean;
    /** If true, a loading spinner is displayed within the Twitter login button.   */
    isTwitterLoading?: boolean;
    /** If true, a loading spinner is displayed within the Github login button.   */
    isGithubLoading?: boolean;
    /** The options of "How did you learn about us?" select field.   */
    userReferenceOptions?: SelectOptionProps[];
    /** To add more custom buttons under the register button.   */
    additionalButtons?: any;
    /** To add more custom input fields   */
    additionalInputs?: any;
    /** To customize the username input field   */
    usernameOptions?: {
        label?: LabelProps;
    };
    classNames?: {
        root?: string;
        form?: string;
        card?: string;
    };
    /** The minimum length of the password input field */
    minPasswordLength?: number;
    /** If true, the form is displayed without a card container styling.*/
    cardless?: boolean;
};
declare const RegisterForm: FC<RegisterFormTypes>;

type AppLandingTextsTypes = ThirdPartyAuthTextsTypes & {
    newUserText?: string;
    createAccount?: string;
};
type AppLandingTypes = {
    texts?: AppLandingTextsTypes;
    viaGoogle?: boolean;
    viaTwitter?: boolean;
    viaGithub?: boolean;
    viaMicrosoft?: boolean;
    viaEmail?: boolean;
    viaPhone?: boolean;
    viaApple?: boolean;
    allowRegister?: boolean;
    size?: "small" | "normal" | "full";
    direction?: DirectionType;
    handleRouteToRegister?: () => void;
    handleGoogle?: () => void;
    handleTwitter?: () => void;
    handleApple?: () => void;
    handleMicrosoft?: () => void;
    handleGithub?: () => void;
    handleEmail?: () => void;
    handlePhone?: () => void;
};
declare const AppLanding: FC<AppLandingTypes>;

type CheckEmailBlocks = {
    handleResend?: () => void;
    texts?: {
        checkEmail: string;
        resendEmail: string;
        pleaseVerify: string;
    };
};
declare const CheckEmail: FC<CheckEmailBlocks>;

type NewPasswordTypes = {
    handleNewPassword: (e: any) => void;
    handleRouteToRegister: () => void;
    isLoading: boolean;
    direction?: DirectionType;
    allowRegister?: boolean;
    showSuccess: boolean;
    texts: NewPasswordTextsTypes;
    /** If true, an error alert is displayed at the top of the form.   */
    showError?: boolean;
    /** Title text of error alert.   */
    errorTitle?: string;
    /** Description text of error alert.   */
    errorText?: string;
};
declare const NewPasswordForm: FC<NewPasswordTypes>;

type ResetPasswordType = {
    handleResetPassword: (e: any) => void;
    handleRouteToRegister: () => void;
    sent: any;
    isLoading: boolean;
    headless?: boolean;
    allowRegister?: boolean;
    direction?: DirectionType;
    texts?: ResetPasswordTextsTypes;
    /** If true, an error alert is displayed at the top of the form.   */
    showError?: boolean;
    /** Title text of error alert.   */
    errorTitle?: string;
    /** Description text of error alert.   */
    errorText?: string;
};
declare const ResetPasswordForm: FC<ResetPasswordType>;

type TConfirmation = {
    texts?: {
        checkYourPhone?: string;
        weSentCode?: string;
        didntGetCode?: string;
        resendCode?: string;
        resendCodeTimer?: string;
        codeRequiredText?: string;
        codeTooShort?: string;
        confirm?: string;
        cancel?: string;
        seconds?: string;
    };
    showError?: any;
    errorTitle?: any;
    errorText?: any;
    phoneNumber?: string;
    confirmLoading?: boolean;
    handleConfirm?: any;
    handleResend?: any;
    codeLength?: number;
};
declare const CodeConfirmation: FC<TConfirmation>;

type ComponentTypes$2 = {
    title?: string;
    question: string;
    description?: string;
    tag?: any;
    options?: RadioOptionsTypes[];
    position?: "bottom-right" | "bottom-left";
    direction?: DirectionType;
    onSubmitForm?: (e: any) => void;
    texts?: {
        pleaseSelectOption: string;
        textTooShort: string;
        submit?: string;
    };
};
declare const UserReferralSource: FC<ComponentTypes$2>;

type ComponentTypes$1 = {
    title?: string;
    question: string;
    banner?: boolean;
    options?: any[];
    position?: "bottom-right" | "bottom-left";
    onOptionClicked?: (option: any) => void;
    texts?: {
        least: string;
        most: string;
    };
};
declare const FeedbackRating: FC<ComponentTypes$1>;

type ComponentTypes = {
    handleSubmit: ({}: {}) => void;
    showSuccess?: boolean;
};
declare const FeedbackEmoji: FC<ComponentTypes>;

type FeedbackFormRequestTypeInputProps = BaseInputType & {
    required?: string;
    noOptions?: string;
};
type FeedbackFormDescriptionInputProps = BaseInputType & {
    required?: string;
    tooShort?: string;
};
type FeedbackFormType = {
    sent?: boolean;
    onSubmit: (e: any) => void;
    loadingSubmission?: boolean;
    requestTypes?: {
        label: string;
        value: any;
    }[];
    selectProps?: any;
    cardless?: boolean;
    texts: {
        requestType: FeedbackFormRequestTypeInputProps;
        description: FeedbackFormDescriptionInputProps;
        submit?: string;
        sentTitle?: string;
        sentSubtitle?: string;
    };
};
declare const FeedbackForm: React__default.FC<FeedbackFormType>;

type TabType = {
    title: string;
    content: string;
    value: string;
};
type LegalTextsType = {
    tabs: TabType[];
    activeTab?: any;
    handleTabChange?: any;
    direction?: any;
    defaultTab?: any;
    scrollAreaClassName?: string;
};
declare const LegalTexts: React__default.FC<LegalTextsType>;

type EmptyStateProps = {
    onActionClick: () => void;
    texts?: {
        youreCaughtUp?: string;
        actionText?: string;
    };
};
declare const EmptyState: FC<EmptyStateProps>;

type TestimonialProps = {
    variant?: "outlined" | "contained" | "neobrutalism";
};
declare const Testimonial: FC<TestimonialProps>;

type LGProps = {
    texts?: {
        title?: string;
        subtitle?: string;
        submit?: string;
        invalidEmail?: string;
    };
    submitHandler: (e: string) => void;
};
declare const LeadGenerator: FC<LGProps>;

type AnnouncementTypes = {
    onActionClick: () => void;
    actionText?: string;
    title?: string;
    subtitle?: string;
};
declare const Announcement: FC<AnnouncementTypes>;

type NotFoundTypes = {
    variant?: "outlined" | "contained" | "neobrutalism";
    texts?: {
        pageNotFound?: string;
        ifLost?: string;
        home?: string;
    };
};
declare const NotFound: FC<NotFoundTypes>;

type NoPermissionProps = {
    texts?: {
        title: string;
        subtitle: string;
    };
};
declare const NoPermission: FC<NoPermissionProps>;

type ContactFormData = {
    name: string;
    email: string;
    message: string;
} & {
    [key: string]: string;
};
type CustomField = {
    label: string;
    type: "text" | "number" | "select";
    name: string;
    placeholder?: string;
    options?: RadioOptionType[];
};
type ContactFormProps = {
    cardless?: boolean;
    formId?: string;
    formAutoComplete?: "on" | "off";
    size?: "sm" | "default";
    onSubmit: (e: ContactFormData) => void;
    customFields?: CustomField[];
    showSuccess?: boolean;
    classNames?: {
        submitButton?: string;
    };
    texts?: {
        submit: string;
        name: TextInputType;
        email: TextInputType;
        message: TextInputType;
        success?: {
            title?: string;
            description?: string;
        };
    };
};
declare const ContactForm: React__default.FC<ContactFormProps>;

type PricingPlansTypes = {
    loadingCards?: boolean;
    plans: PricingCardProps[];
    currencies: RadioOptionType[];
    billingCycles: RadioOptionType[];
    currentCycle: RadioOptionType;
    currentCurrency: RadioOptionType;
    onPlanClicked?: (e: any) => void;
    onCycleChange?: (e: any) => void;
    onCurrencyChange?: (e: any) => void;
    direction?: DirectionType;
    mainContainerProps?: InputHTMLAttributes<HTMLDivElement>;
    cardsContainerProps?: InputHTMLAttributes<HTMLDivElement>;
};
declare const PricingPlans: FC<PricingPlansTypes>;

type ComparingPlansTypes = {
    plans: {
        direction?: DirectionType;
        features: PlanFeature[];
        price?: number;
        texts?: PricingPlanTexts;
        size?: "small" | "medium" | "large";
    }[];
    currencies: RadioOptionType[];
    billingCycles: RadioOptionType[];
    currentCycle: RadioOptionType;
    currentCurrency: RadioOptionType;
    onCycleChange?: (e: any) => void;
    onCurrencyChange?: (e: any) => void;
    onPlanClicked?: (e: any) => void;
    direction?: DirectionType;
    showButtons?: boolean;
    topPosition?: number;
};
declare const ComparingPlans: FC<ComparingPlansTypes>;

type HorizontalPricingTypes = {
    plans: {
        currentPlan?: boolean;
        direction?: DirectionType;
        currency?: string;
        cycleText?: string;
        features?: PlanFeature[];
        price?: number;
        texts?: PricingPlanTexts;
        size?: "small" | "medium" | "large";
    }[];
    currencies: {
        label: string;
        value: string;
    }[];
    billingCycles: {
        label: string;
        value: string;
    }[];
    currentCycle?: RadioOptionType;
    currentCurrency?: RadioOptionType;
    onPlanClicked?: (e: any) => void;
    onCycleChange?: (e: any) => void;
    onCurrencyChange?: (e: any) => void;
    direction?: DirectionType;
};
declare const HorizontalPricing: FC<HorizontalPricingTypes>;

type ImageCardTypes = {
    children: any;
    align?: any;
    bottomElement?: any;
    inCardActions?: any;
    cardImage?: string;
    title?: string;
    subtitle?: string;
    blank?: boolean;
};
declare const ActionCard: FC<ImageCardTypes>;

type AdCardTypes = {
    orientation: OrientationType;
    title: string;
    description: string;
    imageURL: string;
    handleHide?: any;
    handleCantHide?: () => void;
    handleClick?: (e: React__default.MouseEvent) => void;
    canHide: boolean;
    className?: string;
};
declare const AdCard: FC<AdCardTypes>;

declare const PricingCard: FC<PricingCardProps>;

interface ItemCardTypes {
    headerActions?: MenuItemType[];
    header?: any;
    content?: any;
    /** a URL for the image of the card */
    cardImage?: string;
    /** a function that fires when the card is clicked anywhere */
    onCardClick?: (event: React__default.MouseEvent<HTMLDivElement>) => void;
    /** a React node with HawaIconCount children to have counters at the bottom of the card */
    counts?: JSX.Element;
    /** The action buttons on the bottom right of the card */
    actions?: JSX.Element;
    /** The orientation of the card */
    orientation?: OrientationType;
    /** Enabling this blurs the image on hover and shows an action button */
    clickableImage?: boolean;
    /** The function of the action button on the image of the card */
    onImageClick?: () => void;
    /** The text of the action button on the image of the card */
    clickableImageActionText?: string;
    /** The icon of the action button on the image of the card */
    clickableImageActionIcon?: any;
    className?: string;
}
declare const ItemCard: FC<ItemCardTypes>;

interface LandingCardTypes {
    title?: string;
    subtitle?: string;
    icon?: any;
    className?: string;
}
declare const LandingCard: FC<LandingCardTypes>;

type UsageCardTypes = {
    tooltip?: any;
    title: any;
    percent: any;
    currentUsage: any;
};
declare const Usage: FC<UsageCardTypes>;

export { ActionCard, AdCard, Announcement, AppLanding, AuthButtons, CheckEmail, CodeConfirmation, ComparingPlans, ContactForm, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, HorizontalPricing, ItemCard, LandingCard, LeadGenerator, LegalTexts, LoginForm, NewPasswordForm, NoPermission, NotFound, PricingCard, PricingPlans, RegisterForm, ResetPasswordForm, Testimonial, Usage, UserReferralSource };