love-ui 1.2.13 → 1.2.15

package/public/r/comp-110.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-110",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/toggle-group.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-110.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/building-blocks/default/ui/toggle-group\"\n\nexport default function Component() {\n  const [value, setValue] = useState<string>(\"left\")\n\n  return (\n    <ToggleGroup\n      type=\"single\"\n      variant=\"outline\"\n      value={value}\n      onValueChange={(value) => {\n        if (value) setValue(value)\n      }}\n    >\n      <ToggleGroupItem className=\"flex-1\" value=\"left\">\n        Left\n      </ToggleGroupItem>\n      <ToggleGroupItem className=\"flex-1\" value=\"center\">\n        Center\n      </ToggleGroupItem>\n      <ToggleGroupItem className=\"flex-1\" value=\"right\">\n        Right\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "button",
-      "toggle group"
-    ],
-    "style": 2
-  }
-}

package/public/r/comp-111.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-111",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-111.tsx",
-      "content": "import { QrCodeIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <div className=\"inline-flex divide-x divide-primary-foreground/30 rounded-md shadow-xs rtl:space-x-reverse\">\n      <Button\n        className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\"\n        size=\"icon\"\n        aria-label=\"QR code\"\n      >\n        <QrCodeIcon size={16} aria-hidden=\"true\" />\n      </Button>\n      <Button className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\">\n        Sign in\n      </Button>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "button"
-    ],
-    "style": 2
-  }
-}

package/public/r/comp-112.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-112",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-112.tsx",
-      "content": "import { SquareArrowOutUpRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <div className=\"inline-flex -space-x-px rounded-md shadow-xs rtl:space-x-reverse\">\n      <Button\n        className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\"\n        variant=\"outline\"\n      >\n        Preview\n      </Button>\n      <Button\n        className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\"\n        variant=\"outline\"\n        size=\"icon\"\n        aria-label=\"Open link\"\n      >\n        <SquareArrowOutUpRightIcon size={16} aria-hidden=\"true\" />\n      </Button>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "button"
-    ],
-    "style": 2
-  }
-}

package/public/r/comp-113.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-113",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-113.tsx",
-      "content": "import { ChevronDownIcon, PinIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <div className=\"inline-flex divide-x divide-primary-foreground/30 rounded-md shadow-xs rtl:space-x-reverse\">\n      <Button\n        className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\"\n        size=\"icon\"\n        aria-label=\"Options\"\n      >\n        <ChevronDownIcon size={16} aria-hidden=\"true\" />\n      </Button>\n      <Button className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\">\n        <PinIcon className=\"-ms-1 opacity-60\" size={16} aria-hidden=\"true\" />\n        Pinned\n      </Button>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "button",
-      "dropdown"
-    ],
-    "style": 2
-  }
-}

package/public/r/comp-114.json

@@ -1,23 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-114",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-114.tsx",
-      "content": "import { ChevronDownIcon, GitForkIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <div className=\"inline-flex divide-x divide-primary-foreground/30 rounded-md shadow-xs rtl:space-x-reverse\">\n      <Button className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\">\n        <GitForkIcon className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n        Fork\n        <span className=\"ms-1 -me-1 inline-flex h-5 max-h-full items-center rounded border border-primary-foreground/30 px-1 font-[inherit] text-[0.625rem] font-medium text-primary-foreground/60\">\n          18\n        </span>\n      </Button>\n      <Button\n        className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\"\n        size=\"icon\"\n        aria-label=\"Options\"\n      >\n        <ChevronDownIcon size={16} aria-hidden=\"true\" />\n      </Button>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "button",
-      "dropdown",
-      "counter"
-    ],
-    "style": 2
-  }
-}

package/public/r/comp-115.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-115",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-115.tsx",
-      "content": "import { ChevronLeftIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <Button className=\"relative ps-12\">\n      Previous\n      <span className=\"pointer-events-none absolute inset-y-0 start-0 flex w-9 items-center justify-center bg-primary-foreground/15\">\n        <ChevronLeftIcon className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n      </span>\n    </Button>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "button",
-      "previous"
-    ],
-    "style": 2
-  }
-}

