@prerak12/chaoscomponents/dist/index.d.ts

A library built over tailwindcss where you can customize your components as per your needs (not necessary except for colors and some basic props). With just one word change you can switch from normal to google's floating style.

import { JSX } from 'react/jsx-runtime';
import { ReactNode } from 'react';

export declare const Alert: ({ alertType, alertHeading, alertText, borderColor, rounded, children, }: AlertProps) => JSX.Element;

export declare const AlertBox: ({ label, width, height, borderColor, textColor, textSize, bgColor, bgBlurColor, opacity, rounded, isCrossEnabled, onCrossClick, onClickOutside, children }: AlertBoxProps) => JSX.Element;

declare interface AlertBoxProps {
    label?: string;
    width?: string;
    height?: string;
    borderColor?: string;
    textColor?: string;
    textSize?: string;
    bgColor?: string;
    bgBlurColor?: string;
    opacity?: string;
    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
    isCrossEnabled?: boolean;
    onCrossClick?: () => void;
    onClickOutside?: () => void;
    children?: React.ReactNode;
}

declare interface AlertProps {
    alertType: 'success' | 'error' | 'warning' | 'info' | 'black';
    alertHeading?: string;
    alertText?: string;
    borderColor?: string;
    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
    children?: React.ReactNode;
}

export declare const Badge: ({ label, width, height, bgColor, textColor, textSize, borderColor, rounded, crossButton, crossButtonColor, crossColor, onCrossClick }: BadgeProps) => JSX.Element;

declare interface BadgeProps {
    label: string;
    width?: string;
    height?: string;
    bgColor?: string;
    textColor?: string;
    textSize?: 'xs' | 'sm' | 'md' | 'lg';
    borderColor?: string;
    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
    crossButton?: boolean;
    crossButtonColor?: string;
    crossColor?: string;
    onCrossClick?: () => void;
}

export declare const Button: ({ label, width, height, disabled, bgColor, textColor, rounded, hoverBgColor, hoverTextColor, borderColor, gap, onClick, children, }: ButtonProps) => JSX.Element;

declare interface ButtonProps {
    label?: string | React.ReactNode;
    width?: string;
    height?: string;
    disabled?: boolean;
    onClick?: () => void;
    bgColor?: string;
    textColor?: string;
    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
    hoverBgColor?: string;
    hoverTextColor?: string;
    borderColor?: string;
    gap?: string;
    children?: React.ReactNode;
}

export declare const ChaosComponents: ({ children }: ChaosComponentsProps) => JSX.Element;

declare interface ChaosComponentsProps {
    children: ReactNode;
}

export declare const Collapsible: ({ label, width, height, bgColor, textColor, textSize, hoverBgColor, hoverTextColor, isLabelBold, borderColor, collapsibleLabel, collapsibleBgColor, collapsibleTextColor, collapsibleTextSize, overallBorderColor, children, }: CollapsibleProps) => JSX.Element;

declare interface CollapsibleProps {
    label: string;
    width?: string;
    height?: string;
    bgColor?: string;
    textSize?: string;
    textColor?: string;
    hoverColor?: string;
    borderColor?: string;
    isLabelBold?: boolean;
    hoverBgColor?: string;
    hoverTextColor?: string;
    collapsibleLabel?: string;
    collapsibleBgColor?: string;
    collapsibleTextColor?: string;
    collapsibleTextSize?: string;
    children?: React.ReactNode;
    overallBorderColor?: string;
}

export declare const Input: ({ placeholder, buttonStyle, width, height, bgColor, outlineColor, textColor, rounded, type, disabled, borderColor, minLength, maxLength, value, setValue }: InputProps) => JSX.Element;

declare interface InputProps {
    placeholder: string;
    type?: string;
    width?: string;
    height?: string;
    disabled?: boolean;
    bgColor?: string;
    outlineColor?: string;
    textColor?: string;
    borderColor?: string;
    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
    buttonStyle?: 'google' | 'normal';
    minLength?: number;
    maxLength?: number;
    value: string;
    setValue: (value: string) => void;
}

export declare const Toast: ({ toastText, toastHeading, rounded, bgColor, textColor, borderColor, button, buttonLabel, buttonBackgroundColor, buttonTextColor, buttonRounded, buttonBorderColor, buttonOnClick, children }: ToastProps) => JSX.Element;

declare interface ToastProps {
    toastHeading?: string;
    toastText: string;
    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
    bgColor?: string;
    textColor?: string;
    borderColor?: string;
    button?: boolean;
    buttonLabel?: string;
    buttonBackgroundColor?: string;
    buttonTextColor?: string;
    buttonRounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
    buttonBorderColor?: string;
    buttonOnClick?: () => void;
    children?: React.ReactNode;
}

export declare const ToolTip: ({ label, width, height, bgColor, textColor, rounded, hoverBgColor, hoverTextColor, borderColor, toolTipLabel, toolTipPosition, toolTipWidth, toolTipHeight, toolTipBorderColor, toolTipBgColor, toolTipTextColor, toolTipRounded, isButton, onClick }: ToolTipProps) => JSX.Element;

declare interface ToolTipProps {
    label: string;
    width?: string;
    height?: string;
    bgColor?: string;
    textColor?: string;
    borderColor?: string;
    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
    hoverBgColor?: string;
    hoverTextColor?: string;
    toolTipLabel: string;
    toolTipPosition?: 'top' | 'bottom' | 'left' | 'right';
    toolTipWidth?: string;
    toolTipHeight?: string;
    toolTipBorderColor?: string;
    toolTipBgColor?: string;
    toolTipTextColor?: string;
    toolTipRounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
    isButton?: boolean;
    onClick?: () => void;
}

export { }