love-ui 1.2.13 → 1.2.15

package/public/r/comp-325.json

@@ -1,29 +0,0 @@
-{
-  "$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

@@ -1,30 +0,0 @@
-{
-  "$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

@@ -1,30 +0,0 @@
-{
-  "$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

@@ -1,37 +0,0 @@
-{
-  "$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

@@ -1,38 +0,0 @@
-{
-  "$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

@@ -1,18 +0,0 @@
-{
-  "$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"
-    ]
-  }
-}

package/public/r/comp-330.json

@@ -1,27 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-330",
-  "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"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-330.tsx",
-      "content": "import { useId } from \"react\"\nimport { CheckIcon, RefreshCcwIcon } from \"lucide-react\"\n\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\"\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  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Change plan</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            <RefreshCcwIcon className=\"opacity-80\" size={16} />\n          </div>\n          <DialogHeader>\n            <DialogTitle className=\"text-left\">Change your plan</DialogTitle>\n            <DialogDescription className=\"text-left\">\n              Pick one of the following plans.\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        <form className=\"space-y-5\">\n          <RadioGroup className=\"gap-2\" defaultValue=\"2\">\n            {/* Radio card #1 */}\n            <div className=\"relative flex w-full items-center gap-2 rounded-md border border-input px-4 py-3 shadow-xs outline-none has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-accent\">\n              <RadioGroupItem\n                value=\"1\"\n                id={`${id}-1`}\n                aria-describedby={`${id}-1-description`}\n                className=\"order-1 after:absolute after:inset-0\"\n              />\n              <div className=\"grid grow gap-1\">\n                <Label htmlFor={`${id}-1`}>Essential</Label>\n                <p\n                  id={`${id}-1-description`}\n                  className=\"text-xs text-muted-foreground\"\n                >\n                  $4 per member/month\n                </p>\n              </div>\n            </div>\n            {/* Radio card #2 */}\n            <div className=\"relative flex w-full items-center gap-2 rounded-md border border-input px-4 py-3 shadow-xs outline-none has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-accent\">\n              <RadioGroupItem\n                value=\"2\"\n                id={`${id}-2`}\n                aria-describedby={`${id}-2-description`}\n                className=\"order-1 after:absolute after:inset-0\"\n              />\n              <div className=\"grid grow gap-1\">\n                <Label htmlFor={`${id}-2`}>Standard</Label>\n                <p\n                  id={`${id}-2-description`}\n                  className=\"text-xs text-muted-foreground\"\n                >\n                  $19 per member/month\n                </p>\n              </div>\n            </div>\n            {/* Radio card #3 */}\n            <div className=\"relative flex w-full items-center gap-2 rounded-md border border-input px-4 py-3 shadow-xs outline-none has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-accent\">\n              <RadioGroupItem\n                value=\"3\"\n                id={`${id}-3`}\n                aria-describedby={`${id}-3-description`}\n                className=\"order-1 after:absolute after:inset-0\"\n              />\n              <div className=\"grid grow gap-1\">\n                <Label htmlFor={`${id}-3`}>Enterprise</Label>\n                <p\n                  id={`${id}-3-description`}\n                  className=\"text-xs text-muted-foreground\"\n                >\n                  $32 per member/month\n                </p>\n              </div>\n            </div>\n          </RadioGroup>\n\n          <div className=\"space-y-3\">\n            <p>\n              <strong className=\"text-sm font-medium\">Features include:</strong>\n            </p>\n            <ul className=\"space-y-2 text-sm text-muted-foreground\">\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  size={16}\n                  className=\"mt-0.5 shrink-0 text-primary\"\n                  aria-hidden=\"true\"\n                />\n                Create unlimited projects.\n              </li>\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  size={16}\n                  className=\"mt-0.5 shrink-0 text-primary\"\n                  aria-hidden=\"true\"\n                />\n                Remove watermarks.\n              </li>\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  size={16}\n                  className=\"mt-0.5 shrink-0 text-primary\"\n                  aria-hidden=\"true\"\n                />\n                Add unlimited users and free viewers.\n              </li>\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  size={16}\n                  className=\"mt-0.5 shrink-0 text-primary\"\n                  aria-hidden=\"true\"\n                />\n                Upload unlimited files.\n              </li>\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  size={16}\n                  className=\"mt-0.5 shrink-0 text-primary\"\n                  aria-hidden=\"true\"\n                />\n                7-day money back guarantee.\n              </li>\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  size={16}\n                  className=\"mt-0.5 shrink-0 text-primary\"\n                  aria-hidden=\"true\"\n                />\n                Advanced permissions.\n              </li>\n            </ul>\n          </div>\n\n          <div className=\"grid gap-2\">\n            <Button type=\"button\" className=\"w-full\">\n              Change plan\n            </Button>\n            <DialogClose asChild>\n              <Button type=\"button\" variant=\"ghost\" className=\"w-full\">\n                Cancel\n              </Button>\n            </DialogClose>\n          </div>\n        </form>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "dialog",
-      "modal",
-      "user",
-      "radix"
-    ],
-    "style": 1
-  }
-}

