{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "expandable-screen",
  "type": "registry:block",
  "title": "Expandable screen",
  "description": "Expandable screen",
  "files": [
    {
      "path": "components/usages/expandablescreenusage.tsx",
      "content": "\"use client\";\n\nimport { useId } from \"react\";\n\nimport Image from \"next/image\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport {\n\tSelect,\n\tSelectContent,\n\tSelectItem,\n\tSelectTrigger,\n\tSelectValue,\n} from \"@/components/ui/select\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport {\n\tExpandableScreen,\n\tExpandableScreenContent,\n\tExpandableScreenTrigger,\n} from \"@/registry/open-source/expandable-screen\";\n\nfunction ExpandableScreenDemo() {\n\tconst nameId = useId();\n\tconst emailId = useId();\n\tconst websiteId = useId();\n\tconst companySizeId = useId();\n\tconst messageId = useId();\n\treturn (\n\t\t<ExpandableScreen\n\t\t\tlayoutId=\"cta-card\"\n\t\t\ttriggerRadius=\"100px\"\n\t\t\tcontentRadius=\"24px\"\n\t\t>\n\t\t\t<div className=\"relative flex min-h-screen flex-col items-center justify-center px-4 sm:px-6 py-12 sm:py-20\">\n\t\t\t\t<div className=\"relative z-10 flex flex-col items-center gap-4 sm:gap-6 text-center\">\n\t\t\t\t\t<h1 className=\"text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-normal leading-[90%] tracking-[-0.03em] text-foreground mix-blend-exclusion max-w-2xl\">\n\t\t\t\t\t\tJoin the waitlist\n\t\t\t\t\t</h1>\n\n\t\t\t\t\t<p className=\"text-base sm:text-lg md:text-xl leading-[160%] text-foreground max-w-2xl px-4\">\n\t\t\t\t\t\tBe among the first to experience our next-generation platform.\n\t\t\t\t\t\tGet early access to exclusive features and help shape the\n\t\t\t\t\t\tfuture of productivity.\n\t\t\t\t\t</p>\n\n\t\t\t\t\t<ExpandableScreenTrigger>\n\t\t\t\t\t\t<div className=\"bg-primary h-15 px-6 sm:px-8 py-3 text-lg sm:text-xl font-regular text-primary-foreground tracking-[-0.01em]\">\n\t\t\t\t\t\t\tGet early access\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ExpandableScreenTrigger>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<ExpandableScreenContent className=\"bg-primary\">\n\t\t\t\t<div className=\"relative z-10 flex flex-col lg:flex-row h-full w-full max-w-[1100px] mx-auto items-center p-6 sm:p-10 lg:p-16 gap-8 lg:gap-16\">\n\t\t\t\t\t<div className=\"flex-1 flex flex-col justify-center space-y-3 w-full\">\n\t\t\t\t\t\t<h2 className=\"text-3xl sm:text-4xl lg:text-5xl font-medium text-primary-foreground leading-none tracking-[-0.03em]\">\n\t\t\t\t\t\t\tReserve your spot\n\t\t\t\t\t\t</h2>\n\n\t\t\t\t\t\t<div className=\"space-y-4 sm:space-y-6 pt-4\">\n\t\t\t\t\t\t\t<div className=\"flex gap-3 sm:gap-4\">\n\t\t\t\t\t\t\t\t<div className=\"shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-lg bg-primary-foreground/10 flex items-center justify-center\">\n\t\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\t\tclassName=\"w-5 h-5 sm:w-6 sm:h-6 text-primary-foreground\"\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<title>Icon</title>\n\t\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t\t\t\tstrokeWidth={2}\n\t\t\t\t\t\t\t\t\t\t\td=\"M5 13l4 4L19 7\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<p className=\"text-sm sm:text-base text-primary-foreground leading-[150%]\">\n\t\t\t\t\t\t\t\t\t\tGet priority access to new features and updates\n\t\t\t\t\t\t\t\t\t\tbefore public release.\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"flex gap-3 sm:gap-4\">\n\t\t\t\t\t\t\t\t<div className=\"shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-lg bg-primary-foreground/10 flex items-center justify-center\">\n\t\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\t\tclassName=\"w-5 h-5 sm:w-6 sm:h-6 text-primary-foreground\"\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<title>Icon</title>\n\t\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t\t\t\tstrokeWidth={2}\n\t\t\t\t\t\t\t\t\t\t\td=\"M13 10V3L4 14h7v7l9-11h-7z\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<p className=\"text-sm sm:text-base text-primary-foreground leading-[150%]\">\n\t\t\t\t\t\t\t\t\t\tJoin a community of early adopters and help\n\t\t\t\t\t\t\t\t\t\tinfluence our product roadmap.\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div className=\"pt-6 sm:pt-8 mt-6 sm:mt-8 border-t border-primary-foreground/20\">\n\t\t\t\t\t\t\t<p className=\"text-lg sm:text-xl lg:text-2xl text-primary-foreground leading-[150%] mb-4\">\n\t\t\t\t\t\t\t\tThe waitlist has been a game-changer for our workflow.\n\t\t\t\t\t\t\t\tHighly recommend joining early.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<div className=\"flex items-center gap-3 sm:gap-4\">\n\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\tsrc=\"/placeholder.svg?height=48&width=48\"\n\t\t\t\t\t\t\t\t\talt=\"Alex Rivera\"\n\t\t\t\t\t\t\t\t\twidth={48}\n\t\t\t\t\t\t\t\t\theight={48}\n\t\t\t\t\t\t\t\t\tclassName=\"w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<p className=\"text-base sm:text-lg lg:text-xl text-primary-foreground\">\n\t\t\t\t\t\t\t\t\t\tAlex Rivera\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t<p className=\"text-sm sm:text-base text-primary-foreground/70\">\n\t\t\t\t\t\t\t\t\t\tEarly Access Member\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"flex-1 w-full\">\n\t\t\t\t\t\t<form className=\"space-y-4 sm:space-y-5\">\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<Label\n\t\t\t\t\t\t\t\t\thtmlFor={nameId}\n\t\t\t\t\t\t\t\t\tclassName=\"block text-[10px] font-mono font-normal text-primary-foreground mb-2 tracking-[0.5px] uppercase\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tFULL NAME *\n\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\tid={nameId}\n\t\t\t\t\t\t\t\t\tname=\"name\"\n\t\t\t\t\t\t\t\t\tclassName=\"w-full px-4 py-2.5 rounded-lg bg-card border-0 text-primary-foreground placeholder:text-primary-foreground/50 focus:outline-hidden focus:ring-2 focus:ring-primary-foreground/20 transition-all text-sm h-10\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<Label\n\t\t\t\t\t\t\t\t\thtmlFor={emailId}\n\t\t\t\t\t\t\t\t\tclassName=\"block text-[10px] font-mono font-normal text-primary-foreground mb-2 tracking-[0.5px] uppercase\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tEMAIL *\n\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\ttype=\"email\"\n\t\t\t\t\t\t\t\t\tid={emailId}\n\t\t\t\t\t\t\t\t\tname=\"email\"\n\t\t\t\t\t\t\t\t\tclassName=\"w-full px-4 py-2.5 rounded-lg bg-card border-0 text-primary-foreground placeholder:text-primary-foreground/50 focus:outline-hidden focus:ring-2 focus:ring-primary-foreground/20 transition-all text-sm h-10\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<div className=\"flex flex-col sm:flex-row gap-4\">\n\t\t\t\t\t\t\t\t<div className=\"flex-1\">\n\t\t\t\t\t\t\t\t\t<Label\n\t\t\t\t\t\t\t\t\t\thtmlFor={websiteId}\n\t\t\t\t\t\t\t\t\t\tclassName=\"block text-[10px] font-mono font-normal text-primary-foreground mb-2 tracking-[0.5px] uppercase\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tUSE CASE\n\t\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\tid={websiteId}\n\t\t\t\t\t\t\t\t\t\tname=\"use-case\"\n\t\t\t\t\t\t\t\t\t\tplaceholder=\"e.g., Project management, Team collaboration\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"w-full px-4 py-2.5 rounded-lg bg-card border-0 text-primary-foreground placeholder:text-primary-foreground/50 focus:outline-hidden focus:ring-2 focus:ring-primary-foreground/20 transition-all resize-none text-sm h-10\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"sm:w-32 w-full\">\n\t\t\t\t\t\t\t\t\t<Label\n\t\t\t\t\t\t\t\t\t\thtmlFor={companySizeId}\n\t\t\t\t\t\t\t\t\t\tclassName=\"block text-[10px] font-mono font-normal text-primary-foreground mb-2 tracking-[0.5px] uppercase\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tTEAM SIZE\n\t\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t\t<Select name=\"team-size\">\n\t\t\t\t\t\t\t\t\t\t<SelectTrigger\n\t\t\t\t\t\t\t\t\t\t\tid={companySizeId}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"w-full px-4 py-2.5 rounded-lg bg-card border-0 text-primary-foreground focus:outline-hidden focus:ring-2 focus:ring-primary-foreground/20 transition-all text-sm h-10\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<SelectValue placeholder=\"Select\" />\n\t\t\t\t\t\t\t\t\t\t</SelectTrigger>\n\t\t\t\t\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"solo\">Solo</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"2-5\">2-5</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"6-20\">6-20</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"21-50\">21-50</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"50+\">50+</SelectItem>\n\t\t\t\t\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<Label\n\t\t\t\t\t\t\t\t\thtmlFor={messageId}\n\t\t\t\t\t\t\t\t\tclassName=\"block text-[10px] font-mono font-normal text-primary-foreground mb-2 tracking-[0.5px] uppercase\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tWHAT ARE YOU MOST EXCITED ABOUT?\n\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t<Textarea\n\t\t\t\t\t\t\t\t\tid={messageId}\n\t\t\t\t\t\t\t\t\tname=\"excited-about\"\n\t\t\t\t\t\t\t\t\trows={3}\n\t\t\t\t\t\t\t\t\tplaceholder=\"Tell us what features you're looking forward to...\"\n\t\t\t\t\t\t\t\t\tclassName=\"w-full px-4 py-3 rounded-lg bg-card border-0 text-primary-foreground placeholder:text-primary-foreground/50 focus:outline-hidden focus:ring-2 focus:ring-primary-foreground/20 transition-all resize-none text-sm\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\tclassName=\"w-full px-8 py-2.5 rounded-full bg-primary-foreground text-primary font-medium hover:bg-primary-foreground/90 transition-colors tracking-[-0.03em] h-10\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tJoin waitlist\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</form>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ExpandableScreenContent>\n\t\t</ExpandableScreen>\n\t);\n}\n\nexport default ExpandableScreenDemo;\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/expandablescreenusage.tsx",
      "content": "\"use client\";\n\nimport { useId } from \"react\";\n\nimport Image from \"next/image\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport {\n\tSelect,\n\tSelectContent,\n\tSelectItem,\n\tSelectTrigger,\n\tSelectValue,\n} from \"@/components/ui/select\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport {\n\tExpandableScreen,\n\tExpandableScreenContent,\n\tExpandableScreenTrigger,\n} from \"@/registry/open-source/expandable-screen\";\n\nfunction ExpandableScreenDemo() {\n\tconst nameId = useId();\n\tconst emailId = useId();\n\tconst websiteId = useId();\n\tconst companySizeId = useId();\n\tconst messageId = useId();\n\treturn (\n\t\t<ExpandableScreen\n\t\t\tlayoutId=\"cta-card\"\n\t\t\ttriggerRadius=\"100px\"\n\t\t\tcontentRadius=\"24px\"\n\t\t>\n\t\t\t<div className=\"relative flex min-h-screen flex-col items-center justify-center px-4 sm:px-6 py-12 sm:py-20\">\n\t\t\t\t<div className=\"relative z-10 flex flex-col items-center gap-4 sm:gap-6 text-center\">\n\t\t\t\t\t<h1 className=\"text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-normal leading-[90%] tracking-[-0.03em] text-foreground mix-blend-exclusion max-w-2xl\">\n\t\t\t\t\t\tJoin the waitlist\n\t\t\t\t\t</h1>\n\n\t\t\t\t\t<p className=\"text-base sm:text-lg md:text-xl leading-[160%] text-foreground max-w-2xl px-4\">\n\t\t\t\t\t\tBe among the first to experience our next-generation platform.\n\t\t\t\t\t\tGet early access to exclusive features and help shape the\n\t\t\t\t\t\tfuture of productivity.\n\t\t\t\t\t</p>\n\n\t\t\t\t\t<ExpandableScreenTrigger>\n\t\t\t\t\t\t<div className=\"bg-primary h-15 px-6 sm:px-8 py-3 text-lg sm:text-xl font-regular text-primary-foreground tracking-[-0.01em]\">\n\t\t\t\t\t\t\tGet early access\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ExpandableScreenTrigger>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<ExpandableScreenContent className=\"bg-primary\">\n\t\t\t\t<div className=\"relative z-10 flex flex-col lg:flex-row h-full w-full max-w-[1100px] mx-auto items-center p-6 sm:p-10 lg:p-16 gap-8 lg:gap-16\">\n\t\t\t\t\t<div className=\"flex-1 flex flex-col justify-center space-y-3 w-full\">\n\t\t\t\t\t\t<h2 className=\"text-3xl sm:text-4xl lg:text-5xl font-medium text-primary-foreground leading-none tracking-[-0.03em]\">\n\t\t\t\t\t\t\tReserve your spot\n\t\t\t\t\t\t</h2>\n\n\t\t\t\t\t\t<div className=\"space-y-4 sm:space-y-6 pt-4\">\n\t\t\t\t\t\t\t<div className=\"flex gap-3 sm:gap-4\">\n\t\t\t\t\t\t\t\t<div className=\"shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-lg bg-primary-foreground/10 flex items-center justify-center\">\n\t\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\t\tclassName=\"w-5 h-5 sm:w-6 sm:h-6 text-primary-foreground\"\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<title>Icon</title>\n\t\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t\t\t\tstrokeWidth={2}\n\t\t\t\t\t\t\t\t\t\t\td=\"M5 13l4 4L19 7\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<p className=\"text-sm sm:text-base text-primary-foreground leading-[150%]\">\n\t\t\t\t\t\t\t\t\t\tGet priority access to new features and updates\n\t\t\t\t\t\t\t\t\t\tbefore public release.\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"flex gap-3 sm:gap-4\">\n\t\t\t\t\t\t\t\t<div className=\"shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-lg bg-primary-foreground/10 flex items-center justify-center\">\n\t\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\t\tclassName=\"w-5 h-5 sm:w-6 sm:h-6 text-primary-foreground\"\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<title>Icon</title>\n\t\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t\t\t\tstrokeWidth={2}\n\t\t\t\t\t\t\t\t\t\t\td=\"M13 10V3L4 14h7v7l9-11h-7z\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<p className=\"text-sm sm:text-base text-primary-foreground leading-[150%]\">\n\t\t\t\t\t\t\t\t\t\tJoin a community of early adopters and help\n\t\t\t\t\t\t\t\t\t\tinfluence our product roadmap.\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div className=\"pt-6 sm:pt-8 mt-6 sm:mt-8 border-t border-primary-foreground/20\">\n\t\t\t\t\t\t\t<p className=\"text-lg sm:text-xl lg:text-2xl text-primary-foreground leading-[150%] mb-4\">\n\t\t\t\t\t\t\t\tThe waitlist has been a game-changer for our workflow.\n\t\t\t\t\t\t\t\tHighly recommend joining early.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<div className=\"flex items-center gap-3 sm:gap-4\">\n\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\tsrc=\"/placeholder.svg?height=48&width=48\"\n\t\t\t\t\t\t\t\t\talt=\"Alex Rivera\"\n\t\t\t\t\t\t\t\t\twidth={48}\n\t\t\t\t\t\t\t\t\theight={48}\n\t\t\t\t\t\t\t\t\tclassName=\"w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<p className=\"text-base sm:text-lg lg:text-xl text-primary-foreground\">\n\t\t\t\t\t\t\t\t\t\tAlex Rivera\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t<p className=\"text-sm sm:text-base text-primary-foreground/70\">\n\t\t\t\t\t\t\t\t\t\tEarly Access Member\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"flex-1 w-full\">\n\t\t\t\t\t\t<form className=\"space-y-4 sm:space-y-5\">\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<Label\n\t\t\t\t\t\t\t\t\thtmlFor={nameId}\n\t\t\t\t\t\t\t\t\tclassName=\"block text-[10px] font-mono font-normal text-primary-foreground mb-2 tracking-[0.5px] uppercase\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tFULL NAME *\n\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\tid={nameId}\n\t\t\t\t\t\t\t\t\tname=\"name\"\n\t\t\t\t\t\t\t\t\tclassName=\"w-full px-4 py-2.5 rounded-lg bg-card border-0 text-primary-foreground placeholder:text-primary-foreground/50 focus:outline-hidden focus:ring-2 focus:ring-primary-foreground/20 transition-all text-sm h-10\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<Label\n\t\t\t\t\t\t\t\t\thtmlFor={emailId}\n\t\t\t\t\t\t\t\t\tclassName=\"block text-[10px] font-mono font-normal text-primary-foreground mb-2 tracking-[0.5px] uppercase\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tEMAIL *\n\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\ttype=\"email\"\n\t\t\t\t\t\t\t\t\tid={emailId}\n\t\t\t\t\t\t\t\t\tname=\"email\"\n\t\t\t\t\t\t\t\t\tclassName=\"w-full px-4 py-2.5 rounded-lg bg-card border-0 text-primary-foreground placeholder:text-primary-foreground/50 focus:outline-hidden focus:ring-2 focus:ring-primary-foreground/20 transition-all text-sm h-10\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<div className=\"flex flex-col sm:flex-row gap-4\">\n\t\t\t\t\t\t\t\t<div className=\"flex-1\">\n\t\t\t\t\t\t\t\t\t<Label\n\t\t\t\t\t\t\t\t\t\thtmlFor={websiteId}\n\t\t\t\t\t\t\t\t\t\tclassName=\"block text-[10px] font-mono font-normal text-primary-foreground mb-2 tracking-[0.5px] uppercase\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tUSE CASE\n\t\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\tid={websiteId}\n\t\t\t\t\t\t\t\t\t\tname=\"use-case\"\n\t\t\t\t\t\t\t\t\t\tplaceholder=\"e.g., Project management, Team collaboration\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"w-full px-4 py-2.5 rounded-lg bg-card border-0 text-primary-foreground placeholder:text-primary-foreground/50 focus:outline-hidden focus:ring-2 focus:ring-primary-foreground/20 transition-all resize-none text-sm h-10\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"sm:w-32 w-full\">\n\t\t\t\t\t\t\t\t\t<Label\n\t\t\t\t\t\t\t\t\t\thtmlFor={companySizeId}\n\t\t\t\t\t\t\t\t\t\tclassName=\"block text-[10px] font-mono font-normal text-primary-foreground mb-2 tracking-[0.5px] uppercase\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tTEAM SIZE\n\t\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t\t<Select name=\"team-size\">\n\t\t\t\t\t\t\t\t\t\t<SelectTrigger\n\t\t\t\t\t\t\t\t\t\t\tid={companySizeId}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"w-full px-4 py-2.5 rounded-lg bg-card border-0 text-primary-foreground focus:outline-hidden focus:ring-2 focus:ring-primary-foreground/20 transition-all text-sm h-10\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<SelectValue placeholder=\"Select\" />\n\t\t\t\t\t\t\t\t\t\t</SelectTrigger>\n\t\t\t\t\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"solo\">Solo</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"2-5\">2-5</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"6-20\">6-20</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"21-50\">21-50</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"50+\">50+</SelectItem>\n\t\t\t\t\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<Label\n\t\t\t\t\t\t\t\t\thtmlFor={messageId}\n\t\t\t\t\t\t\t\t\tclassName=\"block text-[10px] font-mono font-normal text-primary-foreground mb-2 tracking-[0.5px] uppercase\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tWHAT ARE YOU MOST EXCITED ABOUT?\n\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t<Textarea\n\t\t\t\t\t\t\t\t\tid={messageId}\n\t\t\t\t\t\t\t\t\tname=\"excited-about\"\n\t\t\t\t\t\t\t\t\trows={3}\n\t\t\t\t\t\t\t\t\tplaceholder=\"Tell us what features you're looking forward to...\"\n\t\t\t\t\t\t\t\t\tclassName=\"w-full px-4 py-3 rounded-lg bg-card border-0 text-primary-foreground placeholder:text-primary-foreground/50 focus:outline-hidden focus:ring-2 focus:ring-primary-foreground/20 transition-all resize-none text-sm\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\tclassName=\"w-full px-8 py-2.5 rounded-full bg-primary-foreground text-primary font-medium hover:bg-primary-foreground/90 transition-colors tracking-[-0.03em] h-10\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tJoin waitlist\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</form>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ExpandableScreenContent>\n\t\t</ExpandableScreen>\n\t);\n}\n\nexport default ExpandableScreenDemo;\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/button.tsx",
      "content": "import * as React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nconst buttonVariants = cva(\r\n\t\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm text-white hover:text-gray-400 font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\r\n\t{\r\n\t\tvariants: {\r\n\t\t\tvariant: {\r\n\t\t\t\tsimple:\r\n\t\t\t\t\t\"bg-secondary relative z-10 bg-transparent hover:border-secondary hover:bg-secondary/50  border border-transparent dark:text-white text-sm md:text-sm transition font-medium duration-200  rounded-md px-4 py-2  flex items-center justify-center\",\r\n\t\t\t\tdefault: \"bg-primary text-primary-foreground hover:bg-primary/90\",\r\n\t\t\t\tdestructive:\r\n\t\t\t\t\t\"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\r\n\t\t\t\toutline:\r\n\t\t\t\t\t\"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\r\n\t\t\t\tsecondary:\r\n\t\t\t\t\t\"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n\t\t\t\tghost: \"hover:bg-accent hover:text-black hover:stroke-black dark:text-white text-black\",\r\n\t\t\t\tlink: \"text-primary underline-offset-4 hover:underline\",\r\n\t\t\t},\r\n\t\t\tsize: {\r\n\t\t\t\tdefault: \"h-10 px-4 py-2\",\r\n\t\t\t\tsm: \"h-9 rounded-md px-3\",\r\n\t\t\t\tlg: \"h-11 rounded-md px-8\",\r\n\t\t\t\ticon: \"h-10 w-10\",\r\n\t\t\t},\r\n\t\t},\r\n\t\tdefaultVariants: {\r\n\t\t\tvariant: \"default\",\r\n\t\t\tsize: \"default\",\r\n\t\t},\r\n\t}\r\n);\r\n\r\nexport interface ButtonProps\r\n\textends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n\t\tVariantProps<typeof buttonVariants> {\r\n\tasChild?: boolean;\r\n}\r\n\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n\t({ className, variant, size, asChild = false, ...props }, ref) => {\r\n\t\tconst Comp = asChild ? Slot : \"button\";\r\n\t\treturn (\r\n\t\t\t<Comp\r\n\t\t\t\tclassName={cn(buttonVariants({ variant, size, className }))}\r\n\t\t\t\tref={ref}\r\n\t\t\t\t{...props}\r\n\t\t\t/>\r\n\t\t);\r\n\t}\r\n);\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button, buttonVariants };\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/input.tsx",
      "content": "// SHADCN UI GENERATED CODE\n\nimport React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\n\nexport interface InputProps\n\textends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n\t({ className, type, ...props }, ref) => {\n\t\treturn (\n\t\t\t<input\n\t\t\t\ttype={type}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t}\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/label.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nconst labelVariants = cva(\n\t\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n);\n\nconst Label = React.forwardRef<\n\tReact.ElementRef<typeof LabelPrimitive.Root>,\n\tReact.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n\t\tVariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n\t<LabelPrimitive.Root\n\t\tref={ref}\n\t\tclassName={cn(labelVariants(), className)}\n\t\t{...props}\n\t/>\n));\nLabel.displayName = LabelPrimitive.Root.displayName;\n\nexport { Label };\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/textarea.tsx",
      "content": "// SHADCN UI GENERATED CODE\n\nimport React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\n\nexport interface TextareaProps\n\textends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<textarea\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t}\n);\nTextarea.displayName = \"Textarea\";\n\nexport { Textarea };\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/expandable-screen.tsx",
      "content": "\"use client\";\n\nimport {\n\tcreateContext,\n\tuseContext,\n\tuseEffect,\n\tuseState,\n\ttype ReactNode,\n} from \"react\";\n\nimport { X } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\n\n// Credit:\n// https://www.cult-ui.com/docs/components/expandable-screen\n\n// Context\ninterface ExpandableScreenContextValue {\n\tisExpanded: boolean;\n\texpand: () => void;\n\tcollapse: () => void;\n\tlayoutId: string;\n\ttriggerRadius: string;\n\tcontentRadius: string;\n\tanimationDuration: number;\n}\n\nconst ExpandableScreenContext =\n\tcreateContext<ExpandableScreenContextValue | null>(null);\n\nfunction useExpandableScreen() {\n\tconst context = useContext(ExpandableScreenContext);\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"useExpandableScreen must be used within an ExpandableScreen\"\n\t\t);\n\t}\n\treturn context;\n}\n\n// Root Component\ninterface ExpandableScreenProps {\n\tchildren: ReactNode;\n\tdefaultExpanded?: boolean;\n\tonExpandChange?: (expanded: boolean) => void;\n\tlayoutId?: string;\n\ttriggerRadius?: string;\n\tcontentRadius?: string;\n\tanimationDuration?: number;\n\tlockScroll?: boolean;\n}\n\nexport function ExpandableScreen({\n\tchildren,\n\tdefaultExpanded = false,\n\tonExpandChange,\n\tlayoutId = \"expandable-card\",\n\ttriggerRadius = \"100px\",\n\tcontentRadius = \"24px\",\n\tanimationDuration = 0.3,\n\tlockScroll = true,\n}: ExpandableScreenProps) {\n\tconst [isExpanded, setIsExpanded] = useState(defaultExpanded);\n\n\tconst expand = () => {\n\t\tsetIsExpanded(true);\n\t\tonExpandChange?.(true);\n\t};\n\n\tconst collapse = () => {\n\t\tsetIsExpanded(false);\n\t\tonExpandChange?.(false);\n\t};\n\n\tuseEffect(() => {\n\t\tif (lockScroll) {\n\t\t\tif (isExpanded) {\n\t\t\t\tdocument.body.style.overflow = \"hidden\";\n\t\t\t} else {\n\t\t\t\tdocument.body.style.overflow = \"unset\";\n\t\t\t}\n\t\t}\n\t}, [isExpanded, lockScroll]);\n\n\treturn (\n\t\t<ExpandableScreenContext.Provider\n\t\t\tvalue={{\n\t\t\t\tisExpanded,\n\t\t\t\texpand,\n\t\t\t\tcollapse,\n\t\t\t\tlayoutId,\n\t\t\t\ttriggerRadius,\n\t\t\t\tcontentRadius,\n\t\t\t\tanimationDuration,\n\t\t\t}}\n\t\t>\n\t\t\t{children}\n\t\t</ExpandableScreenContext.Provider>\n\t);\n}\n\n// Trigger Component\ninterface ExpandableScreenTriggerProps {\n\tchildren: ReactNode;\n\tclassName?: string;\n}\n\nexport function ExpandableScreenTrigger({\n\tchildren,\n\tclassName = \"\",\n}: ExpandableScreenTriggerProps) {\n\tconst { isExpanded, expand, layoutId, triggerRadius } =\n\t\tuseExpandableScreen();\n\n\treturn (\n\t\t<AnimatePresence initial={false}>\n\t\t\t{!isExpanded && (\n\t\t\t\t<motion.div className={`inline-block relative ${className}`}>\n\t\t\t\t\t{/* Background layer with shared layoutId for morphing */}\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tborderRadius: triggerRadius,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tlayout\n\t\t\t\t\t\tlayoutId={layoutId}\n\t\t\t\t\t\tclassName=\"absolute inset-0 transform-gpu will-change-transform\"\n\t\t\t\t\t/>\n\t\t\t\t\t{/* Content layer that fades out on expand */}\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tinitial={{ opacity: 0, scale: 0.8 }}\n\t\t\t\t\t\tanimate={{ opacity: 1, scale: 1 }}\n\t\t\t\t\t\ttransition={{ delay: 0.2 }}\n\t\t\t\t\t\texit={{ opacity: 0, scale: 0.8 }}\n\t\t\t\t\t\tlayout={false}\n\t\t\t\t\t\tonClick={expand}\n\t\t\t\t\t\tclassName=\"relative cursor-pointer\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</motion.div>\n\t\t\t\t</motion.div>\n\t\t\t)}\n\t\t</AnimatePresence>\n\t);\n}\n\n// Content Component\ninterface ExpandableScreenContentProps {\n\tchildren: ReactNode;\n\tclassName?: string;\n\tshowCloseButton?: boolean;\n\tcloseButtonClassName?: string;\n}\n\nexport function ExpandableScreenContent({\n\tchildren,\n\tclassName = \"\",\n\tshowCloseButton = true,\n\tcloseButtonClassName = \"\",\n}: ExpandableScreenContentProps) {\n\tconst { isExpanded, collapse, layoutId, contentRadius, animationDuration } =\n\t\tuseExpandableScreen();\n\n\treturn (\n\t\t<AnimatePresence initial={false}>\n\t\t\t{isExpanded && (\n\t\t\t\t<div className=\"fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-2\">\n\t\t\t\t\t{/* Morphing background with shared layoutId */}\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tlayoutId={layoutId}\n\t\t\t\t\t\ttransition={{ duration: animationDuration }}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tborderRadius: contentRadius,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tlayout\n\t\t\t\t\t\tclassName={`relative flex h-full w-full overflow-y-auto transform-gpu will-change-transform ${className}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\t\ttransition={{ delay: 0.15, duration: 0.4 }}\n\t\t\t\t\t\t\tclassName=\"relative z-20 w-full\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</motion.div>\n\n\t\t\t\t\t\t{showCloseButton && (\n\t\t\t\t\t\t\t<motion.button\n\t\t\t\t\t\t\t\tonClick={collapse}\n\t\t\t\t\t\t\t\tclassName={`absolute right-6 top-6 z-30 flex h-10 w-10 items-center justify-center transition-colors rounded-full ${\n\t\t\t\t\t\t\t\t\tcloseButtonClassName ||\n\t\t\t\t\t\t\t\t\t\"text-white bg-transparent hover:bg-white/10\"\n\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\taria-label=\"Close\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<X className=\"h-5 w-5\" />\n\t\t\t\t\t\t\t</motion.button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</motion.div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</AnimatePresence>\n\t);\n}\n\n// Background Component (optional)\ninterface ExpandableScreenBackgroundProps {\n\ttrigger?: ReactNode;\n\tcontent?: ReactNode;\n\tclassName?: string;\n}\n\nexport function ExpandableScreenBackground({\n\ttrigger,\n\tcontent,\n\tclassName = \"\",\n}: ExpandableScreenBackgroundProps) {\n\tconst { isExpanded } = useExpandableScreen();\n\n\tif (isExpanded && content) {\n\t\treturn <div className={className}>{content}</div>;\n\t}\n\n\tif (!isExpanded && trigger) {\n\t\treturn <div className={className}>{trigger}</div>;\n\t}\n\n\treturn null;\n}\n\nexport { useExpandableScreen };\n",
      "type": "registry:ui"
    }
  ]
}