stofli-ui/dist/types/index.d.ts

Biblioteca moderna de componentes UI para React con Tailwind CSS y Framer Motion

import { ClassValue } from 'clsx';
import React from 'react';

declare function cn(...inputs: ClassValue[]): string;

interface AccordionProps {
    items: {
        title: string;
        content: React.ReactNode;
    }[];
    defaultOpen?: number;
    allowMultiple?: boolean;
    className?: string;
    itemClassName?: string;
    buttonClassName?: string;
    titleClassName?: string;
    contentClassName?: string;
    iconClassName?: string;
}
declare const Accordion: React.FC<AccordionProps>;

interface AvatarProps {
    src?: string;
    alt?: string;
    fallback?: string;
    size?: "sm" | "md" | "lg" | "xl";
    radius?: "none" | "sm" | "md" | "full";
    border?: boolean;
    borderColor?: string;
    status?: "online" | "offline" | "away" | "busy";
    className?: string;
    imageClassName?: string;
    fallbackClassName?: string;
    statusClassName?: string;
    ariaLabel?: string;
    statusLabel?: {
        online?: string;
        offline?: string;
        away?: string;
        busy?: string;
    };
}
declare const Avatar: React.FC<AvatarProps>;

interface AutocompleteOption {
    value: string;
    label: string;
    group?: string;
    disabled?: boolean;
}
interface AutocompleteProps {
    options: AutocompleteOption[];
    value?: string;
    onChange?: (value: string) => void;
    placeholder?: string;
    title?: string;
    required?: boolean;
    className?: string;
    containerClassName?: string;
    inputClassName?: string;
    dropdownClassName?: string;
    itemClassName?: string;
    iconClassName?: string;
    sectionTitleClassName?: string;
    disabled?: boolean;
    variant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
}
declare const Autocomplete: React.FC<AutocompleteProps>;

declare const variantClasses: {
    default: string;
    primary: string;
    secondary: string;
    success: string;
    warning: string;
    danger: string;
    outline: string;
};
declare const sizeClasses: {
    sm: string;
    md: string;
    lg: string;
};
declare const radiusClasses: {
    none: string;
    sm: string;
    md: string;
    full: string;
};
interface BadgeProps {
    children: React.ReactNode;
    className?: string;
    dotClassName?: string;
    iconClassName?: string;
    contentClassName?: string;
    dotColor?: string;
    icon?: React.ReactNode;
    onClick?: () => void;
    dismissible?: boolean;
    ariaLabel?: string;
    dotAriaLabel?: string;
    dismissAriaLabel?: string;
    variant?: keyof typeof variantClasses;
    size?: keyof typeof sizeClasses;
    radius?: keyof typeof radiusClasses;
    withDot?: boolean;
    id?: string;
}
declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;

interface BreadcrumbItem {
    label: string;
    href?: string;
    icon?: React.ReactNode;
    className?: string;
    ariaLabel?: string;
}
interface BreadcrumbsProps {
    items: BreadcrumbItem[];
    separator?: React.ReactNode;
    homeIcon?: boolean;
    className?: string;
    olClassName?: string;
    itemClassName?: string;
    separatorClassName?: string;
    homeIconClassName?: string;
    currentItemClassName?: string;
    linkClassName?: string;
    clickable?: boolean;
    variant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
    size?: "sm" | "md" | "lg";
    navAriaLabel?: string;
    homeAriaLabel?: string;
    separatorAriaLabel?: string;
}
declare const Breadcrumbs: React.FC<BreadcrumbsProps>;

interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onDrag"> {
    variant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "outline" | "ghost" | "link";
    size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon";
    radius?: "none" | "sm" | "md" | "lg" | "full";
    fullWidth?: boolean;
    withRing?: boolean;
    isLoading?: boolean;
    leftIcon?: React.ReactNode;
    rightIcon?: React.ReactNode;
    withArrow?: boolean;
    withRipple?: boolean;
    rippleColor?: string;
    className?: string;
    rippleClassName?: string;
    loaderClassName?: string;
    leftIconClassName?: string;
    rightIconClassName?: string;
    contentClassName?: string;
    arrowClassName?: string;
    loadingText?: string;
    ariaLabel?: string;
}
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