package/public/r/comp-331.json

@@ -1,42 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-331",
-  "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/textarea.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-331.tsx",
-      "content": "\"use client\"\n\n\nimport { useId, useState } from \"react\"\nimport { CheckIcon, ImagePlusIcon, XIcon } from \"lucide-react\"\n\nimport { useCharacterLimit } from \"@/registry/building-blocks/default/hooks/use-character-limit\"\nimport { useFileUpload } from \"@/registry/building-blocks/default/hooks/use-file-upload\"\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\"\nimport { Textarea } from \"@/registry/building-blocks/default/ui/textarea\"\n\n// Pretend we have initial image files\nconst initialBgImage = [\n  {\n    name: \"profile-bg.jpg\",\n    size: 1528737,\n    type: \"image/jpeg\",\n    url: assetPath(\"/building-blocks/profile-bg.jpg\"),\n    id: \"profile-bg-123456789\",\n  },\n]\n\nconst initialAvatarImage = [\n  {\n    name: \"avatar-72-01.jpg\",\n    size: 1528737,\n    type: \"image/jpeg\",\n    url: \"https://i.pravatar.cc/160?img=13\",\n    id: \"avatar-123456789\",\n  },\n]\n\nexport default function Component() {\n  const id = useId()\n\n  const maxLength = 180\n  const {\n    value,\n    characterCount,\n    handleChange,\n    maxLength: limit,\n  } = useCharacterLimit({\n    maxLength,\n    initialValue:\n      \"Hey, I am Connor, a web developer who loves turning ideas into amazing websites!\",\n  })\n\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Edit profile</Button>\n      </DialogTrigger>\n      <DialogContent className=\"flex flex-col gap-0 overflow-y-visible p-0 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            Edit profile\n          </DialogTitle>\n        </DialogHeader>\n        <DialogDescription className=\"sr-only\">\n          Make changes to your profile here. You can change your photo and set a\n          username.\n        </DialogDescription>\n        <div className=\"overflow-y-auto\">\n          <ProfileBg />\n          <Avatar />\n          <div className=\"px-6 pt-4 pb-6\">\n            <form className=\"space-y-4\">\n              <div className=\"flex flex-col gap-4 sm:flex-row\">\n                <div className=\"flex-1 space-y-2\">\n                  <Label htmlFor={`${id}-first-name`}>First name</Label>\n                  <Input\n                    id={`${id}-first-name`}\n                    placeholder=\"Connor\"\n                    defaultValue=\"Connor\"\n                    type=\"text\"\n                    required\n                  />\n                </div>\n                <div className=\"flex-1 space-y-2\">\n                  <Label htmlFor={`${id}-last-name`}>Last name</Label>\n                  <Input\n                    id={`${id}-last-name`}\n                    placeholder=\"Welsh\"\n                    defaultValue=\"Love\"\n                    type=\"text\"\n                    required\n                  />\n                </div>\n              </div>\n              <div className=\"*:not-first:mt-2\">\n                <Label htmlFor={`${id}-username`}>Username</Label>\n                <div className=\"relative\">\n                  <Input\n                    id={`${id}-username`}\n                    className=\"peer pe-9\"\n                    placeholder=\"Username\"\n                    defaultValue=\"Connor-Love-69\"\n                    type=\"text\"\n                    required\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                    <CheckIcon\n                      size={16}\n                      className=\"text-emerald-500\"\n                      aria-hidden=\"true\"\n                    />\n                  </div>\n                </div>\n              </div>\n              <div className=\"*:not-first:mt-2\">\n                <Label htmlFor={`${id}-website`}>Website</Label>\n                <div className=\"flex rounded-md shadow-xs\">\n                  <span className=\"-z-10 inline-flex items-center rounded-s-md border border-input bg-background px-3 text-sm text-muted-foreground\">\n                    https://\n                  </span>\n                  <Input\n                    id={`${id}-website`}\n                    className=\"-ms-px rounded-s-none shadow-none\"\n                    placeholder=\"yourwebsite.com\"\n                    defaultValue=\"www.connorlove.com\"\n                    type=\"text\"\n                  />\n                </div>\n              </div>\n              <div className=\"*:not-first:mt-2\">\n                <Label htmlFor={`${id}-bio`}>Biography</Label>\n                <Textarea\n                  id={`${id}-bio`}\n                  placeholder=\"Write a few sentences about yourself\"\n                  defaultValue={value}\n                  maxLength={maxLength}\n                  onChange={handleChange}\n                  aria-describedby={`${id}-description`}\n                />\n                <p\n                  id={`${id}-description`}\n                  className=\"mt-2 text-right text-xs text-muted-foreground\"\n                  role=\"status\"\n                  aria-live=\"polite\"\n                >\n                  <span className=\"tabular-nums\">{limit - characterCount}</span>{\" \"}\n                  characters left\n                </p>\n              </div>\n            </form>\n          </div>\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\">Save changes</Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction ProfileBg() {\n  const [{ files }, { removeFile, openFileDialog, getInputProps }] =\n    useFileUpload({\n      accept: \"image/*\",\n      initialFiles: initialBgImage,\n    })\n\n  const currentImage = files[0]?.preview || null\n\n  return (\n    <div className=\"h-32\">\n      <div className=\"relative flex size-full items-center justify-center overflow-hidden bg-muted\">\n        {currentImage && (\n          <img\n            className=\"size-full object-cover\"\n            src={currentImage}\n            alt={\n              files[0]?.preview\n                ? \"Preview of uploaded image\"\n                : \"Default profile background\"\n            }\n            width={512}\n            height={96}\n          />\n        )}\n        <div className=\"absolute inset-0 flex items-center justify-center gap-2\">\n          <button\n            type=\"button\"\n            className=\"z-50 flex size-10 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white transition-[color,box-shadow] outline-none hover:bg-black/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n            onClick={openFileDialog}\n            aria-label={currentImage ? \"Change image\" : \"Upload image\"}\n          >\n            <ImagePlusIcon size={16} aria-hidden=\"true\" />\n          </button>\n          {currentImage && (\n            <button\n              type=\"button\"\n              className=\"z-50 flex size-10 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white transition-[color,box-shadow] outline-none hover:bg-black/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n              onClick={() => removeFile(files[0]?.id)}\n              aria-label=\"Remove image\"\n            >\n              <XIcon size={16} aria-hidden=\"true\" />\n            </button>\n          )}\n        </div>\n      </div>\n      <input\n        {...getInputProps()}\n        className=\"sr-only\"\n        aria-label=\"Upload image file\"\n      />\n    </div>\n  )\n}\n\nfunction Avatar() {\n  const [{ files }, { openFileDialog, getInputProps }] = useFileUpload({\n    accept: \"image/*\",\n    initialFiles: initialAvatarImage,\n  })\n\n  const currentImage = files[0]?.preview || null\n\n  return (\n    <div className=\"-mt-10 px-6\">\n      <div className=\"relative flex size-20 items-center justify-center overflow-hidden rounded-full border-4 border-background bg-muted shadow-xs shadow-black/10\">\n        {currentImage && (\n          <img\n            src={currentImage}\n            className=\"size-full object-cover\"\n            width={80}\n            height={80}\n            alt=\"Profile image\"\n          />\n        )}\n        <button\n          type=\"button\"\n          className=\"absolute flex size-8 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white transition-[color,box-shadow] outline-none hover:bg-black/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n          onClick={openFileDialog}\n          aria-label=\"Change profile picture\"\n        >\n          <ImagePlusIcon size={16} aria-hidden=\"true\" />\n        </button>\n        <input\n          {...getInputProps()}\n          className=\"sr-only\"\n          aria-label=\"Upload profile picture\"\n        />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    },
-    {
-      "path": "registry/default/hooks/use-character-limit.ts",
-      "content": "\"use client\"\n\nimport { ChangeEvent, useState } from \"react\"\n\ntype UseCharacterLimitProps = {\n  maxLength: number\n  initialValue?: string\n}\n\nexport function useCharacterLimit({\n  maxLength,\n  initialValue = \"\",\n}: UseCharacterLimitProps) {\n  const [value, setValue] = useState(initialValue)\n  const [characterCount, setCharacterCount] = useState(initialValue.length)\n\n  const handleChange = (\n    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ) => {\n    const newValue = e.target.value\n    if (newValue.length <= maxLength) {\n      setValue(newValue)\n      setCharacterCount(newValue.length)\n    }\n  }\n\n  return {\n    value,\n    characterCount,\n    handleChange,\n    maxLength,\n  }\n}\n",
-      "type": "registry:hook"
-    },
-    {
-      "path": "registry/default/hooks/use-file-upload.ts",
-      "content": "\"use client\"\n\nimport type React from \"react\"\nimport {\n  useCallback,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type DragEvent,\n  type InputHTMLAttributes,\n} from \"react\"\n\nexport type FileMetadata = {\n  name: string\n  size: number\n  type: string\n  url: string\n  id: string\n}\n\nexport type FileWithPreview = {\n  file: File | FileMetadata\n  id: string\n  preview?: string\n}\n\nexport type FileUploadOptions = {\n  maxFiles?: number // Only used when multiple is true, defaults to Infinity\n  maxSize?: number // in bytes\n  accept?: string\n  multiple?: boolean // Defaults to false\n  initialFiles?: FileMetadata[]\n  onFilesChange?: (files: FileWithPreview[]) => void // Callback when files change\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void // Callback when new files are added\n}\n\nexport type FileUploadState = {\n  files: FileWithPreview[]\n  isDragging: boolean\n  errors: string[]\n}\n\nexport type FileUploadActions = {\n  addFiles: (files: FileList | File[]) => void\n  removeFile: (id: string) => void\n  clearFiles: () => void\n  clearErrors: () => void\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void\n  handleDragOver: (e: DragEvent<HTMLElement>) => void\n  handleDrop: (e: DragEvent<HTMLElement>) => void\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void\n  openFileDialog: () => void\n  getInputProps: (\n    props?: InputHTMLAttributes<HTMLInputElement>\n  ) => InputHTMLAttributes<HTMLInputElement> & {\n    // Use `any` here to avoid cross-React ref type conflicts across packages\n    ref: any\n  }\n}\n\nexport const useFileUpload = (\n  options: FileUploadOptions = {}\n): [FileUploadState, FileUploadActions] => {\n  const {\n    maxFiles = Infinity,\n    maxSize = Infinity,\n    accept = \"*\",\n    multiple = false,\n    initialFiles = [],\n    onFilesChange,\n    onFilesAdded,\n  } = options\n\n  const [state, setState] = useState<FileUploadState>({\n    files: initialFiles.map((file) => ({\n      file,\n      id: file.id,\n      preview: file.url,\n    })),\n    isDragging: false,\n    errors: [],\n  })\n\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const validateFile = useCallback(\n    (file: File | FileMetadata): string | null => {\n      if (file instanceof File) {\n        if (file.size > maxSize) {\n          return `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}.`\n        }\n      } else {\n        if (file.size > maxSize) {\n          return `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}.`\n        }\n      }\n\n      if (accept !== \"*\") {\n        const acceptedTypes = accept.split(\",\").map((type) => type.trim())\n        const fileType = file instanceof File ? file.type || \"\" : file.type\n        const fileExtension = `.${file instanceof File ? file.name.split(\".\").pop() : file.name.split(\".\").pop()}`\n\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.startsWith(\".\")) {\n            return fileExtension.toLowerCase() === type.toLowerCase()\n          }\n          if (type.endsWith(\"/*\")) {\n            const baseType = type.split(\"/\")[0]\n            return fileType.startsWith(`${baseType}/`)\n          }\n          return fileType === type\n        })\n\n        if (!isAccepted) {\n          return `File \"${file instanceof File ? file.name : file.name}\" is not an accepted file type.`\n        }\n      }\n\n      return null\n    },\n    [accept, maxSize]\n  )\n\n  const createPreview = useCallback(\n    (file: File | FileMetadata): string | undefined => {\n      if (file instanceof File) {\n        return URL.createObjectURL(file)\n      }\n      return file.url\n    },\n    []\n  )\n\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\n    if (file instanceof File) {\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`\n    }\n    return file.id\n  }, [])\n\n  const clearFiles = useCallback(() => {\n    setState((prev) => {\n      // Clean up object URLs\n      prev.files.forEach((file) => {\n        if (\n          file.preview &&\n          file.file instanceof File &&\n          file.file.type.startsWith(\"image/\")\n        ) {\n          URL.revokeObjectURL(file.preview)\n        }\n      })\n\n      if (inputRef.current) {\n        inputRef.current.value = \"\"\n      }\n\n      const newState = {\n        ...prev,\n        files: [],\n        errors: [],\n      }\n\n      onFilesChange?.(newState.files)\n      return newState\n    })\n  }, [onFilesChange])\n\n  const addFiles = useCallback(\n    (newFiles: FileList | File[]) => {\n      if (!newFiles || newFiles.length === 0) return\n\n      const newFilesArray = Array.from(newFiles)\n      const errors: string[] = []\n\n      // Clear existing errors when new files are uploaded\n      setState((prev) => ({ ...prev, errors: [] }))\n\n      // In single file mode, clear existing files first\n      if (!multiple) {\n        clearFiles()\n      }\n\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\n      if (\n        multiple &&\n        maxFiles !== Infinity &&\n        state.files.length + newFilesArray.length > maxFiles\n      ) {\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`)\n        setState((prev) => ({ ...prev, errors }))\n        return\n      }\n\n      const validFiles: FileWithPreview[] = []\n\n      newFilesArray.forEach((file) => {\n        // Only check for duplicates if multiple files are allowed\n        if (multiple) {\n          const isDuplicate = state.files.some(\n            (existingFile) =>\n              existingFile.file.name === file.name &&\n              existingFile.file.size === file.size\n          )\n\n          // Skip duplicate files silently\n          if (isDuplicate) {\n            return\n          }\n        }\n\n        // Check file size\n        if (file.size > maxSize) {\n          errors.push(\n            multiple\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`\n          )\n          return\n        }\n\n        const error = validateFile(file)\n        if (error) {\n          errors.push(error)\n        } else {\n          validFiles.push({\n            file,\n            id: generateUniqueId(file),\n            preview: createPreview(file),\n          })\n        }\n      })\n\n      // Only update state if we have valid files to add\n      if (validFiles.length > 0) {\n        // Call the onFilesAdded callback with the newly added valid files\n        onFilesAdded?.(validFiles)\n\n        setState((prev) => {\n          const newFiles = !multiple\n            ? validFiles\n            : [...prev.files, ...validFiles]\n          onFilesChange?.(newFiles)\n          return {\n            ...prev,\n            files: newFiles,\n            errors,\n          }\n        })\n      } else if (errors.length > 0) {\n        setState((prev) => ({\n          ...prev,\n          errors,\n        }))\n      }\n\n      // Reset input value after handling files\n      if (inputRef.current) {\n        inputRef.current.value = \"\"\n      }\n    },\n    [\n      state.files,\n      maxFiles,\n      multiple,\n      maxSize,\n      validateFile,\n      createPreview,\n      generateUniqueId,\n      clearFiles,\n      onFilesChange,\n      onFilesAdded,\n    ]\n  )\n\n  const removeFile = useCallback(\n    (id: string) => {\n      setState((prev) => {\n        const fileToRemove = prev.files.find((file) => file.id === id)\n        if (\n          fileToRemove &&\n          fileToRemove.preview &&\n          fileToRemove.file instanceof File &&\n          fileToRemove.file.type.startsWith(\"image/\")\n        ) {\n          URL.revokeObjectURL(fileToRemove.preview)\n        }\n\n        const newFiles = prev.files.filter((file) => file.id !== id)\n        onFilesChange?.(newFiles)\n\n        return {\n          ...prev,\n          files: newFiles,\n          errors: [],\n        }\n      })\n    },\n    [onFilesChange]\n  )\n\n  const clearErrors = useCallback(() => {\n    setState((prev) => ({\n      ...prev,\n      errors: [],\n    }))\n  }, [])\n\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setState((prev) => ({ ...prev, isDragging: true }))\n  }, [])\n\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\n      return\n    }\n\n    setState((prev) => ({ ...prev, isDragging: false }))\n  }, [])\n\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n  }, [])\n\n  const handleDrop = useCallback(\n    (e: DragEvent<HTMLElement>) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setState((prev) => ({ ...prev, isDragging: false }))\n\n      // Don't process files if the input is disabled\n      if (inputRef.current?.disabled) {\n        return\n      }\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        // In single file mode, only use the first file\n        if (!multiple) {\n          const file = e.dataTransfer.files[0]\n          addFiles([file])\n        } else {\n          addFiles(e.dataTransfer.files)\n        }\n      }\n    },\n    [addFiles, multiple]\n  )\n\n  const handleFileChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        addFiles(e.target.files)\n      }\n    },\n    [addFiles]\n  )\n\n  const openFileDialog = useCallback(() => {\n    if (inputRef.current) {\n      inputRef.current.click()\n    }\n  }, [])\n\n  const getInputProps = useCallback(\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\n      return {\n        ...props,\n        type: \"file\" as const,\n        onChange: handleFileChange,\n        accept: props.accept || accept,\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\n        ref: inputRef as any,\n      }\n    },\n    [accept, multiple, handleFileChange]\n  )\n\n  return [\n    state,\n    {\n      addFiles,\n      removeFile,\n      clearFiles,\n      clearErrors,\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      handleFileChange,\n      openFileDialog,\n      getInputProps,\n    },\n  ]\n}\n\n// Helper function to format bytes to human-readable format\nexport const formatBytes = (bytes: number, decimals = 2): string => {\n  if (bytes === 0) return \"0 Bytes\"\n\n  const k = 1024\n  const dm = decimals < 0 ? 0 : decimals\n  const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"]\n\n  const i = Math.floor(Math.log(bytes) / Math.log(k))\n\n  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + sizes[i]\n}\n",
-      "type": "registry:hook"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "dialog",
-      "modal",
-      "user",
-      "profile",
-      "image",
-      "avatar",
-      "form",
-      "radix"
-    ],
-    "style": 1
-  }
-}

