{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "list-row",
  "title": "List row",
  "description": "ONE row · the canonical row · `last` on the final row · `select={{mode,selected}}` makes it a radio/checkbox row",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/kit/list-row.tsx",
      "content": "'use client';\nimport { cn } from 'cn';\nimport { CheckIcon, ChevronRightIcon } from 'lucide-react';\nimport Link from 'next/link';\nimport type * as React from 'react';\n\ntype Props = {\n  /** Leading visual: usually an IconCircle or Avatar. */\n  leading?: React.ReactNode;\n  /** Turns the row into a choice. The whole row is the control, so pass `onClick` too. */\n  select?: { mode: 'radio' | 'checkbox'; selected: boolean };\n  title: string;\n  subtitle?: string;\n  /** Right-aligned value. */\n  value?: string;\n  valueClassName?: string;\n  /** Small line under the value. */\n  sublabel?: string;\n  sublabelClassName?: string;\n  /** Custom trailing content; replaces value and sublabel. */\n  trailing?: React.ReactNode;\n  /** Show a chevron (navigation rows). */\n  chevron?: boolean;\n  onClick?: () => void;\n  /** Or a link: the row navigates. */\n  href?: string;\n  disabled?: boolean;\n  /** Suppress the bottom divider (last row in a card). ListGroup sets it for you. */\n  last?: boolean;\n  className?: string;\n};\n\n/** The canonical list row: leading · title/subtitle · value/sublabel or trailing. Never rebuild this inline. */\nexport function ListRow({ leading, select, title, subtitle, value, valueClassName, sublabel, sublabelClassName, trailing, chevron, onClick, href, disabled, last, className }: Props) {\n  const body = (\n    <>\n      {leading}\n      <span className=\"min-w-0 flex-1\">\n        <span className=\"block truncate font-medium\">{title}</span>\n        {subtitle ? <span className=\"text-muted-foreground block truncate text-sm\">{subtitle}</span> : null}\n      </span>\n      {trailing ??\n        (value || sublabel ? (\n          <span className=\"flex flex-col items-end\">\n            {value ? <span className={cn('font-semibold tabular-nums', valueClassName)}>{value}</span> : null}\n            {sublabel ? <span className={cn('text-muted-foreground text-sm', sublabelClassName)}>{sublabel}</span> : null}\n          </span>\n        ) : null)}\n      {select ? (\n        <span\n          aria-hidden\n          className={cn(\n            'flex size-5 shrink-0 items-center justify-center border-2',\n            select.mode === 'radio' ? 'rounded-full' : 'rounded-sm',\n            select.selected ? 'border-foreground bg-foreground' : 'border-border'\n          )}>\n          {select.selected ? select.mode === 'radio' ? <span className=\"bg-background size-2 rounded-full\" /> : <CheckIcon className=\"text-background size-3.5\" strokeWidth={3} /> : null}\n        </span>\n      ) : null}\n      {chevron ? <ChevronRightIcon className=\"text-muted-foreground size-4 shrink-0\" aria-hidden /> : null}\n    </>\n  );\n  const base = cn('flex min-h-14 w-full items-center gap-3 py-3 text-left', !last && 'border-border border-b', disabled && 'pointer-events-none opacity-50', className);\n  // No side offset for the hover: the row's divider must line up with the rows around it.\n  const interactive = 'hover:bg-accent/50 focus-visible:ring-ring/50 outline-none focus-visible:ring-[3px] focus-visible:ring-inset';\n  if (href) {\n    return (\n      <Link href={href} aria-disabled={disabled} className={cn(base, interactive)}>\n        {body}\n      </Link>\n    );\n  }\n  if (onClick) {\n    return (\n      <button type=\"button\" role={select?.mode} aria-checked={select ? select.selected : undefined} disabled={disabled} onClick={onClick} className={cn(base, interactive)}>\n        {body}\n      </button>\n    );\n  }\n  return <div className={base}>{body}</div>;\n}\n",
      "type": "registry:component",
      "target": "components/kit/list-row.tsx"
    }
  ],
  "meta": {
    "exports": [
      "ListRow"
    ],
    "api": "<ListRow leading title subtitle? value? sublabel? trailing? chevron? onClick? href? last? />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "data"
  ],
  "type": "registry:component"
}