@itgold/grandbazar-ui-kit/dist/index.d.ts

Grandbazar.io UI component library: React, Typescript, Tailwind, Rollup, Storybook, Jest.

import { ReactNode, ReactElement, ChangeEventHandler } from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';

type TAccordionItemProps = {
    children: ReactNode;
    title: ReactNode;
    details?: string;
    opened?: boolean;
    headerContent?: ReactNode;
};
declare function AccordionItem({ children, title, details, headerContent, opened, }: TAccordionItemProps): ReactElement;

type TAccordionProps = {
    children: React.ReactElement[];
    className?: string;
};
declare function Accordion({ children, className }: TAccordionProps): React.ReactElement;
declare namespace Accordion {
    var Item: typeof AccordionItem;
}

type TButtonStyleProps = {
    shape: 'circle' | 'square' | 'default';
    size: TButtonSizes;
    color: TButtonColor;
    className?: string;
};

type TButtonProps = React.ComponentPropsWithRef<'button'> & TButtonStyleProps & {
    disabled?: boolean;
    onClick?: React.MouseEventHandler<HTMLButtonElement>;
    children: React.ReactNode;
    innerRef?: React.Ref<HTMLButtonElement>;
};

declare function Button({ onClick, children, disabled, color, size, shape, className, innerRef, ...props }: TButtonProps): React.ReactElement;

type TButtonGroupItemProps = Omit<TButtonProps, 'shape' | 'size' | 'color'> & {
    shape?: 'square' | 'default';
};
declare function ButtonGroupItem({ onClick, disabled, children, className, shape, ...props }: TButtonGroupItemProps): React.ReactElement;

type TButtonGroupProps = {
    children: React.ReactNode;
    className?: string;
};
declare function ButtonGroup({ children, className }: TButtonGroupProps): React.ReactElement;
declare namespace ButtonGroup {
    var Item: typeof ButtonGroupItem;
}

type TButtonLinkProps = React.ComponentPropsWithRef<'a'> & TButtonStyleProps & {
    children: React.ReactNode;
};

declare function ButtonLink({ children, color, size, className, href, shape, ...props }: TButtonLinkProps): React.ReactElement;

declare const ButtonSizes: {
    readonly sm: "height: 24px; padding-x: 8px";
    readonly md: "height: 36px; padding-x: 16px";
    readonly lg: "height: 52px; padding-x: 24px";
};
type TButtonSizes = keyof typeof ButtonSizes;

type TButtonColor = 'black' | 'yellow' | 'blackOutlined' | 'whiteOutlined' | 'gray' | 'darkThemeGray' | 'transparent' | 'darkThemeTransparent' | 'red';

type TCalendarComponentProps = {
    locale: 'en' | 'ru';
    calendarDate?: Date | string;
    setISOString: (dateTime: string) => void;
    allowPastDates?: boolean;
};
declare function Calendar({ setISOString, calendarDate, locale, allowPastDates, }: TCalendarComponentProps): React.ReactElement;

type TCardAttributeContentProps = {
    children?: React.ReactNode;
};
declare function CardAttributeContent({ children }: TCardAttributeContentProps): React.ReactElement;

type TCardContentProps = {
    children: ReactNode;
    className?: string;
};
declare function CardContent({ children, className }: TCardContentProps): React.ReactElement;

type TCardDescriptionProps = {
    description: string;
    className?: string;
};
declare function CardDescription({ description, className }: TCardDescriptionProps): React.ReactElement;

type TCardFooterProps$1 = {
    children: ReactElement | ReactElement[];
    className?: string;
};
declare function CardFooter({ children, className }: TCardFooterProps$1): React.ReactElement;

type TCardFooterWithLikeProps = {
    name: string;
    offer: React.ReactNode;
    like?: React.ReactNode;
};
declare function CardFooterWithLike({ name, offer, like }: TCardFooterWithLikeProps): React.ReactElement;

type TDropdownButtonProps = {
    dotsSize?: 'sm' | 'lg';
};
declare function DropdownButton({ dotsSize }: TDropdownButtonProps): ReactElement;

type TCssIconProps = {
    className?: string;
    theme?: 'light' | 'dark';
};

type TDropdownOption = {
    label: string;
    textColor?: string;
    callback?: () => void;
    options?: TDropdownOption[];
    icon?: (props: TCssIconProps) => React.ReactElement;
};

