@arqel-dev/ui 0.10.1 → 0.13.0

package/dist/widgets.js

@@ -1,677 +1,5 @@
-import { ResponsiveContainer, LineChart as LineChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Line, BarChart as BarChart$1, Bar, AreaChart as AreaChart$1, Area, PieChart as PieChart$1, Pie, Cell, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar } from 'recharts';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { lazy, Suspense, useState, useRef, useEffect } from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-
-// src/widgets/types.ts
-function toRowShape(data) {
-  return data.labels.map((label, i) => {
-    const row = { name: label };
-    data.datasets.forEach((ds, j) => {
-      row[`dataset${j}`] = ds.data[i] ?? 0;
-    });
-    return row;
-  });
-}
-function colorFor(dataset, index) {
-  return dataset.color ?? PALETTE[index % PALETTE.length] ?? "#2563eb";
-}
-var PALETTE;
-var init_types = __esm({
-  "src/widgets/types.ts"() {
-    PALETTE = [
-      "#2563eb",
-      "#10b981",
-      "#f59e0b",
-      "#ef4444",
-      "#8b5cf6",
-      "#ec4899",
-      "#14b8a6",
-      "#f97316"
-    ];
-  }
-});
-
-// src/widgets/charts/LineChart.tsx
-var LineChart_exports = {};
-__export(LineChart_exports, {
-  LineChart: () => LineChart
-});
-function LineChart({ chartData, height, showLegend, showGrid }) {
-  const rows = toRowShape(chartData);
-  return /* @__PURE__ */ jsx("div", { "data-testid": "chart-line", style: { width: "100%", height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart$1, { data: rows, children: [
-    showGrid ? /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }) : null,
-    /* @__PURE__ */ jsx(XAxis, { dataKey: "name" }),
-    /* @__PURE__ */ jsx(YAxis, {}),
-    /* @__PURE__ */ jsx(Tooltip, {}),
-    showLegend ? /* @__PURE__ */ jsx(Legend, {}) : null,
-    chartData.datasets.map((ds, i) => /* @__PURE__ */ jsx(
-      Line,
-      {
-        type: "monotone",
-        dataKey: `dataset${i}`,
-        name: ds.label,
-        stroke: colorFor(ds, i),
-        strokeWidth: 2,
-        dot: false
-      },
-      ds.label
-    ))
-  ] }) }) });
-}
-var init_LineChart = __esm({
-  "src/widgets/charts/LineChart.tsx"() {
-    init_types();
-  }
-});
-
-// src/widgets/charts/BarChart.tsx
-var BarChart_exports = {};
-__export(BarChart_exports, {
-  BarChart: () => BarChart
-});
-function BarChart({ chartData, height, showLegend, showGrid }) {
-  const rows = toRowShape(chartData);
-  return /* @__PURE__ */ jsx("div", { "data-testid": "chart-bar", style: { width: "100%", height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart$1, { data: rows, children: [
-    showGrid ? /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }) : null,
-    /* @__PURE__ */ jsx(XAxis, { dataKey: "name" }),
-    /* @__PURE__ */ jsx(YAxis, {}),
-    /* @__PURE__ */ jsx(Tooltip, {}),
-    showLegend ? /* @__PURE__ */ jsx(Legend, {}) : null,
-    chartData.datasets.map((ds, i) => /* @__PURE__ */ jsx(Bar, { dataKey: `dataset${i}`, name: ds.label, fill: colorFor(ds, i) }, ds.label))
-  ] }) }) });
-}
-var init_BarChart = __esm({
-  "src/widgets/charts/BarChart.tsx"() {
-    init_types();
-  }
-});
-
-// src/widgets/charts/AreaChart.tsx
-var AreaChart_exports = {};
-__export(AreaChart_exports, {
-  AreaChart: () => AreaChart
-});
-function AreaChart({ chartData, height, showLegend, showGrid }) {
-  const rows = toRowShape(chartData);
-  return /* @__PURE__ */ jsx("div", { "data-testid": "chart-area", style: { width: "100%", height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart$1, { data: rows, children: [
-    showGrid ? /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }) : null,
-    /* @__PURE__ */ jsx(XAxis, { dataKey: "name" }),
-    /* @__PURE__ */ jsx(YAxis, {}),
-    /* @__PURE__ */ jsx(Tooltip, {}),
-    showLegend ? /* @__PURE__ */ jsx(Legend, {}) : null,
-    chartData.datasets.map((ds, i) => {
-      const color = colorFor(ds, i);
-      return /* @__PURE__ */ jsx(
-        Area,
-        {
-          type: "monotone",
-          dataKey: `dataset${i}`,
-          name: ds.label,
-          stroke: color,
-          fill: color,
-          fillOpacity: 0.3
-        },
-        ds.label
-      );
-    })
-  ] }) }) });
-}
-var init_AreaChart = __esm({
-  "src/widgets/charts/AreaChart.tsx"() {
-    init_types();
-  }
-});
-
-// src/widgets/charts/PieChart.tsx
-var PieChart_exports = {};
-__export(PieChart_exports, {
-  PieChart: () => PieChart
-});
-function PieChart({
-  chartData,
-  height,
-  showLegend,
-  innerRadius = 0,
-  testId = "chart-pie"
-}) {
-  const first = chartData.datasets[0];
-  const slices = (first?.data ?? []).map((value, i) => ({
-    name: chartData.labels[i] ?? `Slice ${i + 1}`,
-    value
-  }));
-  return /* @__PURE__ */ jsx("div", { "data-testid": testId, style: { width: "100%", height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart$1, { children: [
-    /* @__PURE__ */ jsx(
-      Pie,
-      {
-        data: slices,
-        dataKey: "value",
-        nameKey: "name",
-        innerRadius,
-        outerRadius: "80%",
-        label: true,
-        children: slices.map((slice, i) => /* @__PURE__ */ jsx(Cell, { fill: colorFor(first ?? { }, i) }, slice.name))
-      }
-    ),
-    /* @__PURE__ */ jsx(Tooltip, {}),
-    showLegend ? /* @__PURE__ */ jsx(Legend, {}) : null
-  ] }) }) });
-}
-var init_PieChart = __esm({
-  "src/widgets/charts/PieChart.tsx"() {
-    init_types();
-  }
-});
-
-// src/widgets/charts/DonutChart.tsx
-var DonutChart_exports = {};
-__export(DonutChart_exports, {
-  DonutChart: () => DonutChart
-});
-function DonutChart(props) {
-  return /* @__PURE__ */ jsx(PieChart, { ...props, innerRadius: 60, testId: "chart-donut" });
-}
-var init_DonutChart = __esm({
-  "src/widgets/charts/DonutChart.tsx"() {
-    init_PieChart();
-  }
-});
-
-// src/widgets/charts/RadarChart.tsx
-var RadarChart_exports = {};
-__export(RadarChart_exports, {
-  RadarChart: () => RadarChart
-});
-function RadarChart({ chartData, height, showLegend, showGrid }) {
-  const rows = toRowShape(chartData);
-  return /* @__PURE__ */ jsx("div", { "data-testid": "chart-radar", style: { width: "100%", height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(RadarChart$1, { data: rows, children: [
-    showGrid ? /* @__PURE__ */ jsx(PolarGrid, {}) : null,
-    /* @__PURE__ */ jsx(PolarAngleAxis, { dataKey: "name" }),
-    /* @__PURE__ */ jsx(PolarRadiusAxis, {}),
-    chartData.datasets.map((ds, i) => {
-      const color = colorFor(ds, i);
-      return /* @__PURE__ */ jsx(
-        Radar,
-        {
-          dataKey: `dataset${i}`,
-          name: ds.label,
-          stroke: color,
-          fill: color,
-          fillOpacity: 0.3
-        },
-        ds.label
-      );
-    }),
-    /* @__PURE__ */ jsx(Tooltip, {}),
-    showLegend ? /* @__PURE__ */ jsx(Legend, {}) : null
-  ] }) }) });
-}
-var init_RadarChart = __esm({
-  "src/widgets/charts/RadarChart.tsx"() {
-    init_types();
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-function resolveColumnSpan(columnSpan) {
-  if (columnSpan === void 0) return void 0;
-  if (typeof columnSpan === "number") return `col-span-${columnSpan}`;
-  return columnSpan;
-}
-function WidgetWrapper({
-  heading,
-  description,
-  loading = false,
-  error = null,
-  onRetry,
-  columnSpan,
-  className,
-  children
-}) {
-  const baseClass = cn(
-    "rounded border bg-background p-4",
-    resolveColumnSpan(columnSpan),
-    className
-  );
-  if (loading) {
-    return /* @__PURE__ */ jsx(
-      "section",
-      {
-        "aria-label": heading,
-        "aria-busy": "true",
-        className: baseClass,
-        "data-widget-state": "loading",
-        children: /* @__PURE__ */ jsx("div", { className: "animate-pulse h-32 bg-muted rounded" })
-      }
-    );
-  }
-  if (error) {
-    return /* @__PURE__ */ jsx("section", { "aria-label": heading, className: baseClass, "data-widget-state": "error", children: /* @__PURE__ */ jsxs("div", { role: "alert", className: "flex flex-col gap-2 text-sm text-destructive", children: [
-      /* @__PURE__ */ jsx("p", { children: error.message }),
-      onRetry && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onRetry,
-          className: "self-start rounded border px-2 py-1 text-xs text-foreground hover:bg-muted",
-          children: "Retry"
-        }
-      )
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxs("section", { "aria-label": heading, className: baseClass, "data-widget-state": "ready", children: [
-    heading && /* @__PURE__ */ jsx("h2", { className: "text-sm font-medium text-muted-foreground", children: heading }),
-    description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: description }),
-    /* @__PURE__ */ jsx("div", { className: cn(heading || description ? "mt-3" : void 0), children })
-  ] });
-}
-var LineChart2 = lazy(() => Promise.resolve().then(() => (init_LineChart(), LineChart_exports)).then((m) => ({ default: m.LineChart })));
-var BarChart2 = lazy(() => Promise.resolve().then(() => (init_BarChart(), BarChart_exports)).then((m) => ({ default: m.BarChart })));
-var AreaChart2 = lazy(() => Promise.resolve().then(() => (init_AreaChart(), AreaChart_exports)).then((m) => ({ default: m.AreaChart })));
-var PieChart2 = lazy(() => Promise.resolve().then(() => (init_PieChart(), PieChart_exports)).then((m) => ({ default: m.PieChart })));
-var DonutChart2 = lazy(
-  () => Promise.resolve().then(() => (init_DonutChart(), DonutChart_exports)).then((m) => ({ default: m.DonutChart }))
-);
-var RadarChart2 = lazy(
-  () => Promise.resolve().then(() => (init_RadarChart(), RadarChart_exports)).then((m) => ({ default: m.RadarChart }))
-);
-var REGISTRY = {
-  line: LineChart2,
-  bar: BarChart2,
-  area: AreaChart2,
-  pie: PieChart2,
-  donut: DonutChart2,
-  radar: RadarChart2
-};
-function ChartCard({ widget }) {
-  const Chart = REGISTRY[widget.chartType] ?? LineChart2;
-  return /* @__PURE__ */ jsx(WidgetWrapper, { heading: widget.heading, description: widget.description, children: /* @__PURE__ */ jsx(
-    Suspense,
-    {
-      fallback: /* @__PURE__ */ jsx(
-        "div",
-        {
-          role: "status",
-          "aria-label": "Loading chart",
-          "data-testid": "chart-fallback",
-          className: "animate-pulse rounded bg-muted",
-          style: { height: widget.height }
-        }
-      ),
-      children: /* @__PURE__ */ jsx(
-        Chart,
-        {
-          chartData: widget.chartData,
-          chartOptions: widget.chartOptions,
-          height: widget.height,
-          showLegend: widget.showLegend,
-          showGrid: widget.showGrid
-        }
-      )
-    }
-  ) });
-}
-function DashboardFilters({ filters, values, onChange, className }) {
-  if (!filters || filters.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-2", className), "data-testid": "dashboard-filters", children: filters.map((filter) => /* @__PURE__ */ jsx(
-    FilterControl,
-    {
-      filter,
-      value: values[filter.name],
-      onChange: (v) => onChange(filter.name, v)
-    },
-    filter.name
-  )) });
-}
-function FilterControl({
-  filter,
-  value,
-  onChange
-}) {
-  if (filter.type === "select") {
-    return /* @__PURE__ */ jsx(SelectControl, { filter, value, onChange });
-  }
-  if (filter.type === "date_range") {
-    return /* @__PURE__ */ jsx(
-      DateRangeControl,
-      {
-        filter,
-        value,
-        onChange
-      }
-    );
-  }
-  return null;
-}
-function controlClasses() {
-  return cn(
-    "h-9 rounded-sm border border-[var(--input)]",
-    "bg-background px-2 text-sm",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-  );
-}
-function normaliseOptions(raw) {
-  if (!raw) return [];
-  if (Array.isArray(raw)) {
-    return raw.map((o) => ({ value: String(o.value), label: String(o.label ?? o.value) }));
-  }
-  return Object.entries(raw).map(([k, v]) => ({ value: String(k), label: String(v) }));
-}
-function SelectControl({
-  filter,
-  value,
-  onChange
-}) {
-  const options = normaliseOptions(filter.options);
-  return /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: [
-    filter.label ?? filter.name,
-    /* @__PURE__ */ jsxs(
-      "select",
-      {
-        "aria-label": filter.label ?? filter.name,
-        className: controlClasses(),
-        value: value === void 0 || value === null ? "" : String(value),
-        onChange: (e) => onChange(e.target.value === "" ? null : e.target.value),
-        children: [
-          /* @__PURE__ */ jsx("option", { value: "", children: "All" }),
-          options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
-        ]
-      }
-    )
-  ] });
-}
-function DateRangeControl({
-  filter,
-  value,
-  onChange
-}) {
-  const range = value && typeof value === "object" ? value : {};
-  const fromValue = typeof range.from === "string" ? range.from : "";
-  const toValue = typeof range.to === "string" ? range.to : "";
-  return /* @__PURE__ */ jsxs("fieldset", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: [
-    /* @__PURE__ */ jsx("legend", { children: filter.label ?? filter.name }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "date",
-          "aria-label": `${filter.label ?? filter.name} from`,
-          className: controlClasses(),
-          value: fromValue,
-          onChange: (e) => onChange({ from: e.target.value || null, to: range.to ?? null })
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2013" }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "date",
-          "aria-label": `${filter.label ?? filter.name} to`,
-          className: controlClasses(),
-          value: toValue,
-          onChange: (e) => onChange({ from: range.from ?? null, to: e.target.value || null })
-        }
-      )
-    ] })
-  ] });
-}
-var COLOR_TEXT = {
-  primary: "text-primary",
-  secondary: "text-secondary-foreground",
-  success: "text-green-600",
-  warning: "text-amber-600",
-  danger: "text-red-600",
-  info: "text-sky-600"
-};
-var COLOR_STROKE = {
-  primary: "stroke-primary",
-  secondary: "stroke-secondary-foreground",
-  success: "stroke-green-500",
-  warning: "stroke-amber-500",
-  danger: "stroke-red-500",
-  info: "stroke-sky-500"
-};
-function Sparkline({ points, color }) {
-  if (points.length < 2) return null;
-  const min = Math.min(...points);
-  const max = Math.max(...points);
-  const range = max - min || 1;
-  const stepX = 100 / (points.length - 1);
-  const coords = points.map((value, index) => {
-    const x = index * stepX;
-    const y = 30 - (value - min) / range * 30;
-    return `${x.toFixed(2)},${y.toFixed(2)}`;
-  }).join(" ");
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      viewBox: "0 0 100 30",
-      preserveAspectRatio: "none",
-      className: cn("mt-3 h-8 w-full", COLOR_STROKE[color]),
-      role: "img",
-      "aria-label": "Trend sparkline",
-      "data-testid": "stat-card-sparkline",
-      children: /* @__PURE__ */ jsx(
-        "polyline",
-        {
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          points: coords
-        }
-      )
-    }
-  );
-}
-function StatCard({ widget, className, columnSpan }) {
-  const { heading, description, value, statDescription, descriptionIcon, color, chart, url } = widget;
-  const hasChart = Array.isArray(chart) && chart.length >= 2;
-  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: cn("text-4xl font-bold tabular-nums", COLOR_TEXT[color]), children: value ?? "\u2014" }),
-    statDescription && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-1 text-xs text-muted-foreground", children: [
-      descriptionIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-testid": "stat-card-icon", children: descriptionIcon }),
-      /* @__PURE__ */ jsx("span", { children: statDescription })
-    ] }),
-    hasChart && /* @__PURE__ */ jsx(Sparkline, { points: chart, color })
-  ] });
-  const inner = url ? /* @__PURE__ */ jsx(
-    "a",
-    {
-      href: url,
-      className: "block rounded outline-none focus-visible:ring-2 focus-visible:ring-ring",
-      "data-testid": "stat-card-link",
-      children: body
-    }
-  ) : body;
-  return /* @__PURE__ */ jsx(
-    WidgetWrapper,
-    {
-      heading,
-      description,
-      columnSpan,
-      className,
-      children: inner
-    }
-  );
-}
-function TableCard({ widget, className }) {
-  return /* @__PURE__ */ jsx(
-    WidgetWrapper,
-    {
-      heading: widget.heading ?? void 0,
-      description: widget.description ?? void 0,
-      className,
-      children: widget.loadError ? /* @__PURE__ */ jsx("div", { role: "alert", className: "text-sm text-red-600", children: widget.loadError }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: cn("w-full border-collapse text-sm", "text-foreground"), children: [
-          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b border-border text-left", children: widget.columns.map((column) => /* @__PURE__ */ jsx(
-            "th",
-            {
-              scope: "col",
-              className: "px-2 py-1.5 font-medium text-muted-foreground",
-              children: column.label ?? column.name
-            },
-            column.name
-          )) }) }),
-          /* @__PURE__ */ jsx("tbody", { children: widget.records.map((record, rowIndex) => /* @__PURE__ */ jsx(
-            "tr",
-            {
-              className: "border-b border-border last:border-0",
-              children: widget.columns.map((column) => /* @__PURE__ */ jsx("td", { className: "px-2 py-1.5", children: formatCell(record[column.name]) }, column.name))
-            },
-            rowIndex
-          )) })
-        ] }) }),
-        widget.seeAllUrl && /* @__PURE__ */ jsx("div", { className: "mt-3 text-right", children: /* @__PURE__ */ jsx("a", { href: widget.seeAllUrl, className: "text-sm text-primary", children: "See all \u2192" }) })
-      ] })
-    }
-  );
-}
-function formatCell(value) {
-  if (value === null || value === void 0) return "";
-  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
-    return String(value);
-  }
-  try {
-    return JSON.stringify(value);
-  } catch {
-    return "";
-  }
-}
-function WidgetRenderer({ widget, filterValues, fetcher }) {
-  const [data, setData] = useState(widget.data ?? null);
-  const filterRef = useRef(filterValues);
-  filterRef.current = filterValues;
-  const dashboardId = widget.dashboardId;
-  const widgetId = widget.widgetId ?? widget.name;
-  const poll = typeof widget.poll === "number" ? widget.poll : 0;
-  const deferred = widget.deferred === true;
-  const hasInlineDataRef = useRef(widget.data !== null && widget.data !== void 0);
-  useEffect(() => {
-    if (!dashboardId || !widgetId) return void 0;
-    const url = `/admin/dashboards/${dashboardId}/widgets/${widgetId}/data`;
-    const doFetch = async () => {
-      try {
-        const result = fetcher ? await fetcher(url) : await fetch(url, { headers: { Accept: "application/json" } }).then((r) => r.json());
-        setData(result);
-      } catch {
-      }
-    };
-    let interval;
-    if (deferred && !hasInlineDataRef.current) {
-      void doFetch();
-    }
-    if (poll > 0) {
-      interval = setInterval(() => {
-        void doFetch();
-      }, poll * 1e3);
-    }
-    return () => {
-      if (interval) clearInterval(interval);
-    };
-  }, [dashboardId, widgetId, poll, deferred, fetcher]);
-  const merged = mergeData(widget, data);
-  switch (widget.type) {
-    case "stat":
-      return /* @__PURE__ */ jsx(StatCard, { widget: merged });
-    case "chart":
-      return /* @__PURE__ */ jsx(ChartCard, { widget: merged });
-    case "table":
-      return /* @__PURE__ */ jsx(TableCard, { widget: merged });
-    default:
-      return /* @__PURE__ */ jsxs("div", { role: "alert", className: "text-sm text-red-600", children: [
-        "Widget type ",
-        widget.type,
-        " not registered"
-      ] });
-  }
-}
-function mergeData(widget, data) {
-  if (data && typeof data === "object" && !Array.isArray(data)) {
-    return { ...widget, ...data };
-  }
-  return { ...widget, data };
-}
-var BREAKPOINT_PREFIX = {
-  sm: "sm:",
-  md: "md:",
-  lg: "lg:",
-  xl: "xl:",
-  "2xl": "2xl:"
-};
-function DashboardGrid({
-  dashboard,
-  filterValues,
-  onFilterChange,
-  className
-}) {
-  const [internalValues, setInternalValues] = useState(filterValues ?? {});
-  const values = filterValues ?? internalValues;
-  const handleChange = (name, value) => {
-    if (onFilterChange) {
-      onFilterChange(name, value);
-    } else {
-      setInternalValues((prev) => ({ ...prev, [name]: value }));
-    }
-  };
-  const filterPayload = normaliseFilters(dashboard.filters);
-  const heading = dashboard.heading ?? dashboard.label;
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
-    /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-start justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-        heading && /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold", children: heading }),
-        dashboard.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: dashboard.description })
-      ] }),
-      filterPayload.length > 0 && /* @__PURE__ */ jsx(DashboardFilters, { filters: filterPayload, values, onChange: handleChange })
-    ] }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn("grid gap-4", gridColsClass(dashboard.columns)),
-        "data-testid": "dashboard-grid",
-        children: dashboard.widgets.map((widget) => {
-          const rawSpan = widget.columnSpan;
-          const span = typeof rawSpan === "number" ? rawSpan : 1;
-          const style = { gridColumn: `span ${span}` };
-          return /* @__PURE__ */ jsx("div", { style, "data-widget-slot": widget.name, children: /* @__PURE__ */ jsx(WidgetRenderer, { widget, filterValues: values }) }, widget.name);
-        })
-      }
-    )
-  ] });
-}
-function gridColsClass(columns) {
-  if (typeof columns === "number") {
-    return `grid-cols-${Math.max(1, Math.min(12, columns))}`;
-  }
-  const parts = [];
-  parts.push("grid-cols-1");
-  for (const bp of ["sm", "md", "lg", "xl", "2xl"]) {
-    const value = columns[bp];
-    if (typeof value === "number") {
-      parts.push(`${BREAKPOINT_PREFIX[bp]}grid-cols-${Math.max(1, Math.min(12, value))}`);
-    }
-  }
-  return parts.join(" ");
-}
-function normaliseFilters(raw) {
-  if (!raw) return [];
-  if (Array.isArray(raw)) return raw;
-  return [];
-}
-
-export { ChartCard, DashboardFilters, DashboardGrid, StatCard, TableCard, WidgetRenderer, WidgetWrapper };
+export { ChartCard, DashboardFilters, DashboardGrid, TableCard, WidgetRenderer } from './chunk-47HD7ALI.js';
+export { StatCard, WidgetWrapper } from './chunk-WKWV36PG.js';
+import './chunk-B7ULUJVO.js';
 //# sourceMappingURL=widgets.js.map
 //# sourceMappingURL=widgets.js.map