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

Modern UI Kit made with Tailwind

import * as React from 'react';
import React__default, { FC, RefObject, ReactNode, ChangeEvent, InputHTMLAttributes } from 'react';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import { P as PositionType, D as DirectionType, S as SeverityType, R as RadiusType, O as OrientationType } from '../commonTypes-C-g8nFFC.js';
export { D as DropdownMenu, f as DropdownMenuCheckboxItem, d as DropdownMenuContent, k as DropdownMenuGroup, e as DropdownMenuItem, h as DropdownMenuLabel, b as DropdownMenuRadio, o as DropdownMenuRadioGroup, g as DropdownMenuRadioItem, a as DropdownMenuRoot, i as DropdownMenuSeparator, j as DropdownMenuShortcut, l as DropdownMenuSub, m as DropdownMenuSubContent, n as DropdownMenuSubTrigger, c as DropdownMenuTrigger, M as MenuItemType, S as SubItem } from '../DropdownMenu-CDnFCzfc.js';
import { a as ChipTypes } from '../Chip-Cw1twk4G.js';
export { b as Chip, C as ChipColors } from '../Chip-Cw1twk4G.js';
import * as AccordionPrimitive from '@radix-ui/react-accordion';
import * as class_variance_authority_types from 'class-variance-authority/types';
import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
import * as SheetPrimitive from '@radix-ui/react-dialog';
import { DialogProps } from '@radix-ui/react-dialog';
import { VariantProps } from 'class-variance-authority';
import { L as LabelProps } from '../Radio-DlPwVCG4.js';
export { b as Label, d as PhoneInput, P as PhoneInputProps, a as Radio, R as RadioOptionsTypes, c as Select, S as SelectOptionProps } from '../Radio-DlPwVCG4.js';
import { RowData, ColumnDef } from '@tanstack/react-table';
export { ColumnDef } from '@tanstack/react-table';
import { Command as Command$1 } from 'cmdk';
import * as TabsPrimitive from '@radix-ui/react-tabs';
import * as PopoverPrimitive from '@radix-ui/react-popover';
import * as SwitchPrimitives from '@radix-ui/react-switch';
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
import * as ProgressPrimitive from '@radix-ui/react-progress';
import * as input_otp from 'input-otp';
import { OTPInputProps } from 'input-otp';
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
import * as SliderPrimitive from '@radix-ui/react-slider';
import { HighlightProps } from 'prism-react-renderer';
import { EmblaOptionsType } from 'embla-carousel';
import { T as ToasterToastProps } from '../Toast-BaXp3G7y.js';
export { e as Toast, i as ToastAction, b as ToastActionElement, h as ToastClose, g as ToastDescription, a as ToastProps, c as ToastProvider, f as ToastTitle, d as ToastViewport } from '../Toast-BaXp3G7y.js';
export { Portal as DropdownMenuPortal } from '@headlessui/react';
import '@radix-ui/react-dropdown-menu';
import '@radix-ui/react-toast';

interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
    clickable?: boolean;
    variant?: "default" | "neoBrutalism";
    asContainer?: boolean;
}
declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
    actions?: React.ReactNode;
} & React.RefAttributes<HTMLDivElement>>;
declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
declare const CardContent: React.ForwardRefExoticComponent<{
    headless?: boolean;
    noPadding?: boolean;
} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
    noPadding?: boolean;
} & React.RefAttributes<HTMLDivElement>>;

type LoadingTypes = {
    /** Specifies the size of the loading component.*/
    size?: "button" | "xs" | "sm" | "normal" | "lg" | "xl";
    /** Determines the design of the loading animation.*/
    design?: "spinner" | "dots-bounce" | "dots-pulse" | "pulse" | "spinner-dots" | "squircle" | "square" | "progress" | "orbit";
    /** Specifies the color of the loading component. By default it will inherit the value of --primary global CSS variable*/
    color?: string;
    classNames?: {
        container?: string;
        track?: string;
        car?: string;
    };
    themeMode?: "dark" | "light";
};
declare const Loading: FC<LoadingTypes>;

type TooltipTypes = {
    /** Controls the open state of the tooltip. */
    open?: any;
    /** Specifies the side where the tooltip will appear. */
    side?: PositionType;
    /** Content to be displayed within the tooltip. */
    content?: any;
    /** Elements to which the tooltip is anchored. */
    children?: any;
    /** Sets the default open state of the tooltip. */
    defaultOpen?: any;
    /** Event handler for open state changes. */
    onOpenChange?: any;
    /** Duration of the delay before the tooltip appears. */
    delayDuration?: any;
    /** Size of the tooltip. */
    size?: "default" | "small" | "large";
    /** Disables the tooltip. */
    disabled?: boolean;
    triggerProps?: TooltipPrimitive.TooltipTriggerProps;
    contentProps?: TooltipPrimitive.TooltipContentProps;
    providerProps?: TooltipPrimitive.TooltipProps;
};
declare const Tooltip: React__default.FunctionComponent<TooltipTypes>;

