@konstructio/ui/dist/index.d.ts

A set of reusable and customizable React components built for konstruct.io

import { ButtonHTMLAttributes } from 'react';
import { ClassProp } from 'class-variance-authority/types';
import { Config } from 'tailwindcss/types/config';
import { Context } from 'react';
import { FC } from 'react';
import { ForwardRefExoticComponent } from 'react';
import { FunctionComponent } from 'react';
import { HTMLAttributes } from 'react';
import { HtmlHTMLAttributes } from 'react';
import { InputHTMLAttributes } from 'react';
import { PluginCreator } from 'tailwindcss/types/config';
import { PropsWithChildren } from 'react';
import { ReactNode } from 'react';
import { RefAttributes } from 'react';
import { SliderProps } from '@radix-ui/react-slider';
import { VariantProps } from 'class-variance-authority';

export declare const Alert: FC<AlertProps>;

export declare const AlertDialog: FC<AlertDialogProps>;

declare interface AlertDialogProps extends PropsWithChildren, VariantProps<typeof buttonAlertDialogVariants> {
    buttonCancelClassName?: string;
    buttonCancelText?: string;
    buttonConfirmClassName?: string;
    buttonConfirmText?: string;
    buttonText?: string;
    className?: string;
    description?: string;
    o?: string;
    title?: string;
    onConfirm?: () => void;
}

declare interface AlertProps extends VariantProps<typeof alertVariants> {
    dismissible?: boolean;
    content: string | ReactNode;
    isVisible?: boolean;
    showCloseButton?: boolean;
}

declare const alertVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
    type?: "sucess" | "info" | "warning" | "danger" | null | undefined;
    isVisible?: boolean | null | undefined;
} & ClassProp) | undefined) => string;

export declare const Autocomplete: ForwardRefExoticComponent<AutocompleteProps & RefAttributes<HTMLInputElement>>;

declare interface AutocompleteProps extends VariantProps<typeof autocompleteVariants> {
    autoComplete?: 'off';
    className?: string;
    label?: string;
    labelClassName?: string;
    name?: string;
    options: Option_2[];
    placeHolderEmptyValues?: string | ReactNode;
    placeHolderEmptyValuesClassName?: string;
    placeholder?: string;
    onChange(value: string): void;
}

declare const autocompleteVariants: (props?: ({
    variant?: "default" | null | undefined;
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

declare interface BodyProps extends React.HTMLAttributes<HTMLTableSectionElement>, PropsWithChildren, VariantProps<typeof bodyVariants> {
}

declare const bodyVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const Breadcrumb: FC<BreadcrumbProps>;

declare interface BreadcrumbProps extends VariantProps<typeof breadcrumbVariants>, HTMLAttributes<HTMLOListElement> {
    steps: Step[];
    wrapperClassName?: string;
}

declare const breadcrumbVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
    size?: "base" | "sm" | "lg" | "xl" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const Button: FC<ButtonProps>;

declare const buttonAlertDialogVariants: (props?: ({
    theme?: "kubefirst" | "colony" | null | undefined;
} & ClassProp) | undefined) => string;

declare interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'>, VariantProps<typeof buttonVariants> {
    asChild?: boolean;
    disabled?: boolean;
}

declare const buttonVariants: (props?: ({
    variant?: "danger" | "circle" | "text" | "primary" | "secondary" | null | undefined;
    version?: "default" | "alternate" | null | undefined;
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
    disabled?: boolean | null | undefined;
    size?: "medium" | "large" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const Card: FC<CardProps>;

declare interface CardProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants>, PropsWithChildren {
    isActive?: boolean;
    canHover?: boolean;
    wrapperClassName?: string;
}

declare const cardVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
    isActive?: boolean | null | undefined;
    canHover?: boolean | null | undefined;
} & ClassProp) | undefined) => string;

export declare const Checkbox: FC<CheckboxProps>;

declare interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked'>, VariantProps<typeof checkboxVariants> {
    ariaLabelledBy?: string;
    className?: string;
    defaultChecked?: boolean;
    disabled?: boolean;
    id?: string;
    label?: string;
    labelClassName?: string;
    name?: string;
    onChange?: () => void;
}

declare const checkboxVariants: (props?: ({
    variant?: "default" | null | undefined;
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
    checked?: boolean | null | undefined;
} & ClassProp) | undefined) => string;

export declare const Divider: FunctionComponent<HTMLAttributes<HTMLDivElement>>;

export declare const Dropdown: FC<DropdownProps>;

declare interface DropdownProps extends VariantProps<typeof dropdownVariants>, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
    onChange?: ({ target: { value, name }, }: {
        target: {
            value: string;
            name: string;
        };
    }) => void;
    label?: string;
    options: Option_3[];
    labelClassName?: string;
    value?: string;
    isLoading?: boolean;
}

