love-ui 1.2.12 → 1.2.14

package/public/r/comp-444.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-444",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/tabs.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-444.tsx",
+      "content": "import { BoxIcon, HouseIcon, PanelsTopLeftIcon } from \"lucide-react\"\n\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/building-blocks/default/ui/tabs\"\n\nexport default function Component() {\n  return (\n    <Tabs\n      defaultValue=\"tab-1\"\n      orientation=\"vertical\"\n      className=\"w-full flex-row\"\n    >\n      <TabsList className=\"flex-col gap-1 rounded-none bg-transparent px-1 py-0 text-foreground\">\n        <TabsTrigger\n          value=\"tab-1\"\n          className=\"relative w-full justify-start after:absolute after:inset-y-0 after:start-0 after:-ms-1 after:w-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary data-[state=active]:hover:bg-accent\"\n        >\n          <HouseIcon\n            className=\"-ms-0.5 me-1.5 opacity-60\"\n            size={16}\n            aria-hidden=\"true\"\n          />\n          Overview\n        </TabsTrigger>\n        <TabsTrigger\n          value=\"tab-2\"\n          className=\"relative w-full justify-start after:absolute after:inset-y-0 after:start-0 after:-ms-1 after:w-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary data-[state=active]:hover:bg-accent\"\n        >\n          <PanelsTopLeftIcon\n            className=\"-ms-0.5 me-1.5 opacity-60\"\n            size={16}\n            aria-hidden=\"true\"\n          />\n          Projects\n        </TabsTrigger>\n        <TabsTrigger\n          value=\"tab-3\"\n          className=\"relative w-full justify-start after:absolute after:inset-y-0 after:start-0 after:-ms-1 after:w-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary data-[state=active]:hover:bg-accent\"\n        >\n          <BoxIcon\n            className=\"-ms-0.5 me-1.5 opacity-60\"\n            size={16}\n            aria-hidden=\"true\"\n          />\n          Packages\n        </TabsTrigger>\n      </TabsList>\n      <div className=\"grow rounded-md border text-start\">\n        <TabsContent value=\"tab-1\">\n          <p className=\"px-4 py-3 text-xs text-muted-foreground\">\n            Content for Tab 1\n          </p>\n        </TabsContent>\n        <TabsContent value=\"tab-2\">\n          <p className=\"px-4 py-3 text-xs text-muted-foreground\">\n            Content for Tab 2\n          </p>\n        </TabsContent>\n        <TabsContent value=\"tab-3\">\n          <p className=\"px-4 py-3 text-xs text-muted-foreground\">\n            Content for Tab 3\n          </p>\n        </TabsContent>\n      </div>\n    </Tabs>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "tabs",
+      "vertical tabs",
+      "radix"
+    ],
+    "colSpan": 2,
+    "style": 2
+  }
+}

package/public/r/comp-445.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-445",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/tabs.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-445.tsx",
+      "content": "import {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/building-blocks/default/ui/tabs\"\n\nexport default function Component() {\n  return (\n    <Tabs\n      defaultValue=\"tab-1\"\n      orientation=\"vertical\"\n      className=\"w-full flex-row\"\n    >\n      <TabsList className=\"flex-col gap-1 bg-transparent py-0\">\n        <TabsTrigger\n          value=\"tab-1\"\n          className=\"w-full justify-start data-[state=active]:bg-muted data-[state=active]:shadow-none\"\n        >\n          Overview\n        </TabsTrigger>\n        <TabsTrigger\n          value=\"tab-2\"\n          className=\"w-full justify-start data-[state=active]:bg-muted data-[state=active]:shadow-none\"\n        >\n          Projects\n        </TabsTrigger>\n        <TabsTrigger\n          value=\"tab-3\"\n          className=\"w-full justify-start data-[state=active]:bg-muted data-[state=active]:shadow-none\"\n        >\n          Packages\n        </TabsTrigger>\n      </TabsList>\n      <div className=\"grow rounded-md border text-start\">\n        <TabsContent value=\"tab-1\">\n          <p className=\"px-4 py-3 text-xs text-muted-foreground\">\n            Content for Tab 1\n          </p>\n        </TabsContent>\n        <TabsContent value=\"tab-2\">\n          <p className=\"px-4 py-3 text-xs text-muted-foreground\">\n            Content for Tab 2\n          </p>\n        </TabsContent>\n        <TabsContent value=\"tab-3\">\n          <p className=\"px-4 py-3 text-xs text-muted-foreground\">\n            Content for Tab 3\n          </p>\n        </TabsContent>\n      </div>\n    </Tabs>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "tabs",
+      "vertical tabs",
+      "radix"
+    ],
+    "colSpan": 2,
+    "style": 2
+  }
+}

