love-ui 1.2.12 → 1.2.14

package/public/r/comp-316.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-316",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dialog.json",
+    "https://loveui.dev/building-blocks/r/scroll-area.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-316.tsx",
+      "content": "import { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/building-blocks/default/ui/dialog\"\nimport { ScrollArea } from \"@/registry/building-blocks/default/ui/scroll-area\"\n\nexport default function Component() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Scrollable (custom scrollbar)</Button>\n      </DialogTrigger>\n      <DialogContent className=\"flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:hidden\">\n        <ScrollArea className=\"flex max-h-full flex-col overflow-hidden\">\n          <DialogHeader className=\"contents space-y-0 text-left\">\n            <DialogTitle className=\"px-6 pt-6\">\n              Frequently Asked Questions (FAQ)\n            </DialogTitle>\n            <DialogDescription asChild>\n              <div className=\"p-6\">\n                <div className=\"space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground\">\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Account Management</strong>\n                    </p>\n                    <p>\n                      Navigate to the registration page, provide required\n                      information, and verify your email address. You can sign\n                      up using your email or through social media platforms.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Password Reset Process</strong>\n                    </p>\n                    <p>\n                      Users can reset their password through the account\n                      settings page. Click &quot;Forgot Password&quot; and\n                      follow the email verification steps to regain account\n                      access quickly and securely.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Service Pricing Tiers</strong>\n                    </p>\n                    <p>\n                      We offer three primary subscription levels designed to\n                      meet diverse user needs: Basic (free with limited\n                      features), Professional (monthly fee with comprehensive\n                      access), and Enterprise (custom pricing with full platform\n                      capabilities).\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Technical Support Channels</strong>\n                    </p>\n                    <p>\n                      Customer support is accessible through multiple\n                      communication methods including email support, live chat\n                      during business hours, an integrated support ticket\n                      system, and phone support specifically for\n                      enterprise-level customers.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Data Protection Strategies</strong>\n                    </p>\n                    <p>\n                      Our platform implements rigorous security measures\n                      including 256-bit SSL encryption, regular comprehensive\n                      security audits, strict data access controls, and\n                      compliance with international privacy protection\n                      standards.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Platform Compatibility</strong>\n                    </p>\n                    <p>\n                      The service supports multiple device and operating system\n                      environments, including web browsers like Chrome and\n                      Firefox, mobile applications for iOS and Android, and\n                      desktop applications compatible with Windows and macOS.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Subscription Management</strong>\n                    </p>\n                    <p>\n                      Subscriptions can be cancelled at any time through account\n                      settings, with pro-rated refunds available within 30 days\n                      of payment. Both monthly and annual billing options are\n                      provided, with special discounts offered for annual\n                      commitments.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Payment Method Options</strong>\n                    </p>\n                    <p>\n                      We accept a wide range of payment methods including major\n                      credit cards such as Visa, MasterCard, and American\n                      Express, digital payment platforms like PayPal, and direct\n                      bank transfers. Regional payment options may also be\n                      available depending on user location.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Customer Support</strong>\n                    </p>\n                    <p>\n                      Our dedicated customer support team is available 24/7,\n                      providing quick and efficient assistance to address any\n                      inquiries or issues you may have.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Privacy Policy</strong>\n                    </p>\n                    <p>\n                      Our privacy policy outlines how we collect, use, and\n                      protect your personal data, ensuring your privacy is\n                      protected at all times.\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter className=\"px-6 pb-6 sm:justify-start\">\n            <DialogClose asChild>\n              <Button type=\"button\" variant=\"outline\">\n                Cancel\n              </Button>\n            </DialogClose>\n            <DialogClose asChild>\n              <Button type=\"button\">Okay</Button>\n            </DialogClose>\n          </DialogFooter>\n        </ScrollArea>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "dialog",
+      "modal",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-317.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-317",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dialog.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-317.tsx",
+      "content": "import { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/building-blocks/default/ui/dialog\"\n\nexport default function Component() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Scrollable (sticky header)</Button>\n      </DialogTrigger>\n      <DialogContent className=\"flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:top-3.5\">\n        <DialogHeader className=\"contents space-y-0 text-left\">\n          <DialogTitle className=\"border-b px-6 py-4 text-base\">\n            Frequently Asked Questions (FAQ)\n          </DialogTitle>\n          <div className=\"overflow-y-auto\">\n            <DialogDescription asChild>\n              <div className=\"px-6 py-4\">\n                <div className=\"space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground\">\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Account Management</strong>\n                    </p>\n                    <p>\n                      Navigate to the registration page, provide required\n                      information, and verify your email address. You can sign\n                      up using your email or through social media platforms.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Password Reset Process</strong>\n                    </p>\n                    <p>\n                      Users can reset their password through the account\n                      settings page. Click &quot;Forgot Password&quot; and\n                      follow the email verification steps to regain account\n                      access quickly and securely.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Service Pricing Tiers</strong>\n                    </p>\n                    <p>\n                      We offer three primary subscription levels designed to\n                      meet diverse user needs: Basic (free with limited\n                      features), Professional (monthly fee with comprehensive\n                      access), and Enterprise (custom pricing with full platform\n                      capabilities).\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Technical Support Channels</strong>\n                    </p>\n                    <p>\n                      Customer support is accessible through multiple\n                      communication methods including email support, live chat\n                      during business hours, an integrated support ticket\n                      system, and phone support specifically for\n                      enterprise-level customers.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Data Protection Strategies</strong>\n                    </p>\n                    <p>\n                      Our platform implements rigorous security measures\n                      including 256-bit SSL encryption, regular comprehensive\n                      security audits, strict data access controls, and\n                      compliance with international privacy protection\n                      standards.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Platform Compatibility</strong>\n                    </p>\n                    <p>\n                      The service supports multiple device and operating system\n                      environments, including web browsers like Chrome and\n                      Firefox, mobile applications for iOS and Android, and\n                      desktop applications compatible with Windows and macOS.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Subscription Management</strong>\n                    </p>\n                    <p>\n                      Subscriptions can be cancelled at any time through account\n                      settings, with pro-rated refunds available within 30 days\n                      of payment. Both monthly and annual billing options are\n                      provided, with special discounts offered for annual\n                      commitments.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Payment Method Options</strong>\n                    </p>\n                    <p>\n                      We accept a wide range of payment methods including major\n                      credit cards such as Visa, MasterCard, and American\n                      Express, digital payment platforms like PayPal, and direct\n                      bank transfers. Regional payment options may also be\n                      available depending on user location.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Customer Support</strong>\n                    </p>\n                    <p>\n                      Our dedicated customer support team is available 24/7,\n                      providing quick and efficient assistance to address any\n                      inquiries or issues you may have.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Privacy Policy</strong>\n                    </p>\n                    <p>\n                      Our privacy policy outlines how we collect, use, and\n                      protect your personal data, ensuring your privacy is\n                      protected at all times.\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </DialogDescription>\n            <DialogFooter className=\"px-6 pb-6 sm:justify-start\">\n              <DialogClose asChild>\n                <Button type=\"button\">Okay</Button>\n              </DialogClose>\n            </DialogFooter>\n          </div>\n        </DialogHeader>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "dialog",
+      "modal",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-318.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-318",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dialog.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-318.tsx",
+      "content": "import { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/building-blocks/default/ui/dialog\"\n\nexport default function Component() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Scrollable (sticky footer)</Button>\n      </DialogTrigger>\n      <DialogContent className=\"flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:hidden\">\n        <div className=\"overflow-y-auto\">\n          <DialogHeader className=\"contents space-y-0 text-left\">\n            <DialogTitle className=\"px-6 pt-6 text-base\">\n              Frequently Asked Questions (FAQ)\n            </DialogTitle>\n            <DialogDescription asChild>\n              <div className=\"p-6\">\n                <div className=\"space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground\">\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Account Management</strong>\n                    </p>\n                    <p>\n                      Navigate to the registration page, provide required\n                      information, and verify your email address. You can sign\n                      up using your email or through social media platforms.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Password Reset Process</strong>\n                    </p>\n                    <p>\n                      Users can reset their password through the account\n                      settings page. Click &quot;Forgot Password&quot; and\n                      follow the email verification steps to regain account\n                      access quickly and securely.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Service Pricing Tiers</strong>\n                    </p>\n                    <p>\n                      We offer three primary subscription levels designed to\n                      meet diverse user needs: Basic (free with limited\n                      features), Professional (monthly fee with comprehensive\n                      access), and Enterprise (custom pricing with full platform\n                      capabilities).\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Technical Support Channels</strong>\n                    </p>\n                    <p>\n                      Customer support is accessible through multiple\n                      communication methods including email support, live chat\n                      during business hours, an integrated support ticket\n                      system, and phone support specifically for\n                      enterprise-level customers.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Data Protection Strategies</strong>\n                    </p>\n                    <p>\n                      Our platform implements rigorous security measures\n                      including 256-bit SSL encryption, regular comprehensive\n                      security audits, strict data access controls, and\n                      compliance with international privacy protection\n                      standards.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Platform Compatibility</strong>\n                    </p>\n                    <p>\n                      The service supports multiple device and operating system\n                      environments, including web browsers like Chrome and\n                      Firefox, mobile applications for iOS and Android, and\n                      desktop applications compatible with Windows and macOS.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Subscription Management</strong>\n                    </p>\n                    <p>\n                      Subscriptions can be cancelled at any time through account\n                      settings, with pro-rated refunds available within 30 days\n                      of payment. Both monthly and annual billing options are\n                      provided, with special discounts offered for annual\n                      commitments.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Payment Method Options</strong>\n                    </p>\n                    <p>\n                      We accept a wide range of payment methods including major\n                      credit cards such as Visa, MasterCard, and American\n                      Express, digital payment platforms like PayPal, and direct\n                      bank transfers. Regional payment options may also be\n                      available depending on user location.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Customer Support</strong>\n                    </p>\n                    <p>\n                      Our dedicated customer support team is available 24/7,\n                      providing quick and efficient assistance to address any\n                      inquiries or issues you may have.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Privacy Policy</strong>\n                    </p>\n                    <p>\n                      Our privacy policy outlines how we collect, use, and\n                      protect your personal data, ensuring your privacy is\n                      protected at all times.\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n        <DialogFooter className=\"border-t px-6 py-4\">\n          <DialogClose asChild>\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n          </DialogClose>\n          <DialogClose asChild>\n            <Button type=\"button\">Okay</Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "dialog",
+      "modal",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-319.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-319",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dialog.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-319.tsx",
+      "content": "\"use client\"\n\nimport { useRef, useState } from \"react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/building-blocks/default/ui/dialog\"\n\nexport default function Component() {\n  const [hasReadToBottom, setHasReadToBottom] = useState(false)\n  const contentRef = useRef<HTMLDivElement>(null)\n\n  const handleScroll = () => {\n    const content = contentRef.current\n    if (!content) return\n\n    const scrollPercentage =\n      content.scrollTop / (content.scrollHeight - content.clientHeight)\n    if (scrollPercentage >= 0.99 && !hasReadToBottom) {\n      setHasReadToBottom(true)\n    }\n  }\n\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Terms & Conditions</Button>\n      </DialogTrigger>\n      <DialogContent className=\"flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:top-3.5\">\n        <DialogHeader className=\"contents space-y-0 text-left\">\n          <DialogTitle className=\"border-b px-6 py-4 text-base\">\n            Terms & Conditions\n          </DialogTitle>\n          <div\n            ref={contentRef}\n            onScroll={handleScroll}\n            className=\"overflow-y-auto\"\n          >\n            <DialogDescription asChild>\n              <div className=\"px-6 py-4\">\n                <div className=\"space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground\">\n                  <div className=\"space-y-4\">\n                    <div className=\"space-y-1\">\n                      <p>\n                        <strong>Acceptance of Terms</strong>\n                      </p>\n                      <p>\n                        By accessing and using this website, users agree to\n                        comply with and be bound by these Terms of Service.\n                        Users who do not agree with these terms should\n                        discontinue use of the website immediately.\n                      </p>\n                    </div>\n\n                    <div className=\"space-y-1\">\n                      <p>\n                        <strong>User Account Responsibilities</strong>\n                      </p>\n                      <p>\n                        Users are responsible for maintaining the\n                        confidentiality of their account credentials. Any\n                        activities occurring under a user&lsquo;s account are\n                        the sole responsibility of the account holder. Users\n                        must notify the website administrators immediately of\n                        any unauthorized account access.\n                      </p>\n                    </div>\n\n                    <div className=\"space-y-1\">\n                      <p>\n                        <strong>Content Usage and Restrictions</strong>\n                      </p>\n                      <p>\n                        The website and its original content are protected by\n                        intellectual property laws. Users may not reproduce,\n                        distribute, modify, create derivative works, or\n                        commercially exploit any content without explicit\n                        written permission from the website owners.\n                      </p>\n                    </div>\n\n                    <div className=\"space-y-1\">\n                      <p>\n                        <strong>Limitation of Liability</strong>\n                      </p>\n                      <p>\n                        The website provides content &ldquo;as is&ldquo; without\n                        any warranties. The website owners shall not be liable\n                        for direct, indirect, incidental, consequential, or\n                        punitive damages arising from user interactions with the\n                        platform.\n                      </p>\n                    </div>\n\n                    <div className=\"space-y-1\">\n                      <p>\n                        <strong>User Conduct Guidelines</strong>\n                      </p>\n                      <ul className=\"list-disc pl-6\">\n                        <li>Not upload harmful or malicious content</li>\n                        <li>Respect the rights of other users</li>\n                        <li>\n                          Avoid activities that could disrupt website\n                          functionality\n                        </li>\n                        <li>\n                          Comply with applicable local and international laws\n                        </li>\n                      </ul>\n                    </div>\n\n                    <div className=\"space-y-1\">\n                      <p>\n                        <strong>Modifications to Terms</strong>\n                      </p>\n                      <p>\n                        The website reserves the right to modify these terms at\n                        any time. Continued use of the website after changes\n                        constitutes acceptance of the new terms.\n                      </p>\n                    </div>\n\n                    <div className=\"space-y-1\">\n                      <p>\n                        <strong>Termination Clause</strong>\n                      </p>\n                      <p>\n                        The website may terminate or suspend user access without\n                        prior notice for violations of these terms or for any\n                        other reason deemed appropriate by the administration.\n                      </p>\n                    </div>\n\n                    <div className=\"space-y-1\">\n                      <p>\n                        <strong>Governing Law</strong>\n                      </p>\n                      <p>\n                        These terms are governed by the laws of the jurisdiction\n                        where the website is primarily operated, without regard\n                        to conflict of law principles.\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </DialogDescription>\n          </div>\n        </DialogHeader>\n        <DialogFooter className=\"border-t px-6 py-4 sm:items-center\">\n          {!hasReadToBottom && (\n            <span className=\"grow text-xs text-muted-foreground max-sm:text-center\">\n              Read all terms before accepting.\n            </span>\n          )}\n          <DialogClose asChild>\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n          </DialogClose>\n          <DialogClose asChild>\n            <Button type=\"button\" disabled={!hasReadToBottom}>\n              I agree\n            </Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "dialog",
+      "modal",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-32.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-32",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/input.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-32.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"group relative\">\n      <label\n        htmlFor={id}\n        className=\"origin-start absolute top-1/2 block -translate-y-1/2 cursor-text px-1 text-sm text-muted-foreground/70 transition-all group-focus-within:pointer-events-none group-focus-within:top-0 group-focus-within:cursor-default group-focus-within:text-xs group-focus-within:font-medium group-focus-within:text-foreground has-[+input:not(:placeholder-shown)]:pointer-events-none has-[+input:not(:placeholder-shown)]:top-0 has-[+input:not(:placeholder-shown)]:cursor-default has-[+input:not(:placeholder-shown)]:text-xs has-[+input:not(:placeholder-shown)]:font-medium has-[+input:not(:placeholder-shown)]:text-foreground\"\n      >\n        <span className=\"inline-flex bg-background px-2\">\n          Input with label animation\n        </span>\n      </label>\n      <Input id={id} type=\"email\" placeholder=\" \" />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label"
+    ]
+  }
+}

