lmbchp 0.1.0

package/dist/index.js

@@ -0,0 +1,2106 @@
+"use client";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/lib/use-chart-colors.ts
+import * as React from "react";
+var DARK_FALLBACK = {
+  grid: "#262626",
+  tick: "#787878",
+  tooltipBg: "#141414",
+  tooltipBorder: "#262626",
+  tooltipText: "#e6ddd0",
+  cursor: "#3a3a3a",
+  activeDot: "#e6ddd0",
+  barCursor: "rgba(255, 255, 255, 0.04)",
+  accent: "#fcd34d",
+  series: [
+    "#fcd34d",
+    "#d4574b",
+    "#5b9a8b",
+    "#9b7bd4",
+    "#e5903b",
+    "#4db8a4",
+    "#d47b9b",
+    "#7bc4d4",
+    "#e6ddd0"
+  ]
+};
+function readVar(el, name) {
+  return getComputedStyle(el).getPropertyValue(name).trim();
+}
+function useChartColors() {
+  const ref = React.useRef(DARK_FALLBACK);
+  const [, rerender] = React.useState(0);
+  const observerRef = React.useRef(null);
+  React.useEffect(() => {
+    function read() {
+      const el = document.documentElement;
+      const grid = readVar(el, "--chart-grid");
+      if (!grid) return;
+      ref.current = {
+        grid,
+        tick: readVar(el, "--chart-tick"),
+        tooltipBg: readVar(el, "--chart-tooltip-bg"),
+        tooltipBorder: readVar(el, "--chart-tooltip-border"),
+        tooltipText: readVar(el, "--chart-tooltip-text"),
+        cursor: readVar(el, "--chart-cursor"),
+        activeDot: readVar(el, "--chart-active-dot"),
+        barCursor: readVar(el, "--chart-bar-cursor"),
+        accent: readVar(el, "--accent"),
+        series: Array.from(
+          { length: 9 },
+          (_, i) => readVar(el, `--chart-${i + 1}`)
+        )
+      };
+      rerender((n) => n + 1);
+    }
+    read();
+    observerRef.current = new MutationObserver(read);
+    observerRef.current.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+    return () => observerRef.current?.disconnect();
+  }, []);
+  return ref.current;
+}
+
+// src/components/sparkline.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Sparkline({
+  data,
+  width = 80,
+  height = 24,
+  color,
+  fillOpacity = 0.1,
+  className
+}) {
+  const chartColors = useChartColors();
+  const resolvedColor = color ?? chartColors.accent;
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width,
+        height,
+        className: cn("inline-block", className)
+      }
+    );
+  }
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const padding = 1;
+  const viewWidth = width;
+  const viewHeight = height;
+  const plotWidth = viewWidth - padding * 2;
+  const plotHeight = viewHeight - padding * 2;
+  const points = data.map((value, index) => {
+    const x = padding + index / Math.max(data.length - 1, 1) * plotWidth;
+    const y = padding + plotHeight - (value - min) / range * plotHeight;
+    return { x, y };
+  });
+  const linePoints = points.map((p) => `${p.x},${p.y}`).join(" ");
+  const fillPoints = [
+    `${points[0].x},${padding + plotHeight}`,
+    ...points.map((p) => `${p.x},${p.y}`),
+    `${points[points.length - 1].x},${padding + plotHeight}`
+  ].join(" ");
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${viewWidth} ${viewHeight}`,
+      className: cn("inline-block", className),
+      role: "img",
+      "aria-label": "Sparkline chart",
+      children: [
+        /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: fillPoints,
+            fill: resolvedColor,
+            opacity: fillOpacity
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "polyline",
+          {
+            points: linePoints,
+            fill: "none",
+            stroke: resolvedColor,
+            strokeWidth: 1.5,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/kpi-card.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function KpiCard({
+  label,
+  value,
+  trend,
+  sparklineData,
+  icon,
+  className
+}) {
+  const colors = useChartColors();
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cn(
+        "rounded-card border border-surface-border bg-surface p-card-p shadow-card",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+          icon && /* @__PURE__ */ jsx2("span", { className: "flex-shrink-0 text-text-tertiary", children: icon }),
+          /* @__PURE__ */ jsx2("span", { className: "text-sm text-text-secondary", children: label })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "mt-2 flex items-end justify-between gap-4", children: [
+          /* @__PURE__ */ jsx2("div", { className: "text-3xl font-semibold text-text", children: value }),
+          sparklineData && sparklineData.length > 0 && /* @__PURE__ */ jsx2(
+            Sparkline,
+            {
+              data: sparklineData,
+              width: 80,
+              height: 28,
+              color: trend ? trend.isPositive ? colors.series[2] : colors.series[1] : void 0
+            }
+          )
+        ] }),
+        trend && /* @__PURE__ */ jsx2("div", { className: "mt-1 flex items-center gap-1", children: /* @__PURE__ */ jsxs2(
+          "span",
+          {
+            className: cn(
+              "text-sm font-medium",
+              trend.isPositive ? "text-revenue" : "text-loss"
+            ),
+            "aria-label": `${trend.isPositive ? "Up" : "Down"} ${Math.abs(trend.value).toFixed(1)}%`,
+            children: [
+              trend.isPositive ? "\u2191" : "\u2193",
+              " ",
+              Math.abs(trend.value).toFixed(1),
+              "%"
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/data-table.tsx
+import * as React2 from "react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  getPaginationRowModel,
+  getFilteredRowModel,
+  flexRender
+} from "@tanstack/react-table";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function DataTable({
+  columns,
+  data,
+  pageSize = 20,
+  searchable = false,
+  searchPlaceholder = "Search...",
+  className
+}) {
+  const [sorting, setSorting] = React2.useState([]);
+  const [globalFilter, setGlobalFilter] = React2.useState("");
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      globalFilter
+    },
+    onSortingChange: setSorting,
+    onGlobalFilterChange: setGlobalFilter,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    initialState: {
+      pagination: {
+        pageSize
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxs3("div", { className: cn("flex flex-col gap-3", className), children: [
+    searchable && /* @__PURE__ */ jsx3("div", { className: "flex items-center", children: /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type: "text",
+        value: globalFilter,
+        onChange: (e) => setGlobalFilter(e.target.value),
+        placeholder: searchPlaceholder,
+        className: cn(
+          "w-full max-w-sm rounded-button border border-surface-border bg-surface px-3 py-1.5",
+          "text-sm text-text placeholder:text-text-muted",
+          "outline-none focus:border-accent focus:ring-1 focus:ring-accent"
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx3("div", { className: "overflow-auto rounded-card border border-surface-border", children: /* @__PURE__ */ jsxs3("table", { className: "w-full border-collapse text-sm", children: [
+      /* @__PURE__ */ jsx3("thead", { className: "sticky top-0 z-10 bg-surface-secondary", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx3("tr", { children: headerGroup.headers.map((header) => {
+        const canSort = header.column.getCanSort();
+        const sorted = header.column.getIsSorted();
+        return /* @__PURE__ */ jsx3(
+          "th",
+          {
+            className: cn(
+              "border-b border-surface-border px-3 py-2 text-left font-medium text-text-secondary",
+              canSort && "cursor-pointer select-none"
+            ),
+            onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
+            "aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : canSort ? "none" : void 0,
+            children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
+              header.isPlaceholder ? null : flexRender(
+                header.column.columnDef.header,
+                header.getContext()
+              ),
+              canSort && /* @__PURE__ */ jsxs3("span", { className: "inline-flex flex-col text-2xs leading-none text-text-muted", children: [
+                /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    className: cn(
+                      sorted === "asc" && "text-accent"
+                    ),
+                    children: "\u2191"
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    className: cn(
+                      sorted === "desc" && "text-accent"
+                    ),
+                    children: "\u2193"
+                  }
+                )
+              ] })
+            ] })
+          },
+          header.id
+        );
+      }) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx3("tbody", { children: table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx3("tr", { children: /* @__PURE__ */ jsx3(
+        "td",
+        {
+          colSpan: columns.length,
+          className: "px-3 py-8 text-center text-text-tertiary",
+          children: "No results."
+        }
+      ) }) : table.getRowModel().rows.map((row, index) => /* @__PURE__ */ jsx3(
+        "tr",
+        {
+          className: cn(
+            "border-b border-surface-border transition-colors hover:bg-surface-hover",
+            index % 2 === 1 && "bg-surface-secondary"
+          ),
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx3("td", { className: "px-3 py-2 text-text", children: flexRender(
+            cell.column.columnDef.cell,
+            cell.getContext()
+          ) }, cell.id))
+        },
+        row.id
+      )) })
+    ] }) }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-1 text-sm text-text-secondary", children: [
+      /* @__PURE__ */ jsxs3("span", { children: [
+        "Page ",
+        table.getState().pagination.pageIndex + 1,
+        " of",
+        " ",
+        table.getPageCount() || 1
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            onClick: () => table.previousPage(),
+            disabled: !table.getCanPreviousPage(),
+            "aria-label": "Go to previous page",
+            className: cn(
+              "rounded-button border border-surface-border bg-surface px-3 py-1 text-sm",
+              "hover:bg-surface-hover",
+              "disabled:cursor-not-allowed disabled:text-text-muted disabled:border-surface-border/50"
+            ),
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            onClick: () => table.nextPage(),
+            disabled: !table.getCanNextPage(),
+            "aria-label": "Go to next page",
+            className: cn(
+              "rounded-button border border-surface-border bg-surface px-3 py-1 text-sm",
+              "hover:bg-surface-hover",
+              "disabled:cursor-not-allowed disabled:text-text-muted disabled:border-surface-border/50"
+            ),
+            children: "Next"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/metric-trend.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var sizeStyles = {
+  sm: {
+    value: "text-base font-semibold",
+    delta: "text-xs",
+    label: "text-xs"
+  },
+  md: {
+    value: "text-xl font-semibold",
+    delta: "text-sm",
+    label: "text-sm"
+  },
+  lg: {
+    value: "text-3xl font-semibold",
+    delta: "text-base",
+    label: "text-base"
+  }
+};
+function MetricTrend({
+  value,
+  delta,
+  deltaLabel,
+  size = "md",
+  className
+}) {
+  const styles = sizeStyles[size];
+  const isPositive = delta >= 0;
+  return /* @__PURE__ */ jsxs4("div", { className: cn("flex items-baseline gap-2", className), children: [
+    /* @__PURE__ */ jsx4("span", { className: cn(styles.value, "text-text"), children: value }),
+    /* @__PURE__ */ jsxs4(
+      "span",
+      {
+        className: cn(
+          styles.delta,
+          "font-medium",
+          isPositive ? "text-revenue" : "text-loss"
+        ),
+        children: [
+          isPositive ? "\u2191" : "\u2193",
+          " ",
+          Math.abs(delta).toFixed(1),
+          "%"
+        ]
+      }
+    ),
+    deltaLabel && /* @__PURE__ */ jsx4("span", { className: cn(styles.label, "text-text-muted"), children: deltaLabel })
+  ] });
+}
+
+// src/components/bar-chart.tsx
+import {
+  ResponsiveContainer,
+  BarChart as RechartsBarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend
+} from "recharts";
+import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function BarChart({
+  data,
+  xKey,
+  bars,
+  height = 300,
+  layout = "vertical",
+  className
+}) {
+  const colors = useChartColors();
+  return /* @__PURE__ */ jsx5("div", { className: cn("w-full", className), role: "img", "aria-label": "Bar chart", children: /* @__PURE__ */ jsx5(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs5(
+    RechartsBarChart,
+    {
+      data,
+      layout: layout === "horizontal" ? "vertical" : "horizontal",
+      margin: { top: 8, right: 16, left: 0, bottom: 0 },
+      children: [
+        /* @__PURE__ */ jsx5(
+          CartesianGrid,
+          {
+            strokeDasharray: "3 3",
+            stroke: colors.grid,
+            vertical: false
+          }
+        ),
+        layout === "vertical" ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+          /* @__PURE__ */ jsx5(
+            XAxis,
+            {
+              dataKey: xKey,
+              tick: { fontSize: 12, fill: colors.tick },
+              axisLine: { stroke: colors.grid },
+              tickLine: false
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            YAxis,
+            {
+              tick: { fontSize: 12, fill: colors.tick },
+              axisLine: false,
+              tickLine: false
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs5(Fragment, { children: [
+          /* @__PURE__ */ jsx5(
+            XAxis,
+            {
+              type: "number",
+              tick: { fontSize: 12, fill: colors.tick },
+              axisLine: false,
+              tickLine: false
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            YAxis,
+            {
+              dataKey: xKey,
+              type: "category",
+              tick: { fontSize: 12, fill: colors.tick },
+              axisLine: { stroke: colors.grid },
+              tickLine: false,
+              width: 100
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx5(
+          Tooltip,
+          {
+            contentStyle: {
+              backgroundColor: colors.tooltipBg,
+              border: `1px solid ${colors.tooltipBorder}`,
+              borderRadius: "2px",
+              boxShadow: "none",
+              fontSize: 12,
+              color: colors.tooltipText
+            },
+            cursor: { fill: colors.barCursor }
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          Legend,
+          {
+            wrapperStyle: { fontSize: 12, paddingTop: 8 },
+            iconType: "circle",
+            iconSize: 8
+          }
+        ),
+        bars.map((bar, index) => /* @__PURE__ */ jsx5(
+          Bar,
+          {
+            dataKey: bar.key,
+            name: bar.label,
+            fill: bar.color ?? colors.series[index % colors.series.length],
+            radius: [2, 2, 0, 0],
+            maxBarSize: 48
+          },
+          bar.key
+        ))
+      ]
+    }
+  ) }) });
+}
+
+// src/components/line-chart.tsx
+import {
+  ResponsiveContainer as ResponsiveContainer2,
+  LineChart as RechartsLineChart,
+  Line,
+  XAxis as XAxis2,
+  YAxis as YAxis2,
+  CartesianGrid as CartesianGrid2,
+  Tooltip as Tooltip2,
+  Legend as Legend2
+} from "recharts";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function LineChart({
+  data,
+  xKey,
+  lines,
+  height = 300,
+  className
+}) {
+  const colors = useChartColors();
+  return /* @__PURE__ */ jsx6("div", { className: cn("w-full", className), role: "img", "aria-label": "Line chart", children: /* @__PURE__ */ jsx6(ResponsiveContainer2, { width: "100%", height, children: /* @__PURE__ */ jsxs6(
+    RechartsLineChart,
+    {
+      data,
+      margin: { top: 8, right: 16, left: 0, bottom: 0 },
+      children: [
+        /* @__PURE__ */ jsx6(
+          CartesianGrid2,
+          {
+            strokeDasharray: "3 3",
+            stroke: colors.grid,
+            vertical: false
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          XAxis2,
+          {
+            dataKey: xKey,
+            tick: { fontSize: 12, fill: colors.tick },
+            axisLine: { stroke: colors.grid },
+            tickLine: false
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          YAxis2,
+          {
+            tick: { fontSize: 12, fill: colors.tick },
+            axisLine: false,
+            tickLine: false
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          Tooltip2,
+          {
+            contentStyle: {
+              backgroundColor: colors.tooltipBg,
+              border: `1px solid ${colors.tooltipBorder}`,
+              borderRadius: "2px",
+              boxShadow: "none",
+              fontSize: 12,
+              color: colors.tooltipText
+            },
+            cursor: { stroke: colors.cursor, strokeDasharray: "3 3" }
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          Legend2,
+          {
+            wrapperStyle: { fontSize: 12, paddingTop: 8 },
+            iconType: "circle",
+            iconSize: 8
+          }
+        ),
+        lines.map((line, index) => {
+          const color = line.color ?? colors.series[index % colors.series.length];
+          return /* @__PURE__ */ jsx6(
+            Line,
+            {
+              dataKey: line.key,
+              name: line.label,
+              type: "monotone",
+              stroke: color,
+              strokeWidth: 2,
+              dot: false,
+              activeDot: {
+                r: 4,
+                fill: color,
+                stroke: colors.activeDot,
+                strokeWidth: 2
+              }
+            },
+            line.key
+          );
+        })
+      ]
+    }
+  ) }) });
+}
+
+// src/components/area-chart.tsx
+import * as React3 from "react";
+import {
+  ResponsiveContainer as ResponsiveContainer3,
+  AreaChart as RechartsAreaChart,
+  Area,
+  XAxis as XAxis3,
+  YAxis as YAxis3,
+  CartesianGrid as CartesianGrid3,
+  Tooltip as Tooltip3,
+  Legend as Legend3
+} from "recharts";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function AreaChart({
+  data,
+  xKey,
+  areas,
+  height = 300,
+  stacked = true,
+  className
+}) {
+  const gradientId = React3.useId();
+  const colors = useChartColors();
+  return /* @__PURE__ */ jsx7("div", { className: cn("w-full", className), role: "img", "aria-label": "Area chart", children: /* @__PURE__ */ jsx7(ResponsiveContainer3, { width: "100%", height, children: /* @__PURE__ */ jsxs7(
+    RechartsAreaChart,
+    {
+      data,
+      margin: { top: 8, right: 16, left: 0, bottom: 0 },
+      children: [
+        /* @__PURE__ */ jsx7("defs", { children: areas.map((area, index) => {
+          const color = area.color ?? colors.series[index % colors.series.length];
+          return /* @__PURE__ */ jsxs7(
+            "linearGradient",
+            {
+              id: `${gradientId}-${area.key}`,
+              x1: "0",
+              y1: "0",
+              x2: "0",
+              y2: "1",
+              children: [
+                /* @__PURE__ */ jsx7("stop", { offset: "0%", stopColor: color, stopOpacity: 0.3 }),
+                /* @__PURE__ */ jsx7("stop", { offset: "95%", stopColor: color, stopOpacity: 0.02 })
+              ]
+            },
+            area.key
+          );
+        }) }),
+        /* @__PURE__ */ jsx7(
+          CartesianGrid3,
+          {
+            strokeDasharray: "3 3",
+            stroke: colors.grid,
+            vertical: false
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          XAxis3,
+          {
+            dataKey: xKey,
+            tick: { fontSize: 12, fill: colors.tick },
+            axisLine: { stroke: colors.grid },
+            tickLine: false
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          YAxis3,
+          {
+            tick: { fontSize: 12, fill: colors.tick },
+            axisLine: false,
+            tickLine: false
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          Tooltip3,
+          {
+            contentStyle: {
+              backgroundColor: colors.tooltipBg,
+              border: `1px solid ${colors.tooltipBorder}`,
+              borderRadius: "2px",
+              boxShadow: "none",
+              fontSize: 12,
+              color: colors.tooltipText
+            },
+            cursor: { stroke: colors.cursor, strokeDasharray: "3 3" }
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          Legend3,
+          {
+            wrapperStyle: { fontSize: 12, paddingTop: 8 },
+            iconType: "circle",
+            iconSize: 8
+          }
+        ),
+        areas.map((area, index) => {
+          const color = area.color ?? colors.series[index % colors.series.length];
+          return /* @__PURE__ */ jsx7(
+            Area,
+            {
+              dataKey: area.key,
+              name: area.label,
+              type: "monotone",
+              stroke: color,
+              strokeWidth: 2,
+              fill: `url(#${gradientId}-${area.key})`,
+              stackId: stacked ? "stack" : void 0,
+              dot: false,
+              activeDot: {
+                r: 4,
+                fill: color,
+                stroke: colors.activeDot,
+                strokeWidth: 2
+              }
+            },
+            area.key
+          );
+        })
+      ]
+    }
+  ) }) });
+}
+
+// src/components/comparison-row.tsx
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function ComparisonRow({
+  label,
+  current,
+  previous,
+  format: format3 = (v) => v.toLocaleString(),
+  className
+}) {
+  const delta = previous !== 0 ? (current - previous) / Math.abs(previous) * 100 : 0;
+  const isPositive = delta >= 0;
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between gap-4 py-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx8("span", { className: "min-w-0 flex-shrink truncate text-sm text-text-secondary", children: label }),
+        /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsx8("span", { className: "text-sm font-semibold text-text", children: format3(current) }),
+          /* @__PURE__ */ jsx8("span", { className: "text-sm text-text-muted", children: format3(previous) }),
+          /* @__PURE__ */ jsxs8(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center rounded-button px-2 py-0.5 text-xs font-medium",
+                isPositive ? "bg-revenue-bg text-revenue" : "bg-loss-bg text-loss"
+              ),
+              "aria-label": `${isPositive ? "Up" : "Down"} ${Math.abs(delta).toFixed(1)}%`,
+              children: [
+                isPositive ? "\u2191" : "\u2193",
+                " ",
+                Math.abs(delta).toFixed(1),
+                "%"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/date-range-picker.tsx
+import * as React4 from "react";
+import * as Popover from "@radix-ui/react-popover";
+import {
+  startOfMonth,
+  endOfMonth,
+  subMonths,
+  subDays,
+  startOfYear,
+  format
+} from "date-fns";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var DEFAULT_PRESETS = [
+  { label: "MTD", value: "mtd" },
+  { label: "Last Month", value: "last-month" },
+  { label: "Last 30 Days", value: "last-30" },
+  { label: "Last 90 Days", value: "last-90" },
+  { label: "YTD", value: "ytd" },
+  { label: "Custom", value: "custom" }
+];
+function resolvePreset(preset) {
+  const now = /* @__PURE__ */ new Date();
+  switch (preset) {
+    case "mtd":
+      return { start: startOfMonth(now), end: now };
+    case "last-month": {
+      const prev = subMonths(now, 1);
+      return { start: startOfMonth(prev), end: endOfMonth(prev) };
+    }
+    case "last-30":
+      return { start: subDays(now, 30), end: now };
+    case "last-90":
+      return { start: subDays(now, 90), end: now };
+    case "ytd":
+      return { start: startOfYear(now), end: now };
+    default:
+      return null;
+  }
+}
+function DateRangePicker({
+  value,
+  onChange,
+  onPresetChange,
+  presets = DEFAULT_PRESETS,
+  className
+}) {
+  const [open, setOpen] = React4.useState(false);
+  const [activePreset, setActivePreset] = React4.useState(null);
+  const [showCustomForm, setShowCustomForm] = React4.useState(false);
+  const [customStart, setCustomStart] = React4.useState(
+    format(value.start, "yyyy-MM-dd")
+  );
+  const [customEnd, setCustomEnd] = React4.useState(
+    format(value.end, "yyyy-MM-dd")
+  );
+  const handlePresetClick = (preset) => {
+    setActivePreset(preset);
+    onPresetChange?.(preset);
+    if (preset === "custom") {
+      setShowCustomForm(true);
+      setCustomStart(format(value.start, "yyyy-MM-dd"));
+      setCustomEnd(format(value.end, "yyyy-MM-dd"));
+      return;
+    }
+    setShowCustomForm(false);
+    const range = resolvePreset(preset);
+    if (range) {
+      onChange(range);
+      setOpen(false);
+    }
+  };
+  const handleCustomApply = () => {
+    const start = /* @__PURE__ */ new Date(customStart + "T00:00:00");
+    const end = /* @__PURE__ */ new Date(customEnd + "T00:00:00");
+    if (!isNaN(start.getTime()) && !isNaN(end.getTime()) && start <= end) {
+      onChange({ start, end });
+      setOpen(false);
+      setShowCustomForm(false);
+    }
+  };
+  const displayLabel = `${format(value.start, "MMM d, yyyy")} - ${format(value.end, "MMM d, yyyy")}`;
+  return /* @__PURE__ */ jsxs9(Popover.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx9(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs9(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "inline-flex items-center gap-2 rounded-button border border-surface-border bg-surface px-3 py-1.5",
+          "text-sm text-text hover:bg-surface-hover",
+          "outline-none focus:border-accent focus:ring-1 focus:ring-accent",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx9(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              className: "text-text-tertiary",
+              children: /* @__PURE__ */ jsx9(
+                "path",
+                {
+                  d: "M5 1v2M11 1v2M1 6h14M3 3h10a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx9("span", { children: displayLabel })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx9(Popover.Portal, { children: /* @__PURE__ */ jsxs9(
+      Popover.Content,
+      {
+        align: "start",
+        sideOffset: 4,
+        className: cn(
+          "z-50 rounded-card border border-surface-border bg-surface p-3 shadow-card",
+          "animate-in fade-in-0 zoom-in-95",
+          "w-64"
+        ),
+        children: [
+          /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-1", children: presets.map((preset) => /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              onClick: () => handlePresetClick(preset.value),
+              className: cn(
+                "rounded-button px-3 py-1.5 text-left text-sm transition-colors",
+                activePreset === preset.value ? "bg-accent-light text-accent-dark font-medium" : "text-text hover:bg-surface-hover"
+              ),
+              children: preset.label
+            },
+            preset.value
+          )) }),
+          showCustomForm && /* @__PURE__ */ jsxs9("div", { className: "mt-3 flex flex-col gap-2 border-t border-surface-border pt-3", children: [
+            /* @__PURE__ */ jsxs9("label", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx9("span", { className: "text-xs font-medium text-text-secondary", children: "Start date" }),
+              /* @__PURE__ */ jsx9(
+                "input",
+                {
+                  type: "date",
+                  value: customStart,
+                  onChange: (e) => setCustomStart(e.target.value),
+                  className: cn(
+                    "rounded-button border border-surface-border bg-surface px-2 py-1",
+                    "text-sm text-text outline-none focus:border-accent focus:ring-1 focus:ring-accent"
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs9("label", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx9("span", { className: "text-xs font-medium text-text-secondary", children: "End date" }),
+              /* @__PURE__ */ jsx9(
+                "input",
+                {
+                  type: "date",
+                  value: customEnd,
+                  onChange: (e) => setCustomEnd(e.target.value),
+                  className: cn(
+                    "rounded-button border border-surface-border bg-surface px-2 py-1",
+                    "text-sm text-text outline-none focus:border-accent focus:ring-1 focus:ring-accent"
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx9(
+              "button",
+              {
+                type: "button",
+                onClick: handleCustomApply,
+                className: cn(
+                  "mt-1 rounded-button bg-accent px-3 py-1.5 text-sm font-medium text-text-inverse",
+                  "hover:bg-accent-dark transition-colors"
+                ),
+                children: "Apply"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx9(Popover.Arrow, { className: "fill-surface-border" })
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/components/filter-bar.tsx
+import * as React5 from "react";
+import * as Select from "@radix-ui/react-select";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function FilterDropdownSingle({
+  filter,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs10(Select.Root, { value: value || void 0, onValueChange: onChange, children: [
+    /* @__PURE__ */ jsxs10(
+      Select.Trigger,
+      {
+        "aria-label": filter.label,
+        className: cn(
+          "inline-flex items-center gap-1.5 rounded-button border border-surface-border bg-surface px-3 py-1.5",
+          "text-sm outline-none hover:bg-surface-hover",
+          "focus:border-accent focus:ring-1 focus:ring-accent",
+          value ? "text-text" : "text-text-tertiary"
+        ),
+        children: [
+          /* @__PURE__ */ jsx10(Select.Value, { placeholder: filter.label }),
+          /* @__PURE__ */ jsx10(Select.Icon, { children: /* @__PURE__ */ jsx10(
+            "svg",
+            {
+              width: "12",
+              height: "12",
+              viewBox: "0 0 12 12",
+              fill: "none",
+              className: "text-text-muted",
+              children: /* @__PURE__ */ jsx10(
+                "path",
+                {
+                  d: "M3 4.5l3 3 3-3",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx10(Select.Portal, { children: /* @__PURE__ */ jsx10(
+      Select.Content,
+      {
+        className: cn(
+          "z-50 overflow-hidden rounded-card border border-surface-border bg-surface shadow-card",
+          "animate-in fade-in-0 zoom-in-95"
+        ),
+        position: "popper",
+        sideOffset: 4,
+        children: /* @__PURE__ */ jsx10(Select.Viewport, { className: "p-1", children: filter.options.map((option) => /* @__PURE__ */ jsx10(
+          Select.Item,
+          {
+            value: option.value,
+            className: cn(
+              "cursor-pointer rounded-button px-3 py-1.5 text-sm text-text outline-none",
+              "data-[highlighted]:bg-surface-hover",
+              "data-[state=checked]:font-medium data-[state=checked]:text-accent"
+            ),
+            children: /* @__PURE__ */ jsx10(Select.ItemText, { children: option.label })
+          },
+          option.value
+        )) })
+      }
+    ) })
+  ] });
+}
+function FilterDropdownMultiple({
+  filter,
+  value,
+  onChange
+}) {
+  const [open, setOpen] = React5.useState(false);
+  const handleToggle = (optionValue) => {
+    const next = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue];
+    onChange(next);
+  };
+  const selectedLabels = filter.options.filter((o) => value.includes(o.value)).map((o) => o.label);
+  return /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs10(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(!open),
+        className: cn(
+          "inline-flex items-center gap-1.5 rounded-button border border-surface-border bg-surface px-3 py-1.5",
+          "text-sm outline-none hover:bg-surface-hover",
+          "focus:border-accent focus:ring-1 focus:ring-accent",
+          value.length > 0 ? "text-text" : "text-text-tertiary"
+        ),
+        children: [
+          /* @__PURE__ */ jsx10("span", { children: value.length === 0 ? filter.label : selectedLabels.length <= 2 ? selectedLabels.join(", ") : `${selectedLabels[0]} +${selectedLabels.length - 1}` }),
+          /* @__PURE__ */ jsx10(
+            "svg",
+            {
+              width: "12",
+              height: "12",
+              viewBox: "0 0 12 12",
+              fill: "none",
+              className: "text-text-muted",
+              children: /* @__PURE__ */ jsx10(
+                "path",
+                {
+                  d: "M3 4.5l3 3 3-3",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs10(Fragment2, { children: [
+      /* @__PURE__ */ jsx10(
+        "div",
+        {
+          className: "fixed inset-0 z-40",
+          onClick: () => setOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        "div",
+        {
+          className: cn(
+            "absolute left-0 top-full z-50 mt-1 min-w-[12rem] overflow-hidden rounded-card border border-surface-border bg-surface p-1 shadow-card"
+          ),
+          children: filter.options.map((option) => {
+            const checked = value.includes(option.value);
+            return /* @__PURE__ */ jsxs10(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleToggle(option.value),
+                className: cn(
+                  "flex w-full items-center gap-2 rounded-button px-3 py-1.5 text-left text-sm text-text outline-none",
+                  "hover:bg-surface-hover"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx10(
+                    "span",
+                    {
+                      className: cn(
+                        "flex h-4 w-4 items-center justify-center rounded border",
+                        checked ? "border-accent bg-accent text-text-inverse" : "border-surface-border bg-surface"
+                      ),
+                      children: checked && /* @__PURE__ */ jsx10(
+                        "svg",
+                        {
+                          width: "10",
+                          height: "10",
+                          viewBox: "0 0 10 10",
+                          fill: "none",
+                          children: /* @__PURE__ */ jsx10(
+                            "path",
+                            {
+                              d: "M2 5l2 2 4-4",
+                              stroke: "currentColor",
+                              strokeWidth: "1.5",
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round"
+                            }
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx10("span", { children: option.label })
+                ]
+              },
+              option.value
+            );
+          })
+        }
+      )
+    ] })
+  ] });
+}
+function ActiveFilterBadge({
+  filter,
+  value
+}) {
+  const count = Array.isArray(value) ? value.length : value ? 1 : 0;
+  if (count === 0) return null;
+  return /* @__PURE__ */ jsxs10(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1 rounded-full bg-accent-light px-2 py-0.5 text-xs font-medium text-accent-dark"
+      ),
+      children: [
+        filter.label,
+        /* @__PURE__ */ jsx10("span", { className: "rounded-full bg-accent px-1.5 py-0.5 text-2xs leading-none text-text-inverse", children: count })
+      ]
+    }
+  );
+}
+function FilterBar({
+  filters,
+  values,
+  onChange,
+  onClear,
+  className
+}) {
+  const hasActiveFilters = Object.values(values).some(
+    (v) => Array.isArray(v) ? v.length > 0 : Boolean(v)
+  );
+  return /* @__PURE__ */ jsxs10("div", { className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap items-center gap-2", children: [
+      filters.map((filter) => {
+        const currentValue = values[filter.id];
+        if (filter.multiple) {
+          return /* @__PURE__ */ jsx10(
+            FilterDropdownMultiple,
+            {
+              filter,
+              value: Array.isArray(currentValue) ? currentValue : [],
+              onChange: (val) => onChange(filter.id, val)
+            },
+            filter.id
+          );
+        }
+        return /* @__PURE__ */ jsx10(
+          FilterDropdownSingle,
+          {
+            filter,
+            value: typeof currentValue === "string" ? currentValue : "",
+            onChange: (val) => onChange(filter.id, val)
+          },
+          filter.id
+        );
+      }),
+      hasActiveFilters && onClear && /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          onClick: onClear,
+          className: cn(
+            "rounded-button px-2 py-1.5 text-sm text-text-tertiary",
+            "hover:text-text hover:bg-surface-hover transition-colors"
+          ),
+          children: "Clear all"
+        }
+      )
+    ] }),
+    hasActiveFilters && /* @__PURE__ */ jsx10("div", { className: "flex flex-wrap items-center gap-1.5", children: filters.map((filter) => {
+      const currentValue = values[filter.id];
+      if (!currentValue) return null;
+      return /* @__PURE__ */ jsx10(
+        ActiveFilterBadge,
+        {
+          filter,
+          value: currentValue
+        },
+        filter.id
+      );
+    }) })
+  ] });
+}
+
+// src/components/sidebar-nav.tsx
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function SidebarNav({
+  items,
+  collapsed = false,
+  onToggleCollapse,
+  header,
+  footer,
+  className
+}) {
+  return /* @__PURE__ */ jsxs11(
+    "nav",
+    {
+      className: cn(
+        "flex h-full flex-col border-r border-surface-border bg-surface-secondary",
+        "transition-[width] duration-200 ease-in-out",
+        collapsed ? "w-sidebar-collapsed" : "w-sidebar-w",
+        className
+      ),
+      "aria-label": "Sidebar navigation",
+      children: [
+        header && /* @__PURE__ */ jsx11(
+          "div",
+          {
+            className: cn(
+              "flex items-center border-b border-surface-border px-3 py-3",
+              collapsed && "justify-center"
+            ),
+            children: header
+          }
+        ),
+        /* @__PURE__ */ jsx11("ul", { className: "flex flex-1 flex-col gap-0.5 overflow-y-auto p-2", children: items.map((item) => /* @__PURE__ */ jsx11("li", { children: /* @__PURE__ */ jsxs11(
+          "a",
+          {
+            href: item.href,
+            className: cn(
+              "flex items-center gap-3 rounded-button px-3 py-2 text-sm transition-colors",
+              "outline-none focus-visible:ring-2 focus-visible:ring-accent",
+              item.active ? "bg-surface-hover text-text font-medium border-l-2 border-accent" : "text-text-secondary hover:bg-surface-hover hover:text-text border-l-2 border-transparent",
+              collapsed && "justify-center px-2"
+            ),
+            "aria-current": item.active ? "page" : void 0,
+            title: collapsed ? item.label : void 0,
+            children: [
+              item.icon && /* @__PURE__ */ jsx11(
+                "span",
+                {
+                  className: cn(
+                    "flex h-5 w-5 shrink-0 items-center justify-center",
+                    item.active ? "text-accent" : "text-text-tertiary"
+                  ),
+                  children: item.icon
+                }
+              ),
+              !collapsed && /* @__PURE__ */ jsx11("span", { className: "truncate", children: item.label })
+            ]
+          }
+        ) }, item.href)) }),
+        footer,
+        onToggleCollapse && /* @__PURE__ */ jsx11("div", { className: "border-t border-surface-border p-2", children: /* @__PURE__ */ jsxs11(
+          "button",
+          {
+            type: "button",
+            onClick: onToggleCollapse,
+            className: cn(
+              "flex w-full items-center gap-3 rounded-button px-3 py-2 text-sm text-text-tertiary",
+              "hover:bg-surface-hover hover:text-text transition-colors",
+              "outline-none focus-visible:ring-2 focus-visible:ring-accent",
+              collapsed && "justify-center px-2"
+            ),
+            "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+            children: [
+              /* @__PURE__ */ jsx11(
+                "svg",
+                {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 16 16",
+                  fill: "none",
+                  className: cn(
+                    "shrink-0 transition-transform duration-200",
+                    collapsed && "rotate-180"
+                  ),
+                  children: /* @__PURE__ */ jsx11(
+                    "path",
+                    {
+                      d: "M10 3L5 8l5 5",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
+                }
+              ),
+              !collapsed && /* @__PURE__ */ jsx11("span", { children: "Collapse" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/page-header.tsx
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+function PageHeader({
+  title,
+  description,
+  breadcrumbs,
+  actions,
+  className
+}) {
+  return /* @__PURE__ */ jsxs12("div", { className: cn("space-y-1", className), children: [
+    breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx12("nav", { "aria-label": "Breadcrumb", className: "mb-2", children: /* @__PURE__ */ jsx12("ol", { className: "flex items-center gap-1 text-xs text-text-tertiary", children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs12("li", { className: "flex items-center gap-1", children: [
+      index > 0 && /* @__PURE__ */ jsx12("span", { "aria-hidden": "true", className: "text-text-muted", children: "/" }),
+      crumb.href ? /* @__PURE__ */ jsx12(
+        "a",
+        {
+          href: crumb.href,
+          className: "transition-colors hover:text-text-secondary",
+          children: crumb.label
+        }
+      ) : /* @__PURE__ */ jsx12("span", { className: "text-text-secondary", children: crumb.label })
+    ] }, index)) }) }),
+    /* @__PURE__ */ jsxs12("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs12("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx12("h1", { className: "text-2xl font-semibold text-text", children: title }),
+        description && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-sm text-text-secondary", children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsx12("div", { className: "flex flex-shrink-0 items-center gap-2", children: actions })
+    ] })
+  ] });
+}
+
+// src/components/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-button font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground font-display uppercase tracking-wider hover:opacity-90",
+        secondary: "border-2 border-foreground bg-transparent text-foreground hover:bg-foreground hover:text-background",
+        ghost: "bg-transparent text-foreground hover:bg-muted"
+      },
+      size: {
+        sm: "h-8 px-3 text-xs",
+        md: "h-10 px-5 text-sm",
+        lg: "h-12 px-8 text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx13(
+    Comp,
+    {
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/badge.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var badgeVariants = cva2(
+  "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-foreground text-background",
+        primary: "bg-primary text-primary-foreground",
+        outline: "border-2 border-foreground text-foreground bg-transparent",
+        muted: "bg-muted text-muted-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx14("span", { className: cn(badgeVariants({ variant, className })), ...props });
+}
+
+// src/components/card.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx15("div", { className: cn("flex flex-col gap-1.5 p-6 pb-0", className), ...props });
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx15(
+    "h3",
+    {
+      className: cn("font-display text-xl uppercase tracking-wider text-card-foreground", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx15("p", { className: cn("text-sm text-muted-foreground", className), ...props });
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx15("div", { className: cn("p-6", className), ...props });
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx15("div", { className: cn("flex items-center p-6 pt-0", className), ...props });
+}
+function CardRoot({ className, ...props }) {
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      className: cn(
+        "rounded-card border-2 border-foreground/40 bg-card text-card-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var Card = Object.assign(CardRoot, {
+  Header: CardHeader,
+  Title: CardTitle,
+  Description: CardDescription,
+  Content: CardContent,
+  Footer: CardFooter
+});
+
+// src/components/section.tsx
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var sectionVariants = cva3("py-16 md:py-24", {
+  variants: {
+    variant: {
+      default: "",
+      muted: "bg-muted/30",
+      bordered: "border-y-2 border-foreground/40"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function Section({
+  className,
+  variant,
+  noContainer = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx16("section", { className: cn(sectionVariants({ variant }), className), ...props, children: noContainer ? children : /* @__PURE__ */ jsx16("div", { className: "mx-auto max-w-7xl px-6 lg:px-8", children }) });
+}
+
+// src/components/stat-card.tsx
+import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+function StatCard({ value, label, notched = false, className, ...props }) {
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden rounded-card bg-foreground p-6 text-background",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx17("span", { className: "absolute top-2 left-2 h-1 w-1 rounded-full bg-background/40" }),
+        /* @__PURE__ */ jsx17("span", { className: "absolute top-2 right-2 h-1 w-1 rounded-full bg-background/40" }),
+        /* @__PURE__ */ jsx17("span", { className: "absolute bottom-2 left-2 h-1 w-1 rounded-full bg-background/40" }),
+        /* @__PURE__ */ jsx17("span", { className: "absolute bottom-2 right-2 h-1 w-1 rounded-full bg-background/40" }),
+        notched && /* @__PURE__ */ jsxs13(Fragment3, { children: [
+          /* @__PURE__ */ jsx17("span", { className: "absolute left-0 top-1/2 h-5 w-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-background" }),
+          /* @__PURE__ */ jsx17("span", { className: "absolute right-0 top-1/2 h-5 w-2.5 translate-x-1/2 -translate-y-1/2 rounded-full bg-background" })
+        ] }),
+        /* @__PURE__ */ jsx17("div", { className: "font-display text-4xl uppercase tracking-wider", children: value }),
+        /* @__PURE__ */ jsx17("div", { className: "mt-1 text-sm uppercase tracking-wider text-background/70", children: label })
+      ]
+    }
+  );
+}
+
+// src/components/testimonial-card.tsx
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+function TestimonialCard({
+  quote,
+  author,
+  role,
+  avatarUrl,
+  rating,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      className: cn(
+        "rounded-card border-2 border-foreground/40 p-6",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx18("span", { className: "font-display text-4xl leading-none text-primary", "aria-hidden": "true", children: "\u201C" }),
+        rating && /* @__PURE__ */ jsx18("div", { className: "mb-3 flex gap-0.5", children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx18(
+          "svg",
+          {
+            className: cn("h-4 w-4", i < rating ? "text-primary" : "text-muted"),
+            viewBox: "0 0 20 20",
+            fill: "currentColor",
+            children: /* @__PURE__ */ jsx18("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
+          },
+          i
+        )) }),
+        /* @__PURE__ */ jsx18("blockquote", { className: "text-sm leading-relaxed text-foreground", children: quote }),
+        /* @__PURE__ */ jsxs14("div", { className: "mt-4 flex items-center gap-3", children: [
+          avatarUrl && /* @__PURE__ */ jsx18(
+            "img",
+            {
+              src: avatarUrl,
+              alt: author,
+              className: "h-10 w-10 rounded-full border-2 border-foreground/20 object-cover"
+            }
+          ),
+          /* @__PURE__ */ jsxs14("div", { children: [
+            /* @__PURE__ */ jsx18("div", { className: "text-sm font-semibold text-foreground", children: author }),
+            role && /* @__PURE__ */ jsx18("div", { className: "text-xs text-muted-foreground", children: role })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/pricing-card.tsx
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+function PricingCard({
+  name,
+  price,
+  unit = "/mo",
+  description,
+  features,
+  ctaLabel = "Get Started",
+  ctaHref,
+  onCtaClick,
+  featured = false,
+  badge,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      className: cn(
+        "relative flex flex-col rounded-card border-2 p-6",
+        featured ? "border-primary bg-foreground text-background" : "border-foreground/40",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs15("div", { className: "mb-4 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx19("h3", { className: "font-display text-xl uppercase tracking-wider", children: name }),
+          badge && /* @__PURE__ */ jsx19(Badge, { variant: featured ? "primary" : "default", children: badge })
+        ] }),
+        /* @__PURE__ */ jsxs15("div", { className: "mb-4", children: [
+          /* @__PURE__ */ jsx19("span", { className: "font-display text-4xl", children: price }),
+          unit && /* @__PURE__ */ jsx19("span", { className: cn("text-sm", featured ? "text-background/70" : "text-muted-foreground"), children: unit })
+        ] }),
+        description && /* @__PURE__ */ jsx19("div", { className: cn(
+          "mb-6 border-y-2 py-3 text-sm",
+          featured ? "border-background/20" : "border-foreground/20"
+        ), children: description }),
+        /* @__PURE__ */ jsx19("ul", { className: "mb-6 flex-1 space-y-2", children: features.map((feature) => /* @__PURE__ */ jsxs15("li", { className: "flex items-start gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx19(
+            "svg",
+            {
+              className: cn("mt-0.5 h-4 w-4 shrink-0", featured ? "text-primary" : "text-primary"),
+              viewBox: "0 0 20 20",
+              fill: "currentColor",
+              children: /* @__PURE__ */ jsx19("path", { d: "M10 2l2.39 4.843L17.5 7.72l-3.75 3.657.885 5.163L10 14.058 5.365 16.54l.885-5.163L2.5 7.72l5.11-.877L10 2z" })
+            }
+          ),
+          /* @__PURE__ */ jsx19("span", { children: feature })
+        ] }, feature)) }),
+        /* @__PURE__ */ jsx19(
+          Button,
+          {
+            variant: featured ? "primary" : "secondary",
+            className: "w-full",
+            onClick: onCtaClick,
+            ...ctaHref ? { asChild: true } : {},
+            children: ctaHref ? /* @__PURE__ */ jsx19("a", { href: ctaHref, children: ctaLabel }) : ctaLabel
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/logo-grid.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var colsMap = {
+  3: "grid-cols-3",
+  4: "grid-cols-2 sm:grid-cols-4",
+  5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5",
+  6: "grid-cols-3 sm:grid-cols-6"
+};
+function LogoGrid({
+  logos,
+  columns = 4,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      className: cn("grid items-center gap-8", colsMap[columns], className),
+      ...props,
+      children: logos.map((logo) => {
+        const img = /* @__PURE__ */ jsx20(
+          "img",
+          {
+            src: logo.src,
+            alt: logo.alt,
+            className: "h-10 w-auto object-contain grayscale transition-all duration-300 hover:grayscale-0 hover:scale-110"
+          }
+        );
+        return /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center", children: logo.href ? /* @__PURE__ */ jsx20("a", { href: logo.href, target: "_blank", rel: "noopener noreferrer", children: img }) : img }, logo.alt);
+      })
+    }
+  );
+}
+
+// src/components/footer.tsx
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+function Footer({
+  columns,
+  bottomContent,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx21("footer", { className: cn("bg-foreground text-background", className), ...props, children: /* @__PURE__ */ jsxs16("div", { className: "mx-auto max-w-7xl px-6 py-12 lg:px-8", children: [
+    /* @__PURE__ */ jsx21("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-4", children: columns.map((col) => /* @__PURE__ */ jsxs16("div", { children: [
+      /* @__PURE__ */ jsx21("h4", { className: "font-display text-sm uppercase tracking-wider text-background/70", children: col.heading }),
+      /* @__PURE__ */ jsx21("ul", { className: "mt-3 space-y-2", children: col.links.map((link) => /* @__PURE__ */ jsx21("li", { children: /* @__PURE__ */ jsx21(
+        "a",
+        {
+          href: link.href,
+          className: "text-sm text-background/80 transition-colors hover:text-background",
+          children: link.label
+        }
+      ) }, link.label)) })
+    ] }, col.heading)) }),
+    /* @__PURE__ */ jsx21("div", { className: "mt-10 border-t-2 border-background/20 pt-6", children: bottomContent ?? /* @__PURE__ */ jsxs16("p", { className: "text-xs text-background/50", children: [
+      "\xA9 ",
+      (/* @__PURE__ */ new Date()).getFullYear(),
+      " All rights reserved."
+    ] }) })
+  ] }) });
+}
+
+// src/components/social-card.tsx
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+function SocialCard({ width = 1200, height = 630 }) {
+  return /* @__PURE__ */ jsxs17(
+    "div",
+    {
+      style: {
+        width,
+        height,
+        background: "#0e0e0e",
+        color: "#e6ddd0",
+        fontFamily: "'Bebas Neue', Impact, sans-serif",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        padding: 64,
+        position: "relative",
+        overflow: "hidden"
+      },
+      children: [
+        [
+          { top: 24, left: 24 },
+          { top: 24, right: 24 },
+          { bottom: 24, left: 24 },
+          { bottom: 24, right: 24 }
+        ].map((pos, i) => /* @__PURE__ */ jsx22(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              ...pos,
+              width: 6,
+              height: 6,
+              borderRadius: "50%",
+              background: "rgba(230,221,208,0.3)"
+            }
+          },
+          i
+        )),
+        /* @__PURE__ */ jsx22(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 16,
+              border: "2px solid rgba(230,221,208,0.15)",
+              borderRadius: 2,
+              pointerEvents: "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs17("div", { children: [
+          /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: 16, marginBottom: 48 }, children: [
+            /* @__PURE__ */ jsx22(
+              "div",
+              {
+                style: {
+                  width: 48,
+                  height: 48,
+                  background: "#fcd34d",
+                  borderRadius: 4,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: 28,
+                  lineHeight: 1
+                },
+                children: "\u{1F969}"
+              }
+            ),
+            /* @__PURE__ */ jsx22(
+              "span",
+              {
+                style: {
+                  fontSize: 24,
+                  letterSpacing: "0.1em",
+                  textTransform: "uppercase",
+                  color: "rgba(230,221,208,0.5)",
+                  fontFamily: "'Bebas Neue', Impact, sans-serif"
+                },
+                children: "Lambchop"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs17(
+            "h1",
+            {
+              style: {
+                fontSize: 96,
+                lineHeight: 1,
+                textTransform: "uppercase",
+                letterSpacing: "0.05em",
+                margin: 0,
+                fontWeight: 400
+              },
+              children: [
+                "Design",
+                /* @__PURE__ */ jsx22("br", {}),
+                "System"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs17("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-end" }, children: [
+          /* @__PURE__ */ jsx22("div", { style: { display: "flex", gap: 32 }, children: [
+            { value: "24", label: "Components" },
+            { value: "3", label: "Font Families" },
+            { value: "9", label: "Chart Colors" }
+          ].map((stat) => /* @__PURE__ */ jsxs17("div", { children: [
+            /* @__PURE__ */ jsx22(
+              "div",
+              {
+                style: {
+                  fontSize: 40,
+                  letterSpacing: "0.05em",
+                  color: "#fcd34d",
+                  fontFamily: "'Bebas Neue', Impact, sans-serif"
+                },
+                children: stat.value
+              }
+            ),
+            /* @__PURE__ */ jsx22(
+              "div",
+              {
+                style: {
+                  fontSize: 11,
+                  letterSpacing: "0.15em",
+                  textTransform: "uppercase",
+                  color: "rgba(230,221,208,0.5)",
+                  fontFamily: "'DM Sans', sans-serif"
+                },
+                children: stat.label
+              }
+            )
+          ] }, stat.label)) }),
+          /* @__PURE__ */ jsx22(
+            "div",
+            {
+              style: {
+                width: 80,
+                height: 4,
+                background: "#fcd34d",
+                borderRadius: 2
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/hooks/use-intersection-observer.ts
+import { useRef as useRef2, useState as useState5, useEffect as useEffect2, useCallback } from "react";
+function useIntersectionObserver({
+  threshold = 0.1,
+  rootMargin = "0px",
+  triggerOnce = true
+} = {}) {
+  const [isIntersecting, setIsIntersecting] = useState5(false);
+  const elementRef = useRef2(null);
+  const observerRef = useRef2(null);
+  const ref = useCallback(
+    (node) => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+      elementRef.current = node;
+      if (!node) return;
+      observerRef.current = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            setIsIntersecting(true);
+            if (triggerOnce && observerRef.current) {
+              observerRef.current.disconnect();
+            }
+          } else if (!triggerOnce) {
+            setIsIntersecting(false);
+          }
+        },
+        { threshold, rootMargin }
+      );
+      observerRef.current.observe(node);
+    },
+    [threshold, rootMargin, triggerOnce]
+  );
+  useEffect2(() => {
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, []);
+  return { ref, isIntersecting };
+}
+
+// src/components/fade-in.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+var directionMap = {
+  up: "animate-fade-in-up",
+  down: "animate-fade-in-down",
+  left: "animate-fade-in-left",
+  right: "animate-fade-in-right"
+};
+function FadeIn({
+  direction = "up",
+  delay = 0,
+  className,
+  children,
+  ...props
+}) {
+  const { ref, isIntersecting } = useIntersectionObserver({ triggerOnce: true });
+  return /* @__PURE__ */ jsx23(
+    "div",
+    {
+      ref,
+      className: cn(
+        isIntersecting ? directionMap[direction] : "opacity-0",
+        className
+      ),
+      style: delay ? { animationDelay: `${delay}ms` } : void 0,
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/scale-in.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+function ScaleIn({
+  delay = 0,
+  className,
+  children,
+  ...props
+}) {
+  const { ref, isIntersecting } = useIntersectionObserver({ triggerOnce: true });
+  return /* @__PURE__ */ jsx24(
+    "div",
+    {
+      ref,
+      className: cn(
+        isIntersecting ? "animate-scale-in" : "opacity-0",
+        className
+      ),
+      style: delay ? { animationDelay: `${delay}ms` } : void 0,
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/stagger-container.tsx
+import * as React6 from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+function StaggerContainer({
+  stagger = 100,
+  className,
+  children,
+  ...props
+}) {
+  const { ref, isIntersecting } = useIntersectionObserver({ triggerOnce: true });
+  return /* @__PURE__ */ jsx25("div", { ref, className: cn(className), ...props, children: React6.Children.map(children, (child, index) => {
+    if (!React6.isValidElement(child)) return child;
+    return React6.cloneElement(child, {
+      style: {
+        ...child.props.style,
+        transitionDelay: `${index * stagger}ms`,
+        opacity: isIntersecting ? 1 : 0,
+        transform: isIntersecting ? "translateY(0)" : "translateY(1rem)",
+        transition: `opacity 0.5s ease-out, transform 0.5s ease-out`
+      }
+    });
+  }) });
+}
+
+// src/hooks/use-time-range.ts
+import { useState as useState6, useMemo, useCallback as useCallback2 } from "react";
+import {
+  startOfMonth as startOfMonth2,
+  endOfMonth as endOfMonth2,
+  subMonths as subMonths2,
+  subDays as subDays2,
+  startOfYear as startOfYear2,
+  format as format2
+} from "date-fns";
+function resolvePreset2(preset) {
+  const now = /* @__PURE__ */ new Date();
+  switch (preset) {
+    case "mtd":
+      return { start: startOfMonth2(now), end: now };
+    case "last-month": {
+      const prev = subMonths2(now, 1);
+      return { start: startOfMonth2(prev), end: endOfMonth2(prev) };
+    }
+    case "last-30":
+      return { start: subDays2(now, 30), end: now };
+    case "last-90":
+      return { start: subDays2(now, 90), end: now };
+    case "ytd":
+      return { start: startOfYear2(now), end: now };
+    case "custom":
+      return { start: subDays2(now, 30), end: now };
+  }
+}
+function useTimeRange(initialPreset = "mtd") {
+  const [preset, setPresetState] = useState6(initialPreset);
+  const [customRange, setCustomRange] = useState6(null);
+  const range = useMemo(() => {
+    if (preset === "custom" && customRange) {
+      return { ...customRange, preset };
+    }
+    return { ...resolvePreset2(preset), preset };
+  }, [preset, customRange]);
+  const setPreset = useCallback2((p) => {
+    setPresetState(p);
+    if (p !== "custom") setCustomRange(null);
+  }, []);
+  const setCustom = useCallback2((start, end) => {
+    setPresetState("custom");
+    setCustomRange({ start, end });
+  }, []);
+  const formatted = useMemo(
+    () => ({
+      start: format2(range.start, "yyyy-MM-dd"),
+      end: format2(range.end, "yyyy-MM-dd")
+    }),
+    [range]
+  );
+  return { range, preset, setPreset, setCustom, formatted };
+}
+
+// src/hooks/use-table-sort.ts
+import { useState as useState7, useCallback as useCallback3 } from "react";
+function useTableSort(initialSort = []) {
+  const [sorting, setSorting] = useState7(initialSort);
+  const toggleSort = useCallback3((columnId) => {
+    setSorting((prev) => {
+      const existing = prev.find((s) => s.id === columnId);
+      if (!existing) return [{ id: columnId, desc: true }];
+      if (existing.desc) return [{ id: columnId, desc: false }];
+      return [];
+    });
+  }, []);
+  return { sorting, setSorting, toggleSort };
+}
+export {
+  AreaChart,
+  Badge,
+  BarChart,
+  Button,
+  Card,
+  ComparisonRow,
+  DataTable,
+  DateRangePicker,
+  FadeIn,
+  FilterBar,
+  Footer,
+  KpiCard,
+  LineChart,
+  LogoGrid,
+  MetricTrend,
+  PageHeader,
+  PricingCard,
+  ScaleIn,
+  Section,
+  SidebarNav,
+  SocialCard,
+  Sparkline,
+  StaggerContainer,
+  StatCard,
+  TestimonialCard,
+  cn,
+  useChartColors,
+  useIntersectionObserver,
+  useTableSort,
+  useTimeRange
+};
+//# sourceMappingURL=index.js.map