declare const dropdownVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

declare interface FilterProps extends React.InputHTMLAttributes<HTMLInputElement>, PropsWithChildren {
    placeholder?: string;
}

export declare const Footer: FC<FooterProps>;

declare interface FooterProps extends PropsWithChildren, VariantProps<typeof footerVariants> {
    className?: string;
}

declare const footerVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

declare type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

declare interface HeadProps extends React.HTMLAttributes<HTMLTableSectionElement>, PropsWithChildren, VariantProps<typeof headVariants> {
}

declare const headVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;

declare interface InputProps extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
    label?: string | ReactNode;
    labelClassName?: string;
    error?: string;
}

declare const inputVariants: (props?: ({
    variant?: "error" | "default" | null | undefined;
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const konstructPlugin: {
    handler: PluginCreator;
    config?: Partial<Config>;
};

export declare const Loading: FunctionComponent<LoadingProps>;

declare type LoadingProps = InputHTMLAttributes<SVGSVGElement> & VariantProps<typeof loadingVariants>;

declare const loadingVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const Logo: FC<LogoProps>;

declare interface LogoProps extends PropsWithChildren, VariantProps<typeof logoVariants> {
    className?: string;
}

declare const logoVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const Modal: FC<ModalProps> & {
    Header: FC<ModalChildProps>;
    Body: FC<ModalChildProps>;
    Footer: FC<ModalChildProps>;
};

declare type ModalChildProps = {
    children: ReactNode;
    className?: string;
    asChild?: boolean;
};

declare interface ModalProps extends PropsWithChildren, VariantProps<typeof modalVariants> {
    className?: string;
    buttonCloseClassName?: string;
    isOpen?: boolean;
    onClose?: () => void;
}

declare const modalVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const Navigation: FC<NavigationProps> & NavigationChildrenProps;

declare type NavigationChildrenProps = {
    NavigationGroup: FC<NavigationGroupProps>;
    NavigationOption: FC<NavigationOptionProps>;
    NavigationSeparator: FC<NavigationSeparatorProps>;
    NavigationTitle: FC<NavigationTitleProps>;
};

export declare const NavigationGroup: FC<NavigationGroupProps>;

declare interface NavigationGroupProps extends PropsWithChildren, VariantProps<typeof navigationGroupsVariants>, Pick<HtmlHTMLAttributes<HTMLDivElement>, 'className' | 'style'> {
    title?: string;
    titleClassName?: string;
    isVisible?: boolean;
}

declare const navigationGroupsVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const NavigationOption: FC<NavigationOptionProps>;

declare type NavigationOption_2 = VariantProps<typeof navigationOptionVariants> & {
    className?: string;
    isVisible?: boolean;
    isActive?: boolean;
};

declare type NavigationOptionProps = NavigationOption_2 & ({
    role: 'button';
    children: ReactNode;
    onClick: VoidFunction;
} | {
    role?: never;
    children: ReactNode;
});

declare const navigationOptionVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
    isActive?: boolean | null | undefined;
} & ClassProp) | undefined) => string;

declare interface NavigationProps extends PropsWithChildren, VariantProps<typeof navigationVariants> {
    className?: string;
}

export declare const NavigationSeparator: FC<NavigationSeparatorProps>;

declare interface NavigationSeparatorProps extends Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>, VariantProps<typeof navigationSeparatorVariant> {
}

declare const navigationSeparatorVariant: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

declare interface NavigationTitleProps extends VariantProps<typeof navigationTitleVariants>, Pick<HtmlHTMLAttributes<HTMLHeadingElement>, 'className'> {
    title: string;
    className?: string;
    isVisible?: boolean;
}

declare const navigationTitleVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

declare const navigationVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const NumberInput: FC<NumberInputProps>;

