@handled-ai/design-system 0.8.0 → 0.9.0

package/dist/components/insights-filter-bar.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+interface FilterDefinition {
+    id: string;
+    label: string;
+    options: string[];
+    defaultValue?: string;
+    icon?: "calendar" | React.ComponentType<{
+        className?: string;
+    }>;
+}
+interface InsightsFilterBarProps {
+    filters: FilterDefinition[];
+    values: Record<string, string>;
+    onChange: (filterId: string, value: string) => void;
+    onClearAll?: () => void;
+    className?: string;
+}
+declare function InsightsFilterBar({ filters, values, onChange, onClearAll, className, }: InsightsFilterBarProps): React.JSX.Element;
+
+export { type FilterDefinition, InsightsFilterBar, type InsightsFilterBarProps };

package/dist/components/insights-filter-bar.js

@@ -0,0 +1,99 @@
+"use client"
+
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalendarIcon, ChevronDownIcon, FilterIcon } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "./dropdown-menu.js";
+function hasNonDefaultValue(filters, values) {
+  return filters.some((filter) => {
+    var _a, _b;
+    const defaultVal = (_b = (_a = filter.defaultValue) != null ? _a : filter.options[0]) != null ? _b : "All";
+    return values[filter.id] !== void 0 && values[filter.id] !== defaultVal;
+  });
+}
+function InsightsFilterBar({
+  filters,
+  values,
+  onChange,
+  onClearAll,
+  className
+}) {
+  const showClearAll = onClearAll && hasNonDefaultValue(filters, values);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "insights-filter-bar",
+      className: cn(
+        "flex flex-wrap items-center gap-3 rounded-md border border-border bg-card p-4 shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(FilterIcon, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground", children: "Filters:" })
+        ] }),
+        filters.map((filter) => {
+          var _a, _b;
+          const current = (_b = (_a = values[filter.id]) != null ? _a : filter.defaultValue) != null ? _b : "All";
+          const isCheckbox = filter.options.length > 0;
+          const IconComp = filter.icon === "calendar" ? CalendarIcon : typeof filter.icon === "function" ? filter.icon : null;
+          return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "h-8 gap-1.5 text-xs font-normal shadow-none",
+                children: [
+                  IconComp ? /* @__PURE__ */ jsx(IconComp, { className: "h-3.5 w-3.5 text-muted-foreground" }) : null,
+                  filter.label,
+                  ": ",
+                  current,
+                  /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3.5 w-3.5 opacity-50" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", children: isCheckbox ? filter.options.map((option) => /* @__PURE__ */ jsx(
+              DropdownMenuCheckboxItem,
+              {
+                checked: current === option,
+                onCheckedChange: () => onChange(filter.id, option),
+                children: option
+              },
+              option
+            )) : filter.options.map((option) => /* @__PURE__ */ jsx(
+              DropdownMenuItem,
+              {
+                onSelect: () => onChange(filter.id, option),
+                children: option
+              },
+              option
+            )) })
+          ] }, filter.id);
+        }),
+        showClearAll ? /* @__PURE__ */ jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "h-8 text-xs text-destructive hover:text-destructive",
+            onClick: onClearAll,
+            children: "Clear All"
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+export {
+  InsightsFilterBar
+};
+//# sourceMappingURL=insights-filter-bar.js.map

