{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "modal-nested-example",
  "title": "Modal Nested",
  "description": "modal-nested-example",
  "dependencies": [
    "react-aria-components",
    "sonner"
  ],
  "registryDependencies": [
    "https://intentui.com/r/button",
    "https://intentui.com/r/field",
    "https://intentui.com/r/modal",
    "https://intentui.com/r/text-field",
    "https://intentui.com/r/textarea"
  ],
  "files": [
    {
      "path": "src/components/examples/overlays/modal/modal-nested-example.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { Form } from 'react-aria-components/Form'\nimport { toast } from 'sonner'\nimport { Button } from '@/components/ui/button'\nimport { Label } from '@/components/ui/field'\nimport {\n  ModalBody,\n  ModalClose,\n  ModalContent,\n  ModalDescription,\n  ModalFooter,\n  ModalHeader,\n  ModalTitle,\n} from '@/components/ui/modal'\nimport { TextField } from '@/components/ui/text-field'\nimport { Textarea } from '@/components/ui/textarea'\n\nexport default function ModalNestedDemo() {\n  const [isRegistrationModalOpen, setIsRegistrationModalOpen] = useState(false)\n  const [isProfileSetupModalOpen, setIsProfileSetupModalOpen] = useState(false)\n  const [isTyping, setIsTyping] = useState(false)\n\n  return (\n    <>\n      <Button onPress={() => setIsRegistrationModalOpen(true)}>Register</Button>\n\n      <ModalContent\n        isOpen={isRegistrationModalOpen}\n        onOpenChange={() => setIsRegistrationModalOpen(false)}\n        aria-label=\"Confirm Registration\"\n      >\n        <ModalHeader>\n          <ModalTitle>Confirm Registration</ModalTitle>\n          <ModalDescription>Please confirm your registration details.</ModalDescription>\n        </ModalHeader>\n        <ModalFooter>\n          <ModalClose>Cancel</ModalClose>\n          <Button\n            onPress={() => {\n              setIsProfileSetupModalOpen(true)\n            }}\n          >\n            Confirm\n          </Button>\n        </ModalFooter>\n      </ModalContent>\n\n      <ModalContent\n        isOpen={isProfileSetupModalOpen}\n        onOpenChange={(isOpen) => {\n          if (!isOpen && isTyping) {\n            toast('Profile setup incomplete')\n          }\n          setIsProfileSetupModalOpen(isOpen)\n        }}\n        aria-label=\"Profile Setup\"\n      >\n        <ModalHeader>\n          <ModalTitle>Set Up Your Profile</ModalTitle>\n          <ModalDescription>\n            We need a bit more information before you can get started.\n          </ModalDescription>\n        </ModalHeader>\n        <Form\n          onSubmit={(e) => {\n            e.preventDefault()\n            toast.success('Profile setup complete')\n            setIsProfileSetupModalOpen(false)\n            setIsRegistrationModalOpen(false)\n          }}\n        >\n          <ModalBody className=\"space-y-4\">\n            <TextField>\n              <Label>Bio</Label>\n              <Textarea\n                placeholder=\"Tell us something about yourself\"\n                onInput={() => setIsTyping(true)}\n              />\n            </TextField>\n          </ModalBody>\n          <ModalFooter>\n            <ModalClose>Skip for now</ModalClose>\n            <Button type=\"submit\">Complete Setup</Button>\n          </ModalFooter>\n        </Form>\n      </ModalContent>\n    </>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/modal-nested-example/page.tsx"
    }
  ],
  "type": "registry:page"
}