import { jsxs as l, Fragment as d, jsx as a } from "react/jsx-runtime";
import { T as n, C as e, a as s, l as t, c as i, P as m, A as c } from "../index-sdOMz8GW.js";
import "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const r = [
  { name: "Jan", sales: 4e3, returns: 400, target: 4500 },
  { name: "Feb", sales: 3e3, returns: 300, target: 3500 },
  { name: "Mar", sales: 5e3, returns: 500, target: 4800 },
  { name: "Apr", sales: 4780, returns: 478, target: 5e3 },
  { name: "May", sales: 5890, returns: 589, target: 5500 },
  { name: "Jun", sales: 6390, returns: 639, target: 6e3 }
], N = () => /* @__PURE__ */ l(d, { children: [
  /* @__PURE__ */ l("div", { className: "text-center space-y-4", children: [
    /* @__PURE__ */ a(n, { tag: "h2", className: "text-base md:text-base font-semibold", children: "BarChart" }),
    /* @__PURE__ */ a(
      n,
      {
        tag: "p",
        className: "text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
        children: "Bar chart component for comparing categorical data with support for stacking, horizontal layout, and custom bar styling."
      }
    )
  ] }),
  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(s, { title: "Basic Bar Chart", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
    t,
    {
      data: r,
      series: [
        { dataKey: "sales", name: "Sales" },
        { dataKey: "returns", name: "Returns" }
      ],
      height: 300
    }
  ) }) }) }),
  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(s, { title: "Stacked Bars", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
    t,
    {
      data: r,
      series: [
        { dataKey: "sales", name: "Sales", stackId: "a" },
        { dataKey: "returns", name: "Returns", stackId: "a" }
      ],
      stacked: !0,
      height: 300
    }
  ) }) }) }),
  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(s, { title: "Horizontal Layout", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
    t,
    {
      data: r,
      series: [{ dataKey: "sales", name: "Sales" }],
      layout: "vertical",
      height: 350
    }
  ) }) }) }),
  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(s, { title: "Usage", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
    i,
    {
      code: `import { BarChart } from '@e-burgos/tucu-ui';

const data = [
  { name: 'Jan', sales: 4000, returns: 400 },
  { name: 'Feb', sales: 3000, returns: 300 },
  { name: 'Mar', sales: 5000, returns: 500 },
];

<BarChart
  data={data}
  series={[
    { dataKey: 'sales', name: 'Sales' },
    { dataKey: 'returns', name: 'Returns' },
  ]}
  height={300}
  layout="horizontal"
  stacked={false}
  barRadius={4}
  barGap={4}
  showGrid
  showTooltip
  showLegend
/>`,
      language: "tsx"
    }
  ) }) }) }),
  /* @__PURE__ */ a(
    m,
    {
      componentName: "BarChart",
      defaultValues: {
        height: 300,
        stacked: !1,
        layout: "horizontal",
        showGrid: !0,
        showTooltip: !0,
        showLegend: !0,
        barRadius: 4,
        barGap: 4,
        animate: !0
      },
      excludeProps: [
        "data",
        "series",
        "colors",
        "className",
        "xAxisKey",
        "emptyMessage"
      ],
      children: (o) => /* @__PURE__ */ a(
        t,
        {
          data: r,
          series: [
            { dataKey: "sales", name: "Sales" },
            { dataKey: "returns", name: "Returns" }
          ],
          ...o
        }
      )
    }
  ),
  /* @__PURE__ */ a(c, { componentName: "BarChart" })
] });
export {
  N as default
};