package/public/r/comp-332.json

@@ -1,25 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-332",
-  "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-332.tsx",
-      "content": "\"use client\"\nimport { useState } from \"react\"\nimport { ArrowRightIcon } 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  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 [step, setStep] = useState(1)\n\n  const stepContent = [\n    {\n      title: \"Welcome to loveui\",\n      description:\n        \"Discover a powerful collection of components designed to enhance your development workflow.\",\n    },\n    {\n      title: \"Customizable Components\",\n      description:\n        \"Each component is fully customizable and built with modern web standards in mind.\",\n    },\n    {\n      title: \"Ready to Start?\",\n      description:\n        \"Begin building amazing interfaces with our comprehensive component library.\",\n    },\n    {\n      title: \"Get Support\",\n      description:\n        \"Access our extensive documentation and community resources to make the most of loveui.\",\n    },\n  ]\n\n  const totalSteps = stepContent.length\n\n  const handleContinue = () => {\n    if (step < totalSteps) {\n      setStep(step + 1)\n    }\n  }\n\n  return (\n    <Dialog\n      onOpenChange={(open) => {\n        if (open) setStep(1)\n      }}\n    >\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Onboarding</Button>\n      </DialogTrigger>\n      <DialogContent className=\"gap-0 p-0 [&>button:last-child]:text-white\">\n        <div className=\"p-2\">\n          <img\n            className=\"w-full rounded-md\"\n            src={assetPath(\"/building-blocks/dialog-content.png\")}\n            width={382}\n            height={216}\n            alt=\"dialog\"\n          />\n        </div>\n        <div className=\"space-y-6 px-6 pt-3 pb-6\">\n          <DialogHeader>\n            <DialogTitle>{stepContent[step - 1].title}</DialogTitle>\n            <DialogDescription>\n              {stepContent[step - 1].description}\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col justify-between gap-4 sm:flex-row sm:items-center\">\n            <div className=\"flex justify-center space-x-1.5 max-sm:order-1\">\n              {[...Array(totalSteps)].map((_, index) => (\n                <div\n                  key={index}\n                  className={cn(\n                    \"size-1.5 rounded-full bg-primary\",\n                    index + 1 === step ? \"bg-primary\" : \"opacity-20\"\n                  )}\n                />\n              ))}\n            </div>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button type=\"button\" variant=\"ghost\">\n                  Skip\n                </Button>\n              </DialogClose>\n              {step < totalSteps ? (\n                <Button\n                  className=\"group\"\n                  type=\"button\"\n                  onClick={handleContinue}\n                >\n                  Next\n                  <ArrowRightIcon\n                    className=\"-me-1 opacity-60 transition-transform group-hover:translate-x-0.5\"\n                    size={16}\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n              ) : (\n                <DialogClose asChild>\n                  <Button type=\"button\">Okay</Button>\n                </DialogClose>\n              )}\n            </DialogFooter>\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "dialog",
-      "modal",
-      "onboarding",
-      "radix"
-    ],
-    "style": 1
-  }
-}