package/public/r/comp-116.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-116",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-116.tsx",
-      "content": "import { ChevronRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <Button className=\"relative pe-12\">\n      Next\n      <span className=\"pointer-events-none absolute inset-y-0 end-0 flex w-9 items-center justify-center bg-primary-foreground/15\">\n        <ChevronRightIcon className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n      </span>\n    </Button>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "button",
-      "next"
-    ],
-    "style": 2
-  }
-}

package/public/r/comp-117.json

@@ -1,23 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-117",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-117.tsx",
-      "content": "import { ThumbsUpIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <Button className=\"py-0 pe-0\" variant=\"outline\">\n      <ThumbsUpIcon className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n      Like\n      <span className=\"relative ms-1 inline-flex h-full items-center justify-center rounded-full px-3 text-xs font-medium text-muted-foreground before:absolute before:inset-0 before:left-0 before:w-px before:bg-input\">\n        86\n      </span>\n    </Button>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "button",
-      "like",
-      "counter"
-    ],
-    "style": 2
-  }
-}

package/public/r/comp-118.json

@@ -1,23 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-118",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-118.tsx",
-      "content": "import { StarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <Button>\n      <StarIcon className=\"-ms-1 opacity-60\" size={16} aria-hidden=\"true\" />\n      <span className=\"flex items-baseline gap-2\">\n        Star\n        <span className=\"text-xs text-primary-foreground/60\">729</span>\n      </span>\n    </Button>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "button",
-      "like",
-      "counter"
-    ],
-    "style": 2
-  }
-}

package/public/r/comp-119.json

@@ -1,27 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-119",
-  "type": "registry:component",
-  "dependencies": [
-    "@remixicon/react"
-  ],
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-119.tsx",
-      "content": "import {\n  RiFacebookFill,\n  RiGithubFill,\n  RiGoogleFill,\n  RiTwitterXFill,\n} from \"@remixicon/react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <div className=\"inline-flex flex-wrap gap-2\">\n      <Button variant=\"outline\" aria-label=\"Login with Google\" size=\"icon\">\n        <RiGoogleFill size={16} aria-hidden=\"true\" />\n      </Button>\n      <Button variant=\"outline\" aria-label=\"Login with Facebook\" size=\"icon\">\n        <RiFacebookFill size={16} aria-hidden=\"true\" />\n      </Button>\n      <Button variant=\"outline\" aria-label=\"Login with X\" size=\"icon\">\n        <RiTwitterXFill size={16} aria-hidden=\"true\" />\n      </Button>\n      <Button variant=\"outline\" aria-label=\"Login with GitHub\" size=\"icon\">\n        <RiGithubFill size={16} aria-hidden=\"true\" />\n      </Button>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "button",
-      "social",
-      "login",
-      "authentication"
-    ],
-    "style": 2
-  }
-}

package/public/r/comp-12.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-12",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/input.json",
-    "https://loveui.dev/building-blocks/r/label.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-12.tsx",
-      "content": "import { useId } from \"react\"\n\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    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with end inline add-on</Label>\n      <div className=\"relative\">\n        <Input\n          id={id}\n          className=\"peer pe-12\"\n          placeholder=\"google\"\n          type=\"text\"\n        />\n        <span className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-sm text-muted-foreground peer-disabled:opacity-50\">\n          .com\n        </span>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "input",
-      "label"
-    ]
-  }
-}

package/public/r/comp-120.json