type TDropdownItemProps = {
    option: TDropdownOption;
    closeOnClick?: boolean;
};
declare function DropdownItem({ option, closeOnClick }: TDropdownItemProps): ReactElement;

type TDropdownProps = {
    theme?: 'dark' | 'light';
    menuPosition: 'top' | 'bottom';
    toggler: ReactNode;
    children: ReactNode;
    className?: string;
    classNameOptions?: string;
    parentSizes?: DOMRect;
};
declare function Dropdown({ theme, toggler, children, menuPosition: position, className, classNameOptions, parentSizes, }: TDropdownProps): ReactElement;
declare namespace Dropdown {
    var Button: typeof DropdownButton;
    var Item: typeof DropdownItem;
}

type TDropdownTogglerProps = {
    children: React.ReactNode;
    handleToggle: (e: React.MouseEvent) => void;
};

type TCardFooterWithRangeProps = {
    rangeValue?: number;
    name: string;
    details: string;
    isLocked?: boolean;
    maxRangeValue: number;
    showLockProp?: boolean;
    maxPercentValue?: number;
    rangeAction: (value: number) => void;
    setTitleAction?: (value: string) => void;
    changeModeAction?: (value: boolean) => void;
    changeLockModeAction?: (value: boolean) => void;
    changePercentModeAction?: (value: boolean) => void;
    changeCardTitleAction?: (value: string) => void;
    options: TDropdownOption[];
    isPercentMode?: boolean;
};
declare function CardFooterWithRange({ name, details, options, isLocked, rangeValue, rangeAction, showLockProp, isPercentMode, maxRangeValue, setTitleAction, maxPercentValue, changeModeAction, changeLockModeAction, changeCardTitleAction, changePercentModeAction, }: TCardFooterWithRangeProps): React.ReactElement;

type TCardLikeProps = {
    likeAction: () => void;
    isLiked: boolean;
    likesCount: number;
};
declare function CardLike({ likeAction, isLiked, likesCount }: TCardLikeProps): react_jsx_runtime.JSX.Element;

type TCardTitleProps = {
    title: string;
    className?: string;
};
declare function CardTitle({ title, className }: TCardTitleProps): React.ReactElement;

type TCardProps = {
    children: React.ReactNode;
    theme: 'light' | 'dark';
    className?: string;
    isLink?: boolean;
};
declare function Card({ children, theme, className, isLink }: TCardProps): React.ReactElement;
declare namespace Card {
    var Content: typeof CardContent;
    var AttributeContent: typeof CardAttributeContent;
    var Footer: typeof CardFooter;
    var FooterWithLike: typeof CardFooterWithLike;
    var FooterWithRange: typeof CardFooterWithRange;
    var Title: typeof CardTitle;
    var Description: typeof CardDescription;
    var Like: typeof CardLike;
}

type TCardsGridProps = {
    children: ReactNode;
    cardsWidth: number;
    gap: number;
};
declare function CardsGrid({ children, gap, cardsWidth }: TCardsGridProps): React.ReactElement;

type TContainerProps = {
    children: React.ReactNode;
    className: string;
};
declare function Container({ children, className }: TContainerProps): React.ReactElement;

interface IDragAndDropProps {
    className?: string;
    initialItems: IDraggableItem[];
}

interface IDraggableItem {
    id: number | string;
    content: React.ReactNode;
}

interface IDraggableItemProps {
    id: string | number;
    index: number;
    className?: string;
    children?: React.ReactNode;
    moveCard?: (dragIndex: number, hoverIndex: number) => void;
}

interface IDragItem {
    index: number;
    id: string;
    type: string;
}

declare enum ItemTypesEnum {
    card = "card"
}

type TDragAndDropListProps = IDragAndDropProps & {
    moveCard: (dragIndex: number, hoverIndex: number) => void;
    onDragEnd?: (dragIndex: number, hoverIndex: number) => void;
};
declare function DragAndDropList({ initialItems, className, moveCard, onDragEnd, }: TDragAndDropListProps): React.ReactElement;

declare function DragAndDropColumns({ initialItems }: IDragAndDropProps): ReactElement;

type TFilterOption = {
    id: number;
    label: string;
    isChecked: boolean;
};

type TFilterAccordionProps = {
    items: {
        title: string;
        options: TFilterOption[];
    }[];
    onCheckboxChange: (option: TFilterOption & {
        group: string;
    }) => void;
};
declare function FilterAccordion({ items, onCheckboxChange }: TFilterAccordionProps): React.ReactElement;

