@optilogic/charts 1.0.0-beta.0

package/dist/index.js

@@ -0,0 +1,302 @@
+import * as React from 'react';
+import { ResponsiveContainer, LineChart as LineChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Line, BarChart as BarChart$1, Bar } from 'recharts';
+import { cn } from '@optilogic/core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/line-chart.tsx
+var CHART_COLORS = [
+  "hsl(var(--chart-1))",
+  "hsl(var(--chart-2))",
+  "hsl(var(--chart-3))",
+  "hsl(var(--chart-4))",
+  "hsl(var(--chart-5))"
+];
+function getChartColor(index, custom) {
+  if (custom) return custom;
+  return CHART_COLORS[index % CHART_COLORS.length] ?? "hsl(var(--chart-1))";
+}
+var LineChart = React.forwardRef(
+  ({
+    data,
+    series,
+    xAxis,
+    yAxis,
+    grid = true,
+    tooltip = true,
+    legend = false,
+    animate = false,
+    className,
+    height = "100%",
+    margin = { top: 8, right: 12, left: 0, bottom: 4 }
+  }, ref) => {
+    const gridConfig = React.useMemo(() => {
+      if (grid === false) return null;
+      if (grid === true) return { vertical: false, horizontal: true };
+      return grid;
+    }, [grid]);
+    const legendConfig = React.useMemo(() => {
+      if (legend === false) return null;
+      if (legend === true)
+        return { position: "top", align: "right" };
+      return legend;
+    }, [legend]);
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), style: { height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin, children: [
+      gridConfig && /* @__PURE__ */ jsx(
+        CartesianGrid,
+        {
+          strokeDasharray: "3 3",
+          stroke: "hsl(var(--divider))",
+          vertical: gridConfig.vertical ?? false,
+          horizontal: gridConfig.horizontal ?? true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: xAxis.dataKey,
+          tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
+          tickLine: false,
+          axisLine: false,
+          minTickGap: xAxis.minTickGap ?? 24,
+          tickFormatter: xAxis.tickFormatter,
+          label: xAxis.label ? {
+            value: xAxis.label,
+            position: "insideBottom",
+            offset: -4,
+            fontSize: 11,
+            fill: "hsl(var(--muted-foreground))"
+          } : void 0
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          domain: yAxis?.domain ?? ["auto", "auto"],
+          tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
+          tickLine: false,
+          axisLine: false,
+          width: yAxis?.width ?? 30,
+          tickFormatter: yAxis?.tickFormatter,
+          label: yAxis?.label ? {
+            value: yAxis.label,
+            angle: -90,
+            position: "insideLeft",
+            fontSize: 11,
+            fill: "hsl(var(--muted-foreground))"
+          } : void 0
+        }
+      ),
+      tooltip && /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          contentStyle: {
+            background: "hsl(var(--card))",
+            border: "1px solid hsl(var(--border))",
+            borderRadius: 6,
+            fontSize: 11
+          },
+          labelStyle: {
+            color: "hsl(var(--foreground))",
+            fontWeight: 500,
+            marginBottom: 4
+          },
+          itemStyle: {
+            color: "hsl(var(--foreground))"
+          }
+        }
+      ),
+      legendConfig && /* @__PURE__ */ jsx(
+        Legend,
+        {
+          verticalAlign: legendConfig.position ?? "top",
+          align: legendConfig.align ?? "right",
+          wrapperStyle: { fontSize: 11, paddingBottom: 4 }
+        }
+      ),
+      series.map((s, index) => /* @__PURE__ */ jsx(
+        Line,
+        {
+          type: s.type ?? "monotone",
+          dataKey: s.dataKey,
+          name: s.name,
+          stroke: getChartColor(index, s.color),
+          strokeWidth: s.strokeWidth ?? 2,
+          dot: s.dot ?? false,
+          isAnimationActive: animate
+        },
+        s.dataKey
+      ))
+    ] }) }) });
+  }
+);
+LineChart.displayName = "LineChart";
+var BarChart = React.forwardRef(
+  ({
+    data,
+    series,
+    layout = "vertical",
+    xAxis,
+    yAxis,
+    grid = true,
+    tooltip = true,
+    legend = false,
+    animate = true,
+    barSize,
+    barGap,
+    barCategoryGap,
+    className,
+    height = "100%",
+    margin = { top: 8, right: 12, left: 0, bottom: 4 }
+  }, ref) => {
+    const gridConfig = React.useMemo(() => {
+      if (grid === false) return null;
+      if (grid === true) return { vertical: false, horizontal: true };
+      return grid;
+    }, [grid]);
+    const legendConfig = React.useMemo(() => {
+      if (legend === false) return null;
+      if (legend === true)
+        return { position: "top", align: "right" };
+      return legend;
+    }, [legend]);
+    const isHorizontal = layout === "horizontal";
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), style: { height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+      BarChart$1,
+      {
+        data,
+        layout: isHorizontal ? "vertical" : "horizontal",
+        margin,
+        barSize,
+        barGap,
+        barCategoryGap,
+        children: [
+          gridConfig && /* @__PURE__ */ jsx(
+            CartesianGrid,
+            {
+              strokeDasharray: "3 3",
+              stroke: "hsl(var(--divider))",
+              vertical: isHorizontal ? gridConfig.horizontal ?? true : gridConfig.vertical ?? false,
+              horizontal: isHorizontal ? gridConfig.vertical ?? false : gridConfig.horizontal ?? true
+            }
+          ),
+          isHorizontal ? /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              type: "number",
+              domain: yAxis?.domain ?? ["auto", "auto"],
+              tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
+              tickLine: false,
+              axisLine: false,
+              tickFormatter: yAxis?.tickFormatter,
+              label: yAxis?.label ? {
+                value: yAxis.label,
+                position: "insideBottom",
+                offset: -4,
+                fontSize: 11,
+                fill: "hsl(var(--muted-foreground))"
+              } : void 0
+            }
+          ) : /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: xAxis.dataKey,
+              tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
+              tickLine: false,
+              axisLine: false,
+              minTickGap: xAxis.minTickGap ?? 24,
+              tickFormatter: xAxis.tickFormatter,
+              label: xAxis.label ? {
+                value: xAxis.label,
+                position: "insideBottom",
+                offset: -4,
+                fontSize: 11,
+                fill: "hsl(var(--muted-foreground))"
+              } : void 0
+            }
+          ),
+          isHorizontal ? /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              type: "category",
+              dataKey: xAxis.dataKey,
+              tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
+              tickLine: false,
+              axisLine: false,
+              width: yAxis?.width ?? 80,
+              tickFormatter: xAxis.tickFormatter,
+              label: xAxis.label ? {
+                value: xAxis.label,
+                angle: -90,
+                position: "insideLeft",
+                fontSize: 11,
+                fill: "hsl(var(--muted-foreground))"
+              } : void 0
+            }
+          ) : /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              domain: yAxis?.domain ?? ["auto", "auto"],
+              tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
+              tickLine: false,
+              axisLine: false,
+              width: yAxis?.width ?? 30,
+              tickFormatter: yAxis?.tickFormatter,
+              label: yAxis?.label ? {
+                value: yAxis.label,
+                angle: -90,
+                position: "insideLeft",
+                fontSize: 11,
+                fill: "hsl(var(--muted-foreground))"
+              } : void 0
+            }
+          ),
+          tooltip && /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              contentStyle: {
+                background: "hsl(var(--card))",
+                border: "1px solid hsl(var(--border))",
+                borderRadius: 6,
+                fontSize: 11
+              },
+              labelStyle: {
+                color: "hsl(var(--foreground))",
+                fontWeight: 500,
+                marginBottom: 4
+              },
+              itemStyle: {
+                color: "hsl(var(--foreground))"
+              },
+              cursor: { fill: "hsl(var(--accent))", fillOpacity: 0.3 }
+            }
+          ),
+          legendConfig && /* @__PURE__ */ jsx(
+            Legend,
+            {
+              verticalAlign: legendConfig.position ?? "top",
+              align: legendConfig.align ?? "right",
+              wrapperStyle: { fontSize: 11, paddingBottom: 4 }
+            }
+          ),
+          series.map((s, index) => /* @__PURE__ */ jsx(
+            Bar,
+            {
+              dataKey: s.dataKey,
+              name: s.name,
+              fill: getChartColor(index, s.color),
+              stackId: s.stackId,
+              radius: s.radius ?? 0,
+              isAnimationActive: animate
+            },
+            s.dataKey
+          ))
+        ]
+      }
+    ) }) });
+  }
+);
+BarChart.displayName = "BarChart";
+
+export { BarChart, CHART_COLORS, LineChart, getChartColor };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/line-chart.tsx","../src/bar-chart.tsx"],"names":["RechartsLineChart","React2","jsx","cn","ResponsiveContainer","jsxs","RechartsBarChart","CartesianGrid","XAxis","YAxis","Tooltip","Legend"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * LineChart\n *\n * A reusable, theme-aware line chart component built on Recharts.\n * Supports multiple series, configurable axes, animations, and styling\n * that integrates with the project's CSS variable theming system.\n */\n\nimport * as React from \"react\";\nimport {\n  LineChart as RechartsLineChart,\n  Line,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  Legend,\n  ResponsiveContainer,\n} from \"recharts\";\nimport { cn } from \"@optilogic/core\";\n\n/** Theme-aware chart colors from CSS variables */\nexport const CHART_COLORS = [\n  \"hsl(var(--chart-1))\",\n  \"hsl(var(--chart-2))\",\n  \"hsl(var(--chart-3))\",\n  \"hsl(var(--chart-4))\",\n  \"hsl(var(--chart-5))\",\n];\n\nexport function getChartColor(index: number, custom?: string): string {\n  if (custom) return custom;\n  return CHART_COLORS[index % CHART_COLORS.length] ?? \"hsl(var(--chart-1))\";\n}\n\n/** Configuration for a single line series */\nexport interface LineChartSeries {\n  /** Key in data objects for this series' values */\n  dataKey: string;\n  /** Display name shown in legend/tooltip */\n  name: string;\n  /** Custom color (defaults to theme chart colors) */\n  color?: string;\n  /** Line stroke width (default: 2) */\n  strokeWidth?: number;\n  /** Show dots on data points (default: false) */\n  dot?: boolean;\n  /** Line interpolation type */\n  type?: \"monotone\" | \"linear\" | \"step\" | \"basis\" | \"natural\";\n}\n\n/** X-axis configuration */\nexport interface LineChartXAxis {\n  /** Key in data objects for x-axis values */\n  dataKey: string;\n  /** Axis label */\n  label?: string;\n  /** Custom tick formatter */\n  tickFormatter?: (value: unknown) => string;\n  /** Minimum gap between ticks in pixels */\n  minTickGap?: number;\n}\n\n/** Y-axis configuration */\nexport interface LineChartYAxis {\n  /** Domain bounds [min, max] - use \"auto\" for automatic */\n  domain?: [\n    number | \"auto\" | \"dataMin\" | \"dataMax\",\n    number | \"auto\" | \"dataMin\" | \"dataMax\"\n  ];\n  /** Axis label */\n  label?: string;\n  /** Custom tick formatter */\n  tickFormatter?: (value: unknown) => string;\n  /** Axis width in pixels */\n  width?: number;\n}\n\n/** Grid configuration */\nexport interface LineChartGrid {\n  /** Show vertical grid lines */\n  vertical?: boolean;\n  /** Show horizontal grid lines */\n  horizontal?: boolean;\n}\n\n/** Legend configuration */\nexport interface LineChartLegend {\n  /** Vertical position */\n  position?: \"top\" | \"bottom\";\n  /** Horizontal alignment */\n  align?: \"left\" | \"center\" | \"right\";\n}\n\nexport interface LineChartProps {\n  /** Array of data points */\n  data: Record<string, unknown>[];\n  /** Series configurations */\n  series: LineChartSeries[];\n  /** X-axis configuration */\n  xAxis: LineChartXAxis;\n  /** Y-axis configuration */\n  yAxis?: LineChartYAxis;\n  /** Grid configuration (true for default, false to hide, or object for fine control) */\n  grid?: boolean | LineChartGrid;\n  /** Show tooltip on hover */\n  tooltip?: boolean;\n  /** Legend configuration (true for default, false to hide, or object for fine control) */\n  legend?: boolean | LineChartLegend;\n  /** Enable animations */\n  animate?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n  /** Chart height (default: 100%) */\n  height?: number | string;\n  /** Chart margins */\n  margin?: { top?: number; right?: number; bottom?: number; left?: number };\n}\n\n/**\n * A flexible, theme-aware line chart component.\n *\n * @example\n * <LineChart\n *   data={metrics}\n *   series={[\n *     { dataKey: \"cpu\", name: \"CPU %\" },\n *     { dataKey: \"memory\", name: \"Memory %\", color: \"hsl(var(--success))\" }\n *   ]}\n *   xAxis={{ dataKey: \"time\", tickFormatter: formatTime }}\n *   yAxis={{ domain: [0, 100] }}\n *   animate\n * />\n */\nconst LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(\n  (\n    {\n      data,\n      series,\n      xAxis,\n      yAxis,\n      grid = true,\n      tooltip = true,\n      legend = false,\n      animate = false,\n      className,\n      height = \"100%\",\n      margin = { top: 8, right: 12, left: 0, bottom: 4 },\n    },\n    ref\n  ) => {\n    const gridConfig = React.useMemo(() => {\n      if (grid === false) return null;\n      if (grid === true) return { vertical: false, horizontal: true };\n      return grid;\n    }, [grid]);\n\n    const legendConfig = React.useMemo(() => {\n      if (legend === false) return null;\n      if (legend === true)\n        return { position: \"top\" as const, align: \"right\" as const };\n      return legend;\n    }, [legend]);\n\n    return (\n      <div ref={ref} className={cn(\"w-full\", className)} style={{ height }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <RechartsLineChart data={data} margin={margin}>\n            {gridConfig && (\n              <CartesianGrid\n                strokeDasharray=\"3 3\"\n                stroke=\"hsl(var(--divider))\"\n                vertical={gridConfig.vertical ?? false}\n                horizontal={gridConfig.horizontal ?? true}\n              />\n            )}\n\n            <XAxis\n              dataKey={xAxis.dataKey}\n              tick={{ fontSize: 10, fill: \"hsl(var(--muted-foreground))\" }}\n              tickLine={false}\n              axisLine={false}\n              minTickGap={xAxis.minTickGap ?? 24}\n              tickFormatter={xAxis.tickFormatter}\n              label={\n                xAxis.label\n                  ? {\n                      value: xAxis.label,\n                      position: \"insideBottom\",\n                      offset: -4,\n                      fontSize: 11,\n                      fill: \"hsl(var(--muted-foreground))\",\n                    }\n                  : undefined\n              }\n            />\n\n            <YAxis\n              domain={yAxis?.domain ?? [\"auto\", \"auto\"]}\n              tick={{ fontSize: 10, fill: \"hsl(var(--muted-foreground))\" }}\n              tickLine={false}\n              axisLine={false}\n              width={yAxis?.width ?? 30}\n              tickFormatter={yAxis?.tickFormatter}\n              label={\n                yAxis?.label\n                  ? {\n                      value: yAxis.label,\n                      angle: -90,\n                      position: \"insideLeft\",\n                      fontSize: 11,\n                      fill: \"hsl(var(--muted-foreground))\",\n                    }\n                  : undefined\n              }\n            />\n\n            {tooltip && (\n              <Tooltip\n                contentStyle={{\n                  background: \"hsl(var(--card))\",\n                  border: \"1px solid hsl(var(--border))\",\n                  borderRadius: 6,\n                  fontSize: 11,\n                }}\n                labelStyle={{\n                  color: \"hsl(var(--foreground))\",\n                  fontWeight: 500,\n                  marginBottom: 4,\n                }}\n                itemStyle={{\n                  color: \"hsl(var(--foreground))\",\n                }}\n              />\n            )}\n\n            {legendConfig && (\n              <Legend\n                verticalAlign={legendConfig.position ?? \"top\"}\n                align={legendConfig.align ?? \"right\"}\n                wrapperStyle={{ fontSize: 11, paddingBottom: 4 }}\n              />\n            )}\n\n            {series.map((s, index) => (\n              <Line\n                key={s.dataKey}\n                type={s.type ?? \"monotone\"}\n                dataKey={s.dataKey}\n                name={s.name}\n                stroke={getChartColor(index, s.color)}\n                strokeWidth={s.strokeWidth ?? 2}\n                dot={s.dot ?? false}\n                isAnimationActive={animate}\n              />\n            ))}\n          </RechartsLineChart>\n        </ResponsiveContainer>\n      </div>\n    );\n  }\n);\n\nLineChart.displayName = \"LineChart\";\n\nexport { LineChart };\n","/**\n * BarChart\n *\n * A reusable, theme-aware bar chart component built on Recharts.\n * Supports vertical/horizontal layouts, stacked/grouped bars,\n * configurable axes, animations, and styling that integrates\n * with the project's CSS variable theming system.\n */\n\nimport * as React from \"react\";\nimport {\n  BarChart as RechartsBarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  Legend,\n  ResponsiveContainer,\n} from \"recharts\";\nimport { cn } from \"@optilogic/core\";\nimport { CHART_COLORS, getChartColor } from \"./line-chart\";\n\n/** Configuration for a single bar series */\nexport interface BarChartSeries {\n  /** Key in data objects for this series' values */\n  dataKey: string;\n  /** Display name shown in legend/tooltip */\n  name: string;\n  /** Custom color (defaults to theme chart colors) */\n  color?: string;\n  /** Stack ID - bars with the same stackId will be stacked */\n  stackId?: string;\n  /** Border radius for bars */\n  radius?: number | [number, number, number, number];\n}\n\n/** X-axis configuration */\nexport interface BarChartXAxis {\n  /** Key in data objects for x-axis values (category axis in vertical layout) */\n  dataKey: string;\n  /** Axis label */\n  label?: string;\n  /** Custom tick formatter */\n  tickFormatter?: (value: unknown) => string;\n  /** Minimum gap between ticks in pixels */\n  minTickGap?: number;\n}\n\n/** Y-axis configuration */\nexport interface BarChartYAxis {\n  /** Domain bounds [min, max] - use \"auto\" for automatic */\n  domain?: [\n    number | \"auto\" | \"dataMin\" | \"dataMax\",\n    number | \"auto\" | \"dataMin\" | \"dataMax\"\n  ];\n  /** Axis label */\n  label?: string;\n  /** Custom tick formatter */\n  tickFormatter?: (value: unknown) => string;\n  /** Axis width in pixels */\n  width?: number;\n}\n\n/** Grid configuration */\nexport interface BarChartGrid {\n  /** Show vertical grid lines */\n  vertical?: boolean;\n  /** Show horizontal grid lines */\n  horizontal?: boolean;\n}\n\n/** Legend configuration */\nexport interface BarChartLegend {\n  /** Vertical position */\n  position?: \"top\" | \"bottom\";\n  /** Horizontal alignment */\n  align?: \"left\" | \"center\" | \"right\";\n}\n\nexport interface BarChartProps {\n  /** Array of data points */\n  data: Record<string, unknown>[];\n  /** Series configurations */\n  series: BarChartSeries[];\n  /** Chart layout orientation */\n  layout?: \"vertical\" | \"horizontal\";\n  /** X-axis configuration */\n  xAxis: BarChartXAxis;\n  /** Y-axis configuration */\n  yAxis?: BarChartYAxis;\n  /** Grid configuration (true for default, false to hide, or object for fine control) */\n  grid?: boolean | BarChartGrid;\n  /** Show tooltip on hover */\n  tooltip?: boolean;\n  /** Legend configuration (true for default, false to hide, or object for fine control) */\n  legend?: boolean | BarChartLegend;\n  /** Enable animations */\n  animate?: boolean;\n  /** Bar width in pixels */\n  barSize?: number;\n  /** Gap between bars in a group (pixels) */\n  barGap?: number;\n  /** Gap between bar groups (pixels or percentage) */\n  barCategoryGap?: number | string;\n  /** Additional CSS classes */\n  className?: string;\n  /** Chart height (default: 100%) */\n  height?: number | string;\n  /** Chart margins */\n  margin?: { top?: number; right?: number; bottom?: number; left?: number };\n}\n\n/**\n * A flexible, theme-aware bar chart component.\n *\n * @example\n * // Grouped bar chart\n * <BarChart\n *   data={salesData}\n *   series={[\n *     { dataKey: \"revenue\", name: \"Revenue\" },\n *     { dataKey: \"profit\", name: \"Profit\" }\n *   ]}\n *   xAxis={{ dataKey: \"month\" }}\n *   legend={{ position: \"top\" }}\n * />\n *\n * @example\n * // Stacked bar chart\n * <BarChart\n *   data={salesData}\n *   series={[\n *     { dataKey: \"q1\", name: \"Q1\", stackId: \"revenue\" },\n *     { dataKey: \"q2\", name: \"Q2\", stackId: \"revenue\" }\n *   ]}\n *   xAxis={{ dataKey: \"category\" }}\n * />\n */\nconst BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(\n  (\n    {\n      data,\n      series,\n      layout = \"vertical\",\n      xAxis,\n      yAxis,\n      grid = true,\n      tooltip = true,\n      legend = false,\n      animate = true,\n      barSize,\n      barGap,\n      barCategoryGap,\n      className,\n      height = \"100%\",\n      margin = { top: 8, right: 12, left: 0, bottom: 4 },\n    },\n    ref\n  ) => {\n    const gridConfig = React.useMemo(() => {\n      if (grid === false) return null;\n      if (grid === true) return { vertical: false, horizontal: true };\n      return grid;\n    }, [grid]);\n\n    const legendConfig = React.useMemo(() => {\n      if (legend === false) return null;\n      if (legend === true)\n        return { position: \"top\" as const, align: \"right\" as const };\n      return legend;\n    }, [legend]);\n\n    const isHorizontal = layout === \"horizontal\";\n\n    return (\n      <div ref={ref} className={cn(\"w-full\", className)} style={{ height }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <RechartsBarChart\n            data={data}\n            layout={isHorizontal ? \"vertical\" : \"horizontal\"}\n            margin={margin}\n            barSize={barSize}\n            barGap={barGap}\n            barCategoryGap={barCategoryGap}\n          >\n            {gridConfig && (\n              <CartesianGrid\n                strokeDasharray=\"3 3\"\n                stroke=\"hsl(var(--divider))\"\n                vertical={\n                  isHorizontal\n                    ? (gridConfig.horizontal ?? true)\n                    : (gridConfig.vertical ?? false)\n                }\n                horizontal={\n                  isHorizontal\n                    ? (gridConfig.vertical ?? false)\n                    : (gridConfig.horizontal ?? true)\n                }\n              />\n            )}\n\n            {isHorizontal ? (\n              <XAxis\n                type=\"number\"\n                domain={yAxis?.domain ?? [\"auto\", \"auto\"]}\n                tick={{ fontSize: 10, fill: \"hsl(var(--muted-foreground))\" }}\n                tickLine={false}\n                axisLine={false}\n                tickFormatter={yAxis?.tickFormatter}\n                label={\n                  yAxis?.label\n                    ? {\n                        value: yAxis.label,\n                        position: \"insideBottom\",\n                        offset: -4,\n                        fontSize: 11,\n                        fill: \"hsl(var(--muted-foreground))\",\n                      }\n                    : undefined\n                }\n              />\n            ) : (\n              <XAxis\n                dataKey={xAxis.dataKey}\n                tick={{ fontSize: 10, fill: \"hsl(var(--muted-foreground))\" }}\n                tickLine={false}\n                axisLine={false}\n                minTickGap={xAxis.minTickGap ?? 24}\n                tickFormatter={xAxis.tickFormatter}\n                label={\n                  xAxis.label\n                    ? {\n                        value: xAxis.label,\n                        position: \"insideBottom\",\n                        offset: -4,\n                        fontSize: 11,\n                        fill: \"hsl(var(--muted-foreground))\",\n                      }\n                    : undefined\n                }\n              />\n            )}\n\n            {isHorizontal ? (\n              <YAxis\n                type=\"category\"\n                dataKey={xAxis.dataKey}\n                tick={{ fontSize: 10, fill: \"hsl(var(--muted-foreground))\" }}\n                tickLine={false}\n                axisLine={false}\n                width={yAxis?.width ?? 80}\n                tickFormatter={xAxis.tickFormatter}\n                label={\n                  xAxis.label\n                    ? {\n                        value: xAxis.label,\n                        angle: -90,\n                        position: \"insideLeft\",\n                        fontSize: 11,\n                        fill: \"hsl(var(--muted-foreground))\",\n                      }\n                    : undefined\n                }\n              />\n            ) : (\n              <YAxis\n                domain={yAxis?.domain ?? [\"auto\", \"auto\"]}\n                tick={{ fontSize: 10, fill: \"hsl(var(--muted-foreground))\" }}\n                tickLine={false}\n                axisLine={false}\n                width={yAxis?.width ?? 30}\n                tickFormatter={yAxis?.tickFormatter}\n                label={\n                  yAxis?.label\n                    ? {\n                        value: yAxis.label,\n                        angle: -90,\n                        position: \"insideLeft\",\n                        fontSize: 11,\n                        fill: \"hsl(var(--muted-foreground))\",\n                      }\n                    : undefined\n                }\n              />\n            )}\n\n            {tooltip && (\n              <Tooltip\n                contentStyle={{\n                  background: \"hsl(var(--card))\",\n                  border: \"1px solid hsl(var(--border))\",\n                  borderRadius: 6,\n                  fontSize: 11,\n                }}\n                labelStyle={{\n                  color: \"hsl(var(--foreground))\",\n                  fontWeight: 500,\n                  marginBottom: 4,\n                }}\n                itemStyle={{\n                  color: \"hsl(var(--foreground))\",\n                }}\n                cursor={{ fill: \"hsl(var(--accent))\", fillOpacity: 0.3 }}\n              />\n            )}\n\n            {legendConfig && (\n              <Legend\n                verticalAlign={legendConfig.position ?? \"top\"}\n                align={legendConfig.align ?? \"right\"}\n                wrapperStyle={{ fontSize: 11, paddingBottom: 4 }}\n              />\n            )}\n\n            {series.map((s, index) => (\n              <Bar\n                key={s.dataKey}\n                dataKey={s.dataKey}\n                name={s.name}\n                fill={getChartColor(index, s.color)}\n                stackId={s.stackId}\n                radius={s.radius ?? 0}\n                isAnimationActive={animate}\n              />\n            ))}\n          </RechartsBarChart>\n        </ResponsiveContainer>\n      </div>\n    );\n  }\n);\n\nBarChart.displayName = \"BarChart\";\n\nexport { BarChart };\n"]}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@optilogic/charts",
+  "version": "1.0.0-beta.0",
+  "description": "Chart components for Optilogic - LineChart and BarChart built on Recharts",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "dependencies": {
+    "@optilogic/core": "1.0.0-beta.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "recharts": "^2.12.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "recharts": "^2.14.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  },
+  "keywords": [
+    "react",
+    "charts",
+    "recharts",
+    "line-chart",
+    "bar-chart",
+    "optilogic"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/optilogic/opti-ui"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "clean": "rm -rf dist .turbo"
+  }
+}