interface SkeletonProps extends React__default.HTMLAttributes<HTMLDivElement> {
    className?: string;
    animation?: "none" | "pulse" | "shimmer";
    content?: any;
    fade?: "top" | "bottom" | "left" | "right";
}
declare function Skeleton({ className, content, animation, fade, ...props }: SkeletonProps): React__default.JSX.Element;

type AccordionItemProps = {
    trigger: React.ReactNode;
    content: React.ReactNode;
    disabled?: boolean;
    chip?: ChipTypes;
};
type AccordionProps = {
    items: AccordionItemProps[];
    itemClassNames?: string;
    triggerclassNames?: string;
    contentclassNames?: string;
    className?: string;
    design?: "default" | "separated";
    type: "single" | "multiple";
    collapsible?: boolean;
};
declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;

declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
    unstyled?: boolean;
    hideArrow?: boolean;
} & React.RefAttributes<HTMLButtonElement>>;

declare const AccordionRoot: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;

declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
    unstyled?: boolean;
} & React.RefAttributes<HTMLDivElement>>;

type IconProps = React__default.HTMLAttributes<SVGElement>;
declare const Logos: {
    metamask: (props: IconProps) => React__default.JSX.Element;
    nafath: (props: IconProps) => React__default.JSX.Element;
    hawa: (props: IconProps) => React__default.JSX.Element;
    sikka: (props: IconProps) => React__default.JSX.Element;
    mail: (props: IconProps) => React__default.JSX.Element;
    phone: (props: IconProps) => React__default.JSX.Element;
    twitter: (props: IconProps) => React__default.JSX.Element;
    x: (props: IconProps) => React__default.JSX.Element;
    instagram: (props: IconProps) => React__default.JSX.Element;
    telegram: (props: IconProps) => React__default.JSX.Element;
    youtube: (props: IconProps) => React__default.JSX.Element;
    tiktok: (props: IconProps) => React__default.JSX.Element;
    linkedin: (props: IconProps) => React__default.JSX.Element;
    behance: (props: IconProps) => React__default.JSX.Element;
    microsoft: (props: IconProps) => React__default.JSX.Element;
    github: (props: IconProps) => React__default.JSX.Element;
    radix: (props: IconProps) => React__default.JSX.Element;
    aria: (props: IconProps) => React__default.JSX.Element;
    npm: (props: IconProps) => React__default.JSX.Element;
    yarn: (props: IconProps) => React__default.JSX.Element;
    pnpm: (props: IconProps) => React__default.JSX.Element;
    react: (props: IconProps) => React__default.JSX.Element;
    tailwind: (props: IconProps) => React__default.JSX.Element;
    google: (props: IconProps) => React__default.JSX.Element;
    googleplay: (props: IconProps) => React__default.JSX.Element;
    apple: (props: IconProps) => React__default.JSX.Element;
    applestore: (props: IconProps) => React__default.JSX.Element;
    paypal: (props: IconProps) => React__default.JSX.Element;
    spinner: (props: IconProps) => React__default.JSX.Element;
    whatsapp: (props: IconProps) => React__default.JSX.Element;
    visa: (props: IconProps) => React__default.JSX.Element;
    mastercard: (props: IconProps) => React__default.JSX.Element;
};

declare const navigationMenuTriggerStyle: (props?: class_variance_authority_types.ClassProp | undefined) => string;
type StandardNavigationMenuItemProps = {
    icon?: React.ReactNode;
    title: string;
    subtitle?: string;
};
type NavigationMenuItemProps = {
    trigger: any;
    content?: any;
    action?: any;
    path?: string;
};
type NavigationMenuTypes = {
    items: NavigationMenuItemProps[];
    rootClassNames?: string;
    viewportClassNames?: string;
    triggerClassNames?: string;
    actionFirst?: boolean;
    direction?: DirectionType;
};
declare const NavigationMenuRoot: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuProps & React.RefAttributes<HTMLElement>, "ref"> & {
    viewportClassNames?: string;
} & React.RefAttributes<HTMLElement>>;
declare const NavigationMenuList: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
declare const NavigationMenuTrigger: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
declare const NavigationMenuContent: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const StandardNavigationMenuItem: React.FC<StandardNavigationMenuItemProps & React.ComponentProps<typeof NavigationMenuPrimitive.Link>>;
declare const NavigationMenuViewport: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const NavigationMenuIndicator: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const NavigationMenu: React.FC<NavigationMenuTypes>;
declare const NavigationMenuItem: React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>;
declare const NavigationMenuLink: React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;

declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const sheetVariants: (props?: ({
    side?: "top" | "bottom" | "left" | "right" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
    hideCloseButton?: boolean;
    persist?: boolean;
}
declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
declare const SheetHeader: {
    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
    displayName: string;
};
declare const SheetFooter: {
    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
    displayName: string;
};
declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;

declare const Dialog: React.FC<SheetPrimitive.DialogProps>;
declare const DialogTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
declare const DialogPortal: {
    ({ ...props }: SheetPrimitive.DialogPortalProps): React.JSX.Element;
    displayName: string | undefined;
};
declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const DialogContent: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
    persist?: boolean;
    hideCloseButton?: boolean;
    container?: HTMLElement;
    overlayProps?: React.ComponentPropsWithoutRef<typeof DialogOverlay>;
    classNames?: {
        content?: string;
        overlay?: string;
        closeButton?: string;
    };
    ids?: {
        overlay?: string;
        closeButton?: string;
        closeIcon?: string;
    };
} & React.RefAttributes<HTMLDivElement>>;
declare const DialogCarouselContent: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
    hideCloseButton?: boolean;
    hidePrevButton?: boolean;
    persist?: boolean;
    onPrev?: () => void;
} & React.RefAttributes<HTMLDivElement>>;
declare const DialogHeader: {
    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
    displayName: string;
};
declare const DialogTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
declare const DialogDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
declare const DialogFooter: {
    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
    displayName: string;
};
interface DialogCarouselProps {
    children: React.ReactNode;
    stepsApi?: any;
    stepsRef?: any;
    direction?: DirectionType;
}
declare const DialogCarousel: React.FC<DialogCarouselProps>;
interface DialogStepsProps {
    currentStep: string;
    visibleStepRef: React.RefObject<HTMLDivElement>;
    children: React.ReactNode;
}
declare const DialogSteps: React.FC<DialogStepsProps>;
interface DialogStepProps {
    id: string;
    children: React.ReactNode;
    className?: string;
    stepRef?: any;
}
declare const DialogStep: React.FC<DialogStepProps>;
interface DialogBodyProps {
    children: React.ReactNode;
    className?: string;
}
declare const DialogBody: React.FC<DialogBodyProps>;

type AlertTypes = {
    severity?: SeverityType | "hyper" | "oceanic";
    /** The title of the alert placed above the text of the alert. Can be used alone */
    title?: React__default.ReactNode;
    /** The text of the alert placed below the title of the alert. Can be used alone */
    text: React__default.ReactNode;
    /** The duration for the alert to stay on the screen */
    duration?: number;
    direction?: DirectionType;
    actions?: [
        {
            label: string;
            onClick: any;
            variant: "outline" | "link" | "default" | "destructive" | "secondary" | "ghost";
        }
    ];
    /** Removes the close button */
    persistent?: boolean;
    icon?: any;
    className?: string;
    onAlertClosed?: () => void;
    noDestroy?: boolean;
};
declare const Alert: React__default.FunctionComponent<AlertTypes>;

interface AvatarProps {
    isUploadable?: boolean;
    src?: string;
    alt?: string;
    size?: "2xs" | "xs" | "sm" | "default" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl";
    radius?: RadiusType;
    className?: string;
    icon?: React__default.ReactNode;
    hideIcon?: boolean;
}
declare const Avatar: React__default.FC<AvatarProps>;

