@handled-ai/design-system 0.8.0 → 0.9.0

package/dist/components/dashboard-cards.js

@@ -0,0 +1,164 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Card, CardHeader, CardTitle, CardContent } from "./card.js";
+import { Button } from "./button.js";
+import { Badge } from "./badge.js";
+import { PreviewList, PreviewListItem } from "./preview-list.js";
+import { Square, Clock, Video, CheckCircle2, CheckSquare, Eye } from "lucide-react";
+function TopTasksCard({ onViewAll }) {
+  return /* @__PURE__ */ jsxs(Card, { className: "rounded-xl border border-border shadow-sm overflow-hidden gap-0 py-0", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between pt-4 pb-3 px-6 border-b border-border bg-muted/20", children: [
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-bold tracking-tight", children: "Top Tasks" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: onViewAll,
+          className: "text-xs h-7 text-brand-purple hover:text-brand-purple/80 hover:bg-brand-purple/10",
+          children: "View all tasks \u2192"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxs(PreviewList, { children: [
+      /* @__PURE__ */ jsx(
+        PreviewListItem,
+        {
+          icon: /* @__PURE__ */ jsx(Square, { className: "w-4 h-4 text-muted-foreground hover:text-brand-purple transition-colors" }),
+          title: "Follow up with Lunchclub",
+          subtitle: "Churn Mitigation",
+          meta: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-muted-foreground", children: "Due in 2h" }),
+            /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-[10px] px-2 py-0 h-4 uppercase tracking-wider rounded-full shadow-none font-bold bg-foreground text-background hover:bg-foreground/90", children: "Urgent" })
+          ] }),
+          onClick: onViewAll
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PreviewListItem,
+        {
+          icon: /* @__PURE__ */ jsx(Square, { className: "w-4 h-4 text-muted-foreground hover:text-brand-purple transition-colors" }),
+          title: "Outbound opportunity: CloudKitchen",
+          subtitle: "Outbound",
+          meta: /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-muted-foreground", children: "Due tomorrow" }),
+          onClick: onViewAll
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PreviewListItem,
+        {
+          icon: /* @__PURE__ */ jsx(Square, { className: "w-4 h-4 text-muted-foreground hover:text-brand-purple transition-colors" }),
+          title: "New CFO welcome: Loom",
+          subtitle: "Relationship",
+          meta: /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-muted-foreground", children: "Due next week" }),
+          onClick: onViewAll
+        }
+      )
+    ] }) })
+  ] });
+}
+function UpcomingMeetingsCard() {
+  return /* @__PURE__ */ jsxs(Card, { className: "rounded-xl border border-border shadow-sm overflow-hidden gap-0 py-0", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between pt-4 pb-3 px-6 border-b border-border bg-muted/20", children: [
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-bold tracking-tight", children: "Upcoming Meetings" }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "text-xs h-7 text-brand-purple hover:text-brand-purple/80 hover:bg-brand-purple/10", children: "View all meetings \u2192" })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxs(PreviewList, { children: [
+      /* @__PURE__ */ jsx(
+        PreviewListItem,
+        {
+          icon: /* @__PURE__ */ jsx(Clock, { className: "w-4 h-4 text-blue-500" }),
+          title: "Q3 Review - Acme Corp",
+          subtitle: "2:00 PM - 3:00 PM",
+          meta: /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full", children: "Starts in 10 mins" }),
+          action: /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", className: "h-7 text-xs shadow-sm bg-background hover:bg-muted", children: [
+            /* @__PURE__ */ jsx(Video, { className: "w-3.5 h-3.5 mr-1.5" }),
+            " Join"
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PreviewListItem,
+        {
+          icon: /* @__PURE__ */ jsx(Clock, { className: "w-4 h-4 text-blue-500" }),
+          title: "Initial Sync - Initech",
+          subtitle: "4:30 PM - 5:00 PM",
+          action: /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", className: "h-7 text-xs shadow-sm bg-background hover:bg-muted", children: [
+            /* @__PURE__ */ jsx(Video, { className: "w-3.5 h-3.5 mr-1.5" }),
+            " Join"
+          ] })
+        }
+      )
+    ] }) })
+  ] });
+}
+function RecentlyCompletedCard() {
+  return /* @__PURE__ */ jsxs(Card, { className: "rounded-xl border border-border shadow-sm overflow-hidden opacity-80 bg-muted/5 gap-0 py-0", children: [
+    /* @__PURE__ */ jsx(CardHeader, { className: "flex flex-row items-center justify-between pt-4 pb-3 px-6 border-b border-border bg-muted/10", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-bold tracking-tight text-muted-foreground", children: "Recently Completed" }) }),
+    /* @__PURE__ */ jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxs(PreviewList, { children: [
+      /* @__PURE__ */ jsx(
+        PreviewListItem,
+        {
+          icon: /* @__PURE__ */ jsx(CheckCircle2, { className: "w-4 h-4 text-emerald-500" }),
+          title: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-medium", children: "Sync - Globex Inc" }),
+          subtitle: "10:00 AM",
+          action: /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", className: "h-7 text-xs shadow-sm bg-background hover:bg-muted", children: [
+            /* @__PURE__ */ jsx(Eye, { className: "w-3.5 h-3.5 mr-1.5" }),
+            " View"
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PreviewListItem,
+        {
+          icon: /* @__PURE__ */ jsx(CheckCircle2, { className: "w-4 h-4 text-emerald-500" }),
+          title: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-medium", children: "Check-in - Pied Piper" }),
+          subtitle: "9:00 AM",
+          action: /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", className: "h-7 text-xs shadow-sm bg-background hover:bg-muted", children: [
+            /* @__PURE__ */ jsx(Eye, { className: "w-3.5 h-3.5 mr-1.5" }),
+            " View"
+          ] })
+        }
+      )
+    ] }) })
+  ] });
+}
+function CheckInsCard() {
+  return /* @__PURE__ */ jsxs(Card, { className: "rounded-xl border border-border shadow-sm overflow-hidden gap-0 py-0", children: [
+    /* @__PURE__ */ jsx(CardHeader, { className: "flex flex-row items-center justify-between pt-4 pb-3 px-6 border-b border-border bg-muted/20", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-bold tracking-tight", children: "Today's Check-ins" }) }),
+    /* @__PURE__ */ jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxs(PreviewList, { children: [
+      /* @__PURE__ */ jsx(
+        PreviewListItem,
+        {
+          icon: /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(CheckSquare, { className: "w-4 h-4 text-emerald-600" }) }),
+          title: "Morning Standup",
+          subtitle: "9:00 AM",
+          meta: /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "bg-emerald-50 text-emerald-700 hover:bg-emerald-100 shadow-none border-transparent font-semibold text-[10px]", children: "Done" }),
+          action: /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", className: "h-7 text-xs shadow-sm bg-background hover:bg-muted", children: [
+            /* @__PURE__ */ jsx(Eye, { className: "w-3.5 h-3.5 mr-1.5" }),
+            " View"
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PreviewListItem,
+        {
+          icon: /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-full bg-muted flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(Clock, { className: "w-4 h-4 text-muted-foreground" }) }),
+          title: "Evening Wrap-up",
+          subtitle: "5:00 PM",
+          meta: /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-muted-foreground shadow-none font-semibold text-[10px]", children: "Pending" }),
+          action: /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", className: "h-7 text-xs shadow-sm bg-background hover:bg-muted", children: [
+            /* @__PURE__ */ jsx(CheckSquare, { className: "w-3.5 h-3.5 mr-1.5" }),
+            " Complete"
+          ] })
+        }
+      )
+    ] }) })
+  ] });
+}
+export {
+  CheckInsCard,
+  RecentlyCompletedCard,
+  TopTasksCard,
+  UpcomingMeetingsCard
+};
+//# sourceMappingURL=dashboard-cards.js.map