declare interface NumberInputProps extends VariantProps<typeof numberInputVariants> {
    className?: string;
    init?: number;
    label?: string | ReactNode;
    max?: number;
    min?: number;
    name?: string;
    value?: number;
    onChange?: ({ target: { value } }: {
        target: {
            value: number;
        };
    }) => void;
}

declare const numberInputVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

declare type Option_2 = {
    value: string;
};

declare type Option_3 = {
    label: string | ReactNode;
    leftIcon?: ReactNode | string;
    value: string;
};

export declare const ProgressBar: FC<ProgressBarProps>;

declare interface ProgressBarProps extends VariantProps<typeof progressBarVariants> {
    className?: string;
    label?: string;
    percent: number;
    status?: 'success' | 'progress';
}

declare const progressBarVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const Radio: FC<RadioProps>;

export declare const RadioCard: FC<RadioCardProps>;

export declare const RadioCardGroup: FC<RadioCardGroupProps>;

declare type RadioCardGroupProps = {
    asChild?: boolean;
    className?: string;
    defaultChecked?: string;
    direction?: 'row' | 'col';
    name: string;
    options: Omit<RadioCardProps, 'name' | 'checked' | 'defaultChecked'>[];
    theme?: RadioCardProps['theme'];
    wrapperClassName?: string;
    onValueChange?: (value: string) => void;
};

declare type RadioCardProps = Omit<CardProps, 'canHover' | 'isActive'> & Pick<RadioProps, 'name' | 'value' | 'checked' | 'onChange' | 'label' | 'disabled' | 'defaultChecked' | 'labelTextClassName'> & {
    labelWrapperClassName?: string;
};

export declare const RadioGroup: FC<RadioGroupProps>;

declare interface RadioGroupProps {
    asChild?: boolean;
    className?: RadioProps['className'];
    defaultChecked?: string;
    direction?: 'row' | 'col';
    label?: string | ReactNode;
    name: string;
    options: Omit<RadioProps, 'name' | 'checked' | 'defaultChecked'>[];
    theme?: RadioProps['theme'];
    wrapperClassName?: string;
    onValueChange?: (value: string) => void;
}

declare interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'disabled'>, VariantProps<typeof radioVariants> {
    checked?: boolean;
    defaultChecked?: boolean;
    disabled?: boolean;
    label?: string | ReactNode;
    labelTextClassName?: string;
    name: string;
    value: string;
    wrapperClassName?: string;
    onChange?: (value: string) => void;
}

declare const radioVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
    disabled?: boolean | null | undefined;
    checked?: boolean | null | undefined;
} & ClassProp) | undefined) => string;

declare const Range_2: FC<RangeProps>;
export { Range_2 as Range }

declare interface RangeProps extends VariantProps<typeof rangeVariants> {
    className?: string;
    defaultValue?: SliderProps['defaultValue'];
    label?: string;
    max?: SliderProps['max'];
    min?: SliderProps['min'];
    name?: string;
    showValue?: boolean;
    size?: 'sm' | 'md' | 'lg';
}

declare const rangeVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

declare interface RowProps extends React.HTMLAttributes<HTMLTableRowElement>, PropsWithChildren, VariantProps<typeof rowVariants> {
    width?: string;
    isSelected?: boolean;
    onSelect?: () => void;
}

declare const rowVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
    isSelected?: boolean | null | undefined;
} & ClassProp) | undefined) => string;

export declare const Sidebar: FC<SidebarProps> & SidebarChildrenProps;

declare type SidebarChildrenProps = {
    Footer: FC<FooterProps>;
    Logo: FC<LogoProps>;
    Navigation: FC<NavigationProps>;
    NavigationGroup: FC<NavigationGroupProps>;
    NavigationOption: FC<NavigationOptionProps>;
    NavigationSeparator: FC<NavigationSeparatorProps>;
};

declare interface SidebarProps extends VariantProps<typeof wrapperSiderbarVariants>, PropsWithChildren {
    wrapperClassName?: string;
    minWith?: number;
    maxWith?: number;
    canResize?: boolean;
}

export declare const Slider: FC<SliderProps_2>;

declare interface SliderProps_2 extends VariantProps<typeof sliderVariants> {
    className?: string;
    defaultValue?: SliderProps['defaultValue'];
    label?: string;
    max?: SliderProps['max'];
    min?: SliderProps['min'];
    name?: string;
    showValue?: boolean;
    size?: 'sm' | 'md' | 'lg';
}