package/public/r/comp-320.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-320",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dialog.json",
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-320.tsx",
+      "content": "\"use client\"\n\nimport { useId, useState } from \"react\"\nimport { CircleAlertIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/building-blocks/default/ui/dialog\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nconst PROJECT_NAME = \"loveui\"\n\nexport default function Component() {\n  const id = useId()\n  const [inputValue, setInputValue] = useState(\"\")\n\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Delete project</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <div className=\"flex flex-col items-center gap-2\">\n          <div\n            className=\"flex size-9 shrink-0 items-center justify-center rounded-full border\"\n            aria-hidden=\"true\"\n          >\n            <CircleAlertIcon className=\"opacity-80\" size={16} />\n          </div>\n          <DialogHeader>\n            <DialogTitle className=\"sm:text-center\">\n              Final confirmation\n            </DialogTitle>\n            <DialogDescription className=\"sm:text-center\">\n              This action cannot be undone. To confirm, please enter the project\n              name <span className=\"text-foreground\">loveui</span>.\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        <form className=\"space-y-5\">\n          <div className=\"*:not-first:mt-2\">\n            <Label htmlFor={id}>Project name</Label>\n            <Input\n              id={id}\n              type=\"text\"\n              placeholder=\"Type loveui to confirm\"\n              value={inputValue}\n              onChange={(e) => setInputValue(e.target.value)}\n            />\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button type=\"button\" variant=\"outline\" className=\"flex-1\">\n                Cancel\n              </Button>\n            </DialogClose>\n            <Button\n              type=\"button\"\n              className=\"flex-1\"\n              disabled={inputValue !== PROJECT_NAME}\n            >\n              Delete\n            </Button>\n          </DialogFooter>\n        </form>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "dialog",
+      "modal",
+      "delete",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-321.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-321",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dialog.json",
+    "https://loveui.dev/building-blocks/r/input.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-321.tsx",
+      "content": "import { MailIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/building-blocks/default/ui/dialog\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\n\nexport default function Component() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Newsletter</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <div className=\"mb-2 flex flex-col items-center gap-2\">\n          <div\n            className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\"\n            aria-hidden=\"true\"\n          >\n            <svg\n              className=\"stroke-zinc-800 dark:stroke-zinc-100\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 32 32\"\n              aria-hidden=\"true\"\n            >\n              <circle cx=\"16\" cy=\"16\" r=\"12\" fill=\"none\" strokeWidth=\"8\" />\n            </svg>\n          </div>\n          <DialogHeader>\n            <DialogTitle className=\"sm:text-center\">\n              Never miss an update\n            </DialogTitle>\n            <DialogDescription className=\"sm:text-center\">\n              Subscribe to receive news and special offers.\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        <form className=\"space-y-5\">\n          <div className=\"*:not-first:mt-2\">\n            <div className=\"relative\">\n              <Input\n                id=\"dialog-subscribe\"\n                className=\"peer ps-9\"\n                placeholder=\"hi@yourcompany.com\"\n                type=\"email\"\n                aria-label=\"Email\"\n              />\n              <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n                <MailIcon size={16} aria-hidden=\"true\" />\n              </div>\n            </div>\n          </div>\n          <Button type=\"button\" className=\"w-full\">\n            Subscribe\n          </Button>\n        </form>\n\n        <p className=\"text-center text-xs text-muted-foreground\">\n          By subscribing you agree to our{\" \"}\n          <a className=\"underline hover:no-underline\" href=\"#\">\n            Privacy Policy\n          </a>\n          .\n        </p>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "dialog",
+      "modal",
+      "newsletter",
+      "subscribe",
+      "form",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-322.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-322",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dialog.json",
+    "https://loveui.dev/building-blocks/r/textarea.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-322.tsx",
+      "content": "import { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/building-blocks/default/ui/dialog\"\nimport { Textarea } from \"@/registry/building-blocks/default/ui/textarea\"\n\nexport default function Component() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Feedback</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Send us feedback</DialogTitle>\n          <DialogDescription>\n            Watch{\" \"}\n            <a className=\"text-foreground hover:underline\" href=\"#\">\n              tutorials\n            </a>\n            , read loveui&lsquo;s{\" \"}\n            <a className=\"text-foreground hover:underline\" href=\"#\">\n              documentation\n            </a>\n            , or join our{\" \"}\n            <a className=\"text-foreground hover:underline\" href=\"#\">\n              Discord\n            </a>{\" \"}\n            for community help.\n          </DialogDescription>\n        </DialogHeader>\n        <form className=\"space-y-5\">\n          <Textarea\n            id=\"feedback\"\n            placeholder=\"How can we improve loveui?\"\n            aria-label=\"Send feedback\"\n          />\n          <div className=\"flex flex-col sm:flex-row sm:justify-end\">\n            <Button type=\"button\">Send feedback</Button>\n          </div>\n        </form>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "dialog",
+      "modal",
+      "feedback",
+      "form",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-323.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-323",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dialog.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/radio-group.json",
+    "https://loveui.dev/building-blocks/r/textarea.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-323.tsx",
+      "content": "import { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/building-blocks/default/ui/dialog\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/building-blocks/default/ui/radio-group\"\nimport { Textarea } from \"@/registry/building-blocks/default/ui/textarea\"\n\nexport default function Component() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Rating</Button>\n      </DialogTrigger>\n      <DialogContent className=\"flex flex-col gap-0 p-0 [&>button:last-child]:top-3.5\">\n        <DialogHeader className=\"contents space-y-0 text-left\">\n          <DialogTitle className=\"border-b px-6 py-4 text-base\">\n            Help us improve\n          </DialogTitle>\n        </DialogHeader>\n        <div className=\"px-6 py-4\">\n          <form className=\"space-y-5\">\n            <div className=\"space-y-4\">\n              <div>\n                <fieldset className=\"space-y-4\">\n                  <legend className=\"text-lg leading-none font-semibold text-foreground\">\n                    How hard was it to set up your account?\n                  </legend>\n                  <RadioGroup className=\"flex gap-0 -space-x-px rounded-md shadow-xs\">\n                    {[0, 1, 2, 3, 4, 5, 6, 7, 8].map((number) => (\n                      <label\n                        key={number}\n                        className=\"relative flex size-9 flex-1 cursor-pointer flex-col items-center justify-center gap-3 border border-input text-center text-sm transition-[color,box-shadow] outline-none first:rounded-s-md last:rounded-e-md has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50 has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50 has-data-[state=checked]:z-10 has-data-[state=checked]:border-primary/50\"\n                      >\n                        <RadioGroupItem\n                          id={`radio-17-r${number}`}\n                          value={number.toString()}\n                          className=\"sr-only after:absolute after:inset-0\"\n                        />\n                        {number}\n                      </label>\n                    ))}\n                  </RadioGroup>\n                </fieldset>\n                <div className=\"mt-2 flex justify-between text-xs text-muted-foreground\">\n                  <p>Very easy</p>\n                  <p>Very dificult</p>\n                </div>\n              </div>\n\n              <div className=\"*:not-first:mt-2\">\n                <Label>Why did you give this rating?</Label>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"How can we improve loveui?\"\n                  aria-label=\"Send feedback\"\n                />\n              </div>\n            </div>\n            <Button type=\"button\" className=\"w-full\">\n              Send feedback\n            </Button>\n          </form>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "dialog",
+      "modal",
+      "rating",
+      "feedback",
+      "form",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-324.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-324",
+  "type": "registry:component",
+  "dependencies": [
+    "input-otp"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dialog.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-324.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { OTPInput, SlotProps } from \"input-otp\"\n\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/building-blocks/default/ui/dialog\"\n\nconst CORRECT_CODE = \"6548\"\n\nexport default function Component() {\n  const [value, setValue] = useState(\"\")\n  const [hasGuessed, setHasGuessed] = useState<undefined | boolean>(undefined)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const closeButtonRef = useRef<HTMLButtonElement>(null)\n\n  useEffect(() => {\n    if (hasGuessed) {\n      closeButtonRef.current?.focus()\n    }\n  }, [hasGuessed])\n\n  async function onSubmit(e?: React.FormEvent<HTMLFormElement>) {\n    e?.preventDefault?.()\n\n    inputRef.current?.select()\n    await new Promise((r) => setTimeout(r, 1_00))\n\n    setHasGuessed(value === CORRECT_CODE)\n\n    setValue(\"\")\n    setTimeout(() => {\n      inputRef.current?.blur()\n    }, 20)\n  }\n\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">OTP code</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <div className=\"flex flex-col items-center gap-2\">\n          <div\n            className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\"\n            aria-hidden=\"true\"\n          >\n            <svg\n              className=\"stroke-zinc-800 dark:stroke-zinc-100\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 32 32\"\n              aria-hidden=\"true\"\n            >\n              <circle cx=\"16\" cy=\"16\" r=\"12\" fill=\"none\" strokeWidth=\"8\" />\n            </svg>\n          </div>\n          <DialogHeader>\n            <DialogTitle className=\"sm:text-center\">\n              {hasGuessed ? \"Code verified!\" : \"Enter confirmation code\"}\n            </DialogTitle>\n            <DialogDescription className=\"sm:text-center\">\n              {hasGuessed\n                ? \"Your code has been successfully verified.\"\n                : `Check your email and enter the code - Try ${CORRECT_CODE}`}\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        {hasGuessed ? (\n          <div className=\"text-center\">\n            <DialogClose asChild>\n              <Button type=\"button\" ref={closeButtonRef}>\n                Close\n              </Button>\n            </DialogClose>\n          </div>\n        ) : (\n          <div className=\"space-y-4\">\n            <div className=\"flex justify-center\">\n              <OTPInput\n                id=\"cofirmation-code\"\n                ref={inputRef}\n                value={value}\n                onChange={setValue}\n                containerClassName=\"flex items-center gap-3 has-disabled:opacity-50\"\n                maxLength={4}\n                onFocus={() => setHasGuessed(undefined)}\n                render={({ slots }) => (\n                  <div className=\"flex gap-2\">\n                    {slots.map((slot, idx) => (\n                      <Slot key={idx} {...slot} />\n                    ))}\n                  </div>\n                )}\n                onComplete={onSubmit}\n              />\n            </div>\n            {hasGuessed === false && (\n              <p\n                className=\"text-center text-xs text-muted-foreground\"\n                role=\"alert\"\n                aria-live=\"polite\"\n              >\n                Invalid code. Please try again.\n              </p>\n            )}\n            <p className=\"text-center text-sm\">\n              <a className=\"underline hover:no-underline\" href=\"#\">\n                Resend code\n              </a>\n            </p>\n          </div>\n        )}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction Slot(props: SlotProps) {\n  return (\n    <div\n      className={cn(\n        \"flex size-9 items-center justify-center rounded-md border border-input bg-background font-medium text-foreground shadow-xs transition-[color,box-shadow]\",\n        { \"z-10 border-ring ring-[3px] ring-ring/50\": props.isActive }\n      )}\n    >\n      {props.char !== null && <div>{props.char}</div>}\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "dialog",
+      "modal",
+      "otp",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-325.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-325",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dialog.json",
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-325.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/building-blocks/default/ui/dialog\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Sign up</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <div className=\"flex flex-col items-center gap-2\">\n          <div\n            className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\"\n            aria-hidden=\"true\"\n          >\n            <svg\n              className=\"stroke-zinc-800 dark:stroke-zinc-100\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 32 32\"\n              aria-hidden=\"true\"\n            >\n              <circle cx=\"16\" cy=\"16\" r=\"12\" fill=\"none\" strokeWidth=\"8\" />\n            </svg>\n          </div>\n          <DialogHeader>\n            <DialogTitle className=\"sm:text-center\">\n              Sign up loveui\n            </DialogTitle>\n            <DialogDescription className=\"sm:text-center\">\n              We just need a few details to get you started.\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        <form className=\"space-y-5\">\n          <div className=\"space-y-4\">\n            <div className=\"*:not-first:mt-2\">\n              <Label htmlFor={`${id}-name`}>Full name</Label>\n              <Input\n                id={`${id}-name`}\n                placeholder=\"Connor Love\"\n                type=\"text\"\n                required\n              />\n            </div>\n            <div className=\"*:not-first:mt-2\">\n              <Label htmlFor={`${id}-email`}>Email</Label>\n              <Input\n                id={`${id}-email`}\n                placeholder=\"hi@yourcompany.com\"\n                type=\"email\"\n                required\n              />\n            </div>\n            <div className=\"*:not-first:mt-2\">\n              <Label htmlFor={`${id}-password`}>Password</Label>\n              <Input\n                id={`${id}-password`}\n                placeholder=\"Enter your password\"\n                type=\"password\"\n                required\n              />\n            </div>\n          </div>\n          <Button type=\"button\" className=\"w-full\">\n            Sign up\n          </Button>\n        </form>\n\n        <div className=\"flex items-center gap-3 before:h-px before:flex-1 before:bg-border after:h-px after:flex-1 after:bg-border\">\n          <span className=\"text-xs text-muted-foreground\">Or</span>\n        </div>\n\n        <Button variant=\"outline\">Continue with Google</Button>\n\n        <p className=\"text-center text-xs text-muted-foreground\">\n          By signing up you agree to our{\" \"}\n          <a className=\"underline hover:no-underline\" href=\"#\">\n            Terms\n          </a>\n          .\n        </p>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "dialog",
+      "modal",
+      "signup",
+      "authentication",
+      "form",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-326.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-326",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/checkbox.json",
+    "https://loveui.dev/building-blocks/r/dialog.json",
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-326.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Checkbox } from \"@/registry/building-blocks/default/ui/checkbox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/building-blocks/default/ui/dialog\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Sign in</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <div className=\"flex flex-col items-center gap-2\">\n          <div\n            className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\"\n            aria-hidden=\"true\"\n          >\n            <svg\n              className=\"stroke-zinc-800 dark:stroke-zinc-100\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 32 32\"\n              aria-hidden=\"true\"\n            >\n              <circle cx=\"16\" cy=\"16\" r=\"12\" fill=\"none\" strokeWidth=\"8\" />\n            </svg>\n          </div>\n          <DialogHeader>\n            <DialogTitle className=\"sm:text-center\">Welcome back</DialogTitle>\n            <DialogDescription className=\"sm:text-center\">\n              Enter your credentials to login to your account.\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        <form className=\"space-y-5\">\n          <div className=\"space-y-4\">\n            <div className=\"*:not-first:mt-2\">\n              <Label htmlFor={`${id}-email`}>Email</Label>\n              <Input\n                id={`${id}-email`}\n                placeholder=\"hi@yourcompany.com\"\n                type=\"email\"\n                required\n              />\n            </div>\n            <div className=\"*:not-first:mt-2\">\n              <Label htmlFor={`${id}-password`}>Password</Label>\n              <Input\n                id={`${id}-password`}\n                placeholder=\"Enter your password\"\n                type=\"password\"\n                required\n              />\n            </div>\n          </div>\n          <div className=\"flex justify-between gap-2\">\n            <div className=\"flex items-center gap-2\">\n              <Checkbox id={`${id}-remember`} />\n              <Label\n                htmlFor={`${id}-remember`}\n                className=\"font-normal text-muted-foreground\"\n              >\n                Remember me\n              </Label>\n            </div>\n            <a className=\"text-sm underline hover:no-underline\" href=\"#\">\n              Forgot password?\n            </a>\n          </div>\n          <Button type=\"button\" className=\"w-full\">\n            Sign in\n          </Button>\n        </form>\n\n        <div className=\"flex items-center gap-3 before:h-px before:flex-1 before:bg-border after:h-px after:flex-1 after:bg-border\">\n          <span className=\"text-xs text-muted-foreground\">Or</span>\n        </div>\n\n        <Button variant=\"outline\">Login with Google</Button>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "dialog",
+      "modal",
+      "login",
+      "authentication",
+      "form",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-327.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-327",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dialog.json",
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/tooltip.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-327.tsx",
+      "content": "\"use client\"\n\nimport { useId, useRef, useState } from \"react\"\nimport { CheckIcon, CopyIcon, UserRoundPlusIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/building-blocks/default/ui/dialog\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/building-blocks/default/ui/tooltip\"\n\nexport default function Component() {\n  const id = useId()\n  const [emails, setEmails] = useState([\n    \"tyler@example.com\",\n    \"owen@example.com\",\n    \"\",\n  ])\n  const [copied, setCopied] = useState<boolean>(false)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const lastInputRef = useRef<HTMLInputElement>(null)\n\n  const addEmail = () => {\n    setEmails([...emails, \"\"])\n  }\n\n  const handleEmailChange = (index: number, value: string) => {\n    const newEmails = [...emails]\n    newEmails[index] = value\n    setEmails(newEmails)\n  }\n\n  const handleCopy = () => {\n    if (inputRef.current) {\n      navigator.clipboard.writeText(inputRef.current.value)\n      setCopied(true)\n      setTimeout(() => setCopied(false), 1500)\n    }\n  }\n\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Invite members</Button>\n      </DialogTrigger>\n      <DialogContent\n        onOpenAutoFocus={(e) => {\n          e.preventDefault()\n          lastInputRef.current?.focus()\n        }}\n      >\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\"\n            aria-hidden=\"true\"\n          >\n            <UserRoundPlusIcon className=\"opacity-80\" size={16} />\n          </div>\n          <DialogHeader>\n            <DialogTitle className=\"text-left\">Invite team members</DialogTitle>\n            <DialogDescription className=\"text-left\">\n              Invite teammates to earn free components.\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        <form className=\"space-y-5\">\n          <div className=\"space-y-4\">\n            <div className=\"*:not-first:mt-2\">\n              <Label>Invite via email</Label>\n              <div className=\"space-y-3\">\n                {emails.map((email, index) => (\n                  <Input\n                    key={index}\n                    id={`team-email-${index + 1}`}\n                    placeholder=\"hi@yourcompany.com\"\n                    type=\"email\"\n                    value={email}\n                    onChange={(e) => handleEmailChange(index, e.target.value)}\n                    ref={index === emails.length - 1 ? lastInputRef : undefined}\n                  />\n                ))}\n              </div>\n            </div>\n            <button\n              type=\"button\"\n              onClick={addEmail}\n              className=\"text-sm underline hover:no-underline\"\n            >\n              + Add another\n            </button>\n          </div>\n          <Button type=\"button\" className=\"w-full\">\n            Send invites\n          </Button>\n        </form>\n\n        <hr className=\"my-1 border-t\" />\n\n        <div className=\"*:not-first:mt-2\">\n          <Label htmlFor={id}>Invite via magic link</Label>\n          <div className=\"relative\">\n            <Input\n              ref={inputRef}\n              id={id}\n              className=\"pe-9\"\n              type=\"text\"\n              defaultValue=\"https://loveui.dev/ui/refer/87689\"\n              readOnly\n            />\n            <TooltipProvider delayDuration={0}>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <button\n                    onClick={handleCopy}\n                    className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 transition-[color,box-shadow] outline-none hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed\"\n                    aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n                    disabled={copied}\n                  >\n                    <div\n                      className={cn(\n                        \"transition-all\",\n                        copied ? \"scale-100 opacity-100\" : \"scale-0 opacity-0\"\n                      )}\n                    >\n                      <CheckIcon\n                        className=\"stroke-emerald-500\"\n                        size={16}\n                        aria-hidden=\"true\"\n                      />\n                    </div>\n                    <div\n                      className={cn(\n                        \"absolute transition-all\",\n                        copied ? \"scale-0 opacity-0\" : \"scale-100 opacity-100\"\n                      )}\n                    >\n                      <CopyIcon size={16} aria-hidden=\"true\" />\n                    </div>\n                  </button>\n                </TooltipTrigger>\n                <TooltipContent className=\"px-2 py-1 text-xs\">\n                  Copy to clipboard\n                </TooltipContent>\n              </Tooltip>\n            </TooltipProvider>\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "dialog",
+      "modal",
+      "form",
+      "user",
+      "team",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-328.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-328",
+  "type": "registry:component",
+  "dependencies": [
+    "react-payment-inputs"
+  ],
+  "devDependencies": [
+    "@types/react-payment-inputs"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/checkbox.json",
+    "https://loveui.dev/building-blocks/r/dialog.json",
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-328.tsx",
+      "content": "\"use client\"\n\nimport { useId } from \"react\"\nimport { CreditCardIcon, WalletIcon } from \"lucide-react\"\nimport { usePaymentInputs } from \"react-payment-inputs\"\nimport images, { type CardImages } from \"react-payment-inputs/images\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Checkbox } from \"@/registry/building-blocks/default/ui/checkbox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/building-blocks/default/ui/dialog\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  const {\n    meta,\n    getCardNumberProps,\n    getExpiryDateProps,\n    getCVCProps,\n    getCardImageProps,\n  } = usePaymentInputs()\n\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Card details</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\"\n            aria-hidden=\"true\"\n          >\n            <WalletIcon className=\"opacity-80\" size={16} />\n          </div>\n          <DialogHeader>\n            <DialogTitle className=\"text-left\">Update your card</DialogTitle>\n            <DialogDescription className=\"text-left\">\n              Your new card will replace your current card.\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        <form className=\"space-y-5\">\n          <div className=\"space-y-4\">\n            <div className=\"*:not-first:mt-2\">\n              <Label htmlFor={`name-${id}`}>Name on card</Label>\n              <Input id={`name-${id}`} type=\"text\" required />\n            </div>\n            <div className=\"*:not-first:mt-2\">\n              <Label htmlFor={`number-${id}`}>Card Number</Label>\n              <div className=\"relative\">\n                <Input\n                  {...getCardNumberProps()}\n                  id={`number-${id}`}\n                  className=\"peer pe-9 [direction:inherit]\"\n                />\n                <div className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n                  {meta.cardType ? (\n                    <svg\n                      className=\"overflow-hidden rounded-sm\"\n                      {...getCardImageProps({\n                        images: images as unknown as CardImages,\n                      })}\n                      width={20}\n                    />\n                  ) : (\n                    <CreditCardIcon size={16} aria-hidden=\"true\" />\n                  )}\n                </div>\n              </div>\n            </div>\n            <div className=\"flex gap-4\">\n              <div className=\"flex-1 space-y-2\">\n                <Label htmlFor={`expiry-${id}`}>Expiry date</Label>\n                <Input\n                  className=\"[direction:inherit]\"\n                  {...getExpiryDateProps()}\n                  id={`expiry-${id}`}\n                />\n              </div>\n              <div className=\"flex-1 space-y-2\">\n                <Label htmlFor={`cvc-${id}`}>CVC</Label>\n                <Input\n                  className=\"[direction:inherit]\"\n                  {...getCVCProps()}\n                  id={`cvc-${id}`}\n                />\n              </div>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <Checkbox id={`primary-${id}`} />\n            <Label\n              htmlFor={`primary-${id}`}\n              className=\"font-normal text-muted-foreground\"\n            >\n              Set as default payment method\n            </Label>\n          </div>\n          <Button type=\"button\" className=\"w-full\">\n            Update card\n          </Button>\n        </form>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "dialog",
+      "modal",
+      "checkout",
+      "payment",
+      "credit card",
+      "form",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-329.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-329",
+  "type": "registry:component",
+  "dependencies": [
+    "react-payment-inputs"
+  ],
+  "devDependencies": [
+    "@types/react-payment-inputs"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/badge.json",
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dialog.json",
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/radio-group.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-329.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useId, useRef, useState } from \"react\"\nimport { CreditCardIcon, StoreIcon } from \"lucide-react\"\nimport { usePaymentInputs } from \"react-payment-inputs\"\nimport images, { type CardImages } from \"react-payment-inputs/images\"\n\nimport { Badge } from \"@/registry/building-blocks/default/ui/badge\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/building-blocks/default/ui/dialog\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/building-blocks/default/ui/radio-group\"\n\nexport default function Component() {\n  const id = useId()\n  const {\n    meta,\n    getCardNumberProps,\n    getExpiryDateProps,\n    getCVCProps,\n    getCardImageProps,\n  } = usePaymentInputs()\n  const couponInputRef = useRef<HTMLInputElement>(null)\n  const [showCouponInput, setShowCouponInput] = useState(false)\n  const [couponCode, setCouponCode] = useState(\"\")\n\n  // Auto-focus the coupon input when it's shown\n  useEffect(() => {\n    if (showCouponInput && couponInputRef.current) {\n      couponInputRef.current.focus()\n    }\n  }, [showCouponInput])\n\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Checkout</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <div className=\"mb-2 flex flex-col gap-2\">\n          <div\n            className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\"\n            aria-hidden=\"true\"\n          >\n            <StoreIcon className=\"opacity-80\" size={16} />\n          </div>\n          <DialogHeader>\n            <DialogTitle className=\"text-left\">Confirm and pay</DialogTitle>\n            <DialogDescription className=\"text-left\">\n              Pay securely and cancel any time.\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        <form className=\"space-y-5\">\n          <div className=\"space-y-4\">\n            <RadioGroup className=\"grid-cols-2\" defaultValue=\"yearly\">\n              {/* Monthly */}\n              <label className=\"relative flex cursor-pointer flex-col gap-1 rounded-md border border-input px-4 py-3 shadow-xs transition-[color,box-shadow] outline-none has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50 has-data-[state=checked]:border-primary/50\">\n                <RadioGroupItem\n                  id=\"radio-monthly\"\n                  value=\"monthly\"\n                  className=\"sr-only after:absolute after:inset-0\"\n                />\n                <p className=\"text-sm font-medium text-foreground\">Monthly</p>\n                <p className=\"text-sm text-muted-foreground\">$32/month</p>\n              </label>\n              {/* Yearly */}\n              <label className=\"relative flex cursor-pointer flex-col gap-1 rounded-md border border-input px-4 py-3 shadow-xs transition-[color,box-shadow] outline-none has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50 has-data-[state=checked]:border-primary/50\">\n                <RadioGroupItem\n                  id=\"radio-yearly\"\n                  value=\"yearly\"\n                  className=\"sr-only after:absolute after:inset-0\"\n                />\n                <div className=\"inline-flex items-start justify-between gap-2\">\n                  <p className=\"text-sm font-medium text-foreground\">Yearly</p>\n                  <Badge>Popular</Badge>\n                </div>\n                <p className=\"text-sm text-muted-foreground\">$320/month</p>\n              </label>\n            </RadioGroup>\n            <div className=\"*:not-first:mt-2\">\n              <Label htmlFor={`name-${id}`}>Name on card</Label>\n              <Input id={`name-${id}`} type=\"text\" required />\n            </div>\n            <div className=\"*:not-first:mt-2\">\n              <legend className=\"text-sm font-medium text-foreground\">\n                Card Details\n              </legend>\n              <div className=\"rounded-md shadow-xs\">\n                <div className=\"relative focus-within:z-10\">\n                  <Input\n                    className=\"peer rounded-b-none pe-9 shadow-none [direction:inherit]\"\n                    {...getCardNumberProps()}\n                  />\n                  <div className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n                    {meta.cardType ? (\n                      <svg\n                        className=\"overflow-hidden rounded-sm\"\n                        {...getCardImageProps({\n                          images: images as unknown as CardImages,\n                        })}\n                        width={20}\n                      />\n                    ) : (\n                      <CreditCardIcon size={16} aria-hidden=\"true\" />\n                    )}\n                  </div>\n                </div>\n                <div className=\"-mt-px flex\">\n                  <div className=\"min-w-0 flex-1 focus-within:z-10\">\n                    <Input\n                      className=\"rounded-e-none rounded-t-none shadow-none [direction:inherit]\"\n                      {...getExpiryDateProps()}\n                    />\n                  </div>\n                  <div className=\"-ms-px min-w-0 flex-1 focus-within:z-10\">\n                    <Input\n                      className=\"rounded-s-none rounded-t-none shadow-none [direction:inherit]\"\n                      {...getCVCProps()}\n                    />\n                  </div>\n                </div>\n              </div>\n            </div>\n            {!showCouponInput ? (\n              <button\n                type=\"button\"\n                onClick={() => setShowCouponInput(true)}\n                className=\"text-sm underline hover:no-underline\"\n              >\n                + Add coupon\n              </button>\n            ) : (\n              <div className=\"*:not-first:mt-2\">\n                <Label htmlFor={`coupon-${id}`}>Coupon code</Label>\n                <Input\n                  id={`coupon-${id}`}\n                  ref={couponInputRef}\n                  placeholder=\"Enter your code\"\n                  value={couponCode}\n                  onChange={(e) => setCouponCode(e.target.value)}\n                />\n              </div>\n            )}\n          </div>\n          <Button type=\"button\" className=\"w-full\">\n            Subscribe\n          </Button>\n        </form>\n\n        <p className=\"text-center text-xs text-muted-foreground\">\n          Payments are non-refundable. Cancel anytime.\n        </p>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "dialog",
+      "modal",
+      "checkout",
+      "payment",
+      "credit card",
+      "form",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-33.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-33",
+  "type": "registry:component",
+  "files": [
+    {
+      "path": "registry/default/components/comp-33.tsx",
+      "content": "import { useId } from \"react\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"relative rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow] outline-none focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 has-[input:is(:disabled)]:*:pointer-events-none dark:has-aria-invalid:ring-destructive/40\">\n      <label\n        htmlFor={id}\n        className=\"block px-3 pt-2 text-xs font-medium text-foreground\"\n      >\n        Input with inset label\n      </label>\n      <input\n        id={id}\n        className=\"flex h-10 w-full bg-transparent px-3 pb-2 text-sm text-foreground placeholder:text-muted-foreground/70 focus-visible:outline-none\"\n        placeholder=\"Email\"\n        type=\"email\"\n        disabled\n      />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label"
+    ]
+  }
+}