@handled-ai/design-system 0.8.0 → 0.9.0

package/dist/components/entity-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/entity-panel.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Sheet, SheetContent, SheetHeader, SheetTitle } from \"./sheet\"\nimport { Badge } from \"./badge\"\nimport { Button } from \"./button\"\nimport { Input } from \"./input\"\nimport {\n  Plus,\n  ExternalLink,\n  Mail,\n  FileText,\n  MessageCircle,\n  Briefcase,\n  Building2,\n  Users,\n  X,\n  ChevronDown,\n  ChevronUp,\n  Link as LinkIcon,\n  Maximize2,\n  Minimize2,\n  CalendarDays,\n} from \"lucide-react\"\nimport { TimelineActivity, type TimelineEvent } from \"./timeline-activity\"\n\n// ---------------------------------------------------------------------------\n// EntityPanel – supports both Sheet (side panel) and fullscreen modes\n// ---------------------------------------------------------------------------\n\nexport function EntityPanel({\n  isOpen,\n  onClose,\n  children,\n}: {\n  isOpen: boolean\n  onClose: (open: boolean) => void\n  children?: React.ReactNode\n}) {\n  const [isFullscreen, setIsFullscreen] = React.useState(false)\n\n  React.useEffect(() => {\n    if (!isOpen) setIsFullscreen(false)\n  }, [isOpen])\n\n  const handleClose = React.useCallback(() => {\n    setIsFullscreen(false)\n    onClose(false)\n  }, [onClose])\n\n  const panelContent = (\n    <EntityPanelContext.Provider value={{ isFullscreen, setIsFullscreen, onClose: handleClose }}>\n      {children}\n    </EntityPanelContext.Provider>\n  )\n\n  if (isFullscreen && isOpen) {\n    return (\n      <div className=\"fixed inset-0 z-50 flex flex-col overflow-hidden bg-background\">\n        <div className=\"flex-1 overflow-y-auto px-6 py-6\">{panelContent}</div>\n      </div>\n    )\n  }\n\n  return (\n    <Sheet open={isOpen} onOpenChange={onClose}>\n      <SheetContent\n        side=\"right\"\n        className=\"w-full sm:w-[500px] sm:max-w-[600px] overflow-hidden p-0 bg-background border-l border-border flex flex-col\"\n        showCloseButton={false}\n      >\n        <SheetHeader className=\"sr-only p-0\">\n          <SheetTitle>Entity panel</SheetTitle>\n        </SheetHeader>\n        <div className=\"flex-1 overflow-y-auto px-6 py-6\">{panelContent}</div>\n      </SheetContent>\n    </Sheet>\n  )\n}\n\nconst EntityPanelContext = React.createContext<{\n  isFullscreen: boolean\n  setIsFullscreen: (v: boolean) => void\n  onClose: () => void\n}>({\n  isFullscreen: false,\n  setIsFullscreen: () => {},\n  onClose: () => {},\n})\n\nfunction useEntityPanel() {\n  return React.useContext(EntityPanelContext)\n}\n\n// ---------------------------------------------------------------------------\n// EntityPanelHeader – MeetingDetail-inspired header bar\n// ---------------------------------------------------------------------------\n\nexport function EntityPanelHeader({\n  icon,\n  title,\n  badgeLabel,\n  subtitle: _subtitle,\n  headerAction,\n}: {\n  icon?: React.ReactNode\n  title: string\n  badgeLabel?: string\n  subtitle?: string\n  headerAction?: React.ReactNode\n}) {\n  const { isFullscreen, setIsFullscreen, onClose } = useEntityPanel()\n\n  return (\n    <div className=\"flex items-center justify-between mb-6\">\n      <div className=\"flex items-center gap-2 min-w-0\">\n        {icon ?? <CalendarDays className=\"w-5 h-5 text-muted-foreground shrink-0\" />}\n        <h2 className=\"text-lg font-semibold text-foreground truncate\">{title}</h2>\n        {badgeLabel && (\n          <Badge\n            variant=\"outline\"\n            className=\"text-blue-600 border-blue-300 dark:border-blue-700 dark:text-blue-400 shadow-none px-2 py-0.5 text-[11px] font-medium shrink-0\"\n          >\n            {badgeLabel}\n          </Badge>\n        )}\n      </div>\n      <div className=\"flex items-center gap-1 shrink-0 ml-4 text-muted-foreground\">\n        {headerAction}\n        <button\n          type=\"button\"\n          className=\"p-1.5 rounded-md hover:bg-secondary transition-colors\"\n          title=\"Copy Link\"\n        >\n          <LinkIcon className=\"w-4 h-4\" />\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => setIsFullscreen(!isFullscreen)}\n          className=\"p-1.5 rounded-md hover:bg-secondary transition-colors\"\n          title={isFullscreen ? \"Exit fullscreen\" : \"Fullscreen\"}\n        >\n          {isFullscreen ? (\n            <Minimize2 className=\"w-4 h-4\" />\n          ) : (\n            <Maximize2 className=\"w-4 h-4\" />\n          )}\n        </button>\n        <button\n          type=\"button\"\n          onClick={onClose}\n          className=\"p-1.5 rounded-md hover:bg-secondary transition-colors\"\n          title=\"Close\"\n        >\n          <X className=\"w-4 h-4\" />\n        </button>\n      </div>\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// EntityPanelTabs – Overview/Details tab bar\n// ---------------------------------------------------------------------------\n\nexport function EntityPanelTabs({\n  tabs,\n  activeTab,\n  onTabChange,\n}: {\n  tabs: { id: string; label: string }[]\n  activeTab: string\n  onTabChange: (id: string) => void\n}) {\n  return (\n    <div className=\"flex items-center gap-6 border-b border-border mb-6\">\n      {tabs.map((tab) => (\n        <button\n          key={tab.id}\n          type=\"button\"\n          onClick={() => onTabChange(tab.id)}\n          className={`pb-3 text-sm font-medium border-b-2 transition-colors ${\n            activeTab === tab.id\n              ? \"border-primary text-foreground\"\n              : \"border-transparent text-muted-foreground hover:text-foreground\"\n          }`}\n        >\n          {tab.label}\n        </button>\n      ))}\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// EntityMetadataGrid – key/value metadata rows with icons\n// ---------------------------------------------------------------------------\n\nexport interface EntityMetadataField {\n  icon: React.ComponentType<{ className?: string }>\n  label: string\n  value: React.ReactNode\n}\n\nexport function EntityMetadataGrid({ fields }: { fields: EntityMetadataField[] }) {\n  return (\n    <div className=\"grid grid-cols-1 md:grid-cols-[160px_1fr] gap-y-4 gap-x-6 mb-8 text-sm\">\n      {fields.map((field, idx) => (\n        <React.Fragment key={idx}>\n          <div className=\"flex items-center gap-2 text-muted-foreground font-medium\">\n            <field.icon className=\"w-4 h-4\" />\n            <span>{field.label}</span>\n          </div>\n          <div className=\"text-foreground\">{field.value}</div>\n        </React.Fragment>\n      ))}\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// EntitySection – clean section with title (MeetingDetail-style)\n// ---------------------------------------------------------------------------\n\nexport function EntitySection({\n  title,\n  children,\n  action,\n}: {\n  title: string\n  children: React.ReactNode\n  action?: React.ReactNode\n}) {\n  return (\n    <section className=\"mb-8\">\n      <div className=\"flex items-center justify-between mb-3\">\n        <h3 className=\"text-sm font-semibold text-foreground\">{title}</h3>\n        {action}\n      </div>\n      {children}\n    </section>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// EntityActivityItem – clean activity row (MeetingDetail-style)\n// ---------------------------------------------------------------------------\n\nexport function EntityActivityItem({\n  icon,\n  title,\n  description,\n  date,\n}: {\n  icon?: React.ReactNode\n  title: React.ReactNode\n  description?: React.ReactNode\n  date?: string\n}) {\n  return (\n    <div className=\"flex gap-3 text-[13px]\">\n      <div className=\"mt-0.5 text-muted-foreground shrink-0\">\n        {icon ?? <CalendarDays className=\"w-4 h-4\" />}\n      </div>\n      <div>\n        <p className=\"text-foreground leading-relaxed\">{title}</p>\n        {description && <p className=\"text-[11px] text-muted-foreground/70 mt-0.5\">{description}</p>}\n        {date && <p className=\"text-[11px] text-muted-foreground/70 mt-0.5\">{date}</p>}\n      </div>\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// SystemActivity – standalone section for bottom of entity panel\n// ---------------------------------------------------------------------------\n\nexport function SystemActivity() {\n  return (\n    <EntitySection title=\"System Activity\">\n      <div className=\"space-y-4\">\n        <EntityActivityItem\n          title={<><span className=\"font-medium\">System</span> enriched the lead</>}\n          date=\"Today at 10:15 AM\"\n        />\n        <EntityActivityItem\n          icon={<Mail className=\"w-4 h-4\" />}\n          title={<><span className=\"font-medium\">Jackie Lee</span> submitted website form</>}\n          date=\"Yesterday at 3:22 PM\"\n        />\n      </div>\n    </EntitySection>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// PotentialContacts – unchanged from original\n// ---------------------------------------------------------------------------\n\nexport interface EntityPanelBrandIcons {\n  linkedin?: string\n  gmail?: string\n  slack?: string\n  gdoc?: string\n}\n\nfunction EntityPanelBrandIcon({\n  src,\n  alt,\n  className,\n  fallback,\n}: {\n  src?: string\n  alt: string\n  className: string\n  fallback: React.ReactNode\n}) {\n  if (!src) {\n    return <>{fallback}</>\n  }\n\n  return <img src={src} alt={alt} className={className} />\n}\n\nexport function PotentialContacts({\n  icons,\n}: {\n  icons?: Pick<EntityPanelBrandIcons, \"linkedin\" | \"gmail\">\n}) {\n  return (\n    <div className=\"space-y-3 mb-8\">\n      <div className=\"flex items-center justify-between\">\n        <h3 className=\"text-sm font-semibold text-foreground\">Potential Contacts</h3>\n        <span className=\"text-xs text-muted-foreground\">3 identified</span>\n      </div>\n      <div className=\"space-y-0 pt-1\">\n        <div className=\"flex items-center justify-between gap-3 group py-2.5 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n          <div className=\"flex items-center gap-2.5 min-w-0\">\n            <Badge variant=\"outline\" className=\"bg-indigo-50 text-indigo-700 border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800 shadow-none px-2 py-0 text-[11px] font-medium shrink-0\">Primary</Badge>\n            <span className=\"font-medium text-sm text-foreground truncate\">Jackie Lee</span>\n            <span className=\"text-muted-foreground text-sm shrink-0\">&middot;</span>\n            <span className=\"text-muted-foreground text-sm truncate\">VP Finance</span>\n          </div>\n          <div className=\"flex items-center gap-1 shrink-0\">\n            <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n              <EntityPanelBrandIcon\n                src={icons?.linkedin}\n                alt=\"LinkedIn\"\n                className=\"w-3.5 h-3.5 object-contain\"\n                fallback={<LinkIcon className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n              />\n            </button>\n            <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n              <EntityPanelBrandIcon\n                src={icons?.gmail}\n                alt=\"Gmail\"\n                className=\"w-3.5 h-3.5 object-contain\"\n                fallback={<Mail className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n              />\n            </button>\n            <Button size=\"sm\" className=\"bg-foreground text-background hover:bg-foreground/90 h-6 text-[11px] font-medium shadow-none ml-1\">\n              <Plus className=\"w-3 h-3 mr-1\" /> Add to SF\n            </Button>\n          </div>\n        </div>\n\n        <div className=\"flex items-center justify-between gap-3 group py-2.5 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n          <div className=\"flex items-center gap-2.5 min-w-0\">\n            <Badge variant=\"outline\" className=\"bg-green-50 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800 shadow-none px-2 py-0 text-[11px] font-medium shrink-0\">78%</Badge>\n            <span className=\"font-medium text-sm text-foreground truncate\">Marcus Webb</span>\n            <span className=\"text-muted-foreground text-sm shrink-0\">&middot;</span>\n            <span className=\"text-muted-foreground text-sm truncate\">CEO</span>\n          </div>\n          <div className=\"flex items-center gap-1 shrink-0\">\n            <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n              <EntityPanelBrandIcon\n                src={icons?.linkedin}\n                alt=\"LinkedIn\"\n                className=\"w-3.5 h-3.5 object-contain\"\n                fallback={<LinkIcon className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n              />\n            </button>\n            <Button size=\"sm\" className=\"bg-foreground text-background hover:bg-foreground/90 h-6 text-[11px] font-medium shadow-none ml-1\">\n              <Plus className=\"w-3 h-3 mr-1\" /> Add to SF\n            </Button>\n          </div>\n        </div>\n\n        <div className=\"flex items-center justify-between gap-3 group py-2.5 border-b border-border/30 last:border-0 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n          <div className=\"flex items-center gap-2.5 min-w-0\">\n            <Badge variant=\"outline\" className=\"bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-800 shadow-none px-2 py-0 text-[11px] font-medium shrink-0\">65%</Badge>\n            <span className=\"font-medium text-sm text-foreground truncate\">Priya Shah</span>\n            <span className=\"text-muted-foreground text-sm shrink-0\">&middot;</span>\n            <span className=\"text-muted-foreground text-sm truncate\">Head of Ops</span>\n          </div>\n          <div className=\"flex items-center gap-1 shrink-0\">\n            <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n              <EntityPanelBrandIcon\n                src={icons?.linkedin}\n                alt=\"LinkedIn\"\n                className=\"w-3.5 h-3.5 object-contain\"\n                fallback={<LinkIcon className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n              />\n            </button>\n            <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n              <EntityPanelBrandIcon\n                src={icons?.gmail}\n                alt=\"Gmail\"\n                className=\"w-3.5 h-3.5 object-contain\"\n                fallback={<Mail className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n              />\n            </button>\n            <Button size=\"sm\" className=\"bg-foreground text-background hover:bg-foreground/90 h-6 text-[11px] font-medium shadow-none ml-1\">\n              <Plus className=\"w-3 h-3 mr-1\" /> Add to SF\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// RecentActivity\n// ---------------------------------------------------------------------------\n\nexport type ActivityItem = TimelineEvent\n\nexport function RecentActivity({\n  title = \"Recent Activity\",\n  count = \"10 total events\",\n  filters = [],\n  items = [],\n}: {\n  title?: string\n  count?: string\n  filters?: string[]\n  items?: TimelineEvent[]\n}) {\n  return (\n    <div id=\"entity-recent-activity\" className=\"space-y-4 mb-8 scroll-m-20\">\n      <div className=\"flex items-center justify-between\">\n        <h3 className=\"text-sm font-semibold text-foreground\">{title}</h3>\n        {count && <span className=\"text-xs text-muted-foreground\">{count}</span>}\n      </div>\n\n      {filters.length > 0 && (\n        <div className=\"flex flex-wrap items-center gap-1.5\">\n          {filters.map((filter) => (\n            <Button\n              key={filter}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"h-7 text-xs rounded-md shadow-none font-medium border-border text-muted-foreground hover:text-foreground\"\n            >\n              {filter}\n            </Button>\n          ))}\n        </div>\n      )}\n\n      <div className=\"relative\">\n        <Input\n          placeholder=\"Search activity...\"\n          className=\"h-9 text-sm bg-background border-border shadow-none\"\n        />\n      </div>\n\n      <div>\n        <TimelineActivity events={items} />\n      </div>\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// ConnectedApps\n// ---------------------------------------------------------------------------\n\nexport function ConnectedApps({\n  icons,\n}: {\n  icons?: Pick<EntityPanelBrandIcons, \"slack\" | \"gdoc\">\n}) {\n  return (\n    <div className=\"space-y-3 mb-8\">\n      <div className=\"flex items-center justify-between\">\n        <h3 className=\"text-sm font-semibold text-foreground\">Connected Apps</h3>\n        <span className=\"text-xs text-muted-foreground\">3 connected</span>\n      </div>\n\n      <div className=\"space-y-0 pt-1\">\n        <div className=\"flex items-center justify-between gap-3 group py-2.5 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n          <div className=\"flex items-center gap-3 min-w-0\">\n            <div className=\"w-8 h-8 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0\">\n              <EntityPanelBrandIcon\n                src={icons?.slack}\n                alt=\"Slack\"\n                className=\"w-4 h-4 object-contain\"\n                fallback={<MessageCircle className=\"w-4 h-4 text-muted-foreground\" />}\n              />\n            </div>\n            <div className=\"min-w-0\">\n              <p className=\"font-medium text-sm text-foreground leading-snug truncate\">#lunchclub-acmeco</p>\n              <p className=\"text-xs text-muted-foreground/60\">Slack Channel</p>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-1.5 shrink-0\">\n            <ExternalLink className=\"w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity\" />\n            <span className=\"text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer hover:text-foreground\">Open</span>\n          </div>\n        </div>\n\n        <div className=\"flex items-center justify-between gap-3 group py-2.5 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n          <div className=\"flex items-center gap-3 min-w-0\">\n            <div className=\"w-8 h-8 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0\">\n              <EntityPanelBrandIcon\n                src={icons?.gdoc}\n                alt=\"Google Docs\"\n                className=\"w-4 h-4 object-contain\"\n                fallback={<FileText className=\"w-4 h-4 text-muted-foreground\" />}\n              />\n            </div>\n            <div className=\"min-w-0\">\n              <p className=\"font-medium text-sm text-foreground leading-snug truncate\">Account Strategy Document</p>\n              <p className=\"text-xs text-muted-foreground/60\">Google Document</p>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-1.5 shrink-0\">\n            <ExternalLink className=\"w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity\" />\n            <span className=\"text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer hover:text-foreground\">Open</span>\n          </div>\n        </div>\n\n        <div className=\"flex items-center justify-between gap-3 group py-2.5 border-b border-border/30 last:border-0 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n          <div className=\"flex items-center gap-3 min-w-0\">\n            <div className=\"w-8 h-8 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0\">\n              <FileText className=\"w-4 h-4 text-foreground\" />\n            </div>\n            <div className=\"min-w-0\">\n              <p className=\"font-medium text-sm text-foreground leading-snug truncate\">Customer Success Playbook</p>\n              <p className=\"text-xs text-muted-foreground/60\">Notion Page</p>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-1.5 shrink-0\">\n            <ExternalLink className=\"w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity\" />\n            <span className=\"text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer hover:text-foreground\">Open</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// EntityDetails – updated with MeetingDetail-inspired metadata grid + tabs\n// ---------------------------------------------------------------------------\n\nexport function EntityDetails({ onClose: _onClose }: { onClose?: () => void }) {\n  const [activeTab, setActiveTab] = React.useState<\"overview\" | \"details\">(\"overview\")\n  const [showMore, setShowMore] = React.useState(false)\n\n  const leadFields: EntityMetadataField[] = [\n    { icon: Users, label: \"Lead Name\", value: <span className=\"font-medium\">Jackie Lee</span> },\n    { icon: Briefcase, label: \"Title\", value: <span className=\"font-medium\">VP Finance</span> },\n    { icon: Building2, label: \"Company\", value: <span className=\"font-medium\">CloudKitchen</span> },\n    { icon: Mail, label: \"Lead Source\", value: <span className=\"font-medium\">Inbound — Website form</span> },\n    {\n      icon: ({ className }) => (\n        <div className={className}>\n          <div className=\"w-3 h-3 rounded-full border-[2px] border-amber-500\" />\n        </div>\n      ),\n      label: \"Lead Status\",\n      value: (\n        <Badge variant=\"outline\" className=\"text-amber-700 border-amber-200 bg-amber-50 dark:bg-amber-950 dark:text-amber-300 dark:border-amber-800 shadow-none font-medium px-2 py-0 text-[11px]\">\n          New — Not Contacted\n        </Badge>\n      ),\n    },\n    { icon: Users, label: \"Lead Owner\", value: <span className=\"font-medium\">Sarah Johnson (SDR)</span> },\n    {\n      icon: Building2,\n      label: \"Industry\",\n      value: (\n        <Badge variant=\"outline\" className=\"text-blue-700 border-blue-200 bg-blue-50 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800 shadow-none font-medium px-2 py-0 text-[11px]\">\n          Food Tech / Logistics\n        </Badge>\n      ),\n    },\n    { icon: Users, label: \"Company Size\", value: <span className=\"font-medium\">200-500 employees</span> },\n  ]\n\n  const visibleFields = showMore ? leadFields : leadFields.slice(0, 6)\n\n  return (\n    <div className=\"space-y-0\">\n      {/* Header */}\n      <EntityPanelHeader\n        icon={\n          <div className=\"w-10 h-10 rounded-lg bg-muted flex items-center justify-center text-sm font-medium text-muted-foreground shrink-0\">\n            CK\n          </div>\n        }\n        title=\"CloudKitchen\"\n        badgeLabel=\"Lead\"\n        subtitle=\"Last enriched: Today at 10:15 AM\"\n      />\n\n      {/* Tabs */}\n      <EntityPanelTabs\n        tabs={[\n          { id: \"overview\", label: \"Overview\" },\n          { id: \"details\", label: \"Details\" },\n        ]}\n        activeTab={activeTab}\n        onTabChange={(id) => setActiveTab(id as \"overview\" | \"details\")}\n      />\n\n      {activeTab === \"overview\" ? (\n        <div className=\"space-y-0\">\n          {/* Metadata Grid */}\n          <EntityMetadataGrid fields={visibleFields} />\n\n          {leadFields.length > 6 && (\n            <button\n              onClick={() => setShowMore(!showMore)}\n              className=\"flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors mb-8\"\n            >\n              {showMore ? \"See less\" : \"See more\"}\n              {showMore ? <ChevronUp className=\"w-3 h-3\" /> : <ChevronDown className=\"w-3 h-3\" />}\n            </button>\n          )}\n\n          {/* Enrichment as sections */}\n          <EntitySection title=\"Company Signals\">\n            <ul className=\"space-y-2\">\n              <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span>\n                  Recent funding: $45M Series B, 3 months ago\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">1</span>\n                </span>\n              </li>\n              <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span>\n                  Hiring: 3 finance/treasury roles in last 30 days\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">2</span>\n                </span>\n              </li>\n              <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span>\n                  Market expansion: 8 &rarr; 15 US markets planned\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">3</span>\n                </span>\n              </li>\n            </ul>\n          </EntitySection>\n\n          <EntitySection title=\"Contact Signals (Jackie Lee)\">\n            <ul className=\"space-y-2\">\n              <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span>\n                  Started role: 12 days ago\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">4</span>\n                </span>\n              </li>\n              <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span>\n                  Previous: Deel — operations/finance\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">4</span>\n                </span>\n              </li>\n              <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span>\n                  LinkedIn connections to existing customers: 2 detected\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">4</span>\n                </span>\n              </li>\n            </ul>\n          </EntitySection>\n\n          <SourcesToggle />\n        </div>\n      ) : (\n        <div className=\"space-y-0\">\n          <EntitySection title=\"Estimated Tech Stack\">\n            <div className=\"space-y-2\">\n              <div className=\"flex items-start gap-2 text-sm\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span className=\"text-muted-foreground min-w-[100px] shrink-0\">Banking:</span>\n                <span className=\"text-muted-foreground/50 italic\">Unknown</span>\n              </div>\n              <div className=\"flex items-start gap-2 text-sm\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span className=\"text-muted-foreground min-w-[100px] shrink-0\">Corporate Cards:</span>\n                <span className=\"text-foreground font-medium\">\n                  Brex <span className=\"text-muted-foreground font-normal\">(from job posting requirements)</span>\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">2</span>\n                </span>\n              </div>\n              <div className=\"flex items-start gap-2 text-sm\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span className=\"text-muted-foreground min-w-[100px] shrink-0\">Payroll:</span>\n                <span className=\"text-foreground font-medium\">\n                  Gusto <span className=\"text-muted-foreground font-normal\">(from LinkedIn integrations)</span>\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">5</span>\n                </span>\n              </div>\n            </div>\n          </EntitySection>\n        </div>\n      )}\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// SourcesToggle – collapsible sources list\n// ---------------------------------------------------------------------------\n\nfunction SourcesToggle() {\n  const [expanded, setExpanded] = React.useState(false)\n\n  const sources = [\n    { name: \"Crunchbase\", type: \"Funding data\", lastPull: \"2h ago\" },\n    { name: \"LinkedIn\", type: \"People & company\", lastPull: \"12h ago\" },\n    { name: \"LinkedIn Jobs\", type: \"Hiring signals\", lastPull: \"1d ago\" },\n    { name: \"PR Newswire\", type: \"News & press\", lastPull: \"6h ago\" },\n    { name: \"Clearbit\", type: \"Tech stack & firmographics\", lastPull: \"2h ago\" },\n  ]\n\n  return (\n    <div className=\"mb-8\">\n      <button\n        onClick={() => setExpanded(!expanded)}\n        className=\"flex items-center gap-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground transition-colors\"\n      >\n        Sources\n        <ChevronDown className={`w-3.5 h-3.5 transition-transform duration-200 ${expanded ? \"rotate-180\" : \"\"}`} />\n      </button>\n\n      {expanded && (\n        <div className=\"pt-3 space-y-2 animate-in fade-in slide-in-from-top-1 duration-200\">\n          {sources.map((src, idx) => (\n            <div key={idx} className=\"flex items-center justify-between text-xs text-muted-foreground py-1\">\n              <div className=\"flex items-center gap-2\">\n                <span className=\"inline-flex items-center justify-center w-4 h-4 text-[9px] font-medium text-muted-foreground/50 border border-border rounded-full\">\n                  {idx + 1}\n                </span>\n                <span className=\"font-medium text-foreground\">{src.name}</span>\n                <span className=\"text-muted-foreground/60\">&middot;</span>\n                <span>{src.type}</span>\n              </div>\n              <span className=\"text-muted-foreground/50\">{src.lastPull}</span>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/components/inbox-row.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+interface InboxRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    itemId: string;
+    statusColor: "red" | "orange" | "gray";
+    primaryText: string;
+    secondaryText: string;
+    tertiaryText: string;
+    isAtRisk?: boolean;
+    isSelected?: boolean;
+    contactMethods?: {
+        phone?: boolean;
+        email?: boolean;
+        message?: boolean;
+    };
+    interactionCount: number | string;
+    assignee: string;
+    status: string;
+    time: string;
+}
+declare const InboxRow: React.ForwardRefExoticComponent<InboxRowProps & React.RefAttributes<HTMLDivElement>>;
+declare function InboxGroupHeader({ title, count }: {
+    title: string;
+    count: number;
+}): React.JSX.Element;
+
+export { InboxGroupHeader, InboxRow, type InboxRowProps };

