{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "problem-list",
  "title": "Problem list",
  "description": "The patient's conditions, active and past, with coded terms such as SNOMED CT and onset and resolution dates.",
  "dependencies": [
    "cn@^0.5.0"
  ],
  "registryDependencies": [
    "table"
  ],
  "files": [
    {
      "path": "registry/base-nova/problem-list/problem-list.tsx",
      "content": "import * as React from \"react\"\nimport { cn } from \"cn\"\n\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\"\n\nexport type ProblemCode = {\n  /** The code system, such as \"SNOMED CT\" or \"ICD-10\". */\n  system: string\n  value: string\n}\n\nexport type Problem = {\n  id: string\n  /** The condition or problem, such as \"Type 2 diabetes\". */\n  name: string\n  code?: ProblemCode\n  /** Active problems list first; resolved and inactive ones under Past. */\n  status?: \"active\" | \"inactive\" | \"resolved\"\n  /** A major problem is bold and leads its group. */\n  significance?: \"major\" | \"minor\"\n  /** An ISO 8601 date, or text such as \"2015\" or \"Childhood\". */\n  onset?: string\n  /** An ISO 8601 date, or text. */\n  resolved?: string\n}\n\nexport type ProblemListProps = React.ComponentProps<\"div\"> & {\n  /** The problems, active and past, in any order. */\n  problems: readonly Problem[]\n  /** Names the table for assistive technology and shows below it. */\n  caption?: React.ReactNode\n  /** Shows each problem's code beneath its name. Defaults to true. */\n  showCodes?: boolean\n  /** Formats full ISO dates. Defaults to a UTC date such as \"Oct 1, 2026\". */\n  formatDate?: (date: string) => string\n}\n\nconst dateFormat = new Intl.DateTimeFormat(\"en-US\", {\n  dateStyle: \"medium\",\n  timeZone: \"UTC\",\n})\n\n// A fixed locale and time zone render the same on the server and the client.\nfunction defaultFormatDate(date: string) {\n  const time = Date.parse(date)\n  return Number.isNaN(time) ? date : dateFormat.format(time)\n}\n\n/** Active problems, then past ones, the major ones first in each. */\nexport function groupProblems(problems: readonly Problem[]) {\n  const byWeight = (a: Problem, b: Problem) =>\n    Number(b.significance === \"major\") - Number(a.significance === \"major\")\n  const active = problems.filter(({ status = \"active\" }) => status === \"active\")\n  const past = problems.filter(({ status = \"active\" }) => status !== \"active\")\n  return { active: active.sort(byWeight), past: past.sort(byWeight) }\n}\n\nfunction Dates({\n  problem,\n  formatDate,\n}: {\n  problem: Problem\n  formatDate: (date: string) => string\n}) {\n  // Only a full date is reformatted; \"2015\" or \"Childhood\" reads as written.\n  const format = (value: string) =>\n    /^\\d{4}-\\d{2}-\\d{2}/.test(value) ? formatDate(value) : value\n  const { onset, resolved, status = \"active\" } = problem\n  if (status === \"active\") return onset ? <>Since {format(onset)}</> : null\n  if (onset && resolved)\n    return (\n      <>\n        {format(onset)} – {format(resolved)}\n      </>\n    )\n  if (resolved) return <>Until {format(resolved)}</>\n  return onset ? <>From {format(onset)}</> : null\n}\n\nexport function ProblemList({\n  problems,\n  caption,\n  showCodes = true,\n  formatDate = defaultFormatDate,\n  className,\n  ...props\n}: ProblemListProps) {\n  const { active, past } = groupProblems(problems)\n  const groups = [\n    { id: \"active\", title: \"Active\", rows: active },\n    { id: \"past\", title: \"Past\", rows: past },\n  ].filter(({ rows }) => rows.length)\n  return (\n    <div\n      data-slot=\"problem-list\"\n      className={cn(\"@container w-full min-w-0\", className)}\n      {...props}\n    >\n      <Table>\n        {caption && <TableCaption>{caption}</TableCaption>}\n        <TableHeader>\n          <TableRow>\n            <TableHead scope=\"col\">Problem</TableHead>\n            <TableHead scope=\"col\" className=\"text-right\">\n              Dates\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        {groups.length === 0 && (\n          <TableBody>\n            <TableRow>\n              <TableCell\n                colSpan={2}\n                className=\"h-16 text-center text-muted-foreground\"\n              >\n                No problems recorded.\n              </TableCell>\n            </TableRow>\n          </TableBody>\n        )}\n        {groups.map((group) => (\n          <TableBody key={group.id} data-group={group.id}>\n            <TableRow className=\"hover:bg-transparent\">\n              <TableHead\n                scope=\"rowgroup\"\n                colSpan={2}\n                className=\"h-8 text-xs font-medium text-muted-foreground\"\n              >\n                {group.title}{\" \"}\n                <span className=\"tabular-nums\">· {group.rows.length}</span>\n              </TableHead>\n            </TableRow>\n            {group.rows.map((problem) => (\n              <TableRow\n                key={problem.id}\n                data-status={problem.status ?? \"active\"}\n                data-significance={problem.significance}\n                className={cn(group.id === \"past\" && \"text-muted-foreground\")}\n              >\n                <TableHead\n                  scope=\"row\"\n                  className=\"h-auto py-2 font-normal whitespace-normal\"\n                >\n                  <span\n                    className={cn(\n                      problem.significance === \"major\" && \"font-semibold\",\n                      group.id === \"active\" && \"text-foreground\"\n                    )}\n                  >\n                    {problem.name}\n                  </span>\n                  {showCodes && problem.code && (\n                    <span className=\"block text-xs text-muted-foreground tabular-nums\">\n                      {problem.code.system} {problem.code.value}\n                    </span>\n                  )}\n                </TableHead>\n                <TableCell className=\"text-right whitespace-normal text-muted-foreground tabular-nums\">\n                  <Dates problem={problem} formatDate={formatDate} />\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        ))}\n      </Table>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Problem list docs: https://organui.com/docs/components/problem-list",
  "categories": [
    "clinical"
  ],
  "type": "registry:ui"
}