@handled-ai/design-system 0.18.3 → 0.18.5

package/src/components/days-open-cell.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+import { StatusPill, type PillStatus } from "./pill"
+
+export interface DaysOpenCellProps extends React.HTMLAttributes<HTMLDivElement> {
+  days: number | null | undefined
+  warningAt?: number
+  criticalAt?: number
+  emptyLabel?: string
+  suffix?: string
+}
+
+function getDaysOpenIntent(days: number, warningAt: number, criticalAt: number): PillStatus {
+  if (days >= criticalAt) return "error"
+  if (days >= warningAt) return "warning"
+  return "success"
+}
+
+export function DaysOpenCell({
+  days,
+  warningAt = 7,
+  criticalAt = 30,
+  emptyLabel = "—",
+  suffix = "d open",
+  className,
+  ...props
+}: DaysOpenCellProps) {
+  if (days === null || days === undefined) {
+    return (
+      <div data-slot="days-open-cell" className={cn("text-sm text-muted-foreground", className)} {...props}>
+        {emptyLabel}
+      </div>
+    )
+  }
+
+  const intent = getDaysOpenIntent(days, warningAt, criticalAt)
+
+  return (
+    <div data-slot="days-open-cell" className={cn("inline-flex items-center", className)} {...props}>
+      <StatusPill data-testid="days-open-pill" status={`${days} ${suffix}`} intent={intent}>
+        {days} {suffix}
+      </StatusPill>
+    </div>
+  )
+}
+
+export { getDaysOpenIntent }

package/src/components/detail-drawer.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "./sheet"
+
+export interface DetailDrawerProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: React.ReactNode
+  description?: React.ReactNode
+  children: React.ReactNode
+  footer?: React.ReactNode
+  side?: "right" | "left"
+  className?: string
+  contentClassName?: string
+}
+
+export function DetailDrawer({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  side = "right",
+  className,
+  contentClassName,
+}: DetailDrawerProps) {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        data-slot="detail-drawer"
+        side={side}
+        className={cn("flex w-full flex-col gap-0 p-0 sm:max-w-xl", className)}
+      >
+        <SheetHeader data-slot="detail-drawer-header" className="border-b border-border p-5">
+          <SheetTitle>{title}</SheetTitle>
+          {description ? <SheetDescription>{description}</SheetDescription> : null}
+        </SheetHeader>
+        <div data-slot="detail-drawer-content" className={cn("flex-1 overflow-y-auto p-5", contentClassName)}>
+          {children}
+        </div>
+        {footer ? (
+          <SheetFooter data-slot="detail-drawer-footer" className="border-t border-border p-5">
+            {footer}
+          </SheetFooter>
+        ) : null}
+      </SheetContent>
+    </Sheet>
+  )
+}

package/src/components/insights-filter-bar.tsx

