{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "modal-size-example",
  "title": "Modal Size",
  "description": "modal-size-example",
  "registryDependencies": [
    "https://intentui.com/r/button",
    "https://intentui.com/r/dialog",
    "https://intentui.com/r/modal"
  ],
  "files": [
    {
      "path": "src/components/examples/overlays/modal/modal-size-example.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\n\nimport { Button } from '@/components/ui/button'\nimport { DialogClose } from '@/components/ui/dialog'\nimport {\n  ModalContent,\n  ModalDescription,\n  ModalFooter,\n  ModalHeader,\n  ModalTitle,\n} from '@/components/ui/modal'\n\ntype Size = Pick<React.ComponentProps<typeof ModalContent>, 'size'>['size']\nconst sizes: Size[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl']\nexport default function ModalSizeDemo() {\n  const [isOpen, setIsOpen] = useState(false)\n  const [modalSize, setModalSize] = useState<Size>('md')\n\n  const handlePress = (size: Size, open: boolean) => {\n    setModalSize(size)\n    setIsOpen(open)\n  }\n  return (\n    <>\n      <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n        {sizes.map((size, idx) => (\n          <div key={idx}>\n            <Button intent=\"outline\" onPress={() => handlePress(size, true)}>\n              Open {size}\n            </Button>\n          </div>\n        ))}\n      </div>\n\n      <ModalContent isOpen={isOpen} onOpenChange={setIsOpen} size={modalSize}>\n        <ModalHeader>\n          <ModalTitle>Project Update</ModalTitle>\n          <ModalDescription>\n            Dive deep into our project’s latest updates where we've streamlined workflow and\n            improved user interfaces.\n          </ModalDescription>\n        </ModalHeader>\n        <ModalFooter>\n          <DialogClose>Close</DialogClose>\n          <Button onPress={() => setIsOpen(false)}>Confirm</Button>\n        </ModalFooter>\n      </ModalContent>\n    </>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/modal-size-example/page.tsx"
    }
  ],
  "type": "registry:page"
}