{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet-6",
  "type": "registry:component",
  "title": "Sheet 6",
  "description": "Sheet 6. A panel that slides in from the edge of the screen to display additional content, forms, or actions without navigating away.",
  "dependencies": [
    "react-icons",
    "sonner"
  ],
  "registryDependencies": [
    "alert",
    "button",
    "input",
    "sheet"
  ],
  "files": [
    {
      "path": "components/watermelon/sheet-6.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport {\n  FaUser,\n  FaEnvelope,\n  FaPhone,\n  FaLock,\n  FaCheckCircle,\n} from 'react-icons/fa';\n\nimport { toast } from 'sonner';\n\nimport { Alert, AlertTitle } from '@/components/base-ui/alert';\nimport { Button } from '@/components/base-ui/button';\nimport { Input } from '@/components/base-ui/input';\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/components/base-ui/sheet';\n\nconst Sheet6 = () => {\n  const [form, setForm] = useState({\n    firstName: '',\n    lastName: '',\n    email: '',\n    mobileNumber: '',\n    password: '',\n  });\n\n  const handleChange = (key: string, value: string) => {\n    setForm((prev) => ({\n      ...prev,\n      [key]: value,\n    }));\n  };\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n\n    if (\n      !form.firstName ||\n      !form.lastName ||\n      !form.email ||\n      !form.mobileNumber ||\n      !form.password\n    ) {\n      toast.error('Please fill all fields');\n      return;\n    }\n\n    toast.custom(() => (\n      <Alert className=\"border-primary text-primary\">\n        <FaCheckCircle className=\"shrink-0\" />\n        <AlertTitle>Account created 🚀</AlertTitle>\n      </Alert>\n    ));\n  };\n\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"outline\">Get Started</Button>\n      </SheetTrigger>\n\n      <SheetContent>\n        <SheetHeader>\n          <SheetTitle className=\"text-center text-xl font-semibold\">\n            Create your account\n          </SheetTitle>\n        </SheetHeader>\n\n        <form onSubmit={handleSubmit} className=\"flex h-full w-full flex-col\">\n          <div className=\"flex-1 space-y-4 p-4 pt-0\">\n            <div className=\"flex flex-col gap-2\">\n              <label className=\"flex items-center gap-2 text-sm\">\n                <FaUser className=\"text-muted-foreground size-3 shrink-0\" />\n                First Name\n              </label>\n              <Input\n                placeholder=\"John\"\n                className=\"rounded-sm\"\n                value={form.firstName}\n                onChange={(e) => handleChange('firstName', e.target.value)}\n              />\n            </div>\n\n            <div className=\"flex flex-col gap-2\">\n              <label className=\"flex items-center gap-2 text-sm\">\n                <FaUser className=\"text-muted-foreground size-3 shrink-0\" />\n                Last Name\n              </label>\n              <Input\n                placeholder=\"Doe\"\n                value={form.lastName}\n                className=\"rounded-sm\"\n                onChange={(e) => handleChange('lastName', e.target.value)}\n              />\n            </div>\n\n            <div className=\"flex flex-col gap-2\">\n              <label className=\"flex items-center gap-2 text-sm\">\n                <FaEnvelope className=\"text-muted-foreground size-3 shrink-0\" />\n                Email\n              </label>\n              <Input\n                placeholder=\"you@example.com\"\n                value={form.email}\n                className=\"rounded-sm\"\n                onChange={(e) => handleChange('email', e.target.value)}\n              />\n            </div>\n\n            <div className=\"flex flex-col gap-2\">\n              <label className=\"flex items-center gap-2 text-sm\">\n                <FaPhone className=\"text-muted-foreground size-3 shrink-0\" />\n                Phone\n              </label>\n              <Input\n                type=\"tel\"\n                placeholder=\"9876543210\"\n                value={form.mobileNumber}\n                className=\"rounded-sm\"\n                onChange={(e) =>\n                  handleChange(\n                    'mobileNumber',\n                    e.target.value.replace(/[^\\d]/g, '').slice(0, 10),\n                  )\n                }\n              />\n            </div>\n\n            <div className=\"flex flex-col gap-2\">\n              <label className=\"flex items-center gap-2 text-sm\">\n                <FaLock className=\"text-muted-foreground size-3 shrink-0\" />\n                Password\n              </label>\n              <Input\n                type=\"password\"\n                placeholder=\"••••••••\"\n                value={form.password}\n                className=\"rounded-sm\"\n                onChange={(e) => handleChange('password', e.target.value)}\n              />\n            </div>\n          </div>\n\n          <SheetFooter className=\"\">\n            <Button type=\"submit\">Create Account</Button>\n\n            <SheetClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </SheetClose>\n          </SheetFooter>\n        </form>\n      </SheetContent>\n    </Sheet>\n  );\n};\n\nexport default Sheet6;\n"
    }
  ]
}