@handled-ai/design-system 0.18.4 → 0.18.6

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/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,