package/dist/components/dashboard-cards.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/dashboard-cards.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Card, CardHeader, CardTitle, CardContent } from \"./card\"\nimport { Button } from \"./button\"\nimport { Badge } from \"./badge\"\nimport { PreviewList, PreviewListItem } from \"./preview-list\"\nimport { Square, Clock, Video, CheckCircle2, CheckSquare, Eye } from \"lucide-react\"\n\nexport function TopTasksCard({ onViewAll }: { onViewAll?: () => void }) {\n  return (\n    <Card className=\"rounded-xl border border-border shadow-sm overflow-hidden gap-0 py-0\">\n      <CardHeader className=\"flex flex-row items-center justify-between pt-4 pb-3 px-6 border-b border-border bg-muted/20\">\n        <CardTitle className=\"text-sm font-bold tracking-tight\">Top Tasks</CardTitle>\n        <Button \n          variant=\"ghost\" \n          size=\"sm\" \n          onClick={onViewAll} \n          className=\"text-xs h-7 text-brand-purple hover:text-brand-purple/80 hover:bg-brand-purple/10\"\n        >\n          View all tasks &rarr;\n        </Button>\n      </CardHeader>\n      <CardContent className=\"p-0\">\n        <PreviewList>\n          <PreviewListItem\n            icon={<Square className=\"w-4 h-4 text-muted-foreground hover:text-brand-purple transition-colors\" />}\n            title=\"Follow up with Lunchclub\"\n            subtitle=\"Churn Mitigation\"\n            meta={\n              <>\n                <span className=\"text-[11px] font-medium text-muted-foreground\">Due in 2h</span>\n                <Badge variant=\"destructive\" className=\"text-[10px] px-2 py-0 h-4 uppercase tracking-wider rounded-full shadow-none font-bold bg-foreground text-background hover:bg-foreground/90\">Urgent</Badge>\n              </>\n            }\n            onClick={onViewAll}\n          />\n          <PreviewListItem\n            icon={<Square className=\"w-4 h-4 text-muted-foreground hover:text-brand-purple transition-colors\" />}\n            title=\"Outbound opportunity: CloudKitchen\"\n            subtitle=\"Outbound\"\n            meta={<span className=\"text-[11px] font-medium text-muted-foreground\">Due tomorrow</span>}\n            onClick={onViewAll}\n          />\n          <PreviewListItem\n            icon={<Square className=\"w-4 h-4 text-muted-foreground hover:text-brand-purple transition-colors\" />}\n            title=\"New CFO welcome: Loom\"\n            subtitle=\"Relationship\"\n            meta={<span className=\"text-[11px] font-medium text-muted-foreground\">Due next week</span>}\n            onClick={onViewAll}\n          />\n        </PreviewList>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport function UpcomingMeetingsCard() {\n  return (\n    <Card className=\"rounded-xl border border-border shadow-sm overflow-hidden gap-0 py-0\">\n      <CardHeader className=\"flex flex-row items-center justify-between pt-4 pb-3 px-6 border-b border-border bg-muted/20\">\n        <CardTitle className=\"text-sm font-bold tracking-tight\">Upcoming Meetings</CardTitle>\n        <Button variant=\"ghost\" size=\"sm\" className=\"text-xs h-7 text-brand-purple hover:text-brand-purple/80 hover:bg-brand-purple/10\">\n          View all meetings &rarr;\n        </Button>\n      </CardHeader>\n      <CardContent className=\"p-0\">\n        <PreviewList>\n          <PreviewListItem\n            icon={<Clock className=\"w-4 h-4 text-blue-500\" />}\n            title=\"Q3 Review - Acme Corp\"\n            subtitle=\"2:00 PM - 3:00 PM\"\n            meta={<span className=\"text-[11px] font-medium text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full\">Starts in 10 mins</span>}\n            action={\n              <Button size=\"sm\" variant=\"outline\" className=\"h-7 text-xs shadow-sm bg-background hover:bg-muted\">\n                <Video className=\"w-3.5 h-3.5 mr-1.5\" /> Join\n              </Button>\n            }\n          />\n          <PreviewListItem\n            icon={<Clock className=\"w-4 h-4 text-blue-500\" />}\n            title=\"Initial Sync - Initech\"\n            subtitle=\"4:30 PM - 5:00 PM\"\n            action={\n              <Button size=\"sm\" variant=\"outline\" className=\"h-7 text-xs shadow-sm bg-background hover:bg-muted\">\n                <Video className=\"w-3.5 h-3.5 mr-1.5\" /> Join\n              </Button>\n            }\n          />\n        </PreviewList>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport function RecentlyCompletedCard() {\n  return (\n    <Card className=\"rounded-xl border border-border shadow-sm overflow-hidden opacity-80 bg-muted/5 gap-0 py-0\">\n      <CardHeader className=\"flex flex-row items-center justify-between pt-4 pb-3 px-6 border-b border-border bg-muted/10\">\n        <CardTitle className=\"text-sm font-bold tracking-tight text-muted-foreground\">Recently Completed</CardTitle>\n      </CardHeader>\n      <CardContent className=\"p-0\">\n        <PreviewList>\n          <PreviewListItem\n            icon={<CheckCircle2 className=\"w-4 h-4 text-emerald-500\" />}\n            title={<span className=\"text-muted-foreground font-medium\">Sync - Globex Inc</span>}\n            subtitle=\"10:00 AM\"\n            action={\n              <Button size=\"sm\" variant=\"outline\" className=\"h-7 text-xs shadow-sm bg-background hover:bg-muted\">\n                <Eye className=\"w-3.5 h-3.5 mr-1.5\" /> View\n              </Button>\n            }\n          />\n          <PreviewListItem\n            icon={<CheckCircle2 className=\"w-4 h-4 text-emerald-500\" />}\n            title={<span className=\"text-muted-foreground font-medium\">Check-in - Pied Piper</span>}\n            subtitle=\"9:00 AM\"\n            action={\n              <Button size=\"sm\" variant=\"outline\" className=\"h-7 text-xs shadow-sm bg-background hover:bg-muted\">\n                <Eye className=\"w-3.5 h-3.5 mr-1.5\" /> View\n              </Button>\n            }\n          />\n        </PreviewList>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport function CheckInsCard() {\n  return (\n    <Card className=\"rounded-xl border border-border shadow-sm overflow-hidden gap-0 py-0\">\n      <CardHeader className=\"flex flex-row items-center justify-between pt-4 pb-3 px-6 border-b border-border bg-muted/20\">\n        <CardTitle className=\"text-sm font-bold tracking-tight\">Today&apos;s Check-ins</CardTitle>\n      </CardHeader>\n      <CardContent className=\"p-0\">\n        <PreviewList>\n          <PreviewListItem\n            icon={\n              <div className=\"w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center shrink-0\">\n                <CheckSquare className=\"w-4 h-4 text-emerald-600\" />\n              </div>\n            }\n            title=\"Morning Standup\"\n            subtitle=\"9:00 AM\"\n            meta={<Badge variant=\"secondary\" className=\"bg-emerald-50 text-emerald-700 hover:bg-emerald-100 shadow-none border-transparent font-semibold text-[10px]\">Done</Badge>}\n            action={\n              <Button size=\"sm\" variant=\"outline\" className=\"h-7 text-xs shadow-sm bg-background hover:bg-muted\">\n                <Eye className=\"w-3.5 h-3.5 mr-1.5\" /> View\n              </Button>\n            }\n          />\n          <PreviewListItem\n            icon={\n              <div className=\"w-8 h-8 rounded-full bg-muted flex items-center justify-center shrink-0\">\n                <Clock className=\"w-4 h-4 text-muted-foreground\" />\n              </div>\n            }\n            title=\"Evening Wrap-up\"\n            subtitle=\"5:00 PM\"\n            meta={<Badge variant=\"outline\" className=\"text-muted-foreground shadow-none font-semibold text-[10px]\">Pending</Badge>}\n            action={\n              <Button size=\"sm\" variant=\"outline\" className=\"h-7 text-xs shadow-sm bg-background hover:bg-muted\">\n                <CheckSquare className=\"w-3.5 h-3.5 mr-1.5\" /> Complete\n              </Button>\n            }\n          />\n        </PreviewList>\n      </CardContent>\n    </Card>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/components/data-table-display.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { SortingState } from '@tanstack/react-table';
+
+interface DataTableDisplayColumn {
+    id: string;
+    label: string;
+    visible: boolean;
+    canHide: boolean;
+}
+interface DataTableDisplayProps {
+    sorting: SortingState;
+    onSortingChange: (next: SortingState) => void;
+    columns: DataTableDisplayColumn[];
+    onToggleColumn: (columnId: string) => void;
+    onReset: () => void;
+}
+declare function DataTableDisplay({ sorting, onSortingChange, columns, onToggleColumn, onReset, }: DataTableDisplayProps): React.JSX.Element;
+
+export { DataTableDisplay, type DataTableDisplayColumn };