package/public/r/comp-446.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-446",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/breadcrumb.json",
+    "https://loveui.dev/building-blocks/r/dropdown-menu.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-446.tsx",
+      "content": "import {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/building-blocks/default/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\n\nexport default function Component() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"hover:text-foreground\">\n              <BreadcrumbEllipsis />\n              <span className=\"sr-only\">Toggle menu</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem asChild>\n                <a href=\"#\">Documentation</a>\n              </DropdownMenuItem>\n              <DropdownMenuItem asChild>\n                <a href=\"#\">Themes</a>\n              </DropdownMenuItem>\n              <DropdownMenuItem asChild>\n                <a href=\"#\">GitHub</a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "breadcrumb",
+      "radix"
+    ],
+    "colSpan": 2,
+    "style": 1
+  }
+}

package/public/r/comp-447.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-447",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/breadcrumb.json",
+    "https://loveui.dev/building-blocks/r/dropdown-menu.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-447.tsx",
+      "content": "import { FoldersIcon } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/building-blocks/default/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\n\nexport default function Component() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"hover:text-foreground\">\n              <span\n                role=\"presentation\"\n                aria-hidden=\"true\"\n                className=\"flex size-5 items-center justify-center\"\n              >\n                <FoldersIcon size={16} />\n              </span>\n              <span className=\"sr-only\">Toggle menu</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem asChild>\n                <a href=\"#\">Documentation</a>\n              </DropdownMenuItem>\n              <DropdownMenuItem asChild>\n                <a href=\"#\">Themes</a>\n              </DropdownMenuItem>\n              <DropdownMenuItem asChild>\n                <a href=\"#\">GitHub</a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "breadcrumb",
+      "dropdown",
+      "radix"
+    ],
+    "colSpan": 2,
+    "style": 1
+  }
+}

package/public/r/comp-448.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-448",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/breadcrumb.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-448.tsx",
+      "content": "import { HomeIcon } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/building-blocks/default/ui/breadcrumb\"\n\nexport default function Component() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">\n            <HomeIcon size={16} aria-hidden=\"true\" />\n            <span className=\"sr-only\">Home</span>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "breadcrumb",
+      "radix"
+    ],
+    "colSpan": 2,
+    "style": 1
+  }
+}

package/public/r/comp-449.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-449",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/breadcrumb.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-449.tsx",
+      "content": "import { ComponentIcon, HomeIcon } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/building-blocks/default/ui/breadcrumb\"\n\nexport default function Component() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\" className=\"inline-flex items-center gap-1.5\">\n            <HomeIcon size={16} aria-hidden=\"true\" />\n            Home\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\" className=\"inline-flex items-center gap-1.5\">\n            <ComponentIcon size={16} aria-hidden=\"true\" />\n            Components\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "breadcrumb",
+      "radix"
+    ],
+    "colSpan": 2,
+    "style": 1
+  }
+}

package/public/r/comp-45.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-45",
+  "type": "registry:component",
+  "dependencies": [
+    "input-otp"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-45.tsx",
+      "content": "\"use client\"\n\nimport { useId } from \"react\"\nimport { OTPInput, SlotProps } from \"input-otp\"\nimport { MinusIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\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}>OTP input double</Label>\n      <OTPInput\n        id={id}\n        containerClassName=\"flex items-center gap-3 has-disabled:opacity-50\"\n        maxLength={6}\n        render={({ slots }) => (\n          <>\n            <div className=\"flex\">\n              {slots.slice(0, 3).map((slot, idx) => (\n                <Slot key={idx} {...slot} />\n              ))}\n            </div>\n\n            <div className=\"text-muted-foreground/80\">\n              <MinusIcon size={16} aria-hidden=\"true\" />\n            </div>\n\n            <div className=\"flex\">\n              {slots.slice(3).map((slot, idx) => (\n                <Slot key={idx} {...slot} />\n              ))}\n            </div>\n          </>\n        )}\n      />\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/guilhermerodz/input-otp\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          Input OTP\n        </a>\n      </p>\n    </div>\n  )\n}\n\nfunction Slot(props: SlotProps) {\n  return (\n    <div\n      className={cn(\n        \"relative -ms-px flex size-9 items-center justify-center border border-input bg-background font-medium text-foreground shadow-xs transition-[color,box-shadow] first:ms-0 first:rounded-s-md last:rounded-e-md\",\n        { \"z-10 border-ring ring-[3px] ring-ring/50\": props.isActive }\n      )}\n    >\n      {props.char !== null && <div>{props.char}</div>}\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label",
+      "otp"
+    ]
+  }
+}

