shadcn-chart 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,288 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import React__default from 'react';
+import * as RechartsPrimitive from 'recharts';
+import { ClassValue } from 'clsx';
+
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+type ChartConfig = {
+    [k in string]: {
+        label?: React$1.ReactNode;
+        icon?: React$1.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+declare function ChartContainer({ id, className, children, config, ...props }: React$1.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React$1.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+}): react_jsx_runtime.JSX.Element;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => react_jsx_runtime.JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: React$1.ComponentProps<typeof RechartsPrimitive.Tooltip> & React$1.ComponentProps<"div"> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+}): react_jsx_runtime.JSX.Element | null;
+declare const ChartLegend: typeof RechartsPrimitive.Legend;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React$1.ComponentProps<"div"> & Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+}): react_jsx_runtime.JSX.Element | null;
+
+type AreaChartVariant = 'default' | 'linear' | 'step' | 'stacked' | 'stacked-expanded' | 'gradient' | 'legend' | 'interactive';
+type AreaCurveType = 'monotone' | 'linear' | 'step' | 'stepBefore' | 'stepAfter' | 'natural' | 'basis';
+interface AreaConfig {
+    dataKey: string;
+    fill?: string;
+    stroke?: string;
+    stackId?: string;
+    type?: AreaCurveType;
+    fillOpacity?: number;
+}
+interface AreaChartComponentProps {
+    title?: string;
+    description?: string;
+    data: Array<Record<string, string | number>>;
+    chartConfig: ChartConfig;
+    className?: string;
+    variant?: AreaChartVariant;
+    areas?: AreaConfig[];
+    xAxisKey?: string;
+    xAxisFormatter?: (value: string) => string;
+    yAxisConfig?: {
+        domain?: [number, number] | 'auto';
+        tickFormatter?: (value: number) => string;
+        hide?: boolean;
+    };
+    showGrid?: boolean;
+    showTooltip?: boolean;
+    showLegend?: boolean;
+    showDots?: boolean;
+    showActiveDot?: boolean;
+    useGradient?: boolean;
+    gradientOpacity?: {
+        start: number;
+        end: number;
+    };
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    footerContent?: {
+        mainText?: string;
+        subText?: string;
+        showTrending?: boolean;
+        trendingIcon?: React.ReactNode;
+        trendingColor?: string;
+    };
+}
+declare const AreaChartComponent: ({ title, description, data, chartConfig, className, variant, areas, xAxisKey, xAxisFormatter, yAxisConfig, showGrid, showTooltip, showLegend, showDots, showActiveDot, useGradient, gradientOpacity, margin, footerContent, }: AreaChartComponentProps) => react_jsx_runtime.JSX.Element;
+declare const AreaChartExample: () => react_jsx_runtime.JSX.Element;
+
+type BarChartVariant = 'default' | 'horizontal' | 'multiple' | 'stacked' | 'stacked-legend' | 'label' | 'negative' | 'mixed' | 'interactive';
+interface BarConfig {
+    dataKey: string;
+    fill?: string;
+    radius?: number | [number, number, number, number];
+    stackId?: string;
+    name?: string;
+}
+interface BarChartComponentProps {
+    title?: string;
+    description?: string;
+    data: Array<Record<string, string | number>>;
+    chartConfig: ChartConfig;
+    className?: string;
+    variant?: BarChartVariant;
+    bars?: BarConfig[];
+    xAxisKey?: string;
+    xAxisFormatter?: (value: string) => string;
+    yAxisConfig?: {
+        dataKey?: string;
+        domain?: [number, number] | 'auto';
+        tickFormatter?: (value: number) => string;
+        hide?: boolean;
+    };
+    showGrid?: boolean;
+    showTooltip?: boolean;
+    showLegend?: boolean;
+    showLabels?: boolean;
+    labelPosition?: 'top' | 'center' | 'bottom' | 'inside' | 'insideTop' | 'insideBottom';
+    labelFormatter?: (value: number) => string;
+    tooltipNameKey?: string;
+    layout?: 'vertical' | 'horizontal';
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    barRadius?: number | [number, number, number, number];
+    barGap?: number;
+    barCategoryGap?: string | number;
+    positiveColor?: string;
+    negativeColor?: string;
+    footerContent?: {
+        mainText?: string;
+        subText?: string;
+        showTrending?: boolean;
+        trendingIcon?: React.ReactNode;
+        trendingColor?: string;
+    };
+}
+declare const BarChartComponent: ({ title, description, data, chartConfig, className, variant, bars, xAxisKey, xAxisFormatter, yAxisConfig, showGrid, showTooltip, showLegend, showLabels, labelPosition, labelFormatter, tooltipNameKey, layout, margin, barRadius, barGap, barCategoryGap, positiveColor, negativeColor, footerContent, }: BarChartComponentProps) => react_jsx_runtime.JSX.Element;
+declare const BarChartExample: () => react_jsx_runtime.JSX.Element;
+
+interface ToggleOption {
+    value: string;
+    label: string;
+    icon?: React__default.ReactNode;
+}
+interface LineChartComponentProps {
+    title?: string;
+    description?: string;
+    data: Array<Record<string, string | number>>;
+    chartConfig: ChartConfig;
+    xAxisKey?: string;
+    yAxisConfig?: {
+        domain?: [number, number] | "auto";
+        padding?: number;
+        tickCount?: number;
+        formatType?: 'auto' | 'full' | 'compact' | 'currency' | 'percentage';
+        customFormatter?: (value: number) => string;
+        tickFormatter?: (value: number) => string;
+    };
+    lines?: Array<{
+        dataKey: string;
+        stroke?: string;
+        strokeWidth?: number;
+        type?: "monotone" | "linear" | "step" | "stepBefore" | "stepAfter";
+        dot?: boolean;
+    }>;
+    dot?: boolean | ((props: any) => React__default.ReactElement);
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    footerContent?: {
+        mainText?: string;
+        subText?: string;
+        showTrending?: boolean;
+        trendingIcon?: React__default.ReactNode;
+        trendingColor?: string;
+    };
+    toggleOptions?: {
+        options: ToggleOption[];
+        currentValue: string;
+        onChange: (value: string) => void;
+        position?: "header-right" | "header-left";
+    };
+    className?: string;
+}
+declare function LineChartComponent({ title, description, data, chartConfig, xAxisKey, yAxisConfig, lines, dot, margin, footerContent, toggleOptions, className }: LineChartComponentProps): react_jsx_runtime.JSX.Element;
+interface UserActivityChartProps {
+    className?: string;
+}
+declare const LineChartExample: ({ className }: UserActivityChartProps) => react_jsx_runtime.JSX.Element;
+
+interface PieChartData {
+    category: string;
+    value: number;
+    percentage: number;
+    fill?: string;
+    [key: string]: unknown;
+}
+interface PieChartProps {
+    title?: string;
+    description?: string;
+    data: PieChartData[];
+    chartConfig: ChartConfig;
+    className?: string;
+    dataKey?: string;
+    nameKey?: string;
+    legendKey?: string;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    strokeWidth?: number;
+    stroke?: string;
+    animationDuration?: number;
+    enableAnimation?: boolean;
+    showLegend?: boolean;
+    showTooltip?: boolean;
+    showActiveSection?: boolean;
+    footerContent?: {
+        mainText?: string;
+        subText?: string;
+        showTrending?: boolean;
+        trendingColor?: string;
+        trendingIcon?: React.ReactNode;
+    };
+}
+declare const PieChartComponent: ({ title, description, data, chartConfig, className, dataKey, nameKey, legendKey, innerRadius, outerRadius, strokeWidth, cornerRadius, paddingAngle, stroke, showLegend, showTooltip, showActiveSection, footerContent }: PieChartProps) => react_jsx_runtime.JSX.Element;
+declare const PieChartExample: () => react_jsx_runtime.JSX.Element;
+
+interface RadialChartData {
+    category: string;
+    value: number;
+    percentage: number;
+    fill?: string;
+}
+interface RadialChartProps {
+    title?: string;
+    description?: string;
+    data: RadialChartData;
+    chartConfig: ChartConfig;
+    centerLabel?: string;
+    footerContent?: {
+        mainText?: string;
+        subText?: string;
+        showTrending?: boolean;
+        trendingColor?: string;
+        trendingIcon?: React.ReactNode;
+    };
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    startAngle?: number;
+    className?: string;
+    numberSize?: 'sm' | 'md' | 'lg' | 'xl';
+    labelSize?: 'xs' | 'sm' | 'md';
+    animationDuration?: number;
+    centerOffset?: {
+        x?: number;
+        y?: number;
+    };
+}
+declare const RadialChartShapeComponent: ({ title, description, data, centerLabel, footerContent, chartConfig, innerRadius, outerRadius, cornerRadius, startAngle, className, numberSize, labelSize, animationDuration, centerOffset }: RadialChartProps) => react_jsx_runtime.JSX.Element;
+declare const RadialChartExample: () => react_jsx_runtime.JSX.Element;
+
+declare function Card({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardTitle({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardDescription({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardAction({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardContent({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { AreaChartComponent, type AreaChartComponentProps, AreaChartExample, type AreaChartVariant, type AreaConfig, type AreaCurveType, BarChartComponent, type BarChartComponentProps, BarChartExample, type BarChartVariant, type BarConfig, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, LineChartComponent, LineChartExample, PieChartComponent, type PieChartData, PieChartExample, type PieChartProps, type RadialChartData, RadialChartExample, type RadialChartProps, RadialChartShapeComponent, cn };