@handled-ai/design-system 0.18.1 → 0.18.3

package/dist/components/pill.js

@@ -1,77 +0,0 @@
-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 } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
-import { cn } from "../lib/utils.js";
-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"
-    }
-  }
-);
-function Pill(_a) {
-  var _b = _a, { className, variant = "neutral" } = _b, props = __objRest(_b, ["className", "variant"]);
-  return /* @__PURE__ */ jsx(
-    "span",
-    __spreadValues({
-      "data-slot": "pill",
-      "data-variant": variant,
-      className: cn(pillVariants({ variant }), className)
-    }, props)
-  );
-}
-function StatusPill(_c) {
-  var _d = _c, { status, intent = "neutral", children } = _d, props = __objRest(_d, ["status", "intent", "children"]);
-  return /* @__PURE__ */ jsx(Pill, __spreadProps(__spreadValues({ "data-slot": "status-pill", variant: intent }, props), { children: children != null ? children : status }));
-}
-export {
-  Pill,
-  StatusPill,
-  pillVariants
-};
-//# sourceMappingURL=pill.js.map

package/dist/components/pill.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/pill.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../lib/utils\"\n\n/**\n * Insights-friendly pill convenience wrappers.\n *\n * Pill and StatusPill are small, rounded wrappers for dense Insights surfaces\n * such as tables, KPI strips, and filter summaries. They intentionally wrap the\n * existing Badge/StatusBadge visual language and are not a replacement for all\n * Badge usage across the design system.\n */\nexport type PillStatus = \"success\" | \"warning\" | \"error\" | \"neutral\" | \"info\"\n\nconst pillVariants = cva(\n  \"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\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent bg-primary text-primary-foreground\",\n        secondary: \"border-transparent bg-secondary text-secondary-foreground\",\n        destructive: \"border-transparent bg-destructive text-white dark:bg-destructive/60\",\n        outline: \"border-border bg-background text-foreground\",\n        ghost: \"border-transparent bg-transparent text-muted-foreground\",\n        success: \"border-transparent bg-green-100 text-green-950 dark:bg-green-950 dark:text-green-100\",\n        warning: \"border-transparent bg-yellow-100 text-yellow-950 dark:bg-yellow-950 dark:text-yellow-100\",\n        error: \"border-transparent bg-red-100 text-red-950 dark:bg-red-950 dark:text-red-100\",\n        neutral: \"border-transparent bg-muted text-foreground\",\n        info: \"border-transparent bg-blue-100 text-blue-950 dark:bg-blue-950 dark:text-blue-100\",\n      },\n    },\n    defaultVariants: {\n      variant: \"neutral\",\n    },\n  }\n)\n\nexport interface PillProps\n  extends React.ComponentProps<\"span\">,\n    VariantProps<typeof pillVariants> {}\n\nexport function Pill({ className, variant = \"neutral\", ...props }: PillProps) {\n  return (\n    <span\n      data-slot=\"pill\"\n      data-variant={variant}\n      className={cn(pillVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport interface StatusPillProps extends Omit<PillProps, \"variant\"> {\n  status: React.ReactNode\n  intent?: PillStatus\n}\n\nexport function StatusPill({ status, intent = \"neutral\", children, ...props }: StatusPillProps) {\n  return (\n    <Pill data-slot=\"status-pill\" variant={intent} {...props}>\n      {children ?? status}\n    </Pill>\n  )\n}\n\nexport { pillVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CI;AA3CJ,SAAS,WAA8B;AAEvC,SAAS,UAAU;AAYnB,MAAM,eAAe;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAMO,SAAS,KAAK,IAAyD;AAAzD,eAAE,aAAW,UAAU,UA1C5C,IA0CqB,IAAqC,kBAArC,IAAqC,CAAnC,aAAW;AAChC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW,GAAG,aAAa,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,OAC9C;AAAA,EACN;AAEJ;AAOO,SAAS,WAAW,IAAqE;AAArE,eAAE,UAAQ,SAAS,WAAW,SA1DzD,IA0D2B,IAA2C,kBAA3C,IAA2C,CAAzC,UAAQ,UAAoB;AACvD,SACE,oBAAC,qCAAK,aAAU,eAAc,SAAS,UAAY,QAAlD,EACE,wCAAY,SACf;AAEJ;","names":[]}

package/dist/components/quick-segment.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-
-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;
-}
-declare function QuickSegment({ label, value, selected, count, description, onSelect, className, type, ...props }: QuickSegmentProps): React.JSX.Element;
-
-export { QuickSegment, type QuickSegmentProps };

package/dist/components/quick-segment.js