@@ -1,27 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-120",
-  "type": "registry:component",
-  "dependencies": [
-    "@remixicon/react"
-  ],
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-120.tsx",
-      "content": "import {\n  RiFacebookFill,\n  RiGithubFill,\n  RiGoogleFill,\n  RiTwitterXFill,\n} from \"@remixicon/react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Button\n        className=\"flex-1\"\n        variant=\"outline\"\n        aria-label=\"Login with Google\"\n        size=\"icon\"\n      >\n        <RiGoogleFill\n          className=\"text-[#DB4437] dark:text-primary\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n      </Button>\n      <Button\n        className=\"flex-1\"\n        variant=\"outline\"\n        aria-label=\"Login with Facebook\"\n        size=\"icon\"\n      >\n        <RiFacebookFill\n          className=\"text-[#1877f2] dark:text-primary\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n      </Button>\n      <Button\n        className=\"flex-1\"\n        variant=\"outline\"\n        aria-label=\"Login with X\"\n        size=\"icon\"\n      >\n        <RiTwitterXFill\n          className=\"text-[#14171a] dark:text-primary\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n      </Button>\n      <Button\n        className=\"flex-1\"\n        variant=\"outline\"\n        aria-label=\"Login with GitHub\"\n        size=\"icon\"\n      >\n        <RiGithubFill\n          className=\"text-black dark:text-primary\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n      </Button>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "button",
-      "social",
-      "login",
-      "authentication"
-    ],
-    "style": 2
-  }
-}

package/public/r/comp-121.json

@@ -1,27 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-121",
-  "type": "registry:component",
-  "dependencies": [
-    "@remixicon/react"
-  ],
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-121.tsx",
-      "content": "import {\n  RiFacebookFill,\n  RiGithubFill,\n  RiGoogleFill,\n  RiTwitterXFill,\n} from \"@remixicon/react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <Button variant=\"outline\">\n        <RiGoogleFill\n          className=\"me-1 text-[#DB4437] dark:text-white/60\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n        Login with Google\n      </Button>\n      <Button variant=\"outline\">\n        <RiTwitterXFill\n          className=\"me-1 text-[#14171a] dark:text-white/60\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n        Login with X\n      </Button>\n      <Button variant=\"outline\">\n        <RiFacebookFill\n          className=\"me-1 text-[#1877f2] dark:text-white/60\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n        Login with Facebook\n      </Button>\n      <Button variant=\"outline\">\n        <RiGithubFill\n          className=\"me-1 text-[#333333] dark:text-white/60\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n        Login with GitHub\n      </Button>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "button",
-      "social",
-      "login",
-      "authentication"
-    ],
-    "style": 2
-  }
-}

package/public/r/comp-122.json

@@ -1,27 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-122",
-  "type": "registry:component",
-  "dependencies": [
-    "@remixicon/react"
-  ],
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-122.tsx",
-      "content": "import {\n  RiFacebookFill,\n  RiGithubFill,\n  RiGoogleFill,\n  RiTwitterXFill,\n} from \"@remixicon/react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <Button className=\"bg-[#DB4437] text-white after:flex-1 hover:bg-[#DB4437]/90\">\n        <span className=\"pointer-events-none me-2 flex-1\">\n          <RiGoogleFill className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n        </span>\n        Login with Google\n      </Button>\n      <Button className=\"bg-[#14171a] text-white after:flex-1 hover:bg-[#14171a]/90\">\n        <span className=\"pointer-events-none me-2 flex-1\">\n          <RiTwitterXFill className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n        </span>\n        Login with X\n      </Button>\n      <Button className=\"bg-[#1877f2] text-white after:flex-1 hover:bg-[#1877f2]/90\">\n        <span className=\"pointer-events-none me-2 flex-1\">\n          <RiFacebookFill className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n        </span>\n        Login with Facebook\n      </Button>\n      <Button className=\"bg-[#333333] text-white after:flex-1 hover:bg-[#333333]/90\">\n        <span className=\"pointer-events-none me-2 flex-1\">\n          <RiGithubFill className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n        </span>\n        Login with GitHub\n      </Button>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "button",
-      "social",
-      "login",
-      "authentication"
-    ],
-    "style": 2
-  }
-}

package/public/r/comp-123.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-123",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-123.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  const [isExpanded, setIsExpanded] = useState<boolean>(false)\n\n  const toggleExpand = () => {\n    setIsExpanded((prevState) => !prevState)\n  }\n\n  return (\n    <Button\n      className=\"gap-1\"\n      variant=\"ghost\"\n      onClick={toggleExpand}\n      aria-expanded={isExpanded}\n      aria-controls=\"expandable-content\" // Use this ID on the element that this button controls\n    >\n      {isExpanded ? \"Show less\" : \"Show more\"}\n      {isExpanded ? (\n        <ChevronUpIcon className=\"-me-1\" size={16} aria-hidden=\"true\" />\n      ) : (\n        <ChevronDownIcon className=\"-me-1\" size={16} aria-hidden=\"true\" />\n      )}\n    </Button>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "button",
-      "collapsible"
-    ],
-    "style": 2
-  }
-}