type CalendarSystem = "buddhist" | "ethiopic" | "ethioaa" | "coptic" | "hebrew" | "indian" | "islamic-civil" | "islamic-tbla" | "islamic-umalqura" | "japanese" | "persian" | "roc" | "gregory" | "chinese";
interface CalendarProps {
    value?: Date;
    onChange?: (date: Date) => void;
    className?: string;
    headerClassName?: string;
    weekdaysClassName?: string;
    weekdayClassName?: string;
    daysContainerClassName?: string;
    dayClassName?: string;
    selectedDayClassName?: string;
    disabledDayClassName?: string;
    calendarTitleClassName?: string;
    monthTitleClassName?: string;
    navigationButtonClassName?: string;
    variant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
    radius?: "none" | "sm" | "md" | "full";
    readOnly?: boolean;
    minValue?: Date;
    maxValue?: Date;
    calendar?: CalendarSystem;
    locale?: string;
}
declare const Calendar: React.FC<CalendarProps>;

interface CardProps {
    title?: string;
    description?: string;
    children?: React.ReactNode;
    className?: string;
    variant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
    radius?: "none" | "sm" | "md" | "full";
    hover?: "none" | "lift" | "glow" | "scale";
    animation?: "none" | "fade" | "slide" | "bounce";
    interactive?: boolean;
    footer?: React.ReactNode;
    header?: React.ReactNode;
    image?: string;
    loading?: "eager" | "lazy";
    contentClassName?: string;
    titleClassName?: string;
    descriptionClassName?: string;
    imageClassName?: string;
    headerClassName?: string;
    footerClassName?: string;
    ariaLabel?: string;
    imageAlt?: string;
    onClick?: () => void;
    onKeyDown?: (e: React.KeyboardEvent) => void;
    role?: string;
}
declare const Card: React.FC<CardProps>;

interface CheckboxProps {
    checked?: boolean;
    defaultChecked?: boolean;
    disabled?: boolean;
    required?: boolean;
    label?: string;
    name?: string;
    value?: string;
    size?: "sm" | "md" | "lg";
    variant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
    className?: string;
    wrapperClassName?: string;
    checkboxClassName?: string;
    labelClassName?: string;
    onChange?: (checked: boolean) => void;
    radius?: "none" | "sm" | "md" | "full";
    id?: string;
    ariaLabel?: string;
    ariaDescribedBy?: string;
    errorMessage?: string;
}
declare const Checkbox: React.FC<CheckboxProps>;

interface CircularProgressProps {
    value?: number;
    max?: number;
    size?: "sm" | "md" | "lg";
    variant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
    showValue?: boolean;
    thickness?: number;
    label?: string;
    labelPosition?: "top" | "bottom";
    className?: string;
    circleClassName?: string;
    bgCircleClassName?: string;
    valueClassName?: string;
    labelClassName?: string;
    animate?: boolean;
    spin?: boolean;
    formatOptions?: Intl.NumberFormatOptions;
    "aria-label"?: string;
    "aria-describedby"?: string;
    "aria-valuetext"?: string;
    indeterminate?: boolean;
}
declare const CircularProgress: React.FC<CircularProgressProps>;

interface DatePickerProps {
    value?: Date;
    onChange?: (date: Date | null) => void;
    className?: string;
    containerClassName?: string;
    inputContainerClassName?: string;
    inputClassName?: string;
    labelClassName?: string;
    errorClassName?: string;
    calendarIconClassName?: string;
    arrowIconClassName?: string;
    calendarClassName?: string;
    variant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
    size?: "sm" | "md" | "lg";
    radius?: "none" | "sm" | "md" | "full";
    disabled?: boolean;
    readOnly?: boolean;
    minValue?: Date;
    maxValue?: Date;
    format?: string;
    label?: string;
    errorMessage?: string;
    required?: boolean;
    calendar?: "buddhist" | "ethiopic" | "ethioaa" | "coptic" | "hebrew" | "indian" | "islamic-civil" | "islamic-tbla" | "islamic-umalqura" | "japanese" | "persian" | "roc" | "gregory" | "chinese";
    locale?: string;
    id?: string;
    name?: string;
    "aria-describedby"?: string;
}
declare const DatePicker: React.FC<DatePickerProps>;

