@papernote/ui/dist/components/Card.d.ts

A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive

import React from 'react';
/**
 * Card component props
 */
export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
    /** Card content */
    children: React.ReactNode;
    /** Visual style variant affecting padding and shadow */
    variant?: 'default' | 'compact' | 'flat';
    /** Predefined width constraint */
    width?: 'sm' | 'md' | 'lg' | 'xl' | 'auto' | 'full';
    /** Additional CSS classes */
    className?: string;
    /** Click handler - makes card interactive */
    onClick?: () => void;
    /** Show hover effect without onClick handler */
    hoverable?: boolean;
    /** Show loading skeleton instead of content */
    loading?: boolean;
}
/**
 * Card - Container component with paper aesthetic and subtle shadow
 *
 * Supports ref forwarding for DOM access.
 *
 * A content container with paper texture, border, and shadow effects. Supports
 * different sizes, variants (padding/shadow levels), and loading states.
 *
 * Compose with CardHeader, CardTitle, CardDescription, CardContent, and CardFooter
 * for consistent internal structure.
 *
 * @example Basic card
 * ```tsx
 * <Card>
 *   <CardHeader>
 *     <CardTitle>User Profile</CardTitle>
 *     <CardDescription>Personal information</CardDescription>
 *   </CardHeader>
 *   <CardContent>
 *     <p>Content here</p>
 *   </CardContent>
 * </Card>
 * ```
 *
 * @example Interactive card with loading
 * ```tsx
 * <Card
 *   variant="compact"
 *   onClick={handleClick}
 *   loading={isLoading}
 * >
 *   <p>Content</p>
 * </Card>
 * ```
 *
 * @example With ref
 * ```tsx
 * const cardRef = useRef<HTMLDivElement>(null);
 * <Card ref={cardRef}>Content</Card>
 * ```
 */
declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
export default Card;
/**
 * CardHeader component props
 */
export interface CardHeaderProps {
    /** Header content - typically CardTitle and CardDescription */
    children: React.ReactNode;
    /** Additional CSS classes */
    className?: string;
    /** Action element (button, menu, etc.) to display in header */
    action?: React.ReactNode;
}
/**
 * CardHeader - Header section for Card component
 *
 * Container for card title, description, and optional action buttons.
 * Automatically handles layout when action element is provided.
 */
export declare function CardHeader({ children, className, action, }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
export declare function CardTitle({ children, className, }: {
    children: React.ReactNode;
    className?: string;
}): import("react/jsx-runtime").JSX.Element;
export declare function CardDescription({ children, className, }: {
    children: React.ReactNode;
    className?: string;
}): import("react/jsx-runtime").JSX.Element;
export declare function CardContent({ children, className, }: {
    children: React.ReactNode;
    className?: string;
}): import("react/jsx-runtime").JSX.Element;
export declare function CardFooter({ children, className, }: {
    children: React.ReactNode;
    className?: string;
}): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=Card.d.ts.map