package/dist/components/inbox-row.js

@@ -0,0 +1,139 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Phone, Mail, MessageSquare, AlertCircle, ChevronDown } from "lucide-react";
+import { cn } from "../lib/utils.js";
+const InboxRow = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      itemId,
+      statusColor,
+      primaryText,
+      secondaryText,
+      tertiaryText,
+      isAtRisk = false,
+      isSelected = false,
+      contactMethods = { phone: true, email: true, message: true },
+      interactionCount,
+      assignee,
+      status,
+      time
+    } = _b, props = __objRest(_b, [
+      "className",
+      "itemId",
+      "statusColor",
+      "primaryText",
+      "secondaryText",
+      "tertiaryText",
+      "isAtRisk",
+      "isSelected",
+      "contactMethods",
+      "interactionCount",
+      "assignee",
+      "status",
+      "time"
+    ]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "group flex items-center gap-4 py-2.5 px-4 border-b border-border cursor-pointer transition-colors text-[13px] border-l-2",
+          isSelected ? "bg-muted/30 border-l-brand-purple" : "bg-background hover:bg-muted/50 border-l-transparent",
+          className
+        )
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "w-[100px] shrink-0 text-muted-foreground font-mono text-xs", children: itemId }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn("w-2 h-2 rounded-full shrink-0", {
+                  "bg-red-500": statusColor === "red",
+                  "bg-orange-500": statusColor === "orange",
+                  "bg-gray-300": statusColor === "gray"
+                })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 truncate", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground text-sm", children: primaryText }),
+              /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-xs", children: [
+                "via ",
+                secondaryText
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: "\u2192" }),
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: tertiaryText })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "w-24 shrink-0 flex items-center justify-end px-2", children: isAtRisk && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-red-600 bg-red-50 px-1.5 py-0.5 rounded-md text-[10px] font-semibold border border-red-100", children: [
+            /* @__PURE__ */ jsx(AlertCircle, { className: "w-3 h-3" }),
+            "At Risk"
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground/40 shrink-0 w-20 justify-center", children: [
+            /* @__PURE__ */ jsx(Phone, { className: cn("w-3.5 h-3.5", contactMethods.phone && "text-muted-foreground/80") }),
+            /* @__PURE__ */ jsx(Mail, { className: cn("w-3.5 h-3.5", contactMethods.email && "text-muted-foreground/80") }),
+            /* @__PURE__ */ jsx(MessageSquare, { className: cn("w-3.5 h-3.5", contactMethods.message && "text-muted-foreground/80") })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "w-12 shrink-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "text-[10px] font-semibold px-1.5 py-0.5 rounded border",
+                typeof interactionCount === "string" && interactionCount.includes("+") ? "bg-red-50 border-red-200 text-red-700" : Number(interactionCount) > 2 ? "bg-yellow-50 border-yellow-200 text-yellow-700" : "bg-muted border-border text-foreground"
+              ),
+              children: interactionCount
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "w-32 shrink-0 text-xs font-medium text-foreground truncate", children: assignee }),
+          /* @__PURE__ */ jsx("div", { className: "w-28 shrink-0", children: /* @__PURE__ */ jsx("div", { className: "inline-flex items-center bg-muted/80 px-2 py-0.5 rounded text-[10px] font-medium text-muted-foreground", children: status }) }),
+          /* @__PURE__ */ jsx("div", { className: "w-24 shrink-0 text-right text-xs text-muted-foreground", children: time })
+        ]
+      })
+    );
+  }
+);
+InboxRow.displayName = "InboxRow";
+function InboxGroupHeader({ title, count }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-2 px-4 bg-muted/30 border-b border-border text-[11px] font-bold text-muted-foreground uppercase tracking-wider", children: [
+    /* @__PURE__ */ jsx(ChevronDown, { className: "w-3.5 h-3.5" }),
+    title,
+    /* @__PURE__ */ jsx("span", { className: "bg-background border border-border px-1.5 py-0.5 rounded text-[10px]", children: count })
+  ] });
+}
+export {
+  InboxGroupHeader,
+  InboxRow
+};
+//# sourceMappingURL=inbox-row.js.map