package/dist/components/insights-filter-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/insights-filter-bar.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon, ChevronDownIcon, FilterIcon } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\nimport { Button } from \"./button\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\"\n\nexport interface FilterDefinition {\n  id: string\n  label: string\n  options: string[]\n  defaultValue?: string\n  icon?: \"calendar\" | React.ComponentType<{ className?: string }>\n}\n\nexport interface InsightsFilterBarProps {\n  filters: FilterDefinition[]\n  values: Record<string, string>\n  onChange: (filterId: string, value: string) => void\n  onClearAll?: () => void\n  className?: string\n}\n\nfunction hasNonDefaultValue(\n  filters: FilterDefinition[],\n  values: Record<string, string>\n) {\n  return filters.some((filter) => {\n    const defaultVal = filter.defaultValue ?? filter.options[0] ?? \"All\"\n    return values[filter.id] !== undefined && values[filter.id] !== defaultVal\n  })\n}\n\nfunction InsightsFilterBar({\n  filters,\n  values,\n  onChange,\n  onClearAll,\n  className,\n}: InsightsFilterBarProps) {\n  const showClearAll = onClearAll && hasNonDefaultValue(filters, values)\n\n  return (\n    <div\n      data-slot=\"insights-filter-bar\"\n      className={cn(\n        \"flex flex-wrap items-center gap-3 rounded-md border border-border bg-card p-4 shadow-sm\",\n        className\n      )}\n    >\n      <div className=\"flex items-center gap-2\">\n        <FilterIcon className=\"h-4 w-4 text-muted-foreground\" />\n        <span className=\"text-sm font-medium text-muted-foreground\">\n          Filters:\n        </span>\n      </div>\n\n      {filters.map((filter) => {\n        const current = values[filter.id] ?? filter.defaultValue ?? \"All\"\n        const isCheckbox = filter.options.length > 0\n\n        const IconComp =\n          filter.icon === \"calendar\"\n            ? CalendarIcon\n            : typeof filter.icon === \"function\"\n              ? filter.icon\n              : null\n\n        return (\n          <DropdownMenu key={filter.id}>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"h-8 gap-1.5 text-xs font-normal shadow-none\"\n              >\n                {IconComp ? (\n                  <IconComp className=\"h-3.5 w-3.5 text-muted-foreground\" />\n                ) : null}\n                {filter.label}: {current}\n                <ChevronDownIcon className=\"h-3.5 w-3.5 opacity-50\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              {isCheckbox\n                ? filter.options.map((option) => (\n                    <DropdownMenuCheckboxItem\n                      key={option}\n                      checked={current === option}\n                      onCheckedChange={() => onChange(filter.id, option)}\n                    >\n                      {option}\n                    </DropdownMenuCheckboxItem>\n                  ))\n                : filter.options.map((option) => (\n                    <DropdownMenuItem\n                      key={option}\n                      onSelect={() => onChange(filter.id, option)}\n                    >\n                      {option}\n                    </DropdownMenuItem>\n                  ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )\n      })}\n\n      {showClearAll ? (\n        <div className=\"ml-auto\">\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"h-8 text-xs text-destructive hover:text-destructive\"\n            onClick={onClearAll}\n          >\n            Clear All\n          </Button>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\nexport { InsightsFilterBar }\n"],"mappings":";AA0DM,SACE,KADF;AAvDN,SAAS,cAAc,iBAAiB,kBAAkB;AAE1D,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAkBP,SAAS,mBACP,SACA,QACA;AACA,SAAO,QAAQ,KAAK,CAAC,WAAW;AAnClC;AAoCI,UAAM,cAAa,kBAAO,iBAAP,YAAuB,OAAO,QAAQ,CAAC,MAAvC,YAA4C;AAC/D,WAAO,OAAO,OAAO,EAAE,MAAM,UAAa,OAAO,OAAO,EAAE,MAAM;AAAA,EAClE,CAAC;AACH;AAEA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,QAAM,eAAe,cAAc,mBAAmB,SAAS,MAAM;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,6BAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,cAAW,WAAU,iCAAgC;AAAA,UACtD,oBAAC,UAAK,WAAU,6CAA4C,sBAE5D;AAAA,WACF;AAAA,QAEC,QAAQ,IAAI,CAAC,WAAW;AAjE/B;AAkEQ,gBAAM,WAAU,kBAAO,OAAO,EAAE,MAAhB,YAAqB,OAAO,iBAA5B,YAA4C;AAC5D,gBAAM,aAAa,OAAO,QAAQ,SAAS;AAE3C,gBAAM,WACJ,OAAO,SAAS,aACZ,eACA,OAAO,OAAO,SAAS,aACrB,OAAO,OACP;AAER,iBACE,qBAAC,gBACC;AAAA,gCAAC,uBAAoB,SAAO,MAC1B;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,WAAU;AAAA,gBAET;AAAA,6BACC,oBAAC,YAAS,WAAU,qCAAoC,IACtD;AAAA,kBACH,OAAO;AAAA,kBAAM;AAAA,kBAAG;AAAA,kBACjB,oBAAC,mBAAgB,WAAU,0BAAyB;AAAA;AAAA;AAAA,YACtD,GACF;AAAA,YACA,oBAAC,uBAAoB,OAAM,SACxB,uBACG,OAAO,QAAQ,IAAI,CAAC,WAClB;AAAA,cAAC;AAAA;AAAA,gBAEC,SAAS,YAAY;AAAA,gBACrB,iBAAiB,MAAM,SAAS,OAAO,IAAI,MAAM;AAAA,gBAEhD;AAAA;AAAA,cAJI;AAAA,YAKP,CACD,IACD,OAAO,QAAQ,IAAI,CAAC,WAClB;AAAA,cAAC;AAAA;AAAA,gBAEC,UAAU,MAAM,SAAS,OAAO,IAAI,MAAM;AAAA,gBAEzC;AAAA;AAAA,cAHI;AAAA,YAIP,CACD,GACP;AAAA,eAjCiB,OAAO,EAkC1B;AAAA,QAEJ,CAAC;AAAA,QAEA,eACC,oBAAC,SAAI,WAAU,WACb;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS;AAAA,YACV;AAAA;AAAA,QAED,GACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/item-list-display.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+type ItemListGrouping = "stage" | "owner" | "risk";
+type ItemListViewMode = "list" | "board";
+interface ItemListDisplayState {
+    viewMode: ItemListViewMode;
+    grouping: ItemListGrouping;
+    subGrouping: "none" | ItemListGrouping;
+    ordering: string;
+    orderingDirection: "asc" | "desc";
+    showContactSignals: boolean;
+    showOwner: boolean;
+    showStatus: boolean;
+}
+interface ItemListDisplayProps {
+    value: ItemListDisplayState;
+    onChange: (next: ItemListDisplayState) => void;
+    onReset: () => void;
+}
+declare function ItemListDisplay({ value, onChange, onReset, }: ItemListDisplayProps): React.JSX.Element;
+
+export { ItemListDisplay, type ItemListDisplayState, type ItemListGrouping, type ItemListViewMode };