interface DropdownItem {
    label: React.ReactNode;
    value: string;
    icon?: React.ReactNode;
    disabled?: boolean;
    avatarSrc?: string;
    avatarAlt?: string;
    description?: string;
}
interface DropdownProps {
    items: DropdownItem[];
    placeholder?: string;
    variant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
    size?: "sm" | "md" | "lg" | "xl";
    radius?: "none" | "sm" | "md" | "full";
    disabled?: boolean;
    fullWidth?: boolean;
    className?: string;
    itemClassName?: string;
    buttonClassName?: string;
    placement?: "bottom" | "top" | "left" | "right";
    onChange?: (value: string | string[]) => void;
    icon?: React.ReactNode;
    showSelectedIcon?: boolean;
    defaultValue?: string | string[];
    value?: string | string[];
    width?: string;
    activeColor?: string;
    showArrow?: boolean;
    multiSelect?: boolean;
    avatarSize?: "xs" | "sm" | "md" | "lg";
    avatarSrc?: string;
    avatarAlt?: string;
    selectable?: boolean;
    avatarOnly?: boolean;
    arrowIconClassName?: string;
    dropdownClassName?: string;
    listClassName?: string;
    itemContentClassName?: string;
    itemLabelClassName?: string;
    itemIconClassName?: string;
    checkIconClassName?: string;
    id?: string;
    label?: string;
    required?: boolean;
    "aria-label"?: string;
    "aria-describedby"?: string;
    errorMessage?: string;
}
declare const Dropdown: React.FC<DropdownProps>;

interface InputProps {
    label?: string;
    placeholder?: string;
    type?: string;
    defaultValue?: string;
    value?: string;
    name?: string;
    id?: string;
    disabled?: boolean;
    required?: boolean;
    error?: string;
    success?: boolean;
    icon?: React.ReactNode;
    iconPosition?: "left" | "right";
    variant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
    size?: "sm" | "md" | "lg";
    radius?: "none" | "sm" | "md" | "full";
    fullWidth?: boolean;
    className?: string;
    inputClassName?: string;
    labelClassName?: string;
    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
    pattern?: string;
    validate?: string | ((value: string) => string | undefined);
    successMessage?: string;
    "aria-label"?: string;
    "aria-describedby"?: string;
    description?: string;
    errorId?: string;
    descriptionId?: string;
    hideLabel?: boolean;
    autoComplete?: string;
    readOnly?: boolean;
}
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

interface NumberInputProps {
    value?: number;
    defaultValue?: number;
    min?: number;
    max?: number;
    step?: number;
    disabled?: boolean;
    readonly?: boolean;
    label?: string;
    placeholder?: string;
    error?: string;
    size?: "sm" | "md" | "lg";
    variant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
    radius?: "none" | "sm" | "md" | "full";
    fullWidth?: boolean;
    className?: string;
    inputClassName?: string;
    labelClassName?: string;
    errorClassName?: string;
    controlsClassName?: string;
    controlButtonClassName?: string;
    inputContainerClassName?: string;
    controlsLayout?: "default" | "compact" | "split";
    controlsPosition?: "right" | "both";
    showControls?: boolean;
    iconSet?: "chevron" | "plusminus";
    required?: boolean;
    name?: string;
    id?: string;
    animationStyle?: "slide" | "pulse" | "scale" | "bounce";
    format?: "default" | "percentage" | "currency" | "signed";
    formatOptions?: {
        symbol?: string;
        position?: "prefix" | "suffix";
    };
    onChange?: (value: number) => void;
    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
    "aria-label"?: string;
    "aria-describedby"?: string;
    description?: string;
    errorId?: string;
    descriptionId?: string;
    hideLabel?: boolean;
    autoComplete?: string;
}
declare const NumberInput: React.FC<NumberInputProps>;

interface PaginationProps {
    totalPages: number;
    currentPage?: number;
    onPageChange?: (page: number) => void;
    siblingsCount?: number;
    variant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
    size?: "sm" | "md" | "lg";
    withNumbers?: boolean;
    withEdges?: boolean;
    withText?: boolean;
    disabled?: boolean;
    className?: string;
    fullWidth?: boolean;
    customText?: {
        previous?: string;
        next?: string;
        first?: string;
        last?: string;
        pageLabel?: string;
        navigationLabel?: string;
        statusText?: string;
    };
    showPrevious?: boolean;
    showNext?: boolean;
    navButtonClassName?: string;
    activePageClassName?: string;
    pageButtonClassName?: string;
    ellipsisClassName?: string;
    indicatorClassName?: string;
    numbersContainerClassName?: string;
    id?: string;
    "aria-label"?: string;
}
declare const Pagination: React.FC<PaginationProps>;

