{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible-5",
  "type": "registry:component",
  "title": "Collapsible 5",
  "description": "Collapsible 5. A collapsible is a component that allows users to show or hide content.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "checkbox",
    "collapsible",
    "input",
    "label",
    "separator"
  ],
  "files": [
    {
      "path": "components/watermelon/collapsible-5.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { ChevronDownIcon, StarIcon } from 'lucide-react';\n\nimport { Button } from '@/components/base-ui/button';\nimport { Checkbox } from '@/components/base-ui/checkbox';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/components/base-ui/collapsible';\nimport { Input } from '@/components/base-ui/input';\nimport { Label } from '@/components/base-ui/label';\nimport { Separator } from '@/components/base-ui/separator';\n\ntype PriceRange = {\n  maxPlaceholder: string;\n  minPlaceholder: string;\n};\n\ntype RatingOption = {\n  id: string;\n  value: number;\n};\n\ntype FilterOption = {\n  id: string;\n  label: string;\n};\n\nconst priceRange: PriceRange = {\n  maxPlaceholder: '1200',\n  minPlaceholder: '50',\n};\n\nconst ratings: readonly RatingOption[] = [\n  { id: 'rating-4', value: 4 },\n  { id: 'rating-3', value: 3 },\n  { id: 'rating-2', value: 2 },\n] as const;\n\nconst brands: readonly FilterOption[] = [\n  { id: 'brand-apple', label: 'Apple' },\n  { id: 'brand-samsung', label: 'Samsung' },\n  { id: 'brand-google', label: 'Google' },\n  { id: 'brand-oneplus', label: 'OnePlus' },\n  { id: 'brand-xiaomi', label: 'Xiaomi' },\n] as const;\n\nconst batterySizes: readonly FilterOption[] = [\n  { id: 'battery-3500', label: '3500mAh' },\n  { id: 'battery-4000', label: '4000mAh' },\n  { id: 'battery-5000', label: '5000mAh' },\n  { id: 'battery-6000', label: '6000mAh' },\n] as const;\n\ntype SectionShellProps = {\n  children: ReactNode;\n  title: string;\n};\n\nconst SectionShell = ({ children, title }: SectionShellProps) => {\n  const [open, setOpen] = useState<boolean>(false);\n\n  return (\n    <Collapsible\n      open={open}\n      onOpenChange={setOpen}\n      className=\"flex flex-col gap-2\"\n    >\n      <div className=\"hover:bg-muted/30 flex items-center justify-between gap-4 rounded-md px-2 py-1.5\">\n        <div className=\"text-sm font-semibold\">{title}</div>\n        <CollapsibleTrigger>\n          <Button variant=\"ghost\" size=\"icon-sm\">\n            <ChevronDownIcon\n              className={`text-muted-foreground size-4 transition-transform ${open ? 'rotate-180' : ''}`}\n            />\n            <span className=\"sr-only\">Toggle {title}</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <CollapsibleContent className=\"flex flex-col gap-2 px-1 pb-1\">\n        {children}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n};\n\nconst Collapsible5 = () => {\n  return (\n    <div className=\"border-border/70 bg-background w-full max-w-[350px] space-y-3 rounded-xl border p-3.5 shadow-sm\">\n      <SectionShell title=\"Price Range\">\n        <div className=\"flex items-center justify-between gap-4 px-1\">\n          <Label htmlFor=\"min-price\" className=\"shrink-0 text-sm font-medium\">\n            Min Price\n          </Label>\n          <Input\n            id=\"min-price\"\n            type=\"number\"\n            placeholder={priceRange.minPlaceholder}\n            className=\"border-border/70 bg-muted/20 h-9 max-w-56\"\n          />\n        </div>\n        <div className=\"flex items-center justify-between gap-4 px-1\">\n          <Label htmlFor=\"max-price\" className=\"shrink-0 text-sm font-medium\">\n            Max Price\n          </Label>\n          <Input\n            id=\"max-price\"\n            type=\"number\"\n            placeholder={priceRange.maxPlaceholder}\n            className=\"border-border/70 bg-muted/20 h-9 max-w-56\"\n          />\n        </div>\n      </SectionShell>\n      <Separator />\n      <SectionShell title=\"Customer Ratings\">\n        {ratings.map((rating) => (\n          <div\n            key={rating.id}\n            className=\"hover:bg-muted/20 flex items-center gap-2 rounded-md px-2 py-1\"\n          >\n            <Checkbox id={rating.id} />\n            <Label\n              htmlFor={rating.id}\n              className=\"flex shrink-0 items-center gap-1 text-sm font-medium\"\n            >\n              <span className=\"flex items-center gap-1\">\n                {rating.value}\n                <StarIcon className=\"size-4 fill-amber-500 stroke-amber-500 dark:fill-amber-400 dark:stroke-amber-400\" />\n              </span>\n              & Up\n            </Label>\n          </div>\n        ))}\n      </SectionShell>\n      <Separator />\n      <SectionShell title=\"Brand\">\n        {brands.map((brand) => (\n          <div\n            key={brand.id}\n            className=\"hover:bg-muted/20 flex items-center gap-2 rounded-md px-2 py-1\"\n          >\n            <Checkbox id={brand.id} />\n            <Label htmlFor={brand.id} className=\"shrink-0 text-sm font-medium\">\n              {brand.label}\n            </Label>\n          </div>\n        ))}\n      </SectionShell>\n      <Separator />\n      <SectionShell title=\"Battery\">\n        {batterySizes.map((battery) => (\n          <div\n            key={battery.id}\n            className=\"hover:bg-muted/20 flex items-center gap-2 rounded-md px-2 py-1\"\n          >\n            <Checkbox id={battery.id} />\n            <Label\n              htmlFor={battery.id}\n              className=\"shrink-0 text-sm font-medium\"\n            >\n              {battery.label}\n            </Label>\n          </div>\n        ))}\n      </SectionShell>\n    </div>\n  );\n};\n\nexport default Collapsible5;\n"
    }
  ]
}