package/public/r/comp-333.json

@@ -1,29 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-333",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/command.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-333.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowUpRightIcon,\n  CircleFadingPlusIcon,\n  FileInputIcon,\n  FolderPlusIcon,\n  SearchIcon,\n} from \"lucide-react\"\n\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/building-blocks/default/ui/command\"\n\nexport default function Component() {\n  const [open, setOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === \"k\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault()\n        setOpen((open) => !open)\n      }\n    }\n\n    document.addEventListener(\"keydown\", down)\n    return () => document.removeEventListener(\"keydown\", down)\n  }, [])\n\n  return (\n    <>\n      <button\n        className=\"inline-flex h-9 w-fit rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground/70 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n        onClick={() => setOpen(true)}\n      >\n        <span className=\"flex grow items-center\">\n          <SearchIcon\n            className=\"-ms-1 me-3 text-muted-foreground/80\"\n            size={16}\n            aria-hidden=\"true\"\n          />\n          <span className=\"font-normal text-muted-foreground/70\">Search</span>\n        </span>\n        <kbd className=\"ms-12 -me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] text-[0.625rem] font-medium text-muted-foreground/70\">\n          ⌘K\n        </kbd>\n      </button>\n      <CommandDialog open={open} onOpenChange={setOpen}>\n        <CommandInput placeholder=\"Type a command or search...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup heading=\"Quick start\">\n            <CommandItem>\n              <FolderPlusIcon\n                size={16}\n                className=\"opacity-60\"\n                aria-hidden=\"true\"\n              />\n              <span>New folder</span>\n              <CommandShortcut className=\"justify-center\">⌘N</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <FileInputIcon\n                size={16}\n                className=\"opacity-60\"\n                aria-hidden=\"true\"\n              />\n              <span>Import document</span>\n              <CommandShortcut className=\"justify-center\">⌘I</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <CircleFadingPlusIcon\n                size={16}\n                className=\"opacity-60\"\n                aria-hidden=\"true\"\n              />\n              <span>Add block</span>\n              <CommandShortcut className=\"justify-center\">⌘B</CommandShortcut>\n            </CommandItem>\n          </CommandGroup>\n          <CommandSeparator />\n          <CommandGroup heading=\"Navigation\">\n            <CommandItem>\n              <ArrowUpRightIcon\n                size={16}\n                className=\"opacity-60\"\n                aria-hidden=\"true\"\n              />\n              <span>Go to dashboard</span>\n            </CommandItem>\n            <CommandItem>\n              <ArrowUpRightIcon\n                size={16}\n                className=\"opacity-60\"\n                aria-hidden=\"true\"\n              />\n              <span>Go to apps</span>\n            </CommandItem>\n            <CommandItem>\n              <ArrowUpRightIcon\n                size={16}\n                className=\"opacity-60\"\n                aria-hidden=\"true\"\n              />\n              <span>Go to connections</span>\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </CommandDialog>\n    </>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "dialog",
-      "modal",
-      "command",
-      "combobox",
-      "popover",
-      "search",
-      "radix",
-      "autocomplete",
-      "radix"
-    ],
-    "style": 1
-  }
-}