package/public/r/comp-124.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-124",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-124.tsx",
-      "content": "import { ChevronLeftIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <Button variant=\"link\" className=\"gap-1\">\n      <ChevronLeftIcon className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n      Go back\n    </Button>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "button",
-      "back"
-    ],
-    "style": 2
-  }
-}

package/public/r/comp-125.json

@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-125",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-125.tsx",
-      "content": "\"use client\"\n\nimport { CircleUserRoundIcon } from \"lucide-react\"\n\nimport { useFileUpload } from \"@/registry/building-blocks/default/hooks/use-file-upload\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  const [{ files }, { removeFile, openFileDialog, getInputProps }] =\n    useFileUpload({\n      accept: \"image/*\",\n    })\n\n  const previewUrl = files[0]?.preview || null\n  const fileName = files[0]?.file.name || null\n\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <div className=\"inline-flex items-center gap-2 align-top\">\n        <div\n          className=\"relative flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-md border border-input\"\n          aria-label={\n            previewUrl ? \"Preview of uploaded image\" : \"Default user avatar\"\n          }\n        >\n          {previewUrl ? (\n            <img\n              className=\"size-full object-cover\"\n              src={previewUrl}\n              alt=\"Preview of uploaded image\"\n              width={32}\n              height={32}\n            />\n          ) : (\n            <div aria-hidden=\"true\">\n              <CircleUserRoundIcon className=\"opacity-60\" size={16} />\n            </div>\n          )}\n        </div>\n        <div className=\"relative inline-block\">\n          <Button onClick={openFileDialog} aria-haspopup=\"dialog\">\n            {fileName ? \"Change image\" : \"Upload image\"}\n          </Button>\n          <input\n            {...getInputProps()}\n            className=\"sr-only\"\n            aria-label=\"Upload image file\"\n            tabIndex={-1}\n          />\n        </div>\n      </div>\n      {fileName && (\n        <div className=\"inline-flex gap-2 text-xs\">\n          <p className=\"truncate text-muted-foreground\" aria-live=\"polite\">\n            {fileName}\n          </p>{\" \"}\n          <button\n            onClick={() => removeFile(files[0]?.id)}\n            className=\"font-medium text-destructive hover:underline\"\n            aria-label={`Remove ${fileName}`}\n          >\n            Remove\n          </button>\n        </div>\n      )}\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Basic image uploader ∙{\" \"}\n        <a\n          href=\"https://github.com/loveui/blob/main/apps/origin/docs/use-file-upload.md\"\n          className=\"underline hover:text-foreground\"\n        >\n          Docs\n        </a>\n      </p>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    },
-    {
-      "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": [
-      "button",
-      "upload",
-      "user",
-      "avatar",
-      "profile",
-      "image"
-    ],
-    "style": 2
-  }
-}

package/public/r/comp-126.json

