@squadbase/vantage 0.0.1

package/dist/ui/index.js

@@ -0,0 +1,616 @@
+import { forwardRef, createContext, useState, useContext, useMemo, useEffect, useRef } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// @squadbase/vantage — generated build. Do not edit.
+
+// src/ui/cn.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var VARIANTS = {
+  default: "bg-primary text-primary-foreground hover:opacity-90",
+  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  outline: "border border-border bg-background hover:bg-accent hover:text-accent-foreground",
+  ghost: "hover:bg-accent hover:text-accent-foreground",
+  destructive: "bg-destructive text-destructive-foreground hover:opacity-90"
+};
+var SIZES = {
+  sm: "h-8 px-3 text-xs",
+  default: "h-9 px-4 text-sm",
+  lg: "h-10 px-6 text-sm",
+  icon: "h-9 w-9"
+};
+var Button = forwardRef(
+  ({ className, variant = "default", size = "default", type = "button", ...props }, ref) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type,
+      className: cn(
+        "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+        "disabled:pointer-events-none disabled:opacity-50",
+        VARIANTS[variant],
+        SIZES[size],
+        className
+      ),
+      ...props
+    }
+  )
+);
+Button.displayName = "Button";
+var FIELD = "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+var Input = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("input", { ref, className: cn(FIELD, className), ...props })
+);
+Input.displayName = "Input";
+var Select = forwardRef(
+  ({ className, options, children, ...props }, ref) => /* @__PURE__ */ jsx("select", { ref, className: cn(FIELD, "pr-8", className), ...props, children: options ? options.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value)) : children })
+);
+Select.displayName = "Select";
+var Checkbox = forwardRef(
+  ({ className, label, id, ...props }, ref) => /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-2 text-sm", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        id,
+        type: "checkbox",
+        className: cn("h-4 w-4 rounded border-input text-primary focus-visible:ring-2 focus-visible:ring-ring", className),
+        ...props
+      }
+    ),
+    label ? /* @__PURE__ */ jsx("span", { children: label }) : null
+  ] })
+);
+Checkbox.displayName = "Checkbox";
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("rounded-xl border border-border bg-card text-card-foreground shadow-sm", className),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1.5 p-6", className), ...props });
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx("h3", { className: cn("text-base font-semibold leading-none tracking-tight", className), ...props });
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground", className), ...props });
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("p-6 pt-0", className), ...props });
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center p-6 pt-0", className), ...props });
+}
+var Ctx = createContext(null);
+function Tabs({ defaultValue, value, onValueChange, className, children }) {
+  const [internal, setInternal] = useState(defaultValue);
+  const current = value ?? internal;
+  const setValue = (v) => {
+    if (value === void 0) setInternal(v);
+    onValueChange?.(v);
+  };
+  return /* @__PURE__ */ jsx(Ctx.Provider, { value: { value: current, setValue }, children: /* @__PURE__ */ jsx("div", { className, children }) });
+}
+function TabsList({ className, children }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("inline-flex h-9 items-center gap-1 rounded-lg bg-muted p-1 text-muted-foreground", className), children });
+}
+function TabsTrigger({ value, children }) {
+  const ctx = useContext(Ctx);
+  if (!ctx) throw new Error("TabsTrigger must be used within Tabs");
+  const active = ctx.value === value;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => ctx.setValue(value),
+      className: cn(
+        "inline-flex items-center justify-center rounded-md px-3 py-1 text-sm font-medium transition-all",
+        active ? "bg-background text-foreground shadow-sm" : "hover:text-foreground"
+      ),
+      children
+    }
+  );
+}
+function TabsContent({ value, className, children }) {
+  const ctx = useContext(Ctx);
+  if (!ctx) throw new Error("TabsContent must be used within Tabs");
+  if (ctx.value !== value) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("mt-4", className), children });
+}
+function Table({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsx("table", { className: cn("w-full caption-bottom text-sm", className), ...props }) });
+}
+function TableHeader(props) {
+  return /* @__PURE__ */ jsx("thead", { className: "[&_tr]:border-b border-border", ...props });
+}
+function TableBody(props) {
+  return /* @__PURE__ */ jsx("tbody", { className: "[&_tr:last-child]:border-0", ...props });
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx("tr", { className: cn("border-b border-border transition-colors hover:bg-muted/50", className), ...props });
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: cn("h-10 px-3 text-left align-middle text-xs font-medium text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ jsx("td", { className: cn("px-3 py-2.5 align-middle", className), ...props });
+}
+function DataTable({
+  columns,
+  data,
+  pageSize = 10,
+  getRowId,
+  empty,
+  className
+}) {
+  const [sort, setSort] = useState(null);
+  const [page, setPage] = useState(0);
+  const valueOf = (row, col) => {
+    if (col.accessor) return col.accessor(row);
+    const v = row[col.key];
+    return typeof v === "number" ? v : String(v ?? "");
+  };
+  const sorted = useMemo(() => {
+    if (!sort) return data;
+    const col = columns.find((c) => c.key === sort.key);
+    if (!col) return data;
+    const copy = [...data];
+    const rank = (v) => typeof v === "number" ? 0 : 1;
+    copy.sort((a, b) => {
+      const av = valueOf(a, col);
+      const bv = valueOf(b, col);
+      let cmp = rank(av) - rank(bv);
+      if (cmp === 0) {
+        cmp = typeof av === "number" && typeof bv === "number" ? av - bv : String(av).localeCompare(String(bv));
+      }
+      return sort.dir === "asc" ? cmp : -cmp;
+    });
+    return copy;
+  }, [data, sort, columns]);
+  const pageCount = Math.max(1, Math.ceil(sorted.length / pageSize));
+  const clampedPage = Math.min(page, pageCount - 1);
+  const rows = sorted.slice(clampedPage * pageSize, clampedPage * pageSize + pageSize);
+  const toggleSort = (key) => {
+    setPage(0);
+    setSort(
+      (prev) => prev?.key === key ? prev.dir === "asc" ? { key, dir: "desc" } : null : { key, dir: "asc" }
+    );
+  };
+  const alignClass = (a) => a === "right" ? "text-right" : a === "center" ? "text-center" : "text-left";
+  if (data.length === 0 && empty) {
+    return /* @__PURE__ */ jsx("div", { className: cn("rounded-xl border border-border bg-card", className), children: empty });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-xl border border-border bg-card", className), children: [
+    /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((col) => /* @__PURE__ */ jsx(TableHead, { className: alignClass(col.align), children: col.sortable ? /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => toggleSort(col.key),
+          className: "inline-flex items-center gap-1 hover:text-foreground",
+          children: [
+            col.header,
+            /* @__PURE__ */ jsx("span", { className: "text-[10px]", children: sort?.key === col.key ? sort.dir === "asc" ? "\u25B2" : "\u25BC" : "\u2195" })
+          ]
+        }
+      ) : col.header }, col.key)) }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: rows.map((row, i) => /* @__PURE__ */ jsx(TableRow, { children: columns.map((col) => /* @__PURE__ */ jsx(TableCell, { className: alignClass(col.align), children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key)) }, getRowId ? getRowId(row, i) : i)) })
+    ] }),
+    pageCount > 1 ? /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        page: clampedPage,
+        pageCount,
+        total: sorted.length,
+        onPageChange: setPage
+      }
+    ) : null
+  ] });
+}
+function Pagination({ page, pageCount, total, onPageChange }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-t border-border px-3 py-2 text-sm", children: [
+    /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+      total != null ? `${total} rows \xB7 ` : "",
+      "Page ",
+      page + 1,
+      " of ",
+      pageCount
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", disabled: page === 0, onClick: () => onPageChange(page - 1), children: "Previous" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "outline",
+          disabled: page >= pageCount - 1,
+          onClick: () => onPageChange(page + 1),
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+function MetricCard({ label, value, delta, deltaLabel, icon, className }) {
+  const positive = (delta ?? 0) >= 0;
+  return /* @__PURE__ */ jsxs(Card, { className: cn("p-5", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: label }),
+      icon ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: icon }) : null
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "mt-2 text-3xl font-semibold tracking-tight", children: value }),
+    delta != null ? /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs", children: [
+      /* @__PURE__ */ jsxs("span", { className: cn("font-medium", positive ? "text-[var(--chart-2)]" : "text-destructive"), children: [
+        positive ? "\u25B2" : "\u25BC",
+        " ",
+        Math.abs(delta),
+        "%"
+      ] }),
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: deltaLabel ?? "vs. previous" })
+    ] }) : null
+  ] });
+}
+function FilterBar({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap items-end gap-3 rounded-xl border border-border bg-card p-4",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function FilterField({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground", children: label }),
+    children
+  ] });
+}
+function DashboardShell({ title, description, actions, nav, children, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-h-screen bg-background text-foreground", className), children: [
+    /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-10 border-b border-border bg-background/80 backdrop-blur", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-3 px-6 py-4", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          title ? /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold tracking-tight", children: title }) : null,
+          description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null
+        ] }),
+        actions ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: actions }) : null
+      ] }),
+      nav ? /* @__PURE__ */ jsx("nav", { className: "mx-auto max-w-7xl px-6 pb-2", children: nav }) : null
+    ] }),
+    /* @__PURE__ */ jsx("main", { className: "mx-auto max-w-7xl px-6 py-6", children })
+  ] });
+}
+function Loading({ label = "Loading\u2026", className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex min-h-[30vh] items-center justify-center", className), role: "status", "aria-live": "polite", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" }),
+    label
+  ] }) });
+}
+function Empty({
+  title = "Nothing here yet",
+  description,
+  icon,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center gap-2 p-10 text-center", className), children: [
+    icon ? /* @__PURE__ */ jsx("div", { className: "text-3xl text-muted-foreground", children: icon }) : null,
+    /* @__PURE__ */ jsx("p", { className: "font-medium", children: title }),
+    description ? /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-muted-foreground", children: description }) : null,
+    action ? /* @__PURE__ */ jsx("div", { className: "mt-2", children: action }) : null
+  ] });
+}
+function ErrorState({
+  title = "Something went wrong",
+  message,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("rounded-xl border border-destructive/30 bg-destructive/5 p-6", className),
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "font-semibold text-destructive", children: title }),
+        message ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: message }) : null,
+        action ? /* @__PURE__ */ jsx("div", { className: "mt-3", children: action }) : null
+      ]
+    }
+  );
+}
+var FIELD2 = "h-9 rounded-md border border-input bg-background px-3 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+function DatePicker({ value, onChange, min, max, className, id }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id,
+      type: "date",
+      value: value ?? "",
+      min,
+      max,
+      onChange: (e) => onChange?.(e.target.value),
+      className: cn(FIELD2, className)
+    }
+  );
+}
+function DateRangePicker({ value, onChange, className }) {
+  const from = value?.from ?? "";
+  const to = value?.to ?? "";
+  return /* @__PURE__ */ jsxs("div", { className: cn("inline-flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "date",
+        value: from,
+        max: to || void 0,
+        onChange: (e) => onChange?.({ from: e.target.value, to }),
+        className: FIELD2,
+        "aria-label": "From date"
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2013" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "date",
+        value: to,
+        min: from || void 0,
+        onChange: (e) => onChange?.({ from, to: e.target.value }),
+        className: FIELD2,
+        "aria-label": "To date"
+      }
+    )
+  ] });
+}
+var CHART_COLORS = [
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)"
+];
+function ChartContainer({
+  children,
+  className,
+  height = 260
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), style: { height }, children });
+}
+function ChartLegend({ series }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-4 pt-3 text-xs text-muted-foreground", children: series.map((s, i) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "h-2.5 w-2.5 rounded-[3px]",
+        style: { backgroundColor: s.color ?? CHART_COLORS[i % CHART_COLORS.length] }
+      }
+    ),
+    s.label ?? s.key
+  ] }, s.key)) });
+}
+function ChartTooltip({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "pointer-events-none rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs shadow-md",
+        className
+      ),
+      children
+    }
+  );
+}
+var PAD = { top: 8, right: 8, bottom: 22, left: 32 };
+function useGeometry(data, series) {
+  let max = 0;
+  for (const row of data) {
+    for (const s of series) {
+      const v = Number(row[s.key] ?? 0);
+      if (v > max) max = v;
+    }
+  }
+  return { max: max === 0 ? 1 : max };
+}
+function BarChart({
+  data,
+  categoryKey,
+  series,
+  height = 260,
+  className
+}) {
+  const width = 640;
+  const { max } = useGeometry(data, series);
+  const chartW = width - PAD.left - PAD.right;
+  const chartH = height - PAD.top - PAD.bottom;
+  const groupW = chartW / Math.max(1, data.length);
+  const barW = Math.max(2, groupW * 0.7 / series.length);
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${width} ${height}`, className: "w-full", style: { height }, role: "img", children: [
+      [0, 0.25, 0.5, 0.75, 1].map((t) => {
+        const y = PAD.top + chartH * (1 - t);
+        return /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("line", { x1: PAD.left, x2: width - PAD.right, y1: y, y2: y, stroke: "var(--border)", strokeWidth: 1 }),
+          /* @__PURE__ */ jsx("text", { x: PAD.left - 6, y: y + 3, textAnchor: "end", fontSize: 9, fill: "var(--muted-foreground)", children: Math.round(max * t) })
+        ] }, t);
+      }),
+      data.map((row, i) => {
+        const gx = PAD.left + groupW * i + (groupW - barW * series.length) / 2;
+        return /* @__PURE__ */ jsxs("g", { children: [
+          series.map((s, si) => {
+            const v = Number(row[s.key] ?? 0);
+            const h = v / max * chartH;
+            return /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: gx + si * barW,
+                y: PAD.top + chartH - h,
+                width: barW - 1,
+                height: Math.max(0, h),
+                rx: 2,
+                fill: s.color ?? CHART_COLORS[si % CHART_COLORS.length],
+                children: /* @__PURE__ */ jsx("title", { children: `${String(row[categoryKey])} \xB7 ${s.label ?? s.key}: ${v}` })
+              },
+              s.key
+            );
+          }),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: PAD.left + groupW * i + groupW / 2,
+              y: height - 6,
+              textAnchor: "middle",
+              fontSize: 9,
+              fill: "var(--muted-foreground)",
+              children: String(row[categoryKey])
+            }
+          )
+        ] }, i);
+      })
+    ] }),
+    /* @__PURE__ */ jsx(ChartLegend, { series })
+  ] });
+}
+function LineChart({
+  data,
+  categoryKey,
+  series,
+  height = 260,
+  className
+}) {
+  const width = 640;
+  const { max } = useGeometry(data, series);
+  const chartW = width - PAD.left - PAD.right;
+  const chartH = height - PAD.top - PAD.bottom;
+  const stepX = chartW / Math.max(1, data.length - 1);
+  const pointFor = (v, i) => ({
+    x: PAD.left + stepX * i,
+    y: PAD.top + chartH - v / max * chartH
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${width} ${height}`, className: "w-full", style: { height }, role: "img", children: [
+      [0, 0.5, 1].map((t) => {
+        const y = PAD.top + chartH * (1 - t);
+        return /* @__PURE__ */ jsx("line", { x1: PAD.left, x2: width - PAD.right, y1: y, y2: y, stroke: "var(--border)", strokeWidth: 1 }, t);
+      }),
+      series.map((s, si) => {
+        const pts = data.map((row, i) => pointFor(Number(row[s.key] ?? 0), i));
+        const d = pts.map((p, i) => `${i === 0 ? "M" : "L"}${p.x},${p.y}`).join(" ");
+        const color = s.color ?? CHART_COLORS[si % CHART_COLORS.length];
+        return /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("path", { d, fill: "none", stroke: color, strokeWidth: 2 }),
+          pts.map((p, i) => /* @__PURE__ */ jsx("circle", { cx: p.x, cy: p.y, r: 2.5, fill: color }, i))
+        ] }, s.key);
+      }),
+      data.map((row, i) => /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: PAD.left + stepX * i,
+          y: height - 6,
+          textAnchor: "middle",
+          fontSize: 9,
+          fill: "var(--muted-foreground)",
+          children: String(row[categoryKey])
+        },
+        i
+      ))
+    ] }),
+    /* @__PURE__ */ jsx(ChartLegend, { series })
+  ] });
+}
+function Dialog({ open, onClose, title, description, children, footer, className }) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50", onClick: onClose, "aria-hidden": true }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        className: cn(
+          "relative z-10 w-full max-w-lg rounded-xl border border-border bg-card p-6 shadow-lg",
+          className
+        ),
+        children: [
+          title ? /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: title }) : null,
+          description ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null,
+          children ? /* @__PURE__ */ jsx("div", { className: "mt-4", children }) : null,
+          footer ? /* @__PURE__ */ jsx("div", { className: "mt-6 flex justify-end gap-2", children: footer }) : null
+        ]
+      }
+    )
+  ] });
+}
+function DropdownMenu({ trigger, items, align = "start", className }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("relative inline-block", className), children: [
+    /* @__PURE__ */ jsx("span", { onClick: () => setOpen((v) => !v), children: trigger }),
+    open ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "menu",
+        className: cn(
+          "absolute z-50 mt-1 min-w-[10rem] rounded-md border border-border bg-popover p-1 shadow-md",
+          align === "end" ? "right-0" : "left-0"
+        ),
+        children: items.map((item, i) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            disabled: item.disabled,
+            onClick: () => {
+              item.onSelect?.();
+              setOpen(false);
+            },
+            className: cn(
+              "flex w-full items-center rounded-sm px-2 py-1.5 text-left text-sm",
+              "hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
+            ),
+            children: item.label
+          },
+          i
+        ))
+      }
+    ) : null
+  ] });
+}
+
+export { BarChart, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartTooltip, Checkbox, DashboardShell, DataTable, DatePicker, DateRangePicker, Dialog, DropdownMenu, Empty, ErrorState, FilterBar, FilterField, Input, LineChart, Loading, MetricCard, Pagination, Select, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, cn };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map