declare const sliderVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

declare type Step = {
    label: string;
    to?: string;
    target?: '_self' | '_blank';
    isActive?: boolean;
};

export declare const Switch: FC<SwitchProps>;

declare interface SwitchProps extends VariantProps<typeof switchVariants> {
    alignment?: 'horizontal' | 'vertical';
    className?: string;
    label?: string;
    name?: string;
    thumbClassName?: string;
    onChange?: (e: boolean) => void;
    value?: boolean;
    defaultChecked?: boolean;
}

declare const switchVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const Table: FunctionComponent<TableProps> & {
    Head: FunctionComponent<HeadProps>;
    Row: FunctionComponent<RowProps>;
    Filter: FunctionComponent<FilterProps>;
    Body: FunctionComponent<BodyProps>;
};

declare interface TableProps extends React.HTMLAttributes<HTMLTableElement>, PropsWithChildren, VariantProps<typeof tableVariants> {
}

declare const tableVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const Tag: FC<TagProps>;

declare type TagProps = {
    color?: 'gray' | 'cyan' | 'gold' | 'green' | 'light blue' | 'lime' | 'pink' | 'purple' | 'emerald' | 'fuscia' | 'indigo' | 'light-orange' | 'dark-sky-blue' | 'mistery';
    id: string | number;
    label: string;
    rightIcon?: ReactNode;
    leftIcon?: ReactNode;
    className?: string;
    'data-value'?: string;
    isSelected?: boolean;
};

export declare const TagSelect: FC<TagSelectProps>;

declare interface TagSelectProps extends VariantProps<typeof tagSelectVariants> {
    label?: string;
    options: TagProps[];
    name?: string;
    placeholder?: string;
    labelClassName?: string;
    wrapperClassName?: string;
    multiselect?: boolean;
}

declare const tagSelectVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const TextArea: FC<TextAreaProps>;

declare interface TextAreaProps extends InputHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textAreaVariants> {
    rows?: number;
    label?: string | ReactNode;
    name?: string;
    initialValue?: string;
}

declare const textAreaVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

export declare type Theme = 'kubefirst' | 'colony' | 'civo' | undefined;

export declare const ThemeContext: Context<ThemeContextType>;

export declare type ThemeContextProps = PropsWithChildren & {
    theme?: ThemeContextType['theme'];
};

export declare type ThemeContextType = {
    theme: Theme;
    setTheme: (theme: Theme) => void;
};

declare type ThemeProps = {
    theme?: Theme;
    setTheme?: (theme: Theme) => void;
};

export declare const ThemeProvider: FC<ThemeContextProps>;

export declare const Toast: FC<ToastProps>;

declare interface ToastProps extends PropsWithChildren, VariantProps<typeof toastVariants> {
    className?: string;
    description: string | ReactNode;
    descriptionClassName?: string;
    duration?: number;
    showCloseButton?: boolean;
    title: string | ReactNode;
    titleClassName?: string;
    open: boolean;
    setOpen: (open: boolean) => void;
    closeButtonClassName?: string;
}

declare const toastVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const Tooltip: FC<TooltipProps>;

declare interface TooltipProps extends PropsWithChildren, VariantProps<typeof tooltipVariants> {
    content: ReactNode | string;
    className?: string;
    wrapperClassName?: string;
}

declare const tooltipVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
    position?: "left" | "right" | "top" | "bottom" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const Typography: FunctionComponent<TypographyProps>;

declare interface TypographyProps extends InputHTMLAttributes<HTMLParagraphElement>, VariantProps<typeof typographyVariants> {
    children: ReactNode;
    component?: HeadingTag | 'p' | 'span';
}

declare const typographyVariants: (props?: ({
    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "tooltip" | "subtitle1" | "subtitle2" | "subtitle3" | "labelLarge" | "labelMedium" | "labelSmall" | "buttonSmall" | "body1" | "body2" | "body3" | null | undefined;
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const useTheme: () => ThemeProps;

export declare const useToggle: (initialState?: boolean) => [boolean, (value?: boolean) => void];

declare const wrapperSiderbarVariants: (props?: ({
    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
} & ClassProp) | undefined) => string;

export { }