@enact-ui/charts 0.1.0 → 0.2.0

package/dist/index.js

@@ -20,16 +20,33 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  BarChart: () => BarChart,
+  BarChart02: () => BarChart02,
+  BarChart03: () => BarChart03,
   ChartActiveDot: () => ChartActiveDot,
   ChartLegendContent: () => ChartLegendContent,
   ChartTooltipContent: () => ChartTooltipContent,
+  LineChart01: () => LineChart01,
+  LineChart02: () => LineChart02,
+  LineChart03: () => LineChart03,
+  LineChart04: () => LineChart04,
+  PieChartLg: () => PieChartLg,
+  PieChartMd: () => PieChartMd,
+  PieChartSm: () => PieChartSm,
+  PieChartXs: () => PieChartXs,
+  PieChartXxs: () => PieChartXxs,
+  RelationshipGraph: () => RelationshipGraph,
+  TrendBadge: () => TrendBadge,
+  TrendIndicator: () => TrendIndicator,
   selectEvenlySpacedItems: () => selectEvenlySpacedItems
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/charts-base.tsx
-var import_react = require("@enact-ui/react");
-var import_jsx_runtime = require("react/jsx-runtime");
+// src/components/bar-charts.demo.tsx
+var import_react2 = require("@enact-ui/react");
+var import_recharts = require("recharts");
+
+// src/utils/chart-utils.ts
 var selectEvenlySpacedItems = (dataArray, count) => {
   if (!dataArray || dataArray.length === 0) {
     return [];
@@ -48,6 +65,10 @@ var selectEvenlySpacedItems = (dataArray, count) => {
   }
   return selectedItems;
 };
+
+// src/components/charts-base.tsx
+var import_react = require("@enact-ui/react");
+var import_jsx_runtime = require("react/jsx-runtime");
 var ChartLegendContent = ({ reversed, payload, align, layout, className }) => {
   payload = reversed ? payload?.toReversed() : payload;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -58,7 +79,7 @@ var ChartLegendContent = ({ reversed, payload, align, layout, className }) => {
         layout === "vertical" ? `flex-col gap-1 pl-4 ${align === "center" ? "items-center" : align === "right" ? "items-start" : "items-start"}` : `flex-row gap-3 ${align === "center" ? "justify-center" : align === "right" ? "justify-end" : "justify-start"}`,
         className
       ),
-      children: payload?.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "text-muted flex items-center gap-2 text-sm", children: [
+      children: payload?.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "text-content-tertiary flex items-center gap-2 text-sm", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_react.cx)("h-2 w-2 rounded-full bg-current", entry.payload?.className) }),
         entry.value
       ] }, entry.value ?? index))
@@ -75,23 +96,1845 @@ var ChartTooltipContent = ({ active, payload, label, isRadialChart, isPieChart,
   let secondaryTitle = isSingleDataPoint ? isRadialChart ? payload[0].payload.name : isPieChart ? payload[0].name : label : payload;
   title = isSingleDataPoint && formatter ? formatter(title, payload?.[0].name || label, payload[0], 0, payload) : labelFormatter ? labelFormatter(title, payload) : title;
   secondaryTitle = isSingleDataPoint && labelFormatter ? labelFormatter(secondaryTitle, payload) : secondaryTitle;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-base-solid flex flex-col gap-0.5 rounded-lg px-3 py-2 shadow-lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs font-semibold text-white", children: title }),
-    !secondaryTitle ? null : Array.isArray(secondaryTitle) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: secondaryTitle.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: (0, import_react.cx)("text-xs text-tooltip-supporting-text"), children: `${entry.name}: ${formatter ? formatter(entry.value, entry.name, entry, index, entry.payload) : entry.value}` }, entry.name ?? index)) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-tooltip-supporting-text", children: secondaryTitle })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-primary-solid flex flex-col gap-0.5 rounded-lg px-3 py-2 shadow-lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs font-semibold text-content-on-brand", children: title }),
+    !secondaryTitle ? null : Array.isArray(secondaryTitle) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: secondaryTitle.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: (0, import_react.cx)("text-xs text-content-tertiary"), children: `${entry.name}: ${formatter ? formatter(entry.value, entry.name, entry, index, entry.payload) : entry.value}` }, entry.name ?? index)) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-content-tertiary", children: secondaryTitle })
   ] });
 };
-var ChartActiveDot = ({ cx: cx2 = 0, cy = 0 }) => {
+var ChartActiveDot = ({ cx: cx5 = 0, cy = 0 }) => {
   const size = 12;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { x: cx2 - size / 2, y: cy - size / 2, width: size, height: size, viewBox: "0 0 12 12", fill: "none", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { x: cx5 - size / 2, y: cy - size / 2, width: size, height: size, viewBox: "0 0 12 12", fill: "none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: "Active data point indicator" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "2", y: "2", width: "8", height: "8", rx: "6", className: "stroke-brand-medium fill-bg-base", strokeWidth: "2" })
   ] });
 };