declare const buttonVariants: (props?: ({
    variant?: "link" | "default" | "combobox" | "light" | "destructive" | "outline" | "secondary" | "ghost" | "neoBrutalism" | null | undefined;
    size?: "default" | "icon" | "xs" | "sm" | "lg" | "xl" | "heightless" | "smallIcon" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
    asChild?: boolean;
    centered?: boolean;
    isLoading?: boolean;
    label?: string;
    labelProps?: LabelProps;
    /** The small red text under the input field to show validation.   */
    helperText?: any;
    showHelperText?: boolean;
    /**
     * If true, the button will include a label and helper text. This is useful for forms where the button is part of the form.
     */
    asInput?: boolean;
}
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

type DataTableProps<DataProps = {}> = {
    direction?: DirectionType;
    columns: ColumnDef<DataProps>[];
    enableSearch?: boolean;
    enableHideColumns?: boolean;
    enableGoTo?: boolean;
    enableSelection?: boolean;
    enableFiltering?: boolean;
    resetSelection?: boolean;
    filters?: {
        accessorKey: string;
        value: string;
        label: string;
    }[];
    hideHeader?: boolean;
    data: DataProps[];
    itemsPerPage?: any[];
    showCount?: boolean;
    showSelectionCount?: boolean;
    paginationPosition?: "top" | "bottom";
    condensed?: boolean;
    isLoading?: boolean;
    defaultSort?: string;
    translateFn?: any;
    bulkActions?: any[];
    texts?: {
        columns?: string;
        searchPlaceholder?: string;
        item?: string;
        noData?: any;
        page?: string;
        filter?: string;
        of?: string;
        total?: string;
        goTo?: string;
        selectedRows?: string;
        bulkAction?: string;
    };
};
declare module "@tanstack/table-core" {
    interface ColumnMeta<TData extends RowData, TValue> {
        padding?: "condensed" | "default" | "noPadding";
        sortable?: boolean;
        hidden?: boolean;
        i18nKey?: string;
    }
}
declare const DataTable: <DataProps extends {}>({ columns, data, paginationPosition, translateFn, resetSelection, enableHideColumns, enableSelection, enableFiltering, enableSearch, enableGoTo, ...props }: DataTableProps<DataProps>) => React.JSX.Element;

type BackToTopTypes = {
    /** Horizontal padding relative to the attached corner */
    paddingX?: number;
    /** Vertical padding relative to the attached corner */
    paddingY?: number;
    /** Increase to the threshold of the scroll value that has to be passed for the button to appear */
    paddingThreshold?: number;
    corner?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
    anchor: RefObject<HTMLInputElement>;
};
declare const BackToTop: FC<BackToTopTypes>;

interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
    clickable?: boolean;
    condensed?: boolean;
}
interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
    condensed?: boolean;
    enablePadding?: boolean;
    padding?: "condensed" | "default" | "noPadding";
}
declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;

interface CommandProps extends React.ComponentPropsWithoutRef<typeof Command$1> {
}
interface CommandDialogProps extends DialogProps {
}
interface CommandInputProps extends React.ComponentPropsWithoutRef<typeof Command$1.Input> {
}
interface CommandListProps extends React.ComponentPropsWithoutRef<typeof Command$1.List> {
}
interface CommandEmptyProps extends React.ComponentPropsWithoutRef<typeof Command$1.Empty> {
}
interface CommandGroupProps extends React.ComponentPropsWithoutRef<typeof Command$1.Group> {
}
interface CommandSeparatorProps extends React.ComponentPropsWithoutRef<typeof Command$1.Separator> {
}
interface CommandItemProps extends React.ComponentPropsWithoutRef<typeof Command$1.Item> {
}
interface CommandShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {
}
declare const Command: React.ForwardRefExoticComponent<CommandProps & React.RefAttributes<HTMLDivElement>>;
declare const CommandDialog: ({ children, ...props }: CommandDialogProps) => React.JSX.Element;
declare const CommandInput: React.ForwardRefExoticComponent<CommandInputProps & React.RefAttributes<HTMLInputElement>>;
declare const CommandList: React.ForwardRefExoticComponent<CommandListProps & React.RefAttributes<HTMLDivElement>>;
declare const CommandEmpty: React.ForwardRefExoticComponent<CommandEmptyProps & React.RefAttributes<HTMLDivElement>>;
declare const CommandGroup: React.ForwardRefExoticComponent<CommandGroupProps & React.RefAttributes<HTMLDivElement>>;
declare const CommandSeparator: React.ForwardRefExoticComponent<CommandSeparatorProps & React.RefAttributes<HTMLDivElement>>;
declare const CommandItem: React.ForwardRefExoticComponent<CommandItemProps & React.RefAttributes<HTMLDivElement>>;
declare const CommandShortcut: {
    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement> & CommandShortcutProps): React.JSX.Element;
    displayName: string;
};
type FullCommandItem = {
    type: "group" | "separator";
    heading?: string;
    items?: {
        icon: React.ElementType;
        label: string | React.ReactNode;
        action: () => void;
        shortcut?: string;
    }[];
};
type FullCommandProps = {
    items: FullCommandItem[];
    direction?: DirectionType;
    onActionClick?: () => void;
    texts?: {
        searchPlaceholder?: string;
        emptyText?: string;
    };
};
declare const FullCommand: ({ items, direction, texts, onActionClick, }: FullCommandProps) => React.JSX.Element;
type AppCommandProps = {
    commandProps: Omit<FullCommandProps, "onActionClick">;
    dialogProps: DialogProps;
    onActionClick?: () => void;
};
declare const AppCommand: ({ commandProps, dialogProps, onActionClick, }: AppCommandProps) => React.JSX.Element;

