@handled-ai/design-system 0.8.0 → 0.9.0

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

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

package/dist/components/label.d.ts

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

package/dist/components/label.js

@@ -0,0 +1,55 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+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 __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import { Label as LabelPrimitive } from "radix-ui";
+import { cn } from "../lib/utils.js";
+function Label(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    LabelPrimitive.Root,
+    __spreadValues({
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )
+    }, props)
+  );
+}
+export {
+  Label
+};
+//# sourceMappingURL=label.js.map

package/dist/components/label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/label.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Label as LabelPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../lib/utils\"\n\nfunction Label({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYI;AATJ,SAAS,SAAS,sBAAsB;AAExC,SAAS,UAAU;AAEnB,SAAS,MAAM,IAGsC;AAHtC,eACb;AAAA;AAAA,EARF,IAOe,IAEV,kBAFU,IAEV;AAAA,IADH;AAAA;AAGA,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,OACI;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/message.d.ts

@@ -0,0 +1,23 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { HTMLAttributes, ComponentProps } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Avatar } from './avatar.js';
+import 'radix-ui';
+
+type MessageProps = HTMLAttributes<HTMLDivElement> & {
+    from: "user" | "assistant";
+};
+declare const Message: ({ className, from, ...props }: MessageProps) => React.JSX.Element;
+declare const messageContentVariants: (props?: ({
+    variant?: "flat" | "contained" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type MessageContentProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof messageContentVariants>;
+declare const MessageContent: ({ children, className, variant, ...props }: MessageContentProps) => React.JSX.Element;
+type MessageAvatarProps = ComponentProps<typeof Avatar> & {
+    src?: string;
+    name?: string;
+};
+declare const MessageAvatar: ({ src, name, className, children, ...props }: MessageAvatarProps) => React.JSX.Element;
+
+export { Message, MessageAvatar, type MessageAvatarProps, MessageContent, type MessageContentProps, type MessageProps };

package/dist/components/message.js

@@ -0,0 +1,117 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
+const Message = (_a) => {
+  var _b = _a, { className, from } = _b, props = __objRest(_b, ["className", "from"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      "data-slot": "message",
+      className: cn(
+        "group flex w-full items-end gap-3 py-2",
+        from === "user" ? "is-user justify-end" : "is-assistant justify-start",
+        className
+      )
+    }, props)
+  );
+};
+const messageContentVariants = cva(
+  "flex flex-col gap-2 overflow-hidden text-sm leading-relaxed shadow-sm whitespace-pre-wrap",
+  {
+    variants: {
+      variant: {
+        contained: [
+          "max-w-[85%] px-6 py-4 rounded-[24px]",
+          "group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground group-[.is-user]:rounded-br-sm",
+          "group-[.is-assistant]:bg-muted group-[.is-assistant]:text-foreground group-[.is-assistant]:rounded-bl-sm"
+        ],
+        flat: [
+          "group-[.is-user]:max-w-[85%] group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground",
+          "group-[.is-assistant]:text-foreground"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "contained"
+    }
+  }
+);
+const MessageContent = (_c) => {
+  var _d = _c, {
+    children,
+    className,
+    variant
+  } = _d, props = __objRest(_d, [
+    "children",
+    "className",
+    "variant"
+  ]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "message-content",
+      className: cn(messageContentVariants({ variant, className }))
+    }, props), {
+      children
+    })
+  );
+};
+const MessageAvatar = (_e) => {
+  var _f = _e, {
+    src,
+    name,
+    className,
+    children
+  } = _f, props = __objRest(_f, [
+    "src",
+    "name",
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs(Avatar, __spreadProps(__spreadValues({ className: cn("ring-border size-8 ring-1 shrink-0", className) }, props), { children: [
+    children,
+    src && /* @__PURE__ */ jsx(AvatarImage, { alt: "", className: "mt-0 mb-0", src }),
+    !children && !src && /* @__PURE__ */ jsx(AvatarFallback, { children: (name == null ? void 0 : name.slice(0, 2)) || "ME" })
+  ] }));
+};
+export {
+  Message,
+  MessageAvatar,
+  MessageContent
+};
+//# sourceMappingURL=message.js.map

package/dist/components/message.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/message.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport type { ComponentProps, HTMLAttributes } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"./avatar\"\n\nexport type MessageProps = HTMLAttributes<HTMLDivElement> & {\n  from: \"user\" | \"assistant\"\n}\n\nexport const Message = ({ className, from, ...props }: MessageProps) => (\n  <div\n    data-slot=\"message\"\n    className={cn(\n      \"group flex w-full items-end gap-3 py-2\",\n      from === \"user\" ? \"is-user justify-end\" : \"is-assistant justify-start\",\n      className\n    )}\n    {...props}\n  />\n)\n\nconst messageContentVariants = cva(\n  \"flex flex-col gap-2 overflow-hidden text-sm leading-relaxed shadow-sm whitespace-pre-wrap\",\n  {\n    variants: {\n      variant: {\n        contained: [\n          \"max-w-[85%] px-6 py-4 rounded-[24px]\",\n          \"group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground group-[.is-user]:rounded-br-sm\",\n          \"group-[.is-assistant]:bg-muted group-[.is-assistant]:text-foreground group-[.is-assistant]:rounded-bl-sm\",\n        ],\n        flat: [\n          \"group-[.is-user]:max-w-[85%] group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground\",\n          \"group-[.is-assistant]:text-foreground\",\n        ],\n      },\n    },\n    defaultVariants: {\n      variant: \"contained\",\n    },\n  }\n)\n\nexport type MessageContentProps = HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof messageContentVariants>\n\nexport const MessageContent = ({\n  children,\n  className,\n  variant,\n  ...props\n}: MessageContentProps) => (\n  <div\n    data-slot=\"message-content\"\n    className={cn(messageContentVariants({ variant, className }))}\n    {...props}\n  >\n    {children}\n  </div>\n)\n\nexport type MessageAvatarProps = ComponentProps<typeof Avatar> & {\n  src?: string\n  name?: string\n}\n\nexport const MessageAvatar = ({\n  src,\n  name,\n  className,\n  children,\n  ...props\n}: MessageAvatarProps) => (\n  <Avatar className={cn(\"ring-border size-8 ring-1 shrink-0\", className)} {...props}>\n    {children}\n    {src && <AvatarImage alt=\"\" className=\"mt-0 mb-0\" src={src} />}\n    {!children && !src && <AvatarFallback>{name?.slice(0, 2) || \"ME\"}</AvatarFallback>}\n  </Avatar>\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcE,cA+DA,YA/DA;AAVF,SAAS,WAA8B;AAEvC,SAAS,UAAU;AACnB,SAAS,QAAQ,gBAAgB,mBAAmB;AAM7C,MAAM,UAAU,CAAC,OAA6C;AAA7C,eAAE,aAAW,KAbrC,IAawB,IAAsB,kBAAtB,IAAsB,CAApB,aAAW;AACnC;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,SAAS,SAAS,wBAAwB;AAAA,QAC1C;AAAA,MACF;AAAA,OACI;AAAA,EACN;AAAA;AAGF,MAAM,yBAAyB;AAAA,EAC7B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAM;AAAA,UACJ;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAKO,MAAM,iBAAiB,CAAC,OAKP;AALO,eAC7B;AAAA;AAAA,IACA;AAAA,IACA;AAAA,EArDF,IAkD+B,IAI1B,kBAJ0B,IAI1B;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,uBAAuB,EAAE,SAAS,UAAU,CAAC,CAAC;AAAA,OACxD,QAHL;AAAA,MAKE;AAAA;AAAA,EACH;AAAA;AAQK,MAAM,gBAAgB,CAAC,OAMP;AANO,eAC5B;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EA1EF,IAsE8B,IAKzB,kBALyB,IAKzB;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,8BAAC,uCAAO,WAAW,GAAG,sCAAsC,SAAS,KAAO,QAA3E,EACE;AAAA;AAAA,IACA,OAAO,oBAAC,eAAY,KAAI,IAAG,WAAU,aAAY,KAAU;AAAA,IAC3D,CAAC,YAAY,CAAC,OAAO,oBAAC,kBAAgB,wCAAM,MAAM,GAAG,OAAM,MAAK;AAAA,MACnE;AAAA;","names":[]}

package/dist/components/metric-card.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+interface MetricDataPoint {
+    label: string;
+    value: number | string;
+    color?: string;
+}
+interface MetricCardProps {
+    title: string;
+    value?: string | number;
+    unit?: string;
+    subtitle?: string;
+    change?: {
+        value: string;
+        direction: "up" | "down" | "neutral";
+        isGood?: boolean;
+    };
+    footerText?: string;
+    dataPoints?: MetricDataPoint[];
+    showExternalLink?: boolean;
+    showInfo?: boolean;
+}
+declare function MetricCard({ title, value, unit, subtitle, change, footerText, dataPoints, showExternalLink, showInfo, }: MetricCardProps): React.JSX.Element;
+
+export { MetricCard, type MetricCardProps, type MetricDataPoint };

package/dist/components/metric-card.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUp, ArrowDown, Info, ExternalLink } from "lucide-react";
+import { cn } from "../lib/utils.js";
+function MetricCard({
+  title,
+  value,
+  unit,
+  subtitle,
+  change,
+  footerText,
+  dataPoints,
+  showExternalLink,
+  showInfo = true
+}) {
+  const renderDonut = () => {
+    if (!dataPoints || dataPoints.length === 0 || value === void 0) return null;
+    const size = 80;
+    const strokeWidth = 12;
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const total = dataPoints.reduce((sum, dp) => sum + (typeof dp.value === "number" ? dp.value : 0), 0);
+    let currentOffset = 0;
+    return /* @__PURE__ */ jsxs("div", { className: "relative", style: { width: size, height: size }, children: [
+      /* @__PURE__ */ jsx("svg", { width: size, height: size, className: "transform -rotate-90", children: dataPoints.map((dp, i) => {
+        const val = typeof dp.value === "number" ? dp.value : 0;
+        const percentage = val / total;
+        const strokeLength = percentage * circumference;
+        const offset = currentOffset;
+        currentOffset += strokeLength;
+        const colors = ["#166534", "#22c55e", "#6ee7b7", "#ccfbf1", "#f1f5f9"];
+        const color = dp.color || colors[i % colors.length];
+        return /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: size / 2,
+            cy: size / 2,
+            r: radius,
+            fill: "none",
+            stroke: color,
+            strokeWidth,
+            strokeDasharray: `${Math.max(strokeLength - 2, 0)} ${circumference}`,
+            strokeDashoffset: -offset,
+            className: "transition-all duration-300"
+          },
+          dp.label
+        );
+      }) }),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center flex-col", children: /* @__PURE__ */ jsx("span", { className: "text-xl font-bold text-foreground leading-none", children: value }) })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col rounded-xl border border-border bg-card p-5 shadow-sm h-full w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("flex justify-between items-start", title ? "mb-4" : "mb-4"), children: [
+      title ? /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm text-foreground/80", children: title }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-3xl font-bold tracking-tight text-foreground", children: value }),
+          unit && /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold tracking-tight text-foreground", children: unit })
+        ] }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground mt-2", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground shrink-0 mt-0.5", children: [
+        showExternalLink && /* @__PURE__ */ jsx(ExternalLink, { className: "w-3.5 h-3.5 cursor-pointer hover:text-foreground transition-colors" }),
+        showInfo && /* @__PURE__ */ jsx(Info, { className: "w-3.5 h-3.5 cursor-pointer hover:text-foreground transition-colors" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [
+      dataPoints && dataPoints.length > 0 ? (
+        // Donut Chart Variant
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 mt-2 mb-6", children: [
+          /* @__PURE__ */ jsx("div", { className: "shrink-0", children: renderDonut() }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: dataPoints.slice(0, 5).map((dp, i) => {
+            const colors = ["bg-[#166534]", "bg-[#22c55e]", "bg-[#6ee7b7]", "bg-[#ccfbf1]", "bg-[#f1f5f9]"];
+            return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 text-[11px] font-medium min-w-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground min-w-0", children: [
+                /* @__PURE__ */ jsx("div", { className: cn("w-1.5 h-1.5 rounded-full shrink-0", dp.color ? "" : colors[i % colors.length]), style: dp.color ? { backgroundColor: dp.color } : {} }),
+                /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: dp.label })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-foreground font-semibold shrink-0", children: dp.value })
+            ] }, dp.label);
+          }) })
+        ] })
+      ) : title && // Standard Big Number Variant (only if title exists)
+      /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-4xl font-bold tracking-tight text-foreground", children: value }),
+          unit && /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold tracking-tight text-foreground", children: unit })
+        ] }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground mt-1", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-auto flex flex-col gap-1.5", children: [
+        change && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: (() => {
+          const isGoodDirection = change.isGood !== void 0 ? change.isGood : change.direction === "up";
+          const colorClass = isGoodDirection ? "text-emerald-600" : "text-red-600";
+          const Icon = change.direction === "down" ? ArrowDown : ArrowUp;
+          return /* @__PURE__ */ jsxs("span", { className: cn("text-xs font-semibold flex items-center gap-0.5", colorClass), children: [
+            /* @__PURE__ */ jsx(Icon, { className: "w-3 h-3 stroke-[3]" }),
+            change.value
+          ] });
+        })() }),
+        footerText && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground font-medium", children: footerText })
+      ] })
+    ] })
+  ] });
+}
+export {
+  MetricCard
+};
+//# sourceMappingURL=metric-card.js.map

