{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion-11",
  "type": "registry:component",
  "title": "Accordion 11",
  "description": "Accordion 11. A vertically stacked set of interactive headings that each reveal a section of content.",
  "dependencies": [
    "@radix-ui/react-accordion",
    "lucide-react"
  ],
  "registryDependencies": [
    "accordion"
  ],
  "files": [
    {
      "path": "components/watermelon/accordion-11.tsx",
      "type": "registry:component",
      "content": "import * as AccordionPrimitive from '@radix-ui/react-accordion'\nimport { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'\n\nimport { Accordion, AccordionContent, AccordionItem } from '@/components/base-ui/accordion'\n\ntype AccordionItemData = {\n  value: string\n  title: string\n  content: string\n}\n\nconst items: readonly AccordionItemData[] = [\n  {\n    value: 'item-1',\n    title: 'Why do reservation updates create guest confusion?',\n    content:\n      'Hospitality systems often separate booking details, upgrade notes, and late arrival changes across multiple tools. A clearer reservation flow helps guests understand what changed before they arrive at the property.'\n  },\n  {\n    value: 'item-2',\n    title: 'How can hotel staff handle requests more efficiently?',\n    content:\n      'Service requests move faster when housekeeping, concierge, and front desk teams share the same status view. That visibility reduces repeated check-ins and helps staff resolve requests without extra handoff friction.'\n  },\n  {\n    value: 'item-3',\n    title: 'What causes delays during check-in peaks?',\n    content:\n      'Check-in bottlenecks usually happen when identity checks, payment confirmation, and room readiness are not aligned in one flow. Better pre-arrival coordination helps staff shorten wait times and reduce lobby congestion.'\n  }\n] as const\n\nconst Accordion11 = () => {\n  return (\n    <Accordion className='w-full space-y-2' type=\"multiple\" defaultValue={[items[0].value]}>\n      {items.map((item) => (\n        <AccordionItem\n          key={item.value}\n          value={item.value}\n          className='rounded-md border border-border/80 bg-background px-5 transition-colors duration-200 has-[button[aria-expanded=true]]:bg-neutral-100 dark:has-[button[aria-expanded=true]]:bg-neutral-950/30'\n        >\n          <AccordionPrimitive.Header className='flex'>\n            <AccordionPrimitive.Trigger\n              data-slot='accordion-trigger'\n              className='group/accordion-trigger focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 py-4 text-left text-sm font-medium outline-none transition-all focus-visible:ring-[3px] aria-disabled:pointer-events-none aria-disabled:opacity-50'\n            >\n              <span>{item.title}</span>\n\n              <span className='relative size-4 shrink-0 text-muted-foreground'>\n                <ChevronDownIcon className='absolute inset-0 size-4 group-aria-expanded/accordion-trigger:hidden' />\n                <ChevronUpIcon className='absolute inset-0 hidden size-4 group-aria-expanded/accordion-trigger:block' />\n              </span>\n            </AccordionPrimitive.Trigger>\n          </AccordionPrimitive.Header>\n\n          <AccordionContent className='text-muted-foreground'>\n            {item.content}\n          </AccordionContent>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  )\n}\n\nexport default Accordion11\n"
    }
  ]
}