{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-15",
  "title": "Hamburger toggle",
  "description": "Three bars morph into an X on press.",
  "dependencies": [],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/patterns/button/button-15.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\n\nimport { Button } from '@/components/ui/button'\n\nexport function Button15() {\n  const [open, setOpen] = useState(false)\n\n  return (\n    <Button\n      variant=\"outline\"\n      size=\"icon\"\n      aria-label={open ? 'Close menu' : 'Open menu'}\n      aria-pressed={open}\n      onClick={() => setOpen((v) => !v)}\n      className=\"group/hamburger\"\n      data-state={open ? 'open' : 'closed'}\n    >\n      <span className=\"relative flex size-4 flex-col items-center justify-center\">\n        <span className=\"absolute h-0.5 w-4 -translate-y-1.5 rounded-full bg-current transition-transform duration-200 group-data-[state=open]/hamburger:translate-y-0 group-data-[state=open]/hamburger:rotate-45\" />\n        <span className=\"absolute h-0.5 w-4 rounded-full bg-current transition-opacity duration-200 group-data-[state=open]/hamburger:opacity-0\" />\n        <span className=\"absolute h-0.5 w-4 translate-y-1.5 rounded-full bg-current transition-transform duration-200 group-data-[state=open]/hamburger:translate-y-0 group-data-[state=open]/hamburger:-rotate-45\" />\n      </span>\n    </Button>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/button/button-15.tsx"
    }
  ],
  "type": "registry:block"
}