package/public/r/comp-334.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-334",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/accordion.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-334.tsx",
-      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/building-blocks/default/ui/accordion\"\n\nconst items = [\n  {\n    id: \"1\",\n    title: \"What makes loveui different?\",\n    content:\n      \"loveui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n  },\n  {\n    id: \"2\",\n    title: \"How can I customize the components?\",\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n  },\n  {\n    id: \"3\",\n    title: \"Is loveui optimized for performance?\",\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n  },\n  {\n    id: \"4\",\n    title: \"How accessible are the components?\",\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-xl font-bold\">W/ chevron</h2>\n      <Accordion type=\"single\" collapsible className=\"w-full\" defaultValue=\"3\">\n        {items.map((item) => (\n          <AccordionItem value={item.id} key={item.id} className=\"py-2\">\n            <AccordionTrigger className=\"py-2 text-[15px] leading-6 hover:no-underline\">\n              {item.title}\n            </AccordionTrigger>\n            <AccordionContent className=\"pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "accordion",
-      "radix"
-    ],
-    "colSpan": 2
-  }
-}

package/public/r/comp-335.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-335",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/accordion.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-335.tsx",
-      "content": "import { PlusIcon } from \"lucide-react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n} from \"@/registry/building-blocks/default/ui/accordion\"\n\nconst items = [\n  {\n    id: \"1\",\n    title: \"What makes loveui different?\",\n    content:\n      \"loveui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n  },\n  {\n    id: \"2\",\n    title: \"How can I customize the components?\",\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n  },\n  {\n    id: \"3\",\n    title: \"Is loveui optimized for performance?\",\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n  },\n  {\n    id: \"4\",\n    title: \"How accessible are the components?\",\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-xl font-bold\">W/ plus-minus</h2>\n      <Accordion type=\"single\" collapsible className=\"w-full\" defaultValue=\"3\">\n        {items.map((item) => (\n          <AccordionItem value={item.id} key={item.id} className=\"py-2\">\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"flex flex-1 items-center justify-between gap-4 rounded-md py-2 text-left text-sm text-[15px] leading-6 font-semibold transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0\">\n                {item.title}\n                <PlusIcon\n                  size={16}\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  aria-hidden=\"true\"\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "accordion",
-      "radix"
-    ],
-    "colSpan": 2
-  }
-}