package/dist/components/data-table-display.js

@@ -0,0 +1,109 @@
+"use client"
+
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, ArrowUpDown, LayoutGrid } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger
+} from "./dropdown-menu.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "./select.js";
+function DataTableDisplay({
+  sorting,
+  onSortingChange,
+  columns,
+  onToggleColumn,
+  onReset
+}) {
+  var _a, _b, _c, _d, _e;
+  const sortableColumns = columns;
+  const currentSortId = (_d = (_c = (_a = sorting[0]) == null ? void 0 : _a.id) != null ? _c : (_b = sortableColumns[0]) == null ? void 0 : _b.id) != null ? _d : "";
+  const isDescending = Boolean((_e = sorting[0]) == null ? void 0 : _e.desc);
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "h-8 gap-2 rounded-md border-border/60 bg-background text-xs font-normal shadow-none hover:bg-muted/50",
+        children: [
+          /* @__PURE__ */ jsx(LayoutGrid, { className: "h-3.5 w-3.5" }),
+          "Display"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "w-[320px] p-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-xs font-semibold text-foreground", children: [
+          /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3.5 w-3.5" }),
+          "Sorting"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: currentSortId,
+              onValueChange: (value) => {
+                var _a2, _b2;
+                return onSortingChange([{ id: value, desc: (_b2 = (_a2 = sorting[0]) == null ? void 0 : _a2.desc) != null ? _b2 : false }]);
+              },
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-full text-xs", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Sort by..." }) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: sortableColumns.map((column) => /* @__PURE__ */ jsx(SelectItem, { value: column.id, className: "text-xs", children: column.label }, column.id)) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "icon",
+              className: "h-8 w-8 shrink-0",
+              onClick: () => onSortingChange([{ id: currentSortId, desc: !isDescending }]),
+              disabled: !currentSortId,
+              children: isDescending ? /* @__PURE__ */ jsx(ArrowDown, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ArrowUp, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Display properties" }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: columns.map((column) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            disabled: !column.canHide,
+            onClick: () => onToggleColumn(column.id),
+            className: cn(
+              "rounded-md border px-2.5 py-1 text-[11px] font-medium transition-all",
+              column.visible ? "border-brand-purple/30 bg-brand-purple/10 text-brand-purple" : "border-border bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground",
+              !column.canHide && "cursor-not-allowed opacity-50"
+            ),
+            children: column.label
+          },
+          column.id
+        )) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-2 flex items-center justify-start border-t border-border pt-2", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "text-[10px] font-medium text-muted-foreground transition-colors hover:text-foreground",
+          onClick: onReset,
+          children: "Reset"
+        }
+      ) })
+    ] }) })
+  ] });
+}
+export {
+  DataTableDisplay
+};
+//# sourceMappingURL=data-table-display.js.map