package/dist/components/metric-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/metric-card.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { ArrowUp, ArrowDown, Info, ExternalLink } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nexport interface MetricDataPoint {\n  label: string\n  value: number | string\n  color?: string\n}\n\nexport interface MetricCardProps {\n  title: string\n  value?: string | number\n  unit?: string\n  subtitle?: string\n  change?: { \n    value: string\n    direction: \"up\" | \"down\" | \"neutral\"\n    isGood?: boolean // if true, up is green. if false, up is red (e.g. churn).\n  }\n  footerText?: string\n  dataPoints?: MetricDataPoint[]\n  showExternalLink?: boolean\n  showInfo?: boolean\n}\n\nexport function MetricCard({\n  title,\n  value,\n  unit,\n  subtitle,\n  change,\n  footerText,\n  dataPoints,\n  showExternalLink,\n  showInfo = true,\n}: MetricCardProps) {\n  // SVG Donut Chart logic for variants with dataPoints\n  const renderDonut = () => {\n    if (!dataPoints || dataPoints.length === 0 || value === undefined) return null\n\n    // Simple pseudo-donut chart logic assuming specific colors from the image\n    // In a real prod environment we'd use recharts/visx, but for this standalone component\n    // we can draw an SVG circle with stroke-dasharray based on the data\n    const size = 80\n    const strokeWidth = 12\n    const radius = (size - strokeWidth) / 2\n    const circumference = 2 * Math.PI * radius\n    \n    // Calculate total to distribute the circle\n    const total = dataPoints.reduce((sum, dp) => sum + (typeof dp.value === 'number' ? dp.value : 0), 0)\n    let currentOffset = 0\n\n    return (\n      <div className=\"relative\" style={{ width: size, height: size }}>\n        <svg width={size} height={size} className=\"transform -rotate-90\">\n          {dataPoints.map((dp, i) => {\n            const val = typeof dp.value === 'number' ? dp.value : 0\n            const percentage = val / total\n            const strokeLength = percentage * circumference\n            const offset = currentOffset\n            currentOffset += strokeLength\n\n            // Fallback colors matching the image's teal/green palette\n            const colors = [\"#166534\", \"#22c55e\", \"#6ee7b7\", \"#ccfbf1\", \"#f1f5f9\"]\n            const color = dp.color || colors[i % colors.length]\n\n            return (\n              <circle\n                key={dp.label}\n                cx={size / 2}\n                cy={size / 2}\n                r={radius}\n                fill=\"none\"\n                stroke={color}\n                strokeWidth={strokeWidth}\n                strokeDasharray={`${Math.max(strokeLength - 2, 0)} ${circumference}`}\n                strokeDashoffset={-offset}\n                className=\"transition-all duration-300\"\n              />\n            )\n          })}\n        </svg>\n        <div className=\"absolute inset-0 flex items-center justify-center flex-col\">\n          <span className=\"text-xl font-bold text-foreground leading-none\">{value}</span>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"flex flex-col rounded-xl border border-border bg-card p-5 shadow-sm h-full w-full\">\n      <div className={cn(\"flex justify-between items-start\", title ? \"mb-4\" : \"mb-4\")}>\n        {title ? (\n          <h3 className=\"font-semibold text-sm text-foreground/80\">{title}</h3>\n        ) : (\n          <div className=\"flex flex-col\">\n            <div className=\"flex items-baseline gap-1\">\n              <span className=\"text-3xl font-bold tracking-tight text-foreground\">{value}</span>\n              {unit && <span className=\"text-2xl font-bold tracking-tight text-foreground\">{unit}</span>}\n            </div>\n            {subtitle && (\n              <p className=\"text-sm font-medium text-muted-foreground mt-2\">{subtitle}</p>\n            )}\n          </div>\n        )}\n        <div className=\"flex items-center gap-1.5 text-muted-foreground shrink-0 mt-0.5\">\n          {showExternalLink && <ExternalLink className=\"w-3.5 h-3.5 cursor-pointer hover:text-foreground transition-colors\" />}\n          {showInfo && <Info className=\"w-3.5 h-3.5 cursor-pointer hover:text-foreground transition-colors\" />}\n        </div>\n      </div>\n\n      <div className=\"flex-1 flex flex-col min-w-0\">\n        {dataPoints && dataPoints.length > 0 ? (\n          // Donut Chart Variant\n          <div className=\"flex items-center gap-4 mt-2 mb-6\">\n            <div className=\"shrink-0\">\n              {renderDonut()}\n            </div>\n            <div className=\"flex flex-col gap-2 flex-1 min-w-0\">\n              {dataPoints.slice(0, 5).map((dp, i) => {\n                const colors = [\"bg-[#166534]\", \"bg-[#22c55e]\", \"bg-[#6ee7b7]\", \"bg-[#ccfbf1]\", \"bg-[#f1f5f9]\"]\n                return (\n                  <div key={dp.label} className=\"flex items-center justify-between gap-2 text-[11px] font-medium min-w-0\">\n                    <div className=\"flex items-center gap-1.5 text-muted-foreground min-w-0\">\n                      <div className={cn(\"w-1.5 h-1.5 rounded-full shrink-0\", dp.color ? \"\" : colors[i % colors.length])} style={dp.color ? { backgroundColor: dp.color } : {}} />\n                      <span className=\"whitespace-nowrap\">{dp.label}</span>\n                    </div>\n                    <span className=\"text-foreground font-semibold shrink-0\">{dp.value}</span>\n                  </div>\n                )\n              })}\n            </div>\n          </div>\n        ) : title && (\n          // Standard Big Number Variant (only if title exists)\n          <div className=\"mb-6\">\n            <div className=\"flex items-baseline gap-1\">\n              <span className=\"text-4xl font-bold tracking-tight text-foreground\">{value}</span>\n              {unit && <span className=\"text-2xl font-bold tracking-tight text-foreground\">{unit}</span>}\n            </div>\n            {subtitle && (\n              <p className=\"text-sm font-medium text-muted-foreground mt-1\">{subtitle}</p>\n            )}\n          </div>\n        )}\n\n        {/* Footer section (Change indicator & extra text) */}\n        <div className=\"mt-auto flex flex-col gap-1.5\">\n          {change && (\n            <div className=\"flex items-center gap-1\">\n              {(() => {\n                // Determine color based on isGood property\n                // By default, up is green (good), down is red (bad)\n                const isGoodDirection = change.isGood !== undefined \n                  ? change.isGood \n                  : change.direction === \"up\";\n                \n                const colorClass = isGoodDirection ? \"text-emerald-600\" : \"text-red-600\";\n                const Icon = change.direction === \"down\" ? ArrowDown : ArrowUp;\n                \n                return (\n                  <span className={cn(\"text-xs font-semibold flex items-center gap-0.5\", colorClass)}>\n                    <Icon className=\"w-3 h-3 stroke-[3]\" />\n                    {change.value}\n                  </span>\n                )\n              })()}\n            </div>\n          )}\n          {footerText && (\n            <span className=\"text-[11px] text-muted-foreground font-medium\">{footerText}</span>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/components/performance-metrics-table.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+interface PerformanceMetricsTableRow {
+    id: string;
+    label: string;
+    avatarFallback: string;
+    role?: string;
+    primaryValue: number;
+    primaryTarget: number;
+    ratePercent: number;
+    metricOne: number;
+    metricTwo: string;
+    metricThree: number;
+    metricFour: number;
+}
+interface PerformanceMetricsTableSortOption {
+    id: "primary-desc" | "primary-asc" | "rate-desc" | "metric-four-desc";
+    label: string;
+}
+interface PerformanceMetricsTableProps {
+    title?: string;
+    entityColumnLabel?: string;
+    primaryMetricColumnLabel?: string;
+    rateColumnLabel?: string;
+    metricOneColumnLabel?: string;
+    metricTwoColumnLabel?: string;
+    metricThreeColumnLabel?: string;
+    metricFourColumnLabel?: string;
+    viewOptions?: string[];
+    roleOptions?: string[];
+    sortOptions?: PerformanceMetricsTableSortOption[];
+    rows?: PerformanceMetricsTableRow[];
+    pageSize?: number;
+    searchPlaceholder?: string;
+}
+declare function PerformanceMetricsTable({ title, entityColumnLabel, primaryMetricColumnLabel, rateColumnLabel, metricOneColumnLabel, metricTwoColumnLabel, metricThreeColumnLabel, metricFourColumnLabel, viewOptions, roleOptions, sortOptions, rows, pageSize, searchPlaceholder, }: PerformanceMetricsTableProps): React.JSX.Element;
+
+export { PerformanceMetricsTable, type PerformanceMetricsTableRow, type PerformanceMetricsTableSortOption };