@@ -1,96 +0,0 @@
-"use client"
-
-"use client";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../lib/utils.js";
-function QuickSegment(_a) {
-  var _b = _a, {
-    label,
-    value,
-    selected = false,
-    count,
-    description,
-    onSelect,
-    className,
-    type = "button"
-  } = _b, props = __objRest(_b, [
-    "label",
-    "value",
-    "selected",
-    "count",
-    "description",
-    "onSelect",
-    "className",
-    "type"
-  ]);
-  return /* @__PURE__ */ jsxs(
-    "button",
-    __spreadProps(__spreadValues({
-      "data-slot": "quick-segment",
-      "data-selected": selected ? "true" : "false",
-      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) => {
-        var _a2;
-        (_a2 = props.onClick) == null ? void 0 : _a2.call(props, event);
-        if (!event.defaultPrevented) onSelect == null ? void 0 : onSelect(value);
-      }
-    }, props), {
-      children: [
-        /* @__PURE__ */ jsx("span", { "data-slot": "quick-segment-label", children: label }),
-        count !== void 0 ? /* @__PURE__ */ jsx(
-          "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"
-            ),
-            children: count
-          }
-        ) : null,
-        description ? /* @__PURE__ */ jsx("span", { "data-slot": "quick-segment-description", className: "sr-only", children: description }) : null
-      ]
-    })
-  );
-}
-export {
-  QuickSegment
-};
-//# sourceMappingURL=quick-segment.js.map

package/dist/components/quick-segment.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/quick-segment.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface QuickSegmentProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"onSelect\" | \"value\"> {\n  label: React.ReactNode\n  value: string\n  selected?: boolean\n  count?: number | string\n  description?: React.ReactNode\n  onSelect?: (value: string) => void\n}\n\nexport function QuickSegment({\n  label,\n  value,\n  selected = false,\n  count,\n  description,\n  onSelect,\n  className,\n  type = \"button\",\n  ...props\n}: QuickSegmentProps) {\n  return (\n    <button\n      data-slot=\"quick-segment\"\n      data-selected={selected ? \"true\" : \"false\"}\n      type={type}\n      aria-pressed={selected}\n      className={cn(\n        \"inline-flex min-h-8 items-center gap-2 rounded-full border px-3 py-1.5 text-sm font-medium transition-colors\",\n        selected\n          ? \"border-primary bg-primary text-primary-foreground shadow-sm\"\n          : \"border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground\",\n        className\n      )}\n      onClick={(event) => {\n        props.onClick?.(event)\n        if (!event.defaultPrevented) onSelect?.(value)\n      }}\n      {...props}\n    >\n      <span data-slot=\"quick-segment-label\">{label}</span>\n      {count !== undefined ? (\n        <span\n          data-slot=\"quick-segment-count\"\n          className={cn(\n            \"rounded-full px-1.5 py-0.5 text-[11px] leading-none\",\n            selected\n              ? \"bg-primary-foreground/20 text-primary-foreground\"\n              : \"bg-muted text-muted-foreground\"\n          )}\n        >\n          {count}\n        </span>\n      ) : null}\n      {description ? (\n        <span data-slot=\"quick-segment-description\" className=\"sr-only\">\n          {description}\n        </span>\n      ) : null}\n    </button>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BI,SAkBE,KAlBF;AAxBJ,SAAS,UAAU;AAYZ,SAAS,aAAa,IAUP;AAVO,eAC3B;AAAA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EAxBT,IAgB6B,IASxB,kBATwB,IASxB;AAAA,IARH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,iBAAe,WAAW,SAAS;AAAA,MACnC;AAAA,MACA,gBAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA,WACI,gEACA;AAAA,QACJ;AAAA,MACF;AAAA,MACA,SAAS,CAAC,UAAU;AAxC1B,YAAAA;AAyCQ,SAAAA,MAAA,MAAM,YAAN,gBAAAA,IAAA,YAAgB;AAChB,YAAI,CAAC,MAAM,iBAAkB,sCAAW;AAAA,MAC1C;AAAA,OACI,QAhBL;AAAA,MAkBC;AAAA,4BAAC,UAAK,aAAU,uBAAuB,iBAAM;AAAA,QAC5C,UAAU,SACT;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAW;AAAA,cACT;AAAA,cACA,WACI,qDACA;AAAA,YACN;AAAA,YAEC;AAAA;AAAA,QACH,IACE;AAAA,QACH,cACC,oBAAC,UAAK,aAAU,6BAA4B,WAAU,WACnD,uBACH,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;","names":["_a"]}

package/src/charts/__tests__/insights-charts.test.tsx