package/public/r/comp-336.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-336",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/accordion.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-336.tsx",
-      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/building-blocks/default/ui/accordion\"\n\nconst items = [\n  {\n    id: \"1\",\n    title: \"What makes loveui different?\",\n    content:\n      \"loveui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n  },\n  {\n    id: \"2\",\n    title: \"How can I customize the components?\",\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n  },\n  {\n    id: \"3\",\n    title: \"Is loveui optimized for performance?\",\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n  },\n  {\n    id: \"4\",\n    title: \"How accessible are the components?\",\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-xl font-bold\">W/ left chevron</h2>\n      <Accordion type=\"single\" collapsible className=\"w-full\" defaultValue=\"3\">\n        {items.map((item) => (\n          <AccordionItem value={item.id} key={item.id} className=\"py-2\">\n            <AccordionTrigger className=\"justify-start gap-3 py-2 text-[15px] leading-6 hover:no-underline [&>svg]:-order-1\">\n              {item.title}\n            </AccordionTrigger>\n            <AccordionContent className=\"ps-7 pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "accordion",
-      "radix"
-    ],
-    "colSpan": 2
-  }
-}

package/public/r/comp-337.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-337",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/accordion.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-337.tsx",
-      "content": "import { PlusIcon } from \"lucide-react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n} from \"@/registry/building-blocks/default/ui/accordion\"\n\nconst items = [\n  {\n    id: \"1\",\n    title: \"What makes loveui different?\",\n    content:\n      \"loveui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n  },\n  {\n    id: \"2\",\n    title: \"How can I customize the components?\",\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n  },\n  {\n    id: \"3\",\n    title: \"Is loveui optimized for performance?\",\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n  },\n  {\n    id: \"4\",\n    title: \"How accessible are the components?\",\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-xl font-bold\">W/ left plus-minus</h2>\n      <Accordion type=\"single\" collapsible className=\"w-full\" defaultValue=\"3\">\n        {items.map((item) => (\n          <AccordionItem value={item.id} key={item.id} className=\"py-2\">\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"flex flex-1 items-center gap-4 rounded-md py-2 text-left text-sm text-[15px] leading-6 font-semibold transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&>svg]:-order-1 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0\">\n                {item.title}\n                <PlusIcon\n                  size={16}\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  aria-hidden=\"true\"\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"ps-7 pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "accordion",
-      "radix"
-    ],
-    "colSpan": 2
-  }
-}