package/dist/components/inbox-row.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/inbox-row.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Phone, Mail, MessageSquare, AlertCircle, ChevronDown } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nexport interface InboxRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  itemId: string\n  statusColor: \"red\" | \"orange\" | \"gray\"\n  primaryText: string\n  secondaryText: string\n  tertiaryText: string\n  isAtRisk?: boolean\n  isSelected?: boolean\n  contactMethods?: { phone?: boolean; email?: boolean; message?: boolean }\n  interactionCount: number | string\n  assignee: string\n  status: string\n  time: string\n}\n\nexport const InboxRow = React.forwardRef<HTMLDivElement, InboxRowProps>(\n  (\n    {\n      className,\n      itemId,\n      statusColor,\n      primaryText,\n      secondaryText,\n      tertiaryText,\n      isAtRisk = false,\n      isSelected = false,\n      contactMethods = { phone: true, email: true, message: true },\n      interactionCount,\n      assignee,\n      status,\n      time,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"group flex items-center gap-4 py-2.5 px-4 border-b border-border cursor-pointer transition-colors text-[13px] border-l-2\",\n          isSelected\n            ? \"bg-muted/30 border-l-brand-purple\"\n            : \"bg-background hover:bg-muted/50 border-l-transparent\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"w-[100px] shrink-0 text-muted-foreground font-mono text-xs\">\n          {itemId}\n        </div>\n\n        <div className=\"flex-1 min-w-0 flex items-center gap-3\">\n          <div\n            className={cn(\"w-2 h-2 rounded-full shrink-0\", {\n              \"bg-red-500\": statusColor === \"red\",\n              \"bg-orange-500\": statusColor === \"orange\",\n              \"bg-gray-300\": statusColor === \"gray\",\n            })}\n          />\n          <div className=\"flex items-center gap-1.5 truncate\">\n            <span className=\"font-semibold text-foreground text-sm\">{primaryText}</span>\n            <span className=\"text-muted-foreground text-xs\">via {secondaryText}</span>\n            <span className=\"text-muted-foreground text-xs\">&rarr;</span>\n            <span className=\"text-muted-foreground text-xs\">{tertiaryText}</span>\n          </div>\n        </div>\n\n        <div className=\"w-24 shrink-0 flex items-center justify-end px-2\">\n          {isAtRisk && (\n            <div className=\"flex items-center gap-1 text-red-600 bg-red-50 px-1.5 py-0.5 rounded-md text-[10px] font-semibold border border-red-100\">\n              <AlertCircle className=\"w-3 h-3\" />\n              At Risk\n            </div>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-2 text-muted-foreground/40 shrink-0 w-20 justify-center\">\n          <Phone className={cn(\"w-3.5 h-3.5\", contactMethods.phone && \"text-muted-foreground/80\")} />\n          <Mail className={cn(\"w-3.5 h-3.5\", contactMethods.email && \"text-muted-foreground/80\")} />\n          <MessageSquare className={cn(\"w-3.5 h-3.5\", contactMethods.message && \"text-muted-foreground/80\")} />\n        </div>\n\n        <div className=\"w-12 shrink-0 flex items-center justify-center\">\n          <div\n            className={cn(\n              \"text-[10px] font-semibold px-1.5 py-0.5 rounded border\",\n              typeof interactionCount === \"string\" && interactionCount.includes(\"+\")\n                ? \"bg-red-50 border-red-200 text-red-700\"\n                : Number(interactionCount) > 2\n                ? \"bg-yellow-50 border-yellow-200 text-yellow-700\"\n                : \"bg-muted border-border text-foreground\"\n            )}\n          >\n            {interactionCount}\n          </div>\n        </div>\n\n        <div className=\"w-32 shrink-0 text-xs font-medium text-foreground truncate\">\n          {assignee}\n        </div>\n\n        <div className=\"w-28 shrink-0\">\n          <div className=\"inline-flex items-center bg-muted/80 px-2 py-0.5 rounded text-[10px] font-medium text-muted-foreground\">\n            {status}\n          </div>\n        </div>\n\n        <div className=\"w-24 shrink-0 text-right text-xs text-muted-foreground\">\n          {time}\n        </div>\n      </div>\n    )\n  }\n)\n\nInboxRow.displayName = \"InboxRow\"\n\nexport function InboxGroupHeader({ title, count }: { title: string; count: number }) {\n  return (\n    <div className=\"flex items-center gap-2 py-2 px-4 bg-muted/30 border-b border-border text-[11px] font-bold text-muted-foreground uppercase tracking-wider\">\n      <ChevronDown className=\"w-3.5 h-3.5\" />\n      {title}\n      <span className=\"bg-background border border-border px-1.5 py-0.5 rounded text-[10px]\">\n        {count}\n      </span>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDQ,cAcI,YAdJ;AAnDR,YAAY,WAAW;AACvB,SAAS,OAAO,MAAM,eAAe,aAAa,mBAAmB;AACrE,SAAS,UAAU;AAiBZ,MAAM,WAAW,MAAM;AAAA,EAC5B,CACE,IAgBA,QACG;AAjBH,iBACE;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,aAAa;AAAA,MACb,iBAAiB,EAAE,OAAO,MAAM,OAAO,MAAM,SAAS,KAAK;AAAA,MAC3D;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAlCN,IAqBI,IAcK,kBAdL,IAcK;AAAA,MAbH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,aACI,sCACA;AAAA,UACJ;AAAA,QACF;AAAA,SACI,QATL;AAAA,QAWC;AAAA,8BAAC,SAAI,WAAU,8DACZ,kBACH;AAAA,UAEA,qBAAC,SAAI,WAAU,0CACb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,GAAG,iCAAiC;AAAA,kBAC7C,cAAc,gBAAgB;AAAA,kBAC9B,iBAAiB,gBAAgB;AAAA,kBACjC,eAAe,gBAAgB;AAAA,gBACjC,CAAC;AAAA;AAAA,YACH;AAAA,YACA,qBAAC,SAAI,WAAU,sCACb;AAAA,kCAAC,UAAK,WAAU,yCAAyC,uBAAY;AAAA,cACrE,qBAAC,UAAK,WAAU,iCAAgC;AAAA;AAAA,gBAAK;AAAA,iBAAc;AAAA,cACnE,oBAAC,UAAK,WAAU,iCAAgC,oBAAM;AAAA,cACtD,oBAAC,UAAK,WAAU,iCAAiC,wBAAa;AAAA,eAChE;AAAA,aACF;AAAA,UAEA,oBAAC,SAAI,WAAU,oDACZ,sBACC,qBAAC,SAAI,WAAU,2HACb;AAAA,gCAAC,eAAY,WAAU,WAAU;AAAA,YAAE;AAAA,aAErC,GAEJ;AAAA,UAEA,qBAAC,SAAI,WAAU,iFACb;AAAA,gCAAC,SAAM,WAAW,GAAG,eAAe,eAAe,SAAS,0BAA0B,GAAG;AAAA,YACzF,oBAAC,QAAK,WAAW,GAAG,eAAe,eAAe,SAAS,0BAA0B,GAAG;AAAA,YACxF,oBAAC,iBAAc,WAAW,GAAG,eAAe,eAAe,WAAW,0BAA0B,GAAG;AAAA,aACrG;AAAA,UAEA,oBAAC,SAAI,WAAU,kDACb;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,OAAO,qBAAqB,YAAY,iBAAiB,SAAS,GAAG,IACjE,0CACA,OAAO,gBAAgB,IAAI,IAC3B,mDACA;AAAA,cACN;AAAA,cAEC;AAAA;AAAA,UACH,GACF;AAAA,UAEA,oBAAC,SAAI,WAAU,8DACZ,oBACH;AAAA,UAEA,oBAAC,SAAI,WAAU,iBACb,8BAAC,SAAI,WAAU,0GACZ,kBACH,GACF;AAAA,UAEA,oBAAC,SAAI,WAAU,0DACZ,gBACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;AAEhB,SAAS,iBAAiB,EAAE,OAAO,MAAM,GAAqC;AACnF,SACE,qBAAC,SAAI,WAAU,6IACb;AAAA,wBAAC,eAAY,WAAU,eAAc;AAAA,IACpC;AAAA,IACD,oBAAC,UAAK,WAAU,wEACb,iBACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/inbox-toolbar.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+type AssigneeFilter = "me" | "team" | "all";
+interface InboxFilterCategory {
+    id: string;
+    label: string;
+    icon: React.ReactNode;
+    options: string[];
+}
+interface InboxToolbarProps {
+    assignee: AssigneeFilter;
+    onAssigneeChange: (value: AssigneeFilter) => void;
+    filterCategories: InboxFilterCategory[];
+    selectedFilters: Record<string, string>;
+    onFilterChange: (categoryId: string, value: string) => void;
+    onClearFilters: () => void;
+    className?: string;
+}
+declare function InboxToolbar({ assignee, onAssigneeChange, filterCategories, selectedFilters, onFilterChange, onClearFilters, className, }: InboxToolbarProps): React.JSX.Element;
+
+export { type AssigneeFilter, type InboxFilterCategory, InboxToolbar, type InboxToolbarProps };

