import { jsxs as i, Fragment as o, jsx as e } from "react/jsx-runtime";
import { T as n, C as s, a, m as t, c as m, P as l, A as c } from "../index-sdOMz8GW.js";
import "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const r = [
  { name: "Jan", users: 400, sessions: 2400, pageViews: 4400 },
  { name: "Feb", users: 300, sessions: 1398, pageViews: 3210 },
  { name: "Mar", users: 500, sessions: 3800, pageViews: 5400 },
  { name: "Apr", users: 780, sessions: 3908, pageViews: 6200 },
  { name: "May", users: 890, sessions: 4800, pageViews: 7100 },
  { name: "Jun", users: 1200, sessions: 5800, pageViews: 9400 },
  { name: "Jul", users: 1500, sessions: 6300, pageViews: 11e3 }
], y = () => /* @__PURE__ */ i(o, { children: [
  /* @__PURE__ */ i("div", { className: "text-center space-y-4", children: [
    /* @__PURE__ */ e(n, { tag: "h2", className: "text-base md:text-base font-semibold", children: "AreaChart" }),
    /* @__PURE__ */ e(
      n,
      {
        tag: "p",
        className: "text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
        children: "Area chart component for visualizing volume and trends over time with gradient fills, stacking, and smooth curves."
      }
    )
  ] }),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(a, { title: "Basic Area Chart with Gradient", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
    t,
    {
      data: r,
      series: [
        { dataKey: "users", name: "Users" },
        { dataKey: "sessions", name: "Sessions" }
      ],
      height: 300,
      gradient: !0
    }
  ) }) }) }),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(a, { title: "Stacked Area Chart", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
    t,
    {
      data: r,
      series: [
        { dataKey: "users", name: "Users", stackId: "a" },
        { dataKey: "sessions", name: "Sessions", stackId: "a" },
        { dataKey: "pageViews", name: "Page Views", stackId: "a" }
      ],
      stacked: !0,
      height: 300
    }
  ) }) }) }),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(a, { title: "Without Gradient (Flat)", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
    t,
    {
      data: r,
      series: [
        { dataKey: "users", name: "Users" },
        { dataKey: "sessions", name: "Sessions" }
      ],
      gradient: !1,
      curved: !1,
      height: 300
    }
  ) }) }) }),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(a, { title: "Usage", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
    m,
    {
      code: `import { AreaChart } from '@e-burgos/tucu-ui';

const data = [
  { name: 'Jan', users: 400, sessions: 2400 },
  { name: 'Feb', users: 300, sessions: 1398 },
  { name: 'Mar', users: 500, sessions: 3800 },
];

<AreaChart
  data={data}
  series={[
    { dataKey: 'users', name: 'Users' },
    { dataKey: 'sessions', name: 'Sessions' },
  ]}
  height={300}
  curved
  gradient
  stacked={false}
  showGrid
  showTooltip
  showLegend
/>`,
      language: "tsx"
    }
  ) }) }) }),
  /* @__PURE__ */ e(
    l,
    {
      componentName: "AreaChart",
      defaultValues: {
        height: 300,
        curved: !0,
        gradient: !0,
        stacked: !1,
        showGrid: !0,
        showTooltip: !0,
        showLegend: !0,
        animate: !0
      },
      excludeProps: [
        "data",
        "series",
        "colors",
        "className",
        "xAxisKey",
        "emptyMessage"
      ],
      children: (d) => /* @__PURE__ */ e(
        t,
        {
          data: r,
          series: [
            { dataKey: "users", name: "Users" },
            { dataKey: "sessions", name: "Sessions" }
          ],
          ...d
        }
      )
    }
  ),
  /* @__PURE__ */ e(c, { componentName: "AreaChart" })
] });
export {
  y as default
};
