@clasing/ui 0.1.1 → 0.1.9-beta.1

package/README.md

@@ -3,3 +3,36 @@
 UI library for Clasing react/nextjs projects
 
 ## Initiliazing the project
+
+- Ensure you have pnpm installed.
+- run `pnpm install` and then `pnpm storybook`
+
+## Installation Guide inside a React project
+
+This guide will help you to install ClasingUI in your React project.
+
+### Step 1: Install the package
+
+To install the packages, you need to run the following command: `npm install @clasing/ui`, `yarn add @clasing/ui` or `pnpm add @clasing/ui`
+
+### Step 2: Initial configuration
+
+#### If you are not using TailwindCSS
+
+If you are not using TailwindCSS in your project, you need to add the following line to your `index.tsx`, `layout.tsx` or root file: `import "@clasing/ui/styles"`
+
+#### If you are using TailwindCSS
+
+If you are using TailwindCSS in your project, you need to add the following line to your `tailwind.config.js` file (have in account that you should have the initial config of TailwindCSS):
+
+- At `content` array, add `./node_modules/@clasing/ui/dist/index.umd.js`
+- At `presets` array, add `require('@clasing/ui/tailwind.config.js')`
+- Add the following line to your `index.tsx`, `layout.tsx` or root file: `import "@clasing/ui/styles"`
+
+### Step 3: Using the components
+
+Now you can use the components in your project. You can import the components like this: `import { Button } from "@clasing/ui"`
+
+## Contributing
+
+Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.

package/dist/index.d.ts

@@ -1,13 +1,27 @@
-/// <reference types="react" />
-
 import { ClassProp } from 'class-variance-authority/types';
 import { default as default_2 } from 'react';
+import { Dispatch } from 'react';
 import { ForwardRefExoticComponent } from 'react';
-import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { JSX as JSX_2 } from 'react';
+import { Matcher } from 'react-day-picker';
+import { Placement } from '@floating-ui/react';
+import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
+import { SetStateAction } from 'react';
 import * as TablerIcons from '@tabler/icons-react';
 import { VariantProps } from 'class-variance-authority';
 
+declare interface AddToastProps {
+    title?: ToastProps['title'];
+    message: ToastProps['message'];
+    intent: ToastProps['intent'];
+    position?: PositionProps;
+    canClose?: boolean;
+    duration?: number;
+}
+
 export declare const Avatar: ForwardRefExoticComponent<AvatarProps & RefAttributes<HTMLImageElement>>;
 
 declare interface AvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
