{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "list",
  "title": "List",
  "description": "List component for displaying categorized items with optional action links. Perfect for service directories, document lists, and search results.",
  "registryDependencies": [
    "card",
    "button"
  ],
  "files": [
    {
      "path": "src/lib/kapwa/list/index.tsx",
      "content": "import { useState } from 'react';\nimport { Button } from '@kapwa/button';\nimport { Card, CardHeader, CardContent } from '@kapwa/card';\nimport { cn } from '@kapwa/utils';\nimport { ChevronDown, ExternalLink } from 'lucide-react';\n\ntype ListSectionItem = {\n  id: number;\n  title: string;\n  category: string;\n  description?: string;\n};\n\ntype ListsSectionProps = {\n  title: string;\n  headerTitle: string;\n  headerSubtitle?: string;\n  externalLinkText?: string;\n  listItems: ListSectionItem[];\n};\n\nconst List = ({\n  headerTitle,\n  headerSubtitle,\n  externalLinkText,\n  listItems,\n  title,\n}: {\n  title: string;\n  headerTitle: string;\n  headerSubtitle?: string;\n  externalLinkText?: string;\n  listItems: ListSectionItem[];\n}) => {\n  const [expandedId, setExpandedId] = useState<number | null>(null);\n\n  const toggle = (id: number) => {\n    setExpandedId(prev => (prev === id ? null : id));\n  };\n\n  return (\n    <Card>\n      <CardHeader>\n        <h2 className='text-2xl font-semibold'>{headerTitle}</h2>\n        {headerSubtitle && (\n          <p className='text-[var(--color-kapwa-text-support)]'>\n            {headerSubtitle}\n          </p>\n        )}\n      </CardHeader>\n      <CardContent>\n        <div className='space-y-8'>\n          <div>\n            <h3 className='font-medium mb-4'>{title}</h3>\n            <div className='space-y-4'>\n              {listItems.map(item => {\n                const isExpanded = expandedId === item.id;\n                const descriptionId = `list-item-desc-${item.id}`;\n\n                return (\n                  <div\n                    key={item.id}\n                    className='rounded-lg border border-[var(--color-kapwa-border-weak)] bg-[var(--color-kapwa-bg-surface)] p-4 transition-colors hover:border-[var(--color-kapwa-border-brand)]'\n                  >\n                    {/* Title row: title + category badge + right-side action */}\n                    <div className='flex items-start justify-between gap-4'>\n                      <div className='min-w-0 flex-1'>\n                        <h4 className='text-lg font-medium text-[var(--color-kapwa-text-strong)]'>\n                          {item.title}\n                        </h4>\n                        <span className='mt-2 inline-block rounded-sm bg-[var(--color-kapwa-bg-gray-default)] px-2 py-1 text-xs font-medium text-[var(--color-kapwa-text-support)]'>\n                          {item.category}\n                        </span>\n                      </div>\n                      {externalLinkText && (\n                        <Button variant='ghost' size='sm' className='flex-none'>\n                          {externalLinkText}\n                          <ExternalLink className='ml-2 h-4 w-4' />\n                        </Button>\n                      )}\n                    </div>\n\n                    {/* Collapsible description disclosure */}\n                    {item.description && (\n                      <div className='mt-3'>\n                        <p\n                          id={descriptionId}\n                          className={cn(\n                            'text-sm text-[var(--color-kapwa-text-support)]',\n                            !isExpanded && 'line-clamp-3'\n                          )}\n                        >\n                          {item.description}\n                        </p>\n                        <button\n                          type='button'\n                          aria-expanded={isExpanded}\n                          aria-controls={descriptionId}\n                          onClick={() => toggle(item.id)}\n                          className='mt-2 inline-flex items-center gap-1 rounded text-sm font-medium text-[var(--color-kapwa-text-brand)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-kapwa-border-focus)] focus-visible:ring-offset-1'\n                        >\n                          {isExpanded ? 'Show less' : 'Show more'}\n                          <ChevronDown\n                            className={cn(\n                              'h-4 w-4 transition-transform duration-150 ease-in-out',\n                              isExpanded && 'rotate-180'\n                            )}\n                          />\n                        </button>\n                      </div>\n                    )}\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport { List };\nexport type { ListsSectionProps, ListSectionItem };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}