package/dist/components/data-table-display.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/data-table-display.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowDown, ArrowUp, ArrowUpDown, LayoutGrid } from \"lucide-react\"\nimport type { SortingState } from \"@tanstack/react-table\"\n\nimport { cn } from \"../lib/utils\"\nimport { Button } from \"./button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"./select\"\n\nexport interface DataTableDisplayColumn {\n  id: string\n  label: string\n  visible: boolean\n  canHide: boolean\n}\n\ninterface DataTableDisplayProps {\n  sorting: SortingState\n  onSortingChange: (next: SortingState) => void\n  columns: DataTableDisplayColumn[]\n  onToggleColumn: (columnId: string) => void\n  onReset: () => void\n}\n\nexport function DataTableDisplay({\n  sorting,\n  onSortingChange,\n  columns,\n  onToggleColumn,\n  onReset,\n}: DataTableDisplayProps) {\n  const sortableColumns = columns\n  const currentSortId = sorting[0]?.id ?? sortableColumns[0]?.id ?? \"\"\n  const isDescending = Boolean(sorting[0]?.desc)\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          className=\"h-8 gap-2 rounded-md border-border/60 bg-background text-xs font-normal shadow-none hover:bg-muted/50\"\n        >\n          <LayoutGrid className=\"h-3.5 w-3.5\" />\n          Display\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-[320px] p-4\">\n        <div className=\"space-y-4\">\n          <div className=\"space-y-2\">\n            <span className=\"flex items-center gap-1.5 text-xs font-semibold text-foreground\">\n              <ArrowUpDown className=\"h-3.5 w-3.5\" />\n              Sorting\n            </span>\n            <div className=\"flex items-center gap-2\">\n              <Select\n                value={currentSortId}\n                onValueChange={(value) =>\n                  onSortingChange([{ id: value, desc: sorting[0]?.desc ?? false }])\n                }\n              >\n                <SelectTrigger className=\"h-8 w-full text-xs\">\n                  <SelectValue placeholder=\"Sort by...\" />\n                </SelectTrigger>\n                <SelectContent>\n                  {sortableColumns.map((column) => (\n                    <SelectItem key={column.id} value={column.id} className=\"text-xs\">\n                      {column.label}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0\"\n                onClick={() =>\n                  onSortingChange([{ id: currentSortId, desc: !isDescending }])\n                }\n                disabled={!currentSortId}\n              >\n                {isDescending ? (\n                  <ArrowDown className=\"h-3.5 w-3.5\" />\n                ) : (\n                  <ArrowUp className=\"h-3.5 w-3.5\" />\n                )}\n              </Button>\n            </div>\n          </div>\n\n          <div className=\"space-y-2\">\n            <span className=\"text-xs font-medium text-muted-foreground\">\n              Display properties\n            </span>\n            <div className=\"flex flex-wrap gap-2\">\n              {columns.map((column) => (\n                <button\n                  key={column.id}\n                  disabled={!column.canHide}\n                  onClick={() => onToggleColumn(column.id)}\n                  className={cn(\n                    \"rounded-md border px-2.5 py-1 text-[11px] font-medium transition-all\",\n                    column.visible\n                      ? \"border-brand-purple/30 bg-brand-purple/10 text-brand-purple\"\n                      : \"border-border bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground\",\n                    !column.canHide && \"cursor-not-allowed opacity-50\"\n                  )}\n                >\n                  {column.label}\n                </button>\n              ))}\n            </div>\n          </div>\n\n          <div className=\"mt-2 flex items-center justify-start border-t border-border pt-2\">\n            <button\n              className=\"text-[10px] font-medium text-muted-foreground transition-colors hover:text-foreground\"\n              onClick={onReset}\n            >\n              Reset\n            </button>\n          </div>\n        </div>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n"],"mappings":";AAkDQ,SAKE,KALF;AA/CR,SAAS,WAAW,SAAS,aAAa,kBAAkB;AAG5D,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAiBA,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AA1C1B;AA2CE,QAAM,kBAAkB;AACxB,QAAM,iBAAgB,yBAAQ,CAAC,MAAT,mBAAY,OAAZ,aAAkB,qBAAgB,CAAC,MAAjB,mBAAoB,OAAtC,YAA4C;AAClE,QAAM,eAAe,SAAQ,aAAQ,CAAC,MAAT,mBAAY,IAAI;AAE7C,SACE,qBAAC,gBACC;AAAA,wBAAC,uBAAoB,SAAO,MAC1B;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,WAAU;AAAA,QAEV;AAAA,8BAAC,cAAW,WAAU,eAAc;AAAA,UAAE;AAAA;AAAA;AAAA,IAExC,GACF;AAAA,IACA,oBAAC,uBAAoB,OAAM,OAAM,WAAU,iBACzC,+BAAC,SAAI,WAAU,aACb;AAAA,2BAAC,SAAI,WAAU,aACb;AAAA,6BAAC,UAAK,WAAU,mEACd;AAAA,8BAAC,eAAY,WAAU,eAAc;AAAA,UAAE;AAAA,WAEzC;AAAA,QACA,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,eAAe,CAAC,UAAO;AArEvC,oBAAAA,KAAAC;AAsEkB,uCAAgB,CAAC,EAAE,IAAI,OAAO,OAAMA,OAAAD,MAAA,QAAQ,CAAC,MAAT,gBAAAA,IAAY,SAAZ,OAAAC,MAAoB,MAAM,CAAC,CAAC;AAAA;AAAA,cAGlE;AAAA,oCAAC,iBAAc,WAAU,sBACvB,8BAAC,eAAY,aAAY,cAAa,GACxC;AAAA,gBACA,oBAAC,iBACE,0BAAgB,IAAI,CAAC,WACpB,oBAAC,cAA2B,OAAO,OAAO,IAAI,WAAU,WACrD,iBAAO,SADO,OAAO,EAExB,CACD,GACH;AAAA;AAAA;AAAA,UACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS,MACP,gBAAgB,CAAC,EAAE,IAAI,eAAe,MAAM,CAAC,aAAa,CAAC,CAAC;AAAA,cAE9D,UAAU,CAAC;AAAA,cAEV,yBACC,oBAAC,aAAU,WAAU,eAAc,IAEnC,oBAAC,WAAQ,WAAU,eAAc;AAAA;AAAA,UAErC;AAAA,WACF;AAAA,SACF;AAAA,MAEA,qBAAC,SAAI,WAAU,aACb;AAAA,4BAAC,UAAK,WAAU,6CAA4C,gCAE5D;AAAA,QACA,oBAAC,SAAI,WAAU,wBACZ,kBAAQ,IAAI,CAAC,WACZ;AAAA,UAAC;AAAA;AAAA,YAEC,UAAU,CAAC,OAAO;AAAA,YAClB,SAAS,MAAM,eAAe,OAAO,EAAE;AAAA,YACvC,WAAW;AAAA,cACT;AAAA,cACA,OAAO,UACH,gEACA;AAAA,cACJ,CAAC,OAAO,WAAW;AAAA,YACrB;AAAA,YAEC,iBAAO;AAAA;AAAA,UAXH,OAAO;AAAA,QAYd,CACD,GACH;AAAA,SACF;AAAA,MAEA,oBAAC,SAAI,WAAU,oEACb;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS;AAAA,UACV;AAAA;AAAA,MAED,GACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;","names":["_a","_b"]}