type TFilterClearButtonProps = {
    title: string;
    action: () => void;
    isMain?: boolean;
};
declare function FilterClearButton({ title, action, isMain }: TFilterClearButtonProps): React.ReactElement;

type TFilterToggleButtonProps = {
    title: string;
    action: () => void;
    count?: number;
};
declare function FilterToggleButton({ title, action, count }: TFilterToggleButtonProps): React.ReactElement;

declare const Filter: {
    (): react_jsx_runtime.JSX.Element;
    Accordion: typeof FilterAccordion;
    ClearButton: typeof FilterClearButton;
    ToggleButton: typeof FilterToggleButton;
};

type TSvgIconProps = React.SVGProps<SVGSVGElement>;

declare function CSSIconAccordion({ className, theme }: TCssIconProps): React.ReactElement;

declare function CSSIconMinus({ className, theme }: TCssIconProps): React.ReactElement;

declare function IconChevron(props: TSvgIconProps): React.ReactElement;

declare function IconOverflow(props: TSvgIconProps): React.ReactElement;

declare function IconOverflowSm(props: TSvgIconProps): React.ReactElement;

declare function IconDraggable(props: TSvgIconProps): React.ReactElement;

declare function IconPlus(props: TSvgIconProps): React.ReactElement;

declare function IconBurger(props: TSvgIconProps): React.ReactElement;

declare function IconGoogle(props: TSvgIconProps): React.ReactElement;

declare function IconHash(props: TSvgIconProps): React.ReactElement;

declare function IconLike(props: TSvgIconProps): React.ReactElement;

declare function IconPercent(props: TSvgIconProps): React.ReactElement;

declare function IconText(props: TSvgIconProps): React.ReactElement;

declare function IconTick(props: TSvgIconProps): React.ReactElement;

declare function IconTooltip(props: TSvgIconProps): React.ReactElement;

declare function IconPencil(props: TSvgIconProps): React.ReactElement;

declare function IconBin(props: TSvgIconProps): React.ReactElement;

declare function IconCopy(props: TSvgIconProps): React.ReactElement;

declare function IconEye(props: TSvgIconProps): React.ReactElement;

declare function IconReport(props: TSvgIconProps): React.ReactElement;

declare function IconShare(props: TSvgIconProps): React.ReactElement;

declare function IconSearch(props: TSvgIconProps): React.ReactElement;

declare function IconPlay(props: TSvgIconProps): React.ReactElement;

declare function IconLockClosed(props: TSvgIconProps): React.ReactElement;

declare function IconLockOpened(props: TSvgIconProps): React.ReactElement;

declare function IconAlwaysPairsWith(props: TSvgIconProps): React.ReactElement;

declare function IconAppearsWithAtLeastOne(props: TSvgIconProps): React.ReactElement;

declare function IconOnlyMixesWith(props: TSvgIconProps): React.ReactElement;

declare function IconDoesntMixWith(props: TSvgIconProps): React.ReactElement;

declare function IconClose(props: TSvgIconProps): React.ReactElement;

declare function IconArrow(props: TSvgIconProps): React.ReactElement;

declare function IconWebsite(props: TSvgIconProps): React.ReactElement;

declare function IconInstagram(props: TSvgIconProps): React.ReactElement;

declare function IconVK(props: TSvgIconProps): React.ReactElement;

declare function IconTelegram(props: TSvgIconProps): React.ReactElement;

declare function IconTwitter(props: TSvgIconProps): React.ReactElement;

declare function IconDiscord(props: TSvgIconProps): React.ReactElement;

type TInputSizes = 'regular' | 'lg';

type TInputThemes = 'dark' | 'light';

declare const CheckboxSizes: {
    readonly sm: "h-4 w-4";
    readonly md: "h-6 w-6";
};
type TCheckboxSizes = keyof typeof CheckboxSizes;

type TCheckboxProps = {
    disabled?: boolean;
    onChange: ChangeEventHandler;
    theme?: 'dark' | 'light';
    id?: string;
    className?: string;
    checked?: boolean;
    size: TCheckboxSizes;
    children?: React.ReactNode;
};

type TSelectOption = {
    value: string;
    label: string;
    icon?: React.ReactNode;
    fieldColor?: string;
};