@@ -23,6 +23,7 @@ export interface FilterDefinition {
 
 export interface InsightsFilterBarProps {
   filters: FilterDefinition[]
+  variant?: "default" | "compact"
   values: Record<string, string>
   onChange: (filterId: string, value: string) => void
   onClearAll?: () => void
@@ -45,6 +46,7 @@ function InsightsFilterBar({
   onChange,
   onClearAll,
   className,
+  variant = "default",
 }: InsightsFilterBarProps) {
   const showClearAll = onClearAll && hasNonDefaultValue(filters, values)
 
@@ -52,11 +54,12 @@ function InsightsFilterBar({
     <div
       data-slot="insights-filter-bar"
       className={cn(
-        "flex flex-wrap items-center gap-3 rounded-md border border-border bg-card p-4 shadow-sm",
+        "flex flex-wrap items-center rounded-md border border-border bg-card shadow-sm",
+        variant === "compact" ? "gap-2 p-2" : "gap-3 p-4",
         className
       )}
     >
-      <div className="flex items-center gap-2">
+      <div className={cn("flex items-center gap-2", variant === "compact" && "sr-only")}>
         <FilterIcon className="h-4 w-4 text-muted-foreground" />
         <span className="text-sm font-medium text-muted-foreground">
           Filters:
@@ -80,7 +83,10 @@ function InsightsFilterBar({
               <Button
                 variant="outline"
                 size="sm"
-                className="h-8 gap-1.5 text-xs font-normal shadow-none"
+                className={cn(
+                  "gap-1.5 text-xs font-normal shadow-none",
+                  variant === "compact" ? "h-7 px-2" : "h-8"
+                )}
               >
                 {IconComp ? (
                   <IconComp className="h-3.5 w-3.5 text-muted-foreground" />
@@ -118,7 +124,10 @@ function InsightsFilterBar({
           <Button
             variant="ghost"
             size="sm"
-            className="h-8 text-xs text-destructive hover:text-destructive"
+            className={cn(
+              "text-xs text-destructive hover:text-destructive",
+              variant === "compact" ? "h-7 px-2" : "h-8"
+            )}
             onClick={onClearAll}
           >
             Clear All

package/src/components/linked-entity-cell.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import * as React from "react"
+import { ExternalLink } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+export interface LinkedEntityCellProps extends React.HTMLAttributes<HTMLDivElement> {
+  name: React.ReactNode
+  href?: string
+  subtitle?: React.ReactNode
+  meta?: React.ReactNode
+  icon?: React.ReactNode
+  external?: boolean
+  onNavigate?: () => void
+}
+
+export function LinkedEntityCell({
+  name,
+  href,
+  subtitle,
+  meta,
+  icon,
+  external = false,
+  onNavigate,
+  className,
+  ...props
+}: LinkedEntityCellProps) {
+  const content = (
+    <>
+      <span className="truncate">{name}</span>
+      {external ? <ExternalLink className="h-3 w-3 shrink-0 opacity-60" aria-hidden="true" /> : null}
+    </>
+  )
+
+  return (
+    <div
+      data-slot="linked-entity-cell"
+      className={cn("flex min-w-0 items-center gap-2", className)}
+      {...props}
+    >
+      {icon ? (
+        <span data-slot="linked-entity-cell-icon" className="shrink-0 text-muted-foreground">
+          {icon}
+        </span>
+      ) : null}
+      <div className="min-w-0 flex-1">
+        {href ? (
+          <a
+            data-slot="linked-entity-cell-link"
+            href={href}
+            target={external ? "_blank" : undefined}
+            rel={external ? "noreferrer" : undefined}
+            onClick={onNavigate}
+            className="inline-flex max-w-full items-center gap-1 truncate font-medium text-foreground underline-offset-4 hover:text-primary hover:underline"
+          >
+            {content}
+          </a>
+        ) : (
+          <span data-slot="linked-entity-cell-name" className="block truncate font-medium text-foreground">
+            {name}
+          </span>
+        )}
+        {subtitle || meta ? (
+          <div data-slot="linked-entity-cell-meta" className="mt-0.5 truncate text-xs text-muted-foreground">
+            {subtitle}
+            {subtitle && meta ? <span className="px-1">·</span> : null}
+            {meta}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}

package/src/components/metric-card.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import { ArrowUp, ArrowDown, Info, ExternalLink } from "lucide-react"
+import type { LucideIcon } from "lucide-react"
 import { cn } from "../lib/utils"
 
 export interface MetricDataPoint {
@@ -24,6 +25,103 @@ export interface MetricCardProps {
   showInfo?: boolean
 }
 
+export interface KpiStripItem {
+  id?: string
+  label: React.ReactNode
+  value: React.ReactNode
+  unit?: React.ReactNode
+  subtitle?: React.ReactNode
+  change?: MetricCardProps["change"]
+}
+
+export interface KpiStripProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: KpiStripItem[]
+  columns?: 2 | 3 | 4
+}
+
+function getChangePresentation(change: MetricCardProps["change"]): {
+  icon: LucideIcon | null
+  className: string
+} | null {
+  if (!change) return null
+  if (change.direction === "neutral") {
+    return { icon: null, className: "text-muted-foreground" }
+  }
+
+  const isGoodDirection = change.isGood !== undefined
+    ? change.isGood
+    : change.direction === "up"
+
+  return {
+    icon: change.direction === "down" ? ArrowDown : ArrowUp,
+    className: isGoodDirection ? "text-emerald-600" : "text-red-600",
+  }
+}
+
+export function KpiStrip({ items, columns = 4, className, ...props }: KpiStripProps) {
+  return (
+    <div
+      data-slot="kpi-strip"
+      className={cn(
+        "grid gap-3 rounded-xl border border-border bg-card p-3 shadow-sm",
+        columns === 2 && "sm:grid-cols-2",
+        columns === 3 && "sm:grid-cols-3",
+        columns === 4 && "sm:grid-cols-2 lg:grid-cols-4",
+        className
+      )}
+      {...props}
+    >
+      {items.map((item, index) => {
+        const changePresentation = getChangePresentation(item.change)
+        const ChangeIcon = changePresentation?.icon
+
+        return (
+          <div
+            key={item.id ?? index}
+            data-slot="kpi-strip-item"
+            className="min-w-0 rounded-lg bg-muted/40 px-3 py-2"
+          >
+            <div data-slot="kpi-strip-label" className="truncate text-xs font-medium text-muted-foreground">
+              {item.label}
+            </div>
+            <div className="mt-1 flex items-baseline gap-1">
+              <span data-slot="kpi-strip-value" className="truncate text-2xl font-bold tracking-tight text-foreground">
+                {item.value}
+              </span>
+              {item.unit ? (
+                <span data-slot="kpi-strip-unit" className="text-sm font-semibold text-muted-foreground">
+                  {item.unit}
+                </span>
+              ) : null}
+            </div>
+            {item.subtitle || item.change ? (
+              <div className="mt-1 flex items-center gap-2 text-xs">
+                {item.change ? (
+                  <span
+                    data-slot="kpi-strip-change"
+                    className={cn(
+                      "inline-flex items-center gap-0.5 font-semibold",
+                      changePresentation?.className
+                    )}
+                  >
+                    {ChangeIcon ? <ChangeIcon className="h-3 w-3 stroke-[3]" /> : null}
+                    {item.change.value}
+                  </span>
+                ) : null}
+                {item.subtitle ? (
+                  <span data-slot="kpi-strip-subtitle" className="truncate text-muted-foreground">
+                    {item.subtitle}
+                  </span>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
 export function MetricCard({
   title,
   value,

package/src/components/pill.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+/**
+ * Insights-friendly pill convenience wrappers.
+ *
+ * Pill and StatusPill are small, rounded wrappers for dense Insights surfaces
+ * such as tables, KPI strips, and filter summaries. They intentionally wrap the
+ * existing Badge/StatusBadge visual language and are not a replacement for all
+ * Badge usage across the design system.
+ */
+export type PillStatus = "success" | "warning" | "error" | "neutral" | "info"
+
+const pillVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive text-white dark:bg-destructive/60",
+        outline: "border-border bg-background text-foreground",
+        ghost: "border-transparent bg-transparent text-muted-foreground",
+        success: "border-transparent bg-green-100 text-green-950 dark:bg-green-950 dark:text-green-100",
+        warning: "border-transparent bg-yellow-100 text-yellow-950 dark:bg-yellow-950 dark:text-yellow-100",
+        error: "border-transparent bg-red-100 text-red-950 dark:bg-red-950 dark:text-red-100",
+        neutral: "border-transparent bg-muted text-foreground",
+        info: "border-transparent bg-blue-100 text-blue-950 dark:bg-blue-950 dark:text-blue-100",
+      },
+    },
+    defaultVariants: {
+      variant: "neutral",
+    },
+  }
+)
+
+export interface PillProps
+  extends React.ComponentProps<"span">,
+    VariantProps<typeof pillVariants> {}
+
+export function Pill({ className, variant = "neutral", ...props }: PillProps) {
+  return (
+    <span
+      data-slot="pill"
+      data-variant={variant}
+      className={cn(pillVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export interface StatusPillProps extends Omit<PillProps, "variant"> {
+  status: React.ReactNode
+  intent?: PillStatus
+}
+
+export function StatusPill({ status, intent = "neutral", children, ...props }: StatusPillProps) {
+  return (
+    <Pill data-slot="status-pill" variant={intent} {...props}>
+      {children ?? status}
+    </Pill>
+  )
+}
+
+export { pillVariants }

package/src/components/quick-segment.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+export interface QuickSegmentProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect" | "value"> {
+  label: React.ReactNode
+  value: string
+  selected?: boolean
+  count?: number | string
+  description?: React.ReactNode
+  onSelect?: (value: string) => void
+}
+
+export function QuickSegment({
+  label,
+  value,
+  selected = false,
+  count,
+  description,
+  onSelect,
+  className,
+  type = "button",
+  ...props
+}: QuickSegmentProps) {
+  return (
+    <button
+      data-slot="quick-segment"
+      data-selected={selected ? "true" : "false"}
+      type={type}
+      aria-pressed={selected}
+      className={cn(
+        "inline-flex min-h-8 items-center gap-2 rounded-full border px-3 py-1.5 text-sm font-medium transition-colors",
+        selected
+          ? "border-primary bg-primary text-primary-foreground shadow-sm"
+          : "border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
+        className
+      )}
+      onClick={(event) => {
+        props.onClick?.(event)
+        if (!event.defaultPrevented) onSelect?.(value)
+      }}
+      {...props}
+    >
+      <span data-slot="quick-segment-label">{label}</span>
+      {count !== undefined ? (
+        <span
+          data-slot="quick-segment-count"
+          className={cn(
+            "rounded-full px-1.5 py-0.5 text-[11px] leading-none",
+            selected
+              ? "bg-primary-foreground/20 text-primary-foreground"
+              : "bg-muted text-muted-foreground"
+          )}
+        >
+          {count}
+        </span>
+      ) : null}
+      {description ? (
+        <span data-slot="quick-segment-description" className="sr-only">
+          {description}
+        </span>
+      ) : null}
+    </button>
+  )
+}

package/src/components/timeline-activity.tsx

@@ -4,24 +4,6 @@ import * as React from "react"
 import { cn } from "../lib/utils"
 import { ChevronDown, ChevronUp, ExternalLink } from "lucide-react"
 
-export type TimelineEventTone =
-  | "red"
-  | "amber"
-  | "emerald"
-  | "violet"
-  | "blue"
-  | "slate"
-  | "salesforce"
-  | "gmail"
-
-export interface TimelineEventActor {
-  kind: "user" | "integration" | "system"
-  name?: string
-  initials?: string
-  avatarUrl?: string
-  verb?: string
-}
-
 export interface TimelineEvent {
   id: string
   icon: React.ReactNode
@@ -46,57 +28,8 @@ export interface TimelineEvent {
   defaultExpanded?: boolean
   isInteractive?: boolean
   onSourceClick?: () => void
-  tone?: TimelineEventTone
-  actor?: TimelineEventActor
-  isSystemNoise?: boolean
-}
-
-// ---------------------------------------------------------------------------
-// Tone class map — every class is a complete static string literal so
-// Tailwind's JIT scanner can detect them. NO interpolation.
-// ---------------------------------------------------------------------------
-
-export const TONE_CLASSES: Record<
-  TimelineEventTone,
-  { dot: string; icon: string }
-> = {
-  red: {
-    dot: "bg-red-50 border-red-200 dark:bg-red-950/30 dark:border-red-900/40",
-    icon: "text-red-600 dark:text-red-300",
-  },
-  amber: {
-    dot: "bg-amber-50 border-amber-200 dark:bg-amber-950/30 dark:border-amber-900/40",
-    icon: "text-amber-600 dark:text-amber-300",
-  },
-  emerald: {
-    dot: "bg-emerald-50 border-emerald-200 dark:bg-emerald-950/30 dark:border-emerald-900/40",
-    icon: "text-emerald-600 dark:text-emerald-300",
-  },
-  violet: {
-    dot: "bg-violet-50 border-violet-200 dark:bg-violet-950/30 dark:border-violet-900/40",
-    icon: "text-violet-600 dark:text-violet-300",
-  },
-  blue: {
-    dot: "bg-blue-50 border-blue-200 dark:bg-blue-950/30 dark:border-blue-900/40",
-    icon: "text-blue-600 dark:text-blue-300",
-  },
-  slate: {
-    dot: "bg-slate-100 border-slate-200 dark:bg-slate-800/50 dark:border-slate-700",
-    icon: "text-slate-500 dark:text-slate-300",
-  },
-  salesforce: {
-    dot: "bg-white border-[#00A1E0]/25 dark:bg-background dark:border-[#00A1E0]/25",
-    icon: "text-[#00A1E0]",
-  },
-  gmail: {
-    dot: "bg-white border-red-200 dark:bg-background dark:border-red-900/40",
-    icon: "text-red-500 dark:text-red-300",
-  },
 }
 
-const NEUTRAL_DOT_CLASSES = "border-border/60 bg-background"
-const NEUTRAL_ICON_CLASSES = "text-muted-foreground"
-
 export interface TimelineActivityProps {
   events: TimelineEvent[]
   className?: string
@@ -116,54 +49,12 @@ export function TimelineActivity({ events, className }: TimelineActivityProps) {
   )
 }
 
-function ActorByline({ actor, time }: { actor: TimelineEventActor; time: string }) {
-  if (actor.kind === "system") return null
-
-  if (actor.kind === "integration") {
-    return (
-      <div className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground" data-testid="actor-byline">
-        <span>Integration</span>
-        <span className="text-muted-foreground/40">&middot;</span>
-        <span>{time}</span>
-      </div>
-    )
-  }
-
-  // actor.kind === "user"
-  const verb = actor.verb ?? "performed this action"
-  const displayInitials = actor.initials ?? (actor.name ? actor.name.charAt(0).toUpperCase() : "?")
-
-  return (
-    <div className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground" data-testid="actor-byline">
-      {actor.avatarUrl ? (
-        <img
-          src={actor.avatarUrl}
-          alt={actor.name ?? "User"}
-          className="h-4 w-4 rounded-full object-cover"
-        />
-      ) : (
-        <span className="flex h-4 w-4 items-center justify-center rounded-full bg-muted-foreground/10 text-[8px] font-semibold text-muted-foreground">
-          {displayInitials}
-        </span>
-      )}
-      <span className="text-foreground font-medium">{actor.name}</span>
-      <span>{verb}</span>
-      <span className="text-muted-foreground/40">&middot;</span>
-      <span>{time}</span>
-    </div>
-  )
-}
-
 function TimelineItem({ event, isLast }: { event: TimelineEvent; isLast: boolean }) {
   const [expanded, setExpanded] = React.useState(event.defaultExpanded ?? false)
   const [showAllRecipients, setShowAllRecipients] = React.useState(false)
   const hasContent = !!event.content
   const hasEmail = !!event.email
 
-  const toneStyle = event.tone ? TONE_CLASSES[event.tone] : null
-  const dotClasses = toneStyle ? toneStyle.dot : NEUTRAL_DOT_CLASSES
-  const iconClasses = toneStyle ? toneStyle.icon : NEUTRAL_ICON_CLASSES
-
   return (
     <div className="group relative flex gap-3.5">
       {!isLast && (
@@ -171,7 +62,7 @@ function TimelineItem({ event, isLast }: { event: TimelineEvent; isLast: boolean
       )}
 
       <div className="relative z-10 mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-background">
-        <div className={cn("flex h-4.5 w-4.5 items-center justify-center rounded-full border ring-4 ring-background", dotClasses, iconClasses)} data-testid="timeline-dot">
+        <div className="flex h-4.5 w-4.5 items-center justify-center rounded-full border border-border/60 bg-background text-muted-foreground ring-4 ring-background">
           {event.icon}
         </div>
       </div>
@@ -186,8 +77,6 @@ function TimelineItem({ event, isLast }: { event: TimelineEvent; isLast: boolean
           </span>
         </div>
 
-        {event.actor && <ActorByline actor={event.actor} time={event.time} />}
-
         {(hasContent || hasEmail) && (
           <div className="mt-2">
             {event.isInteractive ? (

package/src/index.ts

@@ -33,6 +33,7 @@ export * from "./components/data-table-filter"
 export * from "./components/data-table-quick-views"
 export * from "./components/data-table-toolbar"
 export * from "./components/detail-view"
+export * from "./components/detail-drawer"
 export * from "./components/dialog"
 export * from "./components/dropdown-menu"
 export * from "./components/empty-state"
@@ -47,6 +48,8 @@ export * from "./components/inbox-toolbar"
 export * from "./components/inline-banner"
 export * from "./components/input"
 export * from "./components/insights-filter-bar"
+export * from "./components/days-open-cell"
+export * from "./components/linked-entity-cell"
 export * from "./components/item-list"
 export * from "./components/item-list-display"
 export * from "./components/item-list-filter"
@@ -56,9 +59,11 @@ export * from "./components/label"
 export * from "./components/message"
 export * from "./components/metric-card"
 export * from "./components/performance-metrics-table"
+export * from "./components/pill"
 export * from "./components/preview-list"
 export * from "./components/progress"
 export * from "./components/quick-action-chat-area"
+export * from "./components/quick-segment"
 export {
   QuickActionModal,
   type QuickActionPriority,

package/src/prototype/__tests__/detail-view-attention.test.tsx

@@ -89,8 +89,8 @@ describe("DetailView attentionCount", () => {
     expect(pill).not.toBeNull();
     expect(pill!.textContent).toContain("5");
 
-    // Click the timeline collapse button to expand
-    const timelineButton = container.querySelector('[data-testid="timeline-collapse-btn"]') as HTMLElement;
+    // Click the timeline header button to expand
+    const timelineButton = container.querySelector("button.group\\/timeline") as HTMLElement;
     expect(timelineButton).not.toBeNull();
     fireEvent.click(timelineButton);