{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "expandable-screen-demo",
  "type": "registry:component",
  "registryDependencies": [
    "expandable-screen",
    "button",
    "input",
    "label",
    "select",
    "textarea"
  ],
  "files": [
    {
      "path": "registry/default/example/expandable-screen-demo.tsx",
      "content": "\"use client\"\n\nimport { useId } from \"react\"\nimport Image from \"next/image\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport {\n  ExpandableScreen,\n  ExpandableScreenContent,\n  ExpandableScreenTrigger,\n} from \"@/registry/default/ui/expandable-screen\"\n\nconst formFieldClassName =\n  \"w-full rounded-lg border-0 bg-primary-foreground px-4 text-primary shadow-none placeholder:text-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all text-sm\"\n\nfunction ExpandableScreenDemo() {\n  const nameId = useId()\n  const emailId = useId()\n  const websiteId = useId()\n  const companySizeId = useId()\n  const messageId = useId()\n  return (\n    <ExpandableScreen\n      layoutId=\"cta-card\"\n      triggerRadius=\"100px\"\n      contentRadius=\"24px\"\n    >\n      <div className=\"relative flex min-h-screen flex-col items-center justify-center px-4 py-12 sm:px-6 sm:py-20\">\n        <div className=\"relative z-10 flex flex-col items-center gap-4 text-center sm:gap-6\">\n          <h1 className=\"text-foreground max-w-2xl text-4xl leading-[90%] font-normal tracking-[-0.03em] mix-blend-exclusion sm:text-5xl md:text-6xl lg:text-7xl\">\n            Join the waitlist\n          </h1>\n\n          <p className=\"text-foreground max-w-2xl px-4 text-base leading-[160%] sm:text-lg md:text-xl\">\n            Be among the first to experience our next-generation platform. Get\n            early access to exclusive features and help shape the future of\n            productivity.\n          </p>\n\n          <ExpandableScreenTrigger>\n            <div className=\"bg-primary font-regular text-primary-foreground h-15 px-6 py-3 text-lg tracking-[-0.01em] sm:px-8 sm:text-xl\">\n              Get early access\n            </div>\n          </ExpandableScreenTrigger>\n        </div>\n      </div>\n\n      <ExpandableScreenContent className=\"bg-primary\">\n        <div className=\"relative z-10 mx-auto flex h-full w-full max-w-[1100px] flex-col items-center gap-8 p-6 sm:p-10 lg:flex-row lg:gap-16 lg:p-16\">\n          <div className=\"flex w-full flex-1 flex-col justify-center space-y-3\">\n            <h2 className=\"text-primary-foreground text-3xl leading-none font-medium tracking-[-0.03em] sm:text-4xl lg:text-5xl\">\n              Reserve your spot\n            </h2>\n\n            <div className=\"space-y-4 pt-4 sm:space-y-6\">\n              <div className=\"flex gap-3 sm:gap-4\">\n                <div className=\"bg-primary-foreground/10 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg sm:h-12 sm:w-12\">\n                  <svg\n                    className=\"text-primary-foreground h-5 w-5 sm:h-6 sm:w-6\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                  >\n                    <title>Icon</title>\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M5 13l4 4L19 7\"\n                    />\n                  </svg>\n                </div>\n                <div>\n                  <p className=\"text-primary-foreground text-sm leading-[150%] sm:text-base\">\n                    Get priority access to new features and updates before\n                    public release.\n                  </p>\n                </div>\n              </div>\n              <div className=\"flex gap-3 sm:gap-4\">\n                <div className=\"bg-primary-foreground/10 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg sm:h-12 sm:w-12\">\n                  <svg\n                    className=\"text-primary-foreground h-5 w-5 sm:h-6 sm:w-6\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                  >\n                    <title>Icon</title>\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M13 10V3L4 14h7v7l9-11h-7z\"\n                    />\n                  </svg>\n                </div>\n                <div>\n                  <p className=\"text-primary-foreground text-sm leading-[150%] sm:text-base\">\n                    Join a community of early adopters and help influence our\n                    product roadmap.\n                  </p>\n                </div>\n              </div>\n            </div>\n\n            <div className=\"border-primary-foreground/20 mt-6 border-t pt-6 sm:mt-8 sm:pt-8\">\n              <p className=\"text-primary-foreground mb-4 text-lg leading-[150%] sm:text-xl lg:text-2xl\">\n                The waitlist has been a game-changer for our workflow. Highly\n                recommend joining early.\n              </p>\n              <div className=\"flex items-center gap-3 sm:gap-4\">\n                <Image\n                  src=\"/placeholder.svg?height=48&width=48\"\n                  alt=\"Alex Rivera\"\n                  width={48}\n                  height={48}\n                  className=\"h-10 w-10 rounded-full object-cover sm:h-12 sm:w-12\"\n                />\n                <div>\n                  <p className=\"text-primary-foreground text-base sm:text-lg lg:text-xl\">\n                    Alex Rivera\n                  </p>\n                  <p className=\"text-primary-foreground/70 text-sm sm:text-base\">\n                    Early Access Member\n                  </p>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div className=\"w-full flex-1\">\n            <form className=\"space-y-4 sm:space-y-5\">\n              <div>\n                <Label\n                  htmlFor={nameId}\n                  className=\"text-primary-foreground mb-2 block font-mono text-[10px] font-normal tracking-[0.5px] uppercase\"\n                >\n                  FULL NAME *\n                </Label>\n                <Input\n                  type=\"text\"\n                  id={nameId}\n                  name=\"name\"\n                  className={cn(formFieldClassName, \"h-10 py-2.5\")}\n                />\n              </div>\n\n              <div>\n                <Label\n                  htmlFor={emailId}\n                  className=\"text-primary-foreground mb-2 block font-mono text-[10px] font-normal tracking-[0.5px] uppercase\"\n                >\n                  EMAIL *\n                </Label>\n                <Input\n                  type=\"email\"\n                  id={emailId}\n                  name=\"email\"\n                  className={cn(formFieldClassName, \"h-10 py-2.5\")}\n                />\n              </div>\n\n              <div className=\"flex flex-col gap-4 sm:flex-row\">\n                <div className=\"flex-1\">\n                  <Label\n                    htmlFor={websiteId}\n                    className=\"text-primary-foreground mb-2 block font-mono text-[10px] font-normal tracking-[0.5px] uppercase\"\n                  >\n                    USE CASE\n                  </Label>\n                  <Input\n                    type=\"text\"\n                    id={websiteId}\n                    name=\"use-case\"\n                    placeholder=\"e.g., Project management, Team collaboration\"\n                    className={cn(formFieldClassName, \"h-10 py-2.5\")}\n                  />\n                </div>\n                <div className=\"w-full sm:w-32\">\n                  <Label\n                    htmlFor={companySizeId}\n                    className=\"text-primary-foreground mb-2 block font-mono text-[10px] font-normal tracking-[0.5px] uppercase\"\n                  >\n                    TEAM SIZE\n                  </Label>\n                  <Select name=\"team-size\">\n                    <SelectTrigger\n                      id={companySizeId}\n                      className={cn(formFieldClassName, \"h-10 py-2.5\")}\n                    >\n                      <SelectValue placeholder=\"Select\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"solo\">Solo</SelectItem>\n                      <SelectItem value=\"2-5\">2-5</SelectItem>\n                      <SelectItem value=\"6-20\">6-20</SelectItem>\n                      <SelectItem value=\"21-50\">21-50</SelectItem>\n                      <SelectItem value=\"50+\">50+</SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n              </div>\n\n              <div>\n                <Label\n                  htmlFor={messageId}\n                  className=\"text-primary-foreground mb-2 block font-mono text-[10px] font-normal tracking-[0.5px] uppercase\"\n                >\n                  WHAT ARE YOU MOST EXCITED ABOUT?\n                </Label>\n                <Textarea\n                  id={messageId}\n                  name=\"excited-about\"\n                  rows={3}\n                  placeholder=\"Tell us what features you're looking forward to...\"\n                  className={cn(formFieldClassName, \"resize-none py-3\")}\n                />\n              </div>\n\n              <Button\n                type=\"submit\"\n                className=\"bg-primary-foreground text-primary hover:bg-primary-foreground/90 h-10 w-full rounded-full px-8 py-2.5 font-medium tracking-[-0.03em] transition-colors\"\n              >\n                Join waitlist\n              </Button>\n            </form>\n          </div>\n        </div>\n      </ExpandableScreenContent>\n    </ExpandableScreen>\n  )\n}\n\nexport default ExpandableScreenDemo\n",
      "type": "registry:component"
    }
  ]
}