@buun_group/brutalist-ui/dist/react/chart/Chart.d.ts

A brutalist-styled component library

/**
 * @module Chart
 * @description A comprehensive chart container component that provides structure and styling for data visualizations. Includes compound components for headers, legends, and content areas.
 */
import React, { CSSProperties } from 'react';
/**
 * Props for the Chart component
 */
interface ChartProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * The visual style variant of the chart
     * @default 'default'
     */
    variant?: 'default' | 'brutal' | 'outline';
    /**
     * The size of the chart
     * @default 'md'
     */
    size?: 'sm' | 'md' | 'lg';
    /**
     * Whether to show a border around the chart
     * @default true
     */
    showBorder?: boolean;
    /**
     * Whether to apply the brutalist shadow effect
     * @default true
     */
    showShadow?: boolean;
    /**
     * Whether to display a background grid in the chart content area
     * @default true
     */
    showGrid?: boolean;
    /**
     * The aspect ratio of the chart (CSS aspect-ratio value)
     * @default '16/9'
     */
    aspectRatio?: string;
    /**
     * Fixed height for the chart (overrides aspectRatio)
     */
    height?: number | string;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom inline styles (supports utility classes)
     */
    style?: CSSProperties;
}
/**
 * Props for the Chart.Header component
 */
interface ChartHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * The header content (typically Chart.Title and Chart.Subtitle)
     */
    children?: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom inline styles (supports utility classes)
     */
    style?: CSSProperties;
}
/**
 * Props for the Chart.Title component
 */
interface ChartTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
    /**
     * The title text for the chart
     */
    children?: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom inline styles (supports utility classes)
     */
    style?: CSSProperties;
}
/**
 * Props for the Chart.Subtitle component
 */
interface ChartSubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
    /**
     * The subtitle text for the chart
     */
    children?: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom inline styles (supports utility classes)
     */
    style?: CSSProperties;
}
/**
 * Props for the Chart.Content component
 */
interface ChartContentProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * The chart visualization content (e.g., SVG, canvas, or third-party chart library)
     */
    children?: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom inline styles (supports utility classes)
     */
    style?: CSSProperties;
}
/**
 * Props for the Chart.Legend component
 */
interface ChartLegendProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * The position of the legend relative to the chart content
     * @default 'bottom'
     */
    position?: 'top' | 'bottom' | 'left' | 'right';
    /**
     * The legend items to display
     */
    children?: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom inline styles (supports utility classes)
     */
    style?: CSSProperties;
}
/**
 * Props for the Chart.Footer component
 */
interface ChartFooterProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * The footer content (typically source information or notes)
     */
    children?: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom inline styles (supports utility classes)
     */
    style?: CSSProperties;
}
declare const ChartComponent: React.ForwardRefExoticComponent<ChartProps & React.RefAttributes<HTMLDivElement>> & {
    Header: React.ForwardRefExoticComponent<ChartHeaderProps & React.RefAttributes<HTMLDivElement>>;
    Title: React.ForwardRefExoticComponent<ChartTitleProps & React.RefAttributes<HTMLHeadingElement>>;
    Subtitle: React.ForwardRefExoticComponent<ChartSubtitleProps & React.RefAttributes<HTMLParagraphElement>>;
    Content: React.ForwardRefExoticComponent<ChartContentProps & React.RefAttributes<HTMLDivElement>>;
    Legend: React.ForwardRefExoticComponent<ChartLegendProps & React.RefAttributes<HTMLDivElement>>;
    Footer: React.ForwardRefExoticComponent<ChartFooterProps & React.RefAttributes<HTMLDivElement>>;
};
export { ChartComponent as Chart };
export type { ChartProps, ChartHeaderProps, ChartTitleProps, ChartSubtitleProps, ChartContentProps, ChartLegendProps, ChartFooterProps };