package/dist/components/inbox-toolbar.js

@@ -0,0 +1,203 @@
+"use client"
+
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  User,
+  Users,
+  List,
+  Filter,
+  ChevronDown,
+  X
+} from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Badge } from "./badge.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+} from "./dropdown-menu.js";
+const FILTER_PILL_COLORS = {
+  status: "bg-muted text-foreground border-border hover:bg-muted/80",
+  category: "bg-blue-50 text-blue-700 border-blue-100 hover:bg-blue-100",
+  account: "bg-indigo-50 text-indigo-700 border-indigo-100 hover:bg-indigo-100",
+  company: "bg-purple-50 text-purple-700 border-purple-100 hover:bg-purple-100"
+};
+function getFilterPillColor(categoryId) {
+  var _a;
+  return (_a = FILTER_PILL_COLORS[categoryId]) != null ? _a : FILTER_PILL_COLORS.status;
+}
+function InboxToolbar({
+  assignee,
+  onAssigneeChange,
+  filterCategories,
+  selectedFilters,
+  onFilterChange,
+  onClearFilters,
+  className
+}) {
+  const hasActiveFilters = Object.values(selectedFilters).some(
+    (v) => v !== "all"
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 overflow-x-auto px-4 py-2 border-b border-border",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "h-7 shrink-0 gap-1.5 border-border bg-background text-xs font-medium shadow-sm",
+              children: [
+                assignee === "me" && /* @__PURE__ */ jsx(User, { className: "h-3.5 w-3.5 text-brand-purple" }),
+                assignee === "team" && /* @__PURE__ */ jsx(Users, { className: "h-3.5 w-3.5 text-blue-600" }),
+                assignee === "all" && /* @__PURE__ */ jsx(List, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  assignee === "me" && "Assigned to me",
+                  assignee === "team" && "My Team",
+                  assignee === "all" && "All Cases"
+                ] }),
+                /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 opacity-50" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-[180px]", children: [
+            /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Assignee" }),
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxs(
+              DropdownMenuRadioGroup,
+              {
+                value: assignee,
+                onValueChange: (v) => onAssigneeChange(v),
+                children: [
+                  /* @__PURE__ */ jsxs(DropdownMenuRadioItem, { value: "me", className: "gap-2 text-xs", children: [
+                    /* @__PURE__ */ jsx(User, { className: "h-3.5 w-3.5 text-brand-purple" }),
+                    "Assigned to me"
+                  ] }),
+                  /* @__PURE__ */ jsxs(DropdownMenuRadioItem, { value: "team", className: "gap-2 text-xs", children: [
+                    /* @__PURE__ */ jsx(Users, { className: "h-3.5 w-3.5 text-blue-600" }),
+                    "My Team"
+                  ] }),
+                  /* @__PURE__ */ jsxs(DropdownMenuRadioItem, { value: "all", className: "gap-2 text-xs", children: [
+                    /* @__PURE__ */ jsx(List, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+                    "All Cases"
+                  ] })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mx-1 h-4 w-px shrink-0 bg-border" }),
+        /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "h-7 shrink-0 gap-1.5 border-dashed border-border bg-transparent text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground",
+              children: [
+                /* @__PURE__ */ jsx(Filter, { className: "h-3.5 w-3.5" }),
+                "Filter"
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-[220px]", children: [
+            /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Add Filter" }),
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            filterCategories.map((category) => {
+              var _a;
+              return /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+                /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { className: "gap-2 text-xs", children: [
+                  category.icon,
+                  category.label
+                ] }),
+                /* @__PURE__ */ jsx(DropdownMenuSubContent, { className: "max-h-[300px] w-[180px] overflow-y-auto", children: /* @__PURE__ */ jsxs(
+                  DropdownMenuRadioGroup,
+                  {
+                    value: (_a = selectedFilters[category.id]) != null ? _a : "all",
+                    onValueChange: (v) => onFilterChange(category.id, v),
+                    children: [
+                      /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: "all", className: "text-xs", children: "All" }),
+                      category.options.map((option) => /* @__PURE__ */ jsx(
+                        DropdownMenuRadioItem,
+                        {
+                          value: option,
+                          className: "text-xs",
+                          children: option
+                        },
+                        option
+                      ))
+                    ]
+                  }
+                ) })
+              ] }, category.id);
+            })
+          ] })
+        ] }),
+        Object.entries(selectedFilters).map(([categoryId, value]) => {
+          if (value === "all") return null;
+          const category = filterCategories.find((c) => c.id === categoryId);
+          if (!category) return null;
+          return /* @__PURE__ */ jsxs(
+            Badge,
+            {
+              variant: "secondary",
+              className: cn(
+                "h-7 shrink-0 gap-1 border pl-2 pr-1 font-normal transition-colors",
+                getFilterPillColor(categoryId)
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-[10px] opacity-60", children: [
+                  category.label,
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "max-w-[120px] truncate text-[10px] font-medium", children: value }),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onFilterChange(categoryId, "all"),
+                    className: "ml-0.5 rounded-sm p-0.5 hover:bg-foreground/10",
+                    children: [
+                      /* @__PURE__ */ jsx(X, { className: "h-2.5 w-2.5" }),
+                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Remove" })
+                    ]
+                  }
+                )
+              ]
+            },
+            categoryId
+          );
+        }),
+        hasActiveFilters && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "ml-auto h-7 shrink-0 px-2 text-xs text-muted-foreground hover:text-foreground",
+            onClick: onClearFilters,
+            children: "Clear All"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  InboxToolbar
+};
+//# sourceMappingURL=inbox-toolbar.js.map