declare const SelectSizes: {
    readonly sm: "h-9";
    readonly md: "h-[50px]";
};
type TSelectSizes = keyof typeof SelectSizes;

type TSelectProps = {
    size: TSelectSizes;
    theme?: 'dark' | 'light';
    options: TSelectOption[];
    defaultValue: TSelectOption;
    onSelect: (value: TSelectOption) => void;
    customSelectedValue?: React.ReactNode;
};

type TInputProps = React.ComponentPropsWithRef<'input'> & {
    onChange: (value: string) => void;
    onBlur?: (value: string) => void;
    onFocus?: (value: string) => void;
    error: boolean;
    autoFocus?: boolean;
    theme: TInputThemes;
    customSize: TInputSizes;
    rightAdornment?: React.ReactNode;
    leftAdornment?: React.ReactNode;
};

declare function Input({ onChange, onBlur, onFocus, error, theme, customSize, rightAdornment, leftAdornment, disabled, autoFocus, className, ...props }: TInputProps): React.ReactElement;

type TInputErrorProps = {
    children: null | React.ReactNode;
};
declare function InputError({ children }: TInputErrorProps): React.ReactElement;

type TInputLabelProps = {
    id: string;
    children: React.ReactNode;
    className?: string;
};
declare function InputLabel({ id, children, className }: TInputLabelProps): React.ReactElement;

type TRangeProps = {
    id?: string;
    min: number;
    max: number;
    step: number;
    value?: number;
    className?: string;
    isLocked?: boolean;
    showLockProp?: boolean;
    isPercentMode?: boolean;
    maxPercentValue?: number;
    onChange: (value: number) => void;
    onBlur?: (value: number) => void;
    changePercentMode?: (value: boolean) => void;
    changeLockModeAction?: (value: boolean) => void;
    onChangePercentMode?: (value: boolean) => void;
};

type TCommonRangeProps = TRangeProps & {
    suffix?: string;
    className?: string;
    showLockProp?: boolean;
    changeLockModeAction?: (value: boolean) => void;
};
declare function CommonRange({ id, min, max, step, value, suffix, onChange, onBlur, isLocked, className, showLockProp, changeLockModeAction, }: TCommonRangeProps): ReactElement;

declare function CustomRange({ id, min, max, step, value, isLocked, onChange, className, showLockProp, isPercentMode, maxPercentValue, changePercentMode, onChangePercentMode, changeLockModeAction, }: TRangeProps): ReactElement;

declare function RangeWithControls({ value, min, max, id, onChange, step, className, isLocked, onBlur, }: TRangeProps): React.ReactElement;

type TTextareaProps = React.HTMLProps<HTMLTextAreaElement> & {
    onChange: (value: string) => void;
    error: boolean;
    theme: TInputThemes;
};

declare function Textarea({ onChange, error, theme, disabled, ...props }: TTextareaProps): React.ReactElement;

type TTimeInputProps = Omit<TInputProps, 'customSize'> & {
    className: string;
};
declare function TimeInput({ min, theme, error, value, disabled, onChange, className, }: TTimeInputProps): React.ReactElement;

declare function Select({ options, onSelect, defaultValue, theme, size, customSelectedValue, }: TSelectProps): ReactElement;

declare function RadioInput({ disabled, size, className, id, theme, checked, onChange, children, }: TCheckboxProps): React.ReactElement;

declare function Checkbox({ disabled, size, className, id, theme, checked, onChange, children, }: TCheckboxProps): React.ReactElement;

type TToggleProps = Omit<TCheckboxProps, 'size' | 'type'>;
declare function Toggler({ disabled, theme, onChange, id, className, checked, }: TToggleProps): React.ReactElement;

declare const LINK_SIZES: {
    readonly sm: "font-14-ui";
    readonly md: "font-18-ui";
    readonly lg: "font-22-ui";
};

type TLinkSizes = keyof typeof LINK_SIZES;

type TLinkTarget = React.HTMLAttributeAnchorTarget;

type TLinkSharedProps = {
    children: React.ReactNode;
    href: string;
    onClick?: () => void;
    innerRef?: React.Ref<HTMLAnchorElement>;
    target?: TLinkTarget;
};

type TLinkProps = TLinkSharedProps & {
    colorScheme?: string;
    size: TLinkSizes;
};
declare function Link({ children, href, innerRef, onClick, size, colorScheme, }: TLinkProps): React.ReactElement;

