@handled-ai/design-system 0.8.0 → 0.9.0

package/dist/components/performance-metrics-table.js

@@ -0,0 +1,342 @@
+"use client"
+
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  AlertTriangle,
+  CheckCircle2,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight
+} from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Avatar, AvatarFallback } from "./avatar.js";
+import { Button } from "./button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "./dropdown-menu.js";
+import { Input } from "./input.js";
+import { ScrollArea, ScrollBar } from "./scroll-area.js";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "./table.js";
+const DEFAULT_ROWS = [
+  {
+    id: "member-1",
+    label: "Jennifer Davis",
+    avatarFallback: "JD",
+    role: "Senior Coordinator",
+    primaryValue: 188,
+    primaryTarget: 200,
+    ratePercent: 78,
+    metricOne: 256,
+    metricTwo: "8.5h",
+    metricThree: 401,
+    metricFour: 42
+  },
+  {
+    id: "member-2",
+    label: "Robert Taylor",
+    avatarFallback: "RT",
+    role: "Coordinator",
+    primaryValue: 168,
+    primaryTarget: 200,
+    ratePercent: 70,
+    metricOne: 210,
+    metricTwo: "7.4h",
+    metricThree: 330,
+    metricFour: 36
+  },
+  {
+    id: "member-3",
+    label: "Karen Park",
+    avatarFallback: "KP",
+    role: "Coordinator",
+    primaryValue: 165,
+    primaryTarget: 200,
+    ratePercent: 68,
+    metricOne: 195,
+    metricTwo: "6.9h",
+    metricThree: 298,
+    metricFour: 33
+  },
+  {
+    id: "member-4",
+    label: "Alex Chen",
+    avatarFallback: "AC",
+    role: "Junior Coordinator",
+    primaryValue: 142,
+    primaryTarget: 200,
+    ratePercent: 65,
+    metricOne: 201,
+    metricTwo: "7.2h",
+    metricThree: 315,
+    metricFour: 29
+  },
+  {
+    id: "member-5",
+    label: "Sarah Mitchell",
+    avatarFallback: "SM",
+    role: "Senior Coordinator",
+    primaryValue: 130,
+    primaryTarget: 200,
+    ratePercent: 76,
+    metricOne: 247,
+    metricTwo: "8.2h",
+    metricThree: 389,
+    metricFour: 31
+  },
+  {
+    id: "member-6",
+    label: "Mike Rodriguez",
+    avatarFallback: "MR",
+    role: "Coordinator",
+    primaryValue: 115,
+    primaryTarget: 200,
+    ratePercent: 72,
+    metricOne: 218,
+    metricTwo: "7.8h",
+    metricThree: 342,
+    metricFour: 25
+  }
+];
+const DEFAULT_SORT_OPTIONS = [
+  { id: "primary-desc", label: "Primary Metric (High to Low)" },
+  { id: "primary-asc", label: "Primary Metric (Low to High)" },
+  { id: "rate-desc", label: "Rate (High to Low)" },
+  { id: "metric-four-desc", label: "Metric Four (High to Low)" }
+];
+function getProgressStatus(value, target) {
+  const percent = value / target * 100;
+  if (percent >= 80) {
+    return {
+      color: "bg-emerald-500",
+      textColor: "text-emerald-700",
+      icon: /* @__PURE__ */ jsx(CheckCircle2, { className: "h-3.5 w-3.5 text-emerald-600" })
+    };
+  }
+  if (percent >= 65) {
+    return {
+      color: "bg-amber-500",
+      textColor: "text-amber-700",
+      icon: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3.5 w-3.5 text-amber-600" })
+    };
+  }
+  return {
+    color: "bg-red-500",
+    textColor: "text-red-700",
+    icon: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3.5 w-3.5 text-red-600" })
+  };
+}
+function sortRows(rows, sortId) {
+  const copy = [...rows];
+  switch (sortId) {
+    case "primary-asc":
+      return copy.sort((a, b) => a.primaryValue - b.primaryValue);
+    case "rate-desc":
+      return copy.sort((a, b) => b.ratePercent - a.ratePercent);
+    case "metric-four-desc":
+      return copy.sort((a, b) => b.metricFour - a.metricFour);
+    case "primary-desc":
+    default:
+      return copy.sort((a, b) => b.primaryValue - a.primaryValue);
+  }
+}
+function PerformanceMetricsTable({
+  title = "Performance Table",
+  entityColumnLabel = "Entity",
+  primaryMetricColumnLabel = "Primary Goal",
+  rateColumnLabel = "Rate",
+  metricOneColumnLabel = "Metric One",
+  metricTwoColumnLabel = "Metric Two",
+  metricThreeColumnLabel = "Metric Three",
+  metricFourColumnLabel = "Metric Four",
+  viewOptions = ["By Entity"],
+  roleOptions = ["All", "Senior Coordinator", "Coordinator", "Junior Coordinator"],
+  sortOptions = DEFAULT_SORT_OPTIONS,
+  rows = DEFAULT_ROWS,
+  pageSize = 6,
+  searchPlaceholder = "Search rows..."
+}) {
+  var _a, _b, _c, _d, _e, _f;
+  const [view, setView] = React.useState((_a = viewOptions[0]) != null ? _a : "By Entity");
+  const [sortId, setSortId] = React.useState(
+    (_c = (_b = sortOptions[0]) == null ? void 0 : _b.id) != null ? _c : "primary-desc"
+  );
+  const [roleFilter, setRoleFilter] = React.useState((_d = roleOptions[0]) != null ? _d : "All");
+  const [search, setSearch] = React.useState("");
+  const [page, setPage] = React.useState(1);
+  const filteredRows = React.useMemo(() => {
+    const normalized = search.trim().toLowerCase();
+    return rows.filter((row) => {
+      if (roleFilter !== "All" && row.role !== roleFilter) {
+        return false;
+      }
+      if (!normalized) {
+        return true;
+      }
+      return row.label.toLowerCase().includes(normalized);
+    });
+  }, [roleFilter, rows, search]);
+  const sortedRows = React.useMemo(
+    () => sortRows(filteredRows, sortId),
+    [filteredRows, sortId]
+  );
+  const pageCount = Math.max(1, Math.ceil(sortedRows.length / pageSize));
+  const start = (page - 1) * pageSize;
+  const paginatedRows = sortedRows.slice(start, start + pageSize);
+  React.useEffect(() => {
+    setPage(1);
+  }, [search, roleFilter, sortId, view]);
+  React.useEffect(() => {
+    setPage((previous) => Math.min(previous, pageCount));
+  }, [pageCount]);
+  const sortLabel = (_f = (_e = sortOptions.find((option) => option.id === sortId)) == null ? void 0 : _e.label) != null ? _f : "Sort";
+  return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-xl border border-border bg-card", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "h-8 text-xs", children: [
+            view,
+            /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-3.5 w-3.5" })
+          ] }) }),
+          /* @__PURE__ */ jsx(DropdownMenuContent, { children: viewOptions.map((option) => /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => setView(option), children: option }, option)) })
+        ] }),
+        /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "h-8 text-xs", children: [
+            "Sort: ",
+            sortLabel.replace(/\s*\(.+\)/, ""),
+            /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-3.5 w-3.5" })
+          ] }) }),
+          /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "w-56", children: sortOptions.map((option) => /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => setSortId(option.id), children: option.label }, option.id)) })
+        ] }),
+        /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "h-8 text-xs", children: [
+            "Role: ",
+            roleFilter,
+            /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-3.5 w-3.5" })
+          ] }) }),
+          /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: roleOptions.map((option) => /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => setRoleFilter(option), children: option }, option)) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: search,
+            onChange: (event) => setSearch(event.target.value),
+            placeholder: searchPlaceholder,
+            className: "h-8 w-48 text-xs"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(ScrollArea, { children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-[1180px]", children: /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(TableHeader, { className: "bg-muted/30", children: /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-transparent", children: [
+          /* @__PURE__ */ jsx(TableHead, { className: "px-4 py-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: entityColumnLabel }),
+          /* @__PURE__ */ jsx(TableHead, { className: "w-[260px] px-4 py-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: primaryMetricColumnLabel }),
+          /* @__PURE__ */ jsx(TableHead, { className: "px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: rateColumnLabel }),
+          /* @__PURE__ */ jsx(TableHead, { className: "px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: metricOneColumnLabel }),
+          /* @__PURE__ */ jsx(TableHead, { className: "px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: metricTwoColumnLabel }),
+          /* @__PURE__ */ jsx(TableHead, { className: "px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: metricThreeColumnLabel }),
+          /* @__PURE__ */ jsx(TableHead, { className: "px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: metricFourColumnLabel })
+        ] }) }),
+        /* @__PURE__ */ jsx(TableBody, { children: paginatedRows.map((row) => {
+          const percentage = row.primaryValue / row.primaryTarget * 100;
+          const progress = getProgressStatus(row.primaryValue, row.primaryTarget);
+          return /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-muted/30", children: [
+            /* @__PURE__ */ jsx(TableCell, { className: "px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx(Avatar, { className: "h-8 w-8 border border-border", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-emerald-100 text-[11px] font-medium text-emerald-700", children: row.avatarFallback }) }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: row.label })
+            ] }) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "shrink-0", children: progress.icon }),
+              /* @__PURE__ */ jsxs("div", { className: "w-full max-w-[180px]", children: [
+                /* @__PURE__ */ jsxs("div", { className: "mb-1 text-sm font-bold text-foreground", children: [
+                  row.primaryValue,
+                  "/",
+                  row.primaryTarget
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn("h-full rounded-full", progress.color),
+                    style: { width: `${Math.min(100, percentage)}%` }
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs("div", { className: cn("mt-1 text-xs font-medium", progress.textColor), children: [
+                  Math.round(percentage),
+                  "%"
+                ] })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsxs(TableCell, { className: "px-4 py-3 text-right text-sm font-semibold text-emerald-600", children: [
+              row.ratePercent,
+              "%"
+            ] }),
+            /* @__PURE__ */ jsx(TableCell, { className: "px-4 py-3 text-right text-sm font-medium text-foreground", children: row.metricOne }),
+            /* @__PURE__ */ jsx(TableCell, { className: "px-4 py-3 text-right text-sm text-muted-foreground", children: row.metricTwo }),
+            /* @__PURE__ */ jsx(TableCell, { className: "px-4 py-3 text-right text-sm font-medium text-foreground", children: row.metricThree }),
+            /* @__PURE__ */ jsx(TableCell, { className: "px-4 py-3 text-right text-sm font-medium text-foreground", children: row.metricFour })
+          ] }, row.id);
+        }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t border-border bg-muted/20 px-4 py-3", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+        "Showing ",
+        sortedRows.length === 0 ? 0 : start + 1,
+        " to",
+        " ",
+        Math.min(start + pageSize, sortedRows.length),
+        " of ",
+        sortedRows.length,
+        " rows"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            className: "h-7 text-xs",
+            disabled: page <= 1,
+            onClick: () => setPage((previous) => Math.max(previous - 1, 1)),
+            children: [
+              /* @__PURE__ */ jsx(ChevronLeft, { className: "mr-1 h-3.5 w-3.5" }),
+              "Previous"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            className: "h-7 text-xs",
+            disabled: page >= pageCount,
+            onClick: () => setPage((previous) => Math.min(previous + 1, pageCount)),
+            children: [
+              "Next",
+              /* @__PURE__ */ jsx(ChevronRight, { className: "ml-1 h-3.5 w-3.5" })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  PerformanceMetricsTable
+};
+//# sourceMappingURL=performance-metrics-table.js.map

package/dist/components/performance-metrics-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/performance-metrics-table.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AlertTriangle,\n  CheckCircle2,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n} from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\nimport { Avatar, AvatarFallback } from \"./avatar\"\nimport { Button } from \"./button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\"\nimport { Input } from \"./input\"\nimport { ScrollArea, ScrollBar } from \"./scroll-area\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"./table\"\n\nexport interface PerformanceMetricsTableRow {\n  id: string\n  label: string\n  avatarFallback: string\n  role?: string\n  primaryValue: number\n  primaryTarget: number\n  ratePercent: number\n  metricOne: number\n  metricTwo: string\n  metricThree: number\n  metricFour: number\n}\n\nexport interface PerformanceMetricsTableSortOption {\n  id: \"primary-desc\" | \"primary-asc\" | \"rate-desc\" | \"metric-four-desc\"\n  label: string\n}\n\ninterface PerformanceMetricsTableProps {\n  title?: string\n  entityColumnLabel?: string\n  primaryMetricColumnLabel?: string\n  rateColumnLabel?: string\n  metricOneColumnLabel?: string\n  metricTwoColumnLabel?: string\n  metricThreeColumnLabel?: string\n  metricFourColumnLabel?: string\n  viewOptions?: string[]\n  roleOptions?: string[]\n  sortOptions?: PerformanceMetricsTableSortOption[]\n  rows?: PerformanceMetricsTableRow[]\n  pageSize?: number\n  searchPlaceholder?: string\n}\n\nconst DEFAULT_ROWS: PerformanceMetricsTableRow[] = [\n  {\n    id: \"member-1\",\n    label: \"Jennifer Davis\",\n    avatarFallback: \"JD\",\n    role: \"Senior Coordinator\",\n    primaryValue: 188,\n    primaryTarget: 200,\n    ratePercent: 78,\n    metricOne: 256,\n    metricTwo: \"8.5h\",\n    metricThree: 401,\n    metricFour: 42,\n  },\n  {\n    id: \"member-2\",\n    label: \"Robert Taylor\",\n    avatarFallback: \"RT\",\n    role: \"Coordinator\",\n    primaryValue: 168,\n    primaryTarget: 200,\n    ratePercent: 70,\n    metricOne: 210,\n    metricTwo: \"7.4h\",\n    metricThree: 330,\n    metricFour: 36,\n  },\n  {\n    id: \"member-3\",\n    label: \"Karen Park\",\n    avatarFallback: \"KP\",\n    role: \"Coordinator\",\n    primaryValue: 165,\n    primaryTarget: 200,\n    ratePercent: 68,\n    metricOne: 195,\n    metricTwo: \"6.9h\",\n    metricThree: 298,\n    metricFour: 33,\n  },\n  {\n    id: \"member-4\",\n    label: \"Alex Chen\",\n    avatarFallback: \"AC\",\n    role: \"Junior Coordinator\",\n    primaryValue: 142,\n    primaryTarget: 200,\n    ratePercent: 65,\n    metricOne: 201,\n    metricTwo: \"7.2h\",\n    metricThree: 315,\n    metricFour: 29,\n  },\n  {\n    id: \"member-5\",\n    label: \"Sarah Mitchell\",\n    avatarFallback: \"SM\",\n    role: \"Senior Coordinator\",\n    primaryValue: 130,\n    primaryTarget: 200,\n    ratePercent: 76,\n    metricOne: 247,\n    metricTwo: \"8.2h\",\n    metricThree: 389,\n    metricFour: 31,\n  },\n  {\n    id: \"member-6\",\n    label: \"Mike Rodriguez\",\n    avatarFallback: \"MR\",\n    role: \"Coordinator\",\n    primaryValue: 115,\n    primaryTarget: 200,\n    ratePercent: 72,\n    metricOne: 218,\n    metricTwo: \"7.8h\",\n    metricThree: 342,\n    metricFour: 25,\n  },\n]\n\nconst DEFAULT_SORT_OPTIONS: PerformanceMetricsTableSortOption[] = [\n  { id: \"primary-desc\", label: \"Primary Metric (High to Low)\" },\n  { id: \"primary-asc\", label: \"Primary Metric (Low to High)\" },\n  { id: \"rate-desc\", label: \"Rate (High to Low)\" },\n  { id: \"metric-four-desc\", label: \"Metric Four (High to Low)\" },\n]\n\nfunction getProgressStatus(value: number, target: number) {\n  const percent = (value / target) * 100\n\n  if (percent >= 80) {\n    return {\n      color: \"bg-emerald-500\",\n      textColor: \"text-emerald-700\",\n      icon: <CheckCircle2 className=\"h-3.5 w-3.5 text-emerald-600\" />,\n    }\n  }\n\n  if (percent >= 65) {\n    return {\n      color: \"bg-amber-500\",\n      textColor: \"text-amber-700\",\n      icon: <AlertTriangle className=\"h-3.5 w-3.5 text-amber-600\" />,\n    }\n  }\n\n  return {\n    color: \"bg-red-500\",\n    textColor: \"text-red-700\",\n    icon: <AlertTriangle className=\"h-3.5 w-3.5 text-red-600\" />,\n  }\n}\n\nfunction sortRows(\n  rows: PerformanceMetricsTableRow[],\n  sortId: PerformanceMetricsTableSortOption[\"id\"]\n) {\n  const copy = [...rows]\n  switch (sortId) {\n    case \"primary-asc\":\n      return copy.sort((a, b) => a.primaryValue - b.primaryValue)\n    case \"rate-desc\":\n      return copy.sort((a, b) => b.ratePercent - a.ratePercent)\n    case \"metric-four-desc\":\n      return copy.sort((a, b) => b.metricFour - a.metricFour)\n    case \"primary-desc\":\n    default:\n      return copy.sort((a, b) => b.primaryValue - a.primaryValue)\n  }\n}\n\nexport function PerformanceMetricsTable({\n  title = \"Performance Table\",\n  entityColumnLabel = \"Entity\",\n  primaryMetricColumnLabel = \"Primary Goal\",\n  rateColumnLabel = \"Rate\",\n  metricOneColumnLabel = \"Metric One\",\n  metricTwoColumnLabel = \"Metric Two\",\n  metricThreeColumnLabel = \"Metric Three\",\n  metricFourColumnLabel = \"Metric Four\",\n  viewOptions = [\"By Entity\"],\n  roleOptions = [\"All\", \"Senior Coordinator\", \"Coordinator\", \"Junior Coordinator\"],\n  sortOptions = DEFAULT_SORT_OPTIONS,\n  rows = DEFAULT_ROWS,\n  pageSize = 6,\n  searchPlaceholder = \"Search rows...\",\n}: PerformanceMetricsTableProps) {\n  const [view, setView] = React.useState(viewOptions[0] ?? \"By Entity\")\n  const [sortId, setSortId] =\n    React.useState<PerformanceMetricsTableSortOption[\"id\"]>(\n      sortOptions[0]?.id ?? \"primary-desc\"\n    )\n  const [roleFilter, setRoleFilter] = React.useState(roleOptions[0] ?? \"All\")\n  const [search, setSearch] = React.useState(\"\")\n  const [page, setPage] = React.useState(1)\n\n  const filteredRows = React.useMemo(() => {\n    const normalized = search.trim().toLowerCase()\n    return rows.filter((row) => {\n      if (roleFilter !== \"All\" && row.role !== roleFilter) {\n        return false\n      }\n      if (!normalized) {\n        return true\n      }\n      return row.label.toLowerCase().includes(normalized)\n    })\n  }, [roleFilter, rows, search])\n\n  const sortedRows = React.useMemo(\n    () => sortRows(filteredRows, sortId),\n    [filteredRows, sortId]\n  )\n\n  const pageCount = Math.max(1, Math.ceil(sortedRows.length / pageSize))\n  const start = (page - 1) * pageSize\n  const paginatedRows = sortedRows.slice(start, start + pageSize)\n\n  React.useEffect(() => {\n    setPage(1)\n  }, [search, roleFilter, sortId, view])\n\n  React.useEffect(() => {\n    setPage((previous) => Math.min(previous, pageCount))\n  }, [pageCount])\n\n  const sortLabel =\n    sortOptions.find((option) => option.id === sortId)?.label ?? \"Sort\"\n\n  return (\n    <div className=\"overflow-hidden rounded-xl border border-border bg-card\">\n      <div className=\"flex items-center justify-between border-b border-border px-4 py-3\">\n        <h3 className=\"text-sm font-semibold text-foreground\">{title}</h3>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\" className=\"h-8 text-xs\">\n                {view}\n                <ChevronDown className=\"ml-2 h-3.5 w-3.5\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              {viewOptions.map((option) => (\n                <DropdownMenuItem key={option} onClick={() => setView(option)}>\n                  {option}\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\" className=\"h-8 text-xs\">\n                Sort: {sortLabel.replace(/\\s*\\(.+\\)/, \"\")}\n                <ChevronDown className=\"ml-2 h-3.5 w-3.5\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-56\">\n              {sortOptions.map((option) => (\n                <DropdownMenuItem key={option.id} onClick={() => setSortId(option.id)}>\n                  {option.label}\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\" className=\"h-8 text-xs\">\n                Role: {roleFilter}\n                <ChevronDown className=\"ml-2 h-3.5 w-3.5\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              {roleOptions.map((option) => (\n                <DropdownMenuItem key={option} onClick={() => setRoleFilter(option)}>\n                  {option}\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n\n          <Input\n            value={search}\n            onChange={(event) => setSearch(event.target.value)}\n            placeholder={searchPlaceholder}\n            className=\"h-8 w-48 text-xs\"\n          />\n        </div>\n      </div>\n\n      <ScrollArea>\n        <div className=\"min-w-[1180px]\">\n          <Table>\n            <TableHeader className=\"bg-muted/30\">\n              <TableRow className=\"hover:bg-transparent\">\n                <TableHead className=\"px-4 py-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n                  {entityColumnLabel}\n                </TableHead>\n                <TableHead className=\"w-[260px] px-4 py-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n                  {primaryMetricColumnLabel}\n                </TableHead>\n                <TableHead className=\"px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n                  {rateColumnLabel}\n                </TableHead>\n                <TableHead className=\"px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n                  {metricOneColumnLabel}\n                </TableHead>\n                <TableHead className=\"px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n                  {metricTwoColumnLabel}\n                </TableHead>\n                <TableHead className=\"px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n                  {metricThreeColumnLabel}\n                </TableHead>\n                <TableHead className=\"px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n                  {metricFourColumnLabel}\n                </TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {paginatedRows.map((row) => {\n                const percentage = (row.primaryValue / row.primaryTarget) * 100\n                const progress = getProgressStatus(row.primaryValue, row.primaryTarget)\n\n                return (\n                  <TableRow key={row.id} className=\"hover:bg-muted/30\">\n                    <TableCell className=\"px-4 py-3\">\n                      <div className=\"flex items-center gap-3\">\n                        <Avatar className=\"h-8 w-8 border border-border\">\n                          <AvatarFallback className=\"bg-emerald-100 text-[11px] font-medium text-emerald-700\">\n                            {row.avatarFallback}\n                          </AvatarFallback>\n                        </Avatar>\n                        <span className=\"text-sm font-medium text-foreground\">{row.label}</span>\n                      </div>\n                    </TableCell>\n\n                    <TableCell className=\"px-4 py-3\">\n                      <div className=\"flex items-center gap-2\">\n                        <span className=\"shrink-0\">{progress.icon}</span>\n                        <div className=\"w-full max-w-[180px]\">\n                          <div className=\"mb-1 text-sm font-bold text-foreground\">\n                            {row.primaryValue}/{row.primaryTarget}\n                          </div>\n                          <div className=\"h-1.5 w-full overflow-hidden rounded-full bg-muted\">\n                            <div\n                              className={cn(\"h-full rounded-full\", progress.color)}\n                              style={{ width: `${Math.min(100, percentage)}%` }}\n                            />\n                          </div>\n                          <div className={cn(\"mt-1 text-xs font-medium\", progress.textColor)}>\n                            {Math.round(percentage)}%\n                          </div>\n                        </div>\n                      </div>\n                    </TableCell>\n\n                    <TableCell className=\"px-4 py-3 text-right text-sm font-semibold text-emerald-600\">\n                      {row.ratePercent}%\n                    </TableCell>\n                    <TableCell className=\"px-4 py-3 text-right text-sm font-medium text-foreground\">\n                      {row.metricOne}\n                    </TableCell>\n                    <TableCell className=\"px-4 py-3 text-right text-sm text-muted-foreground\">\n                      {row.metricTwo}\n                    </TableCell>\n                    <TableCell className=\"px-4 py-3 text-right text-sm font-medium text-foreground\">\n                      {row.metricThree}\n                    </TableCell>\n                    <TableCell className=\"px-4 py-3 text-right text-sm font-medium text-foreground\">\n                      {row.metricFour}\n                    </TableCell>\n                  </TableRow>\n                )\n              })}\n            </TableBody>\n          </Table>\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n\n      <div className=\"flex items-center justify-between border-t border-border bg-muted/20 px-4 py-3\">\n        <span className=\"text-xs text-muted-foreground\">\n          Showing {sortedRows.length === 0 ? 0 : start + 1} to{\" \"}\n          {Math.min(start + pageSize, sortedRows.length)} of {sortedRows.length} rows\n        </span>\n        <div className=\"flex items-center gap-2\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"h-7 text-xs\"\n            disabled={page <= 1}\n            onClick={() => setPage((previous) => Math.max(previous - 1, 1))}\n          >\n            <ChevronLeft className=\"mr-1 h-3.5 w-3.5\" />\n            Previous\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"h-7 text-xs\"\n            disabled={page >= pageCount}\n            onClick={() =>\n              setPage((previous) => Math.min(previous + 1, pageCount))\n            }\n          >\n            Next\n            <ChevronRight className=\"ml-1 h-3.5 w-3.5\" />\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";AAkKY,cAsGE,YAtGF;AAhKZ,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,UAAU;AACnB,SAAS,QAAQ,sBAAsB;AACvC,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa;AACtB,SAAS,YAAY,iBAAiB;AACtC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAsCP,MAAM,eAA6C;AAAA,EACjD;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,cAAc;AAAA,IACd,eAAe;AAAA,IACf,aAAa;AAAA,IACb,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,EACd;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,cAAc;AAAA,IACd,eAAe;AAAA,IACf,aAAa;AAAA,IACb,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,EACd;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,cAAc;AAAA,IACd,eAAe;AAAA,IACf,aAAa;AAAA,IACb,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,EACd;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,cAAc;AAAA,IACd,eAAe;AAAA,IACf,aAAa;AAAA,IACb,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,EACd;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,cAAc;AAAA,IACd,eAAe;AAAA,IACf,aAAa;AAAA,IACb,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,EACd;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,cAAc;AAAA,IACd,eAAe;AAAA,IACf,aAAa;AAAA,IACb,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,EACd;AACF;AAEA,MAAM,uBAA4D;AAAA,EAChE,EAAE,IAAI,gBAAgB,OAAO,+BAA+B;AAAA,EAC5D,EAAE,IAAI,eAAe,OAAO,+BAA+B;AAAA,EAC3D,EAAE,IAAI,aAAa,OAAO,qBAAqB;AAAA,EAC/C,EAAE,IAAI,oBAAoB,OAAO,4BAA4B;AAC/D;AAEA,SAAS,kBAAkB,OAAe,QAAgB;AACxD,QAAM,UAAW,QAAQ,SAAU;AAEnC,MAAI,WAAW,IAAI;AACjB,WAAO;AAAA,MACL,OAAO;AAAA,MACP,WAAW;AAAA,MACX,MAAM,oBAAC,gBAAa,WAAU,gCAA+B;AAAA,IAC/D;AAAA,EACF;AAEA,MAAI,WAAW,IAAI;AACjB,WAAO;AAAA,MACL,OAAO;AAAA,MACP,WAAW;AAAA,MACX,MAAM,oBAAC,iBAAc,WAAU,8BAA6B;AAAA,IAC9D;AAAA,EACF;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,IACP,WAAW;AAAA,IACX,MAAM,oBAAC,iBAAc,WAAU,4BAA2B;AAAA,EAC5D;AACF;AAEA,SAAS,SACP,MACA,QACA;AACA,QAAM,OAAO,CAAC,GAAG,IAAI;AACrB,UAAQ,QAAQ;AAAA,IACd,KAAK;AACH,aAAO,KAAK,KAAK,CAAC,GAAG,MAAM,EAAE,eAAe,EAAE,YAAY;AAAA,IAC5D,KAAK;AACH,aAAO,KAAK,KAAK,CAAC,GAAG,MAAM,EAAE,cAAc,EAAE,WAAW;AAAA,IAC1D,KAAK;AACH,aAAO,KAAK,KAAK,CAAC,GAAG,MAAM,EAAE,aAAa,EAAE,UAAU;AAAA,IACxD,KAAK;AAAA,IACL;AACE,aAAO,KAAK,KAAK,CAAC,GAAG,MAAM,EAAE,eAAe,EAAE,YAAY;AAAA,EAC9D;AACF;AAEO,SAAS,wBAAwB;AAAA,EACtC,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,2BAA2B;AAAA,EAC3B,kBAAkB;AAAA,EAClB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,yBAAyB;AAAA,EACzB,wBAAwB;AAAA,EACxB,cAAc,CAAC,WAAW;AAAA,EAC1B,cAAc,CAAC,OAAO,sBAAsB,eAAe,oBAAoB;AAAA,EAC/E,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW;AAAA,EACX,oBAAoB;AACtB,GAAiC;AAtNjC;AAuNE,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,UAAS,iBAAY,CAAC,MAAb,YAAkB,WAAW;AACpE,QAAM,CAAC,QAAQ,SAAS,IACtB,MAAM;AAAA,KACJ,uBAAY,CAAC,MAAb,mBAAgB,OAAhB,YAAsB;AAAA,EACxB;AACF,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,UAAS,iBAAY,CAAC,MAAb,YAAkB,KAAK;AAC1E,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,EAAE;AAC7C,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,CAAC;AAExC,QAAM,eAAe,MAAM,QAAQ,MAAM;AACvC,UAAM,aAAa,OAAO,KAAK,EAAE,YAAY;AAC7C,WAAO,KAAK,OAAO,CAAC,QAAQ;AAC1B,UAAI,eAAe,SAAS,IAAI,SAAS,YAAY;AACnD,eAAO;AAAA,MACT;AACA,UAAI,CAAC,YAAY;AACf,eAAO;AAAA,MACT;AACA,aAAO,IAAI,MAAM,YAAY,EAAE,SAAS,UAAU;AAAA,IACpD,CAAC;AAAA,EACH,GAAG,CAAC,YAAY,MAAM,MAAM,CAAC;AAE7B,QAAM,aAAa,MAAM;AAAA,IACvB,MAAM,SAAS,cAAc,MAAM;AAAA,IACnC,CAAC,cAAc,MAAM;AAAA,EACvB;AAEA,QAAM,YAAY,KAAK,IAAI,GAAG,KAAK,KAAK,WAAW,SAAS,QAAQ,CAAC;AACrE,QAAM,SAAS,OAAO,KAAK;AAC3B,QAAM,gBAAgB,WAAW,MAAM,OAAO,QAAQ,QAAQ;AAE9D,QAAM,UAAU,MAAM;AACpB,YAAQ,CAAC;AAAA,EACX,GAAG,CAAC,QAAQ,YAAY,QAAQ,IAAI,CAAC;AAErC,QAAM,UAAU,MAAM;AACpB,YAAQ,CAAC,aAAa,KAAK,IAAI,UAAU,SAAS,CAAC;AAAA,EACrD,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,aACJ,uBAAY,KAAK,CAAC,WAAW,OAAO,OAAO,MAAM,MAAjD,mBAAoD,UAApD,YAA6D;AAE/D,SACE,qBAAC,SAAI,WAAU,2DACb;AAAA,yBAAC,SAAI,WAAU,sEACb;AAAA,0BAAC,QAAG,WAAU,yCAAyC,iBAAM;AAAA,MAC7D,qBAAC,SAAI,WAAU,2BACb;AAAA,6BAAC,gBACC;AAAA,8BAAC,uBAAoB,SAAO,MAC1B,+BAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,WAAU,eAC3C;AAAA;AAAA,YACD,oBAAC,eAAY,WAAU,oBAAmB;AAAA,aAC5C,GACF;AAAA,UACA,oBAAC,uBACE,sBAAY,IAAI,CAAC,WAChB,oBAAC,oBAA8B,SAAS,MAAM,QAAQ,MAAM,GACzD,oBADoB,MAEvB,CACD,GACH;AAAA,WACF;AAAA,QAEA,qBAAC,gBACC;AAAA,8BAAC,uBAAoB,SAAO,MAC1B,+BAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,WAAU,eAAc;AAAA;AAAA,YACnD,UAAU,QAAQ,aAAa,EAAE;AAAA,YACxC,oBAAC,eAAY,WAAU,oBAAmB;AAAA,aAC5C,GACF;AAAA,UACA,oBAAC,uBAAoB,OAAM,OAAM,WAAU,QACxC,sBAAY,IAAI,CAAC,WAChB,oBAAC,oBAAiC,SAAS,MAAM,UAAU,OAAO,EAAE,GACjE,iBAAO,SADa,OAAO,EAE9B,CACD,GACH;AAAA,WACF;AAAA,QAEA,qBAAC,gBACC;AAAA,8BAAC,uBAAoB,SAAO,MAC1B,+BAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,WAAU,eAAc;AAAA;AAAA,YACnD;AAAA,YACP,oBAAC,eAAY,WAAU,oBAAmB;AAAA,aAC5C,GACF;AAAA,UACA,oBAAC,uBAAoB,OAAM,OACxB,sBAAY,IAAI,CAAC,WAChB,oBAAC,oBAA8B,SAAS,MAAM,cAAc,MAAM,GAC/D,oBADoB,MAEvB,CACD,GACH;AAAA,WACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU,CAAC,UAAU,UAAU,MAAM,OAAO,KAAK;AAAA,YACjD,aAAa;AAAA,YACb,WAAU;AAAA;AAAA,QACZ;AAAA,SACF;AAAA,OACF;AAAA,IAEA,qBAAC,cACC;AAAA,0BAAC,SAAI,WAAU,kBACb,+BAAC,SACC;AAAA,4BAAC,eAAY,WAAU,eACrB,+BAAC,YAAS,WAAU,wBAClB;AAAA,8BAAC,aAAU,WAAU,kFAClB,6BACH;AAAA,UACA,oBAAC,aAAU,WAAU,4FAClB,oCACH;AAAA,UACA,oBAAC,aAAU,WAAU,6FAClB,2BACH;AAAA,UACA,oBAAC,aAAU,WAAU,6FAClB,gCACH;AAAA,UACA,oBAAC,aAAU,WAAU,6FAClB,gCACH;AAAA,UACA,oBAAC,aAAU,WAAU,6FAClB,kCACH;AAAA,UACA,oBAAC,aAAU,WAAU,6FAClB,iCACH;AAAA,WACF,GACF;AAAA,QACA,oBAAC,aACE,wBAAc,IAAI,CAAC,QAAQ;AAC1B,gBAAM,aAAc,IAAI,eAAe,IAAI,gBAAiB;AAC5D,gBAAM,WAAW,kBAAkB,IAAI,cAAc,IAAI,aAAa;AAEtE,iBACE,qBAAC,YAAsB,WAAU,qBAC/B;AAAA,gCAAC,aAAU,WAAU,aACnB,+BAAC,SAAI,WAAU,2BACb;AAAA,kCAAC,UAAO,WAAU,gCAChB,8BAAC,kBAAe,WAAU,2DACvB,cAAI,gBACP,GACF;AAAA,cACA,oBAAC,UAAK,WAAU,uCAAuC,cAAI,OAAM;AAAA,eACnE,GACF;AAAA,YAEA,oBAAC,aAAU,WAAU,aACnB,+BAAC,SAAI,WAAU,2BACb;AAAA,kCAAC,UAAK,WAAU,YAAY,mBAAS,MAAK;AAAA,cAC1C,qBAAC,SAAI,WAAU,wBACb;AAAA,qCAAC,SAAI,WAAU,0CACZ;AAAA,sBAAI;AAAA,kBAAa;AAAA,kBAAE,IAAI;AAAA,mBAC1B;AAAA,gBACA,oBAAC,SAAI,WAAU,sDACb;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAW,GAAG,uBAAuB,SAAS,KAAK;AAAA,oBACnD,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,KAAK,UAAU,CAAC,IAAI;AAAA;AAAA,gBAClD,GACF;AAAA,gBACA,qBAAC,SAAI,WAAW,GAAG,4BAA4B,SAAS,SAAS,GAC9D;AAAA,uBAAK,MAAM,UAAU;AAAA,kBAAE;AAAA,mBAC1B;AAAA,iBACF;AAAA,eACF,GACF;AAAA,YAEA,qBAAC,aAAU,WAAU,+DAClB;AAAA,kBAAI;AAAA,cAAY;AAAA,eACnB;AAAA,YACA,oBAAC,aAAU,WAAU,4DAClB,cAAI,WACP;AAAA,YACA,oBAAC,aAAU,WAAU,sDAClB,cAAI,WACP;AAAA,YACA,oBAAC,aAAU,WAAU,4DAClB,cAAI,aACP;AAAA,YACA,oBAAC,aAAU,WAAU,4DAClB,cAAI,YACP;AAAA,eA9Ca,IAAI,EA+CnB;AAAA,QAEJ,CAAC,GACH;AAAA,SACF,GACF;AAAA,MACA,oBAAC,aAAU,aAAY,cAAa;AAAA,OACtC;AAAA,IAEA,qBAAC,SAAI,WAAU,kFACb;AAAA,2BAAC,UAAK,WAAU,iCAAgC;AAAA;AAAA,QACrC,WAAW,WAAW,IAAI,IAAI,QAAQ;AAAA,QAAE;AAAA,QAAI;AAAA,QACpD,KAAK,IAAI,QAAQ,UAAU,WAAW,MAAM;AAAA,QAAE;AAAA,QAAK,WAAW;AAAA,QAAO;AAAA,SACxE;AAAA,MACA,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAU;AAAA,YACV,UAAU,QAAQ;AAAA,YAClB,SAAS,MAAM,QAAQ,CAAC,aAAa,KAAK,IAAI,WAAW,GAAG,CAAC,CAAC;AAAA,YAE9D;AAAA,kCAAC,eAAY,WAAU,oBAAmB;AAAA,cAAE;AAAA;AAAA;AAAA,QAE9C;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAU;AAAA,YACV,UAAU,QAAQ;AAAA,YAClB,SAAS,MACP,QAAQ,CAAC,aAAa,KAAK,IAAI,WAAW,GAAG,SAAS,CAAC;AAAA,YAE1D;AAAA;AAAA,cAEC,oBAAC,gBAAa,WAAU,oBAAmB;AAAA;AAAA;AAAA,QAC7C;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/preview-list.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+declare function PreviewList({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+interface PreviewListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    meta?: React.ReactNode;
+    action?: React.ReactNode;
+    isHoverable?: boolean;
+}
+declare const PreviewListItem: React.ForwardRefExoticComponent<PreviewListItemProps & React.RefAttributes<HTMLDivElement>>;
+
+export { PreviewList, PreviewListItem, type PreviewListItemProps };

package/dist/components/preview-list.js

@@ -0,0 +1,83 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+function PreviewList(_a) {
+  var _b = _a, {
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "children",
+    "className"
+  ]);
+  const items = React.Children.toArray(children);
+  const visibleItems = items.slice(0, 8);
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ className: cn("flex flex-col", className) }, props), { children: visibleItems }));
+}
+const PreviewListItem = React.forwardRef(
+  (_c, ref) => {
+    var _d = _c, { className, icon, title, subtitle, meta, action, isHoverable = true } = _d, props = __objRest(_d, ["className", "icon", "title", "subtitle", "meta", "action", "isHoverable"]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "flex items-center justify-between group relative bg-background transition-colors",
+          "px-6 h-16 border-b border-border last:border-0",
+          isHoverable && "hover:bg-muted/30 cursor-pointer",
+          className
+        )
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 overflow-hidden min-w-0 h-full py-2", children: [
+            icon && /* @__PURE__ */ jsx("div", { className: "shrink-0 flex items-center justify-center", children: icon }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex flex-col justify-center gap-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground truncate leading-snug", children: title }),
+              subtitle && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground truncate leading-snug", children: subtitle })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 shrink-0 pl-4", children: [
+            meta && /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2", action && "group-hover:opacity-0 transition-opacity"), children: meta }),
+            action && /* @__PURE__ */ jsx("div", { className: "absolute right-4 opacity-0 group-hover:opacity-100 transition-opacity flex items-center bg-background/95 backdrop-blur-sm pl-2", children: action })
+          ] })
+        ]
+      })
+    );
+  }
+);
+PreviewListItem.displayName = "PreviewListItem";
+export {
+  PreviewList,
+  PreviewListItem
+};
+//# sourceMappingURL=preview-list.js.map

package/dist/components/preview-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/preview-list.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../lib/utils\"\n\nexport function PreviewList({\n  children,\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  const items = React.Children.toArray(children)\n  const visibleItems = items.slice(0, 8)\n\n  return (\n    <div className={cn(\"flex flex-col\", className)} {...props}>\n      {visibleItems}\n    </div>\n  )\n}\n\nexport interface PreviewListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  icon?: React.ReactNode\n  title: React.ReactNode\n  subtitle?: React.ReactNode\n  meta?: React.ReactNode // e.g. time, badges on the right\n  action?: React.ReactNode // hover action like a \"Join\" button\n  isHoverable?: boolean\n}\n\nexport const PreviewListItem = React.forwardRef<HTMLDivElement, PreviewListItemProps>(\n  ({ className, icon, title, subtitle, meta, action, isHoverable = true, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex items-center justify-between group relative bg-background transition-colors\",\n          \"px-6 h-16 border-b border-border last:border-0\",\n          isHoverable && \"hover:bg-muted/30 cursor-pointer\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"flex items-center gap-3 overflow-hidden min-w-0 h-full py-2\">\n          {icon && <div className=\"shrink-0 flex items-center justify-center\">{icon}</div>}\n          <div className=\"min-w-0 flex flex-col justify-center gap-1\">\n            <div className=\"text-sm font-semibold text-foreground truncate leading-snug\">{title}</div>\n            {subtitle && <div className=\"text-xs text-muted-foreground truncate leading-snug\">{subtitle}</div>}\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-4 shrink-0 pl-4\">\n          {meta && <div className={cn(\"flex items-center gap-2\", action && \"group-hover:opacity-0 transition-opacity\")}>{meta}</div>}\n          \n          {action && (\n            <div className=\"absolute right-4 opacity-0 group-hover:opacity-100 transition-opacity flex items-center bg-background/95 backdrop-blur-sm pl-2\">\n              {action}\n            </div>\n          )}\n        </div>\n      </div>\n    )\n  }\n)\nPreviewListItem.displayName = \"PreviewListItem\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYI,cA8BM,YA9BN;AAZJ,YAAY,WAAW;AACvB,SAAS,UAAU;AAEZ,SAAS,YAAY,IAIa;AAJb,eAC1B;AAAA;AAAA,IACA;AAAA,EALF,IAG4B,IAGvB,kBAHuB,IAGvB;AAAA,IAFH;AAAA,IACA;AAAA;AAGA,QAAM,QAAQ,MAAM,SAAS,QAAQ,QAAQ;AAC7C,QAAM,eAAe,MAAM,MAAM,GAAG,CAAC;AAErC,SACE,oBAAC,sCAAI,WAAW,GAAG,iBAAiB,SAAS,KAAO,QAAnD,EACE,yBACH;AAEJ;AAWO,MAAM,kBAAkB,MAAM;AAAA,EACnC,CAAC,IAAkF,QAAQ;AAA1F,iBAAE,aAAW,MAAM,OAAO,UAAU,MAAM,QAAQ,cAAc,KA5BnE,IA4BG,IAAyE,kBAAzE,IAAyE,CAAvE,aAAW,QAAM,SAAO,YAAU,QAAM,UAAQ;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,eAAe;AAAA,UACf;AAAA,QACF;AAAA,SACI,QARL;AAAA,QAUC;AAAA,+BAAC,SAAI,WAAU,+DACZ;AAAA,oBAAQ,oBAAC,SAAI,WAAU,6CAA6C,gBAAK;AAAA,YAC1E,qBAAC,SAAI,WAAU,8CACb;AAAA,kCAAC,SAAI,WAAU,+DAA+D,iBAAM;AAAA,cACnF,YAAY,oBAAC,SAAI,WAAU,uDAAuD,oBAAS;AAAA,eAC9F;AAAA,aACF;AAAA,UAEA,qBAAC,SAAI,WAAU,yCACZ;AAAA,oBAAQ,oBAAC,SAAI,WAAW,GAAG,2BAA2B,UAAU,0CAA0C,GAAI,gBAAK;AAAA,YAEnH,UACC,oBAAC,SAAI,WAAU,kIACZ,kBACH;AAAA,aAEJ;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;","names":[]}