package/public/r/comp-338.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-338",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/accordion.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-338.tsx",
-      "content": "import { AtSignIcon, CommandIcon, EclipseIcon, ZapIcon } from \"lucide-react\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/building-blocks/default/ui/accordion\"\n\nconst items = [\n  {\n    id: \"1\",\n    icon: CommandIcon,\n    title: \"What makes loveui different?\",\n    content:\n      \"loveui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n  },\n  {\n    id: \"2\",\n    icon: EclipseIcon,\n    title: \"How can I customize the components?\",\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n  },\n  {\n    id: \"3\",\n    icon: ZapIcon,\n    title: \"Is loveui optimized for performance?\",\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n  },\n  {\n    id: \"4\",\n    icon: AtSignIcon,\n    title: \"How accessible are the components?\",\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-xl font-bold\">W/ icon and chevron</h2>\n      <Accordion type=\"single\" collapsible className=\"w-full\" defaultValue=\"3\">\n        {items.map((item) => (\n          <AccordionItem value={item.id} key={item.id} className=\"py-2\">\n            <AccordionTrigger className=\"py-2 text-[15px] leading-6 hover:no-underline\">\n              <span className=\"flex items-center gap-3\">\n                <item.icon\n                  size={16}\n                  className=\"shrink-0 opacity-60\"\n                  aria-hidden=\"true\"\n                />\n                <span>{item.title}</span>\n              </span>\n            </AccordionTrigger>\n            <AccordionContent className=\"ps-7 pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "accordion",
-      "radix"
-    ],
-    "colSpan": 2
-  }
-}