package/public/r/comp-450.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-450",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/breadcrumb.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-450.tsx",
+      "content": "import { HomeIcon } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/building-blocks/default/ui/breadcrumb\"\n\nexport default function Component() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">\n            <HomeIcon size={16} aria-hidden=\"true\" />\n            <span className=\"sr-only\">Home</span>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator> / </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator> / </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "breadcrumb",
+      "radix"
+    ],
+    "colSpan": 2,
+    "style": 1
+  }
+}

package/public/r/comp-451.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-451",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/breadcrumb.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-451.tsx",
+      "content": "import { HomeIcon } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/building-blocks/default/ui/breadcrumb\"\n\nexport default function Component() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">\n            <HomeIcon size={16} aria-hidden=\"true\" />\n            <span className=\"sr-only\">Home</span>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator> · </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator> · </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "breadcrumb",
+      "radix"
+    ],
+    "colSpan": 2,
+    "style": 1
+  }
+}

package/public/r/comp-452.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-452",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/breadcrumb.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-452.tsx",
+      "content": "import { HomeIcon } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/building-blocks/default/ui/breadcrumb\"\n\nexport default function Component() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList className=\"rounded-md border bg-background px-3 py-2 shadow-xs\">\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">\n            <HomeIcon size={16} aria-hidden=\"true\" />\n            <span className=\"sr-only\">Home</span>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "breadcrumb",
+      "radix"
+    ],
+    "colSpan": 2,
+    "style": 1
+  }
+}

package/public/r/comp-453.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-453",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/breadcrumb.json",
+    "https://loveui.dev/building-blocks/r/select.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-453.tsx",
+      "content": "import { DatabaseIcon } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbSeparator,\n} from \"@/registry/building-blocks/default/ui/breadcrumb\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/building-blocks/default/ui/select\"\n\nexport default function Component() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Databases</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <Select defaultValue=\"1\">\n            <SelectTrigger\n              id=\"select-database\"\n              className=\"relative gap-2 ps-9\"\n              aria-label=\"Select database\"\n            >\n              <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 group-has-[select[disabled]]:opacity-50\">\n                <DatabaseIcon size={16} aria-hidden=\"true\" />\n              </div>\n              <SelectValue placeholder=\"Select database\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"1\">Orion</SelectItem>\n              <SelectItem value=\"2\">Sigma</SelectItem>\n              <SelectItem value=\"3\">Dorado</SelectItem>\n            </SelectContent>\n          </Select>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "breadcrumb",
+      "select",
+      "radix"
+    ],
+    "colSpan": 2,
+    "style": 1
+  }
+}

