{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "list-row",
  "title": "List Row",
  "description": "The mobile list row and its grouped container: leading visual, title, subtitle, trailing value, chevron, in an inset-grouped or plain edge-to-edge style.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/tealmac/list-row.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronRightIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* ListGroup: the container. `inset` is the rounded, grouped card style used\n   by iOS Settings; the plain style runs edge to edge with hairlines. */\n\nexport interface ListGroupProps extends React.ComponentProps<\"section\"> {\n  /** Small caps heading above the group. It also names the list. */\n  header?: React.ReactNode\n  /** Help text under the group. */\n  footer?: React.ReactNode\n  /** Rounded card with side margins instead of edge to edge. */\n  inset?: boolean\n}\n\nexport function ListGroup({\n  header,\n  footer,\n  inset = false,\n  className,\n  children,\n  ...props\n}: ListGroupProps) {\n  const headerId = React.useId()\n  return (\n    <section\n      data-slot=\"list-group\"\n      data-inset={inset || undefined}\n      className={cn(\"flex flex-col gap-1.5\", inset && \"px-4\", className)}\n      {...props}\n    >\n      {header && (\n        <h2\n          id={headerId}\n          className={cn(\n            \"text-muted-foreground px-4 text-xs font-medium tracking-wide uppercase\",\n            inset && \"px-4\"\n          )}\n        >\n          {header}\n        </h2>\n      )}\n      <ul\n        aria-labelledby={header ? headerId : undefined}\n        className={cn(\n          \"bg-card divide-y overflow-hidden\",\n          inset ? \"rounded-2xl border\" : \"border-y\"\n        )}\n      >\n        {children}\n      </ul>\n      {footer && <p className=\"text-muted-foreground px-4 text-xs\">{footer}</p>}\n    </section>\n  )\n}\n\nexport interface ListRowProps extends Omit<\n  React.ComponentProps<\"li\">,\n  \"title\" | \"onClick\"\n> {\n  /** Icon, avatar or thumbnail at the start. */\n  leading?: React.ReactNode\n  title: React.ReactNode\n  /** Second line, muted. */\n  subtitle?: React.ReactNode\n  /** A value, switch or badge at the end. */\n  trailing?: React.ReactNode\n  /** Show the disclosure chevron. Default: true when the row is a link or button. */\n  chevron?: boolean\n  /** Makes the row a link. */\n  href?: string\n  /** Makes the row a button. */\n  onClick?: React.MouseEventHandler<HTMLElement>\n  /** Red title, for \"Sign out\" and \"Delete\". */\n  destructive?: boolean\n  selected?: boolean\n  disabled?: boolean\n  /**\n   * `li` (default) for a row directly inside a ListGroup. Use `div` when you\n   * wrap the row in your own `li`, so lists are not nested.\n   */\n  as?: \"li\" | \"div\"\n}\n\n/**\n * One row of a list: a 44px-or-taller touch target with a leading visual, a\n * title and subtitle, and a trailing value. With `href` or `onClick` the whole\n * row is the link or button; otherwise it is plain content (put a switch in\n * `trailing`).\n */\nexport function ListRow({\n  leading,\n  title,\n  subtitle,\n  trailing,\n  chevron,\n  href,\n  onClick,\n  destructive,\n  selected,\n  disabled,\n  as = \"li\",\n  className,\n  ...props\n}: ListRowProps) {\n  const Tag = as as React.ElementType\n  const interactive = Boolean(href || onClick)\n  const showChevron = chevron ?? interactive\n  const body = (\n    <>\n      {leading && (\n        <span className=\"text-muted-foreground flex shrink-0 items-center [&_svg]:size-5\">\n          {leading}\n        </span>\n      )}\n      <span className=\"flex min-w-0 flex-1 flex-col text-start\">\n        <span\n          className={cn(\n            \"truncate text-base\",\n            destructive && \"text-destructive\"\n          )}\n        >\n          {title}\n        </span>\n        {subtitle && (\n          <span className=\"text-muted-foreground truncate text-sm\">\n            {subtitle}\n          </span>\n        )}\n      </span>\n      {trailing && (\n        <span className=\"text-muted-foreground flex shrink-0 items-center gap-2 text-sm\">\n          {trailing}\n        </span>\n      )}\n      {showChevron && (\n        <ChevronRightIcon\n          aria-hidden\n          className=\"text-muted-foreground/60 size-4 shrink-0 rtl:rotate-180\"\n        />\n      )}\n    </>\n  )\n  const rowClass = cn(\n    \"flex min-h-12 w-full items-center gap-3 px-4 py-2\",\n    interactive &&\n      \"hover:bg-accent active:bg-accent focus-visible:ring-ring outline-none focus-visible:ring-2 focus-visible:ring-inset\",\n    disabled && \"pointer-events-none opacity-50\"\n  )\n  return (\n    <Tag\n      data-slot=\"list-row\"\n      data-selected={selected || undefined}\n      className={cn(\"relative\", selected && \"bg-accent/60\", className)}\n      {...(props as React.ComponentProps<\"div\">)}\n    >\n      {href ? (\n        <a\n          href={href}\n          onClick={onClick}\n          aria-current={selected ? \"page\" : undefined}\n          aria-disabled={disabled || undefined}\n          className={rowClass}\n        >\n          {body}\n        </a>\n      ) : onClick ? (\n        <button\n          type=\"button\"\n          onClick={onClick}\n          aria-pressed={selected}\n          disabled={disabled}\n          className={rowClass}\n        >\n          {body}\n        </button>\n      ) : (\n        <div className={rowClass}>{body}</div>\n      )}\n    </Tag>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}