type ComboboxTypes<T> = {
    labelKey?: keyof T | any;
    valueKey?: keyof T | any;
    data: T[];
    width?: string;
    texts?: {
        noItems?: string;
        placeholder?: string;
        searchPlaceholder?: string;
    };
    isLoading?: boolean;
    helperText?: any;
    popoverClassName?: string;
    /** This the same value as the one with the key valueKey */
    defaultValue?: string;
    preview?: boolean;
    hideInput?: boolean;
    direction?: DirectionType;
    inputProps?: CommandInputProps;
    id?: string;
    /** The label of the input field   */
    label?: any;
    labelProps?: LabelProps;
    /** If true, it will show a red asterisk next to the label*/
    isRequired?: boolean;
    onChange?: (e: any) => void;
    renderOption?: (item: T) => React.ReactNode;
    renderSelected?: (item: T) => React.ReactNode;
};
declare const Combobox: React.ForwardRefExoticComponent<ComboboxTypes<any> & React.RefAttributes<HTMLDivElement>>;

interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
    helperText?: any;
    isLoading?: boolean;
    /** The label of the input field   */
    label?: any;
    labelProps?: LabelProps;
    forceHideHelperText?: boolean;
    textareaProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
    showCount?: boolean;
    countPosition?: "top" | "bottom";
    classNames?: {
        textarea?: string;
    };
}
declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

type FileDropzoneTypes = {
    /**  The text label above the component. Consistant with the other form input fields   */
    label?: string;
    files: [File];
    setFiles: any;
    setDeletedFiles: any;
    maxFiles: number;
    accept: any;
    onAcceptedFiles: any;
    showPreview: any;
    onDeleteFile: any;
    onClearFiles: any;
    maxSize: number;
    errorMessages: string;
    disclaimer?: boolean;
    termsLink?: string;
    privacyLink?: string;
    /** The translation object, use this to replace the default text with any translated text you want.*/
    texts: {
        errorUploading: any;
        clickHereToUpload: any;
        maxFileSize: any;
        tooManyFiles: any;
        fileTooLarge: any;
        acceptedFileTypes: any;
        invalidFileType: any;
        terms?: string;
        privacyPolicy?: string;
        disclaimer?: string;
        and?: string;
    };
};
declare const FileDropzone: React__default.FunctionComponent<FileDropzoneTypes>;

type SortButtonProps = {
    onSort: () => void;
    label: string;
    condensed?: boolean;
};
declare const SortButton: React__default.FC<SortButtonProps>;

type TabsVariants = "default" | "underlined" | "underlined_tabs";
declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
    variant?: TabsVariants;
    scrollable?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
    classNames?: {
        scrollArea?: string;
    };
} & React.RefAttributes<HTMLDivElement>>;
declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
    chipProps?: ChipTypes;
    className?: string;
    showPopover?: boolean;
    popoverContent?: React.ReactNode;
    withPopover?: boolean;
    onPopoverClick?: () => void;
} & React.RefAttributes<HTMLButtonElement>>;
declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
    isLoading?: boolean;
    isLoadingError?: boolean;
    containerClassName?: string;
    margin?: "none" | "normal" | "large";
    width?: "small" | "normal" | "full" | "auto";
    /** The label of the input field   */
    label?: any;
    labelProps?: LabelProps;
    hideSeparator?: boolean;
    /** The small red text under the input field to show validation.   */
    helperText?: any;
    prefixText?: any;
    forceHideHelperText?: boolean;
    inputProps?: React__default.InputHTMLAttributes<HTMLInputElement>;
    /** The icon inside the input field */
    icon?: any;
    /** Boolean to enable/disable editing the input field and using it as a text field   */
    preview?: boolean;
    iconInside?: React__default.ReactNode;
    endIcon?: React__default.ReactNode;
    endIconProps?: {
        className?: string;
    };
    startIcon?: React__default.ReactNode;
    placeholder?: React__default.ReactNode;
    /** Show the count of characters left in the input field. Works along with maxLength prop.   */
    showCount?: boolean;
    countPosition?: "top" | "bottom" | "center";
    popup?: boolean;
    popupContent?: React__default.ReactNode;
    outsidePrefix?: any;
    loadingErrorMesssage?: string;
};
declare const Input: React__default.ForwardRefExoticComponent<React__default.InputHTMLAttributes<HTMLInputElement> & {
    isLoading?: boolean;
    isLoadingError?: boolean;
    containerClassName?: string;
    margin?: "none" | "normal" | "large";
    width?: "small" | "normal" | "full" | "auto";
    /** The label of the input field   */
    label?: any;
    labelProps?: LabelProps;
    hideSeparator?: boolean;
    /** The small red text under the input field to show validation.   */
    helperText?: any;
    prefixText?: any;
    forceHideHelperText?: boolean;
    inputProps?: React__default.InputHTMLAttributes<HTMLInputElement>;
    /** The icon inside the input field */
    icon?: any;
    /** Boolean to enable/disable editing the input field and using it as a text field   */
    preview?: boolean;
    iconInside?: React__default.ReactNode;
    endIcon?: React__default.ReactNode;
    endIconProps?: {
        className?: string;
    };
    startIcon?: React__default.ReactNode;
    placeholder?: React__default.ReactNode;
    /** Show the count of characters left in the input field. Works along with maxLength prop.   */
    showCount?: boolean;
    countPosition?: "top" | "bottom" | "center";
    popup?: boolean;
    popupContent?: React__default.ReactNode;
    outsidePrefix?: any;
    loadingErrorMesssage?: string;
} & React__default.RefAttributes<HTMLInputElement>>;

declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
    container?: HTMLElement | null;
} & React.RefAttributes<HTMLDivElement>>;
interface PopoverProps {
    side?: PositionType;
    align?: "start" | "center" | "end";
    trigger?: React.ReactNode;
    children: React.ReactNode;
    className?: string;
    sideOffset?: number;
    disableTrigger?: any;
    width?: "trigger" | "default";
    open?: boolean;
    contentProps?: PopoverPrimitive.PopoverContentProps;
    triggerProps?: PopoverPrimitive.PopoverTriggerProps;
}
type HawaPopoverTypes = PopoverProps & React.ComponentProps<typeof PopoverPrimitive.Root>;
declare const Popover: React.FC<HawaPopoverTypes>;
declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
declare const PopoverPortal: React.FC<PopoverPrimitive.PopoverPortalProps>;
declare const PopoverRoot: React.FC<PopoverPrimitive.PopoverProps>;

interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
    size?: "default" | "sm" | "lg";
    label?: string;
    roundedness?: RadiusType;
}
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;

type CheckBoxTypes = {
    id: string;
    label?: React.ReactNode;
    sublabel?: React.ReactNode;
    helperText?: any;
    size?: "xs" | "sm" | "default" | "md" | "lg" | "xl";
    radius?: RadiusType;
};
type CheckboxProps = CheckBoxTypes & React.ComponentProps<typeof CheckboxElement>;
declare const Checkbox: React.FC<CheckboxProps>;
declare const CheckboxElement: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
    size?: "xs" | "sm" | "default" | "md" | "lg" | "xl";
    radius?: RadiusType;
} & React.RefAttributes<HTMLButtonElement>>;

declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
    label?: string;
    labelProps?: LabelProps;
} & React.RefAttributes<HTMLDivElement>>;

type BreadcrumbItemProps = {
    label: string;
    href: string;
};
interface BCTypes {
    /** The array of crumbs, each one with a label and a href link */
    breadcrumbLinks: BreadcrumbItemProps[];
    /** The separator between each crumb, can be character or React Node. The default is ">" */
    separator?: string | ReactNode;
    size?: "normal" | "small" | "xs";
}
declare const Breadcrumb: FC<BCTypes>;

type StoreButtonsTypes = {
    store: "apple" | "google";
};
declare const AppStores: FC<StoreButtonsTypes>;

type BadgeTypes = {
    position: "right" | "left";
    anchor: RefObject<HTMLElement>;
    size?: "small" | "default" | "large";
    text?: string | number;
    className?: string;
};
declare const Badge: FC<BadgeTypes>;
declare const BadgedComponent: ({ children, className, hideBadge, position, size, text, }: any) => React__default.JSX.Element;

