{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover-form-demo",
  "type": "registry:component",
  "registryDependencies": [
    "popover-form"
  ],
  "files": [
    {
      "path": "registry/default/example/popover-form-demo.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport { Mail, Monitor, Moon, Sun } from \"lucide-react\"\n\nimport {\n  PopoverForm,\n  PopoverFormButton,\n  PopoverFormCutOutLeftIcon,\n  PopoverFormCutOutRightIcon,\n  PopoverFormSeparator,\n  PopoverFormSuccess,\n} from \"@/registry/default/ui/popover-form\"\n\ntype FormState = \"idle\" | \"loading\" | \"success\"\n\nexport function NewsletterSignupExample() {\n  const [formState, setFormState] = useState<FormState>(\"idle\")\n  const [open, setOpen] = useState(false)\n  const [email, setEmail] = useState(\"\")\n\n  function submit() {\n    setFormState(\"loading\")\n    setTimeout(() => {\n      setFormState(\"success\")\n    }, 1500)\n\n    setTimeout(() => {\n      setOpen(false)\n      setFormState(\"idle\")\n      setEmail(\"\")\n    }, 3300)\n  }\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setOpen(false)\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [])\n\n  return (\n    <div className=\"flex w-full items-center justify-center\">\n      <PopoverForm\n        title=\"Newsletter Signup\"\n        open={open}\n        setOpen={setOpen}\n        width=\"320px\"\n        showCloseButton={formState !== \"success\"}\n        showSuccess={formState === \"success\"}\n        openChild={\n          <form\n            onSubmit={(e) => {\n              e.preventDefault()\n              if (!email) return\n              submit()\n            }}\n            className=\"p-4\"\n          >\n            <div className=\"mb-4 space-y-2\">\n              <label\n                htmlFor=\"email\"\n                className=\"text-muted-foreground mb-1 block text-sm font-medium\"\n              >\n                Email address\n              </label>\n              <div className=\"relative\">\n                <input\n                  type=\"email\"\n                  id=\"email\"\n                  name=\"email\"\n                  placeholder=\"you@example.com\"\n                  value={email}\n                  onChange={(e) => setEmail(e.target.value)}\n                  className=\"placeholder-muted-foreground focus:ring-primary focus:border-primary w-full rounded-md border px-3 py-2 shadow-sm focus:outline-none\"\n                  required\n                />\n                <div className=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3\">\n                  <Mail className=\"text-muted-foreground size-4\" />\n                </div>\n              </div>\n              <p className=\"text-muted-foreground text-xs tracking-tight\">\n                Sick content to your mailbox every week!\n              </p>\n            </div>\n            <PopoverFormButton\n              loading={formState === \"loading\"}\n              text=\"Subscribe\"\n            />\n          </form>\n        }\n        successChild={\n          <PopoverFormSuccess\n            title=\"Successfully subscribed!\"\n            description=\"Thank you for joining our newsletter.\"\n          />\n        }\n      />\n    </div>\n  )\n}\n\ntype Theme = \"light\" | \"dark\" | \"system\"\n\nexport function ColorThemeSwitcherExample() {\n  const [theme, setTheme] = useState<Theme>(\"system\")\n  const [systemTheme, setSystemTheme] = useState<\"light\" | \"dark\">(\"light\")\n  const [open, setOpen] = useState(false)\n  const themes: Theme[] = [\"light\", \"dark\", \"system\"]\n\n  useEffect(() => {\n    const systemPrefersDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    const updateSystemTheme = () => {\n      setSystemTheme(systemPrefersDark.matches ? \"dark\" : \"light\")\n    }\n\n    updateSystemTheme()\n    systemPrefersDark.addEventListener(\"change\", updateSystemTheme)\n\n    return () => {\n      systemPrefersDark.removeEventListener(\"change\", updateSystemTheme)\n    }\n  }, [])\n\n  useEffect(() => {\n    const root = window.document.documentElement\n    root.classList.remove(\"light\", \"dark\")\n    if (theme === \"system\") {\n      root.classList.add(systemTheme)\n    } else {\n      root.classList.add(theme)\n    }\n  }, [theme, systemTheme])\n\n  return (\n    <div className=\"flex w-full items-center justify-center\">\n      <PopoverForm\n        showSuccess={false}\n        title=\"Choose theme\"\n        open={open}\n        setOpen={setOpen}\n        width=\"200px\"\n        height=\"175px\"\n        showCloseButton={true}\n        openChild={\n          <div className=\"p-2\">\n            <h3 className=\"text-muted-foreground text-sm tracking-tight\">\n              Theme\n            </h3>\n\n            <div className=\"space-y-2 pt-2\">\n              {themes.map((t) => {\n                const isSelected = theme === t\n                const effectiveTheme = t === \"system\" ? systemTheme : t\n                return (\n                  <button\n                    key={t}\n                    onClick={() => setTheme(t)}\n                    className={`flex w-full items-center rounded-md px-3 py-2 text-sm ${\n                      isSelected\n                        ? `bg-primary ${\n                            effectiveTheme === \"light\"\n                              ? \"text-white\"\n                              : \"text-black\"\n                          }`\n                        : `hover:bg-gray-100 hover:text-black dark:text-white dark:hover:bg-gray-800 dark:hover:text-white`\n                    }`}\n                  >\n                    {t === \"light\" && <Sun className=\"mr-2 h-4 w-4\" />}\n                    {t === \"dark\" && <Moon className=\"mr-2 h-4 w-4\" />}\n                    {t === \"system\" && <Monitor className=\"mr-2 h-4 w-4\" />}\n                    <span className=\"capitalize\">{t}</span>\n                  </button>\n                )\n              })}\n            </div>\n          </div>\n        }\n      />\n    </div>\n  )\n}\n\nexport function FeedbackFormExample() {\n  const [formState, setFormState] = useState<FormState>(\"idle\")\n  const [open, setOpen] = useState(false)\n  const [feedback, setFeedback] = useState(\"\")\n\n  function submit() {\n    setFormState(\"loading\")\n    setTimeout(() => {\n      setFormState(\"success\")\n    }, 1500)\n\n    setTimeout(() => {\n      setOpen(false)\n      setFormState(\"idle\")\n      setFeedback(\"\")\n    }, 3300)\n  }\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setOpen(false)\n      }\n\n      if (\n        (event.ctrlKey || event.metaKey) &&\n        event.key === \"Enter\" &&\n        open &&\n        formState === \"idle\"\n      ) {\n        submit()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [open, formState])\n\n  return (\n    <div className=\"flex w-full items-center justify-center\">\n      <PopoverForm\n        title=\"Feedback\"\n        open={open}\n        setOpen={setOpen}\n        width=\"364px\"\n        height=\"192px\"\n        showCloseButton={formState !== \"success\"}\n        showSuccess={formState === \"success\"}\n        openChild={\n          <form\n            onSubmit={(e) => {\n              e.preventDefault()\n              if (!feedback) return\n              submit()\n            }}\n            className=\"\"\n          >\n            <div className=\"relative\">\n              <textarea\n                autoFocus\n                placeholder=\"Feedback\"\n                value={feedback}\n                onChange={(e) => setFeedback(e.target.value)}\n                className=\"h-32 w-full resize-none rounded-t-lg p-3 text-sm outline-none\"\n                required\n              />\n            </div>\n            <div className=\"relative flex h-12 items-center px-[10px]\">\n              <PopoverFormSeparator />\n              <div className=\"absolute top-0 left-0 -translate-x-[1.5px] -translate-y-1/2\">\n                <PopoverFormCutOutLeftIcon />\n              </div>\n              <div className=\"absolute top-0 right-0 translate-x-[1.5px] -translate-y-1/2 rotate-180\">\n                <PopoverFormCutOutRightIcon />\n              </div>\n              <PopoverFormButton\n                loading={formState === \"loading\"}\n                text=\"Submit\"\n              />\n            </div>\n          </form>\n        }\n        successChild={\n          <PopoverFormSuccess\n            title=\"Feedback Received\"\n            description=\"Thank you for supporting our project!\"\n          />\n        }\n      />\n    </div>\n  )\n}\n\nexport function ContactFormExample() {\n  const [formState, setFormState] = useState<FormState>(\"idle\")\n  const [open, setOpen] = useState(false)\n  const [name, setName] = useState(\"\")\n  const [email, setEmail] = useState(\"\")\n  const [message, setMessage] = useState(\"\")\n\n  function submit() {\n    setFormState(\"loading\")\n    setTimeout(() => {\n      setFormState(\"success\")\n    }, 1500)\n\n    setTimeout(() => {\n      setOpen(false)\n      setFormState(\"idle\")\n      setName(\"\")\n      setEmail(\"\")\n      setMessage(\"\")\n    }, 3300)\n  }\n\n  return (\n    <div className=\"flex w-full items-center justify-center\">\n      <PopoverForm\n        title=\"Click Here\"\n        open={open}\n        setOpen={setOpen}\n        width=\"364px\"\n        height=\"372px\"\n        showCloseButton={formState !== \"success\"}\n        showSuccess={formState === \"success\"}\n        openChild={\n          <form\n            onSubmit={(e) => {\n              e.preventDefault()\n              if (!name || !email || !message) return\n              submit()\n            }}\n            className=\"space-y-4\"\n          >\n            <div className=\"px-4 pt-4\">\n              <label\n                htmlFor=\"name\"\n                className=\"text-muted-foreground mb-1 block text-sm font-medium\"\n              >\n                Name\n              </label>\n              <input\n                type=\"text\"\n                id=\"name\"\n                value={name}\n                onChange={(e) => setName(e.target.value)}\n                className=\"focus:ring-primary focus:border-primary w-full rounded-md border bg-white px-3 py-2 shadow-sm focus:outline-none dark:bg-black\"\n                required\n              />\n            </div>\n            <div className=\"px-4\">\n              <label\n                htmlFor=\"email\"\n                className=\"text-muted-foreground mb-1 block text-sm font-medium\"\n              >\n                Email\n              </label>\n              <input\n                type=\"email\"\n                id=\"email\"\n                value={email}\n                onChange={(e) => setEmail(e.target.value)}\n                className=\"focus:ring-primary focus:border-primary w-full rounded-md border bg-white px-3 py-2 shadow-sm focus:outline-none dark:bg-black\"\n                required\n              />\n            </div>\n            <div className=\"px-4\">\n              <label\n                htmlFor=\"message\"\n                className=\"text-muted-foreground mb-1 block text-sm font-medium\"\n              >\n                Message\n              </label>\n              <textarea\n                id=\"message\"\n                value={message}\n                onChange={(e) => setMessage(e.target.value)}\n                className=\"focus:ring-primary focus:border-primary w-full rounded-md border bg-white px-3 py-2 shadow-sm focus:outline-none dark:bg-black\"\n                rows={3}\n                required\n              />\n            </div>\n            <div className=\"relative flex h-12 items-center px-[10px]\">\n              <PopoverFormSeparator />\n              <div className=\"absolute top-0 left-0 -translate-x-[1.5px] -translate-y-1/2\">\n                <PopoverFormCutOutLeftIcon />\n              </div>\n              <div className=\"absolute top-0 right-0 translate-x-[1.5px] -translate-y-1/2 rotate-180\">\n                <PopoverFormCutOutRightIcon />\n              </div>\n              <PopoverFormButton\n                loading={formState === \"loading\"}\n                text=\"Submit\"\n              />\n            </div>\n          </form>\n        }\n        successChild={\n          <PopoverFormSuccess\n            title=\"Message Sent\"\n            description=\"Thank you for contacting us. We'll get back to you soon!\"\n          />\n        }\n      />\n    </div>\n  )\n}\n\nexport default function PopoverFormExamples() {\n  return (\n    <div className=\"grid grid-cols-1 space-y-8\">\n      <FeedbackFormExample />\n      <ContactFormExample />\n      <NewsletterSignupExample />\n      <ColorThemeSwitcherExample />\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}