vdk-components/dist/index.d.ts

React component library built with TypeScript and SCSS

import React from 'react';

interface AvatarProps {
    /**
     * Image URL for the avatar
     */
    src?: string;
    /**
     * Fallback text when no image is provided
     */
    alt?: string;
    /**
     * Size of the avatar
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * Shape of the avatar
     */
    shape?: 'circle' | 'square';
    /**
     * Status indicator
     */
    status?: 'online' | 'offline' | 'away' | 'busy';
    /**
     * Optional click handler
     */
    onClick?: () => void;
    /**
     * Optional className for custom styling
     */
    className?: string;
}
declare const Avatar: React.FC<AvatarProps>;

interface ButtonProps {
    /**
     * Button contents
     */
    label: string;
    /**
     * Optional click handler
     */
    onClick?: () => void;
    /**
     * Button variant
     */
    variant?: 'primary' | 'secondary' | 'outline';
    /**
     * Button size
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * Disabled state
     */
    disabled?: boolean;
}
declare const Button: React.FC<ButtonProps>;

interface CardProps {
    /**
     * Card title
     */
    title: string;
    /**
     * Card content
     */
    children: React.ReactNode;
    /**
     * Optional image URL
     */
    imageUrl?: string;
    /**
     * Card variant
     */
    variant?: 'default' | 'elevated' | 'outlined' | 'gradient' | 'dark' | 'interactive' | 'bordered' | 'compact';
    /**
     * Optional footer content
     */
    footer?: React.ReactNode;
    /**
     * Optional click handler
     */
    onClick?: () => void;
    /**
     * Optional className for custom styling
     */
    className?: string;
}
declare const Card: React.FC<CardProps>;

interface SwitchProps {
    /**
     * Whether the switch is checked
     */
    checked?: boolean;
    /**
     * Whether the switch is disabled
     */
    disabled?: boolean;
    /**
     * Whether the switch is in loading state
     */
    loading?: boolean;
    /**
     * Label for the switch
     */
    label?: string;
    /**
     * Callback when the switch state changes
     */
    onChange?: (checked: boolean) => void;
    /**
     * Optional className for custom styling
     */
    className?: string;
}
declare const Switch: React.FC<SwitchProps>;

interface ToastProps {
    /**
     * Toast message
     */
    message: string;
    /**
     * Toast type
     */
    type?: 'success' | 'error' | 'warning' | 'info';
    /**
     * Duration in milliseconds
     */
    duration?: number;
    /**
     * Callback when toast is closed
     */
    onClose?: () => void;
    /**
     * Optional className for custom styling
     */
    className?: string;
}
declare const Toast: React.FC<ToastProps>;

interface TooltipProps {
    /**
     * Content to be displayed in the tooltip
     */
    content: React.ReactNode;
    /**
     * Element that triggers the tooltip
     */
    children: React.ReactElement;
    /**
     * Position of the tooltip
     */
    position?: 'top' | 'right' | 'bottom' | 'left';
    /**
     * Delay before showing the tooltip (in milliseconds)
     */
    delay?: number;
    /**
     * Optional className for custom styling
     */
    className?: string;
}
declare const Tooltip: React.FC<TooltipProps>;

export { Avatar, Button, Card, Switch, Toast, Tooltip };
export type { AvatarProps, ButtonProps, CardProps, SwitchProps, ToastProps, TooltipProps };