@@ -17,59 +31,145 @@ declare interface AvatarProps extends React.ImgHTMLAttributes<HTMLImageElement>
 export declare const Badge: ForwardRefExoticComponent<IBadgeProps & RefAttributes<HTMLSpanElement>>;
 
 declare const badgeStyles: (props?: ({
-    status?: "notStarted" | "notStarted-outline" | "locked" | "locked-outline" | "available" | "available-outline" | "inProgress" | "inProgress-outline" | "completed" | "completed-outline" | "viewed" | "viewed-outline" | null | undefined;
-    intent?: "neutral" | "neutral-outline" | "blue" | "blue-outline" | "mustard" | "mustard-outline" | "green" | "green-outline" | "lime" | "lime-outline" | "fuchsia" | "fuchsia-outline" | "marine" | "marine-outline" | "ice" | "ice-outline" | "gray" | "gray-outline" | "violet" | "violet-outline" | null | undefined;
-    size?: "small" | "medium" | "large" | null | undefined;
+    utility?: "error" | "warning" | "success" | "info" | null | undefined;
+    intent?: "neutral" | "brand" | "brand-subtle" | "brand-bolder" | "blue" | "blue-subtle" | "blue-bolder" | "yellow" | "yellow-subtle" | "yellow-bolder" | "violet-subtle" | "violet" | "violet-bolder" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
     weight?: "bold" | "light" | "regular" | "semibold" | null | undefined;
     rounded?: "rectangle" | "full" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare const Button: ForwardRefExoticComponent<IButtonProps & RefAttributes<HTMLButtonElement>>;
 
+export declare const buttonActiveStyles: (props?: ({
+    intent?: "outline" | "primary-red" | "primary-blue" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    rounded?: "sm" | "full" | null | undefined;
+    weight?: "bold" | "light" | "regular" | "semibold" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 export declare const ButtonIcon: default_2.ForwardRefExoticComponent<IButtonIconProps & default_2.RefAttributes<HTMLButtonElement>>;
 
-declare const buttonIconStyles: (props?: ({
-    intent?: "outline" | "fill" | "ghost" | null | undefined;
-    size?: "small" | "medium" | "large" | null | undefined;
-    rounded?: "full" | "sm" | null | undefined;
+export declare const buttonIconActiveStyles: (props?: ({
+    intent?: "outline" | "primary-red" | "primary-blue" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    rounded?: "sm" | "full" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const buttonIconLoadingStyles: (props?: ({
+    intent?: "outline" | "primary-red" | "primary-blue" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    rounded?: "sm" | "full" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const buttonIconStyles: (props?: ({
+    intent?: "outline" | "primary-red" | "primary-blue" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    rounded?: "sm" | "full" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare const ButtonLink: ForwardRefExoticComponent<IButtonLinkProps & RefAttributes<HTMLButtonElement>>;
 
-declare const buttonStyles: (props?: ({
-    intent?: "outline" | "primary" | "secondary" | "tertiary" | "ghost" | "destructive" | null | undefined;
-    size?: "small" | "medium" | "large" | null | undefined;
+export declare const buttonLinkStyles: (props?: ({
+    intent?: "primary" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     weight?: "bold" | "light" | "regular" | "semibold" | null | undefined;
 } & ClassProp) | undefined) => string;
 
-declare const buttonStyles_2: (props?: ({
-    intent?: "primary" | null | undefined;
-    size?: "small" | "medium" | "large" | null | undefined;
+export declare const buttonLoadingStyles: (props?: ({
+    intent?: "outline" | "primary-red" | "primary-blue" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    rounded?: "sm" | "full" | null | undefined;
+    weight?: "bold" | "light" | "regular" | "semibold" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const buttonStyles: (props?: ({
+    intent?: "outline" | "primary-red" | "primary-blue" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    rounded?: "sm" | "full" | null | undefined;
     weight?: "bold" | "light" | "regular" | "semibold" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const Calendar: React.FC<ICalendarProps>;
+
 export declare const Card: ForwardRefExoticComponent<ICardProps & RefAttributes<HTMLDivElement>>;
 
 declare const cardStyles: (props?: ({
-    intent?: "outline" | "default" | null | undefined;
-    shadow?: "none" | "sm" | "xs" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+    intent?: "default" | "outline" | null | undefined;
+    shadow?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
 } & ClassProp) | undefined) => string;
 
-declare type DropdownOption<T> = {
+export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
+
+declare interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    helperText?: string;
+    error?: string;
+    touched?: boolean;
+}
+
+export declare const Chip: ForwardRefExoticComponent<IChipProps & RefAttributes<HTMLButtonElement>>;
+
+export declare const chipStyles: (props?: ({
+    intent?: "error" | "disabled" | "selected" | "unselected" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    weight?: "bold" | "light" | "regular" | "semibold" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const Datepicker: ForwardRefExoticComponent<IDatepickerProps & RefAttributes<HTMLInputElement>>;
+
+export declare const DateRangePicker: ForwardRefExoticComponent<IDateRangePickerProps & RefAttributes<HTMLInputElement>>;
+
+export declare const DayTimePicker: ({ availableHours, availableTimes, onSelectionChange, locale, intervalMinutes, singleSelection, singleSelectionPerDay, disabledDays, }: DayTimePickerProps) => JSX.Element;
+
+declare interface DayTimePickerProps {
+    availableHours?: {
+        start: string;
+        end: string;
+    };
+    availableTimes?: {
+        [key in WeekDay]?: string[];
+    };
+    onSelectionChange?: (selectedTimes: {
+        [key in WeekDay]?: string[];
+    }) => void;
+    locale?: 'enGB' | 'enUS' | 'es';
+    intervalMinutes?: 30 | 60;
+    singleSelection?: boolean;
+    singleSelectionPerDay?: boolean;
+    disabledDays?: WeekDay[];
+}
+
+export declare const Divider: ForwardRefExoticComponent<IDividerProps & RefAttributes<HTMLSpanElement>>;
+
+declare type DropdownOption<T extends string | number | readonly string[] | undefined> = {
     label: string;
     value: T;
 };
 
-export declare const DropdownSelect: ForwardRefExoticComponent<DropdownSelectProps<any> & RefAttributes<HTMLInputElement>>;
+export declare const DropdownSelect: ForwardRefExoticComponent<DropdownSelectProps<any> & RefAttributes<HTMLDivElement>>;
 
-declare interface DropdownSelectProps<T> extends React.SelectHTMLAttributes<HTMLInputElement> {
+declare interface DropdownSelectProps<T extends string | number | readonly string[] | undefined> extends Omit<React.SelectHTMLAttributes<HTMLDivElement>, 'value' | 'onChange'> {
     label?: string;
     helperText?: string;
+    disabled?: boolean;
     error?: string;
     touched?: boolean;
     iconName?: TablerIconName;
+    placement?: PopoverPlacement;
     placeholder?: string;
+    canSearch?: boolean;
+    searchPlaceholder?: string;
+    canSelectAll?: boolean;
+    selectAllLabel?: string;
     options?: DropdownOption<T>[];
+    value?: T;
+    onChange?: (value: T | null) => void;
+    dropdownWidth?: PopoverWidth;
+    asyncSearch?: boolean;
+    isLoading?: boolean;
+    onSearch?: (query: string) => void;
+    noOptionsMessage?: string;
+    disableSearchWhileLoading?: boolean;
 }
 
 declare interface IBadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeStyles> {
@@ -81,6 +181,7 @@ declare interface IBadgeProps extends React.HTMLAttributes<HTMLSpanElement>, Var
         name: TablerIconName;
         stroke?: number;
     } | TablerIconName;
+    iconOnly?: boolean;
 }
 
 declare interface IButtonIconProps extends Omit<default_2.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>, VariantProps<typeof buttonIconStyles> {
@@ -88,11 +189,13 @@ declare interface IButtonIconProps extends Omit<default_2.ButtonHTMLAttributes<H
         name: TablerIconName;
         stroke?: number;
     } | TablerIconName;
+    iconText?: string;
     isLoading?: boolean;
+    isActive?: boolean;
     notification?: boolean;
 }
 
-declare interface IButtonLinkProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonStyles_2> {
+declare interface IButtonLinkProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonLinkStyles> {
     iconLeft?: {
         name: TablerIconName;
         stroke?: number;
@@ -101,6 +204,8 @@ declare interface IButtonLinkProps extends React.ButtonHTMLAttributes<HTMLButton
         name: TablerIconName;
         stroke?: number;
     } | TablerIconName;
+    iconTextLeft?: string;
+    iconTextRight?: string;
     isLoading?: boolean;
 }
 
@@ -113,82 +218,249 @@ declare interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElem
         name: TablerIconName;
         stroke?: number;
     } | TablerIconName;
+    iconTextLeft?: string;
+    iconTextRight?: string;
     isLoading?: boolean;
+    isActive?: boolean;
+}
+
+declare interface ICalendarProps {
+    locale?: 'enGB' | 'enUS' | 'es';
+    disabledDates?: string | string[] | Date | Date[] | undefined;
+    enabledDates?: string | string[] | Date | Date[] | undefined;
+    dropdownsSelectors?: boolean;
+    hideNavigation?: boolean;
+    showOutsideDays?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    value?: string;
+    onChange?: (value: string | undefined) => void | undefined;
+    className?: string;
 }
 
 declare interface ICardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardStyles> {
 }
 
+declare interface IChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof chipStyles> {
+    iconLeft?: {
+        name: TablerIconName;
+        stroke?: number;
+    } | TablerIconName;
+    iconRight?: {
+        name: TablerIconName;
+        stroke?: number;
+    } | TablerIconName;
+    notification?: boolean;
+}
+
 export declare const IconComponent: ForwardRefExoticComponent<IIconComponentProps & RefAttributes<SVGSVGElement>>;
 
+declare interface IDatepickerProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    helperText?: string;
+    error?: string;
+    touched?: boolean;
+    value?: string;
+    locale?: 'enGB' | 'enUS' | 'es';
+    placement?: PopoverPlacement;
+    placeholder?: string;
+    disabledDates?: string | string[] | Date | Date[] | undefined;
+    enabledDates?: string | string[] | Date | Date[] | undefined;
+    calendarDropdowns?: boolean;
+    hideNavigation?: boolean;
+    showOutsideDays?: boolean;
+    closeOnAction?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
+}
+
+declare interface IDateRangePickerProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    helperText?: string;
+    error?: string;
+    touched?: boolean;
+    startDate: string;
+    endDate: string;
+    calendarDropdowns?: boolean;
+    disabledDates?: Matcher | Matcher[] | undefined;
+    locale?: 'enGB' | 'enUS' | 'es';
+    placement?: PopoverPlacement;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
+}
+
+declare interface IDividerProps extends HTMLAttributes<HTMLSpanElement> {
+    orientation?: 'horizontal' | 'vertical';
+}
+
 declare interface IIconComponentProps {
-    iconName: TablerIconName;
+    iconName?: TablerIconName;
+    iconText?: string;
     stroke?: number;
     size?: number;
     color?: string;
     className?: string;
+    onClick?: () => void;
 }
 
-export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
+declare interface IInteractiveCardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof interactiveCardStyles> {
+    isActive?: boolean;
+    title?: string;
+    text?: string;
+    helperText?: string;
+    disabled?: boolean;
+    utilityBadge?: IBadgeProps['utility'];
+    colorBadge?: IBadgeProps['intent'];
+    badgeText?: string;
+    badgeSize?: 'xs' | 'sm' | 'md' | 'lg';
+    iconName?: TablerIconName;
+    iconText?: string;
+    tooltipText?: string;
+    tooltipTitle?: string;
+    tooltipIconName?: TablerIconName;
+    tooltipPlacement?: Placement;
+}
+
+export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
 
-declare interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+declare interface InputProps extends React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
     label?: string;
     helperText?: string;
     error?: string;
     touched?: boolean;
+    type?: 'text' | 'textarea' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'color';
     iconName?: {
         name: TablerIconName;
         stroke?: number;
     } | TablerIconName;
 }
 
+export declare const InteractiveCard: ForwardRefExoticComponent<IInteractiveCardProps & RefAttributes<HTMLDivElement>>;
+
+declare const interactiveCardStyles: (props?: ({
+    intent?: "default" | "outline" | null | undefined;
+    shadow?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 declare interface IPopoverProps {
     children: default_2.ReactNode;
-    trigger: JSX.Element;
+    trigger: JSX_2.Element;
     open?: boolean;
     placement?: PopoverPlacement;
     closeOnAction?: boolean;
+    close?: boolean;
+    className?: string;
+    onMouseDown?: (e: default_2.MouseEvent) => void;
+    onMouseUp?: (e: default_2.MouseEvent) => void;
+    popoverWidth?: 'as-trigger' | 'auto';
+    disabled?: boolean;
 }
 
 declare interface IProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof progressBarStyles> {
     progress: number;
 }
 
+declare interface ISelectableChipsProps {
+    id?: string;
+    label?: string;
+    options: Option_2[];
+    multiple?: boolean;
+    selectedOptions: Option_2['value'] | Option_2['value'][] | undefined;
+    setSelectedOptions: Dispatch<SetStateAction<Option_2['value'] | Option_2['value'][] | undefined>>;
+    className?: string;
+    disabled?: boolean;
+    helperText?: string;
+    error?: string;
+    touched?: boolean;
+}
+
+declare interface ISkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+
 declare interface ISpinnerProps {
     className?: string;
 }
 
+declare interface ISwitchProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof switchRootStyles> {
+    defaultChecked?: boolean;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+
 declare interface ITextProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof textStyles> {
-    as?: 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    as?: 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label';
     className?: string;
 }
 
-export declare const Modal: ({ className, children, isOpen, setIsOpen, }: ModalProps) => JSX_2.Element;
+declare interface ITooltipProps {
+    children: React.ReactNode;
+    trigger?: React.ReactNode;
+    className?: string;
+    placement?: Placement;
+    iconName?: TablerIconName;
+    arrow?: boolean;
+}
+
+export declare const Modal: ({ className, children, isOpen, setIsOpen, canClose, intent, overlay, closeButtonAriaLabel, closeOnClickOutside, }: ModalProps) => JSX.Element | null;
 
 declare interface ModalProps {
     className?: string;
-    children: React.ReactNode;
+    children: default_2.ReactNode;
     isOpen: boolean;
-    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsOpen?: default_2.Dispatch<default_2.SetStateAction<boolean>>;
+    canClose?: boolean;
+    intent?: 'card' | 'sheet' | 'wizard' | 'fullscreen';
+    overlay?: 'blur' | 'opacity';
+    closeButtonAriaLabel?: string;
+    closeOnClickOutside?: boolean;
+}
+
+declare type Option_2 = {
+    value: string | number | boolean | undefined | null;
+    label: string;
+    notification?: boolean;
+};
+export { Option_2 as Option }
+
+declare interface OutsideClickHandlerProps {
+    ref: React.RefObject<HTMLElement | null>;
+    handler: () => void;
 }
 
-export declare const Popover: ({ children, trigger, open, placement, closeOnAction, }: IPopoverProps) => JSX_2.Element;
+export declare const Popover: default_2.ForwardRefExoticComponent<IPopoverProps & default_2.RefAttributes<HTMLDivElement>>;
 
-declare type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+declare type PopoverPlacement = Placement;
 
-export declare const ProgressBar: ({ progress, className, intent, size, rounded, ...props }: IProgressBarProps) => JSX_2.Element;
+declare type PopoverWidth = 'as-trigger' | 'auto';
+
+declare type PositionProps = 'top-right' | 'top-left' | 'top' | 'bottom-right' | 'bottom-left' | 'bottom';
+
+export declare const ProgressBar: ({ progress, className, intent, size, rounded, ...props }: IProgressBarProps) => JSX.Element;
 
 declare const progressBarStyles: (props?: ({
-    intent?: "blue" | "mustard" | "green" | "lime" | "fuchsia" | "marine" | "ice" | "gray" | "violet" | "primary" | null | undefined;
-    size?: "small" | "medium" | "large" | null | undefined;
-    rounded?: "full" | "sm" | null | undefined;
+    intent?: "brand" | "blue" | "yellow" | "green" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    rounded?: "sm" | "full" | null | undefined;
 } & ClassProp) | undefined) => string;
 
-export declare const Spinner: ({ className }: ISpinnerProps) => JSX_2.Element;
+export declare const SelectableChips: ({ id, label, options, multiple, selectedOptions, setSelectedOptions, className, disabled, helperText, error, touched, }: ISelectableChipsProps) => JSX.Element | null;
+
+export declare const Skeleton: ({ className, ...props }: ISkeletonProps) => JSX.Element;
+
+export declare const Spinner: ({ className }: ISpinnerProps) => JSX.Element;
+
+export declare const Switch: ForwardRefExoticComponent<ISwitchProps & RefAttributes<HTMLButtonElement>>;
+
+declare const switchRootStyles: (props?: ({
+    switchSize?: "sm" | "md" | null | undefined;
+} & ClassProp) | undefined) => string;
 
 declare type TablerIconName = keyof typeof TablerIcons;
 
-declare const Text_2: ({ as, intent, className, weight, ...props }: ITextProps) => JSX_2.Element;
+declare const Text_2: ({ as, intent, className, weight, ...props }: ITextProps) => JSX.Element;
 export { Text_2 as Text }
 
 declare const textStyles: (props?: ({
@@ -196,4 +468,39 @@ declare const textStyles: (props?: ({
     weight?: "bold" | "light" | "regular" | "semibold" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const Toast: default_2.ForwardRefExoticComponent<ToastProps & default_2.RefAttributes<HTMLDivElement>>;
+
+declare type ToastContextType = (props: AddToastProps) => void;
+
+declare interface ToastProps extends default_2.HTMLAttributes<HTMLDivElement>, VariantProps<typeof toastStyles> {
+    title?: string;
+    message: string;
+    canClose?: boolean;
+    onClose?: () => void;
+    position?: PositionProps;
+    duration?: number;
+}
+
+export declare const ToastProvider: default_2.FC<ToastProviderProps>;
+
+declare type ToastProviderProps = {
+    children: ReactNode;
+    position?: PositionProps;
+};
+
+declare const toastStyles: (props?: ({
+    intent?: "error" | "warning" | "success" | "info" | "neutral" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const Tooltip: {
+    ({ children, trigger, className, placement, iconName, arrow: isArrow, }: ITooltipProps): JSX.Element;
+    displayName: string;
+};
+
+export declare const useOutsideClick: ({ ref, handler }: OutsideClickHandlerProps) => void;
+
+export declare const useToast: () => ToastContextType;
+
+declare type WeekDay = 'MONDAY' | 'TUESDAY' | 'WEDNESDAY' | 'THURSDAY' | 'FRIDAY' | 'SATURDAY' | 'SUNDAY';
+
 export { }