declare const PinInputRoot: React.ForwardRefExoticComponent<(Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "containerClassName" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "noScriptCSSFallback"> & {
    value?: string;
    onChange?: (newValue: string) => unknown;
    maxLength: number;
    textAlign?: "left" | "center" | "right";
    onComplete?: (...args: any[]) => unknown;
    pushPasswordManagerStrategy?: "increase-width" | "none";
    containerClassName?: string;
    noScriptCSSFallback?: string | null;
} & {
    render: (props: input_otp.RenderProps) => React.ReactNode;
    children?: never;
} & React.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "containerClassName" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "noScriptCSSFallback"> & {
    value?: string;
    onChange?: (newValue: string) => unknown;
    maxLength: number;
    textAlign?: "left" | "center" | "right";
    onComplete?: (...args: any[]) => unknown;
    pushPasswordManagerStrategy?: "increase-width" | "none";
    containerClassName?: string;
    noScriptCSSFallback?: string | null;
} & {
    render?: never;
    children: React.ReactNode;
} & React.RefAttributes<HTMLInputElement>, "ref">) & React.RefAttributes<HTMLInputElement>>;
declare const PinInputGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const PinInputSlot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    index: number;
} & React.RefAttributes<HTMLDivElement>>;
declare const PinInputSeperator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
type PinInputProps = Omit<OTPInputProps, "render"> & {
    separatorPosition?: number;
    helperText?: any;
};
declare const PinInput: React.FC<PinInputProps>;

declare const StopPropagationWrapper: (props: any) => React__default.JSX.Element;

declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
    orientation?: OrientationType;
} & React.RefAttributes<HTMLDivElement>>;
declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

type ColorPickerTypes = {
    label?: string;
    id?: string;
    isLoading?: boolean;
    labelProps?: LabelProps;
    helperText?: any;
    forceHideHelperText?: boolean;
    /** Boolean to enable/disable editing the input field and using it as a text field   */
    preview?: boolean;
    /** The hex code for the color */
    color?: any;
    /** Fires everytime the color changes */
    handleChange?: (e: ChangeEvent<HTMLInputElement>) => void;
    colorPickerClassNames?: string;
    colorTextClassNames?: string;
    colorPickerProps?: InputHTMLAttributes<HTMLInputElement>;
    textInputProps?: InputHTMLAttributes<HTMLInputElement>;
    containerProps?: InputHTMLAttributes<HTMLDivElement>;
};
declare const ColorPicker: FC<ColorPickerTypes>;

type Size = "xs" | "sm" | "md" | "lg" | "xl";
interface ProgressCircleProps extends React__default.HTMLAttributes<HTMLDivElement> {
    value: number;
    size?: Size;
    color?: any;
    showAnimation?: boolean;
    tooltip?: string;
    radius?: number;
    strokeWidth?: number;
    children?: React__default.ReactNode;
}
declare const ProgressCircle: React__default.ForwardRefExoticComponent<ProgressCircleProps & React__default.RefAttributes<HTMLDivElement>>;

type PaginationProps = {
    direction?: DirectionType;
    totalPages: number;
    currentPage?: number;
};
declare const Pagination: React__default.FC<PaginationProps>;

type PasswordInputIndicatorProps = {
    strength?: any;
};
declare const PasswordStrengthIndicator: React__default.FC<PasswordInputIndicatorProps>;
type PasswordInputType = {
    onChange?: (e: React__default.ChangeEvent<HTMLInputElement>) => void;
    hidePopover?: boolean;
};
declare const PasswordInput: React__default.FC<PasswordInputType>;

declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;

type SimpleTableProps<DataProps = {}> = {
    direction?: DirectionType;
    columns: ColumnDef<DataProps>[];
    headerless?: boolean;
    data: DataProps[];
    condensed?: boolean;
    isLoading?: boolean;
    defaultSort?: string;
    classNames?: string;
    extra?: React.ReactNode;
    texts?: {
        searchPlaceholder?: string;
        noData?: any;
        page?: string;
        filter?: string;
        of?: string;
        total?: string;
    };
};
declare module "@tanstack/table-core" {
    interface ColumnMeta<TData extends RowData, TValue> {
        padding?: "condensed" | "default" | "noPadding";
        sortable?: boolean;
        hidden?: boolean;
    }
}
declare const SimpleTable: <DataProps extends {}>({ columns, data, classNames, headerless, ...props }: SimpleTableProps<DataProps>) => React.JSX.Element;

type SeparatorProps = {
    className?: string;
    orientation?: OrientationType;
};
declare const Separator: React.FC<SeparatorProps>;

type ScrollIndicatorProps = {
    anchor: RefObject<HTMLInputElement>;
    inContainer?: boolean;
};
declare const ScrollIndicator: FC<ScrollIndicatorProps>;