package/dist/components/progress.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Progress as Progress$1 } from 'radix-ui';
+
+declare function Progress({ className, value, ...props }: React.ComponentProps<typeof Progress$1.Root>): React.JSX.Element;
+
+export { Progress };

package/dist/components/progress.js

@@ -0,0 +1,69 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import { Progress as ProgressPrimitive } from "radix-ui";
+import { cn } from "../lib/utils.js";
+function Progress(_a) {
+  var _b = _a, {
+    className,
+    value
+  } = _b, props = __objRest(_b, [
+    "className",
+    "value"
+  ]);
+  return /* @__PURE__ */ jsx(
+    ProgressPrimitive.Root,
+    __spreadProps(__spreadValues({
+      "data-slot": "progress",
+      className: cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx(
+        ProgressPrimitive.Indicator,
+        {
+          "data-slot": "progress-indicator",
+          className: "bg-primary h-full w-full flex-1 transition-all",
+          style: { transform: `translateX(-${100 - (value || 0)}%)` }
+        }
+      )
+    })
+  );
+}
+export {
+  Progress
+};
+//# sourceMappingURL=progress.js.map

package/dist/components/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/progress.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Progress as ProgressPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../lib/utils\"\n\nfunction Progress({\n  className,\n  value,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        \"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"bg-primary h-full w-full flex-1 transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  )\n}\n\nexport { Progress }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBM;AAlBN,SAAS,YAAY,yBAAyB;AAE9C,SAAS,UAAU;AAEnB,SAAS,SAAS,IAIsC;AAJtC,eAChB;AAAA;AAAA,IACA;AAAA,EATF,IAOkB,IAGb,kBAHa,IAGb;AAAA,IAFH;AAAA,IACA;AAAA;AAGA,SACE;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,OACI,QANL;AAAA,MAQC;AAAA,QAAC,kBAAkB;AAAA,QAAlB;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,UACV,OAAO,EAAE,WAAW,eAAe,OAAO,SAAS,EAAE,KAAK;AAAA;AAAA,MAC5D;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/quick-action-chat-area.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+type QuickActionPriority = "normal" | "high" | "urgent";
+interface QuickActionSubmitPayload {
+    message: string;
+    priority: QuickActionPriority;
+}
+interface QuickActionChatAreaProps extends Omit<React.ComponentProps<"div">, "onSubmit"> {
+    placeholder?: string;
+    submitLabel?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    priority?: QuickActionPriority;
+    defaultPriority?: QuickActionPriority;
+    onPriorityChange?: (priority: QuickActionPriority) => void;
+    onSubmit: (payload: QuickActionSubmitPayload) => void;
+    allowEmptySubmit?: boolean;
+    clearOnSubmit?: boolean;
+    showEnterHint?: boolean;
+}
+declare function QuickActionChatArea({ className, placeholder, submitLabel, value, defaultValue, onValueChange, priority, defaultPriority, onPriorityChange, onSubmit, allowEmptySubmit, clearOnSubmit, showEnterHint, ...props }: QuickActionChatAreaProps): React.JSX.Element;
+
+export { QuickActionChatArea, type QuickActionPriority, type QuickActionSubmitPayload };