package/dist/components/item-list-display.js

@@ -0,0 +1,240 @@
+"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));
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  ArrowDownAZ,
+  ArrowUpAZ,
+  LayoutTemplate,
+  List as ListIcon,
+  RotateCcw,
+  SlidersHorizontal
+} from "lucide-react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "./select.js";
+import { Separator } from "./separator.js";
+function ItemListDisplay({
+  value,
+  onChange,
+  onReset
+}) {
+  const toggleField = (field) => {
+    onChange(__spreadProps(__spreadValues({}, value), {
+      [field]: !value[field]
+    }));
+  };
+  return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { children: [
+    /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "h-8 gap-2 rounded-md border-border bg-background text-xs font-medium text-foreground shadow-none hover:bg-muted/50",
+        children: [
+          /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-3.5 w-3.5" }),
+          "Display"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+      PopoverPrimitive.Content,
+      {
+        align: "start",
+        sideOffset: 4,
+        className: "z-50 w-[280px] rounded-lg border border-border bg-background p-4 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex rounded-md bg-muted/60 p-1", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => onChange(__spreadProps(__spreadValues({}, value), { viewMode: "list" })),
+                className: cn(
+                  "flex flex-1 flex-col items-center justify-center gap-1.5 rounded-sm px-3 py-2 text-xs font-medium transition-all",
+                  value.viewMode === "list" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(ListIcon, { className: "h-4 w-4" }),
+                  "List"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => onChange(__spreadProps(__spreadValues({}, value), { viewMode: "board" })),
+                className: cn(
+                  "flex flex-1 flex-col items-center justify-center gap-1.5 rounded-sm px-3 py-2 text-xs font-medium transition-all",
+                  value.viewMode === "board" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(LayoutTemplate, { className: "h-4 w-4" }),
+                  "Board"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[80px_1fr] items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Grouping" }),
+              /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  value: value.grouping,
+                  onValueChange: (g) => onChange(__spreadProps(__spreadValues({}, value), { grouping: g })),
+                  children: [
+                    /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                    /* @__PURE__ */ jsxs(SelectContent, { children: [
+                      /* @__PURE__ */ jsx(SelectItem, { value: "stage", className: "text-xs", children: "Stage" }),
+                      /* @__PURE__ */ jsx(SelectItem, { value: "owner", className: "text-xs", children: "Assignee" }),
+                      /* @__PURE__ */ jsx(SelectItem, { value: "risk", className: "text-xs", children: "Risk level" })
+                    ] })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[80px_1fr] items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Sub-grouping" }),
+              /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  value: value.subGrouping,
+                  onValueChange: (g) => onChange(__spreadProps(__spreadValues({}, value), {
+                    subGrouping: g
+                  })),
+                  children: [
+                    /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                    /* @__PURE__ */ jsxs(SelectContent, { children: [
+                      /* @__PURE__ */ jsx(SelectItem, { value: "none", className: "text-xs", children: "No grouping" }),
+                      /* @__PURE__ */ jsx(SelectItem, { value: "stage", className: "text-xs", children: "Stage" }),
+                      /* @__PURE__ */ jsx(SelectItem, { value: "owner", className: "text-xs", children: "Assignee" }),
+                      /* @__PURE__ */ jsx(SelectItem, { value: "risk", className: "text-xs", children: "Risk level" })
+                    ] })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[80px_1fr_32px] items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Ordering" }),
+              /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  value: value.ordering,
+                  onValueChange: (o) => onChange(__spreadProps(__spreadValues({}, value), { ordering: o })),
+                  children: [
+                    /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                    /* @__PURE__ */ jsxs(SelectContent, { children: [
+                      /* @__PURE__ */ jsx(SelectItem, { value: "priority", className: "text-xs", children: "Priority" }),
+                      /* @__PURE__ */ jsx(SelectItem, { value: "aging", className: "text-xs", children: "Age" }),
+                      /* @__PURE__ */ jsx(SelectItem, { value: "name", className: "text-xs", children: "Name" })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  size: "icon",
+                  className: "h-8 w-8",
+                  onClick: () => onChange(__spreadProps(__spreadValues({}, value), {
+                    orderingDirection: value.orderingDirection === "asc" ? "desc" : "asc"
+                  })),
+                  children: value.orderingDirection === "asc" ? /* @__PURE__ */ jsx(ArrowDownAZ, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ArrowUpAZ, { className: "h-3.5 w-3.5" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Visible row details" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => toggleField("showContactSignals"),
+                  className: cn(
+                    "rounded-md border px-2.5 py-1 text-[11px] font-medium transition-colors",
+                    value.showContactSignals ? "border-emerald-300 bg-emerald-50 text-emerald-700" : "border-border bg-background text-muted-foreground hover:bg-muted"
+                  ),
+                  children: "Contact signals"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => toggleField("showOwner"),
+                  className: cn(
+                    "rounded-md border px-2.5 py-1 text-[11px] font-medium transition-colors",
+                    value.showOwner ? "border-emerald-300 bg-emerald-50 text-emerald-700" : "border-border bg-background text-muted-foreground hover:bg-muted"
+                  ),
+                  children: "Assignee"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => toggleField("showStatus"),
+                  className: cn(
+                    "rounded-md border px-2.5 py-1 text-[11px] font-medium transition-colors",
+                    value.showStatus ? "border-emerald-300 bg-emerald-50 text-emerald-700" : "border-border bg-background text-muted-foreground hover:bg-muted"
+                  ),
+                  children: "Stage badge"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onReset,
+              className: "inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground",
+              children: [
+                /* @__PURE__ */ jsx(RotateCcw, { className: "h-3 w-3" }),
+                "Reset display settings"
+              ]
+            }
+          )
+        ] })
+      }
+    ) })
+  ] });
+}
+export {
+  ItemListDisplay
+};
+//# sourceMappingURL=item-list-display.js.map

package/dist/components/item-list-display.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/item-list-display.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowDownAZ,\n  ArrowUpAZ,\n  LayoutTemplate,\n  List as ListIcon,\n  RotateCcw,\n  SlidersHorizontal,\n} from \"lucide-react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../lib/utils\"\nimport { Button } from \"./button\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"./select\"\nimport { Separator } from \"./separator\"\n\nexport type ItemListGrouping = \"stage\" | \"owner\" | \"risk\"\nexport type ItemListViewMode = \"list\" | \"board\"\n\nexport interface ItemListDisplayState {\n  viewMode: ItemListViewMode\n  grouping: ItemListGrouping\n  subGrouping: \"none\" | ItemListGrouping\n  ordering: string\n  orderingDirection: \"asc\" | \"desc\"\n  showContactSignals: boolean\n  showOwner: boolean\n  showStatus: boolean\n}\n\ninterface ItemListDisplayProps {\n  value: ItemListDisplayState\n  onChange: (next: ItemListDisplayState) => void\n  onReset: () => void\n}\n\nexport function ItemListDisplay({\n  value,\n  onChange,\n  onReset,\n}: ItemListDisplayProps) {\n  const toggleField = (\n    field: \"showContactSignals\" | \"showOwner\" | \"showStatus\",\n  ) => {\n    onChange({\n      ...value,\n      [field]: !value[field],\n    })\n  }\n\n  return (\n    <PopoverPrimitive.Root>\n      <PopoverPrimitive.Trigger asChild>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          className=\"h-8 gap-2 rounded-md border-border bg-background text-xs font-medium text-foreground shadow-none hover:bg-muted/50\"\n        >\n          <SlidersHorizontal className=\"h-3.5 w-3.5\" />\n          Display\n        </Button>\n      </PopoverPrimitive.Trigger>\n      <PopoverPrimitive.Portal>\n        <PopoverPrimitive.Content\n          align=\"start\"\n          sideOffset={4}\n          className=\"z-50 w-[280px] rounded-lg border border-border bg-background p-4 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\"\n        >\n          <div className=\"flex flex-col gap-4\">\n            {/* View Toggle */}\n            <div className=\"flex rounded-md bg-muted/60 p-1\">\n              <button\n                type=\"button\"\n                onClick={() => onChange({ ...value, viewMode: \"list\" })}\n                className={cn(\n                  \"flex flex-1 flex-col items-center justify-center gap-1.5 rounded-sm px-3 py-2 text-xs font-medium transition-all\",\n                  value.viewMode === \"list\"\n                    ? \"bg-background text-foreground shadow-sm\"\n                    : \"text-muted-foreground hover:text-foreground\",\n                )}\n              >\n                <ListIcon className=\"h-4 w-4\" />\n                List\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => onChange({ ...value, viewMode: \"board\" })}\n                className={cn(\n                  \"flex flex-1 flex-col items-center justify-center gap-1.5 rounded-sm px-3 py-2 text-xs font-medium transition-all\",\n                  value.viewMode === \"board\"\n                    ? \"bg-background text-foreground shadow-sm\"\n                    : \"text-muted-foreground hover:text-foreground\",\n                )}\n              >\n                <LayoutTemplate className=\"h-4 w-4\" />\n                Board\n              </button>\n            </div>\n\n            <Separator />\n\n            {/* Grouping Controls */}\n            <div className=\"space-y-3\">\n              <div className=\"grid grid-cols-[80px_1fr] items-center gap-2\">\n                <span className=\"text-xs font-medium text-muted-foreground\">\n                  Grouping\n                </span>\n                <Select\n                  value={value.grouping}\n                  onValueChange={(g) =>\n                    onChange({ ...value, grouping: g as ItemListGrouping })\n                  }\n                >\n                  <SelectTrigger className=\"h-8 text-xs\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"stage\" className=\"text-xs\">\n                      Stage\n                    </SelectItem>\n                    <SelectItem value=\"owner\" className=\"text-xs\">\n                      Assignee\n                    </SelectItem>\n                    <SelectItem value=\"risk\" className=\"text-xs\">\n                      Risk level\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n\n              <div className=\"grid grid-cols-[80px_1fr] items-center gap-2\">\n                <span className=\"text-xs font-medium text-muted-foreground\">\n                  Sub-grouping\n                </span>\n                <Select\n                  value={value.subGrouping}\n                  onValueChange={(g) =>\n                    onChange({\n                      ...value,\n                      subGrouping: g as \"none\" | ItemListGrouping,\n                    })\n                  }\n                >\n                  <SelectTrigger className=\"h-8 text-xs\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"none\" className=\"text-xs\">\n                      No grouping\n                    </SelectItem>\n                    <SelectItem value=\"stage\" className=\"text-xs\">\n                      Stage\n                    </SelectItem>\n                    <SelectItem value=\"owner\" className=\"text-xs\">\n                      Assignee\n                    </SelectItem>\n                    <SelectItem value=\"risk\" className=\"text-xs\">\n                      Risk level\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n\n              <div className=\"grid grid-cols-[80px_1fr_32px] items-center gap-2\">\n                <span className=\"text-xs font-medium text-muted-foreground\">\n                  Ordering\n                </span>\n                <Select\n                  value={value.ordering}\n                  onValueChange={(o) => onChange({ ...value, ordering: o })}\n                >\n                  <SelectTrigger className=\"h-8 text-xs\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"priority\" className=\"text-xs\">\n                      Priority\n                    </SelectItem>\n                    <SelectItem value=\"aging\" className=\"text-xs\">\n                      Age\n                    </SelectItem>\n                    <SelectItem value=\"name\" className=\"text-xs\">\n                      Name\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon\"\n                  className=\"h-8 w-8\"\n                  onClick={() =>\n                    onChange({\n                      ...value,\n                      orderingDirection:\n                        value.orderingDirection === \"asc\" ? \"desc\" : \"asc\",\n                    })\n                  }\n                >\n                  {value.orderingDirection === \"asc\" ? (\n                    <ArrowDownAZ className=\"h-3.5 w-3.5\" />\n                  ) : (\n                    <ArrowUpAZ className=\"h-3.5 w-3.5\" />\n                  )}\n                </Button>\n              </div>\n            </div>\n\n            <Separator />\n\n            {/* Visible Row Details */}\n            <div className=\"space-y-2\">\n              <span className=\"text-[11px] font-semibold uppercase tracking-wide text-muted-foreground\">\n                Visible row details\n              </span>\n              <div className=\"flex flex-wrap gap-2\">\n                <button\n                  type=\"button\"\n                  onClick={() => toggleField(\"showContactSignals\")}\n                  className={cn(\n                    \"rounded-md border px-2.5 py-1 text-[11px] font-medium transition-colors\",\n                    value.showContactSignals\n                      ? \"border-emerald-300 bg-emerald-50 text-emerald-700\"\n                      : \"border-border bg-background text-muted-foreground hover:bg-muted\",\n                  )}\n                >\n                  Contact signals\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => toggleField(\"showOwner\")}\n                  className={cn(\n                    \"rounded-md border px-2.5 py-1 text-[11px] font-medium transition-colors\",\n                    value.showOwner\n                      ? \"border-emerald-300 bg-emerald-50 text-emerald-700\"\n                      : \"border-border bg-background text-muted-foreground hover:bg-muted\",\n                  )}\n                >\n                  Assignee\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => toggleField(\"showStatus\")}\n                  className={cn(\n                    \"rounded-md border px-2.5 py-1 text-[11px] font-medium transition-colors\",\n                    value.showStatus\n                      ? \"border-emerald-300 bg-emerald-50 text-emerald-700\"\n                      : \"border-border bg-background text-muted-foreground hover:bg-muted\",\n                  )}\n                >\n                  Stage badge\n                </button>\n              </div>\n            </div>\n\n            <Separator />\n\n            <button\n              type=\"button\"\n              onClick={onReset}\n              className=\"inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground\"\n            >\n              <RotateCcw className=\"h-3 w-3\" />\n              Reset display settings\n            </button>\n          </div>\n        </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n    </PopoverPrimitive.Root>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/components/item-list-filter.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+interface ItemListFilterCategory {
+    id: string;
+    label: string;
+    options: string[];
+}
+interface ItemListFilterProps {
+    categories: ItemListFilterCategory[];
+    selectedFilters: Record<string, string[]>;
+    onToggleFilter: (categoryId: string, option: string) => void;
+    onClearFilters: () => void;
+}
+declare function ItemListFilter({ categories, selectedFilters, onToggleFilter, onClearFilters, }: ItemListFilterProps): React.JSX.Element;
+
+export { ItemListFilter, type ItemListFilterCategory };

