react-vite-themes/dist/types/components.d.ts

A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.

import type { ReactNode, ButtonHTMLAttributes, InputHTMLAttributes } from 'react';
import type { Variant } from './colors';
import type { ValidationRule } from '../utils/validation';
export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
export type ColorScheme = 'solid' | 'outline' | 'ghost' | 'link' | 'gradient' | 'glass';
export interface BaseComponentProps {
    className?: string;
    children?: ReactNode;
    id?: string;
}
export type ComponentProps = BaseComponentProps;
export interface ButtonProps extends BaseComponentProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {
    variant?: Variant;
    size?: Size;
    colorScheme?: ColorScheme;
    isLoading?: boolean;
    isDisabled?: boolean;
    leftIcon?: ReactNode | string;
    rightIcon?: ReactNode | string;
    centerIcon?: ReactNode | string;
    isFullWidth?: boolean;
}
export interface InputProps extends BaseComponentProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
    variant?: 'outline' | 'filled' | 'flushed';
    size?: Size;
    isInvalid?: boolean;
    isDisabled?: boolean;
    leftElement?: ReactNode;
    rightElement?: ReactNode;
    label?: string;
    helperText?: string;
    errorMessage?: string;
    showPasswordToggle?: boolean;
}
export interface CardProps extends BaseComponentProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'size' | 'style'> {
    variant?: Variant;
    style?: 'elevated' | 'outline' | 'filled' | 'glass' | 'bordered';
    padding?: Size;
    header?: ReactNode;
    footer?: ReactNode;
    isHoverable?: boolean;
    image?: {
        src: string;
        alt?: string;
        height?: string | number;
        objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
        containFit?: boolean;
    };
}
export interface IconProps extends BaseComponentProps {
    name: string;
    size?: Size | number;
    color?: string;
}
export interface NavbarProps extends BaseComponentProps {
    variant?: 'default' | 'elevated' | 'glass' | 'bordered' | Variant;
    size?: Size;
    brand?: ReactNode;
    isSticky?: boolean;
    isTransparent?: boolean;
    mobileUserButton?: 'header' | 'sidebar' | 'both' | 'none';
    onUserClick?: () => void;
    userButtonText?: string;
    userButtonIcon?: string;
    userButtonNavigateTo?: string;
    navigationLinks?: Array<{
        path: string;
        label: string;
    }>;
    childrenPosition?: 'start' | 'center' | 'end';
}
export interface SearchBarProps extends BaseComponentProps {
    variant?: 'default' | 'filled' | 'outline' | 'glass';
    size?: Size;
    placeholder?: string;
    isDisabled?: boolean;
    onSearch?: (query: string) => void;
}
export interface AlertProps extends BaseComponentProps {
    variant?: Variant;
    size?: Size;
    title?: ReactNode;
    icon?: string;
    isClosable?: boolean;
    autoDismiss?: boolean;
    dismissDelay?: number;
    onClose?: () => void;
    onDismiss?: () => void;
}
export interface ModalProps extends BaseComponentProps {
    isOpen: boolean;
    onClose?: () => void;
    title?: ReactNode;
    size?: Size | 'full';
    variant?: 'default' | 'elevated' | 'glass' | 'bordered' | Variant;
    showCloseButton?: boolean;
    closeOnBackdrop?: boolean;
    closeOnEscape?: boolean;
    preventScroll?: boolean;
}
export interface FormProps extends BaseComponentProps {
    variant?: 'default' | 'elevated' | 'glass' | 'bordered';
    onSubmit?: (data: Record<string, unknown>) => void;
    isDisabled?: boolean;
    isLoading?: boolean;
    submitButton?: {
        text?: string;
        variant?: Variant;
        size?: Size;
        isFullWidth?: boolean;
        leftIcon?: string;
        rightIcon?: string;
        isDisabled?: boolean;
    } | boolean;
    cancelButton?: {
        text?: string;
        variant?: Variant;
        size?: Size;
        isFullWidth?: boolean;
        leftIcon?: string;
        rightIcon?: string;
        isDisabled?: boolean;
        onClick?: () => void;
    } | boolean;
    showActions?: boolean;
    validationSchema?: Record<string, ValidationRule>;
    validateOnChange?: boolean;
    validateOnBlur?: boolean;
    showValidationErrors?: boolean;
}
export interface SidebarProps extends BaseComponentProps {
    isOpen: boolean;
    onClose?: () => void;
    direction?: 'left' | 'right' | 'top' | 'bottom';
    showHeader?: boolean;
    headerContent?: ReactNode;
    size?: Size | 'full';
    variant?: 'default' | 'elevated' | 'glass' | 'bordered';
}
export interface FooterProps extends BaseComponentProps {
    sections?: Array<{
        title: string;
        links: Array<{
            label: string;
            href: string;
            external?: boolean;
        }>;
    }>;
    companyName?: string;
    companyDescription?: string;
    socialLinks?: Array<{
        label: string;
        href: string;
        external?: boolean;
    }>;
    copyrightText?: string;
    showBackToTop?: boolean;
    onBackToTop?: () => void;
}
export interface StatCardProps extends BaseComponentProps {
    title?: ReactNode;
    value: ReactNode;
    subtitle?: ReactNode;
    icon?: ReactNode | string;
    trend?: 'up' | 'down' | 'neutral';
    trendValue?: ReactNode;
    variant?: Variant;
    style?: 'elevated' | 'outline' | 'filled' | 'glass' | 'bordered';
    size?: Size;
    isHoverable?: boolean;
}
export interface BadgeProps extends BaseComponentProps {
    variant?: Variant;
    size?: Size;
    isRounded?: boolean;
    isOutlined?: boolean;
}
export interface ProgressBarProps extends BaseComponentProps {
    value: number;
    max?: number;
    variant?: Variant;
    size?: Size;
    showLabel?: boolean;
    labelPosition?: 'top' | 'bottom';
    isAnimated?: boolean;
}
export interface ImageProps extends BaseComponentProps {
    src: string;
    alt?: string;
    variant?: 'default' | 'elevated' | 'glass' | 'bordered' | Variant;
    size?: Size;
    style?: 'natural' | 'square' | 'rectangle' | 'circle' | 'landscape' | 'portrait' | 'glass';
    isRounded?: boolean;
    isResponsive?: boolean;
    isLoading?: boolean;
    isError?: boolean;
    fallback?: ReactNode | string;
}
export interface TabsProps extends BaseComponentProps {
    tabs: Array<{
        id: string;
        label: string;
        icon?: string;
        content?: ReactNode;
        targetId?: string;
        disabled?: boolean;
    }>;
    defaultActiveTab?: string;
    variant?: 'default' | 'elevated' | 'pills' | 'underline';
    size?: Size;
    isFullWidth?: boolean;
    isVertical?: boolean;
    showIcons?: boolean;
    onTabChange?: (tabId: string) => void;
}
//# sourceMappingURL=components.d.ts.map