package/dist/components/data-table-filter.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+interface DataTableFilterCategory {
+    id: string;
+    label: string;
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+    options: string[];
+}
+interface DataTableFilterProps {
+    categories: DataTableFilterCategory[];
+    selectedFilters: Record<string, string[]>;
+    onToggleFilter: (categoryId: string, option: string) => void;
+}
+declare function DataTableFilter({ categories, selectedFilters, onToggleFilter, }: DataTableFilterProps): React.JSX.Element;
+
+export { DataTableFilter, type DataTableFilterCategory };

package/dist/components/data-table-filter.js

@@ -0,0 +1,107 @@
+"use client"
+
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ListFilter, Search } from "lucide-react";
+import { Button } from "./button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+} from "./dropdown-menu.js";
+function DataTableFilter({
+  categories,
+  selectedFilters,
+  onToggleFilter
+}) {
+  const [query, setQuery] = React.useState("");
+  const visibleCategories = React.useMemo(() => {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized) {
+      return categories;
+    }
+    return categories.filter((category) => {
+      if (category.label.toLowerCase().includes(normalized)) {
+        return true;
+      }
+      return category.options.some(
+        (option) => option.toLowerCase().includes(normalized)
+      );
+    });
+  }, [categories, query]);
+  const activeCount = React.useMemo(
+    () => Object.values(selectedFilters).reduce(
+      (count, selected) => count + selected.length,
+      0
+    ),
+    [selectedFilters]
+  );
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "h-8 gap-2 rounded-md border-border/60 bg-background text-xs font-normal shadow-none hover:bg-muted/50",
+        children: [
+          /* @__PURE__ */ jsx(ListFilter, { className: "h-3.5 w-3.5" }),
+          "Filter",
+          activeCount > 0 ? /* @__PURE__ */ jsx("span", { className: "rounded bg-muted px-1.5 py-0 text-[10px] font-semibold", children: activeCount }) : null
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-[240px] p-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 border-b border-border bg-popover p-2", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "h-8 w-full rounded-md bg-muted/50 py-1 pr-2 pl-7 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted",
+            placeholder: "Search filters...",
+            value: query,
+            onChange: (event) => setQuery(event.target.value),
+            onClick: (event) => event.stopPropagation(),
+            onKeyDown: (event) => event.stopPropagation()
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "max-h-[320px] overflow-y-auto p-1", children: [
+        visibleCategories.map((category) => /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+          /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { className: "cursor-pointer py-1.5 text-xs", children: [
+            /* @__PURE__ */ jsx(category.icon, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground" }),
+            category.label
+          ] }),
+          /* @__PURE__ */ jsx(DropdownMenuSubContent, { className: "w-52 p-1", children: category.options.map((option) => {
+            var _a, _b;
+            const selected = (_b = (_a = selectedFilters[category.id]) == null ? void 0 : _a.includes(option)) != null ? _b : false;
+            return /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                className: "cursor-pointer justify-between text-xs",
+                onSelect: (event) => {
+                  event.preventDefault();
+                  onToggleFilter(category.id, option);
+                },
+                children: [
+                  option,
+                  selected ? /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold text-brand-purple", children: "Applied" }) : null
+                ]
+              },
+              option
+            );
+          }) })
+        ] }, category.id)),
+        visibleCategories.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-2 text-center text-xs text-muted-foreground", children: "No filters found" }) : null
+      ] })
+    ] })
+  ] });
+}
+export {
+  DataTableFilter
+};
+//# sourceMappingURL=data-table-filter.js.map

