@handled-ai/design-system 0.8.0 → 0.9.0

package/dist/components/item-list.js

@@ -0,0 +1,702 @@
+"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 * as React from "react";
+import {
+  AlertCircle,
+  ChevronDown,
+  Mail,
+  MessageSquare,
+  Phone,
+  SearchX
+} from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Badge } from "./badge.js";
+import {
+  ItemListToolbar
+} from "./item-list-toolbar.js";
+const QUEUE_ITEMS = [
+  {
+    id: "REF-1894",
+    patient: "James Liu",
+    source: "Cedars",
+    specialty: "Oncology",
+    stage: "E&B Verified",
+    risk: "At Risk",
+    attempts: 2,
+    owner: "Jessica Wong",
+    aging: "Aging 18h",
+    contactSignals: { phone: true, email: false, message: false }
+  },
+  {
+    id: "REF-1903",
+    patient: "Michael Brown",
+    source: "Providence",
+    specialty: "Orthopedics",
+    stage: "E&B Verified",
+    risk: "Stable",
+    attempts: 1,
+    owner: "Sarah Johnson",
+    aging: "New today",
+    contactSignals: { phone: false, email: true, message: false }
+  },
+  {
+    id: "REF-1910",
+    patient: "Samantha Rodriguez",
+    source: "Kaiser",
+    specialty: "Rheumatology",
+    stage: "E&B Verified",
+    risk: "At Risk",
+    attempts: 4,
+    owner: "Michael Chen",
+    aging: "Aging 36h",
+    contactSignals: { phone: true, email: true, message: true }
+  },
+  {
+    id: "REF-1916",
+    patient: "Christopher Davis",
+    source: "USC",
+    specialty: "Gastroenterology",
+    stage: "E&B Verified",
+    risk: "Stable",
+    attempts: 1,
+    owner: "Daniel Kim",
+    aging: "New 6h ago",
+    contactSignals: { phone: false, email: true, message: true }
+  },
+  {
+    id: "REF-1924",
+    patient: "Lisa Anderson",
+    source: "CHLA",
+    specialty: "Pediatric Surgery",
+    stage: "E&B Verified",
+    risk: "Watch",
+    attempts: 1,
+    owner: "Jennifer Davis",
+    aging: "New 8h ago",
+    contactSignals: { phone: true, email: false, message: true }
+  },
+  {
+    id: "REF-1901",
+    patient: "Sarah Chen",
+    source: "CHLA",
+    specialty: "Pediatrics",
+    stage: "Contacted",
+    risk: "Stable",
+    attempts: 1,
+    owner: "Daniel Kim",
+    aging: "New today",
+    contactSignals: { phone: true, email: false, message: false }
+  },
+  {
+    id: "REF-1908",
+    patient: "David Smith",
+    source: "USC",
+    specialty: "Dermatology",
+    stage: "Contacted",
+    risk: "Stable",
+    attempts: 2,
+    owner: "Jennifer Davis",
+    aging: "New 3h ago",
+    contactSignals: { phone: false, email: true, message: true }
+  },
+  {
+    id: "REF-1913",
+    patient: "Olivia Martinez",
+    source: "Providence",
+    specialty: "Cardiology",
+    stage: "Contacted",
+    risk: "At Risk",
+    attempts: 3,
+    owner: "Jessica Wong",
+    aging: "Aging 24h",
+    contactSignals: { phone: true, email: true, message: false }
+  },
+  {
+    id: "REF-1919",
+    patient: "Kevin Nguyen",
+    source: "Kaiser",
+    specialty: "Nephrology",
+    stage: "Contacted",
+    risk: "Stable",
+    attempts: 1,
+    owner: "Sarah Johnson",
+    aging: "New 5h ago",
+    contactSignals: { phone: true, email: false, message: true }
+  },
+  {
+    id: "REF-1923",
+    patient: "Rachel Kim",
+    source: "UCLA Health",
+    specialty: "Hematology",
+    stage: "Contacted",
+    risk: "Watch",
+    attempts: 2,
+    owner: "Michael Chen",
+    aging: "New 7h ago",
+    contactSignals: { phone: false, email: true, message: true }
+  },
+  {
+    id: "REF-1926",
+    patient: "Brian Foster",
+    source: "Cedars",
+    specialty: "Vascular Surgery",
+    stage: "Contacted",
+    risk: "Stable",
+    attempts: 1,
+    owner: "Daniel Kim",
+    aging: "New today",
+    contactSignals: { phone: false, email: false, message: true }
+  },
+  {
+    id: "REF-1931",
+    patient: "Jasmine Patel",
+    source: "Dignity Health",
+    specialty: "Pulmonology",
+    stage: "Pending Intake",
+    risk: "Watch",
+    attempts: 2,
+    owner: "Sarah Johnson",
+    aging: "Aging 14h",
+    contactSignals: { phone: true, email: true, message: false }
+  },
+  {
+    id: "REF-1933",
+    patient: "Evan Torres",
+    source: "Sutter",
+    specialty: "Neurology",
+    stage: "Pending Intake",
+    risk: "Stable",
+    attempts: 1,
+    owner: "Jessica Wong",
+    aging: "New 2h ago",
+    contactSignals: { phone: false, email: true, message: true }
+  },
+  {
+    id: "REF-1940",
+    patient: "Natalie Brooks",
+    source: "MemorialCare",
+    specialty: "Pain Management",
+    stage: "Pending Scheduling",
+    risk: "Watch",
+    attempts: 2,
+    owner: "Jennifer Davis",
+    aging: "Aging 20h",
+    contactSignals: { phone: true, email: false, message: true }
+  },
+  {
+    id: "REF-1942",
+    patient: "Carlos Rivera",
+    source: "Providence",
+    specialty: "Urology",
+    stage: "Pending Scheduling",
+    risk: "Stable",
+    attempts: 1,
+    owner: "Daniel Kim",
+    aging: "New 5h ago",
+    contactSignals: { phone: false, email: true, message: false }
+  },
+  {
+    id: "REF-1946",
+    patient: "Alyssa Wright",
+    source: "UCLA Health",
+    specialty: "Referrals",
+    stage: "Referrals",
+    risk: "Stable",
+    attempts: 1,
+    owner: "Michael Chen",
+    aging: "New today",
+    contactSignals: { phone: false, email: true, message: true }
+  },
+  {
+    id: "REF-1948",
+    patient: "Marcus Lopez",
+    source: "Cedars",
+    specialty: "Referrals",
+    stage: "Referrals",
+    risk: "At Risk",
+    attempts: 4,
+    owner: "Jessica Wong",
+    aging: "Aging 30h",
+    contactSignals: { phone: true, email: true, message: false }
+  }
+];
+const STAGE_ORDER = [
+  "Referrals",
+  "E&B Verified",
+  "Contacted",
+  "Pending Intake",
+  "Pending Scheduling"
+];
+const RISK_ORDER = ["At Risk", "Watch", "Stable"];
+const FILTER_CATEGORIES = [
+  {
+    id: "stage",
+    label: "Queue stage",
+    options: STAGE_ORDER
+  },
+  {
+    id: "risk",
+    label: "Risk level",
+    options: RISK_ORDER
+  },
+  {
+    id: "owner",
+    label: "Assignee",
+    options: [...new Set(QUEUE_ITEMS.map((item) => item.owner))]
+  }
+];
+const QUICK_VIEW_DEFINITIONS = [
+  {
+    id: "referrals",
+    label: "Referrals",
+    matches: (item) => item.stage === "Referrals"
+  },
+  {
+    id: "contact-attempted",
+    label: "Contact Attempted",
+    matches: (item) => item.stage === "E&B Verified" || item.stage === "Contacted"
+  },
+  {
+    id: "pending-intake",
+    label: "Pending Intake",
+    matches: (item) => item.stage === "Pending Intake"
+  },
+  {
+    id: "pending-scheduling",
+    label: "Pending Scheduling",
+    matches: (item) => item.stage === "Pending Scheduling"
+  },
+  {
+    id: "needs-escalation",
+    label: "Needs Escalation",
+    matches: (item) => item.attempts >= 4 || item.risk === "At Risk"
+  }
+];
+const DEFAULT_DISPLAY_STATE = {
+  viewMode: "list",
+  grouping: "stage",
+  subGrouping: "none",
+  ordering: "priority",
+  orderingDirection: "desc",
+  showContactSignals: true,
+  showOwner: true,
+  showStatus: true
+};
+function toggleFilterValue(current, categoryId, option) {
+  var _a;
+  const selected = (_a = current[categoryId]) != null ? _a : [];
+  const hasOption = selected.includes(option);
+  return __spreadProps(__spreadValues({}, current), {
+    [categoryId]: hasOption ? selected.filter((value) => value !== option) : [...selected, option]
+  });
+}
+function matchesCategoryFilter(item, categoryId, selectedOptions) {
+  if (selectedOptions.length === 0) {
+    return true;
+  }
+  switch (categoryId) {
+    case "stage":
+      return selectedOptions.includes(item.stage);
+    case "risk":
+      return selectedOptions.includes(item.risk);
+    case "owner":
+      return selectedOptions.includes(item.owner);
+    default:
+      return true;
+  }
+}
+function getRiskDotColor(risk) {
+  switch (risk) {
+    case "At Risk":
+      return "bg-red-500";
+    case "Watch":
+      return "bg-orange-400";
+    case "Stable":
+    default:
+      return "bg-muted-foreground/30";
+  }
+}
+const AVATAR_COLORS = [
+  "bg-blue-100 text-blue-700",
+  "bg-emerald-100 text-emerald-700",
+  "bg-purple-100 text-purple-700",
+  "bg-amber-100 text-amber-700",
+  "bg-rose-100 text-rose-700",
+  "bg-cyan-100 text-cyan-700"
+];
+function getAvatarColor(name) {
+  return AVATAR_COLORS[name.charCodeAt(0) % AVATAR_COLORS.length];
+}
+function WorkItemCard({ item, display }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border bg-card p-3 shadow-sm transition-shadow hover:shadow-md", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-muted-foreground", children: item.id }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "h-2 w-2 rounded-full",
+            getRiskDotColor(item.risk)
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mb-1 text-sm font-medium text-foreground", children: item.patient }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 text-xs text-muted-foreground", children: [
+      "via ",
+      item.source,
+      " \u2192 ",
+      item.specialty
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        item.risk === "At Risk" ? /* @__PURE__ */ jsxs(
+          Badge,
+          {
+            variant: "outline",
+            className: "h-5 gap-1 rounded-full border-red-200 bg-red-50 px-1.5 text-[10px] font-medium text-red-700 shadow-none",
+            children: [
+              /* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3" }),
+              "At Risk"
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "inline-flex h-5 items-center rounded border px-1.5 text-[10px] font-semibold",
+              item.attempts >= 4 ? "border-red-200 bg-red-50 text-red-700" : item.attempts === 3 ? "border-amber-200 bg-amber-50 text-amber-700" : "border-border bg-muted text-muted-foreground"
+            ),
+            children: item.attempts >= 4 ? "4+" : item.attempts
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: item.aging })
+    ] }),
+    display.showOwner ? /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-1.5 border-t border-border/60 pt-2", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex h-5 w-5 items-center justify-center rounded text-[9px] font-semibold",
+            getAvatarColor(item.owner)
+          ),
+          children: item.owner.charAt(0)
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: item.owner })
+    ] }) : null
+  ] });
+}
+function ItemList() {
+  const [selectedFilters, setSelectedFilters] = React.useState({});
+  const [activeQuickView, setActiveQuickView] = React.useState(
+    "contact-attempted"
+  );
+  const [display, setDisplay] = React.useState(DEFAULT_DISPLAY_STATE);
+  const [expandedGroups, setExpandedGroups] = React.useState({});
+  const quickViews = React.useMemo(
+    () => QUICK_VIEW_DEFINITIONS.map((definition) => ({
+      id: definition.id,
+      label: definition.label,
+      count: QUEUE_ITEMS.filter(definition.matches).length
+    })),
+    []
+  );
+  const filteredItems = React.useMemo(() => {
+    const quickViewFilter = QUICK_VIEW_DEFINITIONS.find(
+      (definition) => definition.id === activeQuickView
+    );
+    return QUEUE_ITEMS.filter((item) => {
+      if (quickViewFilter && !quickViewFilter.matches(item)) {
+        return false;
+      }
+      return Object.entries(selectedFilters).every(
+        ([categoryId, options]) => matchesCategoryFilter(item, categoryId, options)
+      );
+    });
+  }, [activeQuickView, selectedFilters]);
+  const groupedItems = React.useMemo(() => {
+    var _a;
+    const groups = /* @__PURE__ */ new Map();
+    for (const item of filteredItems) {
+      const key = display.grouping === "stage" ? item.stage : display.grouping === "owner" ? item.owner : item.risk;
+      const current = (_a = groups.get(key)) != null ? _a : [];
+      current.push(item);
+      groups.set(key, current);
+    }
+    const entries = Array.from(groups.entries());
+    entries.sort(([groupA], [groupB]) => {
+      if (display.grouping === "stage") {
+        return STAGE_ORDER.indexOf(groupA) - STAGE_ORDER.indexOf(groupB);
+      }
+      if (display.grouping === "risk") {
+        return RISK_ORDER.indexOf(groupA) - RISK_ORDER.indexOf(groupB);
+      }
+      return groupA.localeCompare(groupB);
+    });
+    return entries.map(([group, items]) => ({
+      key: group.toLowerCase().replace(/\s+/g, "-"),
+      label: group,
+      items
+    }));
+  }, [display.grouping, filteredItems]);
+  React.useEffect(() => {
+    setExpandedGroups((previous) => {
+      const next = {};
+      groupedItems.forEach((group) => {
+        var _a;
+        next[group.key] = (_a = previous[group.key]) != null ? _a : true;
+      });
+      return next;
+    });
+  }, [groupedItems]);
+  return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden bg-background", children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b border-border px-6 py-4", children: /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold tracking-tight text-foreground", children: "Patient Inventory" }) }),
+    /* @__PURE__ */ jsx(
+      ItemListToolbar,
+      {
+        quickViews,
+        activeQuickView,
+        onQuickViewChange: setActiveQuickView,
+        filterCategories: FILTER_CATEGORIES,
+        selectedFilters,
+        onToggleFilter: (categoryId, option) => setSelectedFilters(
+          (previous) => toggleFilterValue(previous, categoryId, option)
+        ),
+        onClearFilters: () => setSelectedFilters({}),
+        display,
+        onDisplayChange: setDisplay,
+        onResetDisplay: () => setDisplay(DEFAULT_DISPLAY_STATE)
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: groupedItems.length > 0 ? display.viewMode === "board" ? (
+      /* Board View */
+      /* @__PURE__ */ jsx("div", { className: "flex gap-4 overflow-x-auto p-4", children: groupedItems.map((group) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex w-[280px] shrink-0 flex-col",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between px-1", children: [
+              /* @__PURE__ */ jsx("h4", { className: "truncate text-sm font-semibold uppercase text-muted-foreground", children: group.label }),
+              /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground", children: group.items.length })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+              group.items.map((item) => /* @__PURE__ */ jsx(
+                WorkItemCard,
+                {
+                  item,
+                  display
+                },
+                item.id
+              )),
+              group.items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-24 items-center justify-center rounded-lg border-2 border-dashed border-border bg-muted/30", children: /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground/50", children: "No items" }) }) : null
+            ] })
+          ]
+        },
+        group.key
+      )) })
+    ) : (
+      /* List View */
+      groupedItems.map((group) => {
+        const isExpanded = expandedGroups[group.key];
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "last:border-b-0",
+            children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setExpandedGroups((previous) => __spreadProps(__spreadValues({}, previous), {
+                    [group.key]: !previous[group.key]
+                  })),
+                  className: "flex w-full cursor-pointer select-none items-center gap-2 border-b border-border bg-muted/30 px-4 py-2 text-left transition-colors hover:bg-muted/50",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      ChevronDown,
+                      {
+                        className: cn(
+                          "h-3.5 w-3.5 text-muted-foreground transition-transform",
+                          !isExpanded && "-rotate-90"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "text-[11px] font-bold uppercase tracking-wider text-muted-foreground", children: group.label }),
+                    /* @__PURE__ */ jsx("span", { className: "rounded border border-border bg-background px-1.5 py-0 text-[10px] font-medium text-muted-foreground", children: group.items.length })
+                  ]
+                }
+              ),
+              isExpanded ? /* @__PURE__ */ jsx("div", { children: group.items.map((item) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "group flex cursor-pointer items-center gap-3 border-b border-border/50 px-4 py-2.5 text-sm transition-colors hover:bg-muted/40",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "w-[80px] shrink-0 font-mono text-xs text-muted-foreground/80", children: item.id }),
+                    /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "h-2 w-2 rounded-full",
+                          getRiskDotColor(item.risk)
+                        )
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 truncate font-semibold text-sm text-foreground", children: [
+                      item.patient,
+                      " ",
+                      /* @__PURE__ */ jsxs("span", { className: "font-normal text-muted-foreground", children: [
+                        "via ",
+                        item.source,
+                        " \u2192 ",
+                        item.specialty
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "hidden w-[80px] shrink-0 items-center md:flex", children: item.risk === "At Risk" ? /* @__PURE__ */ jsxs(
+                      Badge,
+                      {
+                        variant: "outline",
+                        className: "h-5 gap-1 rounded-full border-red-200 bg-red-50 px-1.5 text-[10px] font-medium text-red-700 shadow-none",
+                        children: [
+                          /* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3" }),
+                          "At Risk"
+                        ]
+                      }
+                    ) : null }),
+                    display.showContactSignals ? /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-3 text-muted-foreground/40 md:flex", children: [
+                      /* @__PURE__ */ jsx(Phone, { className: "h-3.5 w-3.5 cursor-pointer transition-colors hover:text-foreground" }),
+                      /* @__PURE__ */ jsx(Mail, { className: "h-3.5 w-3.5 cursor-pointer transition-colors hover:text-foreground" }),
+                      /* @__PURE__ */ jsx(MessageSquare, { className: "h-3.5 w-3.5 cursor-pointer transition-colors hover:text-foreground" })
+                    ] }) : null,
+                    /* @__PURE__ */ jsx("div", { className: "hidden w-[60px] shrink-0 items-center justify-center md:flex", children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "inline-flex h-5 items-center justify-center rounded border px-2 text-xs font-semibold",
+                          item.attempts >= 4 ? "border-red-300 bg-red-100 text-red-700" : item.attempts === 3 ? "border-amber-300 bg-amber-100 text-amber-700" : "border-border bg-muted text-muted-foreground"
+                        ),
+                        children: item.attempts >= 4 ? "4+" : item.attempts
+                      }
+                    ) }),
+                    display.showOwner ? /* @__PURE__ */ jsx("div", { className: "hidden w-[120px] shrink-0 items-center gap-2 lg:flex", children: /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-medium text-foreground", children: item.owner }) }) : null,
+                    display.showStatus ? /* @__PURE__ */ jsx("div", { className: "hidden w-[140px] shrink-0 items-center justify-end gap-2 sm:flex", children: /* @__PURE__ */ jsx("span", { className: "truncate rounded bg-muted px-2 py-0.5 text-xs text-muted-foreground", children: item.stage }) }) : null,
+                    /* @__PURE__ */ jsx("div", { className: "w-[80px] shrink-0 text-right text-xs text-muted-foreground", children: item.aging })
+                  ]
+                },
+                item.id
+              )) }) : null
+            ]
+          },
+          group.key
+        );
+      })
+    ) : /* @__PURE__ */ jsxs("div", { className: "flex h-56 flex-col items-center justify-center gap-1 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(SearchX, { className: "h-7 w-7 opacity-40" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "No queue items found" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs", children: "Try a different quick view or clear your filters." })
+    ] }) })
+  ] });
+}
+function GroupedListView({
+  groups,
+  renderRow,
+  getItemKey,
+  selectedKey,
+  onItemClick,
+  emptyMessage = "No items found",
+  className
+}) {
+  const [expandedGroups, setExpandedGroups] = React.useState(() => {
+    const init = {};
+    groups.forEach((g) => {
+      init[g.key] = true;
+    });
+    return init;
+  });
+  React.useEffect(() => {
+    setExpandedGroups((prev) => {
+      const next = {};
+      groups.forEach((g) => {
+        var _a;
+        next[g.key] = (_a = prev[g.key]) != null ? _a : true;
+      });
+      return next;
+    });
+  }, [groups]);
+  if (groups.length === 0 || groups.every((g) => g.items.length === 0)) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex h-56 flex-col items-center justify-center gap-1 text-muted-foreground", className), children: [
+      /* @__PURE__ */ jsx(SearchX, { className: "h-7 w-7 opacity-40" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: emptyMessage })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className, children: groups.map((group) => {
+    var _a;
+    const isExpanded = (_a = expandedGroups[group.key]) != null ? _a : true;
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setExpandedGroups((prev) => __spreadProps(__spreadValues({}, prev), { [group.key]: !prev[group.key] })),
+          className: "flex w-full cursor-pointer select-none items-center gap-2 border-b border-border bg-muted/30 px-4 py-2 text-left transition-colors hover:bg-muted/50",
+          children: [
+            /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                className: cn(
+                  "h-3.5 w-3.5 text-muted-foreground transition-transform",
+                  !isExpanded && "-rotate-90"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] font-bold uppercase tracking-wider text-muted-foreground", children: group.label }),
+            /* @__PURE__ */ jsx("span", { className: "rounded border border-border bg-background px-1.5 py-0 text-[10px] font-medium text-muted-foreground", children: group.items.length })
+          ]
+        }
+      ),
+      isExpanded && group.items.map((item, idx) => {
+        const key = getItemKey(item);
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: () => onItemClick == null ? void 0 : onItemClick(item),
+            className: cn(
+              "flex items-center gap-3 px-4 py-2.5 border-b border-border/50 text-[13px] cursor-pointer transition-colors",
+              selectedKey === key ? "bg-muted/30 border-l-2 border-l-primary" : "border-l-2 border-l-transparent hover:bg-muted/40"
+            ),
+            children: renderRow(item, idx)
+          },
+          key
+        );
+      })
+    ] }, group.key);
+  }) });
+}
+export {
+  GroupedListView,
+  ItemList
+};
+//# sourceMappingURL=item-list.js.map