interface ProgressProps {
    value?: number;
    max?: number;
    size?: "sm" | "md" | "lg";
    variant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
    showValue?: boolean;
    animate?: boolean;
    label?: string;
    className?: string;
    containerClassName?: string;
    labelClassName?: string;
    valueClassName?: string;
    progressBarClassName?: string;
    radius?: "none" | "sm" | "md" | "full";
    striped?: boolean;
    indeterminate?: boolean;
    description?: string;
    "aria-label"?: string;
    "aria-labelledby"?: string;
    "aria-describedby"?: string;
    id?: string;
    valueText?: string;
}
declare const Progress: React.FC<ProgressProps>;

interface SpinnerProps {
    size?: "xs" | "sm" | "md" | "lg" | "xl";
    variant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
    speed?: "slow" | "normal" | "fast";
    type?: "border" | "dots" | "grow" | "wave" | "lines";
    label?: string;
    labelPosition?: "left" | "right" | "top" | "bottom";
    className?: string;
    containerClassName?: string;
    spinnerClassName?: string;
    labelClassName?: string;
    ariaLabel?: string;
    ariaLive?: "off" | "polite" | "assertive";
}
declare const Spinner: React.FC<SpinnerProps>;

interface SwitchProps {
    checked?: boolean;
    onChange?: (checked: boolean) => void;
    disabled?: boolean;
    size?: "sm" | "md" | "lg";
    variant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
    label?: string;
    labelPosition?: "left" | "right";
    required?: boolean;
    name?: string;
    className?: string;
    circleClassName?: string;
    activeCircleClassName?: string;
    inactiveCircleClassName?: string;
    labelClassName?: string;
    wrapperClassName?: string;
    activeWrapperClassName?: string;
    inactiveWrapperClassName?: string;
    iconClassName?: string;
    id?: string;
    icon?: boolean;
    iconType?: "check" | "cross" | "none";
    ariaLabel?: string;
    description?: string;
    descriptionId?: string;
}
declare const Switch: React.FC<SwitchProps>;

interface TabsProps {
    tabs: {
        label: string;
        content: React.ReactNode;
        icon?: React.ReactNode;
    }[];
    defaultTab?: number;
    variant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
    size?: "sm" | "md" | "lg";
    radius?: "none" | "sm" | "md" | "full";
    fullWidth?: boolean;
    className?: string;
    tabClassName?: string;
    contentClassName?: string;
    hoverEffect?: boolean;
    containerClassName?: string;
    tabsContainerClassName?: string;
    scrollContainerClassName?: string;
    indicatorClassName?: string;
    activeTabClassName?: string;
    tabIconClassName?: string;
    tabLabelClassName?: string;
    contentContainerClassName?: string;
    ariaLabel?: string;
    id?: string;
}
declare const Tabs: React.FC<TabsProps>;

interface ToastProps {
    id?: string;
    open?: boolean;
    defaultOpen?: boolean;
    onOpenChange?: (open: boolean) => void;
    title?: string;
    description?: string;
    variant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center";
    duration?: number;
    showCloseButton?: boolean;
    className?: string;
    children?: React.ReactNode;
    icon?: React.ReactNode;
    containerClassName?: string;
    toastClassName?: string;
    titleClassName?: string;
    descriptionClassName?: string;
    iconContainerClassName?: string;
    contentClassName?: string;
    closeButtonClassName?: string;
    role?: "status" | "alert";
    important?: boolean;
}
declare const Toast: React.FC<ToastProps>;
interface ToastContextType {
    open: (props: Omit<ToastProps, "open" | "defaultOpen" | "onOpenChange" | "id">) => void;
    close: (id?: string) => void;
}
declare const ToastProvider: React.FC<{
    children: React.ReactNode;
    containerClassName?: string;
}>;
declare const useToast: () => ToastContextType;

interface TooltipProps {
    children: React.ReactNode;
    content: React.ReactNode;
    position?: "top" | "right" | "bottom" | "left";
    variant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
    delay?: number;
    maxWidth?: string;
    showArrow?: boolean;
    className?: string;
    tooltipClassName?: string;
    contentClassName?: string;
    arrowClassName?: string;
    radius?: "none" | "sm" | "md" | "full";
    id?: string;
}
declare const Tooltip: React.FC<TooltipProps>;

export { Accordion, Autocomplete, Avatar, Badge, Breadcrumbs, Button, Calendar, Card, Checkbox, CircularProgress, DatePicker, Dropdown, Input, NumberInput, Pagination, Progress, Spinner, Switch, Tabs, Toast, ToastProvider, Tooltip, cn, useToast };