package/dist/components/item-list-filter.js

@@ -0,0 +1,87 @@
+"use client"
+
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Filter, X } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "./dropdown-menu.js";
+function getActiveFilterCount(selectedFilters) {
+  return Object.values(selectedFilters).reduce(
+    (count, values) => count + values.length,
+    0
+  );
+}
+function ItemListFilter({
+  categories,
+  selectedFilters,
+  onToggleFilter,
+  onClearFilters
+}) {
+  const activeFilterCount = getActiveFilterCount(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 bg-background text-xs font-medium text-foreground shadow-none hover:bg-muted/50",
+        children: [
+          /* @__PURE__ */ jsx(Filter, { className: "h-3.5 w-3.5" }),
+          "Filter",
+          activeFilterCount > 0 ? /* @__PURE__ */ jsx("span", { className: "rounded bg-muted px-1.5 py-0 text-[10px] font-semibold text-muted-foreground", children: activeFilterCount }) : null
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-[280px] p-3", children: [
+      /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "px-0 text-xs font-semibold text-foreground", children: "Apply filters" }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "my-2" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: categories.map((category, index) => /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: category.label }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", 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__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onToggleFilter(category.id, option),
+              className: cn(
+                "rounded-md border px-2.5 py-1 text-[11px] font-medium transition-colors",
+                selected ? "border-emerald-300 bg-emerald-50 text-emerald-700" : "border-border bg-background text-muted-foreground hover:bg-muted"
+              ),
+              children: option
+            },
+            option
+          );
+        }) }),
+        index < categories.length - 1 ? /* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "mt-2" }) : null
+      ] }, category.id)) }),
+      activeFilterCount > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "my-2" }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onClearFilters,
+            className: "inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground",
+            children: [
+              /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }),
+              "Clear all"
+            ]
+          }
+        )
+      ] }) : null
+    ] })
+  ] });
+}
+export {
+  ItemListFilter
+};
+//# sourceMappingURL=item-list-filter.js.map

package/dist/components/item-list-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/item-list-filter.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Filter, X } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\nimport { Button } from \"./button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\"\n\nexport interface ItemListFilterCategory {\n  id: string\n  label: string\n  options: string[]\n}\n\ninterface ItemListFilterProps {\n  categories: ItemListFilterCategory[]\n  selectedFilters: Record<string, string[]>\n  onToggleFilter: (categoryId: string, option: string) => void\n  onClearFilters: () => void\n}\n\nfunction getActiveFilterCount(selectedFilters: Record<string, string[]>) {\n  return Object.values(selectedFilters).reduce(\n    (count, values) => count + values.length,\n    0\n  )\n}\n\nexport function ItemListFilter({\n  categories,\n  selectedFilters,\n  onToggleFilter,\n  onClearFilters,\n}: ItemListFilterProps) {\n  const activeFilterCount = getActiveFilterCount(selectedFilters)\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 bg-background text-xs font-medium text-foreground shadow-none hover:bg-muted/50\"\n        >\n          <Filter className=\"h-3.5 w-3.5\" />\n          Filter\n          {activeFilterCount > 0 ? (\n            <span className=\"rounded bg-muted px-1.5 py-0 text-[10px] font-semibold text-muted-foreground\">\n              {activeFilterCount}\n            </span>\n          ) : null}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-[280px] p-3\">\n        <DropdownMenuLabel className=\"px-0 text-xs font-semibold text-foreground\">\n          Apply filters\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator className=\"my-2\" />\n\n        <div className=\"space-y-3\">\n          {categories.map((category, index) => (\n            <div key={category.id} className=\"space-y-1.5\">\n              <p className=\"text-[11px] font-semibold uppercase tracking-wide text-muted-foreground\">\n                {category.label}\n              </p>\n              <div className=\"flex flex-wrap gap-1.5\">\n                {category.options.map((option) => {\n                  const selected =\n                    selectedFilters[category.id]?.includes(option) ?? false\n\n                  return (\n                    <button\n                      key={option}\n                      type=\"button\"\n                      onClick={() => onToggleFilter(category.id, option)}\n                      className={cn(\n                        \"rounded-md border px-2.5 py-1 text-[11px] font-medium transition-colors\",\n                        selected\n                          ? \"border-emerald-300 bg-emerald-50 text-emerald-700\"\n                          : \"border-border bg-background text-muted-foreground hover:bg-muted\"\n                      )}\n                    >\n                      {option}\n                    </button>\n                  )\n                })}\n              </div>\n              {index < categories.length - 1 ? (\n                <DropdownMenuSeparator className=\"mt-2\" />\n              ) : null}\n            </div>\n          ))}\n        </div>\n\n        {activeFilterCount > 0 ? (\n          <>\n            <DropdownMenuSeparator className=\"my-2\" />\n            <button\n              type=\"button\"\n              onClick={onClearFilters}\n              className=\"inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground\"\n            >\n              <X className=\"h-3 w-3\" />\n              Clear all\n            </button>\n          </>\n        ) : null}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n"],"mappings":";AA8CQ,SAwDE,UAnDA,KALF;AA3CR,SAAS,QAAQ,SAAS;AAE1B,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAeP,SAAS,qBAAqB,iBAA2C;AACvE,SAAO,OAAO,OAAO,eAAe,EAAE;AAAA,IACpC,CAAC,OAAO,WAAW,QAAQ,OAAO;AAAA,IAClC;AAAA,EACF;AACF;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,oBAAoB,qBAAqB,eAAe;AAE9D,SACE,qBAAC,gBACC;AAAA,wBAAC,uBAAoB,SAAO,MAC1B;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,WAAU;AAAA,QAEV;AAAA,8BAAC,UAAO,WAAU,eAAc;AAAA,UAAE;AAAA,UAEjC,oBAAoB,IACnB,oBAAC,UAAK,WAAU,gFACb,6BACH,IACE;AAAA;AAAA;AAAA,IACN,GACF;AAAA,IACA,qBAAC,uBAAoB,OAAM,OAAM,WAAU,iBACzC;AAAA,0BAAC,qBAAkB,WAAU,8CAA6C,2BAE1E;AAAA,MACA,oBAAC,yBAAsB,WAAU,QAAO;AAAA,MAExC,oBAAC,SAAI,WAAU,aACZ,qBAAW,IAAI,CAAC,UAAU,UACzB,qBAAC,SAAsB,WAAU,eAC/B;AAAA,4BAAC,OAAE,WAAU,2EACV,mBAAS,OACZ;AAAA,QACA,oBAAC,SAAI,WAAU,0BACZ,mBAAS,QAAQ,IAAI,CAAC,WAAW;AAzElD;AA0EkB,gBAAM,YACJ,2BAAgB,SAAS,EAAE,MAA3B,mBAA8B,SAAS,YAAvC,YAAkD;AAEpD,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,SAAS,MAAM,eAAe,SAAS,IAAI,MAAM;AAAA,cACjD,WAAW;AAAA,gBACT;AAAA,gBACA,WACI,sDACA;AAAA,cACN;AAAA,cAEC;AAAA;AAAA,YAVI;AAAA,UAWP;AAAA,QAEJ,CAAC,GACH;AAAA,QACC,QAAQ,WAAW,SAAS,IAC3B,oBAAC,yBAAsB,WAAU,QAAO,IACtC;AAAA,WA5BI,SAAS,EA6BnB,CACD,GACH;AAAA,MAEC,oBAAoB,IACnB,iCACE;AAAA,4BAAC,yBAAsB,WAAU,QAAO;AAAA,QACxC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YAEV;AAAA,kCAAC,KAAE,WAAU,WAAU;AAAA,cAAE;AAAA;AAAA;AAAA,QAE3B;AAAA,SACF,IACE;AAAA,OACN;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/item-list-toolbar.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { ItemListDisplayState } from './item-list-display.js';
+import { ItemListFilterCategory } from './item-list-filter.js';
+
+interface ItemListQuickView {
+    id: string;
+    label: string;
+    count: number;
+}
+interface ItemListToolbarProps {
+    quickViews: ItemListQuickView[];
+    activeQuickView: string | null;
+    onQuickViewChange: (viewId: string | null) => void;
+    filterCategories: ItemListFilterCategory[];
+    selectedFilters: Record<string, string[]>;
+    onToggleFilter: (categoryId: string, option: string) => void;
+    onClearFilters: () => void;
+    display: ItemListDisplayState;
+    onDisplayChange: (next: ItemListDisplayState) => void;
+    onResetDisplay: () => void;
+    searchSlot?: React.ReactNode;
+}
+declare function ItemListToolbar({ quickViews, activeQuickView, onQuickViewChange, filterCategories, selectedFilters, onToggleFilter, onClearFilters, display, onDisplayChange, onResetDisplay, searchSlot, }: ItemListToolbarProps): React.JSX.Element;
+
+export { type ItemListQuickView, ItemListToolbar };