@pos-360/horizon 0.5.5 → 0.6.1

package/dist/{chunk-MEJ3HYYK.mjs → chunk-EBJJNTPC.mjs}

@@ -1,10 +1,18 @@
 import { cn, Text, Badge } from './chunk-E3UN74IA.mjs';
 import { motion, AnimatePresence } from 'framer-motion';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { forwardRef, useState, useEffect, createContext, useRef, useCallback, useContext } from 'react';
-import { Info, ChevronDown, ChevronUp, ChevronRight, LayoutGrid, List, Check, ExternalLink, X, Moon, Rocket, Star, Globe, Orbit, Sparkles, AlertTriangle } from 'lucide-react';
+import { createContext, forwardRef, useId, useMemo, useState, useEffect, useRef, useCallback, useContext } from 'react';
+import { ChevronLeft, ChevronRight, Info, ChevronDown, ChevronUp, TrendingUp, TrendingDown, Minus, LayoutGrid, List, Check, ExternalLink, X, Moon, Rocket, Star, Globe, Orbit, Sparkles, AlertTriangle } from 'lucide-react';
 export { Globe, Moon, Orbit, Rocket, Sparkles, Star } from 'lucide-react';
+import { Bar, AreaClosed, LinePath, Pie } from '@visx/shape';
+import { Group } from '@visx/group';
+import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
+import { AxisBottom, AxisLeft } from '@visx/axis';
+import { GridRows } from '@visx/grid';
+import { LinearGradient } from '@visx/gradient';
+import { ParentSize } from '@visx/responsive';
+import { curveMonotoneX } from '@visx/curve';
 import * as Tooltip from '@radix-ui/react-tooltip';
 
 var AnimatedButton = ({
@@ -33,6 +41,1201 @@ var AnimatedButton = ({
     }
   );
 };
+var DashboardContext = createContext({ columns: 12 });
+var useDashboardContext = () => useContext(DashboardContext);
+var breakpoints = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+function isResponsive(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function generateResponsiveCSS(id, columns, rowHeight, gap) {
+  const cssRules = [];
+  const selector = `[data-dashboard-id="${id}"]`;
+  const getValue = (value, bp) => {
+    if (!isResponsive(value)) return bp === "default" ? value : void 0;
+    return value[bp];
+  };
+  const allBreakpoints = ["default", "sm", "md", "lg", "xl", "2xl"];
+  let lastColumns;
+  let lastRowHeight;
+  let lastGap;
+  for (const bp of allBreakpoints) {
+    const colVal = getValue(columns, bp);
+    const rowVal = rowHeight ? getValue(rowHeight, bp) : void 0;
+    const gapVal = getValue(gap, bp);
+    if (colVal !== void 0) lastColumns = colVal;
+    if (rowVal !== void 0) lastRowHeight = rowVal;
+    if (gapVal !== void 0) lastGap = gapVal;
+    if (colVal !== void 0 || rowVal !== void 0 || gapVal !== void 0) {
+      const props = [];
+      if (lastColumns !== void 0) {
+        props.push(`grid-template-columns: repeat(${lastColumns}, minmax(0, 1fr))`);
+      }
+      if (lastRowHeight !== void 0) {
+        props.push(`grid-auto-rows: ${lastRowHeight}px`);
+      }
+      if (lastGap !== void 0) {
+        props.push(`gap: ${lastGap * 0.25}rem`);
+      }
+      if (props.length > 0) {
+        const rule = `${selector} { ${props.join("; ")}; }`;
+        if (bp === "default") {
+          cssRules.push(rule);
+        } else {
+          cssRules.push(`@media (min-width: ${breakpoints[bp]}px) { ${rule} }`);
+        }
+      }
+    }
+  }
+  return cssRules.join("\n");
+}
+var Dashboard = forwardRef(
+  ({ columns = 12, rowHeight, gap = 4, className, children }, ref) => {
+    const reactId = useId();
+    const dashboardId = `dashboard-${reactId.replace(/:/g, "")}`;
+    const responsiveCSS = useMemo(
+      () => generateResponsiveCSS(dashboardId, columns, rowHeight, gap),
+      [dashboardId, columns, rowHeight, gap]
+    );
+    return /* @__PURE__ */ jsxs(DashboardContext.Provider, { value: { columns }, children: [
+      /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: responsiveCSS } }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          "data-dashboard-id": dashboardId,
+          className: cn("hz-rounded grid w-full", className),
+          children
+        }
+      )
+    ] });
+  }
+);
+Dashboard.displayName = "Dashboard";
+var breakpoints2 = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+function isResponsive2(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function generatePanelCSS(id, span, rowSpan) {
+  const cssRules = [];
+  const selector = `[data-panel-id="${id}"]`;
+  const getValue = (value, bp) => {
+    if (!isResponsive2(value)) return bp === "default" ? value : void 0;
+    return value[bp];
+  };
+  const allBreakpoints = ["default", "sm", "md", "lg", "xl", "2xl"];
+  let lastSpan;
+  let lastRowSpan;
+  for (const bp of allBreakpoints) {
+    const spanVal = getValue(span, bp);
+    const rowSpanVal = getValue(rowSpan, bp);
+    if (spanVal !== void 0) lastSpan = spanVal;
+    if (rowSpanVal !== void 0) lastRowSpan = rowSpanVal;
+    if (spanVal !== void 0 || rowSpanVal !== void 0) {
+      const props = [];
+      if (lastSpan !== void 0) {
+        props.push(`grid-column: span ${lastSpan} / span ${lastSpan}`);
+      }
+      if (lastRowSpan !== void 0) {
+        props.push(`grid-row: span ${lastRowSpan} / span ${lastRowSpan}`);
+      }
+      if (props.length > 0) {
+        const rule = `${selector} { ${props.join("; ")}; }`;
+        if (bp === "default") {
+          cssRules.push(rule);
+        } else {
+          cssRules.push(`@media (min-width: ${breakpoints2[bp]}px) { ${rule} }`);
+        }
+      }
+    }
+  }
+  return cssRules.join("\n");
+}
+var DashboardPanel = forwardRef(
+  ({ span = 1, rowSpan = 1, className, children }, ref) => {
+    const reactId = useId();
+    const panelId = `panel-${reactId.replace(/:/g, "")}`;
+    const needsResponsiveCSS = isResponsive2(span) || isResponsive2(rowSpan);
+    const responsiveCSS = useMemo(() => {
+      if (!needsResponsiveCSS) return null;
+      return generatePanelCSS(panelId, span, rowSpan);
+    }, [needsResponsiveCSS, panelId, span, rowSpan]);
+    const inlineStyle = !needsResponsiveCSS ? {
+      gridColumn: `span ${span} / span ${span}`,
+      gridRow: `span ${rowSpan} / span ${rowSpan}`
+    } : void 0;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      responsiveCSS && /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: responsiveCSS } }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          "data-panel-id": needsResponsiveCSS ? panelId : void 0,
+          className: cn("min-w-0 h-full", className),
+          style: inlineStyle,
+          children
+        }
+      )
+    ] });
+  }
+);
+DashboardPanel.displayName = "DashboardPanel";
+var TrendBadge = ({ trend, size }) => {
+  const Icon = trend.direction === "up" ? TrendingUp : trend.direction === "down" ? TrendingDown : Minus;
+  const iconSize = size === "sm" ? "w-3 h-3" : "w-3.5 h-3.5";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center gap-1 px-2 py-0.5 rounded-hz-full font-medium",
+        size === "sm" && "text-xs",
+        size === "md" && "text-xs",
+        size === "lg" && "text-sm",
+        trend.direction === "up" && "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400",
+        trend.direction === "down" && "bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400",
+        trend.direction === "neutral" && "bg-gray-100 text-gray-600 dark:bg-neutral-800 dark:text-gray-400"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: iconSize }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          Math.abs(trend.value).toFixed(1),
+          "%"
+        ] })
+      ]
+    }
+  );
+};
+var StatDisplay = forwardRef(
+  ({ data, size = "md", className }, ref) => {
+    const { value, label, trend, prefix = "", suffix = "" } = data;
+    const formattedValue = useMemo(() => {
+      if (typeof value === "number") {
+        return value.toLocaleString("en-US", {
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 2
+        });
+      }
+      return value;
+    }, [value]);
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col", className), children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          size: "xs",
+          color: "muted",
+          className: "uppercase tracking-wide",
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "font-bold text-gray-900 dark:text-gray-100 mt-0.5",
+            size === "sm" && "text-lg",
+            size === "md" && "text-xl",
+            size === "lg" && "text-2xl"
+          ),
+          children: [
+            prefix,
+            formattedValue,
+            suffix
+          ]
+        }
+      ),
+      trend && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1", children: [
+        /* @__PURE__ */ jsx(TrendBadge, { trend, size }),
+        trend.label && /* @__PURE__ */ jsx(Text, { as: "span", size: "xs", color: "muted", children: trend.label })
+      ] })
+    ] });
+  }
+);
+StatDisplay.displayName = "StatDisplay";
+var defaultColors = [
+  "#3b82f6",
+  // blue-500
+  "#8b5cf6",
+  // violet-500
+  "#ec4899",
+  // pink-500
+  "#f59e0b",
+  // amber-500
+  "#10b981",
+  // emerald-500
+  "#6366f1"
+  // indigo-500
+];
+var DonutChart = ({
+  data,
+  width,
+  height,
+  centerLabel,
+  centerValue,
+  variant = "half"
+}) => {
+  const isHalf = variant === "half";
+  const radius = isHalf ? Math.min(width, height * 2) / 2 : Math.min(width, height) / 2;
+  const innerRadius = radius * 0.65;
+  const centerX = width / 2;
+  const centerY = isHalf ? height : height / 2;
+  const colorScale = useMemo(
+    () => scaleOrdinal({
+      domain: data.map((d) => d.label),
+      range: data.map((d, i) => d.color || defaultColors[i % defaultColors.length])
+    }),
+    [data]
+  );
+  const getValue = (d) => d.value;
+  return /* @__PURE__ */ jsx("svg", { width, height, children: /* @__PURE__ */ jsxs(Group, { top: centerY, left: centerX, children: [
+    /* @__PURE__ */ jsx(
+      Pie,
+      {
+        data,
+        pieValue: getValue,
+        outerRadius: radius,
+        innerRadius,
+        startAngle: isHalf ? -Math.PI / 2 : 0,
+        endAngle: isHalf ? Math.PI / 2 : Math.PI * 2,
+        padAngle: 0.02,
+        cornerRadius: 3,
+        children: (pie) => pie.arcs.map((arc, index) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: pie.path(arc) || "",
+            fill: colorScale(arc.data.label),
+            className: "transition-opacity hover:opacity-80"
+          },
+          `arc-${index}`
+        ))
+      }
+    ),
+    (centerLabel || centerValue) && /* @__PURE__ */ jsxs("g", { children: [
+      centerValue && /* @__PURE__ */ jsx(
+        "text",
+        {
+          y: isHalf ? -20 : -8,
+          textAnchor: "middle",
+          className: "fill-gray-900 dark:fill-gray-100",
+          style: { fontSize: "1.25rem", fontWeight: 700 },
+          children: centerValue
+        }
+      ),
+      centerLabel && /* @__PURE__ */ jsx(
+        "text",
+        {
+          y: isHalf ? 0 : 12,
+          textAnchor: "middle",
+          className: "fill-gray-500 dark:fill-gray-400",
+          style: { fontSize: "0.75rem" },
+          children: centerLabel
+        }
+      )
+    ] })
+  ] }) });
+};
+var margin = { top: 20, right: 20, bottom: 30, left: 50 };
+var LineChart = ({ data, width, height, color = "#3b82f6", showArea = true }) => {
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+  const xScale = useMemo(
+    () => scaleBand({
+      domain: data.map((d) => d.label),
+      range: [0, innerWidth],
+      padding: 0.2
+    }),
+    [data, innerWidth]
+  );
+  const yScale = useMemo(() => {
+    const maxValue = Math.max(...data.map((d) => d.value));
+    return scaleLinear({
+      domain: [0, maxValue * 1.1],
+      range: [innerHeight, 0],
+      nice: true
+    });
+  }, [data, innerHeight]);
+  const getX = (d) => (xScale(d.label) || 0) + xScale.bandwidth() / 2;
+  const getY = (d) => yScale(d.value);
+  if (width < 100 || height < 80) return null;
+  return /* @__PURE__ */ jsxs("svg", { width, height, children: [
+    /* @__PURE__ */ jsx(LinearGradient, { id: "area-gradient", from: color, to: color, fromOpacity: 0.3, toOpacity: 0 }),
+    /* @__PURE__ */ jsxs(Group, { left: margin.left, top: margin.top, children: [
+      /* @__PURE__ */ jsx(
+        GridRows,
+        {
+          scale: yScale,
+          width: innerWidth,
+          strokeDasharray: "3,3",
+          stroke: "currentColor",
+          strokeOpacity: 0.1,
+          className: "text-gray-400 dark:text-neutral-600"
+        }
+      ),
+      showArea && /* @__PURE__ */ jsx(
+        AreaClosed,
+        {
+          data,
+          x: getX,
+          y: getY,
+          yScale,
+          curve: curveMonotoneX,
+          fill: "url(#area-gradient)"
+        }
+      ),
+      /* @__PURE__ */ jsx(LinePath, { data, x: getX, y: getY, stroke: color, strokeWidth: 2.5, curve: curveMonotoneX }),
+      data.map((d, i) => /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: getX(d),
+          cy: getY(d),
+          r: 3,
+          fill: "white",
+          stroke: color,
+          strokeWidth: 2
+        },
+        `point-${i}`
+      )),
+      /* @__PURE__ */ jsx(
+        AxisBottom,
+        {
+          top: innerHeight,
+          scale: xScale,
+          tickLabelProps: () => ({
+            fill: "currentColor",
+            fontSize: 10,
+            textAnchor: "middle",
+            className: "text-gray-500 dark:text-gray-400"
+          }),
+          hideAxisLine: true,
+          tickStroke: "transparent"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AxisLeft,
+        {
+          scale: yScale,
+          numTicks: 4,
+          tickLabelProps: () => ({
+            fill: "currentColor",
+            fontSize: 10,
+            textAnchor: "end",
+            dx: -4,
+            dy: 4,
+            className: "text-gray-500 dark:text-gray-400"
+          }),
+          hideAxisLine: true,
+          tickStroke: "transparent"
+        }
+      )
+    ] })
+  ] });
+};
+var MultiLineChart = ({ series, width, height, showArea = false }) => {
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+  const allLabels = useMemo(() => {
+    const labels = /* @__PURE__ */ new Set();
+    series.forEach((s) => s.data.forEach((d) => labels.add(d.label)));
+    return Array.from(labels);
+  }, [series]);
+  const xScale = useMemo(
+    () => scaleBand({
+      domain: allLabels,
+      range: [0, innerWidth],
+      padding: 0.2
+    }),
+    [allLabels, innerWidth]
+  );
+  const yScale = useMemo(() => {
+    const maxValue = Math.max(...series.flatMap((s) => s.data.map((d) => d.value)));
+    return scaleLinear({
+      domain: [0, maxValue * 1.1],
+      range: [innerHeight, 0],
+      nice: true
+    });
+  }, [series, innerHeight]);
+  const getX = (d) => (xScale(d.label) || 0) + xScale.bandwidth() / 2;
+  const getY = (d) => yScale(d.value);
+  if (width < 100 || height < 80) return null;
+  return /* @__PURE__ */ jsxs("svg", { width, height, children: [
+    series.map((s, i) => /* @__PURE__ */ jsx(
+      LinearGradient,
+      {
+        id: `area-gradient-${i}`,
+        from: s.color || defaultColors[i % defaultColors.length],
+        to: s.color || defaultColors[i % defaultColors.length],
+        fromOpacity: 0.2,
+        toOpacity: 0
+      },
+      `gradient-${i}`
+    )),
+    /* @__PURE__ */ jsxs(Group, { left: margin.left, top: margin.top, children: [
+      /* @__PURE__ */ jsx(
+        GridRows,
+        {
+          scale: yScale,
+          width: innerWidth,
+          strokeDasharray: "3,3",
+          stroke: "currentColor",
+          strokeOpacity: 0.1,
+          className: "text-gray-400 dark:text-neutral-600"
+        }
+      ),
+      series.map((s, i) => {
+        const color = s.color || defaultColors[i % defaultColors.length];
+        return /* @__PURE__ */ jsxs("g", { children: [
+          showArea && /* @__PURE__ */ jsx(
+            AreaClosed,
+            {
+              data: s.data,
+              x: getX,
+              y: getY,
+              yScale,
+              curve: curveMonotoneX,
+              fill: `url(#area-gradient-${i})`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            LinePath,
+            {
+              data: s.data,
+              x: getX,
+              y: getY,
+              stroke: color,
+              strokeWidth: 2,
+              curve: curveMonotoneX
+            }
+          ),
+          s.data.map((d, j) => /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: getX(d),
+              cy: getY(d),
+              r: 2.5,
+              fill: "white",
+              stroke: color,
+              strokeWidth: 1.5
+            },
+            `point-${i}-${j}`
+          ))
+        ] }, `series-${i}`);
+      }),
+      /* @__PURE__ */ jsx(
+        AxisBottom,
+        {
+          top: innerHeight,
+          scale: xScale,
+          tickLabelProps: () => ({
+            fill: "currentColor",
+            fontSize: 10,
+            textAnchor: "middle",
+            className: "text-gray-500 dark:text-gray-400"
+          }),
+          hideAxisLine: true,
+          tickStroke: "transparent"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AxisLeft,
+        {
+          scale: yScale,
+          numTicks: 4,
+          tickLabelProps: () => ({
+            fill: "currentColor",
+            fontSize: 10,
+            textAnchor: "end",
+            dx: -4,
+            dy: 4,
+            className: "text-gray-500 dark:text-gray-400"
+          }),
+          hideAxisLine: true,
+          tickStroke: "transparent"
+        }
+      )
+    ] })
+  ] });
+};
+var BarChart = ({ data, width, height, color = "#3b82f6" }) => {
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+  const xScale = useMemo(
+    () => scaleBand({
+      domain: data.map((d) => d.label),
+      range: [0, innerWidth],
+      padding: 0.3
+    }),
+    [data, innerWidth]
+  );
+  const yScale = useMemo(() => {
+    const maxValue = Math.max(...data.map((d) => d.value));
+    return scaleLinear({
+      domain: [0, maxValue * 1.1],
+      range: [innerHeight, 0],
+      nice: true
+    });
+  }, [data, innerHeight]);
+  if (width < 100 || height < 80) return null;
+  return /* @__PURE__ */ jsx("svg", { width, height, children: /* @__PURE__ */ jsxs(Group, { left: margin.left, top: margin.top, children: [
+    /* @__PURE__ */ jsx(
+      GridRows,
+      {
+        scale: yScale,
+        width: innerWidth,
+        strokeDasharray: "3,3",
+        stroke: "currentColor",
+        strokeOpacity: 0.1,
+        className: "text-gray-400 dark:text-neutral-600"
+      }
+    ),
+    data.map((d, i) => {
+      const barWidth = xScale.bandwidth();
+      const barHeight = innerHeight - yScale(d.value);
+      const barX = xScale(d.label) || 0;
+      const barY = yScale(d.value);
+      return /* @__PURE__ */ jsx(
+        Bar,
+        {
+          x: barX,
+          y: barY,
+          width: barWidth,
+          height: barHeight,
+          fill: d.color || color,
+          rx: 4,
+          className: "transition-opacity hover:opacity-80"
+        },
+        `bar-${i}`
+      );
+    }),
+    /* @__PURE__ */ jsx(
+      AxisBottom,
+      {
+        top: innerHeight,
+        scale: xScale,
+        tickLabelProps: () => ({
+          fill: "currentColor",
+          fontSize: 10,
+          textAnchor: "middle",
+          className: "text-gray-500 dark:text-gray-400"
+        }),
+        hideAxisLine: true,
+        tickStroke: "transparent"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AxisLeft,
+      {
+        scale: yScale,
+        numTicks: 4,
+        tickLabelProps: () => ({
+          fill: "currentColor",
+          fontSize: 10,
+          textAnchor: "end",
+          dx: -4,
+          dy: 4,
+          className: "text-gray-500 dark:text-gray-400"
+        }),
+        hideAxisLine: true,
+        tickStroke: "transparent"
+      }
+    )
+  ] }) });
+};
+var horizontalMargin = { top: 10, right: 20, bottom: 10, left: 80 };
+var HorizontalBarChart = ({ data, width, height, color = "#3b82f6" }) => {
+  const innerWidth = width - horizontalMargin.left - horizontalMargin.right;
+  const innerHeight = height - horizontalMargin.top - horizontalMargin.bottom;
+  const yScale = useMemo(
+    () => scaleBand({
+      domain: data.map((d) => d.label),
+      range: [0, innerHeight],
+      padding: 0.3
+    }),
+    [data, innerHeight]
+  );
+  const xScale = useMemo(() => {
+    const maxValue = Math.max(...data.map((d) => d.value));
+    return scaleLinear({
+      domain: [0, maxValue * 1.1],
+      range: [0, innerWidth],
+      nice: true
+    });
+  }, [data, innerWidth]);
+  if (width < 100 || height < 80) return null;
+  return /* @__PURE__ */ jsx("svg", { width, height, children: /* @__PURE__ */ jsxs(Group, { left: horizontalMargin.left, top: horizontalMargin.top, children: [
+    xScale.ticks(4).map((tick, i) => /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: xScale(tick),
+        x2: xScale(tick),
+        y1: 0,
+        y2: innerHeight,
+        stroke: "currentColor",
+        strokeOpacity: 0.1,
+        strokeDasharray: "3,3",
+        className: "text-gray-400 dark:text-neutral-600"
+      },
+      `grid-${i}`
+    )),
+    data.map((d, i) => {
+      const barHeight = yScale.bandwidth();
+      const barWidth = xScale(d.value);
+      const barY = yScale(d.label) || 0;
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          Bar,
+          {
+            x: 0,
+            y: barY,
+            width: barWidth,
+            height: barHeight,
+            fill: d.color || color,
+            rx: 4,
+            className: "transition-opacity hover:opacity-80"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: barWidth + 6,
+            y: barY + barHeight / 2,
+            dy: ".35em",
+            fill: "currentColor",
+            fontSize: 10,
+            className: "text-gray-600 dark:text-gray-400",
+            children: d.value.toLocaleString()
+          }
+        )
+      ] }, `bar-${i}`);
+    }),
+    data.map((d, i) => /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: -8,
+        y: (yScale(d.label) || 0) + yScale.bandwidth() / 2,
+        dy: ".35em",
+        fill: "currentColor",
+        fontSize: 10,
+        textAnchor: "end",
+        className: "text-gray-500 dark:text-gray-400",
+        children: d.label
+      },
+      `label-${i}`
+    ))
+  ] }) });
+};
+var ChartRenderer = forwardRef(
+  ({ config, height, showLegend = true, className }, ref) => {
+    const total = useMemo(() => {
+      if (config.type === "donut") {
+        return config.data.reduce((sum, d) => sum + d.value, 0);
+      }
+      return 0;
+    }, [config]);
+    const fillMode = height === void 0;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col", fillMode && "flex-1 min-h-0", className), children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("w-full", fillMode && "flex-1 min-h-0"),
+          style: height !== void 0 ? { height } : void 0,
+          children: /* @__PURE__ */ jsx(ParentSize, { children: ({ width, height: h }) => {
+            switch (config.type) {
+              case "donut":
+                return /* @__PURE__ */ jsx(
+                  DonutChart,
+                  {
+                    data: config.data,
+                    width,
+                    height: h,
+                    centerLabel: config.centerLabel,
+                    centerValue: config.centerValue
+                  }
+                );
+              case "line":
+                return /* @__PURE__ */ jsx(
+                  LineChart,
+                  {
+                    data: config.data,
+                    width,
+                    height: h,
+                    color: config.color,
+                    showArea: config.showArea
+                  }
+                );
+              case "line-multi":
+                return /* @__PURE__ */ jsx(
+                  MultiLineChart,
+                  {
+                    series: config.series,
+                    width,
+                    height: h,
+                    showArea: config.showArea
+                  }
+                );
+              case "bar":
+                return /* @__PURE__ */ jsx(BarChart, { data: config.data, width, height: h, color: config.color });
+              case "bar-horizontal":
+                return /* @__PURE__ */ jsx(HorizontalBarChart, { data: config.data, width, height: h, color: config.color });
+              default:
+                return null;
+            }
+          } })
+        }
+      ),
+      showLegend && config.type === "donut" && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-x-4 gap-y-2 mt-3", children: config.data.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "w-2.5 h-2.5 rounded-full",
+            style: { backgroundColor: item.color || defaultColors[index % defaultColors.length] }
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { as: "span", size: "xs", color: "muted", children: item.label }),
+        /* @__PURE__ */ jsxs(Text, { as: "span", size: "xs", weight: "medium", className: "text-gray-700 dark:text-gray-300", children: [
+          (item.value / total * 100).toFixed(0),
+          "%"
+        ] })
+      ] }, item.label)) }),
+      showLegend && config.type === "line-multi" && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-x-4 gap-y-2 mt-3", children: config.series.map((s, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "w-2.5 h-2.5 rounded-full",
+            style: { backgroundColor: s.color || defaultColors[index % defaultColors.length] }
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { as: "span", size: "xs", color: "muted", children: s.name })
+      ] }, s.name)) })
+    ] });
+  }
+);
+ChartRenderer.displayName = "ChartRenderer";
+var CompactPanel = forwardRef(
+  (props, ref) => {
+    const { className, title, fillHeight = true, headerControls, lastUpdated } = props;
+    const isChartMode = props.mode === "chart";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          fillHeight && "h-full",
+          "rounded-hz-lg bg-white dark:bg-neutral-900",
+          "border border-gray-200 dark:border-neutral-800",
+          "p-4 shadow-sm flex flex-col",
+          className
+        ),
+        children: [
+          (title || headerControls || lastUpdated) && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2 mb-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              title && /* @__PURE__ */ jsx(
+                Text,
+                {
+                  as: "span",
+                  size: "xs",
+                  weight: "medium",
+                  color: "muted",
+                  children: title
+                }
+              ),
+              lastUpdated && /* @__PURE__ */ jsxs(Text, { as: "span", size: "xs", className: "text-gray-400 dark:text-gray-500", children: [
+                "\xB7 ",
+                lastUpdated
+              ] })
+            ] }),
+            headerControls && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 -mt-1 -mr-1", children: headerControls })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: cn(
+            "flex-1 flex flex-col min-h-0",
+            isChartMode ? "justify-center" : "justify-end"
+          ), children: isChartMode ? /* @__PURE__ */ jsx(ChartRenderer, { config: props.chart, showLegend: false, className: "flex-1" }) : /* @__PURE__ */ jsx(
+            StatDisplay,
+            {
+              data: {
+                value: props.value,
+                label: props.label || "",
+                prefix: props.prefix,
+                suffix: props.suffix,
+                trend: props.trend
+              },
+              size: "sm"
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+CompactPanel.displayName = "CompactPanel";
+var TrendIndicator = ({ trend }) => {
+  const Icon = trend.direction === "up" ? TrendingUp : trend.direction === "down" ? TrendingDown : Minus;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1",
+        trend.direction === "up" && "text-emerald-600 dark:text-emerald-400",
+        trend.direction === "down" && "text-rose-600 dark:text-rose-400",
+        trend.direction === "neutral" && "text-gray-500 dark:text-gray-400"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold", children: [
+          Math.abs(trend.value).toFixed(1),
+          "%"
+        ] })
+      ]
+    }
+  );
+};
+var isTableCellValue = (value) => {
+  return typeof value === "object" && value !== null && "value" in value;
+};
+var formatValue = (value) => {
+  if (typeof value === "number") {
+    return value.toLocaleString("en-US", {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2
+    });
+  }
+  return value;
+};
+var renderCellContent = (cellValue, align) => {
+  if (cellValue === void 0 || cellValue === null) {
+    return /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "\u2014" });
+  }
+  if (isTableCellValue(cellValue)) {
+    const { value, trend, prefix = "", suffix = "", image } = cellValue;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-2",
+          align === "right" && "justify-end",
+          align === "center" && "justify-center"
+        ),
+        children: [
+          image && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: image,
+              alt: "",
+              className: "w-8 h-8 rounded-hz-md object-contain flex-shrink-0"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { children: [
+            prefix,
+            formatValue(value),
+            suffix
+          ] }),
+          trend && /* @__PURE__ */ jsx(TrendIndicator, { trend })
+        ]
+      }
+    );
+  }
+  return formatValue(cellValue);
+};
+var TableRenderer = forwardRef(
+  ({ config, className }, ref) => {
+    const { columns, data, striped = false, compact = false, maxRows, pagination } = config;
+    const displayData = useMemo(() => {
+      if (maxRows && maxRows > 0) {
+        return data.slice(0, maxRows);
+      }
+      return data;
+    }, [data, maxRows]);
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("h-full flex flex-col", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-x-auto", children: [
+        /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b border-gray-200 dark:border-neutral-700", children: columns.map((column) => /* @__PURE__ */ jsx(
+            "th",
+            {
+              className: cn(
+                "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider",
+                "border-r border-gray-200 dark:border-neutral-700 last:border-r-0",
+                compact ? "py-2 px-3" : "py-3 px-4",
+                column.align === "center" && "text-center",
+                column.align === "right" && "text-right",
+                (!column.align || column.align === "left") && "text-left"
+              ),
+              style: column.width ? { width: column.width } : void 0,
+              children: column.label
+            },
+            column.key
+          )) }) }),
+          /* @__PURE__ */ jsx("tbody", { children: displayData.map((row, rowIndex) => /* @__PURE__ */ jsx(
+            "tr",
+            {
+              className: cn(
+                "border-b border-gray-100 dark:border-neutral-800 last:border-0",
+                striped && rowIndex % 2 === 1 && "bg-gray-50 dark:bg-neutral-800/50"
+              ),
+              children: columns.map((column) => /* @__PURE__ */ jsx(
+                "td",
+                {
+                  className: cn(
+                    "text-gray-900 dark:text-gray-100",
+                    "border-r border-gray-200 dark:border-neutral-700 last:border-r-0",
+                    compact ? "py-2 px-3" : "py-3 px-4",
+                    column.align === "center" && "text-center",
+                    column.align === "right" && "text-right",
+                    (!column.align || column.align === "left") && "text-left"
+                  ),
+                  children: renderCellContent(row[column.key], column.align)
+                },
+                `${row.id}-${column.key}`
+              ))
+            },
+            row.id
+          )) })
+        ] }),
+        displayData.length === 0 && /* @__PURE__ */ jsx("div", { className: "py-8 text-center text-gray-500 dark:text-gray-400 text-sm", children: "No data available" })
+      ] }),
+      pagination && /* @__PURE__ */ jsxs("footer", { className: "flex items-center justify-between px-4 py-3 bg-gray-50 dark:bg-neutral-800/50 border-t border-gray-200 dark:border-neutral-700 rounded-b-hz-lg", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400", children: [
+          pagination.totalItems !== void 0 && pagination.pageSize !== void 0 ? /* @__PURE__ */ jsxs("span", { children: [
+            "Showing ",
+            Math.min((pagination.currentPage - 1) * pagination.pageSize + 1, pagination.totalItems),
+            "\u2013",
+            Math.min(pagination.currentPage * pagination.pageSize, pagination.totalItems),
+            " of ",
+            pagination.totalItems
+          ] }) : /* @__PURE__ */ jsxs("span", { children: [
+            "Page ",
+            pagination.currentPage,
+            " of ",
+            pagination.totalPages
+          ] }),
+          pagination.lastUpdated && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-gray-300 dark:text-gray-600", children: "\xB7" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Updated ",
+              pagination.lastUpdated
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => pagination.onPageChange(pagination.currentPage - 1),
+              disabled: pagination.currentPage <= 1,
+              className: cn(
+                "p-1.5 rounded-hz-md transition-colors",
+                pagination.currentPage <= 1 ? "text-gray-300 dark:text-gray-600 cursor-not-allowed" : "text-gray-500 hover:text-gray-700 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-neutral-700"
+              ),
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-4 h-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => pagination.onPageChange(pagination.currentPage + 1),
+              disabled: pagination.currentPage >= pagination.totalPages,
+              className: cn(
+                "p-1.5 rounded-hz-md transition-colors",
+                pagination.currentPage >= pagination.totalPages ? "text-gray-300 dark:text-gray-600 cursor-not-allowed" : "text-gray-500 hover:text-gray-700 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-neutral-700"
+              ),
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" })
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+);
+TableRenderer.displayName = "TableRenderer";
+var MediumPanelContext = createContext({ inPanel: false });
+var MediumPanelStat = forwardRef(
+  ({ data, className }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("px-5 pt-4", className), children: /* @__PURE__ */ jsx(StatDisplay, { data, size: "md" }) });
+  }
+);
+MediumPanelStat.displayName = "MediumPanel.Stat";
+var MediumPanelChart = forwardRef(
+  ({ config, className }, ref) => {
+    return /* @__PURE__ */ jsx(ChartRenderer, { ref, config, className: cn("flex-1 px-5 pt-4", className) });
+  }
+);
+MediumPanelChart.displayName = "MediumPanel.Chart";
+var MediumPanelTable = forwardRef(
+  ({ config, className }, ref) => {
+    return /* @__PURE__ */ jsx(
+      TableRenderer,
+      {
+        ref,
+        config: { ...config, compact: true },
+        className: cn("flex-1", className)
+      }
+    );
+  }
+);
+MediumPanelTable.displayName = "MediumPanel.Table";
+var MediumPanelBase = forwardRef(
+  ({ title, subtitle, stat, chart, children, className, fillHeight = true, headerControls, lastUpdated }, ref) => {
+    const hasPropsContent = stat || chart;
+    const hasChildren = !!children;
+    return /* @__PURE__ */ jsx(MediumPanelContext.Provider, { value: { inPanel: true }, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          fillHeight && "h-full",
+          "rounded-hz-lg bg-white dark:bg-neutral-900",
+          "border border-gray-200 dark:border-neutral-800",
+          "shadow-sm flex flex-col",
+          className
+        ),
+        children: [
+          (title || subtitle || headerControls || lastUpdated) && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2 px-5 py-4", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  title && /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      as: "span",
+                      weight: "semibold",
+                      size: "sm",
+                      className: "text-gray-900 dark:text-gray-100",
+                      children: title
+                    }
+                  ),
+                  lastUpdated && /* @__PURE__ */ jsxs(Text, { as: "span", size: "xs", className: "text-gray-400 dark:text-gray-500", children: [
+                    "\xB7 ",
+                    lastUpdated
+                  ] })
+                ] }),
+                subtitle && /* @__PURE__ */ jsx(Text, { as: "p", size: "xs", color: "muted", className: "mt-0.5", children: subtitle })
+              ] }),
+              headerControls && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: headerControls })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "border-b border-gray-200 dark:border-neutral-800" })
+          ] }),
+          hasPropsContent && !hasChildren && /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-4 min-h-0 px-5 py-4", children: [
+            stat && /* @__PURE__ */ jsx(StatDisplay, { data: stat, size: "md" }),
+            chart && /* @__PURE__ */ jsx(ChartRenderer, { config: chart })
+          ] }),
+          hasChildren && /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col min-h-0", children })
+        ]
+      }
+    ) });
+  }
+);
+MediumPanelBase.displayName = "MediumPanel";
+var MediumPanel = MediumPanelBase;
+MediumPanel.Stat = MediumPanelStat;
+MediumPanel.Chart = MediumPanelChart;
+MediumPanel.Table = MediumPanelTable;
+var LargePanelContext = createContext({ inPanel: false });
+var LargePanelHeader = forwardRef(
+  ({ children, className }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), children });
+  }
+);
+LargePanelHeader.displayName = "LargePanel.Header";
+var LargePanelStats = forwardRef(
+  ({ data, columns = 3, className }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "grid gap-4 px-6 pt-4",
+          columns === 2 && "grid-cols-2",
+          columns === 3 && "grid-cols-3",
+          columns === 4 && "grid-cols-4",
+          className
+        ),
+        children: data.map((stat, index) => /* @__PURE__ */ jsx(StatDisplay, { data: stat, size: "sm" }, index))
+      }
+    );
+  }
+);
+LargePanelStats.displayName = "LargePanel.Stats";
+var LargePanelChart = forwardRef(
+  ({ config, height, className }, ref) => {
+    return /* @__PURE__ */ jsx(ChartRenderer, { ref, config, height, className: cn("flex-1 min-h-0 px-6 pt-4", className) });
+  }
+);
+LargePanelChart.displayName = "LargePanel.Chart";
+var LargePanelContent = forwardRef(
+  ({ children, className }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("px-6", className), children });
+  }
+);
+LargePanelContent.displayName = "LargePanel.Content";
+var LargePanelTable = forwardRef(
+  ({ config, className }, ref) => {
+    return /* @__PURE__ */ jsx(TableRenderer, { ref, config, className: cn("flex-1 min-h-0", className) });
+  }
+);
+LargePanelTable.displayName = "LargePanel.Table";
+var LargePanelBase = forwardRef(
+  ({ title, subtitle, children, className, fillHeight = true, headerControls, lastUpdated }, ref) => {
+    return /* @__PURE__ */ jsx(LargePanelContext.Provider, { value: { inPanel: true }, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          fillHeight && "h-full",
+          "rounded-hz-lg bg-white dark:bg-neutral-900",
+          "border border-gray-200 dark:border-neutral-800",
+          "shadow-sm flex flex-col",
+          className
+        ),
+        children: [
+          (title || subtitle || headerControls || lastUpdated) && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2 px-6 py-4", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  title && /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      as: "span",
+                      weight: "semibold",
+                      size: "sm",
+                      className: "text-gray-900 dark:text-gray-100",
+                      children: title
+                    }
+                  ),
+                  lastUpdated && /* @__PURE__ */ jsxs(Text, { as: "span", size: "xs", className: "text-gray-400 dark:text-gray-500", children: [
+                    "\xB7 ",
+                    lastUpdated
+                  ] })
+                ] }),
+                subtitle && /* @__PURE__ */ jsx(Text, { as: "p", size: "xs", color: "muted", className: "mt-0.5", children: subtitle })
+              ] }),
+              headerControls && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: headerControls })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "border-b border-gray-200 dark:border-neutral-800" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col min-h-0", children })
+        ]
+      }
+    ) });
+  }
+);
+LargePanelBase.displayName = "LargePanel";
+var LargePanel = LargePanelBase;
+LargePanel.Header = LargePanelHeader;
+LargePanel.Stats = LargePanelStats;
+LargePanel.Chart = LargePanelChart;
+LargePanel.Content = LargePanelContent;
+LargePanel.Table = LargePanelTable;
 var Input = forwardRef(
   ({
     label,
@@ -1329,6 +2532,6 @@ var SideNavFooter = forwardRef(
 );
 SideNavFooter.displayName = "SideNavFooter";
 
-export { AnimatedButton, Input, SideNav, SideNavFooter, SideNavHeader, SideNavItem, SideNavSection, TemplateSelector, TextButton, Toast, useSideNavContext };
-//# sourceMappingURL=chunk-MEJ3HYYK.mjs.map
-//# sourceMappingURL=chunk-MEJ3HYYK.mjs.map
+export { AnimatedButton, ChartRenderer, CompactPanel, Dashboard, DashboardPanel, Input, LargePanel, MediumPanel, SideNav, SideNavFooter, SideNavHeader, SideNavItem, SideNavSection, StatDisplay, TableRenderer, TemplateSelector, TextButton, Toast, useDashboardContext, useSideNavContext };
+//# sourceMappingURL=chunk-EBJJNTPC.mjs.map
+//# sourceMappingURL=chunk-EBJJNTPC.mjs.map