@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-126",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-126.tsx",
-      "content": "\"use client\"\n\nimport { CircleUserRoundIcon, XIcon } from \"lucide-react\"\n\nimport { useFileUpload } from \"@/registry/building-blocks/default/hooks/use-file-upload\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  const [{ files }, { removeFile, openFileDialog, getInputProps }] =\n    useFileUpload({\n      accept: \"image/*\",\n    })\n\n  const previewUrl = files[0]?.preview || null\n  const fileName = files[0]?.file.name || null\n\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <div className=\"relative inline-flex\">\n        <Button\n          variant=\"outline\"\n          className=\"relative size-16 overflow-hidden p-0 shadow-none\"\n          onClick={openFileDialog}\n          aria-label={previewUrl ? \"Change image\" : \"Upload image\"}\n        >\n          {previewUrl ? (\n            <img\n              className=\"size-full object-cover\"\n              src={previewUrl}\n              alt=\"Preview of uploaded image\"\n              width={64}\n              height={64}\n              style={{ objectFit: \"cover\" }}\n            />\n          ) : (\n            <div aria-hidden=\"true\">\n              <CircleUserRoundIcon className=\"size-4 opacity-60\" />\n            </div>\n          )}\n        </Button>\n        {previewUrl && (\n          <Button\n            onClick={() => removeFile(files[0]?.id)}\n            size=\"icon\"\n            className=\"absolute -top-2 -right-2 size-6 rounded-full border-2 border-background shadow-none focus-visible:border-background\"\n            aria-label=\"Remove image\"\n          >\n            <XIcon className=\"size-3.5\" />\n          </Button>\n        )}\n        <input\n          {...getInputProps()}\n          className=\"sr-only\"\n          aria-label=\"Upload image file\"\n          tabIndex={-1}\n        />\n      </div>\n      {fileName && <p className=\"text-xs text-muted-foreground\">{fileName}</p>}\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Avatar upload button\n      </p>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    },
-    {
-      "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": [
-      "button",
-      "upload",
-      "user",
-      "avatar",
-      "profile",
-      "image"
-    ],
-    "style": 2
-  }
-}

package/public/r/comp-127.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-127",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-127.tsx",
-      "content": "import {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CircleIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <div className=\"inline-grid w-fit grid-cols-3 gap-1\">\n      <Button\n        className=\"col-start-2\"\n        variant=\"outline\"\n        size=\"icon\"\n        aria-label=\"Pan camera up\"\n      >\n        <ChevronUpIcon size={16} aria-hidden=\"true\" />\n      </Button>\n      <Button\n        className=\"col-start-1\"\n        variant=\"outline\"\n        size=\"icon\"\n        aria-label=\"Pan camera left\"\n      >\n        <ChevronLeftIcon size={16} aria-hidden=\"true\" />\n      </Button>\n      <div className=\"flex items-center justify-center\" aria-hidden=\"true\">\n        <CircleIcon className=\"opacity-60\" size={16} />\n      </div>\n      <Button variant=\"outline\" size=\"icon\" aria-label=\"Pan camera right\">\n        <ChevronRightIcon size={16} aria-hidden=\"true\" />\n      </Button>\n      <Button\n        className=\"col-start-2\"\n        variant=\"outline\"\n        size=\"icon\"\n        aria-label=\"Pan camera down\"\n      >\n        <ChevronDownIcon size={16} aria-hidden=\"true\" />\n      </Button>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "button"
-    ],
-    "style": 2
-  }
-}

package/public/r/comp-128.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-128",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-128.tsx",
-      "content": "import { ChevronRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <Button className=\"group h-auto gap-4 py-3 text-left\" variant=\"outline\">\n      <div className=\"space-y-1\">\n        <h3>Talent Agency</h3>\n        <p className=\"font-normal whitespace-break-spaces text-muted-foreground\">\n          Matches for your roster\n        </p>\n      </div>\n      <ChevronRightIcon\n        className=\"opacity-60 transition-transform group-hover:translate-x-0.5\"\n        size={16}\n        aria-hidden=\"true\"\n      />\n    </Button>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "button"
-    ],
-    "style": 2
-  }
-}

package/public/r/comp-129.json

@@ -1,24 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-129",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/badge.json",
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-129.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { BellIcon } from \"lucide-react\"\n\nimport { Badge } from \"@/registry/building-blocks/default/ui/badge\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  const [count, setCount] = useState(3)\n\n  const handleClick = () => {\n    setCount(0)\n  }\n\n  return (\n    <Button\n      variant=\"outline\"\n      size=\"icon\"\n      className=\"relative\"\n      onClick={handleClick}\n      aria-label=\"Notifications\"\n    >\n      <BellIcon size={16} aria-hidden=\"true\" />\n      {count > 0 && (\n        <Badge className=\"absolute -top-2 left-full min-w-5 -translate-x-1/2 px-1\">\n          {count > 99 ? \"99+\" : count}\n        </Badge>\n      )}\n    </Button>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "button",
-      "dropdown",
-      "notification"
-    ],
-    "style": 2
-  }
-}