@@ -1,62 +0,0 @@
-import React from "react"
-import { describe, expect, it, vi } from "vitest"
-import { render, screen, fireEvent } from "@testing-library/react"
-
-import { EmptyChartState } from "../empty-chart-state"
-import { PipelineOverview, type PipelineStage, type PipelineStageMetrics } from "../pipeline-overview"
-
-vi.mock("@nivo/sankey", () => ({
-  ResponsiveSankey: ({ data }: { data: { nodes: unknown[]; links: unknown[] } }) => (
-    <div data-testid="mock-sankey">{data.nodes.length}:{data.links.length}</div>
-  ),
-}))
-
-const stages: PipelineStage[] = [
-  { id: "received", label: "Received", count: 100, trend: "+5%", nextConversion: "80%" },
-  { id: "contacted", label: "Contacted", count: 80, trend: "+3%", nextConversion: null },
-]
-
-const metrics: Record<string, PipelineStageMetrics> = {
-  received: { medianTime: "1d", avgTime: "2d", dropOffs: [] },
-  contacted: { medianTime: "2d", avgTime: "3d", dropOffs: [] },
-}
-
-function renderPipeline(variant?: "sankey" | "compact", onFilterChange = vi.fn()) {
-  return render(
-    <PipelineOverview
-      variant={variant}
-      stages={stages}
-      stageMetrics={metrics}
-      stageTimings={[{ median: "1d", avg: "2d" }, null]}
-      filterOptions={["Facility", "Source"]}
-      onFilterChange={onFilterChange}
-    />
-  )
-}
-
-describe("Insights chart primitives", () => {
-  it("EmptyChartState renders defaults and action", () => {
-    const { container } = render(<EmptyChartState action={<button type="button">Reset</button>} />)
-
-    expect(container.querySelector('[data-slot="empty-chart-state"]')).not.toBeNull()
-    expect(screen.getByText("No chart data")).not.toBeNull()
-    expect(screen.getByRole("button", { name: "Reset" })).not.toBeNull()
-  })
-
-  it("PipelineOverview default variant preserves Sankey rendering and callbacks", () => {
-    const onFilterChange = vi.fn()
-    renderPipeline(undefined, onFilterChange)
-
-    expect(screen.getByTestId("mock-sankey")).not.toBeNull()
-    fireEvent.click(screen.getByRole("button", { name: "Source" }))
-    expect(onFilterChange).toHaveBeenCalledWith("Source")
-  })
-
-  it("PipelineOverview compact variant renders compact bars instead of Sankey", () => {
-    const { container } = renderPipeline("compact")
-
-    expect(screen.queryByTestId("mock-sankey")).toBeNull()
-    expect(container.querySelector('[data-slot="pipeline-overview-compact"]')).not.toBeNull()
-    expect(container.querySelectorAll('[data-slot="pipeline-overview-compact-bar"]')).toHaveLength(2)
-  })
-})

package/src/charts/empty-chart-state.tsx

@@ -1,44 +0,0 @@
-import * as React from "react"
-import { BarChart3 } from "lucide-react"
-
-import { cn } from "../lib/utils"
-
-export interface EmptyChartStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
-  title?: React.ReactNode
-  description?: React.ReactNode
-  icon?: React.ReactNode
-  action?: React.ReactNode
-}
-
-export function EmptyChartState({
-  title = "No chart data",
-  description = "Try adjusting filters or selecting a different time range.",
-  icon,
-  action,
-  className,
-  ...props
-}: EmptyChartStateProps) {
-  return (
-    <div
-      data-slot="empty-chart-state"
-      className={cn(
-        "flex min-h-[240px] flex-col items-center justify-center rounded-xl border border-dashed border-border bg-muted/30 p-8 text-center",
-        className
-      )}
-      {...props}
-    >
-      <div data-slot="empty-chart-state-icon" className="mb-3 text-muted-foreground [&>svg]:h-10 [&>svg]:w-10">
-        {icon ?? <BarChart3 aria-hidden="true" />}
-      </div>
-      <div data-slot="empty-chart-state-title" className="text-sm font-semibold text-foreground">
-        {title}
-      </div>
-      {description ? (
-        <div data-slot="empty-chart-state-description" className="mt-1 max-w-sm text-sm text-muted-foreground">
-          {description}
-        </div>
-      ) : null}
-      {action ? <div data-slot="empty-chart-state-action" className="mt-4">{action}</div> : null}
-    </div>
-  )
-}

package/src/components/__tests__/insights-primitives.test.tsx