package/dist/components/data-table-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/data-table-filter.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ListFilter, Search } from \"lucide-react\"\n\nimport { Button } from \"./button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\"\n\nexport interface DataTableFilterCategory {\n  id: string\n  label: string\n  icon: React.ComponentType<{ className?: string }>\n  options: string[]\n}\n\ninterface DataTableFilterProps {\n  categories: DataTableFilterCategory[]\n  selectedFilters: Record<string, string[]>\n  onToggleFilter: (categoryId: string, option: string) => void\n}\n\nexport function DataTableFilter({\n  categories,\n  selectedFilters,\n  onToggleFilter,\n}: DataTableFilterProps) {\n  const [query, setQuery] = React.useState(\"\")\n\n  const visibleCategories = React.useMemo(() => {\n    const normalized = query.trim().toLowerCase()\n    if (!normalized) {\n      return categories\n    }\n\n    return categories.filter((category) => {\n      if (category.label.toLowerCase().includes(normalized)) {\n        return true\n      }\n\n      return category.options.some((option) =>\n        option.toLowerCase().includes(normalized)\n      )\n    })\n  }, [categories, query])\n\n  const activeCount = React.useMemo(\n    () =>\n      Object.values(selectedFilters).reduce(\n        (count, selected) => count + selected.length,\n        0\n      ),\n    [selectedFilters]\n  )\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          className=\"h-8 gap-2 rounded-md border-border/60 bg-background text-xs font-normal shadow-none hover:bg-muted/50\"\n        >\n          <ListFilter className=\"h-3.5 w-3.5\" />\n          Filter\n          {activeCount > 0 ? (\n            <span className=\"rounded bg-muted px-1.5 py-0 text-[10px] font-semibold\">\n              {activeCount}\n            </span>\n          ) : null}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\" className=\"w-[240px] p-0\">\n        <div className=\"sticky top-0 z-10 border-b border-border bg-popover p-2\">\n          <div className=\"relative\">\n            <Search className=\"absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground\" />\n            <input\n              className=\"h-8 w-full rounded-md bg-muted/50 py-1 pr-2 pl-7 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted\"\n              placeholder=\"Search filters...\"\n              value={query}\n              onChange={(event) => setQuery(event.target.value)}\n              onClick={(event) => event.stopPropagation()}\n              onKeyDown={(event) => event.stopPropagation()}\n            />\n          </div>\n        </div>\n\n        <div className=\"max-h-[320px] overflow-y-auto p-1\">\n          {visibleCategories.map((category) => (\n            <DropdownMenuSub key={category.id}>\n              <DropdownMenuSubTrigger className=\"cursor-pointer py-1.5 text-xs\">\n                <category.icon className=\"mr-2 h-3.5 w-3.5 text-muted-foreground\" />\n                {category.label}\n              </DropdownMenuSubTrigger>\n              <DropdownMenuSubContent className=\"w-52 p-1\">\n                {category.options.map((option) => {\n                  const selected =\n                    selectedFilters[category.id]?.includes(option) ?? false\n\n                  return (\n                    <DropdownMenuItem\n                      key={option}\n                      className=\"cursor-pointer justify-between text-xs\"\n                      onSelect={(event) => {\n                        event.preventDefault()\n                        onToggleFilter(category.id, option)\n                      }}\n                    >\n                      {option}\n                      {selected ? (\n                        <span className=\"text-[10px] font-semibold text-brand-purple\">\n                          Applied\n                        </span>\n                      ) : null}\n                    </DropdownMenuItem>\n                  )\n                })}\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n          ))}\n\n          {visibleCategories.length === 0 ? (\n            <div className=\"p-2 text-center text-xs text-muted-foreground\">\n              No filters found\n            </div>\n          ) : null}\n        </div>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n"],"mappings":";AAiEQ,SAKE,KALF;AA/DR,YAAY,WAAW;AACvB,SAAS,YAAY,cAAc;AAEnC,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAeA,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,EAAE;AAE3C,QAAM,oBAAoB,MAAM,QAAQ,MAAM;AAC5C,UAAM,aAAa,MAAM,KAAK,EAAE,YAAY;AAC5C,QAAI,CAAC,YAAY;AACf,aAAO;AAAA,IACT;AAEA,WAAO,WAAW,OAAO,CAAC,aAAa;AACrC,UAAI,SAAS,MAAM,YAAY,EAAE,SAAS,UAAU,GAAG;AACrD,eAAO;AAAA,MACT;AAEA,aAAO,SAAS,QAAQ;AAAA,QAAK,CAAC,WAC5B,OAAO,YAAY,EAAE,SAAS,UAAU;AAAA,MAC1C;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,QAAM,cAAc,MAAM;AAAA,IACxB,MACE,OAAO,OAAO,eAAe,EAAE;AAAA,MAC7B,CAAC,OAAO,aAAa,QAAQ,SAAS;AAAA,MACtC;AAAA,IACF;AAAA,IACF,CAAC,eAAe;AAAA,EAClB;AAEA,SACE,qBAAC,gBACC;AAAA,wBAAC,uBAAoB,SAAO,MAC1B;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,WAAU;AAAA,QAEV;AAAA,8BAAC,cAAW,WAAU,eAAc;AAAA,UAAE;AAAA,UAErC,cAAc,IACb,oBAAC,UAAK,WAAU,0DACb,uBACH,IACE;AAAA;AAAA;AAAA,IACN,GACF;AAAA,IACA,qBAAC,uBAAoB,OAAM,SAAQ,WAAU,iBAC3C;AAAA,0BAAC,SAAI,WAAU,2DACb,+BAAC,SAAI,WAAU,YACb;AAAA,4BAAC,UAAO,WAAU,8EAA6E;AAAA,QAC/F;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,aAAY;AAAA,YACZ,OAAO;AAAA,YACP,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,YAChD,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,YAC1C,WAAW,CAAC,UAAU,MAAM,gBAAgB;AAAA;AAAA,QAC9C;AAAA,SACF,GACF;AAAA,MAEA,qBAAC,SAAI,WAAU,qCACZ;AAAA,0BAAkB,IAAI,CAAC,aACtB,qBAAC,mBACC;AAAA,+BAAC,0BAAuB,WAAU,iCAChC;AAAA,gCAAC,SAAS,MAAT,EAAc,WAAU,0CAAyC;AAAA,YACjE,SAAS;AAAA,aACZ;AAAA,UACA,oBAAC,0BAAuB,WAAU,YAC/B,mBAAS,QAAQ,IAAI,CAAC,WAAW;AAtGlD;AAuGkB,kBAAM,YACJ,2BAAgB,SAAS,EAAE,MAA3B,mBAA8B,SAAS,YAAvC,YAAkD;AAEpD,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,WAAU;AAAA,gBACV,UAAU,CAAC,UAAU;AACnB,wBAAM,eAAe;AACrB,iCAAe,SAAS,IAAI,MAAM;AAAA,gBACpC;AAAA,gBAEC;AAAA;AAAA,kBACA,WACC,oBAAC,UAAK,WAAU,+CAA8C,qBAE9D,IACE;AAAA;AAAA;AAAA,cAZC;AAAA,YAaP;AAAA,UAEJ,CAAC,GACH;AAAA,aA5BoB,SAAS,EA6B/B,CACD;AAAA,QAEA,kBAAkB,WAAW,IAC5B,oBAAC,SAAI,WAAU,iDAAgD,8BAE/D,IACE;AAAA,SACN;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/data-table-quick-views.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+type DataTableQuickViewValue = string | null;
+interface DataTableQuickViewsProps {
+    quickViews: string[];
+    moreViews: string[];
+    activeView: DataTableQuickViewValue;
+    onViewChange: (next: DataTableQuickViewValue) => void;
+    className?: string;
+}
+declare function DataTableQuickViews({ quickViews, moreViews, activeView, onViewChange, className, }: DataTableQuickViewsProps): React.JSX.Element;
+
+export { type DataTableQuickViewValue, DataTableQuickViews };

