{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "sheet-menu-example",
  "title": "Sheet Menu",
  "description": "sheet-menu-example",
  "dependencies": [
    "@heroicons/react",
    "react-aria-components"
  ],
  "registryDependencies": [
    "https://intentui.com/r/avatar",
    "https://intentui.com/r/button",
    "https://intentui.com/r/checkbox",
    "https://intentui.com/r/field",
    "https://intentui.com/r/input",
    "https://intentui.com/r/menu",
    "https://intentui.com/r/modal",
    "https://intentui.com/r/select",
    "https://intentui.com/r/sheet",
    "https://intentui.com/r/text-field"
  ],
  "files": [
    {
      "path": "src/components/examples/overlays/sheet/sheet-menu-example.tsx",
      "content": "'use client'\n\nimport {\n  ArrowLeftStartOnRectangleIcon,\n  BookOpenIcon,\n  ChatBubbleLeftRightIcon,\n  Cog6ToothIcon,\n  HeartIcon,\n  PencilSquareIcon,\n  SparklesIcon,\n  StarIcon,\n  UserIcon,\n} from '@heroicons/react/24/outline'\nimport { useState } from 'react'\nimport { Menu as MenuPrimitive } from 'react-aria-components/Menu'\nimport { Avatar } from '@/components/ui/avatar'\nimport { Button } from '@/components/ui/button'\nimport { Checkbox, CheckboxField } from '@/components/ui/checkbox'\nimport { Description, Label } from '@/components/ui/field'\nimport { Input } from '@/components/ui/input'\nimport { MenuItem, MenuLabel, MenuSection } from '@/components/ui/menu'\nimport {\n  ModalBody,\n  ModalClose,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalTitle,\n} from '@/components/ui/modal'\nimport { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'\nimport {\n  Sheet,\n  SheetBody,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/components/ui/sheet'\nimport { TextField } from '@/components/ui/text-field'\n\nexport default function SheetMenuDemo() {\n  const [isOpen, setIsOpen] = useState(false)\n  const closeModal = () => setIsOpen(false)\n  return (\n    <>\n      <ModalContent isOpen={isOpen} onOpenChange={setIsOpen}>\n        <ModalHeader>\n          <ModalTitle>Edit status</ModalTitle>\n        </ModalHeader>\n        <ModalBody>\n          <div className=\"space-y-4\">\n            <div className=\"flex items-center gap-2\">\n              <PencilSquareIcon className=\"size-5\" />\n              <TextField>\n                <Label>Status</Label>\n                <Input placeholder=\"What's your status?\" />\n              </TextField>\n            </div>\n            <Select>\n              <Label>Clear Status</Label>\n              <SelectTrigger />\n              <SelectContent>\n                <SelectItem>Never</SelectItem>\n                <SelectItem>in 30 Minutes</SelectItem>\n                <SelectItem>in 1 Hour</SelectItem>\n                <SelectItem>in 8 Hours</SelectItem>\n                <SelectItem>after Today</SelectItem>\n                <SelectItem>after a Week</SelectItem>\n                <SelectItem>after a Month</SelectItem>\n              </SelectContent>\n            </Select>\n            <Select>\n              <Label>Visible to</Label>\n              <SelectTrigger />\n              <SelectContent>\n                <SelectItem>Everyone</SelectItem>\n                <SelectItem>Organization</SelectItem>\n                <SelectItem>Public</SelectItem>\n              </SelectContent>\n            </Select>\n            <CheckboxField>\n              <Checkbox>Busy</Checkbox>\n              <Description>\n                When others mention you, assign you, or request your review, GitHub will let them\n                know that you have limited availability.\n              </Description>\n            </CheckboxField>\n          </div>\n        </ModalBody>\n        <ModalFooter>\n          <ModalClose>Clear Status</ModalClose>\n          <Button onPress={closeModal}>Set Status</Button>\n        </ModalFooter>\n      </ModalContent>\n      <Sheet>\n        <SheetTrigger aria-label=\"Open menu\">\n          <Avatar src=\"https://intentui.com/images/avatar/cobain.jpg\" alt=\"irsyadadl\" />\n        </SheetTrigger>\n        <SheetContent isFloat={false} closeButton={false}>\n          <SheetHeader className=\"flex flex-row gap-x-3.5 border-b sm:gap-x-3 sm:px-4 sm:pt-3 sm:pb-2\">\n            <Avatar src=\"https://intentui.com/images/avatar/cobain.jpg\" isSquare alt=\"cobain\" />\n            <div>\n              <SheetTitle className=\"text-base/4 sm:text-base/4\">Kurt Cobain</SheetTitle>\n              <SheetDescription>@cobain</SheetDescription>\n            </div>\n          </SheetHeader>\n          <SheetBody className=\"px-0 sm:px-0\">\n            <MenuPrimitive className=\"divide-y *:[[role=group]]:p-2\">\n              <MenuSection>\n                <MenuItem>\n                  <UserIcon className=\"size-5\" />\n                  <MenuLabel>Your profile</MenuLabel>\n                </MenuItem>\n                <MenuItem>\n                  <BookOpenIcon className=\"size-5\" />\n                  <MenuLabel>Your repositories</MenuLabel>\n                </MenuItem>\n                <MenuItem>\n                  <SparklesIcon className=\"size-5\" />\n                  <MenuLabel>Copilot</MenuLabel>\n                </MenuItem>\n                <MenuItem>\n                  <MenuLabel>Your projects</MenuLabel>\n                </MenuItem>\n                <MenuItem>\n                  <StarIcon className=\"size-5\" />\n                  <MenuLabel>Your stars</MenuLabel>\n                </MenuItem>\n                <MenuItem>\n                  <MenuLabel>Your gists</MenuLabel>\n                </MenuItem>\n                <MenuItem>\n                  <MenuLabel>Your organizations</MenuLabel>\n                </MenuItem>\n                <MenuItem>\n                  <MenuLabel>Your enterprises</MenuLabel>\n                </MenuItem>\n                <MenuItem>\n                  <HeartIcon className=\"size-5\" />\n                  <MenuLabel>Your sponsors</MenuLabel>\n                </MenuItem>\n              </MenuSection>\n              <MenuSection>\n                <MenuItem>\n                  <MenuLabel>Feature preview</MenuLabel>\n                </MenuItem>\n                <MenuItem>\n                  <Cog6ToothIcon className=\"size-5\" />\n                  <MenuLabel>Settings</MenuLabel>\n                </MenuItem>\n              </MenuSection>\n              <MenuSection>\n                <MenuItem>\n                  <MenuLabel>GitHub Docs</MenuLabel>\n                </MenuItem>\n                <MenuItem>\n                  <MenuLabel>GitHub Support</MenuLabel>\n                </MenuItem>\n                <MenuItem>\n                  <ChatBubbleLeftRightIcon className=\"size-5\" />\n                  <MenuLabel>GitHub Community</MenuLabel>\n                </MenuItem>\n              </MenuSection>\n            </MenuPrimitive>\n          </SheetBody>\n          <SheetFooter className=\"border-t bg-muted/20 sm:p-4\">\n            <Button size=\"sm\" className=\"w-full justify-between bg-bg\" intent=\"outline\">\n              <span>Sign out</span>\n              <ArrowLeftStartOnRectangleIcon className=\"size-5\" />\n            </Button>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/sheet-menu-example/page.tsx"
    }
  ],
  "type": "registry:page"
}