package/dist/components/inbox-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/inbox-toolbar.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  User,\n  Users,\n  List,\n  Filter,\n  ChevronDown,\n  X,\n} from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\nimport { Button } from \"./button\"\nimport { Badge } from \"./badge\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\"\n\nexport type AssigneeFilter = \"me\" | \"team\" | \"all\"\n\nexport interface InboxFilterCategory {\n  id: string\n  label: string\n  icon: React.ReactNode\n  options: string[]\n}\n\nexport interface InboxToolbarProps {\n  assignee: AssigneeFilter\n  onAssigneeChange: (value: AssigneeFilter) => void\n  filterCategories: InboxFilterCategory[]\n  selectedFilters: Record<string, string>\n  onFilterChange: (categoryId: string, value: string) => void\n  onClearFilters: () => void\n  className?: string\n}\n\nconst FILTER_PILL_COLORS: Record<string, string> = {\n  status: \"bg-muted text-foreground border-border hover:bg-muted/80\",\n  category: \"bg-blue-50 text-blue-700 border-blue-100 hover:bg-blue-100\",\n  account: \"bg-indigo-50 text-indigo-700 border-indigo-100 hover:bg-indigo-100\",\n  company: \"bg-purple-50 text-purple-700 border-purple-100 hover:bg-purple-100\",\n}\n\nfunction getFilterPillColor(categoryId: string) {\n  return FILTER_PILL_COLORS[categoryId] ?? FILTER_PILL_COLORS.status\n}\n\nexport function InboxToolbar({\n  assignee,\n  onAssigneeChange,\n  filterCategories,\n  selectedFilters,\n  onFilterChange,\n  onClearFilters,\n  className,\n}: InboxToolbarProps) {\n  const hasActiveFilters = Object.values(selectedFilters).some(\n    (v) => v !== \"all\"\n  )\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-2 overflow-x-auto px-4 py-2 border-b border-border\",\n        className\n      )}\n    >\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"h-7 shrink-0 gap-1.5 border-border bg-background text-xs font-medium shadow-sm\"\n          >\n            {assignee === \"me\" && (\n              <User className=\"h-3.5 w-3.5 text-brand-purple\" />\n            )}\n            {assignee === \"team\" && (\n              <Users className=\"h-3.5 w-3.5 text-blue-600\" />\n            )}\n            {assignee === \"all\" && (\n              <List className=\"h-3.5 w-3.5 text-muted-foreground\" />\n            )}\n            <span>\n              {assignee === \"me\" && \"Assigned to me\"}\n              {assignee === \"team\" && \"My Team\"}\n              {assignee === \"all\" && \"All Cases\"}\n            </span>\n            <ChevronDown className=\"h-3 w-3 opacity-50\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\" className=\"w-[180px]\">\n          <DropdownMenuLabel>Assignee</DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuRadioGroup\n            value={assignee}\n            onValueChange={(v) => onAssigneeChange(v as AssigneeFilter)}\n          >\n            <DropdownMenuRadioItem value=\"me\" className=\"gap-2 text-xs\">\n              <User className=\"h-3.5 w-3.5 text-brand-purple\" />\n              Assigned to me\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"team\" className=\"gap-2 text-xs\">\n              <Users className=\"h-3.5 w-3.5 text-blue-600\" />\n              My Team\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"all\" className=\"gap-2 text-xs\">\n              <List className=\"h-3.5 w-3.5 text-muted-foreground\" />\n              All Cases\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n\n      <div className=\"mx-1 h-4 w-px shrink-0 bg-border\" />\n\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"h-7 shrink-0 gap-1.5 border-dashed border-border bg-transparent text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground\"\n          >\n            <Filter className=\"h-3.5 w-3.5\" />\n            Filter\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\" className=\"w-[220px]\">\n          <DropdownMenuLabel>Add Filter</DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          {filterCategories.map((category) => (\n            <DropdownMenuSub key={category.id}>\n              <DropdownMenuSubTrigger className=\"gap-2 text-xs\">\n                {category.icon}\n                {category.label}\n              </DropdownMenuSubTrigger>\n              <DropdownMenuSubContent className=\"max-h-[300px] w-[180px] overflow-y-auto\">\n                <DropdownMenuRadioGroup\n                  value={selectedFilters[category.id] ?? \"all\"}\n                  onValueChange={(v) => onFilterChange(category.id, v)}\n                >\n                  <DropdownMenuRadioItem value=\"all\" className=\"text-xs\">\n                    All\n                  </DropdownMenuRadioItem>\n                  {category.options.map((option) => (\n                    <DropdownMenuRadioItem\n                      key={option}\n                      value={option}\n                      className=\"text-xs\"\n                    >\n                      {option}\n                    </DropdownMenuRadioItem>\n                  ))}\n                </DropdownMenuRadioGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n          ))}\n        </DropdownMenuContent>\n      </DropdownMenu>\n\n      {Object.entries(selectedFilters).map(([categoryId, value]) => {\n        if (value === \"all\") return null\n        const category = filterCategories.find((c) => c.id === categoryId)\n        if (!category) return null\n\n        return (\n          <Badge\n            key={categoryId}\n            variant=\"secondary\"\n            className={cn(\n              \"h-7 shrink-0 gap-1 border pl-2 pr-1 font-normal transition-colors\",\n              getFilterPillColor(categoryId)\n            )}\n          >\n            <span className=\"text-[10px] opacity-60\">{category.label}:</span>\n            <span className=\"max-w-[120px] truncate text-[10px] font-medium\">\n              {value}\n            </span>\n            <button\n              type=\"button\"\n              onClick={() => onFilterChange(categoryId, \"all\")}\n              className=\"ml-0.5 rounded-sm p-0.5 hover:bg-foreground/10\"\n            >\n              <X className=\"h-2.5 w-2.5\" />\n              <span className=\"sr-only\">Remove</span>\n            </button>\n          </Badge>\n        )\n      })}\n\n      {hasActiveFilters && (\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          className=\"ml-auto h-7 shrink-0 px-2 text-xs text-muted-foreground hover:text-foreground\"\n          onClick={onClearFilters}\n        >\n          Clear All\n        </Button>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/components/input.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+
+export { Input };

package/dist/components/input.js

@@ -0,0 +1,50 @@
+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 { cn } from "../lib/utils.js";
+function Input(_a) {
+  var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
+  return /* @__PURE__ */ jsx(
+    "input",
+    __spreadValues({
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )
+    }, props)
+  );
+}
+export {
+  Input
+};
+//# sourceMappingURL=input.js.map

package/dist/components/input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/input.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n        \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMI;AAJJ,SAAS,UAAU;AAEnB,SAAS,MAAM,IAA8D;AAA9D,eAAE,aAAW,KAJ5B,IAIe,IAAsB,kBAAtB,IAAsB,CAApB,aAAW;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,OACI;AAAA,EACN;AAEJ;","names":[]}