package/dist/components/data-table-quick-views.js

@@ -0,0 +1,90 @@
+"use client"
+
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, X } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "./dropdown-menu.js";
+function DataTableQuickViews({
+  quickViews,
+  moreViews,
+  activeView,
+  onViewChange,
+  className
+}) {
+  const isMoreActive = Boolean(activeView && moreViews.includes(activeView));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 overflow-x-auto border-b border-border px-4 pb-3 pt-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "mr-1 shrink-0 text-xs font-medium text-muted-foreground/80", children: "Quick views:" }),
+        quickViews.map((view) => {
+          const isActive = activeView === view;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => onViewChange(isActive ? null : view),
+              className: cn(
+                "whitespace-nowrap rounded-full border px-3 py-1 text-xs transition-colors",
+                isActive ? "border-brand-purple/30 bg-brand-purple/10 font-medium text-brand-purple" : "border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground"
+              ),
+              children: view
+            },
+            view
+          );
+        }),
+        /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: cn(
+                "flex items-center gap-1 whitespace-nowrap rounded-full border px-3 py-1 text-xs transition-colors",
+                isMoreActive ? "border-brand-purple/30 bg-brand-purple/10 font-medium text-brand-purple" : "border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground"
+              ),
+              children: [
+                isMoreActive ? activeView : "More...",
+                /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 opacity-60" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-56", children: moreViews.map((view) => /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              className: cn(
+                "cursor-pointer text-xs",
+                activeView === view && "bg-brand-purple/5 font-medium text-brand-purple"
+              ),
+              onSelect: () => onViewChange(view),
+              children: view
+            },
+            view
+          )) })
+        ] }),
+        activeView ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onViewChange(null),
+            className: "ml-auto flex items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+            children: [
+              /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }),
+              "Clear"
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  DataTableQuickViews
+};
+//# sourceMappingURL=data-table-quick-views.js.map

