@mdigital_ui/ui 0.1.0

package/dist/chunk-BP434VYV.js

@@ -0,0 +1,448 @@
+import { cn } from './chunk-YNNAOXU5.js';
+import { ResponsiveContainer, LineChart as LineChart$1, BarChart as BarChart$1, AreaChart as AreaChart$1, ComposedChart as ComposedChart$1, PieChart as PieChart$1, Tooltip, Legend, Pie, Cell, CartesianGrid, XAxis, YAxis, Area, Bar, Line } from 'recharts';
+import React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var chartContainerVariants = cva(
+  "w-full rounded-lg border border-border bg-card shadow-sm p-6 transition-all duration-200 hover:shadow-md",
+  {
+    variants: {
+      size: {
+        sm: "h-[var(--chart-height-sm)]",
+        md: "h-[var(--chart-height-md)]",
+        lg: "h-[var(--chart-height-lg)]",
+        xl: "h-[var(--chart-height-xl)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var defaultColors = [
+  "var(--color-primary)",
+  "var(--color-secondary)",
+  "var(--color-success)",
+  "var(--color-warning)",
+  "var(--color-error)",
+  "var(--color-info)"
+];
+var getChartColor = (index) => {
+  return defaultColors[index % defaultColors.length];
+};
+var tooltipStyle = {
+  backgroundColor: "var(--color-card)",
+  border: "1px solid var(--color-border)",
+  borderRadius: "var(--radius-md)",
+  fontSize: "var(--font-size-xs)",
+  boxShadow: "var(--shadow-md)"
+};
+var legendStyle = {
+  fontSize: "var(--font-size-xs)"
+};
+var axisTickStyle = {
+  fontSize: "var(--font-size-xs)",
+  fill: "var(--color-text-secondary)"
+};
+var axisLineStyle = {
+  stroke: "var(--color-border)"
+};
+var gridStyle = {
+  stroke: "var(--color-border)",
+  opacity: 0.3
+};
+var cursorStyle = {
+  fill: "var(--color-surface)",
+  opacity: 0.5
+};
+var renderSeriesItem = (seriesItem, index, defaultType) => {
+  const color = seriesItem.color || getChartColor(index);
+  const type = seriesItem.type || defaultType;
+  const key = `${type}-${seriesItem.dataKey}`;
+  switch (type) {
+    case "line":
+      return /* @__PURE__ */ jsx(
+        Line,
+        {
+          type: "monotone",
+          dataKey: seriesItem.dataKey,
+          stroke: color,
+          strokeWidth: 2.5,
+          name: seriesItem.name || seriesItem.dataKey,
+          dot: { fill: color, strokeWidth: 2, r: 4 },
+          activeDot: { r: 6, strokeWidth: 0 }
+        },
+        key
+      );
+    case "bar":
+      return /* @__PURE__ */ jsx(
+        Bar,
+        {
+          dataKey: seriesItem.dataKey,
+          fill: color,
+          name: seriesItem.name || seriesItem.dataKey,
+          radius: [4, 4, 0, 0]
+        },
+        key
+      );
+    case "area":
+      return /* @__PURE__ */ jsx(
+        Area,
+        {
+          type: "monotone",
+          dataKey: seriesItem.dataKey,
+          stroke: color,
+          fill: color,
+          fillOpacity: 0.2,
+          strokeWidth: 2.5,
+          name: seriesItem.name || seriesItem.dataKey
+        },
+        key
+      );
+    default:
+      return null;
+  }
+};
+var CartesianChartElements = ({
+  xAxisKey,
+  showGrid,
+  showTooltip,
+  showLegend,
+  xAxisLabel,
+  yAxisLabel
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  showGrid && /* @__PURE__ */ jsx(
+    CartesianGrid,
+    {
+      strokeDasharray: "3 3",
+      ...gridStyle
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    XAxis,
+    {
+      dataKey: xAxisKey,
+      stroke: "var(--color-text-secondary)",
+      tick: axisTickStyle,
+      axisLine: axisLineStyle,
+      tickLine: axisLineStyle,
+      label: xAxisLabel ? { value: xAxisLabel, position: "bottom", ...axisTickStyle } : void 0
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    YAxis,
+    {
+      stroke: "var(--color-text-secondary)",
+      tick: axisTickStyle,
+      axisLine: axisLineStyle,
+      tickLine: axisLineStyle,
+      label: yAxisLabel ? {
+        value: yAxisLabel,
+        angle: -90,
+        position: "left",
+        ...axisTickStyle
+      } : void 0
+    }
+  ),
+  showTooltip && /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      contentStyle: tooltipStyle,
+      cursor: cursorStyle
+    }
+  ),
+  showLegend && /* @__PURE__ */ jsx(
+    Legend,
+    {
+      wrapperStyle: legendStyle,
+      iconType: "circle",
+      iconSize: 8
+    }
+  )
+] });
+var LineChart = React.memo(
+  ({
+    data,
+    xAxisKey,
+    series,
+    size = "md",
+    className,
+    loading = false,
+    showGrid = true,
+    showLegend = true,
+    showTooltip = true,
+    xAxisLabel,
+    yAxisLabel
+  }) => {
+    if (loading) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            chartContainerVariants({ size }),
+            "flex items-center justify-center",
+            className
+          ),
+          children: /* @__PURE__ */ jsx("div", { className: "animate-pulse text-text-muted", children: "Loading chart..." })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("div", { className: cn(chartContainerVariants({ size }), className), children: /* @__PURE__ */ jsx(
+      ResponsiveContainer,
+      {
+        width: "100%",
+        height: "100%",
+        children: /* @__PURE__ */ jsxs(LineChart$1, { data, children: [
+          /* @__PURE__ */ jsx(
+            CartesianChartElements,
+            {
+              xAxisKey,
+              showGrid,
+              showTooltip,
+              showLegend,
+              xAxisLabel,
+              yAxisLabel
+            }
+          ),
+          series.map(
+            (seriesItem, index) => renderSeriesItem(seriesItem, index, "line")
+          )
+        ] })
+      }
+    ) });
+  }
+);
+LineChart.displayName = "LineChart";
+var BarChart = React.memo(
+  ({
+    data,
+    xAxisKey,
+    series,
+    size = "md",
+    className,
+    loading = false,
+    showGrid = true,
+    showLegend = true,
+    showTooltip = true,
+    xAxisLabel,
+    yAxisLabel
+  }) => {
+    if (loading) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            chartContainerVariants({ size }),
+            "flex items-center justify-center",
+            className
+          ),
+          children: /* @__PURE__ */ jsx("div", { className: "animate-pulse text-text-muted", children: "Loading chart..." })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("div", { className: cn(chartContainerVariants({ size }), className), children: /* @__PURE__ */ jsx(
+      ResponsiveContainer,
+      {
+        width: "100%",
+        height: "100%",
+        children: /* @__PURE__ */ jsxs(BarChart$1, { data, children: [
+          /* @__PURE__ */ jsx(
+            CartesianChartElements,
+            {
+              xAxisKey,
+              showGrid,
+              showTooltip,
+              showLegend,
+              xAxisLabel,
+              yAxisLabel
+            }
+          ),
+          series.map(
+            (seriesItem, index) => renderSeriesItem(seriesItem, index, "bar")
+          )
+        ] })
+      }
+    ) });
+  }
+);
+BarChart.displayName = "BarChart";
+var AreaChart = React.memo(
+  ({
+    data,
+    xAxisKey,
+    series,
+    size = "md",
+    className,
+    loading = false,
+    showGrid = true,
+    showLegend = true,
+    showTooltip = true,
+    xAxisLabel,
+    yAxisLabel
+  }) => {
+    if (loading) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            chartContainerVariants({ size }),
+            "flex items-center justify-center",
+            className
+          ),
+          children: /* @__PURE__ */ jsx("div", { className: "animate-pulse text-text-muted", children: "Loading chart..." })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("div", { className: cn(chartContainerVariants({ size }), className), children: /* @__PURE__ */ jsx(
+      ResponsiveContainer,
+      {
+        width: "100%",
+        height: "100%",
+        children: /* @__PURE__ */ jsxs(AreaChart$1, { data, children: [
+          /* @__PURE__ */ jsx(
+            CartesianChartElements,
+            {
+              xAxisKey,
+              showGrid,
+              showTooltip,
+              showLegend,
+              xAxisLabel,
+              yAxisLabel
+            }
+          ),
+          series.map(
+            (seriesItem, index) => renderSeriesItem(seriesItem, index, "area")
+          )
+        ] })
+      }
+    ) });
+  }
+);
+AreaChart.displayName = "AreaChart";
+var ComposedChart = React.memo(
+  ({
+    data,
+    xAxisKey,
+    series,
+    size = "md",
+    className,
+    loading = false,
+    showGrid = true,
+    showLegend = true,
+    showTooltip = true,
+    xAxisLabel,
+    yAxisLabel
+  }) => {
+    if (loading) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            chartContainerVariants({ size }),
+            "flex items-center justify-center",
+            className
+          ),
+          children: /* @__PURE__ */ jsx("div", { className: "animate-pulse text-text-muted", children: "Loading chart..." })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("div", { className: cn(chartContainerVariants({ size }), className), children: /* @__PURE__ */ jsx(
+      ResponsiveContainer,
+      {
+        width: "100%",
+        height: "100%",
+        children: /* @__PURE__ */ jsxs(ComposedChart$1, { data, children: [
+          /* @__PURE__ */ jsx(
+            CartesianChartElements,
+            {
+              xAxisKey,
+              showGrid,
+              showTooltip,
+              showLegend,
+              xAxisLabel,
+              yAxisLabel
+            }
+          ),
+          series.map(
+            (seriesItem, index) => renderSeriesItem(seriesItem, index, "line")
+          )
+        ] })
+      }
+    ) });
+  }
+);
+ComposedChart.displayName = "ComposedChart";
+var PieChart = React.memo(
+  ({
+    data,
+    dataKey,
+    nameKey,
+    size = "md",
+    className,
+    loading = false,
+    showLegend = true,
+    showTooltip = true,
+    innerRadius = 0
+  }) => {
+    if (loading) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            chartContainerVariants({ size }),
+            "flex items-center justify-center",
+            className
+          ),
+          children: /* @__PURE__ */ jsx("div", { className: "animate-pulse text-text-muted", children: "Loading chart..." })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("div", { className: cn(chartContainerVariants({ size }), className), children: /* @__PURE__ */ jsx(
+      ResponsiveContainer,
+      {
+        width: "100%",
+        height: "100%",
+        children: /* @__PURE__ */ jsxs(PieChart$1, { children: [
+          showTooltip && /* @__PURE__ */ jsx(Tooltip, { contentStyle: tooltipStyle }),
+          showLegend && /* @__PURE__ */ jsx(
+            Legend,
+            {
+              wrapperStyle: legendStyle,
+              iconType: "circle",
+              iconSize: 8
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Pie,
+            {
+              data,
+              dataKey,
+              nameKey,
+              cx: "50%",
+              cy: "50%",
+              innerRadius,
+              outerRadius: 80,
+              label: { ...axisTickStyle, fill: "var(--color-text-primary)" },
+              paddingAngle: 2,
+              children: data.map((_, index) => /* @__PURE__ */ jsx(
+                Cell,
+                {
+                  fill: getChartColor(index),
+                  stroke: "var(--color-card)",
+                  strokeWidth: 2
+                },
+                `cell-${index}`
+              ))
+            }
+          )
+        ] })
+      }
+    ) });
+  }
+);
+PieChart.displayName = "PieChart";
+
+export { AreaChart, BarChart, ComposedChart, LineChart, PieChart, axisLineStyle, axisTickStyle, chartContainerVariants, cursorStyle, getChartColor, gridStyle, legendStyle, tooltipStyle };
+//# sourceMappingURL=chunk-BP434VYV.js.map
+//# sourceMappingURL=chunk-BP434VYV.js.map