type TNavigationLinkProps = TLinkSharedProps & {
    isActive: boolean;
};
declare function NavigationLink(props: TNavigationLinkProps): React.ReactElement;

type TModalContentProps = {
    children: React.ReactNode;
    className: string;
};
declare function ModalContent({ children, className }: TModalContentProps): React.ReactElement;

type TModalProps = {
    isShown: boolean;
    setIsShown: (isShown: boolean) => void;
    children: ReactNode;
    hideClose?: boolean;
};
declare const Modal: {
    ({ isShown, children, setIsShown, hideClose }: TModalProps): ReactElement;
    Content: typeof ModalContent;
};

type TRulesElementProps = {
    text: string;
    color: string;
    disabled?: boolean;
    children: React.ReactNode;
    onClick: () => void;
};
declare function Rule({ children, text, color, onClick, disabled }: TRulesElementProps): React.ReactElement;

type TTabDataElement = {
    title: string;
};

type TTabsProps = {
    tabsData: TTabDataElement[];
};
declare function Tabs({ tabsData }: TTabsProps): ReactElement;

type TTabProps = {
    id: number;
    children: React.ReactNode;
    action: (id: number) => void;
    className: string;
};
declare function Tab({ id, children, action, className }: TTabProps): React.ReactElement;

type TSkeletonCardContentProps = {
    className?: string;
};
declare function SkeletonCardContent({ className }: TSkeletonCardContentProps): React.ReactElement;

type TCardFooterProps = {
    className?: string;
};
declare function SkeletonCardFooter({ className }: TCardFooterProps): React.ReactElement;

type TSkeletonCardProps = {
    theme: 'light' | 'dark';
    className?: string;
    children?: React.ReactNode;
};
declare function SkeletonCard({ theme, className, children }: TSkeletonCardProps): React.ReactElement;
declare namespace SkeletonCard {
    var Content: typeof SkeletonCardContent;
    var Footer: typeof SkeletonCardFooter;
}

export { Accordion, Button, ButtonGroup, ButtonLink, CSSIconAccordion, CSSIconMinus, Calendar, Card, CardsGrid, Checkbox, CommonRange, Container, CustomRange, DragAndDropColumns, DragAndDropList, Dropdown, Filter, IDragAndDropProps, IDragItem, IDraggableItem, IDraggableItemProps, IconAlwaysPairsWith, IconAppearsWithAtLeastOne, IconArrow, IconBin, IconBurger, IconChevron, IconClose, IconCopy, IconDiscord, IconDoesntMixWith, IconDraggable, IconEye, IconGoogle, IconHash, IconInstagram, IconLike, IconLockClosed, IconLockOpened, IconOnlyMixesWith, IconOverflow, IconOverflowSm, IconPencil, IconPercent, IconPlay, IconPlus, IconReport, IconSearch, IconShare, IconTelegram, IconText, IconTick, IconTooltip, IconTwitter, IconVK, IconWebsite, Input, InputError, InputLabel, ItemTypesEnum, LINK_SIZES, Link, Modal, NavigationLink, RadioInput, RangeWithControls, Rule, Select, SkeletonCard, TAccordionItemProps, TAccordionProps, TButtonColor, TButtonGroupProps, TButtonLinkProps, TButtonProps, TButtonSizes, TButtonStyleProps, TCalendarComponentProps, TCardAttributeContentProps, TCardContentProps, TCardDescriptionProps, TCardFooterProps$1 as TCardFooterProps, TCardFooterWithLikeProps, TCardFooterWithRangeProps, TCardProps, TCardTitleProps, TCardsGridProps, TCheckboxProps, TCheckboxSizes, TContainerProps, TCssIconProps, TDragAndDropListProps, TDropdownButtonProps, TDropdownOption, TDropdownProps, TDropdownTogglerProps, TFilterAccordionProps, TFilterClearButtonProps, TFilterOption, TFilterToggleButtonProps, TInputLabelProps, TInputProps, TInputSizes, TInputThemes, TLinkProps, TLinkSizes, TModalContentProps, TModalProps, TNavigationLinkProps, TRulesElementProps, TSelectOption, TSelectProps, TSelectSizes, TSvgIconProps, TTabDataElement, TTabProps, TTabsProps, TToggleProps, Tab, Tabs, Textarea, TimeInput, Toggler };