package/dist/components/data-table-quick-views.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/data-table-quick-views.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, X } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\"\n\nexport type DataTableQuickViewValue = string | null\n\ninterface DataTableQuickViewsProps {\n  quickViews: string[]\n  moreViews: string[]\n  activeView: DataTableQuickViewValue\n  onViewChange: (next: DataTableQuickViewValue) => void\n  className?: string\n}\n\nexport function DataTableQuickViews({\n  quickViews,\n  moreViews,\n  activeView,\n  onViewChange,\n  className,\n}: DataTableQuickViewsProps) {\n  const isMoreActive = Boolean(activeView && moreViews.includes(activeView))\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-2 overflow-x-auto border-b border-border px-4 pb-3 pt-2\",\n        className\n      )}\n    >\n      <span className=\"mr-1 shrink-0 text-xs font-medium text-muted-foreground/80\">\n        Quick views:\n      </span>\n\n      {quickViews.map((view) => {\n        const isActive = activeView === view\n        return (\n          <button\n            key={view}\n            onClick={() => onViewChange(isActive ? null : view)}\n            className={cn(\n              \"whitespace-nowrap rounded-full border px-3 py-1 text-xs transition-colors\",\n              isActive\n                ? \"border-brand-purple/30 bg-brand-purple/10 font-medium text-brand-purple\"\n                : \"border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground\"\n            )}\n          >\n            {view}\n          </button>\n        )\n      })}\n\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <button\n            className={cn(\n              \"flex items-center gap-1 whitespace-nowrap rounded-full border px-3 py-1 text-xs transition-colors\",\n              isMoreActive\n                ? \"border-brand-purple/30 bg-brand-purple/10 font-medium text-brand-purple\"\n                : \"border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground\"\n            )}\n          >\n            {isMoreActive ? activeView : \"More...\"}\n            <ChevronDown className=\"h-3 w-3 opacity-60\" />\n          </button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\" className=\"w-56\">\n          {moreViews.map((view) => (\n            <DropdownMenuItem\n              key={view}\n              className={cn(\n                \"cursor-pointer text-xs\",\n                activeView === view && \"bg-brand-purple/5 font-medium text-brand-purple\"\n              )}\n              onSelect={() => onViewChange(view)}\n            >\n              {view}\n            </DropdownMenuItem>\n          ))}\n        </DropdownMenuContent>\n      </DropdownMenu>\n\n      {activeView ? (\n        <button\n          onClick={() => onViewChange(null)}\n          className=\"ml-auto flex items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n        >\n          <X className=\"h-3 w-3\" />\n          Clear\n        </button>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":";AAuCM,cAwBI,YAxBJ;AApCN,SAAS,aAAa,SAAS;AAE/B,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAYA,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6B;AAC3B,QAAM,eAAe,QAAQ,cAAc,UAAU,SAAS,UAAU,CAAC;AAEzE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,UAAK,WAAU,8DAA6D,0BAE7E;AAAA,QAEC,WAAW,IAAI,CAAC,SAAS;AACxB,gBAAM,WAAW,eAAe;AAChC,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,SAAS,MAAM,aAAa,WAAW,OAAO,IAAI;AAAA,cAClD,WAAW;AAAA,gBACT;AAAA,gBACA,WACI,4EACA;AAAA,cACN;AAAA,cAEC;AAAA;AAAA,YATI;AAAA,UAUP;AAAA,QAEJ,CAAC;AAAA,QAED,qBAAC,gBACC;AAAA,8BAAC,uBAAoB,SAAO,MAC1B;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,eACI,4EACA;AAAA,cACN;AAAA,cAEC;AAAA,+BAAe,aAAa;AAAA,gBAC7B,oBAAC,eAAY,WAAU,sBAAqB;AAAA;AAAA;AAAA,UAC9C,GACF;AAAA,UACA,oBAAC,uBAAoB,OAAM,SAAQ,WAAU,QAC1C,oBAAU,IAAI,CAAC,SACd;AAAA,YAAC;AAAA;AAAA,cAEC,WAAW;AAAA,gBACT;AAAA,gBACA,eAAe,QAAQ;AAAA,cACzB;AAAA,cACA,UAAU,MAAM,aAAa,IAAI;AAAA,cAEhC;AAAA;AAAA,YAPI;AAAA,UAQP,CACD,GACH;AAAA,WACF;AAAA,QAEC,aACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,MAAM,aAAa,IAAI;AAAA,YAChC,WAAU;AAAA,YAEV;AAAA,kCAAC,KAAE,WAAU,WAAU;AAAA,cAAE;AAAA;AAAA;AAAA,QAE3B,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/data-table-toolbar.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SortingState } from '@tanstack/react-table';
+import { DataTableFilterCategory } from './data-table-filter.js';
+import { DataTableDisplayColumn } from './data-table-display.js';
+
+interface DataTableToolbarProps {
+    categories: DataTableFilterCategory[];
+    selectedFilters: Record<string, string[]>;
+    onToggleFilter: (categoryId: string, option: string) => void;
+    sorting: SortingState;
+    onSortingChange: (next: SortingState) => void;
+    displayColumns: DataTableDisplayColumn[];
+    onToggleColumn: (columnId: string) => void;
+    onResetDisplay: () => void;
+}
+declare function DataTableToolbar({ categories, selectedFilters, onToggleFilter, sorting, onSortingChange, displayColumns, onToggleColumn, onResetDisplay, }: DataTableToolbarProps): React.JSX.Element;
+
+export { DataTableToolbar };