{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "list",
  "title": "List",
  "description": "Material list rows in three densities, with leading and trailing slots.",
  "dependencies": [
    "@base-ui/react@^1.7.0"
  ],
  "registryDependencies": [
    "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/utils.json"
  ],
  "files": [
    {
      "path": "src/components/ui/list.tsx",
      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype ListDensity = \"default\" | \"-2\" | \"-4\"\n\nfunction List({\n  className,\n  density = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { density?: ListDensity }) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"list\"\n      data-density={density}\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ListItem({\n  className,\n  lines = 1,\n  render,\n  wrapperRole = \"listitem\",\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  lines?: 1 | 2 | 3\n  wrapperRole?: \"listitem\" | \"presentation\"\n}) {\n  const item = useRender({\n    defaultTagName: \"div\",\n    render,\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"group/list-item flex w-full items-center gap-4 px-4 py-2 text-m3-on-surface\",\n          \"data-[lines=1]:min-h-14 data-[lines=2]:min-h-18 data-[lines=3]:min-h-22 data-[lines=3]:py-3\",\n          \"in-data-[density=-2]:data-[lines=1]:min-h-12 in-data-[density=-2]:data-[lines=2]:min-h-16 in-data-[density=-2]:data-[lines=3]:min-h-20 in-data-[density=-2]:data-[lines=3]:py-2\",\n          \"in-data-[density=-4]:py-0 in-data-[density=-4]:data-[lines=1]:min-h-10 in-data-[density=-4]:data-[lines=2]:min-h-14 in-data-[density=-4]:data-[lines=3]:min-h-18 in-data-[density=-4]:data-[lines=3]:py-0\",\n          \"data-interactive:cursor-pointer data-interactive:border-0 data-interactive:text-left data-interactive:outline-none\",\n          \"data-interactive:transition-colors data-interactive:duration-(--m3-spring-effects-fast-duration) data-interactive:ease-(--m3-spring-effects-fast)\",\n          \"data-interactive:hover:bg-m3-on-surface/8 data-interactive:focus-visible:bg-m3-on-surface/10 data-interactive:active:bg-m3-on-surface/10\",\n          \"data-interactive:focus-visible:outline-3 data-interactive:focus-visible:outline-offset-[-3px] data-interactive:focus-visible:outline-m3-secondary\",\n          \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:[&_[data-slot=list-item-headline]]:text-m3-on-surface/38 disabled:[&_[data-slot=list-item-overline]]:text-m3-on-surface/38 disabled:[&_[data-slot=list-item-supporting-text]]:text-m3-on-surface/38 disabled:[&_[data-slot=list-item-trailing]]:text-m3-on-surface/38\",\n          \"aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:[&_[data-slot=list-item-headline]]:text-m3-on-surface/38 aria-disabled:[&_[data-slot=list-item-overline]]:text-m3-on-surface/38 aria-disabled:[&_[data-slot=list-item-supporting-text]]:text-m3-on-surface/38 aria-disabled:[&_[data-slot=list-item-trailing]]:text-m3-on-surface/38\",\n          className,\n        ),\n      },\n      props,\n    ),\n    state: {\n      slot: \"list-item\",\n      lines,\n      interactive: Boolean(render),\n    },\n  })\n\n  return (\n    <div\n      role={wrapperRole}\n      data-slot=\"list-item-wrapper\"\n      data-lines={lines}\n      className=\"contents\"\n    >\n      {item}\n    </div>\n  )\n}\n\nfunction ListSection({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"list-section\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ListSubheader({ className, ...props }: React.ComponentProps<\"h3\">) {\n  return (\n    <h3\n      data-slot=\"list-subheader\"\n      className={cn(\n        \"flex min-h-12 items-center px-4 text-m3-title-sm text-m3-on-surface-variant\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"list-item-content\"\n      className={cn(\"flex min-w-0 flex-1 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemLeading({\n  className,\n  variant = \"icon\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  variant?: \"icon\" | \"avatar\" | \"media\" | \"control\"\n}) {\n  return (\n    <div\n      data-slot=\"list-item-leading\"\n      data-variant={variant}\n      className={cn(\n        \"flex shrink-0 items-center justify-center self-center text-m3-on-surface-variant group-data-[lines=3]/list-item:self-start\",\n        \"data-[variant=icon]:size-6 data-[variant=icon]:[&>svg]:size-6\",\n        \"data-[variant=avatar]:size-10\",\n        \"data-[variant=media]:size-14 data-[variant=media]:overflow-hidden data-[variant=media]:[&>img]:size-full data-[variant=media]:[&>img]:object-cover\",\n        \"data-[variant=control]:min-h-6 data-[variant=control]:min-w-6\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemOverline({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"list-item-overline\"\n      className={cn(\n        \"text-m3-label-md text-m3-on-surface-variant\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemHeadline({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"list-item-headline\"\n      className={cn(\"text-m3-body-lg text-m3-on-surface\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemSupportingText({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"list-item-supporting-text\"\n      className={cn(\n        \"line-clamp-2 text-m3-body-md text-m3-on-surface-variant\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemTrailing({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"list-item-trailing\"\n      className={cn(\n        \"flex shrink-0 items-center justify-center gap-2 self-center text-m3-label-sm text-m3-on-surface-variant group-data-[lines=3]/list-item:self-start [&>svg]:size-6\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  List,\n  ListItem,\n  ListItemContent,\n  ListItemHeadline,\n  ListItemLeading,\n  ListItemOverline,\n  ListItemSupportingText,\n  ListItemTrailing,\n  ListSection,\n  ListSubheader,\n}\nexport type { ListDensity }\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "display"
  ],
  "type": "registry:ui"
}