@@ -1,117 +0,0 @@
-import React from "react"
-import { describe, expect, it, vi } from "vitest"
-import { render, screen, fireEvent } from "@testing-library/react"
-
-import { DaysOpenCell, getDaysOpenIntent } from "../days-open-cell"
-import { DetailDrawer } from "../detail-drawer"
-import { InsightsFilterBar } from "../insights-filter-bar"
-import { LinkedEntityCell } from "../linked-entity-cell"
-import { KpiStrip } from "../metric-card"
-import { Pill, StatusPill } from "../pill"
-import { QuickSegment } from "../quick-segment"
-
-describe("Insights primitives", () => {
-  it("renders compact InsightsFilterBar without changing default API", () => {
-    const { container } = render(
-      <InsightsFilterBar
-        variant="compact"
-        filters={[{ id: "status", label: "Status", options: ["All", "Open"], defaultValue: "All" }]}
-        values={{ status: "Open" }}
-        onChange={() => {}}
-        onClearAll={() => {}}
-      />
-    )
-
-    const bar = container.querySelector('[data-slot="insights-filter-bar"]')!
-    expect(bar.className).toContain("p-2")
-    expect(bar.className).toContain("gap-2")
-    expect(screen.getByRole("button", { name: /Status: Open/i }).className).toContain("h-7")
-  })
-
-  it("renders KpiStrip items and changes", () => {
-    const { container } = render(
-      <KpiStrip
-        items={[
-          { label: "New", value: 42, unit: "leads", change: { value: "8%", direction: "up" } },
-          { label: "Aging", value: 12, subtitle: "over SLA", change: { value: "3%", direction: "down", isGood: true } },
-        ]}
-      />
-    )
-
-    expect(container.querySelectorAll('[data-slot="kpi-strip-item"]')).toHaveLength(2)
-    expect(screen.getByText("New")).not.toBeNull()
-    expect(screen.getByText("42")).not.toBeNull()
-    expect(screen.getByText("8%")).not.toBeNull()
-  })
-
-  it("QuickSegment exposes selected state and invokes onSelect", () => {
-    const onSelect = vi.fn()
-    render(<QuickSegment label="At risk" value="risk" count={5} selected onSelect={onSelect} />)
-
-    const button = screen.getByRole("button", { name: /At risk/i })
-    expect(button.getAttribute("aria-pressed")).toBe("true")
-    expect(screen.getByText("5")).not.toBeNull()
-    fireEvent.click(button)
-    expect(onSelect).toHaveBeenCalledWith("risk")
-  })
-
-  it("LinkedEntityCell renders entity links and metadata", () => {
-    const onNavigate = vi.fn()
-    render(
-      <LinkedEntityCell
-        name="Acme Health"
-        href="/accounts/acme"
-        subtitle="Account"
-        meta="Tier 1"
-        onNavigate={onNavigate}
-      />
-    )
-
-    const link = screen.getByRole("link", { name: "Acme Health" })
-    expect(link.getAttribute("href")).toBe("/accounts/acme")
-    expect(screen.getByText(/Tier 1/)).not.toBeNull()
-    fireEvent.click(link)
-    expect(onNavigate).toHaveBeenCalled()
-  })
-
-  it("DaysOpenCell maps thresholds to status intents", () => {
-    expect(getDaysOpenIntent(2, 7, 30)).toBe("success")
-    expect(getDaysOpenIntent(10, 7, 30)).toBe("warning")
-    expect(getDaysOpenIntent(45, 7, 30)).toBe("error")
-
-    render(<DaysOpenCell days={45} />)
-    expect(screen.getByTestId("days-open-pill").getAttribute("data-variant")).toBe("error")
-  })
-
-  it("Pill and StatusPill render wrapper variants", () => {
-    const { container } = render(
-      <div>
-        <Pill variant="info">Info</Pill>
-        <StatusPill status="Blocked" intent="error" />
-      </div>
-    )
-
-    expect(container.querySelector('[data-slot="pill"]')?.getAttribute("data-variant")).toBe("info")
-    expect(container.querySelector('[data-slot="status-pill"]')?.getAttribute("data-variant")).toBe("error")
-    expect(screen.getByText("Blocked")).not.toBeNull()
-  })
-
-  it("DetailDrawer renders title, content, and footer when open", () => {
-    render(
-      <DetailDrawer
-        open
-        onOpenChange={() => {}}
-        title="Referral details"
-        description="A drawer for insights"
-        footer={<button type="button">Done</button>}
-      >
-        <div>Drawer body</div>
-      </DetailDrawer>
-    )
-
-    expect(screen.getByText("Referral details")).not.toBeNull()
-    expect(screen.getByText("A drawer for insights")).not.toBeNull()
-    expect(screen.getByText("Drawer body")).not.toBeNull()
-    expect(screen.getByRole("button", { name: "Done" })).not.toBeNull()
-  })
-})

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

@@ -1,50 +0,0 @@
-"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

@@ -1,60 +0,0 @@
-"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("w-full 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/linked-entity-cell.tsx

@@ -1,74 +0,0 @@
-"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>
-  )
-}