package/public/r/comp-454.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-454",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/pagination.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-454.tsx",
+      "content": "import { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/building-blocks/default/ui/pagination\"\n\ntype PaginationProps = {\n  currentPage: number\n  totalPages: number\n}\n\nexport default function Component({\n  currentPage,\n  totalPages,\n}: PaginationProps) {\n  return (\n    <Pagination>\n      <PaginationContent className=\"w-full justify-between gap-3\">\n        <PaginationItem>\n          <Button\n            variant=\"outline\"\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            aria-disabled={currentPage === 1 ? true : undefined}\n            role={currentPage === 1 ? \"link\" : undefined}\n            asChild\n          >\n            <a\n              href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\n            >\n              <ChevronLeftIcon\n                className=\"-ms-1 opacity-60\"\n                size={16}\n                aria-hidden=\"true\"\n              />\n              Previous\n            </a>\n          </Button>\n        </PaginationItem>\n        <PaginationItem>\n          <Button\n            variant=\"outline\"\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            aria-disabled={currentPage === totalPages ? true : undefined}\n            role={currentPage === totalPages ? \"link\" : undefined}\n            asChild\n          >\n            <a\n              href={\n                currentPage === totalPages\n                  ? undefined\n                  : `#/page/${currentPage + 1}`\n              }\n            >\n              Next\n              <ChevronRightIcon\n                className=\"-me-1 opacity-60\"\n                size={16}\n                aria-hidden=\"true\"\n              />\n            </a>\n          </Button>\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "pagination"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-455.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-455",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/pagination.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-455.tsx",
+      "content": "import { ArrowLeftIcon, ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/building-blocks/default/ui/pagination\"\n\ntype PaginationProps = {\n  currentPage: number\n  totalPages: number\n}\n\nexport default function Component({\n  currentPage,\n  totalPages,\n}: PaginationProps) {\n  return (\n    <Pagination>\n      <PaginationContent className=\"w-full justify-between gap-3\">\n        <PaginationItem>\n          <Button\n            variant=\"ghost\"\n            className=\"group aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            aria-disabled={currentPage === 1 ? true : undefined}\n            role={currentPage === 1 ? \"link\" : undefined}\n          >\n            <ArrowLeftIcon\n              className=\"-ms-1 opacity-60 transition-transform group-hover:-translate-x-0.5\"\n              size={16}\n              aria-hidden=\"true\"\n            />\n            Previous\n          </Button>\n        </PaginationItem>\n        <PaginationItem>\n          <Button\n            variant=\"ghost\"\n            className=\"group aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            aria-disabled={currentPage === totalPages ? true : undefined}\n            role={currentPage === totalPages ? \"link\" : undefined}\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        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "pagination"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-456.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-456",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/pagination.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-456.tsx",
+      "content": "import { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { buttonVariants } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n} from \"@/registry/building-blocks/default/ui/pagination\"\n\ntype PaginationProps = {\n  currentPage: number\n  totalPages: number\n}\n\nexport default function Component({\n  currentPage,\n  totalPages,\n}: PaginationProps) {\n  return (\n    <Pagination>\n      <PaginationContent className=\"w-full justify-between\">\n        <PaginationItem>\n          <PaginationLink\n            className={cn(\n              \"aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n              buttonVariants({\n                variant: \"outline\",\n              })\n            )}\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\n            aria-label=\"Go to previous page\"\n            aria-disabled={currentPage === 1 ? true : undefined}\n            role={currentPage === 1 ? \"link\" : undefined}\n          >\n            <ChevronLeftIcon size={16} aria-hidden=\"true\" />\n          </PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <p className=\"text-sm text-muted-foreground\" aria-live=\"polite\">\n            Page <span className=\"text-foreground\">{currentPage}</span> of{\" \"}\n            <span className=\"text-foreground\">{totalPages}</span>\n          </p>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink\n            className={cn(\n              \"aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n              buttonVariants({\n                variant: \"outline\",\n              })\n            )}\n            href={\n              currentPage === totalPages\n                ? undefined\n                : `#/page/${currentPage + 1}`\n            }\n            aria-label=\"Go to next page\"\n            aria-disabled={currentPage === totalPages ? true : undefined}\n            role={currentPage === totalPages ? \"link\" : undefined}\n          >\n            <ChevronRightIcon size={16} aria-hidden=\"true\" />\n          </PaginationLink>\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "pagination"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-457.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-457",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/pagination.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-457.tsx",
+      "content": "import { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\n\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n} from \"@/registry/building-blocks/default/ui/pagination\"\n\ntype PaginationProps = {\n  currentPage: number\n  totalPages: number\n}\n\nexport default function Component({\n  currentPage,\n  totalPages,\n}: PaginationProps) {\n  return (\n    <Pagination>\n      <PaginationContent className=\"gap-3\">\n        <PaginationItem>\n          <PaginationLink\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\n            aria-label=\"Go to previous page\"\n            aria-disabled={currentPage === 1 ? true : undefined}\n            role={currentPage === 1 ? \"link\" : undefined}\n          >\n            <ChevronLeftIcon size={16} aria-hidden=\"true\" />\n          </PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <p className=\"text-sm text-muted-foreground\" aria-live=\"polite\">\n            Page <span className=\"text-foreground\">{currentPage}</span> of{\" \"}\n            <span className=\"text-foreground\">{totalPages}</span>\n          </p>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            href={\n              currentPage === totalPages\n                ? undefined\n                : `#/page/${currentPage + 1}`\n            }\n            aria-label=\"Go to next page\"\n            aria-disabled={currentPage === totalPages ? true : undefined}\n            role={currentPage === totalPages ? \"link\" : undefined}\n          >\n            <ChevronRightIcon size={16} aria-hidden=\"true\" />\n          </PaginationLink>\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "pagination"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-458.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-458",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/pagination.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-458.tsx",
+      "content": "import { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/building-blocks/default/ui/pagination\"\n\ntype PaginationProps = {\n  currentPage: number\n  totalPages: number\n}\n\nexport default function Component({\n  currentPage,\n  totalPages,\n}: PaginationProps) {\n  return (\n    <div className=\"flex items-center justify-between gap-3\">\n      <p className=\"grow text-sm text-muted-foreground\" aria-live=\"polite\">\n        Page <span className=\"text-foreground\">{currentPage}</span> of{\" \"}\n        <span className=\"text-foreground\">{totalPages}</span>\n      </p>\n      <Pagination className=\"w-auto\">\n        <PaginationContent className=\"gap-3\">\n          <PaginationItem>\n            <Button\n              variant=\"outline\"\n              className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n              aria-disabled={currentPage === 1 ? true : undefined}\n              role={currentPage === 1 ? \"link\" : undefined}\n              asChild\n            >\n              <a\n                href={\n                  currentPage === 1 ? undefined : `#/page/${currentPage - 1}`\n                }\n              >\n                Previous\n              </a>\n            </Button>\n          </PaginationItem>\n          <PaginationItem>\n            <Button\n              variant=\"outline\"\n              className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n              aria-disabled={currentPage === totalPages ? true : undefined}\n              role={currentPage === totalPages ? \"link\" : undefined}\n              asChild\n            >\n              <a\n                href={\n                  currentPage === totalPages\n                    ? undefined\n                    : `#/page/${currentPage + 1}`\n                }\n              >\n                Next\n              </a>\n            </Button>\n          </PaginationItem>\n        </PaginationContent>\n      </Pagination>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "pagination"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-459.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-459",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/pagination.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-459.tsx",
+      "content": "import { usePagination } from \"@/registry/building-blocks/default/hooks/use-pagination\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/building-blocks/default/ui/pagination\"\n\ntype PaginationProps = {\n  currentPage: number\n  totalPages: number\n  paginationItemsToDisplay?: number\n}\n\nexport default function Component({\n  currentPage,\n  totalPages,\n  paginationItemsToDisplay = 5,\n}: PaginationProps) {\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\n    currentPage,\n    totalPages,\n    paginationItemsToDisplay,\n  })\n\n  return (\n    <Pagination>\n      <PaginationContent>\n        {/* Previous page button */}\n        <PaginationItem>\n          <PaginationPrevious\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\n            aria-disabled={currentPage === 1 ? true : undefined}\n            role={currentPage === 1 ? \"link\" : undefined}\n          />\n        </PaginationItem>\n\n        {/* Left ellipsis (...) */}\n        {showLeftEllipsis && (\n          <PaginationItem>\n            <PaginationEllipsis />\n          </PaginationItem>\n        )}\n\n        {/* Page number links */}\n        {pages.map((page) => (\n          <PaginationItem key={page}>\n            <PaginationLink\n              href={`#/page/${page}`}\n              isActive={page === currentPage}\n            >\n              {page}\n            </PaginationLink>\n          </PaginationItem>\n        ))}\n\n        {/* Right ellipsis (...) */}\n        {showRightEllipsis && (\n          <PaginationItem>\n            <PaginationEllipsis />\n          </PaginationItem>\n        )}\n\n        {/* Next page button */}\n        <PaginationItem>\n          <PaginationNext\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            href={\n              currentPage === totalPages\n                ? undefined\n                : `#/page/${currentPage + 1}`\n            }\n            aria-disabled={currentPage === totalPages ? true : undefined}\n            role={currentPage === totalPages ? \"link\" : undefined}\n          />\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/hooks/use-pagination.ts",
+      "content": "type UsePaginationProps = {\n  currentPage: number\n  totalPages: number\n  paginationItemsToDisplay: number\n}\n\ntype UsePaginationReturn = {\n  pages: number[]\n  showLeftEllipsis: boolean\n  showRightEllipsis: boolean\n}\n\nexport function usePagination({\n  currentPage,\n  totalPages,\n  paginationItemsToDisplay,\n}: UsePaginationProps): UsePaginationReturn {\n  const showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2\n  const showRightEllipsis =\n    totalPages - currentPage + 1 > paginationItemsToDisplay / 2\n\n  function calculatePaginationRange(): number[] {\n    if (totalPages <= paginationItemsToDisplay) {\n      return Array.from({ length: totalPages }, (_, i) => i + 1)\n    }\n\n    const halfDisplay = Math.floor(paginationItemsToDisplay / 2)\n    const initialRange = {\n      start: currentPage - halfDisplay,\n      end: currentPage + halfDisplay,\n    }\n\n    const adjustedRange = {\n      start: Math.max(1, initialRange.start),\n      end: Math.min(totalPages, initialRange.end),\n    }\n\n    if (adjustedRange.start === 1) {\n      adjustedRange.end = paginationItemsToDisplay\n    }\n    if (adjustedRange.end === totalPages) {\n      adjustedRange.start = totalPages - paginationItemsToDisplay + 1\n    }\n\n    if (showLeftEllipsis) adjustedRange.start++\n    if (showRightEllipsis) adjustedRange.end--\n\n    return Array.from(\n      { length: adjustedRange.end - adjustedRange.start + 1 },\n      (_, i) => adjustedRange.start + i\n    )\n  }\n\n  const pages = calculatePaginationRange()\n\n  return {\n    pages,\n    showLeftEllipsis,\n    showRightEllipsis,\n  }\n}\n",
+      "type": "registry:hook"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "pagination"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-46.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-46",
+  "type": "registry:component",
+  "dependencies": [
+    "react-phone-number-input"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-46.tsx",
+      "content": "\"use client\"\n\nimport React, { useId, useState } from \"react\"\nimport { ChevronDownIcon, PhoneIcon } from \"lucide-react\"\nimport * as RPNInput from \"react-phone-number-input\"\nimport flags from \"react-phone-number-input/flags\"\n\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\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 [value, setValue] = useState(\"\")\n\n  return (\n    <div className=\"*:not-first:mt-2\" dir=\"ltr\">\n      <Label htmlFor={id}>PhoneIcon number input</Label>\n      <RPNInput.default\n        className=\"flex rounded-md shadow-xs\"\n        international\n        flagComponent={FlagComponent}\n        countrySelectComponent={CountrySelect}\n        inputComponent={PhoneInput}\n        id={id}\n        placeholder=\"Enter phone number\"\n        value={value}\n        onChange={(newValue) => setValue(newValue ?? \"\")}\n      />\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://gitlab.com/catamphetamine/react-phone-number-input\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          react-phone-number-input\n        </a>\n      </p>\n    </div>\n  )\n}\n\nconst PhoneInput = ({ className, ...props }: React.ComponentProps<\"input\">) => {\n  return (\n    <Input\n      data-slot=\"phone-input\"\n      className={cn(\n        \"-ms-px rounded-s-none shadow-none focus-visible:z-10\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nPhoneInput.displayName = \"PhoneInput\"\n\ntype CountrySelectProps = {\n  disabled?: boolean\n  value: RPNInput.Country\n  onChange: (value: RPNInput.Country) => void\n  options: { label: string; value: RPNInput.Country | undefined }[]\n}\n\nconst CountrySelect = ({\n  disabled,\n  value,\n  onChange,\n  options,\n}: CountrySelectProps) => {\n  const handleSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    onChange(event.target.value as RPNInput.Country)\n  }\n\n  return (\n    <div className=\"relative inline-flex items-center self-stretch rounded-s-md border border-input bg-background py-2 ps-3 pe-2 text-muted-foreground transition-[color,box-shadow] outline-none focus-within:z-10 focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 hover:bg-accent hover:text-foreground has-disabled:pointer-events-none has-disabled:opacity-50 has-aria-invalid:border-destructive/60 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\">\n      <div className=\"inline-flex items-center gap-1\" aria-hidden=\"true\">\n        <FlagComponent country={value} countryName={value} aria-hidden=\"true\" />\n        <span className=\"text-muted-foreground/80\">\n          <ChevronDownIcon size={16} aria-hidden=\"true\" />\n        </span>\n      </div>\n      <select\n        disabled={disabled}\n        value={value}\n        onChange={handleSelect}\n        className=\"absolute inset-0 text-sm opacity-0\"\n        aria-label=\"Select country\"\n      >\n        <option key=\"default\" value=\"\">\n          Select a country\n        </option>\n        {options\n          .filter((x) => x.value)\n          .map((option, i) => (\n            <option key={option.value ?? `empty-${i}`} value={option.value}>\n              {option.label}{\" \"}\n              {option.value &&\n                `+${RPNInput.getCountryCallingCode(option.value)}`}\n            </option>\n          ))}\n      </select>\n    </div>\n  )\n}\n\nconst FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {\n  const Flag = flags[country]\n\n  return (\n    <span className=\"w-5 overflow-hidden rounded-sm\">\n      {Flag ? (\n        <Flag title={countryName} />\n      ) : (\n        <PhoneIcon size={16} aria-hidden=\"true\" />\n      )}\n    </span>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label",
+      "phone"
+    ]
+  }
+}

