shadcn-chart 0.1.0

package/README.md

@@ -0,0 +1,202 @@
+# shadcn-chart
+
+[![npm version](https://img.shields.io/npm/v/shadcn-chart.svg)](https://www.npmjs.com/package/shadcn-chart)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+
+Beautiful, customizable chart components built with [shadcn/ui](https://ui.shadcn.com/) conventions and [Recharts](https://recharts.org/).
+
+## ✨ Features
+
+- 📊 **5 Chart Types** - Area, Bar, Line, Pie, and Radial charts
+- 🎨 **Multiple Variants** - Each chart has different display modes (stacked, gradient, interactive, etc.)
+- 🌙 **Dark Mode Ready** - Built-in CSS variables for light/dark themes
+- 📱 **Responsive** - Works on all screen sizes
+- 🔧 **Highly Customizable** - Extensive props for fine-tuning
+- 📦 **Tree-shakeable** - Only import what you need
+- 💪 **TypeScript** - Full type definitions included
+
+## 📦 Installation
+
+```bash
+npm install shadcn-chart
+# or
+yarn add shadcn-chart
+# or
+pnpm add shadcn-chart
+```
+
+### Peer Dependencies
+
+```bash
+npm install react react-dom recharts lucide-react
+```
+
+## 🚀 Quick Start
+
+### 1. Import Styles
+
+Add to your root layout or CSS entry point:
+
+```tsx
+// Next.js: app/layout.tsx or pages/_app.tsx
+// Vite: main.tsx
+import 'shadcn-chart/styles';
+```
+
+### 2. Use Components
+
+```tsx
+import { AreaChartComponent } from 'shadcn-chart';
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+];
+
+const chartConfig = {
+  desktop: { label: "Desktop", color: "var(--chart-1)" },
+  mobile: { label: "Mobile", color: "var(--chart-2)" },
+};
+
+export default function MyChart() {
+  return (
+    <AreaChartComponent
+      title="Website Traffic"
+      description="Visitor statistics"
+      data={chartData}
+      chartConfig={chartConfig}
+      variant="gradient"
+      showLegend
+    />
+  );
+}
+```
+
+## 📊 Components
+
+### AreaChartComponent
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `Array<Record<string, string \| number>>` | **required** | Chart data array |
+| `chartConfig` | `ChartConfig` | **required** | Color and label configuration |
+| `variant` | `'default' \| 'linear' \| 'step' \| 'stacked' \| 'stacked-expanded' \| 'gradient' \| 'legend' \| 'interactive'` | `'default'` | Display variant |
+| `title` | `string` | - | Card title |
+| `description` | `string` | - | Card description |
+| `xAxisKey` | `string` | `'month'` | Data key for X-axis |
+| `showGrid` | `boolean` | `true` | Show grid lines |
+| `showTooltip` | `boolean` | `true` | Show tooltip on hover |
+| `showLegend` | `boolean` | auto | Show chart legend |
+| `showDots` | `boolean` | auto | Show data point dots |
+| `useGradient` | `boolean` | auto | Use gradient fill |
+
+### BarChartComponent
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `Array<Record<string, string \| number>>` | **required** | Chart data array |
+| `chartConfig` | `ChartConfig` | **required** | Color and label configuration |
+| `variant` | `'default' \| 'horizontal' \| 'multiple' \| 'stacked' \| 'stacked-legend' \| 'label' \| 'negative' \| 'mixed' \| 'interactive'` | `'default'` | Display variant |
+| `layout` | `'vertical' \| 'horizontal'` | auto | Bar orientation |
+| `showLabels` | `boolean` | auto | Show value labels on bars |
+| `barRadius` | `number \| [number, number, number, number]` | auto | Bar corner radius |
+
+### LineChartComponent
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `Array<Record<string, string \| number>>` | **required** | Chart data array |
+| `chartConfig` | `ChartConfig` | **required** | Color and label configuration |
+| `dot` | `boolean \| function` | `false` | Show/customize data points |
+| `yAxisConfig` | `object` | - | Y-axis configuration |
+| `toggleOptions` | `object` | - | Time period toggle buttons |
+
+### PieChartComponent
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `PieChartData[]` | **required** | Pie chart data with category, value, percentage |
+| `chartConfig` | `ChartConfig` | **required** | Color and label configuration |
+| `innerRadius` | `number` | `0` | Donut hole radius |
+| `outerRadius` | `number` | `100` | Pie outer radius |
+| `showActiveSection` | `boolean` | `false` | Animate active section on hover |
+| `paddingAngle` | `number` | `0` | Gap between segments |
+
+### RadialChartShapeComponent
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `RadialChartData` | **required** | Single data object with percentage |
+| `chartConfig` | `ChartConfig` | **required** | Color and label configuration |
+| `centerLabel` | `string` | - | Label in center of chart |
+| `innerRadius` | `number` | `80` | Inner radius |
+| `outerRadius` | `number` | `130` | Outer radius |
+| `animationDuration` | `number` | `2.5` | Animation duration in seconds |
+
+## 🎨 Theming
+
+The package uses CSS variables for theming. Override these in your CSS:
+
+```css
+:root {
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+}
+
+.dark {
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+}
+```
+
+## ⚙️ Tailwind CSS Configuration
+
+### Tailwind v4
+
+No extra configuration needed - just import the styles.
+
+### Tailwind v3
+
+Add the package to your content paths:
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/shadcn-chart/dist/**/*.{js,mjs}',
+  ],
+};
+```
+
+## 🌐 Framework Compatibility
+
+| Framework | Status |
+|-----------|--------|
+| Next.js (App Router) | ✅ Supported |
+| Next.js (Pages Router) | ✅ Supported |
+| Vite | ✅ Supported |
+| Create React App | ✅ Supported |
+| Astro | ✅ Supported |
+| Remix | ✅ Supported |
+| TanStack Start | ✅ Supported |
+
+## 📄 License
+
+MIT © [MnhTng](https://github.com/mnhtng)
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 📝 Changelog
+
+See [GitHub Releases](https://github.com/mnhtng/shadcn-chart/releases) for changelog.

package/dist/index.d.mts

@@ -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 };