@mdxui/tremor 6.0.0

package/dist/insights/index.js

@@ -0,0 +1,1815 @@
+// src/insights/components/charts/area-chart.tsx
+import * as React from "react";
+import {
+  Area,
+  CartesianGrid,
+  AreaChart as RechartsAreaChart,
+  Legend as RechartsLegend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis
+} from "recharts";
+import { twMerge } from "tailwind-merge";
+import { jsx, jsxs } from "react/jsx-runtime";
+var chartColors = {
+  blue: "#3b82f6",
+  green: "#22c55e",
+  red: "#ef4444",
+  yellow: "#eab308",
+  purple: "#a855f7",
+  cyan: "#06b6d4",
+  orange: "#f97316",
+  pink: "#ec4899",
+  indigo: "#6366f1",
+  teal: "#14b8a6",
+  emerald: "#10b981",
+  gray: "#6b7280"
+};
+function getColor(color, index) {
+  if (chartColors[color]) return chartColors[color];
+  const defaultColors = Object.values(chartColors);
+  return defaultColors[index % defaultColors.length];
+}
+var AreaChart = React.forwardRef(
+  ({
+    data,
+    index,
+    categories,
+    colors,
+    valueFormatter,
+    startEndOnly = false,
+    showLegend = true,
+    showGridLines = true,
+    showAnimation = true,
+    stack = false,
+    curveType = "monotone",
+    connectNulls = false,
+    yAxisWidth = 56,
+    minValue,
+    maxValue,
+    className
+  }, ref) => {
+    const formatValue = valueFormatter || ((value) => value.toString());
+    return /* @__PURE__ */ jsx("div", { ref, className: twMerge("h-80 w-full", className), children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+      RechartsAreaChart,
+      {
+        data,
+        margin: { top: 10, right: 30, left: 0, bottom: 0 },
+        children: [
+          showGridLines && /* @__PURE__ */ jsx(
+            CartesianGrid,
+            {
+              strokeDasharray: "3 3",
+              className: "stroke-gray-200 dark:stroke-gray-800",
+              horizontal: true,
+              vertical: false
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: index,
+              tick: { fontSize: 12 },
+              tickLine: false,
+              axisLine: false,
+              className: "fill-gray-500 text-xs",
+              tickFormatter: startEndOnly ? void 0 : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              width: yAxisWidth,
+              tick: { fontSize: 12 },
+              tickLine: false,
+              axisLine: false,
+              tickFormatter: formatValue,
+              className: "fill-gray-500 text-xs",
+              domain: [minValue ?? "auto", maxValue ?? "auto"]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              formatter: (value, name) => {
+                const numValue = typeof value === "number" ? value : 0;
+                return [formatValue(numValue), String(name)];
+              },
+              contentStyle: {
+                backgroundColor: "white",
+                border: "1px solid #e5e7eb",
+                borderRadius: "6px",
+                boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
+              }
+            }
+          ),
+          showLegend && /* @__PURE__ */ jsx(RechartsLegend, { verticalAlign: "top", height: 36 }),
+          categories.map((category, idx) => {
+            const color = colors?.[idx] || category;
+            return /* @__PURE__ */ jsx(
+              Area,
+              {
+                type: curveType,
+                dataKey: category,
+                stroke: getColor(color, idx),
+                fill: getColor(color, idx),
+                fillOpacity: 0.3,
+                strokeWidth: 2,
+                stackId: stack ? "stack" : void 0,
+                isAnimationActive: showAnimation,
+                connectNulls
+              },
+              category
+            );
+          })
+        ]
+      }
+    ) }) });
+  }
+);
+AreaChart.displayName = "AreaChart";
+
+// src/insights/components/charts/bar-chart.tsx
+import * as React2 from "react";
+import {
+  Bar,
+  CartesianGrid as CartesianGrid2,
+  BarChart as RechartsBarChart,
+  Legend as RechartsLegend2,
+  ResponsiveContainer as ResponsiveContainer2,
+  Tooltip as Tooltip2,
+  XAxis as XAxis2,
+  YAxis as YAxis2
+} from "recharts";
+import { twMerge as twMerge2 } from "tailwind-merge";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var chartColors2 = {
+  blue: "#3b82f6",
+  green: "#22c55e",
+  red: "#ef4444",
+  yellow: "#eab308",
+  purple: "#a855f7",
+  cyan: "#06b6d4",
+  orange: "#f97316",
+  pink: "#ec4899",
+  indigo: "#6366f1",
+  teal: "#14b8a6",
+  emerald: "#10b981",
+  gray: "#6b7280"
+};
+function getColor2(color, index) {
+  if (chartColors2[color]) return chartColors2[color];
+  const defaultColors = Object.values(chartColors2);
+  return defaultColors[index % defaultColors.length];
+}
+var BarChart = React2.forwardRef(
+  ({
+    data,
+    index,
+    categories,
+    colors,
+    valueFormatter,
+    layout = "vertical",
+    stack = false,
+    relative = false,
+    showLegend = true,
+    showGridLines = true,
+    showAnimation = true,
+    yAxisWidth = 56,
+    barCategoryGap,
+    className
+  }, ref) => {
+    const formatValue = valueFormatter || ((value) => value.toString());
+    const rechartsLayout = layout === "horizontal" ? "vertical" : "horizontal";
+    return /* @__PURE__ */ jsx2("div", { ref, className: twMerge2("h-80 w-full", className), children: /* @__PURE__ */ jsx2(ResponsiveContainer2, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs2(
+      RechartsBarChart,
+      {
+        data,
+        layout: rechartsLayout,
+        margin: { top: 10, right: 30, left: 0, bottom: 0 },
+        barCategoryGap,
+        stackOffset: relative ? "expand" : void 0,
+        children: [
+          showGridLines && /* @__PURE__ */ jsx2(
+            CartesianGrid2,
+            {
+              strokeDasharray: "3 3",
+              className: "stroke-gray-200 dark:stroke-gray-800",
+              horizontal: rechartsLayout !== "vertical",
+              vertical: rechartsLayout === "vertical"
+            }
+          ),
+          rechartsLayout === "horizontal" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx2(
+              XAxis2,
+              {
+                dataKey: index,
+                tick: { fontSize: 12 },
+                tickLine: false,
+                axisLine: false,
+                className: "fill-gray-500 text-xs"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              YAxis2,
+              {
+                width: yAxisWidth,
+                tick: { fontSize: 12 },
+                tickLine: false,
+                axisLine: false,
+                tickFormatter: relative ? (value) => `${(value * 100).toFixed(0)}%` : formatValue,
+                className: "fill-gray-500 text-xs"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx2(
+              XAxis2,
+              {
+                type: "number",
+                tick: { fontSize: 12 },
+                tickLine: false,
+                axisLine: false,
+                tickFormatter: relative ? (value) => `${(value * 100).toFixed(0)}%` : formatValue,
+                className: "fill-gray-500 text-xs"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              YAxis2,
+              {
+                type: "category",
+                dataKey: index,
+                width: yAxisWidth,
+                tick: { fontSize: 12 },
+                tickLine: false,
+                axisLine: false,
+                className: "fill-gray-500 text-xs"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2(
+            Tooltip2,
+            {
+              formatter: (value, name) => {
+                const numValue = typeof value === "number" ? value : 0;
+                return [
+                  relative ? `${(numValue * 100).toFixed(1)}%` : formatValue(numValue),
+                  String(name)
+                ];
+              },
+              contentStyle: {
+                backgroundColor: "white",
+                border: "1px solid #e5e7eb",
+                borderRadius: "6px",
+                boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
+              }
+            }
+          ),
+          showLegend && /* @__PURE__ */ jsx2(RechartsLegend2, { verticalAlign: "top", height: 36 }),
+          categories.map((category, idx) => {
+            const color = colors?.[idx] || category;
+            return /* @__PURE__ */ jsx2(
+              Bar,
+              {
+                dataKey: category,
+                fill: getColor2(color, idx),
+                stackId: stack || relative ? "stack" : void 0,
+                isAnimationActive: showAnimation,
+                radius: [4, 4, 0, 0]
+              },
+              category
+            );
+          })
+        ]
+      }
+    ) }) });
+  }
+);
+BarChart.displayName = "BarChart";
+
+// src/insights/components/charts/bar-chart-variant.tsx
+import * as React3 from "react";
+import {
+  Bar as Bar2,
+  CartesianGrid as CartesianGrid3,
+  Label,
+  BarChart as RechartsBarChart2,
+  Legend as RechartsLegend3,
+  ResponsiveContainer as ResponsiveContainer3,
+  Tooltip as Tooltip3,
+  XAxis as XAxis3,
+  YAxis as YAxis3
+} from "recharts";
+import { twMerge as twMerge3 } from "tailwind-merge";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var chartColors3 = {
+  blue: { fill: "#3b82f6", stroke: "#2563eb" },
+  emerald: { fill: "#10b981", stroke: "#059669" },
+  violet: { fill: "#8b5cf6", stroke: "#7c3aed" },
+  amber: { fill: "#f59e0b", stroke: "#d97706" },
+  gray: { fill: "#6b7280", stroke: "#4b5563" },
+  cyan: { fill: "#06b6d4", stroke: "#0891b2" },
+  pink: { fill: "#ec4899", stroke: "#db2777" },
+  lime: { fill: "#84cc16", stroke: "#65a30d" },
+  fuchsia: { fill: "#d946ef", stroke: "#c026d3" },
+  orange: { fill: "#f97316", stroke: "#ea580c" }
+};
+function getColor3(color, index) {
+  if (chartColors3[color]) return chartColors3[color];
+  const defaultColors = Object.values(chartColors3);
+  return defaultColors[index % defaultColors.length];
+}
+var renderShape = (props, activeBar, activeLegend, strokeColor, layout) => {
+  const { name, payload, value } = props;
+  let { x, width, y, height } = props;
+  let lineX1, lineY1, lineX2, lineY2;
+  if (layout === "horizontal" && height < 0) {
+    y += height;
+    height = Math.abs(height);
+  } else if (layout === "vertical" && width < 0) {
+    x += width;
+    width = Math.abs(width);
+  }
+  if (layout === "horizontal") {
+    lineX1 = x;
+    lineY1 = y;
+    lineX2 = x + width;
+    lineY2 = y;
+  } else {
+    lineX1 = x + width;
+    lineY1 = y;
+    lineX2 = x + width;
+    lineY2 = y + height;
+  }
+  const isActive = activeBar && activeBar.value === value && JSON.stringify(activeBar.payload) === JSON.stringify(payload);
+  const opacity = activeBar || activeLegend && activeLegend !== name ? isActive ? 0.2 : 0.1 : 0.2;
+  const lineOpacity = activeBar || activeLegend && activeLegend !== name ? isActive ? 1 : 0.5 : 1;
+  return /* @__PURE__ */ jsxs3("g", { children: [
+    /* @__PURE__ */ jsx3(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        fill: "currentColor",
+        opacity
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "line",
+      {
+        x1: lineX1,
+        y1: lineY1,
+        x2: lineX2,
+        y2: lineY2,
+        stroke: strokeColor,
+        strokeWidth: "2",
+        opacity: lineOpacity
+      }
+    )
+  ] });
+};
+var BarChartVariant = React3.forwardRef((props, forwardedRef) => {
+  const {
+    data = [],
+    categories = [],
+    index,
+    colors = ["blue", "emerald", "violet", "amber"],
+    valueFormatter = (value) => value.toString(),
+    xValueFormatter = (value) => value.toString(),
+    showXAxis = true,
+    showYAxis = true,
+    showGridLines = true,
+    yAxisWidth = 56,
+    showTooltip = true,
+    showLegend = true,
+    autoMinValue = false,
+    minValue,
+    maxValue,
+    allowDecimals = true,
+    barCategoryGap = "2%",
+    xAxisLabel,
+    yAxisLabel,
+    type = "default",
+    legendPosition = "right",
+    layout = "horizontal",
+    className,
+    onValueChange,
+    syncId,
+    ...other
+  } = props;
+  const [legendHeight] = React3.useState(60);
+  const [activeLegend, setActiveLegend] = React3.useState(
+    void 0
+  );
+  const [activeBar, setActiveBar] = React3.useState(void 0);
+  const stacked = type === "stacked" || type === "percent";
+  const getYAxisDomain = () => {
+    const min = autoMinValue ? "auto" : minValue ?? 0;
+    const max = maxValue ?? "auto";
+    return [min, max];
+  };
+  const yAxisDomain = getYAxisDomain();
+  function valueToPercent(value) {
+    return `${(value * 100).toFixed(0)}%`;
+  }
+  function onBarClick(barData) {
+    if (!onValueChange) return;
+    if (activeBar && JSON.stringify(activeBar) === JSON.stringify(barData)) {
+      setActiveLegend(void 0);
+      setActiveBar(void 0);
+      onValueChange(null);
+    } else {
+      setActiveBar(barData);
+      onValueChange(barData);
+    }
+  }
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref: forwardedRef,
+      className: twMerge3("h-80 w-full", className),
+      ...other,
+      children: /* @__PURE__ */ jsx3(ResponsiveContainer3, { children: /* @__PURE__ */ jsxs3(
+        RechartsBarChart2,
+        {
+          data,
+          margin: {
+            bottom: xAxisLabel ? 30 : void 0,
+            left: yAxisLabel ? 20 : void 0,
+            right: yAxisLabel ? 5 : void 0,
+            top: 10
+          },
+          stackOffset: type === "percent" ? "expand" : void 0,
+          layout,
+          barCategoryGap,
+          syncId,
+          children: [
+            showGridLines && /* @__PURE__ */ jsx3(
+              CartesianGrid3,
+              {
+                className: "stroke-gray-100 stroke-1 dark:stroke-gray-900",
+                horizontal: layout !== "vertical",
+                vertical: layout === "vertical"
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              XAxis3,
+              {
+                hide: !showXAxis,
+                tick: {
+                  transform: layout !== "vertical" ? "translate(0, 6)" : void 0
+                },
+                fill: "",
+                stroke: "",
+                className: "text-xs fill-gray-500 dark:fill-gray-500",
+                tickLine: false,
+                axisLine: false,
+                minTickGap: 5,
+                tickFormatter: xValueFormatter,
+                ...layout !== "vertical" ? {
+                  dataKey: index
+                } : {
+                  type: "number",
+                  domain: yAxisDomain,
+                  tickFormatter: type === "percent" ? valueToPercent : valueFormatter,
+                  allowDecimals
+                },
+                children: xAxisLabel && /* @__PURE__ */ jsx3(
+                  Label,
+                  {
+                    position: "insideBottom",
+                    offset: -20,
+                    className: "fill-gray-800 text-sm font-medium dark:fill-gray-200",
+                    children: xAxisLabel
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              YAxis3,
+              {
+                width: yAxisWidth,
+                hide: !showYAxis,
+                axisLine: false,
+                tickLine: layout === "horizontal",
+                tickSize: 6,
+                fill: "",
+                stroke: "",
+                className: "text-xs fill-gray-500 stroke-gray-800 dark:fill-gray-500 dark:stroke-gray-300",
+                tick: {
+                  transform: layout !== "vertical" ? "translate(-3, 0)" : "translate(0, 0)"
+                },
+                ...layout !== "vertical" ? {
+                  type: "number",
+                  domain: yAxisDomain,
+                  tickFormatter: type === "percent" ? valueToPercent : valueFormatter,
+                  allowDecimals
+                } : {
+                  dataKey: index,
+                  type: "category",
+                  interval: "equidistantPreserveStart"
+                },
+                children: yAxisLabel && /* @__PURE__ */ jsx3(
+                  Label,
+                  {
+                    position: "insideLeft",
+                    style: { textAnchor: "middle" },
+                    angle: -90,
+                    offset: -15,
+                    className: "fill-gray-800 text-sm font-medium dark:fill-gray-200",
+                    children: yAxisLabel
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              Tooltip3,
+              {
+                wrapperStyle: { outline: "none" },
+                isAnimationActive: true,
+                animationDuration: 100,
+                cursor: { fill: "#d1d5db", opacity: "0.15" },
+                offset: 20,
+                position: {
+                  y: layout === "horizontal" ? 0 : void 0,
+                  x: layout === "horizontal" ? void 0 : yAxisWidth + 20
+                },
+                content: showTooltip ? ({ active, payload, label }) => {
+                  if (active && payload && payload.length) {
+                    return /* @__PURE__ */ jsxs3("div", { className: "w-44 rounded-md border border-gray-200 bg-white text-sm shadow-md dark:border-gray-800 dark:bg-gray-950", children: [
+                      /* @__PURE__ */ jsx3("div", { className: "border-b border-inherit p-2", children: /* @__PURE__ */ jsx3("p", { className: "font-medium text-gray-900 dark:text-gray-50", children: xValueFormatter ? xValueFormatter(label) : label }) }),
+                      /* @__PURE__ */ jsx3("div", { className: "space-y-1 p-2", children: payload.map(
+                        (item, idx) => /* @__PURE__ */ jsxs3(
+                          "div",
+                          {
+                            className: "flex items-center justify-between space-x-4",
+                            children: [
+                              /* @__PURE__ */ jsxs3("div", { className: "flex items-center space-x-2", children: [
+                                /* @__PURE__ */ jsx3(
+                                  "span",
+                                  {
+                                    className: "size-2.5 shrink-0 rounded-sm",
+                                    style: {
+                                      backgroundColor: getColor3(
+                                        colors[idx] || "gray",
+                                        idx
+                                      ).fill
+                                    },
+                                    "aria-hidden": "true"
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx3("p", { className: "whitespace-nowrap text-right text-gray-700 dark:text-gray-300", children: item.dataKey })
+                              ] }),
+                              /* @__PURE__ */ jsx3("p", { className: "whitespace-nowrap text-right font-medium tabular-nums text-gray-900 dark:text-gray-50", children: valueFormatter(item.value) })
+                            ]
+                          },
+                          idx.toString()
+                        )
+                      ) })
+                    ] });
+                  }
+                  return null;
+                } : () => null
+              }
+            ),
+            showLegend && /* @__PURE__ */ jsx3(RechartsLegend3, { verticalAlign: "top", height: legendHeight }),
+            categories.map((category, idx) => {
+              const colorConfig = getColor3(colors[idx] || "gray", idx);
+              return /* @__PURE__ */ jsx3(
+                Bar2,
+                {
+                  name: category,
+                  dataKey: category,
+                  stackId: stacked ? "stack" : void 0,
+                  isAnimationActive: false,
+                  fill: colorConfig.fill,
+                  className: onValueChange ? "cursor-pointer" : "",
+                  shape: (shapeProps) => renderShape(
+                    shapeProps,
+                    activeBar,
+                    activeLegend,
+                    colorConfig.stroke,
+                    layout
+                  ),
+                  onClick: (barData) => onBarClick(barData)
+                },
+                category
+              );
+            })
+          ]
+        }
+      ) })
+    }
+  );
+});
+BarChartVariant.displayName = "BarChartVariant";
+
+// src/insights/components/charts/donut-chart.tsx
+import * as React4 from "react";
+import {
+  Cell,
+  Pie,
+  Legend as RechartsLegend4,
+  PieChart as RechartsPieChart,
+  ResponsiveContainer as ResponsiveContainer4,
+  Tooltip as Tooltip4
+} from "recharts";
+import { twMerge as twMerge4 } from "tailwind-merge";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var chartColors4 = {
+  blue: "#3b82f6",
+  green: "#22c55e",
+  red: "#ef4444",
+  yellow: "#eab308",
+  purple: "#a855f7",
+  cyan: "#06b6d4",
+  orange: "#f97316",
+  pink: "#ec4899",
+  indigo: "#6366f1",
+  teal: "#14b8a6",
+  emerald: "#10b981",
+  gray: "#6b7280"
+};
+function getColor4(color, index) {
+  if (color && chartColors4[color]) return chartColors4[color];
+  if (color && color.startsWith("#")) return color;
+  const defaultColors = Object.values(chartColors4);
+  return defaultColors[index % defaultColors.length];
+}
+var DonutChart = React4.forwardRef(
+  ({
+    data,
+    category,
+    value,
+    colors,
+    variant = "donut",
+    label,
+    showLegend = true,
+    showTooltip = true,
+    animationDuration = 500,
+    valueFormatter,
+    className
+  }, ref) => {
+    const formatValue = valueFormatter || ((val) => val.toString());
+    const innerRadius = variant === "donut" ? "60%" : 0;
+    return /* @__PURE__ */ jsx4("div", { ref, className: twMerge4("h-80 w-full", className), children: /* @__PURE__ */ jsx4(ResponsiveContainer4, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs4(RechartsPieChart, { children: [
+      /* @__PURE__ */ jsx4(
+        Pie,
+        {
+          data,
+          dataKey: value,
+          nameKey: category,
+          cx: "50%",
+          cy: "50%",
+          innerRadius,
+          outerRadius: "80%",
+          paddingAngle: 2,
+          isAnimationActive: animationDuration > 0,
+          animationDuration,
+          label: label ? false : void 0,
+          children: data.map((entry, index) => {
+            const entryColor = entry.color || colors?.[index];
+            return /* @__PURE__ */ jsx4(
+              Cell,
+              {
+                fill: getColor4(entryColor, index),
+                strokeWidth: 0
+              },
+              `cell-${index.toString()}`
+            );
+          })
+        }
+      ),
+      showTooltip && /* @__PURE__ */ jsx4(
+        Tooltip4,
+        {
+          formatter: (val, name) => {
+            const numValue = typeof val === "number" ? val : 0;
+            return [formatValue(numValue), String(name)];
+          },
+          contentStyle: {
+            backgroundColor: "white",
+            border: "1px solid #e5e7eb",
+            borderRadius: "6px",
+            boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
+          }
+        }
+      ),
+      showLegend && /* @__PURE__ */ jsx4(RechartsLegend4, { verticalAlign: "bottom", height: 36 }),
+      label && variant === "donut" && /* @__PURE__ */ jsx4(
+        "text",
+        {
+          x: "50%",
+          y: "50%",
+          textAnchor: "middle",
+          dominantBaseline: "middle",
+          className: "fill-gray-900 text-lg font-semibold dark:fill-gray-50",
+          children: label
+        }
+      )
+    ] }) }) });
+  }
+);
+DonutChart.displayName = "DonutChart";
+
+// src/insights/components/charts/transaction-chart.tsx
+import * as React5 from "react";
+import { twMerge as twMerge5 } from "tailwind-merge";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var InfoIcon = ({ className }) => /* @__PURE__ */ jsx5(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    className,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx5(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+      }
+    )
+  }
+);
+function formatCurrency(value, maxFractionDigits = 0) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    maximumFractionDigits: maxFractionDigits
+  }).format(value);
+}
+function formatNumber(value) {
+  return new Intl.NumberFormat("en-US").format(value);
+}
+var chartConfigs = {
+  amount: {
+    title: "Total Transaction Amount",
+    tooltipContent: "Total amount of transactions for the selected period and amount range.",
+    color: "blue",
+    valueFormatter: (number) => formatCurrency(number),
+    xValueFormatter: (dateString) => {
+      const date = new Date(dateString);
+      return date.toLocaleDateString("en-GB", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "2-digit"
+      });
+    }
+  },
+  count: {
+    title: "Transaction Count",
+    tooltipContent: "Total number of transactions for the selected period and amount range.",
+    color: "blue",
+    valueFormatter: (number) => formatNumber(number),
+    xValueFormatter: (dateString) => {
+      const date = new Date(dateString);
+      return date.toLocaleDateString("en-GB", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "2-digit"
+      });
+    }
+  },
+  category: {
+    title: "Top 5 Categories by Transaction Amount",
+    tooltipContent: "Total amount of transactions for the top 5 categories in the selected period and amount range.",
+    valueFormatter: (number) => formatCurrency(number),
+    layout: "vertical",
+    color: "emerald"
+  },
+  merchant: {
+    title: "Top 5 Merchants by Transaction Amount",
+    tooltipContent: "Total amount of transactions for the top 5 merchants in the selected period and amount range.",
+    valueFormatter: (number) => formatCurrency(number),
+    layout: "vertical",
+    color: "orange"
+  }
+};
+var TransactionChart = React5.forwardRef(
+  ({
+    type,
+    data,
+    yAxisWidth,
+    showYAxis = true,
+    title,
+    tooltipContent,
+    className,
+    ...other
+  }, ref) => {
+    const config = chartConfigs[type];
+    const chartTitle = title || config.title;
+    const chartTooltip = tooltipContent || config.tooltipContent;
+    const totalValue = React5.useMemo(
+      () => Math.round(data.reduce((sum, item) => sum + item.value, 0)),
+      [data]
+    );
+    return /* @__PURE__ */ jsxs5("div", { ref, className: twMerge5("w-full", className), ...other, children: [
+      /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs5("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx5(
+          "h2",
+          {
+            id: `${type}-chart-title`,
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: chartTitle
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            className: "inline-flex items-center",
+            title: chartTooltip,
+            children: /* @__PURE__ */ jsx5(InfoIcon, { className: "size-4 text-gray-600 dark:text-gray-400" })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx5(
+        "p",
+        {
+          className: "mt-2 text-2xl font-semibold text-gray-900 dark:text-gray-50",
+          "aria-live": "polite",
+          children: config.valueFormatter(totalValue)
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        BarChartVariant,
+        {
+          data,
+          index: "key",
+          categories: ["value"],
+          showLegend: false,
+          colors: [config.color],
+          yAxisWidth,
+          valueFormatter: config.valueFormatter,
+          xValueFormatter: config.xValueFormatter,
+          showYAxis,
+          className: "mt-6 h-48",
+          layout: config.layout,
+          barCategoryGap: "6%",
+          "aria-labelledby": `${type}-chart-title`,
+          role: "figure",
+          "aria-roledescription": "chart"
+        }
+      )
+    ] });
+  }
+);
+TransactionChart.displayName = "TransactionChart";
+
+// src/insights/components/kpi/kpi-card.tsx
+import { twMerge as twMerge6 } from "tailwind-merge";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var icons = {
+  users: ({ className }) => /* @__PURE__ */ jsx6(
+    "svg",
+    {
+      className,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      children: /* @__PURE__ */ jsx6(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
+        }
+      )
+    }
+  ),
+  revenue: ({ className }) => /* @__PURE__ */ jsx6(
+    "svg",
+    {
+      className,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      children: /* @__PURE__ */ jsx6(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        }
+      )
+    }
+  ),
+  chart: ({ className }) => /* @__PURE__ */ jsx6(
+    "svg",
+    {
+      className,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      children: /* @__PURE__ */ jsx6(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
+        }
+      )
+    }
+  )
+};
+function getTrendColorClass(trend) {
+  switch (trend) {
+    case "up":
+      return "text-emerald-500";
+    case "down":
+      return "text-red-500";
+    case "neutral":
+    default:
+      return "text-gray-500";
+  }
+}
+function formatChange(change) {
+  if (change === void 0) return "";
+  const sign = change > 0 ? "+" : "";
+  return `${sign}${change}%`;
+}
+function getVariantClasses(variant) {
+  switch (variant) {
+    case "outlined":
+      return "border border-gray-200 dark:border-gray-800";
+    case "elevated":
+      return "shadow-lg";
+    case "ghost":
+      return "bg-transparent";
+    default:
+      return "";
+  }
+}
+function KPICard({
+  label,
+  value,
+  previousValue,
+  change,
+  trend,
+  prefix = "",
+  suffix = "",
+  target,
+  format: _format = "number",
+  icon,
+  title: _title,
+  description: _description,
+  size: _size,
+  variant = "default",
+  loading = false,
+  error,
+  className
+}) {
+  const displayValue = typeof value === "number" ? String(value) : value;
+  const formattedValue = `${prefix}${displayValue}${suffix}`;
+  const IconComponent = icon ? icons[icon] : null;
+  if (loading) {
+    return /* @__PURE__ */ jsx6(
+      "div",
+      {
+        "data-testid": "kpi-skeleton",
+        className: twMerge6(
+          "relative w-full rounded-lg border p-6 text-left",
+          "bg-white dark:bg-gray-950",
+          "border-gray-200 dark:border-gray-900",
+          getVariantClasses(variant),
+          className
+        ),
+        "aria-busy": "true",
+        "aria-label": `Loading ${label}`,
+        children: /* @__PURE__ */ jsxs6("div", { className: "animate-pulse", children: [
+          /* @__PURE__ */ jsx6("div", { className: "h-4 w-24 bg-gray-200 dark:bg-gray-800 rounded mb-3" }),
+          /* @__PURE__ */ jsx6("div", { className: "h-8 w-32 bg-gray-200 dark:bg-gray-800 rounded mb-2" }),
+          /* @__PURE__ */ jsx6("div", { className: "h-4 w-16 bg-gray-200 dark:bg-gray-800 rounded" })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      "data-testid": "kpi-card",
+      className: twMerge6(
+        "relative w-full rounded-lg border p-6 text-left shadow-sm",
+        "bg-white dark:bg-gray-950",
+        "border-gray-200 dark:border-gray-900",
+        getVariantClasses(variant),
+        className
+      ),
+      "aria-label": `${label}: ${formattedValue}`,
+      children: [
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+          IconComponent && /* @__PURE__ */ jsx6("div", { "data-testid": "kpi-icon", className: "flex-shrink-0", children: /* @__PURE__ */ jsx6(IconComponent, { className: "h-5 w-5 text-gray-500 dark:text-gray-400" }) }),
+          /* @__PURE__ */ jsx6("h3", { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: label })
+        ] }),
+        /* @__PURE__ */ jsx6("p", { className: "mt-2 text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50", children: formattedValue }),
+        (trend || change !== void 0) && /* @__PURE__ */ jsxs6("div", { className: "mt-2 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs6(
+            "span",
+            {
+              "data-testid": "trend-indicator",
+              className: twMerge6(
+                "inline-flex items-center text-sm font-medium",
+                getTrendColorClass(trend)
+              ),
+              children: [
+                trend === "up" && /* @__PURE__ */ jsx6(
+                  "svg",
+                  {
+                    className: "h-4 w-4 mr-0.5",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    children: /* @__PURE__ */ jsx6(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        d: "M7 11l5-5m0 0l5 5m-5-5v12"
+                      }
+                    )
+                  }
+                ),
+                trend === "down" && /* @__PURE__ */ jsx6(
+                  "svg",
+                  {
+                    className: "h-4 w-4 mr-0.5",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    children: /* @__PURE__ */ jsx6(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        d: "M17 13l-5 5m0 0l-5-5m5 5V6"
+                      }
+                    )
+                  }
+                ),
+                formatChange(change)
+              ]
+            }
+          ),
+          previousValue !== void 0 && /* @__PURE__ */ jsxs6("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+            "from ",
+            previousValue
+          ] })
+        ] }),
+        target !== void 0 && /* @__PURE__ */ jsx6("div", { className: "mt-2", children: /* @__PURE__ */ jsxs6("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+          "target: ",
+          target
+        ] }) }),
+        error && /* @__PURE__ */ jsx6("div", { className: "mt-2", children: /* @__PURE__ */ jsx6("span", { className: "text-sm text-red-500", children: error }) })
+      ]
+    }
+  );
+}
+
+// src/insights/components/tables/transactions-table.tsx
+import {
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import * as React6 from "react";
+import { twMerge as twMerge7 } from "tailwind-merge";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var statusVariants = {
+  completed: "bg-emerald-50 text-emerald-900 ring-emerald-600/30 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/20",
+  pending: "bg-gray-50 text-gray-900 ring-gray-500/30 dark:bg-gray-400/10 dark:text-gray-400 dark:ring-gray-400/20",
+  failed: "bg-rose-50 text-rose-900 ring-rose-600/20 dark:bg-rose-400/10 dark:text-rose-500 dark:ring-rose-400/20",
+  refunded: "bg-orange-50 text-orange-900 ring-orange-600/30 dark:bg-orange-400/10 dark:text-orange-500 dark:ring-orange-400/20"
+};
+function StatusBadge({ status }) {
+  return /* @__PURE__ */ jsx7(
+    "span",
+    {
+      className: twMerge7(
+        "inline-flex items-center gap-x-1 whitespace-nowrap rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset",
+        statusVariants[status]
+      ),
+      children: status
+    }
+  );
+}
+function formatCurrency2(amount, currency = "USD") {
+  const absAmount = Math.abs(amount);
+  const formatted = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(absAmount);
+  return amount < 0 ? `-${formatted}` : formatted;
+}
+function formatDate(dateString) {
+  const date = new Date(dateString);
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function createColumns(currency = "USD") {
+  return [
+    {
+      accessorKey: "date",
+      header: "Date",
+      cell: ({ getValue }) => {
+        const date = getValue();
+        return /* @__PURE__ */ jsx7("span", { className: "tabular-nums text-gray-900 dark:text-gray-50", children: formatDate(date) });
+      }
+    },
+    {
+      accessorKey: "description",
+      header: "Description",
+      cell: ({ getValue }) => /* @__PURE__ */ jsx7("span", { className: "text-gray-700 dark:text-gray-300", children: getValue() })
+    },
+    {
+      accessorKey: "amount",
+      header: "Amount",
+      cell: ({ getValue, row }) => {
+        const amount = getValue();
+        const isNegative = row.original.type === "debit" || amount < 0;
+        const displayAmount = isNegative && amount > 0 ? -amount : amount;
+        return /* @__PURE__ */ jsx7(
+          "span",
+          {
+            className: twMerge7(
+              "tabular-nums font-medium",
+              isNegative ? "text-rose-600 dark:text-rose-400" : "text-gray-900 dark:text-gray-50"
+            ),
+            children: formatCurrency2(displayAmount, currency)
+          }
+        );
+      },
+      meta: {
+        className: "text-right"
+      }
+    },
+    {
+      accessorKey: "status",
+      header: "Status",
+      cell: ({ getValue }) => /* @__PURE__ */ jsx7(StatusBadge, { status: getValue() })
+    }
+  ];
+}
+function LoadingSkeleton() {
+  return /* @__PURE__ */ jsx7("div", { "data-testid": "transactions-table-loading", className: "space-y-3", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs7("div", { className: "animate-pulse flex space-x-4", children: [
+    /* @__PURE__ */ jsx7("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-24" }),
+    /* @__PURE__ */ jsx7("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded flex-1" }),
+    /* @__PURE__ */ jsx7("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-20" }),
+    /* @__PURE__ */ jsx7("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-16" })
+  ] }, i)) });
+}
+function TransactionsTable(props) {
+  const {
+    transactions,
+    title,
+    currency = "USD",
+    pageSize = 10,
+    emptyMessage = "No transactions",
+    loading = false,
+    className
+  } = props;
+  const columns = React6.useMemo(() => createColumns(currency), [currency]);
+  const table = useReactTable({
+    data: transactions,
+    columns,
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize
+      }
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel()
+  });
+  const totalRows = transactions.length;
+  const currentPage = table.getState().pagination.pageIndex;
+  const firstRowIndex = currentPage * pageSize + 1;
+  const lastRowIndex = Math.min(totalRows, firstRowIndex + pageSize - 1);
+  if (loading) {
+    return /* @__PURE__ */ jsxs7("div", { className: twMerge7("space-y-4", className), children: [
+      title && /* @__PURE__ */ jsx7("h3", { className: "text-lg font-semibold text-gray-900 dark:text-gray-50", children: title }),
+      /* @__PURE__ */ jsx7(LoadingSkeleton, {})
+    ] });
+  }
+  return /* @__PURE__ */ jsxs7("div", { className: twMerge7("space-y-4", className), children: [
+    title && /* @__PURE__ */ jsx7("h3", { className: "text-lg font-semibold text-gray-900 dark:text-gray-50", children: title }),
+    /* @__PURE__ */ jsx7("div", { className: "relative overflow-hidden overflow-x-auto", children: /* @__PURE__ */ jsxs7("table", { className: "w-full caption-bottom border-b border-gray-200 dark:border-gray-800", children: [
+      /* @__PURE__ */ jsx7("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx7(
+        "tr",
+        {
+          className: "border-y border-gray-200 dark:border-gray-800",
+          children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx7(
+            "th",
+            {
+              className: twMerge7(
+                "border-b px-4 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-50 border-gray-200 dark:border-gray-800",
+                header.column.columnDef.meta?.className
+              ),
+              children: flexRender(
+                header.column.columnDef.header,
+                header.getContext()
+              )
+            },
+            header.id
+          ))
+        },
+        headerGroup.id
+      )) }),
+      /* @__PURE__ */ jsx7("tbody", { className: "divide-y divide-gray-200 dark:divide-gray-800", children: table.getRowModel().rows.length > 0 ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx7(
+        "tr",
+        {
+          className: "hover:bg-gray-50 hover:dark:bg-gray-900",
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx7(
+            "td",
+            {
+              className: twMerge7(
+                "p-4 text-sm text-gray-600 dark:text-gray-400",
+                cell.column.columnDef.meta?.className
+              ),
+              children: flexRender(
+                cell.column.columnDef.cell,
+                cell.getContext()
+              )
+            },
+            cell.id
+          ))
+        },
+        row.id
+      )) : /* @__PURE__ */ jsx7("tr", { children: /* @__PURE__ */ jsx7(
+        "td",
+        {
+          colSpan: columns.length,
+          className: "h-24 text-center text-sm text-gray-500 dark:text-gray-400",
+          children: emptyMessage
+        }
+      ) }) })
+    ] }) }),
+    totalRows > pageSize && /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "text-sm tabular-nums text-gray-500", children: [
+        "Showing ",
+        firstRowIndex,
+        "-",
+        lastRowIndex,
+        " of ",
+        totalRows
+      ] }),
+      /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-x-1.5", children: [
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            onClick: () => table.setPageIndex(0),
+            disabled: !table.getCanPreviousPage(),
+            className: "p-1.5 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 disabled:opacity-50 disabled:cursor-not-allowed",
+            "aria-label": "First page",
+            children: /* @__PURE__ */ jsx7(
+              "svg",
+              {
+                className: "size-4",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                strokeWidth: 1.5,
+                stroke: "currentColor",
+                children: /* @__PURE__ */ jsx7(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    d: "M18.75 19.5l-7.5-7.5 7.5-7.5M11.25 19.5l-7.5-7.5 7.5-7.5"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            onClick: () => table.previousPage(),
+            disabled: !table.getCanPreviousPage(),
+            className: "p-1.5 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 disabled:opacity-50 disabled:cursor-not-allowed",
+            "aria-label": "Previous page",
+            children: /* @__PURE__ */ jsx7(
+              "svg",
+              {
+                className: "size-4",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                strokeWidth: 1.5,
+                stroke: "currentColor",
+                children: /* @__PURE__ */ jsx7(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    d: "M15.75 19.5L8.25 12l7.5-7.5"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            onClick: () => table.nextPage(),
+            disabled: !table.getCanNextPage(),
+            className: "p-1.5 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 disabled:opacity-50 disabled:cursor-not-allowed",
+            "aria-label": "Next page",
+            children: /* @__PURE__ */ jsx7(
+              "svg",
+              {
+                className: "size-4",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                strokeWidth: 1.5,
+                stroke: "currentColor",
+                children: /* @__PURE__ */ jsx7(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    d: "M8.25 4.5l7.5 7.5-7.5 7.5"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            onClick: () => table.setPageIndex(table.getPageCount() - 1),
+            disabled: !table.getCanNextPage(),
+            className: "p-1.5 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 disabled:opacity-50 disabled:cursor-not-allowed",
+            "aria-label": "Last page",
+            children: /* @__PURE__ */ jsx7(
+              "svg",
+              {
+                className: "size-4",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                strokeWidth: 1.5,
+                stroke: "currentColor",
+                children: /* @__PURE__ */ jsx7(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    d: "M5.25 4.5l7.5 7.5-7.5 7.5M12.75 4.5l7.5 7.5-7.5 7.5"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/insights/layouts/insights-app.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function InsightsApp({ name, children }) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-app-name": name,
+      className: "min-h-screen bg-white dark:bg-gray-950",
+      children
+    }
+  );
+}
+
+// src/insights/layouts/insights-dashboard.tsx
+import { twMerge as twMerge8 } from "tailwind-merge";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function InsightsDashboard({
+  title = "Dashboard",
+  description,
+  metrics,
+  actions,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs8("main", { className: twMerge8("", className), children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsxs8("div", { children: [
+        /* @__PURE__ */ jsx9("h1", { className: "text-2xl font-semibold text-gray-900 dark:text-gray-50", children: title }),
+        description && /* @__PURE__ */ jsx9("p", { className: "text-gray-500 sm:text-sm/6 dark:text-gray-500", children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-2", children: actions })
+    ] }),
+    metrics && metrics.length > 0 && /* @__PURE__ */ jsx9("div", { className: "mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: metrics.map((metric) => /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        className: "rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900",
+        children: [
+          /* @__PURE__ */ jsx9("p", { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: metric.label }),
+          /* @__PURE__ */ jsx9("p", { className: "mt-1 text-2xl font-semibold text-gray-900 dark:text-gray-50", children: metric.value }),
+          metric.change !== void 0 && /* @__PURE__ */ jsxs8(
+            "p",
+            {
+              className: twMerge8(
+                "mt-1 text-sm font-medium",
+                metric.trend === "up" ? "text-green-600 dark:text-green-400" : metric.trend === "down" ? "text-red-600 dark:text-red-400" : "text-gray-500 dark:text-gray-400"
+              ),
+              children: [
+                metric.trend === "up" && "+",
+                metric.change,
+                "%"
+              ]
+            }
+          )
+        ]
+      },
+      metric.label
+    )) }),
+    /* @__PURE__ */ jsx9("div", { className: "my-6 border-t border-gray-200 dark:border-gray-800" }),
+    children
+  ] });
+}
+
+// src/insights/layouts/insights-header.tsx
+import { twMerge as twMerge9 } from "tailwind-merge";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function InsightsHeader({
+  user,
+  showSearch = true,
+  showNotifications = true,
+  breadcrumbs,
+  logo,
+  notifications,
+  userProfile,
+  className
+}) {
+  return /* @__PURE__ */ jsxs9(
+    "header",
+    {
+      className: twMerge9(
+        "flex h-16 items-center justify-between border-b border-gray-200 bg-white px-4 dark:border-gray-800 dark:bg-gray-950 sm:px-6",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-4", children: [
+          logo ?? /* @__PURE__ */ jsx10("div", { className: "h-6 w-20 rounded bg-gray-200 dark:bg-gray-800" }),
+          breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx10("nav", { "aria-label": "Breadcrumb", className: "hidden sm:block", children: /* @__PURE__ */ jsx10("ol", { className: "flex items-center gap-2", children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs9("li", { className: "flex items-center gap-2", children: [
+            index > 0 && /* @__PURE__ */ jsx10("span", { className: "text-gray-400 dark:text-gray-600", children: "/" }),
+            crumb.href ? /* @__PURE__ */ jsx10(
+              "a",
+              {
+                href: crumb.href,
+                className: "text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300",
+                children: crumb.label
+              }
+            ) : /* @__PURE__ */ jsx10("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: crumb.label })
+          ] }, crumb.label)) }) })
+        ] }),
+        /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3", children: [
+          showSearch && /* @__PURE__ */ jsx10(
+            "button",
+            {
+              type: "button",
+              className: "rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300",
+              "aria-label": "Search",
+              children: /* @__PURE__ */ jsx10(
+                "svg",
+                {
+                  className: "h-5 w-5",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx10(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          showNotifications && (notifications ?? /* @__PURE__ */ jsx10(
+            "button",
+            {
+              type: "button",
+              className: "rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300",
+              "aria-label": "Notifications",
+              children: /* @__PURE__ */ jsx10(
+                "svg",
+                {
+                  className: "h-5 w-5",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx10(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+                    }
+                  )
+                }
+              )
+            }
+          )),
+          userProfile ?? (user && /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-2", children: user.avatar ? /* @__PURE__ */ jsx10(
+            "img",
+            {
+              src: user.avatar,
+              alt: user.name,
+              className: "h-8 w-8 rounded-full"
+            }
+          ) : /* @__PURE__ */ jsx10("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-gray-200 text-sm font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300", children: user.name.charAt(0) }) }))
+        ] })
+      ]
+    }
+  );
+}
+
+// src/insights/layouts/insights-settings.tsx
+import { twMerge as twMerge10 } from "tailwind-merge";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var sectionLabels = {
+  profile: "Profile",
+  security: "Security",
+  notifications: "Notifications",
+  billing: "Billing",
+  team: "Team",
+  api: "API",
+  integrations: "Integrations"
+};
+function InsightsSettings({
+  sections = ["profile", "security", "notifications"],
+  activeSection = "profile",
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs10("div", { className: twMerge10("flex gap-8", className), children: [
+    /* @__PURE__ */ jsx11("nav", { className: "w-48 flex-shrink-0", children: /* @__PURE__ */ jsx11("ul", { className: "space-y-1", children: sections.map((section) => /* @__PURE__ */ jsx11("li", { children: /* @__PURE__ */ jsx11(
+      "a",
+      {
+        href: `/settings/${section}`,
+        className: twMerge10(
+          "block rounded-lg px-3 py-2 text-sm font-medium transition-colors",
+          section === activeSection ? "bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100" : "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:text-gray-300"
+        ),
+        children: sectionLabels[section]
+      }
+    ) }, section)) }) }),
+    /* @__PURE__ */ jsx11("div", { className: "flex-1", children: children ?? /* @__PURE__ */ jsxs10("div", { className: "rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900", children: [
+      /* @__PURE__ */ jsx11("h2", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: sectionLabels[activeSection] }),
+      /* @__PURE__ */ jsxs10("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: [
+        "Configure your ",
+        sectionLabels[activeSection].toLowerCase(),
+        " ",
+        "settings."
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/insights/layouts/insights-shell.tsx
+import { twMerge as twMerge11 } from "tailwind-merge";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+function InsightsShell({
+  children,
+  sidebar,
+  header,
+  collapsed = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      "data-insights-shell": true,
+      "data-collapsed": collapsed ? "true" : "false",
+      className: twMerge11("mx-auto max-w-screen-2xl", className),
+      children: [
+        sidebar,
+        /* @__PURE__ */ jsxs11(
+          "main",
+          {
+            className: twMerge11(
+              "ease transform-gpu transition-all duration-100 will-change-transform",
+              "lg:bg-gray-50 lg:py-3 lg:pr-3 lg:dark:bg-gray-950",
+              collapsed ? "lg:pl-[60px]" : "lg:pl-64"
+            ),
+            children: [
+              header,
+              /* @__PURE__ */ jsx12("div", { className: "bg-white p-4 sm:p-6 lg:rounded-lg lg:border lg:border-gray-200 dark:bg-gray-925 lg:dark:border-gray-900", children })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/insights/layouts/insights-sidebar.tsx
+import { twMerge as twMerge12 } from "tailwind-merge";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function InsightsSidebar({
+  items,
+  footerItems,
+  logo,
+  collapsed = false,
+  onCollapse,
+  header,
+  footer,
+  className
+}) {
+  return /* @__PURE__ */ jsx13(
+    "nav",
+    {
+      "data-collapsed": collapsed ? "true" : "false",
+      className: twMerge12(
+        "hidden overflow-x-hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:flex-col",
+        "ease transform-gpu transition-all duration-100 will-change-transform",
+        collapsed ? "lg:w-[60px]" : "lg:w-64",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs12("aside", { className: "flex grow flex-col gap-y-4 overflow-y-auto whitespace-nowrap px-3 py-4", children: [
+        header ? header : logo ? /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-x-1.5", children: [
+          onCollapse && /* @__PURE__ */ jsx13(
+            "button",
+            {
+              type: "button",
+              className: "group inline-flex rounded-md p-2 hover:bg-gray-200/50 hover:dark:bg-gray-900",
+              onClick: onCollapse,
+              "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+              children: /* @__PURE__ */ jsx13("span", { className: "size-5 shrink-0 text-gray-500 group-hover:text-gray-700 dark:text-gray-500 group-hover:dark:text-gray-300", children: collapsed ? ">" : "<" })
+            }
+          ),
+          /* @__PURE__ */ jsx13(
+            "a",
+            {
+              href: logo.href ?? "/",
+              className: twMerge12(
+                "text-sm font-semibold text-gray-900 transition-opacity dark:text-gray-50",
+                collapsed ? "opacity-0" : "opacity-100"
+              ),
+              "aria-label": "Home",
+              children: /* @__PURE__ */ jsx13("img", { src: collapsed && logo.collapsedSrc ? logo.collapsedSrc : logo.src, alt: logo.alt, className: "h-8" })
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsxs12("div", { className: "flex flex-1 flex-col space-y-10", children: [
+          /* @__PURE__ */ jsx13("ul", { className: "mt-1 space-y-2", children: items.map((item) => /* @__PURE__ */ jsx13("li", { children: item.href ? /* @__PURE__ */ jsxs12(
+            "a",
+            {
+              href: item.href,
+              "aria-current": item.active ? "page" : void 0,
+              "aria-disabled": item.disabled,
+              className: twMerge12(
+                "flex items-center gap-x-2.5 rounded-md p-2 text-sm font-medium transition-opacity",
+                "hover:bg-gray-200/50 hover:dark:bg-gray-900",
+                "focus:outline-none focus:ring-2 focus:ring-blue-500",
+                item.active ? "text-blue-600 dark:text-blue-500" : "text-gray-700 dark:text-gray-300",
+                item.disabled && "pointer-events-none opacity-50"
+              ),
+              onClick: item.disabled ? void 0 : item.onClick,
+              children: [
+                item.icon && /* @__PURE__ */ jsx13("span", { className: "size-5 shrink-0", "aria-hidden": "true", children: item.icon }),
+                !collapsed && item.label
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs12(
+            "button",
+            {
+              type: "button",
+              onClick: item.onClick,
+              disabled: item.disabled,
+              className: twMerge12(
+                "flex w-full items-center gap-x-2.5 rounded-md p-2 text-sm font-medium transition-opacity",
+                "hover:bg-gray-200/50 hover:dark:bg-gray-900",
+                "focus:outline-none focus:ring-2 focus:ring-blue-500",
+                item.active ? "text-blue-600 dark:text-blue-500" : "text-gray-700 dark:text-gray-300",
+                item.disabled && "pointer-events-none opacity-50"
+              ),
+              children: [
+                item.icon && /* @__PURE__ */ jsx13("span", { className: "size-5 shrink-0", "aria-hidden": "true", children: item.icon }),
+                !collapsed && item.label
+              ]
+            }
+          ) }, item.id)) }),
+          footerItems && footerItems.length > 0 && /* @__PURE__ */ jsx13("ul", { className: "mt-auto space-y-2", children: footerItems.map((item) => /* @__PURE__ */ jsx13("li", { children: item.href ? /* @__PURE__ */ jsxs12(
+            "a",
+            {
+              href: item.href,
+              "aria-current": item.active ? "page" : void 0,
+              "aria-disabled": item.disabled,
+              className: twMerge12(
+                "flex items-center gap-x-2.5 rounded-md p-2 text-sm font-medium transition-opacity",
+                "hover:bg-gray-200/50 hover:dark:bg-gray-900",
+                "focus:outline-none focus:ring-2 focus:ring-blue-500",
+                item.active ? "text-blue-600 dark:text-blue-500" : "text-gray-700 dark:text-gray-300",
+                item.disabled && "pointer-events-none opacity-50"
+              ),
+              onClick: item.disabled ? void 0 : item.onClick,
+              children: [
+                item.icon && /* @__PURE__ */ jsx13("span", { className: "size-5 shrink-0", "aria-hidden": "true", children: item.icon }),
+                !collapsed && item.label
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs12(
+            "button",
+            {
+              type: "button",
+              onClick: item.onClick,
+              disabled: item.disabled,
+              className: twMerge12(
+                "flex w-full items-center gap-x-2.5 rounded-md p-2 text-sm font-medium transition-opacity",
+                "hover:bg-gray-200/50 hover:dark:bg-gray-900",
+                "focus:outline-none focus:ring-2 focus:ring-blue-500",
+                item.active ? "text-blue-600 dark:text-blue-500" : "text-gray-700 dark:text-gray-300",
+                item.disabled && "pointer-events-none opacity-50"
+              ),
+              children: [
+                item.icon && /* @__PURE__ */ jsx13("span", { className: "size-5 shrink-0", "aria-hidden": "true", children: item.icon }),
+                !collapsed && item.label
+              ]
+            }
+          ) }, item.id)) })
+        ] }),
+        footer && /* @__PURE__ */ jsx13("div", { className: "mt-auto border-t border-gray-200 pt-3 dark:border-gray-800", children: footer })
+      ] })
+    }
+  );
+}
+
+// src/insights/index.ts
+var components = {
+  // Layout
+  Shell: InsightsShell,
+  Sidebar: InsightsSidebar,
+  // KPI/Metrics
+  KPICard,
+  // Charts
+  AreaChart,
+  BarChart,
+  DonutChart,
+  BarChartVariant,
+  TransactionChart,
+  // Tables
+  TransactionsTable
+};
+var AppComponents = {
+  /** Root application wrapper */
+  App: InsightsApp,
+  /** Flexible shell layout for analytics */
+  Shell: InsightsShell,
+  /** Navigation sidebar */
+  Sidebar: InsightsSidebar,
+  /** Header bar component */
+  Header: InsightsHeader,
+  /** Dashboard page layout */
+  Dashboard: InsightsDashboard,
+  /** Settings page layout */
+  Settings: InsightsSettings
+};
+export {
+  AppComponents,
+  AreaChart,
+  BarChart,
+  BarChartVariant,
+  DonutChart,
+  InsightsApp,
+  InsightsDashboard,
+  InsightsHeader,
+  InsightsSettings,
+  InsightsShell,
+  InsightsSidebar,
+  KPICard,
+  InsightsShell as Shell,
+  InsightsSidebar as Sidebar,
+  TransactionChart,
+  TransactionsTable,
+  components
+};
+//# sourceMappingURL=index.js.map