package/public/r/comp-460.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-460",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/pagination.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-460.tsx",
+      "content": "import {\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\n\nimport { usePagination } from \"@/registry/building-blocks/default/hooks/use-pagination\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n} from \"@/registry/building-blocks/default/ui/pagination\"\n\ntype PaginationProps = {\n  currentPage: number\n  totalPages: number\n  paginationItemsToDisplay?: number\n}\n\nexport default function Component({\n  currentPage,\n  totalPages,\n  paginationItemsToDisplay = 5,\n}: PaginationProps) {\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\n    currentPage,\n    totalPages,\n    paginationItemsToDisplay,\n  })\n\n  return (\n    <Pagination>\n      <PaginationContent>\n        {/* First page button */}\n        <PaginationItem>\n          <PaginationLink\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\n            aria-label=\"Go to first page\"\n            aria-disabled={currentPage === 1 ? true : undefined}\n            role={currentPage === 1 ? \"link\" : undefined}\n          >\n            <ChevronFirstIcon size={16} aria-hidden=\"true\" />\n          </PaginationLink>\n        </PaginationItem>\n\n        {/* Previous page button */}\n        <PaginationItem>\n          <PaginationLink\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\n            aria-label=\"Go to previous page\"\n            aria-disabled={currentPage === 1 ? true : undefined}\n            role={currentPage === 1 ? \"link\" : undefined}\n          >\n            <ChevronLeftIcon size={16} aria-hidden=\"true\" />\n          </PaginationLink>\n        </PaginationItem>\n\n        {/* Left ellipsis (...) */}\n        {showLeftEllipsis && (\n          <PaginationItem>\n            <PaginationEllipsis />\n          </PaginationItem>\n        )}\n\n        {/* Page number links */}\n        {pages.map((page) => (\n          <PaginationItem key={page}>\n            <PaginationLink\n              href={`#/page/${page}`}\n              isActive={page === currentPage}\n            >\n              {page}\n            </PaginationLink>\n          </PaginationItem>\n        ))}\n\n        {/* Right ellipsis (...) */}\n        {showRightEllipsis && (\n          <PaginationItem>\n            <PaginationEllipsis />\n          </PaginationItem>\n        )}\n\n        {/* Next page button */}\n        <PaginationItem>\n          <PaginationLink\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            href={\n              currentPage === totalPages\n                ? undefined\n                : `#/page/${currentPage + 1}`\n            }\n            aria-label=\"Go to next page\"\n            aria-disabled={currentPage === totalPages ? true : undefined}\n            role={currentPage === totalPages ? \"link\" : undefined}\n          >\n            <ChevronRightIcon size={16} aria-hidden=\"true\" />\n          </PaginationLink>\n        </PaginationItem>\n\n        {/* Last page button */}\n        <PaginationItem>\n          <PaginationLink\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            href={\n              currentPage === totalPages ? undefined : `#/page/${totalPages}`\n            }\n            aria-label=\"Go to last page\"\n            aria-disabled={currentPage === totalPages ? true : undefined}\n            role={currentPage === totalPages ? \"link\" : undefined}\n          >\n            <ChevronLastIcon size={16} aria-hidden=\"true\" />\n          </PaginationLink>\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/hooks/use-pagination.ts",
+      "content": "type UsePaginationProps = {\n  currentPage: number\n  totalPages: number\n  paginationItemsToDisplay: number\n}\n\ntype UsePaginationReturn = {\n  pages: number[]\n  showLeftEllipsis: boolean\n  showRightEllipsis: boolean\n}\n\nexport function usePagination({\n  currentPage,\n  totalPages,\n  paginationItemsToDisplay,\n}: UsePaginationProps): UsePaginationReturn {\n  const showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2\n  const showRightEllipsis =\n    totalPages - currentPage + 1 > paginationItemsToDisplay / 2\n\n  function calculatePaginationRange(): number[] {\n    if (totalPages <= paginationItemsToDisplay) {\n      return Array.from({ length: totalPages }, (_, i) => i + 1)\n    }\n\n    const halfDisplay = Math.floor(paginationItemsToDisplay / 2)\n    const initialRange = {\n      start: currentPage - halfDisplay,\n      end: currentPage + halfDisplay,\n    }\n\n    const adjustedRange = {\n      start: Math.max(1, initialRange.start),\n      end: Math.min(totalPages, initialRange.end),\n    }\n\n    if (adjustedRange.start === 1) {\n      adjustedRange.end = paginationItemsToDisplay\n    }\n    if (adjustedRange.end === totalPages) {\n      adjustedRange.start = totalPages - paginationItemsToDisplay + 1\n    }\n\n    if (showLeftEllipsis) adjustedRange.start++\n    if (showRightEllipsis) adjustedRange.end--\n\n    return Array.from(\n      { length: adjustedRange.end - adjustedRange.start + 1 },\n      (_, i) => adjustedRange.start + i\n    )\n  }\n\n  const pages = calculatePaginationRange()\n\n  return {\n    pages,\n    showLeftEllipsis,\n    showRightEllipsis,\n  }\n}\n",
+      "type": "registry:hook"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "pagination"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-461.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-461",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/pagination.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-461.tsx",
+      "content": "import { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\n\nimport { usePagination } from \"@/registry/building-blocks/default/hooks/use-pagination\"\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { buttonVariants } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n} from \"@/registry/building-blocks/default/ui/pagination\"\n\ntype PaginationProps = {\n  currentPage: number\n  totalPages: number\n  paginationItemsToDisplay?: number\n}\n\nexport default function Component({\n  currentPage,\n  totalPages,\n  paginationItemsToDisplay = 5,\n}: PaginationProps) {\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\n    currentPage,\n    totalPages,\n    paginationItemsToDisplay,\n  })\n\n  return (\n    <Pagination>\n      <PaginationContent className=\"inline-flex gap-0 -space-x-px rounded-md shadow-xs rtl:space-x-reverse\">\n        {/* Previous page button */}\n        <PaginationItem className=\"[&:first-child>a]:rounded-s-md [&:last-child>a]:rounded-e-md\">\n          <PaginationLink\n            className={cn(\n              buttonVariants({\n                variant: \"outline\",\n              }),\n              \"rounded-none shadow-none focus-visible:z-10 aria-disabled:pointer-events-none [&[aria-disabled]>svg]:opacity-50\"\n            )}\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\n            aria-label=\"Go to previous page\"\n            aria-disabled={currentPage === 1 ? true : undefined}\n            role={currentPage === 1 ? \"link\" : undefined}\n          >\n            <ChevronLeftIcon size={16} aria-hidden=\"true\" />\n          </PaginationLink>\n        </PaginationItem>\n\n        {/* Left ellipsis (...) */}\n        {showLeftEllipsis && (\n          <PaginationItem className=\"[&:first-child>a]:rounded-s-md [&:last-child>a]:rounded-e-md\">\n            <PaginationEllipsis />\n          </PaginationItem>\n        )}\n\n        {/* Page number links */}\n        {pages.map((page) => (\n          <PaginationItem key={page}>\n            <PaginationLink\n              className={cn(\n                buttonVariants({\n                  variant: \"outline\",\n                }),\n                \"rounded-none shadow-none focus-visible:z-10\",\n                page === currentPage && \"bg-accent\"\n              )}\n              href={`#/page/${page}`}\n              isActive={page === currentPage}\n            >\n              {page}\n            </PaginationLink>\n          </PaginationItem>\n        ))}\n\n        {/* Right ellipsis (...) */}\n        {showRightEllipsis && (\n          <PaginationItem className=\"[&:first-child>a]:rounded-s-md [&:last-child>a]:rounded-e-md\">\n            <PaginationEllipsis\n              className={cn(\n                buttonVariants({\n                  variant: \"outline\",\n                }),\n                \"pointer-events-none rounded-none shadow-none\"\n              )}\n            />\n          </PaginationItem>\n        )}\n\n        {/* Next page button */}\n        <PaginationItem className=\"[&:first-child>a]:rounded-s-md [&:last-child>a]:rounded-e-md\">\n          <PaginationLink\n            className={cn(\n              buttonVariants({\n                variant: \"outline\",\n              }),\n              \"rounded-none shadow-none focus-visible:z-10 aria-disabled:pointer-events-none [&[aria-disabled]>svg]:opacity-50\"\n            )}\n            href={\n              currentPage === totalPages\n                ? undefined\n                : `#/page/${currentPage + 1}`\n            }\n            aria-label=\"Go to next page\"\n            aria-disabled={currentPage === totalPages ? true : undefined}\n            role={currentPage === totalPages ? \"link\" : undefined}\n          >\n            <ChevronRightIcon size={16} aria-hidden=\"true\" />\n          </PaginationLink>\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/hooks/use-pagination.ts",
+      "content": "type UsePaginationProps = {\n  currentPage: number\n  totalPages: number\n  paginationItemsToDisplay: number\n}\n\ntype UsePaginationReturn = {\n  pages: number[]\n  showLeftEllipsis: boolean\n  showRightEllipsis: boolean\n}\n\nexport function usePagination({\n  currentPage,\n  totalPages,\n  paginationItemsToDisplay,\n}: UsePaginationProps): UsePaginationReturn {\n  const showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2\n  const showRightEllipsis =\n    totalPages - currentPage + 1 > paginationItemsToDisplay / 2\n\n  function calculatePaginationRange(): number[] {\n    if (totalPages <= paginationItemsToDisplay) {\n      return Array.from({ length: totalPages }, (_, i) => i + 1)\n    }\n\n    const halfDisplay = Math.floor(paginationItemsToDisplay / 2)\n    const initialRange = {\n      start: currentPage - halfDisplay,\n      end: currentPage + halfDisplay,\n    }\n\n    const adjustedRange = {\n      start: Math.max(1, initialRange.start),\n      end: Math.min(totalPages, initialRange.end),\n    }\n\n    if (adjustedRange.start === 1) {\n      adjustedRange.end = paginationItemsToDisplay\n    }\n    if (adjustedRange.end === totalPages) {\n      adjustedRange.start = totalPages - paginationItemsToDisplay + 1\n    }\n\n    if (showLeftEllipsis) adjustedRange.start++\n    if (showRightEllipsis) adjustedRange.end--\n\n    return Array.from(\n      { length: adjustedRange.end - adjustedRange.start + 1 },\n      (_, i) => adjustedRange.start + i\n    )\n  }\n\n  const pages = calculatePaginationRange()\n\n  return {\n    pages,\n    showLeftEllipsis,\n    showRightEllipsis,\n  }\n}\n",
+      "type": "registry:hook"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "pagination"
+    ],
+    "colSpan": 2
+  }
+}