type CodeBlockTypesBase = {
    /** Specifies the programming language for syntax highlighting.*/
    language?: HighlightProps["language"];
    /** Defines the width of the code block.*/
    width?: "full" | "md" | "sm";
    /** Name of the file being displayed.   */
    fileName?: string;
    /** line numbers for code block   */
    lineNumbers?: boolean;
    /** Wrap text in code block */
    wrapText?: boolean;
    /** Custom class names for the code block */
    classNames?: {
        root?: string;
        tabs?: string;
        tab?: string;
        code?: string;
        fileName?: string;
        codeBlockContainer?: string;
    };
};
/**
 * Type for when tabs are provided. In this case, the code property is optional.
 * Do not provide the "code" prop if "tabs" exists.
 */
type CodeBlockTypesWithTabs = CodeBlockTypesBase & {
    /** Array of tabs each containing a title and code content.*/
    tabs: {
        title: string;
        code: string;
    }[];
    /** Code content to be displayed within the code block.*/
    code?: string;
};
/**
 * Type for when tabs are not provided. In this case, the code property is required.
 * You must provide the "code" prop if "tabs" does not exist.
 */
type CodeBlockTypesWithoutTabs = CodeBlockTypesBase & {
    /** Array of tabs each containing a title and code content.*/
    tabs?: never;
    /** Code content to be displayed within the code block.*/
    code: string;
};
/**
 * Either provide "tabs" prop (in which case "code" is optional),
 * or do not provide "tabs" (in which case "code" is required).
 */
type CodeBlockTypes = CodeBlockTypesWithTabs | CodeBlockTypesWithoutTabs;
declare const CodeBlock: FC<CodeBlockTypes>;

type CarouselProps = {
    items: React__default.ReactNode[];
    showArrows?: boolean;
    autoplay?: boolean;
    autoplayInterval?: number;
    options?: EmblaOptionsType;
    direction?: DirectionType;
};
declare const Carousel: React__default.FC<CarouselProps>;

type IconCountTypes = {
    /** The icon of the counter */
    icon: JSX.Element;
    /** The text next to the icon */
    count?: string;
};
declare const Count: FC<IconCountTypes>;

type ToasterProps = {
    direction?: DirectionType;
    toasts?: ToasterToastProps[];
};
declare function Toaster(props: ToasterProps): React__default.JSX.Element;

type DestroyableCard = {
    position?: "bottom-right" | "bottom-left";
    direction?: DirectionType;
    fixed?: boolean;
    children?: any;
};
declare const DestroyableCard: FC<DestroyableCard>;

type TypographyTypes = {
    /** Function to handle language change.   */
    handleLanguage?: (e: any) => void;
    /** Current selected language.   */
    currentLanguage?: string;
    /** Function to handle theme color mode change.   */
    handleColorMode?: (e: any) => void;
    /** Current selected theme color mode.   */
    currentColorMode?: "light" | "dark";
    orientation?: OrientationType;
    width?: "default" | "full";
};
declare const InterfaceSettings: FC<TypographyTypes>;

declare const FileUploader: ({ handleFile, className }: any) => React__default.JSX.Element;

type PhoneMockupProps = {
    children?: any;
    upperOverlayGradiant?: boolean;
    lowerOverlayGradiant?: boolean;
    phone?: "iphone" | "android" | "default";
    hideButtons?: boolean;
};
declare const PhoneMockup: React__default.FC<PhoneMockupProps>;

export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, AccordionRoot, AccordionTrigger, Alert, AppCommand, AppStores, Avatar, BackToTop, Badge, BadgedComponent, Breadcrumb, type BreadcrumbItemProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, Checkbox, ChipTypes, CodeBlock, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, type CommandInputProps, CommandItem, CommandList, CommandSeparator, CommandShortcut, Count, DataTable, DestroyableCard, Dialog, DialogBody, DialogCarousel, DialogCarouselContent, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogStep, DialogSteps, DialogTitle, DialogTrigger, FileDropzone, FileUploader, FullCommand, type FullCommandItem, Input, InterfaceSettings, LabelProps, Loading, Logos, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PasswordInput, PasswordStrengthIndicator, PhoneMockup, PinInput, PinInputGroup, PinInputRoot, PinInputSeperator, PinInputSlot, Popover, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, Progress, ProgressCircle, ScrollArea, ScrollBar, ScrollIndicator, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SimpleTable, Skeleton, Slider, SortButton, StandardNavigationMenuItem, StopPropagationWrapper, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TextFieldTypes, Textarea, type TextareaProps, Toaster, ToasterToastProps, Tooltip, buttonVariants, navigationMenuTriggerStyle };