{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "menu-section-level-selection",
  "title": "Menu Section Level Selection",
  "description": "menu-section-level-selection",
  "dependencies": [
    "@heroicons/react",
    "react-aria-components"
  ],
  "registryDependencies": [
    "https://intentui.com/r/menu"
  ],
  "files": [
    {
      "path": "src/components/examples/collections/menu/menu-section-level-selection.tsx",
      "content": "'use client'\n\nimport {\n  BoldIcon,\n  ClipboardDocumentIcon,\n  DocumentDuplicateIcon,\n  ItalicIcon,\n  ScissorsIcon,\n  UnderlineIcon,\n} from '@heroicons/react/24/outline'\nimport { useState } from 'react'\nimport type { Selection } from 'react-aria-components/GridList'\nimport {\n  Menu,\n  MenuContent,\n  MenuItem,\n  MenuLabel,\n  MenuSection,\n  MenuTrigger,\n} from '@/components/ui/menu'\n\nexport default function MenuSectionLevelSelection() {\n  const [style, setStyle] = useState<Selection>(new Set(['bold']))\n  const [align, setAlign] = useState<Selection>(new Set(['left']))\n  return (\n    <Menu>\n      <MenuTrigger>Open</MenuTrigger>\n      <MenuContent popover={{ placement: 'bottom' }} className=\"min-w-52\">\n        <MenuSection label=\"Actions\">\n          <MenuItem textValue=\"Cut\">\n            <ScissorsIcon />\n            <MenuLabel>Cut</MenuLabel>\n          </MenuItem>\n          <MenuItem textValue=\"Copy\">\n            <DocumentDuplicateIcon />\n            <MenuLabel>Copy</MenuLabel>\n          </MenuItem>\n          <MenuItem textValue=\"Paste\">\n            <ClipboardDocumentIcon />\n            <MenuLabel>Paste</MenuLabel>\n          </MenuItem>\n        </MenuSection>\n        <MenuSection\n          selectionMode=\"multiple\"\n          selectedKeys={style}\n          onSelectionChange={setStyle}\n          label=\"Text style\"\n        >\n          <MenuItem id=\"bold\" textValue=\"Bold\">\n            <BoldIcon />\n            <MenuLabel>Bold</MenuLabel>\n          </MenuItem>\n          <MenuItem id=\"italic\" textValue=\"Italic\">\n            <ItalicIcon />\n            <MenuLabel>Italic</MenuLabel>\n          </MenuItem>\n          <MenuItem id=\"underline\" textValue=\"Underline\">\n            <UnderlineIcon />\n            <MenuLabel>Underline</MenuLabel>\n          </MenuItem>\n        </MenuSection>\n        <MenuSection\n          selectionMode=\"single\"\n          selectedKeys={align}\n          onSelectionChange={setAlign}\n          label=\"Text alignment\"\n        >\n          <MenuItem id=\"left\" textValue=\"Left\">\n            <MenuLabel>Left</MenuLabel>\n          </MenuItem>\n          <MenuItem id=\"center\" textValue=\"Cente\">\n            <MenuLabel>Center</MenuLabel>\n          </MenuItem>\n          <MenuItem id=\"right\" textValue=\"Right\">\n            <MenuLabel>Right</MenuLabel>\n          </MenuItem>\n        </MenuSection>\n      </MenuContent>\n    </Menu>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/menu-section-level-selection/page.tsx"
    }
  ],
  "type": "registry:page"
}