package/dist/chunk-BP434VYV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/chart/utils.ts","../src/chart/index.tsx"],"names":["RechartsLineChart","RechartsBarChart","RechartsAreaChart","RechartsComposedChart","RechartsPieChart"],"mappings":"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","file":"chunk-BP434VYV.js","sourcesContent":["import { cva } from 'class-variance-authority'\n\nexport const chartContainerVariants = cva(\n  'w-full rounded-lg border border-border bg-card shadow-sm p-6 transition-all duration-200 hover:shadow-md',\n  {\n    variants: {\n      size: {\n        sm: 'h-[var(--chart-height-sm)]',\n        md: 'h-[var(--chart-height-md)]',\n        lg: 'h-[var(--chart-height-lg)]',\n        xl: 'h-[var(--chart-height-xl)]',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\n// Default color palette using theme colors\nexport const defaultColors = [\n  'var(--color-primary)',\n  'var(--color-secondary)',\n  'var(--color-success)',\n  'var(--color-warning)',\n  'var(--color-error)',\n  'var(--color-info)',\n]\n\nexport const getChartColor = (index: number): string | undefined => {\n  return defaultColors[index % defaultColors.length]\n}\n\n// Shared style objects for Recharts components (uses CSS variables directly)\nexport const tooltipStyle = {\n  backgroundColor: 'var(--color-card)',\n  border: '1px solid var(--color-border)',\n  borderRadius: 'var(--radius-md)',\n  fontSize: 'var(--font-size-xs)',\n  boxShadow: 'var(--shadow-md)',\n}\n\nexport const legendStyle = {\n  fontSize: 'var(--font-size-xs)',\n}\n\nexport const axisTickStyle = {\n  fontSize: 'var(--font-size-xs)',\n  fill: 'var(--color-text-secondary)',\n}\n\nexport const axisLineStyle = {\n  stroke: 'var(--color-border)',\n}\n\nexport const gridStyle = {\n  stroke: 'var(--color-border)',\n  opacity: 0.3,\n}\n\nexport const cursorStyle = {\n  fill: 'var(--color-surface)',\n  opacity: 0.5,\n}\n","import {\n  Area,\n  Bar,\n  CartesianGrid,\n  Cell,\n  Legend,\n  Line,\n  Pie,\n  AreaChart as RechartsAreaChart,\n  BarChart as RechartsBarChart,\n  ComposedChart as RechartsComposedChart,\n  LineChart as RechartsLineChart,\n  PieChart as RechartsPieChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from 'recharts'\nimport React from 'react'\n\nimport { cn } from '../utils'\nimport type {\n  AreaChartProps,\n  BarChartProps,\n  ChartSeries,\n  ComposedChartProps,\n  LineChartProps,\n  PieChartProps,\n} from './types'\nimport {\n  axisLineStyle,\n  axisTickStyle,\n  chartContainerVariants,\n  cursorStyle,\n  getChartColor,\n  gridStyle,\n  legendStyle,\n  tooltipStyle,\n} from './utils'\n\n// Shared rendering logic for series\nconst renderSeriesItem = (\n  seriesItem: ChartSeries,\n  index: number,\n  defaultType: 'line' | 'bar' | 'area',\n) => {\n  const color = seriesItem.color || getChartColor(index)\n  const type = seriesItem.type || defaultType\n  const key = `${type}-${seriesItem.dataKey}`\n\n  switch (type) {\n    case 'line':\n      return (\n        <Line\n          key={key}\n          type=\"monotone\"\n          dataKey={seriesItem.dataKey}\n          stroke={color}\n          strokeWidth={2.5}\n          name={seriesItem.name || seriesItem.dataKey}\n          dot={{ fill: color, strokeWidth: 2, r: 4 }}\n          activeDot={{ r: 6, strokeWidth: 0 }}\n        />\n      )\n    case 'bar':\n      return (\n        <Bar\n          key={key}\n          dataKey={seriesItem.dataKey}\n          fill={color}\n          name={seriesItem.name || seriesItem.dataKey}\n          radius={[4, 4, 0, 0]}\n        />\n      )\n    case 'area':\n      return (\n        <Area\n          key={key}\n          type=\"monotone\"\n          dataKey={seriesItem.dataKey}\n          stroke={color}\n          fill={color}\n          fillOpacity={0.2}\n          strokeWidth={2.5}\n          name={seriesItem.name || seriesItem.dataKey}\n        />\n      )\n    default:\n      return null\n  }\n}\n\n// Shared chart elements\nconst CartesianChartElements: React.FC<{\n  xAxisKey: string\n  showGrid?: boolean\n  showTooltip?: boolean\n  showLegend?: boolean\n  xAxisLabel?: string\n  yAxisLabel?: string\n}> = ({\n  xAxisKey,\n  showGrid,\n  showTooltip,\n  showLegend,\n  xAxisLabel,\n  yAxisLabel,\n}) => (\n  <>\n    {showGrid && (\n      <CartesianGrid\n        strokeDasharray=\"3 3\"\n        {...gridStyle}\n      />\n    )}\n    <XAxis\n      dataKey={xAxisKey}\n      stroke=\"var(--color-text-secondary)\"\n      tick={axisTickStyle}\n      axisLine={axisLineStyle}\n      tickLine={axisLineStyle}\n      label={\n        xAxisLabel\n          ? { value: xAxisLabel, position: 'bottom', ...axisTickStyle }\n          : undefined\n      }\n    />\n    <YAxis\n      stroke=\"var(--color-text-secondary)\"\n      tick={axisTickStyle}\n      axisLine={axisLineStyle}\n      tickLine={axisLineStyle}\n      label={\n        yAxisLabel\n          ? {\n              value: yAxisLabel,\n              angle: -90,\n              position: 'left',\n              ...axisTickStyle,\n            }\n          : undefined\n      }\n    />\n    {showTooltip && (\n      <Tooltip\n        contentStyle={tooltipStyle}\n        cursor={cursorStyle}\n      />\n    )}\n    {showLegend && (\n      <Legend\n        wrapperStyle={legendStyle}\n        iconType=\"circle\"\n        iconSize={8}\n      />\n    )}\n  </>\n)\n\n// Line Chart Component\nexport const LineChart = React.memo<LineChartProps>(\n  ({\n    data,\n    xAxisKey,\n    series,\n    size = 'md',\n    className,\n    loading = false,\n    showGrid = true,\n    showLegend = true,\n    showTooltip = true,\n    xAxisLabel,\n    yAxisLabel,\n  }) => {\n    if (loading) {\n      return (\n        <div\n          className={cn(\n            chartContainerVariants({ size }),\n            'flex items-center justify-center',\n            className,\n          )}\n        >\n          <div className=\"animate-pulse text-text-muted\">Loading chart...</div>\n        </div>\n      )\n    }\n\n    return (\n      <div className={cn(chartContainerVariants({ size }), className)}>\n        <ResponsiveContainer\n          width=\"100%\"\n          height=\"100%\"\n        >\n          <RechartsLineChart data={data}>\n            <CartesianChartElements\n              xAxisKey={xAxisKey}\n              showGrid={showGrid}\n              showTooltip={showTooltip}\n              showLegend={showLegend}\n              xAxisLabel={xAxisLabel}\n              yAxisLabel={yAxisLabel}\n            />\n            {series.map((seriesItem, index) =>\n              renderSeriesItem(seriesItem, index, 'line'),\n            )}\n          </RechartsLineChart>\n        </ResponsiveContainer>\n      </div>\n    )\n  },\n)\n\nLineChart.displayName = 'LineChart'\n\n// Bar Chart Component\nexport const BarChart = React.memo<BarChartProps>(\n  ({\n    data,\n    xAxisKey,\n    series,\n    size = 'md',\n    className,\n    loading = false,\n    showGrid = true,\n    showLegend = true,\n    showTooltip = true,\n    xAxisLabel,\n    yAxisLabel,\n  }) => {\n    if (loading) {\n      return (\n        <div\n          className={cn(\n            chartContainerVariants({ size }),\n            'flex items-center justify-center',\n            className,\n          )}\n        >\n          <div className=\"animate-pulse text-text-muted\">Loading chart...</div>\n        </div>\n      )\n    }\n\n    return (\n      <div className={cn(chartContainerVariants({ size }), className)}>\n        <ResponsiveContainer\n          width=\"100%\"\n          height=\"100%\"\n        >\n          <RechartsBarChart data={data}>\n            <CartesianChartElements\n              xAxisKey={xAxisKey}\n              showGrid={showGrid}\n              showTooltip={showTooltip}\n              showLegend={showLegend}\n              xAxisLabel={xAxisLabel}\n              yAxisLabel={yAxisLabel}\n            />\n            {series.map((seriesItem, index) =>\n              renderSeriesItem(seriesItem, index, 'bar'),\n            )}\n          </RechartsBarChart>\n        </ResponsiveContainer>\n      </div>\n    )\n  },\n)\n\nBarChart.displayName = 'BarChart'\n\n// Area Chart Component\nexport const AreaChart = React.memo<AreaChartProps>(\n  ({\n    data,\n    xAxisKey,\n    series,\n    size = 'md',\n    className,\n    loading = false,\n    showGrid = true,\n    showLegend = true,\n    showTooltip = true,\n    xAxisLabel,\n    yAxisLabel,\n  }) => {\n    if (loading) {\n      return (\n        <div\n          className={cn(\n            chartContainerVariants({ size }),\n            'flex items-center justify-center',\n            className,\n          )}\n        >\n          <div className=\"animate-pulse text-text-muted\">Loading chart...</div>\n        </div>\n      )\n    }\n\n    return (\n      <div className={cn(chartContainerVariants({ size }), className)}>\n        <ResponsiveContainer\n          width=\"100%\"\n          height=\"100%\"\n        >\n          <RechartsAreaChart data={data}>\n            <CartesianChartElements\n              xAxisKey={xAxisKey}\n              showGrid={showGrid}\n              showTooltip={showTooltip}\n              showLegend={showLegend}\n              xAxisLabel={xAxisLabel}\n              yAxisLabel={yAxisLabel}\n            />\n            {series.map((seriesItem, index) =>\n              renderSeriesItem(seriesItem, index, 'area'),\n            )}\n          </RechartsAreaChart>\n        </ResponsiveContainer>\n      </div>\n    )\n  },\n)\n\nAreaChart.displayName = 'AreaChart'\n\n// Composed Chart Component (supports mixing line, bar, area)\nexport const ComposedChart = React.memo<ComposedChartProps>(\n  ({\n    data,\n    xAxisKey,\n    series,\n    size = 'md',\n    className,\n    loading = false,\n    showGrid = true,\n    showLegend = true,\n    showTooltip = true,\n    xAxisLabel,\n    yAxisLabel,\n  }) => {\n    if (loading) {\n      return (\n        <div\n          className={cn(\n            chartContainerVariants({ size }),\n            'flex items-center justify-center',\n            className,\n          )}\n        >\n          <div className=\"animate-pulse text-text-muted\">Loading chart...</div>\n        </div>\n      )\n    }\n\n    return (\n      <div className={cn(chartContainerVariants({ size }), className)}>\n        <ResponsiveContainer\n          width=\"100%\"\n          height=\"100%\"\n        >\n          <RechartsComposedChart data={data}>\n            <CartesianChartElements\n              xAxisKey={xAxisKey}\n              showGrid={showGrid}\n              showTooltip={showTooltip}\n              showLegend={showLegend}\n              xAxisLabel={xAxisLabel}\n              yAxisLabel={yAxisLabel}\n            />\n            {series.map((seriesItem, index) =>\n              renderSeriesItem(seriesItem, index, 'line'),\n            )}\n          </RechartsComposedChart>\n        </ResponsiveContainer>\n      </div>\n    )\n  },\n)\n\nComposedChart.displayName = 'ComposedChart'\n\n// Pie Chart Component\nexport const PieChart = React.memo<PieChartProps>(\n  ({\n    data,\n    dataKey,\n    nameKey,\n    size = 'md',\n    className,\n    loading = false,\n    showLegend = true,\n    showTooltip = true,\n    innerRadius = 0,\n  }) => {\n    if (loading) {\n      return (\n        <div\n          className={cn(\n            chartContainerVariants({ size }),\n            'flex items-center justify-center',\n            className,\n          )}\n        >\n          <div className=\"animate-pulse text-text-muted\">Loading chart...</div>\n        </div>\n      )\n    }\n\n    return (\n      <div className={cn(chartContainerVariants({ size }), className)}>\n        <ResponsiveContainer\n          width=\"100%\"\n          height=\"100%\"\n        >\n          <RechartsPieChart>\n            {showTooltip && <Tooltip contentStyle={tooltipStyle} />}\n            {showLegend && (\n              <Legend\n                wrapperStyle={legendStyle}\n                iconType=\"circle\"\n                iconSize={8}\n              />\n            )}\n            <Pie\n              data={data}\n              dataKey={dataKey}\n              nameKey={nameKey}\n              cx=\"50%\"\n              cy=\"50%\"\n              innerRadius={innerRadius}\n              outerRadius={80}\n              label={{ ...axisTickStyle, fill: 'var(--color-text-primary)' }}\n              paddingAngle={2}\n            >\n              {data.map((_, index) => (\n                <Cell\n                  key={`cell-${index}`}\n                  fill={getChartColor(index)}\n                  stroke=\"var(--color-card)\"\n                  strokeWidth={2}\n                />\n              ))}\n            </Pie>\n          </RechartsPieChart>\n        </ResponsiveContainer>\n      </div>\n    )\n  },\n)\n\nPieChart.displayName = 'PieChart'\n\nexport type * from './types'\nexport {\n  chartContainerVariants,\n  getChartColor,\n  tooltipStyle,\n  legendStyle,\n  axisTickStyle,\n  axisLineStyle,\n  gridStyle,\n  cursorStyle,\n} from './utils'\n"]}

package/dist/chunk-C7SXY3ZV.js

@@ -0,0 +1,65 @@
+import { cn } from './chunk-YNNAOXU5.js';
+import { cva } from 'class-variance-authority';
+import React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var ribbonVariants = cva(
+  "absolute z-10 rounded-md font-semibold whitespace-nowrap",
+  {
+    variants: {
+      size: {
+        xs: "px-2 py-0.5 text-xs",
+        sm: "px-3 py-1 text-xs",
+        md: "px-4 py-1.5 text-sm",
+        lg: "px-5 py-2 text-base"
+      },
+      position: {
+        "top-left": "-top-2 -left-2",
+        "top-right": "-top-2 -right-2",
+        "bottom-left": "-bottom-2 -left-2",
+        "bottom-right": "-bottom-2 -right-2"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      position: "top-right"
+    }
+  }
+);
+var ribbonColorStyles = {
+  default: "bg-surface text-text-primary",
+  primary: "bg-primary text-white",
+  secondary: "bg-secondary text-white",
+  accent: "bg-accent text-white",
+  success: "bg-success text-white",
+  error: "bg-error text-white",
+  warning: "bg-warning text-white",
+  info: "bg-info text-white"
+};
+var Ribbon = React.memo(
+  ({
+    children,
+    color = "primary",
+    size = "md",
+    position = "top-right",
+    className
+  }) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          ribbonVariants({ size, position }),
+          ribbonColorStyles[color],
+          className
+        ),
+        children
+      }
+    );
+  }
+);
+Ribbon.displayName = "Ribbon";
+var ribbon_default = Ribbon;
+
+export { Ribbon, ribbon_default };
+//# sourceMappingURL=chunk-C7SXY3ZV.js.map
+//# sourceMappingURL=chunk-C7SXY3ZV.js.map

package/dist/chunk-C7SXY3ZV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ribbon/index.tsx"],"names":[],"mappings":";;;;;AAMA,IAAM,cAAA,GAAiB,GAAA;AAAA,EACrB,0DAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,qBAAA;AAAA,QACJ,EAAA,EAAI,mBAAA;AAAA,QACJ,EAAA,EAAI,qBAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,QAAA,EAAU;AAAA,QACR,UAAA,EAAY,gBAAA;AAAA,QACZ,WAAA,EAAa,iBAAA;AAAA,QACb,aAAA,EAAe,mBAAA;AAAA,QACf,cAAA,EAAgB;AAAA;AAClB,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,IAAA;AAAA,MACN,QAAA,EAAU;AAAA;AACZ;AAEJ,CAAA;AAEA,IAAM,iBAAA,GAAoB;AAAA,EACxB,OAAA,EAAS,8BAAA;AAAA,EACT,OAAA,EAAS,uBAAA;AAAA,EACT,SAAA,EAAW,yBAAA;AAAA,EACX,MAAA,EAAQ,sBAAA;AAAA,EACR,OAAA,EAAS,uBAAA;AAAA,EACT,KAAA,EAAO,qBAAA;AAAA,EACP,OAAA,EAAS,uBAAA;AAAA,EACT,IAAA,EAAM;AACR,CAAA;AAEO,IAAM,SAAS,KAAA,CAAM,IAAA;AAAA,EAC1B,CAAC;AAAA,IACC,QAAA;AAAA,IACA,KAAA,GAAQ,SAAA;AAAA,IACR,IAAA,GAAO,IAAA;AAAA,IACP,QAAA,GAAW,WAAA;AAAA,IACX;AAAA,GACF,KAAM;AACJ,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,cAAA,CAAe,EAAE,IAAA,EAAM,QAAA,EAAU,CAAA;AAAA,UACjC,kBAAkB,KAAK,CAAA;AAAA,UACvB;AAAA,SACF;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;AAGrB,IAAO,cAAA,GAAQ","file":"chunk-C7SXY3ZV.js","sourcesContent":["import { cva } from 'class-variance-authority'\nimport React from 'react'\n\nimport { cn } from '../utils'\nimport type { RibbonProps } from './types'\n\nconst ribbonVariants = cva(\n  'absolute z-10 rounded-md font-semibold whitespace-nowrap',\n  {\n    variants: {\n      size: {\n        xs: 'px-2 py-0.5 text-xs',\n        sm: 'px-3 py-1 text-xs',\n        md: 'px-4 py-1.5 text-sm',\n        lg: 'px-5 py-2 text-base',\n      },\n      position: {\n        'top-left': '-top-2 -left-2',\n        'top-right': '-top-2 -right-2',\n        'bottom-left': '-bottom-2 -left-2',\n        'bottom-right': '-bottom-2 -right-2',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      position: 'top-right',\n    },\n  },\n)\n\nconst ribbonColorStyles = {\n  default: 'bg-surface text-text-primary',\n  primary: 'bg-primary text-white',\n  secondary: 'bg-secondary text-white',\n  accent: 'bg-accent text-white',\n  success: 'bg-success text-white',\n  error: 'bg-error text-white',\n  warning: 'bg-warning text-white',\n  info: 'bg-info text-white',\n}\n\nexport const Ribbon = React.memo<RibbonProps>(\n  ({\n    children,\n    color = 'primary',\n    size = 'md',\n    position = 'top-right',\n    className,\n  }) => {\n    return (\n      <div\n        className={cn(\n          ribbonVariants({ size, position }),\n          ribbonColorStyles[color],\n          className,\n        )}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\nRibbon.displayName = 'Ribbon'\n\nexport type * from './types'\nexport default Ribbon\n"]}