{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-drawer-9",
  "description": "Bottom drawer with snap points",
  "registryDependencies": [
    "@coss/button",
    "@coss/drawer"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-drawer-9.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Drawer,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerPopup,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\";\n\nexport default function Particle() {\n  const snapPoints = [\"300px\", 1] as const;\n  const [snapPoint, setSnapPoint] = useState<\n    (typeof snapPoints)[number] | null\n  >(snapPoints[0]);\n\n  return (\n    <Drawer\n      onSnapPointChange={(point) =>\n        setSnapPoint(point as (typeof snapPoints)[number] | null)\n      }\n      position=\"bottom\"\n      snapPoint={snapPoint}\n      snapPoints={[...snapPoints]}\n      snapToSequentialPoints\n    >\n      <DrawerTrigger render={<Button variant=\"outline\" />}>\n        With snap points\n      </DrawerTrigger>\n      <DrawerPopup showBar>\n        <DrawerHeader>\n          <DrawerTitle>Snap Points</DrawerTitle>\n          <DrawerDescription>\n            Drag the drawer to snap between a compact peek and full-height view.\n          </DrawerDescription>\n        </DrawerHeader>\n        <DrawerPanel>\n          <div className=\"flex flex-col gap-2\">\n            {Array.from({ length: 48 }, (_, i) => `box-${i}`).map((key) => (\n              <div\n                className=\"h-12 shrink-0 rounded-xl border bg-muted\"\n                key={key}\n              />\n            ))}\n          </div>\n        </DrawerPanel>\n      </DrawerPopup>\n    </Drawer>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "categories": [
    "drawer"
  ],
  "type": "registry:block"
}