+
+// src/components/bar-charts.demo.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var barData = [
+  // collapse-start
+  {
+    month: new Date(2025, 0, 1),
+    A: 300,
+    B: 200,
+    C: 350
+  },
+  {
+    month: new Date(2025, 1, 1),
+    A: 320,
+    B: 300,
+    C: 300
+  },
+  {
+    month: new Date(2025, 2, 1),
+    A: 300,
+    B: 200,
+    C: 240
+  },
+  {
+    month: new Date(2025, 3, 1),
+    A: 240,
+    B: 300,
+    C: 280
+  },
+  {
+    month: new Date(2025, 4, 1),
+    A: 320,
+    B: 280,
+    C: 100
+  },
+  {
+    month: new Date(2025, 5, 1),
+    A: 330,
+    B: 300,
+    C: 130
+  },
+  {
+    month: new Date(2025, 6, 1),
+    A: 300,
+    B: 200,
+    C: 100
+  },
+  {
+    month: new Date(2025, 7, 1),
+    A: 350,
+    B: 300,
+    C: 200
+  },
+  {
+    month: new Date(2025, 8, 1),
+    A: 300,
+    B: 200,
+    C: 100
+  },
+  {
+    month: new Date(2025, 9, 1),
+    A: 200,
+    B: 300,
+    C: 280
+  },
+  {
+    month: new Date(2025, 10, 1),
+    A: 240,
+    B: 300,
+    C: 300
+  },
+  {
+    month: new Date(2025, 11, 1),
+    A: 200,
+    B: 400,
+    C: 350
+  }
+  // collapse-end
+];
+var BarChart = () => {
+  const isDesktop = (0, import_react2.useBreakpoint)("lg");
+  const colors = {
+    A: "text-content-brand",
+    B: "text-content-brand",
+    C: "text-content-tertiary"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.ResponsiveContainer, { className: "h-60!", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_recharts.BarChart,
+    {
+      data: barData,
+      className: "text-content-tertiary [&_.recharts-text]:text-xs",
+      margin: {
+        left: 4,
+        right: 0,
+        top: isDesktop ? 12 : 6,
+        bottom: 18
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.CartesianGrid, { vertical: false, stroke: "currentColor", className: "text-content-tertiary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_recharts.Legend,
+          {
+            verticalAlign: "top",
+            align: "right",
+            layout: isDesktop ? "vertical" : "horizontal",
+            content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegendContent, { className: "-translate-y-2" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_recharts.XAxis,
+          {
+            fill: "currentColor",
+            axisLine: false,
+            tickLine: false,
+            tickMargin: 11,
+            interval: "preserveStartEnd",
+            dataKey: "month",
+            tickFormatter: (value) => value.toLocaleDateString(void 0, { month: "short" }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.Label, { value: "Month", fill: "currentColor", className: "!text-xs font-medium", position: "bottom" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_recharts.YAxis,
+          {
+            fill: "currentColor",
+            axisLine: false,
+            tickLine: false,
+            interval: "preserveStartEnd",
+            tickFormatter: (value) => Number(value).toLocaleString(),
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_recharts.Label,
+              {
+                value: "Active users",
+                fill: "currentColor",
+                className: "!text-xs font-medium",
+                style: { textAnchor: "middle" },
+                angle: -90,
+                position: "insideLeft"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_recharts.Tooltip,
+          {
+            content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltipContent, {}),
+            formatter: (value) => Number(value).toLocaleString(),
+            labelFormatter: (value) => value.toLocaleDateString(void 0, { month: "short", year: "numeric" }),
+            cursor: {
+              className: "fill-gray-light_hover/20"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_recharts.Bar,
+          {
+            isAnimationActive: false,
+            ...colors.A !== void 0 && { className: colors.A },
+            dataKey: "A",
+            name: "Series 1",
+            type: "monotone",
+            stackId: "a",
+            fill: "currentColor",
+            maxBarSize: isDesktop ? 32 : 16
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_recharts.Bar,
+          {
+            isAnimationActive: false,
+            ...colors.B !== void 0 && { className: colors.B },
+            dataKey: "B",
+            name: "Series 2",
+            type: "monotone",
+            stackId: "a",
+            fill: "currentColor",
+            maxBarSize: isDesktop ? 32 : 16
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_recharts.Bar,
+          {
+            isAnimationActive: false,
+            ...colors.C !== void 0 && { className: colors.C },
+            dataKey: "C",
+            name: "Series 3",
+            type: "monotone",
+            stackId: "a",
+            fill: "currentColor",
+            maxBarSize: isDesktop ? 32 : 16,
+            radius: [6, 6, 0, 0]
+          }
+        )
+      ]
+    }
+  ) });
+};
+var BarChart02 = () => {
+  const colors = {
+    A: "text-content-brand",
+    B: "text-brand-subtle"
+  };
+  const data = [
+    // collapse-start
+    { A: 633, B: 190, date: "2025-01-01" },
+    { A: 443, B: 228, date: "2025-01-08" },
+    { A: 506, B: 225, date: "2025-01-15" },
+    { A: 316, B: 227, date: "2025-01-22" },
+    { A: 760, B: 209, date: "2025-01-29" },
+    { A: 950, B: 220, date: "2025-02-05" },
+    { A: 760, B: 224, date: "2025-02-12" },
+    { A: 570, B: 279, date: "2025-02-19" },
+    { A: 253, B: 296, date: "2025-02-26" },
+    { A: 380, B: 263, date: "2025-03-05" },
+    { A: 443, B: 333, date: "2025-03-12" },
+    { A: 443, B: 306, date: "2025-03-19" },
+    { A: 316, B: 315, date: "2025-03-26" },
+    { A: 190, B: 325, date: "2025-04-02" },
+    { A: 380, B: 367, date: "2025-04-09" },
+    { A: 506, B: 372, date: "2025-04-16" },
+    { A: 443, B: 374, date: "2025-04-23" },
+    { A: 696, B: 278, date: "2025-04-30" },
+    { A: 950, B: 258, date: "2025-05-07" },
+    { A: 633, B: 357, date: "2025-05-14" },
+    { A: 570, B: 372, date: "2025-05-21" },
+    { A: 253, B: 404, date: "2025-05-28" },
+    { A: 316, B: 314, date: "2025-06-04" },
+    { A: 380, B: 359, date: "2025-06-11" },
+    { A: 253, B: 400, date: "2025-06-18" },
+    { A: 190, B: 381, date: "2025-06-25" },
+    { A: 316, B: 427, date: "2025-07-02" },
+    { A: 633, B: 371, date: "2025-07-09" },
+    { A: 570, B: 382, date: "2025-07-16" },
+    { A: 760, B: 383, date: "2025-07-23" },
+    { A: 950, B: 361, date: "2025-07-30" },
+    { A: 696, B: 405, date: "2025-08-06" },
+    { A: 570, B: 400, date: "2025-08-13" },
+    { A: 443, B: 391, date: "2025-08-20" },
+    { A: 316, B: 425, date: "2025-08-27" },
+    { A: 253, B: 406, date: "2025-09-03" },
+    { A: 380, B: 472, date: "2025-09-10" },
+    { A: 633, B: 477, date: "2025-09-17" },
+    { A: 570, B: 465, date: "2025-09-24" },
+    { A: 443, B: 488, date: "2025-10-01" },
+    { A: 380, B: 501, date: "2025-10-08" },
+    { A: 316, B: 615, date: "2025-10-15" },
+    { A: 570, B: 612, date: "2025-10-22" },
+    { A: 506, B: 673, date: "2025-10-29" },
+    { A: 443, B: 630, date: "2025-11-05" },
+    { A: 760, B: 630, date: "2025-11-12" },
+    { A: 443, B: 597, date: "2025-11-19" },
+    { A: 506, B: 572, date: "2025-11-26" },
+    { A: 316, B: 636, date: "2025-12-03" },
+    { A: 633, B: 664, date: "2025-12-10" },
+    { A: 380, B: 742, date: "2025-12-17" },
+    { A: 633, B: 808, date: "2025-12-24" }
+    // collapse-end
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex h-60 flex-col gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.ResponsiveContainer, { className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_recharts.ComposedChart,
+    {
+      data,
+      margin: {
+        left: 4,
+        right: 0,
+        top: 12,
+        bottom: 18
+      },
+      className: "text-content-tertiary [&_.recharts-text]:text-xs",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.CartesianGrid, { vertical: false, stroke: "currentColor", className: "text-content-tertiary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_recharts.XAxis,
+          {
+            fill: "currentColor",
+            axisLine: false,
+            tickLine: false,
+            tickMargin: 12,
+            interval: "preserveStartEnd",
+            dataKey: "date",
+            tickFormatter: (value) => new Date(value).toLocaleDateString(void 0, { month: "short" }),
+            ticks: selectEvenlySpacedItems(data, 12).map((item) => item.date),
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.Label, { value: "Month", fill: "currentColor", className: "!text-xs font-medium", position: "bottom" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_recharts.YAxis,
+          {
+            fill: "currentColor",
+            axisLine: false,
+            tickLine: false,
+            interval: "preserveStartEnd",
+            tickFormatter: (value) => Number(value).toLocaleString(),
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_recharts.Label,
+              {
+                value: "Active users",
+                fill: "currentColor",
+                className: "!text-xs font-medium",
+                style: { textAnchor: "middle" },
+                angle: -90,
+                position: "insideLeft"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_recharts.Tooltip,
+          {
+            content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltipContent, {}),
+            formatter: (value) => Number(value).toLocaleString(),
+            labelFormatter: (value) => {
+              const date = new Date(value);
+              const endDate = new Date(date);
+              endDate.setDate(date.getDate() + 6);
+              if (date.getMonth() === endDate.getMonth()) {
+                return `${date.toLocaleDateString(void 0, { month: "long" })} ${date.getDate()}-${endDate.getDate()}, ${endDate.getFullYear()}`;
+              }
+              return `${date.toLocaleDateString(void 0, { month: "short", day: "numeric" })} - ${endDate.toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" })}`;
+            },
+            cursor: {
+              className: "fill-gray-light_hover/20"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_recharts.Bar,
+          {
+            isAnimationActive: false,
+            ...colors.A !== void 0 && { className: colors.A },
+            name: "Mobile",
+            dataKey: "A",
+            type: "monotone",
+            stackId: "a",
+            fill: "currentColor",
+            maxBarSize: 12,
+            radius: [4, 4, 0, 0]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_recharts.Line,
+          {
+            isAnimationActive: false,
+            ...colors.B !== void 0 && { className: colors.B },
+            dataKey: "B",
+            name: "Desktop",
+            type: "monotone",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            strokeDasharray: "0.1 8",
+            strokeLinecap: "round",
+            activeDot: false,
+            dot: false
+          }
+        )
+      ]
+    }
+  ) }) });
+};
+var BarChart03 = () => {
+  const colors = {
+    A: "text-content-brand",
+    B: "text-brand-subtle"
+  };
+  const data = [
+    // collapse-start
+    { A: 633, B: 190, date: "2025-01-01" },
+    { A: 443, B: 228, date: "2025-01-08" },
+    { A: 506, B: 225, date: "2025-01-15" },
+    { A: 316, B: 227, date: "2025-01-22" },
+    { A: 760, B: 209, date: "2025-01-29" },
+    { A: 950, B: 220, date: "2025-02-05" },
+    { A: 760, B: 224, date: "2025-02-12" },
+    { A: 570, B: 279, date: "2025-02-19" },
+    { A: 253, B: 296, date: "2025-02-26" },
+    { A: 380, B: 263, date: "2025-03-05" },
+    { A: 443, B: 333, date: "2025-03-12" },
+    { A: 443, B: 306, date: "2025-03-19" },
+    { A: 316, B: 315, date: "2025-03-26" },
+    { A: 190, B: 325, date: "2025-04-02" },
+    { A: 380, B: 367, date: "2025-04-09" },
+    { A: 506, B: 372, date: "2025-04-16" },
+    { A: 443, B: 374, date: "2025-04-23" },
+    { A: 696, B: 278, date: "2025-04-30" },
+    { A: 950, B: 258, date: "2025-05-07" },
+    { A: 633, B: 357, date: "2025-05-14" },
+    { A: 570, B: 372, date: "2025-05-21" },
+    { A: 253, B: 404, date: "2025-05-28" },
+    { A: 316, B: 314, date: "2025-06-04" },
+    { A: 380, B: 359, date: "2025-06-11" },
+    { A: 253, B: 400, date: "2025-06-18" },
+    { A: 190, B: 381, date: "2025-06-25" },
+    { A: 316, B: 427, date: "2025-07-02" },
+    { A: 633, B: 371, date: "2025-07-09" },
+    { A: 570, B: 382, date: "2025-07-16" },
+    { A: 760, B: 383, date: "2025-07-23" },
+    { A: 950, B: 361, date: "2025-07-30" },
+    { A: 696, B: 405, date: "2025-08-06" },
+    { A: 570, B: 400, date: "2025-08-13" },
+    { A: 443, B: 391, date: "2025-08-20" },
+    { A: 316, B: 425, date: "2025-08-27" },
+    { A: 253, B: 406, date: "2025-09-03" },
+    { A: 380, B: 472, date: "2025-09-10" },
+    { A: 633, B: 477, date: "2025-09-17" },
+    { A: 570, B: 465, date: "2025-09-24" },
+    { A: 443, B: 488, date: "2025-10-01" },
+    { A: 380, B: 501, date: "2025-10-08" },
+    { A: 316, B: 615, date: "2025-10-15" },
+    { A: 570, B: 612, date: "2025-10-22" },
+    { A: 506, B: 673, date: "2025-10-29" },
+    { A: 443, B: 630, date: "2025-11-05" },
+    { A: 760, B: 630, date: "2025-11-12" },
+    { A: 443, B: 597, date: "2025-11-19" },
+    { A: 506, B: 572, date: "2025-11-26" },
+    { A: 316, B: 636, date: "2025-12-03" },
+    { A: 633, B: 664, date: "2025-12-10" },
+    { A: 380, B: 742, date: "2025-12-17" },
+    { A: 633, B: 808, date: "2025-12-24" }
+    // collapse-end
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex h-60 flex-col gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.ResponsiveContainer, { className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_recharts.ComposedChart,
+    {
+      data,
+      margin: {
+        left: 4,
+        right: 0,
+        top: 12,
+        bottom: 18
+      },
+      className: "text-content-tertiary [&_.recharts-text]:text-xs",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.CartesianGrid, { vertical: false, stroke: "currentColor", className: "text-content-tertiary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_recharts.XAxis,
+          {
+            fill: "currentColor",
+            axisLine: false,
+            tickLine: false,
+            tickMargin: 12,
+            interval: "preserveStartEnd",
+            dataKey: "date",
+            tickFormatter: (value) => new Date(value).toLocaleDateString(void 0, { month: "short" }),
+            ticks: selectEvenlySpacedItems(data, 12).map((item) => item.date),
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.Label, { value: "Month", fill: "currentColor", className: "!text-xs font-medium", position: "bottom" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_recharts.YAxis,
+          {
+            fill: "currentColor",
+            axisLine: false,
+            tickLine: false,
+            interval: "preserveStartEnd",
+            tickFormatter: (value) => Number(value).toLocaleString(),
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_recharts.Label,
+              {
+                value: "Active users",
+                fill: "currentColor",
+                className: "!text-xs font-medium",
+                style: { textAnchor: "middle" },
+                angle: -90,
+                position: "insideLeft"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_recharts.Tooltip,
+          {
+            content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltipContent, {}),
+            formatter: (value) => Number(value).toLocaleString(),
+            labelFormatter: (value) => {
+              const date = new Date(value);
+              const endDate = new Date(date);
+              endDate.setDate(date.getDate() + 6);
+              if (date.getMonth() === endDate.getMonth()) {
+                return `${date.toLocaleDateString(void 0, { month: "long" })} ${date.getDate()}-${endDate.getDate()}, ${endDate.getFullYear()}`;
+              }
+              return `${date.toLocaleDateString(void 0, { month: "short", day: "numeric" })} - ${endDate.toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" })}`;
+            },
+            cursor: {
+              className: "fill-gray-light_hover/20"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_recharts.Bar,
+          {
+            isAnimationActive: false,
+            ...colors.A !== void 0 && { className: colors.A },
+            name: "Mobile",
+            dataKey: "A",
+            type: "monotone",
+            stackId: "a",
+            fill: "currentColor",
+            maxBarSize: 8,
+            radius: [4, 4, 0, 0]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_recharts.Line,
+          {
+            isAnimationActive: false,
+            ...colors.B !== void 0 && { className: colors.B },
+            dataKey: "B",
+            name: "Desktop",
+            type: "monotone",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            strokeDasharray: "0.1 8",
+            strokeLinecap: "round",
+            activeDot: false,
+            dot: false
+          }
+        )
+      ]
+    }
+  ) }) });
+};
+
+// src/components/line-charts.demo.tsx
+var import_react3 = require("@enact-ui/react");
+var import_recharts2 = require("recharts");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var lineData = [
+  // collapse-start
+  {
+    date: new Date(2025, 0, 1),
+    A: 600,
+    B: 400,
+    C: 100
+  },
+  {
+    date: new Date(2025, 1, 1),
+    A: 620,
+    B: 405,
+    C: 160
+  },
+  {
+    date: new Date(2025, 2, 1),
+    A: 630,
+    B: 400,
+    C: 170
+  },
+  {
+    date: new Date(2025, 3, 1),
+    A: 650,
+    B: 410,
+    C: 190
+  },
+  {
+    date: new Date(2025, 4, 1),
+    A: 600,
+    B: 320,
+    C: 200
+  },
+  {
+    date: new Date(2025, 5, 1),
+    A: 650,
+    B: 430,
+    C: 230
+  },
+  {
+    date: new Date(2025, 6, 1),
+    A: 620,
+    B: 400,
+    C: 200
+  },
+  {
+    date: new Date(2025, 7, 1),
+    A: 750,
+    B: 540,
+    C: 300
+  },
+  {
+    date: new Date(2025, 8, 1),
+    A: 780,
+    B: 490,
+    C: 390
+  },
+  {
+    date: new Date(2025, 9, 1),
+    A: 750,
+    B: 450,
+    C: 300
+  },
+  {
+    date: new Date(2025, 10, 1),
+    A: 780,
+    B: 480,
+    C: 340
+  },
+  {
+    date: new Date(2025, 11, 1),
+    A: 820,
+    B: 500,
+    C: 450
+  }
+  // collapse-end
+];
+var LineChart01 = () => {
+  const isDesktop = (0, import_react3.useBreakpoint)("lg");
+  const colors = {
+    A: "text-content-brand",
+    B: "text-brand-subtle",
+    C: "text-content-brand"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex h-60 flex-col gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.ResponsiveContainer, { className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_recharts2.AreaChart,
+    {
+      data: lineData,
+      className: "text-content-tertiary [&_.recharts-text]:text-xs",
+      margin: {
+        top: isDesktop ? 12 : 6,
+        bottom: isDesktop ? 16 : 0
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("linearGradient", { id: "gradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "5%", stopColor: "currentColor", className: "text-content-brand", stopOpacity: "0.7" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "95%", stopColor: "currentColor", className: "text-content-brand", stopOpacity: "0" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.CartesianGrid, { vertical: false, stroke: "currentColor", className: "text-content-tertiary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.Legend,
+          {
+            align: "right",
+            verticalAlign: "top",
+            layout: isDesktop ? "vertical" : "horizontal",
+            content: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartLegendContent, { className: "-translate-y-2" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.XAxis,
+          {
+            fill: "currentColor",
+            axisLine: false,
+            tickLine: false,
+            interval: "preserveStartEnd",
+            dataKey: "date",
+            tickFormatter: (value) => value.toLocaleDateString(void 0, { month: "short" }),
+            padding: { left: 10, right: 10 },
+            children: isDesktop && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.Label, { fill: "currentColor", className: "!text-xs font-medium max-lg:hidden", position: "bottom", children: "Month" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.YAxis,
+          {
+            fill: "currentColor",
+            axisLine: false,
+            tickLine: false,
+            interval: "preserveStartEnd",
+            tickFormatter: (value) => Number(value).toLocaleString(),
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_recharts2.Label,
+              {
+                value: "Active users",
+                fill: "currentColor",
+                className: "!text-xs font-medium",
+                style: { textAnchor: "middle" },
+                angle: -90,
+                position: "insideLeft"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.Tooltip,
+          {
+            content: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartTooltipContent, {}),
+            formatter: (value) => Number(value).toLocaleString(),
+            labelFormatter: (value) => value.toLocaleDateString(void 0, { month: "short", year: "numeric" }),
+            cursor: {
+              className: "stroke-brand-medium stroke-2"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.Area,
+          {
+            isAnimationActive: false,
+            className: (0, import_react3.cx)(colors.A, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"),
+            dataKey: "A",
+            name: "Series 1",
+            type: "monotone",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            fill: "url(#gradient)",
+            fillOpacity: 0.1,
+            activeDot: {
+              className: "fill-bg-base stroke-brand-medium stroke-2"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.Area,
+          {
+            isAnimationActive: false,
+            className: (0, import_react3.cx)(colors.B, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"),
+            dataKey: "B",
+            name: "Series 2",
+            type: "monotone",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            fill: "none",
+            activeDot: {
+              className: "fill-bg-base stroke-brand-medium stroke-2"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.Area,
+          {
+            isAnimationActive: false,
+            className: (0, import_react3.cx)(colors.C, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"),
+            dataKey: "C",
+            name: "Series 3",
+            type: "monotone",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            fill: "none",
+            activeDot: {
+              className: "fill-bg-base stroke-brand-medium stroke-2"
+            }
+          }
+        )
+      ]
+    }
+  ) }) });
+};
+var LineChart02 = () => {
+  const isDesktop = (0, import_react3.useBreakpoint)("lg");
+  const colors = {
+    A: "text-content-brand",
+    B: "text-brand-subtle",
+    C: "text-content-brand"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex h-60 flex-col gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.ResponsiveContainer, { className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_recharts2.AreaChart,
+    {
+      data: lineData,
+      className: "text-content-tertiary [&_.recharts-text]:text-xs",
+      margin: {
+        left: 5,
+        right: 5,
+        top: isDesktop ? 12 : 6,
+        bottom: isDesktop ? 16 : 0
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("linearGradient", { id: "gradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "5%", stopColor: "currentColor", className: "text-content-brand", stopOpacity: "0.7" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "95%", stopColor: "currentColor", className: "text-content-brand", stopOpacity: "0" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.CartesianGrid, { vertical: false, stroke: "currentColor", className: "text-content-tertiary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.Legend,
+          {
+            verticalAlign: "top",
+            align: "right",
+            layout: isDesktop ? "vertical" : "horizontal",
+            content: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartLegendContent, { className: "-translate-y-2" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.XAxis,
+          {
+            fill: "currentColor",
+            axisLine: false,
+            tickLine: false,
+            interval: "preserveStartEnd",
+            dataKey: "date",
+            tickFormatter: (value) => value.toLocaleDateString(void 0, { month: "short" }),
+            padding: { left: 10, right: 10 },
+            children: isDesktop && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.Label, { fill: "currentColor", className: "!text-xs font-medium max-lg:hidden", position: "bottom", children: "Month" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.YAxis,
+          {
+            fill: "currentColor",
+            axisLine: false,
+            tickLine: false,
+            interval: "preserveStartEnd",
+            tickFormatter: (value) => Number(value).toLocaleString(),
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_recharts2.Label,
+              {
+                value: "Active users",
+                fill: "currentColor",
+                className: "!text-xs font-medium",
+                style: { textAnchor: "middle" },
+                angle: -90,
+                position: "insideLeft"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.Tooltip,
+          {
+            content: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartTooltipContent, {}),
+            formatter: (value) => Number(value).toLocaleString(),
+            labelFormatter: (value) => value.toLocaleDateString(void 0, { month: "short", year: "numeric" }),
+            cursor: {
+              className: "stroke-brand-medium stroke-2"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.Area,
+          {
+            isAnimationActive: false,
+            className: (0, import_react3.cx)(colors.A, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"),
+            dataKey: "A",
+            name: "Series 1",
+            type: "monotone",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            fill: "url(#gradient)",
+            fillOpacity: 0.1,
+            activeDot: {
+              className: "fill-bg-base stroke-brand-medium stroke-2"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.Area,
+          {
+            isAnimationActive: false,
+            className: (0, import_react3.cx)(colors.B, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"),
+            dataKey: "B",
+            name: "Series 2",
+            type: "monotone",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            fill: "none",
+            strokeDasharray: "0.1 8",
+            strokeLinecap: "round",
+            activeDot: {
+              className: "fill-bg-base stroke-brand-medium stroke-2"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.Area,
+          {
+            isAnimationActive: false,
+            className: (0, import_react3.cx)(colors.C, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"),
+            dataKey: "C",
+            name: "Series 3",
+            type: "monotone",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            fill: "none",
+            strokeDasharray: "0.1 8",
+            strokeLinecap: "round",
+            activeDot: {
+              className: "fill-bg-base stroke-brand-medium stroke-2"
+            }
+          }
+        )
+      ]
+    }
+  ) }) });
+};
+var LineChart03 = () => {
+  const isDesktop = (0, import_react3.useBreakpoint)("lg");
+  const colors = {
+    A: "text-content-brand",
+    B: "text-brand-subtle",
+    C: "text-content-brand"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex h-60 flex-col gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.ResponsiveContainer, { className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_recharts2.AreaChart,
+    {
+      data: lineData,
+      className: "text-content-tertiary [&_.recharts-text]:text-xs",
+      margin: {
+        left: 5,
+        right: 5,
+        top: isDesktop ? 12 : 6,
+        bottom: isDesktop ? 16 : 0
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("defs", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("linearGradient", { id: "gradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "0%", stopColor: "currentColor", className: "text-content-secondary", stopOpacity: "0.8" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "80%", stopColor: "currentColor", className: "text-content-secondary", stopOpacity: "0" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("pattern", { id: "verticalLines", width: "8", height: "100%", fill: "url(#gradient)", patternUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "0", y1: "0", x2: "0", y2: "100%", stroke: "currentColor", className: "text-content-tertiary", strokeWidth: "1.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "100%", height: "100%", fill: "url(#gradient)", fillOpacity: 0.15 })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.CartesianGrid, { vertical: false, stroke: "currentColor", className: "text-content-tertiary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.Legend,
+          {
+            verticalAlign: "top",
+            align: "right",
+            layout: isDesktop ? "vertical" : "horizontal",
+            content: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartLegendContent, { className: "-translate-y-2" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.XAxis,
+          {
+            fill: "currentColor",
+            axisLine: false,
+            tickLine: false,
+            tickMargin: 10,
+            interval: "preserveStartEnd",
+            dataKey: "date",
+            padding: { left: 10, right: 10 },
+            tickFormatter: (value) => value.toLocaleDateString(void 0, { month: "short" }),
+            children: isDesktop && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.Label, { fill: "currentColor", className: "!text-xs font-medium max-lg:hidden", position: "bottom", children: "Month" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.YAxis,
+          {
+            fill: "currentColor",
+            axisLine: false,
+            tickLine: false,
+            interval: "preserveStartEnd",
+            tickFormatter: (value) => Number(value).toLocaleString(),
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_recharts2.Label,
+              {
+                value: "Active users",
+                fill: "currentColor",
+                className: "!text-xs font-medium",
+                style: { textAnchor: "middle" },
+                angle: -90,
+                position: "insideLeft"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.Tooltip,
+          {
+            content: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartTooltipContent, {}),
+            formatter: (value) => Number(value).toLocaleString(),
+            labelFormatter: (value) => value.toLocaleDateString(void 0, { month: "short", year: "numeric" }),
+            cursor: {
+              className: "stroke-brand-medium stroke-2"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.Area,
+          {
+            isAnimationActive: false,
+            className: (0, import_react3.cx)(colors.A, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"),
+            dataKey: "A",
+            name: "Series 1",
+            type: "monotone",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            fill: "url(#verticalLines)",
+            fillOpacity: 1,
+            activeDot: {
+              className: "fill-bg-base stroke-brand-medium stroke-2"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.Area,
+          {
+            isAnimationActive: false,
+            className: (0, import_react3.cx)(colors.B, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"),
+            dataKey: "B",
+            name: "Series 2",
+            type: "monotone",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            fill: "none",
+            activeDot: {
+              className: "fill-bg-base stroke-brand-medium stroke-2"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.Area,
+          {
+            isAnimationActive: false,
+            className: (0, import_react3.cx)(colors.C, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"),
+            dataKey: "C",
+            name: "Series 3",
+            type: "monotone",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            fill: "none",
+            activeDot: {
+              className: "fill-bg-base stroke-brand-medium stroke-2"
+            }
+          }
+        )
+      ]
+    }
+  ) }) });
+};
+var LineChart04 = () => {
+  const isDesktop = (0, import_react3.useBreakpoint)("lg");
+  const colors = {
+    A: "text-content-brand",
+    B: "text-content-secondary",
+    C: "text-content-tertiary"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex h-60 flex-col gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.ResponsiveContainer, { className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_recharts2.AreaChart,
+    {
+      data: lineData,
+      className: "text-content-tertiary [&_.recharts-text]:text-xs",
+      margin: {
+        left: 5,
+        right: 5,
+        top: isDesktop ? 12 : 6,
+        bottom: isDesktop ? 16 : 0
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("linearGradient", { id: "gradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "5%", stopColor: "currentColor", className: "text-content-secondary", stopOpacity: "0.7" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "95%", stopColor: "currentColor", className: "text-content-secondary", stopOpacity: "0" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.CartesianGrid, { vertical: false, stroke: "currentColor", className: "text-content-tertiary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.Legend,
+          {
+            verticalAlign: "top",
+            align: "right",
+            layout: isDesktop ? "vertical" : "horizontal",
+            content: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartLegendContent, { className: "-translate-y-2" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.XAxis,
+          {
+            fill: "currentColor",
+            axisLine: false,
+            tickLine: false,
+            tickMargin: 10,
+            interval: "preserveStartEnd",
+            dataKey: "date",
+            tickFormatter: (value) => value.toLocaleDateString(void 0, { month: "short" }),
+            padding: { left: 10, right: 10 },
+            children: isDesktop && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.Label, { fill: "currentColor", className: "!text-xs font-medium max-lg:hidden", position: "bottom", children: "Month" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.YAxis,
+          {
+            fill: "currentColor",
+            axisLine: false,
+            tickLine: false,
+            interval: "preserveStartEnd",
+            tickFormatter: (value) => Number(value).toLocaleString(),
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_recharts2.Label,
+              {
+                value: "Active users",
+                fill: "currentColor",
+                className: "!text-xs font-medium",
+                style: { textAnchor: "middle" },
+                angle: -90,
+                position: "insideLeft"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.Tooltip,
+          {
+            content: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartTooltipContent, {}),
+            formatter: (value) => Number(value).toLocaleString(),
+            labelFormatter: (value) => value.toLocaleDateString(void 0, { month: "short", year: "numeric" }),
+            cursor: {
+              className: "stroke-brand-medium stroke-2"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.Area,
+          {
+            isAnimationActive: false,
+            className: (0, import_react3.cx)(colors.A, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"),
+            dataKey: "A",
+            name: "Series 1",
+            type: "monotone",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            fill: "url(#gradient)",
+            fillOpacity: 0.1,
+            activeDot: {
+              className: "fill-bg-base stroke-brand-medium stroke-2"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.Area,
+          {
+            isAnimationActive: false,
+            className: (0, import_react3.cx)(colors.B, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"),
+            dataKey: "B",
+            name: "Series 2",
+            type: "monotone",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            fill: "none",
+            activeDot: {
+              className: "fill-bg-base stroke-brand-medium stroke-2"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_recharts2.Area,
+          {
+            isAnimationActive: false,
+            className: (0, import_react3.cx)(colors.C, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"),
+            dataKey: "C",
+            name: "Series 3",
+            type: "monotone",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            fill: "none",
+            activeDot: {
+              className: "fill-bg-base stroke-brand-medium stroke-2"
+            }
+          }
+        )
+      ]
+    }
+  ) }) });
+};
+
+// src/components/pie-charts.demo.tsx
+var import_recharts3 = require("recharts");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var pieChartData = [
+  // collapse-start
+  {
+    name: "Series 1",
+    value: 200,
+    className: "text-content-brand"
+  },
+  {
+    name: "Series 2",
+    value: 350,
+    className: "text-content-brand"
+  },
+  {
+    name: "Series 3",
+    value: 100,
+    className: "text-brand-subtle"
+  },
+  {
+    name: "Series 4",
+    value: 120,
+    className: "text-brand-subtle"
+  },
+  {
+    name: "Series 5",
+    value: 230,
+    className: "text-content-tertiary"
+  }
+  // collapse-end
+];
+var PieChartXxs = ({ data = pieChartData }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.ResponsiveContainer, { height: 120, className: "max-w-52.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    import_recharts3.PieChart,
+    {
+      margin: {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Legend, { verticalAlign: "top", align: "right", layout: "vertical", content: ChartLegendContent }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartTooltipContent, { isPieChart: true }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_recharts3.Pie,
+          {
+            isAnimationActive: false,
+            startAngle: -270,
+            endAngle: -630,
+            stroke: "none",
+            data,
+            dataKey: "value",
+            nameKey: "name",
+            fill: "currentColor",
+            innerRadius: 30,
+            outerRadius: 60
+          }
+        )
+      ]
+    }
+  ) });
+};
+var PieChartXs = ({ data = pieChartData }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.ResponsiveContainer, { height: 160, className: "max-w-62.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    import_recharts3.PieChart,
+    {
+      margin: {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Legend, { verticalAlign: "top", align: "right", layout: "vertical", content: ChartLegendContent }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartTooltipContent, { isPieChart: true }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_recharts3.Pie,
+          {
+            isAnimationActive: false,
+            startAngle: -270,
+            endAngle: -630,
+            stroke: "none",
+            data,
+            dataKey: "value",
+            nameKey: "name",
+            fill: "currentColor",
+            innerRadius: 40,
+            outerRadius: 80
+          }
+        )
+      ]
+    }
+  ) });
+};
+var PieChartSm = ({ data = pieChartData }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.ResponsiveContainer, { height: 200, className: "max-w-72.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    import_recharts3.PieChart,
+    {
+      margin: {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Legend, { verticalAlign: "top", align: "right", layout: "vertical", content: ChartLegendContent }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartTooltipContent, { isPieChart: true }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_recharts3.Pie,
+          {
+            isAnimationActive: false,
+            startAngle: -270,
+            endAngle: -630,
+            stroke: "none",
+            data,
+            dataKey: "value",
+            nameKey: "name",
+            fill: "currentColor",
+            innerRadius: 50,
+            outerRadius: 100
+          }
+        )
+      ]
+    }
+  ) });
+};
+var PieChartMd = ({ data = pieChartData }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.ResponsiveContainer, { height: 240, className: "max-w-96", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    import_recharts3.PieChart,
+    {
+      margin: {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Legend, { verticalAlign: "top", align: "right", layout: "vertical", content: ChartLegendContent }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartTooltipContent, { isPieChart: true }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_recharts3.Pie,
+          {
+            isAnimationActive: false,
+            startAngle: -270,
+            endAngle: -630,
+            stroke: "none",
+            data,
+            dataKey: "value",
+            nameKey: "name",
+            fill: "currentColor",
+            innerRadius: 60,
+            outerRadius: 120
+          }
+        )
+      ]
+    }
+  ) });
+};
+var PieChartLg = ({ data = pieChartData }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.ResponsiveContainer, { height: 280, className: "max-w-96", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    import_recharts3.PieChart,
+    {
+      margin: {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Legend, { verticalAlign: "top", align: "right", layout: "vertical", content: ChartLegendContent }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartTooltipContent, { isPieChart: true }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_recharts3.Pie,
+          {
+            isAnimationActive: false,
+            startAngle: -270,
+            endAngle: -630,
+            stroke: "none",
+            data,
+            dataKey: "value",
+            nameKey: "name",
+            fill: "currentColor",
+            innerRadius: 70,
+            outerRadius: 140
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+// src/components/relationship-graph.tsx
+var import_react4 = require("@enact-ui/react");
+var import_framer_motion = require("framer-motion");
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var DEFAULT_TYPE_COLORS = {
+  product: "#0284C7",
+  ingredient: "#059669",
+  plant: "#65A30D",
+  recipe: "#F59E0B",
+  variant: "#8B5CF6",
+  field: "#6366F1",
+  domain: "#EC4899",
+  default: "#6B7280"
+};
+var EDGE_STYLES = {
+  default: {},
+  dashed: { dashArray: "4,4" },
+  dotted: { dashArray: "2,2" }
+};
+function useForceLayout(nodes, edges, width, height) {
+  const [positionedNodes, setPositionedNodes] = (0, import_react5.useState)([]);
+  (0, import_react5.useEffect)(() => {
+    if (nodes.length === 0) return;
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const radius = Math.min(width, height) * 0.35;
+    const positioned = nodes.map((node, i) => {
+      const angle = 2 * Math.PI * i / nodes.length;
+      return {
+        ...node,
+        x: node.isRoot ? centerX : centerX + radius * Math.cos(angle),
+        y: node.isRoot ? centerY : centerY + radius * Math.sin(angle),
+        vx: 0,
+        vy: 0
+      };
+    });
+    const iterations = 50;
+    const repulsion = 5e3;
+    const attraction = 0.05;
+    const damping = 0.9;
+    const centerForce = 0.01;
+    for (let iter = 0; iter < iterations; iter++) {
+      for (let i = 0; i < positioned.length; i++) {
+        const node = positioned[i];
+        if (!node) continue;
+        for (let j = 0; j < positioned.length; j++) {
+          if (i === j) continue;
+          const other = positioned[j];
+          if (!other) continue;
+          const dx = node.x - other.x;
+          const dy = node.y - other.y;
+          const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+          const force = repulsion / (dist * dist);
+          node.vx += dx / dist * force;
+          node.vy += dy / dist * force;
+        }
+        edges.forEach((edge) => {
+          if (edge.source === node.id || edge.target === node.id) {
+            const otherId = edge.source === node.id ? edge.target : edge.source;
+            const other = positioned.find((n) => n.id === otherId);
+            if (other) {
+              const dx = other.x - node.x;
+              const dy = other.y - node.y;
+              node.vx += dx * attraction;
+              node.vy += dy * attraction;
+            }
+          }
+        });
+        node.vx += (centerX - node.x) * centerForce;
+        node.vy += (centerY - node.y) * centerForce;
+        if (node.isRoot) {
+          node.vx = (centerX - node.x) * 0.5;
+          node.vy = (centerY - node.y) * 0.5;
+        }
+      }
+      for (const node of positioned) {
+        node.x += node.vx;
+        node.y += node.vy;
+        node.vx *= damping;
+        node.vy *= damping;
+        const padding = 60;
+        node.x = Math.max(padding, Math.min(width - padding, node.x));
+        node.y = Math.max(padding, Math.min(height - padding, node.y));
+      }
+    }
+    setPositionedNodes(positioned);
+  }, [nodes, edges, width, height]);
+  const positionedEdges = (0, import_react5.useMemo)(() => {
+    return edges.map((edge) => {
+      const sourceNode = positionedNodes.find((n) => n.id === edge.source);
+      const targetNode = positionedNodes.find((n) => n.id === edge.target);
+      if (!sourceNode || !targetNode) return null;
+      return { ...edge, sourceNode, targetNode };
+    }).filter(Boolean);
+  }, [edges, positionedNodes]);
+  return { positionedNodes, positionedEdges };
+}
+function useHierarchicalLayout(nodes, edges, width, height) {
+  const positionedNodes = (0, import_react5.useMemo)(() => {
+    if (nodes.length === 0) return [];
+    const rootNode = nodes.find((n) => n.isRoot) || nodes[0];
+    if (!rootNode) return [];
+    const children = {};
+    nodes.forEach((n) => {
+      children[n.id] = [];
+    });
+    edges.forEach((edge) => {
+      const sourceChildren = children[edge.source];
+      if (sourceChildren) sourceChildren.push(edge.target);
+    });
+    const levels = { [rootNode.id]: 0 };
+    const queue = [rootNode.id];
+    const visited = /* @__PURE__ */ new Set([rootNode.id]);
+    while (queue.length > 0) {
+      const current = queue.shift();
+      if (current === void 0) break;
+      const currentLevel = levels[current];
+      if (currentLevel !== void 0) {
+        children[current]?.forEach((childId) => {
+          if (!visited.has(childId)) {
+            visited.add(childId);
+            levels[childId] = currentLevel + 1;
+            queue.push(childId);
+          }
+        });
+      }
+    }
+    nodes.forEach((n) => {
+      if (levels[n.id] === void 0) levels[n.id] = 1;
+    });
+    const nodesByLevel = {};
+    nodes.forEach((n) => {
+      const level = levels[n.id];
+      if (level !== void 0) {
+        if (!nodesByLevel[level]) nodesByLevel[level] = [];
+        nodesByLevel[level].push(n);
+      }
+    });
+    const maxLevel = Math.max(...Object.keys(nodesByLevel).map(Number));
+    const levelHeight = height / (maxLevel + 2);
+    return nodes.map((node) => {
+      const level = levels[node.id];
+      if (level === void 0) {
+        return { ...node, x: 0, y: 0, vx: 0, vy: 0 };
+      }
+      const nodesAtLevel = nodesByLevel[level];
+      if (!nodesAtLevel) {
+        return { ...node, x: 0, y: 0, vx: 0, vy: 0 };
+      }
+      const indexAtLevel = nodesAtLevel.indexOf(node);
+      const levelWidth = width / (nodesAtLevel.length + 1);
+      return {
+        ...node,
+        x: levelWidth * (indexAtLevel + 1),
+        y: levelHeight * (level + 1),
+        vx: 0,
+        vy: 0
+      };
+    });
+  }, [nodes, edges, width, height]);
+  const positionedEdges = (0, import_react5.useMemo)(() => {
+    return edges.map((edge) => {
+      const sourceNode = positionedNodes.find((n) => n.id === edge.source);
+      const targetNode = positionedNodes.find((n) => n.id === edge.target);
+      if (!sourceNode || !targetNode) return null;
+      return { ...edge, sourceNode, targetNode };
+    }).filter(Boolean);
+  }, [edges, positionedNodes]);
+  return { positionedNodes, positionedEdges };
+}
+function useRadialLayout(nodes, edges, width, height) {
+  const positionedNodes = (0, import_react5.useMemo)(() => {
+    if (nodes.length === 0) return [];
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const rootNode = nodes.find((n) => n.isRoot) || nodes[0];
+    if (!rootNode) return [];
+    const distances = { [rootNode.id]: 0 };
+    const queue = [rootNode.id];
+    const visited = /* @__PURE__ */ new Set([rootNode.id]);
+    const adjacent = {};
+    nodes.forEach((n) => {
+      adjacent[n.id] = /* @__PURE__ */ new Set();
+    });
+    edges.forEach((e) => {
+      adjacent[e.source]?.add(e.target);
+      adjacent[e.target]?.add(e.source);
+    });
+    while (queue.length > 0) {
+      const current = queue.shift();
+      if (current === void 0) break;
+      const currentDist = distances[current];
+      if (currentDist !== void 0) {
+        adjacent[current]?.forEach((neighborId) => {
+          if (!visited.has(neighborId)) {
+            visited.add(neighborId);
+            distances[neighborId] = currentDist + 1;
+            queue.push(neighborId);
+          }
+        });
+      }
+    }
+    nodes.forEach((n) => {
+      if (distances[n.id] === void 0) distances[n.id] = 1;
+    });
+    const nodesByDistance = {};
+    nodes.forEach((n) => {
+      const dist = distances[n.id];
+      if (dist !== void 0) {
+        if (!nodesByDistance[dist]) nodesByDistance[dist] = [];
+        nodesByDistance[dist].push(n);
+      }
+    });
+    const maxDistance = Math.max(...Object.keys(nodesByDistance).map(Number));
+    const radiusStep = Math.min(width, height) * 0.35 / Math.max(maxDistance, 1);
+    return nodes.map((node) => {
+      const dist = distances[node.id];
+      if (dist === void 0) {
+        return { ...node, x: centerX, y: centerY, vx: 0, vy: 0 };
+      }
+      if (dist === 0) return { ...node, x: centerX, y: centerY, vx: 0, vy: 0 };
+      const nodesAtDist = nodesByDistance[dist];
+      if (!nodesAtDist) {
+        return { ...node, x: centerX, y: centerY, vx: 0, vy: 0 };
+      }
+      const indexAtDist = nodesAtDist.indexOf(node);
+      const angle = 2 * Math.PI * indexAtDist / nodesAtDist.length;
+      const radius = radiusStep * dist;
+      return {
+        ...node,
+        x: centerX + radius * Math.cos(angle),
+        y: centerY + radius * Math.sin(angle),
+        vx: 0,
+        vy: 0
+      };
+    });
+  }, [nodes, edges, width, height]);
+  const positionedEdges = (0, import_react5.useMemo)(() => {
+    return edges.map((edge) => {
+      const sourceNode = positionedNodes.find((n) => n.id === edge.source);
+      const targetNode = positionedNodes.find((n) => n.id === edge.target);
+      if (!sourceNode || !targetNode) return null;
+      return { ...edge, sourceNode, targetNode };
+    }).filter(Boolean);
+  }, [edges, positionedNodes]);
+  return { positionedNodes, positionedEdges };
+}
+var GraphNodeComponent = ({ node, onClick, showLabel, isHighlighted, isHovered, onHover, typeColors }) => {
+  const nodeColor = node.color || typeColors[node.type] || typeColors.default || DEFAULT_TYPE_COLORS.default;
+  const nodeSize = node.isRoot ? 28 : 22;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_framer_motion.motion.g,
+    {
+      initial: { scale: 0, opacity: 0 },
+      animate: { scale: isHovered || isHighlighted ? 1.2 : 1, opacity: 1 },
+      transition: { type: "spring", stiffness: 300, damping: 20 },
+      style: { cursor: onClick ? "pointer" : "default" },
+      onClick,
+      onMouseEnter: () => onHover(true),
+      onMouseLeave: () => onHover(false),
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "circle",
+          {
+            cx: node.x,
+            cy: node.y,
+            r: nodeSize,
+            fill: nodeColor,
+            stroke: isHighlighted ? "#1F2937" : "white",
+            strokeWidth: isHighlighted ? 3 : 2,
+            style: { filter: isHovered ? "drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3))" : void 0 }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: node.x, y: node.y, textAnchor: "middle", dominantBaseline: "central", fill: "white", fontSize: node.isRoot ? 12 : 10, fontWeight: "bold", children: node.label.charAt(0).toUpperCase() }),
+        showLabel && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: node.x, y: node.y + nodeSize + 14, textAnchor: "middle", fill: "#374151", fontSize: 11, fontWeight: node.isRoot ? 600 : 400, children: node.label.length > 20 ? `${node.label.substring(0, 18)}...` : node.label })
+      ]
+    }
+  );
+};
+var GraphEdgeComponent = ({ edge, onClick, isHighlighted, showLabel }) => {
+  const edgeType = edge.type || "default";
+  const style = EDGE_STYLES[edgeType] ?? EDGE_STYLES.default ?? {};
+  const dashArray = style.dashArray;
+  const strokeWidth = (edge.strength || 0.5) * 2 + 1;
+  const edgeColor = edge.color || "#6B7280";
+  const dx = edge.targetNode.x - edge.sourceNode.x;
+  const dy = edge.targetNode.y - edge.sourceNode.y;
+  const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+  const sourceRadius = edge.sourceNode.isRoot ? 28 : 22;
+  const targetRadius = edge.targetNode.isRoot ? 28 : 22;
+  const startX = edge.sourceNode.x + dx / dist * sourceRadius;
+  const startY = edge.sourceNode.y + dy / dist * sourceRadius;
+  const endX = edge.targetNode.x - dx / dist * targetRadius;
+  const endY = edge.targetNode.y - dy / dist * targetRadius;
+  const midX = (startX + endX) / 2;
+  const midY = (startY + endY) / 2;
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: SVG g element needs role="button" for accessibility when interactive
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { style: { cursor: onClick ? "pointer" : "default" }, onClick, role: onClick ? "button" : void 0, tabIndex: onClick ? 0 : void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_framer_motion.motion.line,
+        {
+          x1: startX,
+          y1: startY,
+          x2: endX,
+          y2: endY,
+          stroke: isHighlighted ? "#1F2937" : edgeColor,
+          strokeWidth: isHighlighted ? strokeWidth + 1 : strokeWidth,
+          strokeDasharray: dashArray,
+          initial: { pathLength: 0, opacity: 0 },
+          animate: { pathLength: 1, opacity: 0.7 },
+          transition: { duration: 0.5, delay: 0.2 },
+          markerEnd: "url(#arrowhead)"
+        }
+      ),
+      showLabel && edge.label && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: midX - 30, y: midY - 8, width: 60, height: 16, rx: 4, fill: "white", fillOpacity: 0.9 }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: midX, y: midY + 4, textAnchor: "middle", fill: "#6B7280", fontSize: 9, children: edge.label })
+      ] })
+    ] })
+  );
+};
+var NodeTooltip = ({ node, typeColors }) => {
+  const nodeColor = node.color || typeColors[node.type] || typeColors.default || DEFAULT_TYPE_COLORS.default;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_framer_motion.motion.foreignObject,
+    {
+      x: node.x + 30,
+      y: node.y - 40,
+      width: 200,
+      height: 100,
+      initial: { opacity: 0, scale: 0.9 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.9 },
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "rounded-lg border bg-white p-3 shadow-lg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mb-1 flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "h-2 w-2 rounded-full", style: { background: nodeColor } }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { className: "text-sm", children: node.label })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-content-tertiary text-xs", children: [
+          "Type: ",
+          node.type
+        ] }),
+        node.metadata && Object.entries(node.metadata).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-content-tertiary text-xs", children: [
+          key,
+          ": ",
+          value
+        ] }, key))
+      ] })
+    }
+  );
+};
+var GraphLegend = ({ nodes, typeColors }) => {
+  const types = (0, import_react5.useMemo)(() => Array.from(new Set(nodes.map((n) => n.type))), [nodes]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "absolute bottom-3 left-3 rounded-lg bg-white p-2 text-xs shadow-md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-content-primary mb-1.5 font-semibold", children: "Legend" }),
+    types.map((type) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mb-0.5 flex items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "h-2.5 w-2.5 rounded-full", style: { background: typeColors[type] || typeColors.default || DEFAULT_TYPE_COLORS.default } }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-content-tertiary capitalize", children: type })
+    ] }, type))
+  ] });
+};
+function RelationshipGraph({
+  nodes,
+  edges,
+  onNodeClick,
+  onEdgeClick,
+  width = 600,
+  height = 400,
+  animate: _animate = true,
+  layout = "force",
+  className,
+  showLabels = true,
+  showLegend = true,
+  interactive = true,
+  highlightNode,
+  typeColors = DEFAULT_TYPE_COLORS
+}) {
+  const [hoveredNode, setHoveredNode] = (0, import_react5.useState)(null);
+  const svgRef = (0, import_react5.useRef)(null);
+  const mergedColors = { ...DEFAULT_TYPE_COLORS, ...typeColors };
+  const forceLayout = useForceLayout(layout === "force" ? nodes : [], layout === "force" ? edges : [], width, height);
+  const hierarchicalLayout = useHierarchicalLayout(layout === "hierarchical" ? nodes : [], layout === "hierarchical" ? edges : [], width, height);
+  const radialLayout = useRadialLayout(layout === "radial" ? nodes : [], layout === "radial" ? edges : [], width, height);
+  const { positionedNodes, positionedEdges } = layout === "force" ? forceLayout : layout === "hierarchical" ? hierarchicalLayout : radialLayout;
+  const handleNodeClick = (0, import_react5.useCallback)(
+    (node) => {
+      if (onNodeClick && interactive) onNodeClick(node);
+    },
+    [onNodeClick, interactive]
+  );
+  const handleEdgeClick = (0, import_react5.useCallback)(
+    (edge) => {
+      if (onEdgeClick && interactive) onEdgeClick(edge);
+    },
+    [onEdgeClick, interactive]
+  );
+  const hoveredNodeData = (0, import_react5.useMemo)(() => positionedNodes.find((n) => n.id === hoveredNode), [positionedNodes, hoveredNode]);
+  if (nodes.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_react4.cx)("flex items-center justify-center rounded-lg border border-dashed bg-gray-50", className), style: { width, height }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-content-tertiary text-sm", children: "No relationships to display" }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_react4.cx)("relative", className), style: { width, height }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { ref: svgRef, width, height, className: "rounded-lg border bg-gray-50", role: "img", "aria-label": "Relationship graph visualization", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("marker", { id: "arrowhead", markerWidth: "10", markerHeight: "7", refX: "9", refY: "3.5", orient: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polygon", { points: "0 0, 10 3.5, 0 7", fill: "#6B7280" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("g", { className: "edges", children: positionedEdges.map((edge) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        GraphEdgeComponent,
+        {
+          edge,
+          ...onEdgeClick ? { onClick: () => handleEdgeClick(edge) } : {},
+          isHighlighted: hoveredNode === edge.source || hoveredNode === edge.target || highlightNode === edge.source || highlightNode === edge.target,
+          showLabel: showLabels
+        },
+        edge.id
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("g", { className: "nodes", children: positionedNodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        GraphNodeComponent,
+        {
+          node,
+          ...onNodeClick ? { onClick: () => handleNodeClick(node) } : {},
+          showLabel: showLabels,
+          isHighlighted: highlightNode === node.id,
+          isHovered: hoveredNode === node.id,
+          onHover: (hovering) => setHoveredNode(hovering ? node.id : null),
+          typeColors: mergedColors
+        },
+        node.id
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_framer_motion.AnimatePresence, { children: interactive && hoveredNodeData && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NodeTooltip, { node: hoveredNodeData, typeColors: mergedColors }) })
+    ] }),
+    showLegend && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GraphLegend, { nodes, typeColors: mergedColors })
+  ] });
+}
+
+// src/components/trend-indicator.tsx
+var import_react6 = require("@enact-ui/react");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var sizeStyles = {
+  sm: {
+    container: "text-xs gap-0.5",
+    icon: "h-3 w-3"
+  },
+  md: {
+    container: "text-sm gap-1",
+    icon: "h-4 w-4"
+  },
+  lg: {
+    container: "text-base gap-1",
+    icon: "h-5 w-5"
+  }
+};
+var TrendIndicator = ({ direction, value, inverted = false, size = "md", showPercent = true, className }) => {
+  const isPositive = inverted ? direction === "down" : direction === "up";
+  const isNegative = inverted ? direction === "up" : direction === "down";
+  const colorClass = isPositive ? "text-content-success" : isNegative ? "text-content-error" : "text-content-tertiary";
+  const Icon = direction === "up" ? import_lucide_react.ArrowUp : direction === "down" ? import_lucide_react.ArrowDown : import_lucide_react.Minus;
+  const styles = sizeStyles[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: (0, import_react6.cx)("inline-flex items-center font-medium", styles.container, colorClass, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: styles.icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+      value,
+      showPercent && "%"
+    ] })
+  ] });
+};
+var TrendBadge = ({ label, className, ...props }) => {
+  const isPositive = props.inverted ? props.direction === "down" : props.direction === "up";
+  const isNegative = props.inverted ? props.direction === "up" : props.direction === "down";
+  const bgClass = isPositive ? "bg-surface-success-subtle" : isNegative ? "bg-surface-error-subtle" : "bg-surface-raised";
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: (0, import_react6.cx)("inline-flex items-center gap-1.5 rounded-full px-2 py-0.5", bgClass, className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-content-secondary text-xs", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TrendIndicator, { ...props })
+  ] });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BarChart,
+  BarChart02,
+  BarChart03,
   ChartActiveDot,
   ChartLegendContent,
   ChartTooltipContent,
+  LineChart01,
+  LineChart02,
+  LineChart03,
+  LineChart04,
+  PieChartLg,
+  PieChartMd,
+  PieChartSm,
+  PieChartXs,
+  PieChartXxs,
+  RelationshipGraph,
+  TrendBadge,
+  TrendIndicator,
   selectEvenlySpacedItems
 });
 //# sourceMappingURL=index.js.map