love-ui 1.2.12 → 1.2.14

package/public/r/comp-220.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-220",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/select.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-220.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/building-blocks/default/ui/select\"\n\nfunction StatusDot({ className }: { className?: string }) {\n  return (\n    <svg\n      width=\"8\"\n      height=\"8\"\n      fill=\"currentColor\"\n      viewBox=\"0 0 8 8\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"4\" cy=\"4\" r=\"4\" />\n    </svg>\n  )\n}\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Status select</Label>\n      <Select defaultValue=\"1\">\n        <SelectTrigger\n          id={id}\n          className=\"[&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0\"\n        >\n          <SelectValue placeholder=\"Select status\" />\n        </SelectTrigger>\n        <SelectContent className=\"[&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]>span>svg]:shrink-0 [&_*[role=option]>span>svg]:text-muted-foreground/80\">\n          <SelectItem value=\"1\">\n            <span className=\"flex items-center gap-2\">\n              <StatusDot className=\"text-emerald-600\" />\n              <span className=\"truncate\">Completed</span>\n            </span>\n          </SelectItem>\n          <SelectItem value=\"2\">\n            <span className=\"flex items-center gap-2\">\n              <StatusDot className=\"text-blue-500\" />\n              <span className=\"truncate\">In Progress</span>\n            </span>\n          </SelectItem>\n          <SelectItem value=\"3\">\n            <span className=\"flex items-center gap-2\">\n              <StatusDot className=\"text-amber-500\" />\n              <span className=\"truncate\">Pending</span>\n            </span>\n          </SelectItem>\n          <SelectItem value=\"4\">\n            <span className=\"flex items-center gap-2\">\n              <StatusDot className=\"text-gray-500\" />\n              <span className=\"truncate\">Cancelled</span>\n            </span>\n          </SelectItem>\n          <SelectItem value=\"5\">\n            <span className=\"flex items-center gap-2\">\n              <StatusDot className=\"text-red-500\" />\n              <span className=\"truncate\">Failed</span>\n            </span>\n          </SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "select",
+      "status",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-221.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-221",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/select.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-221.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\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  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with left text</Label>\n      <Select defaultValue=\"1\">\n        <SelectTrigger id={id}>\n          <span>\n            Language: <SelectValue placeholder=\"Select a language\" />\n          </span>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem value=\"1\">Javascript</SelectItem>\n          <SelectItem value=\"2\">Bash</SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "select",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-222.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-222",
+  "type": "registry:component",
+  "dependencies": [
+    "@remixicon/react"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/select.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-222.tsx",
+      "content": "import { useId } from \"react\"\nimport { RiGatsbyLine, RiNextjsLine, RiReactjsLine } from \"@remixicon/react\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\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  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Options with icon</Label>\n      <Select defaultValue=\"3\">\n        <SelectTrigger\n          id={id}\n          className=\"[&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80\"\n        >\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent className=\"[&_*[role=option]>span]:flex [&_*[role=option]>span]:gap-2 [&_*[role=option]>span>svg]:shrink-0 [&_*[role=option]>span>svg]:text-muted-foreground/80\">\n          <SelectItem value=\"1\">\n            <RiReactjsLine size={16} aria-hidden=\"true\" />\n            <span className=\"truncate\">React</span>\n          </SelectItem>\n          <SelectItem value=\"2\">\n            <RiNextjsLine size={16} aria-hidden=\"true\" />\n            <span className=\"truncate\">Next.js</span>\n          </SelectItem>\n          <SelectItem value=\"3\">\n            <RiGatsbyLine size={16} aria-hidden=\"true\" />\n            <span className=\"truncate\">Gatsby</span>\n          </SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "select",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-223.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-223",
+  "type": "registry:component",
+  "dependencies": [
+    "@remixicon/react"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/select.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-223.tsx",
+      "content": "import { useId } from \"react\"\nimport { RiGatsbyLine, RiNextjsLine, RiReactjsLine } from \"@remixicon/react\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\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  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Options with icon and right indicator</Label>\n      <Select defaultValue=\"2\">\n        <SelectTrigger\n          id={id}\n          className=\"[&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80\"\n        >\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent className=\"[&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]>span>svg]:shrink-0 [&_*[role=option]>span>svg]:text-muted-foreground/80\">\n          <SelectItem value=\"1\">\n            <RiReactjsLine size={16} aria-hidden=\"true\" />\n            <span className=\"truncate\">React</span>\n          </SelectItem>\n          <SelectItem value=\"2\">\n            <RiNextjsLine size={16} aria-hidden=\"true\" />\n            <span className=\"truncate\">Next.js</span>\n          </SelectItem>\n          <SelectItem value=\"3\">\n            <RiGatsbyLine size={16} aria-hidden=\"true\" />\n            <span className=\"truncate\">Gatsby</span>\n          </SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "select",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-224.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-224",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/select.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-224.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\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  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with description and right indicator</Label>\n      <Select defaultValue=\"2\">\n        <SelectTrigger id={id} className=\"**:data-desc:hidden\">\n          <SelectValue placeholder=\"Choose a plan\" />\n        </SelectTrigger>\n        <SelectContent className=\"[&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2\">\n          <SelectItem value=\"1\">\n            Standard Plan\n            <span\n              className=\"mt-1 block text-xs text-muted-foreground\"\n              data-desc\n            >\n              Ideal for individuals\n            </span>\n          </SelectItem>\n          <SelectItem value=\"2\">\n            Pro Plan\n            <span\n              className=\"mt-1 block text-xs text-muted-foreground\"\n              data-desc\n            >\n              For professional users\n            </span>\n          </SelectItem>\n          <SelectItem value=\"3\">\n            Enterprise Plan\n            <span\n              className=\"mt-1 block text-xs text-muted-foreground\"\n              data-desc\n            >\n              Built for large teams\n            </span>\n          </SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "select",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-225.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-225",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/select.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-225.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/building-blocks/default/ui/select\"\n\nconst countries = [\n  {\n    continent: \"America\",\n    items: [\n      { value: \"1\", label: \"United States\", flag: \"🇺🇸\" },\n      { value: \"2\", label: \"Canada\", flag: \"🇨🇦\" },\n      { value: \"3\", label: \"Mexico\", flag: \"🇲🇽\" },\n    ],\n  },\n  {\n    continent: \"Africa\",\n    items: [\n      { value: \"4\", label: \"South Africa\", flag: \"🇿🇦\" },\n      { value: \"5\", label: \"Nigeria\", flag: \"🇳🇬\" },\n      { value: \"6\", label: \"Morocco\", flag: \"🇲🇦\" },\n    ],\n  },\n  {\n    continent: \"Asia\",\n    items: [\n      { value: \"7\", label: \"China\", flag: \"🇨🇳\" },\n      { value: \"8\", label: \"Japan\", flag: \"🇯🇵\" },\n      { value: \"9\", label: \"India\", flag: \"🇮🇳\" },\n    ],\n  },\n  {\n    continent: \"Europe\",\n    items: [\n      { value: \"10\", label: \"United Kingdom\", flag: \"🇬🇧\" },\n      { value: \"11\", label: \"France\", flag: \"🇫🇷\" },\n      { value: \"12\", label: \"Germany\", flag: \"🇩🇪\" },\n    ],\n  },\n  {\n    continent: \"Oceania\",\n    items: [\n      { value: \"13\", label: \"Australia\", flag: \"🇦🇺\" },\n      { value: \"14\", label: \"New Zealand\", flag: \"🇳🇿\" },\n    ],\n  },\n]\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Options with flag</Label>\n      <Select defaultValue=\"2\">\n        <SelectTrigger\n          id={id}\n          className=\"[&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80\"\n        >\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent className=\"[&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]>span>svg]:shrink-0 [&_*[role=option]>span>svg]:text-muted-foreground/80\">\n          {countries.map((continent) => (\n            <SelectGroup key={continent.continent}>\n              <SelectLabel className=\"ps-2\">{continent.continent}</SelectLabel>\n              {continent.items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  <span className=\"text-lg leading-none\">{item.flag}</span>{\" \"}\n                  <span className=\"truncate\">{item.label}</span>\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          ))}\n        </SelectContent>\n      </Select>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "select",
+      "flag",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-226.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-226",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/select.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-226.tsx",
+      "content": "import { useId } from \"react\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/building-blocks/default/ui/select\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Options with avatar</Label>\n      <Select defaultValue=\"1\">\n        <SelectTrigger\n          id={id}\n          className=\"ps-2 [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_img]:shrink-0\"\n        >\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent className=\"[&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2\">\n          <SelectGroup>\n            <SelectLabel className=\"ps-2\">Impersonate user</SelectLabel>\n            <SelectItem value=\"1\">\n              <img\n                className=\"size-5 rounded\"\n                src={\"https://i.pravatar.cc/160?img=1\"}\n                alt=\"Frank Allison\"\n                width={20}\n                height={20}\n              />\n              <span className=\"truncate\">Connor Love</span>\n            </SelectItem>\n            <SelectItem value=\"2\">\n              <img\n                className=\"size-5 rounded\"\n                src={\"https://github.com/monster0506.png\"}\n                alt=\"Xavier Guerra\"\n                width={20}\n                height={20}\n              />\n              <span className=\"truncate\">Thomas Raklovits</span>\n            </SelectItem>\n            <SelectItem value=\"3\">\n              <img\n                className=\"size-5 rounded\"\n                src={\"https://i.pravatar.cc/160?img=3\"}\n                alt=\"Anne Kelley\"\n                width={20}\n                height={20}\n              />\n              <span className=\"truncate\">Ian Schroeter</span>\n            </SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "select",
+      "user",
+      "avatar",
+      "profile",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-227.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-227",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/select.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-227.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/building-blocks/default/ui/select\"\n\nconst Square = ({\n  className,\n  children,\n}: {\n  className?: string\n  children: React.ReactNode\n}) => (\n  <span\n    data-square\n    className={cn(\n      \"flex size-5 items-center justify-center rounded bg-muted text-xs font-medium text-muted-foreground\",\n      className\n    )}\n    aria-hidden=\"true\"\n  >\n    {children}\n  </span>\n)\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Options with placeholder avatar</Label>\n      <Select defaultValue=\"1\">\n        <SelectTrigger\n          id={id}\n          className=\"ps-2 [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_[data-square]]:shrink-0\"\n        >\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent className=\"[&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2\">\n          <SelectGroup>\n            <SelectLabel className=\"ps-2\">Impersonate user</SelectLabel>\n            <SelectItem value=\"1\">\n              <Square className=\"bg-indigo-400/20 text-indigo-500\">F</Square>\n              <span className=\"truncate\">Connor Love</span>\n            </SelectItem>\n            <SelectItem value=\"2\">\n              <Square className=\"bg-purple-400/20 text-purple-500\">X</Square>\n              <span className=\"truncate\">Xavier Guerra</span>\n            </SelectItem>\n            <SelectItem value=\"3\">\n              <Square className=\"bg-rose-400/20 text-rose-500\">A</Square>\n              <span className=\"truncate\">Anne Kelley</span>\n            </SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "select",
+      "user",
+      "avatar",
+      "profile",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-228.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-228",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/select.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-228.tsx",
+      "content": "import { useId } from \"react\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\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  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Options with portrait</Label>\n      <Select defaultValue=\"1\">\n        <SelectTrigger\n          id={id}\n          className=\"h-auto ps-2 text-left [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_img]:shrink-0\"\n        >\n          <SelectValue placeholder=\"Choose a plan\" />\n        </SelectTrigger>\n        <SelectContent className=\"[&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2\">\n          <SelectItem value=\"1\">\n            <span className=\"flex items-center gap-2\">\n              <img\n                className=\"rounded-full\"\n                src={\"https://i.pravatar.cc/160?img=8\"}\n                alt=\"Connor Love\"\n                width={40}\n                height={40}\n              />\n              <span>\n                <span className=\"block font-medium\">Connor Love</span>\n                <span className=\"mt-0.5 block text-xs text-muted-foreground\">\n                  @loveconnor\n                </span>\n              </span>\n            </span>\n          </SelectItem>\n          <SelectItem value=\"2\">\n            <span className=\"flex items-center gap-2\">\n              <img\n                className=\"rounded-full\"\n                src={\"https://i.pravatar.cc/160?img=9\"}\n                alt=\"Thomas Raklovits\"\n                width={40}\n                height={40}\n              />\n              <span>\n                <span className=\"block font-medium\">Thomas Raklovits</span>\n                <span className=\"mt-0.5 block text-xs text-muted-foreground\">\n                  @monster0506\n                </span>\n              </span>\n            </span>\n          </SelectItem>\n          <SelectItem value=\"3\">\n            <span className=\"flex items-center gap-2\">\n              <img\n                className=\"rounded-full\"\n                src={\"https://i.pravatar.cc/160?img=10\"}\n                alt=\"Ian Schroeter\"\n                width={40}\n                height={40}\n              />\n              <span>\n                <span className=\"block font-medium\">Ian Schroeter</span>\n                <span className=\"mt-0.5 block text-xs text-muted-foreground\">\n                  @ischroeter\n                </span>\n              </span>\n            </span>\n          </SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "select",
+      "user",
+      "avatar",
+      "profile",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-229.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-229",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/command.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/popover.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-229.tsx",
+      "content": "\"use client\"\n\nimport { useId, useState } from \"react\"\nimport { CheckIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/building-blocks/default/ui/command\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n  {\n    value: \"angular\",\n    label: \"Angular\",\n  },\n  {\n    value: \"vue\",\n    label: \"Vue.js\",\n  },\n  {\n    value: \"react\",\n    label: \"React\",\n  },\n  {\n    value: \"ember\",\n    label: \"Ember.js\",\n  },\n  {\n    value: \"gatsby\",\n    label: \"Gatsby\",\n  },\n  {\n    value: \"eleventy\",\n    label: \"Eleventy\",\n  },\n  {\n    value: \"solid\",\n    label: \"SolidJS\",\n  },\n  {\n    value: \"preact\",\n    label: \"Preact\",\n  },\n  {\n    value: \"qwik\",\n    label: \"Qwik\",\n  },\n  {\n    value: \"alpine\",\n    label: \"Alpine.js\",\n  },\n  {\n    value: \"lit\",\n    label: \"Lit\",\n  },\n]\n\nexport default function Component() {\n  const id = useId()\n  const [open, setOpen] = useState<boolean>(false)\n  const [value, setValue] = useState<string>(\"\")\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with search</Label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            variant=\"outline\"\n            role=\"combobox\"\n            aria-expanded={open}\n            className=\"w-full justify-between border-input bg-background px-3 font-normal outline-offset-0 outline-none hover:bg-background focus-visible:outline-[3px]\"\n          >\n            <span className={cn(\"truncate\", !value && \"text-muted-foreground\")}>\n              {value\n                ? frameworks.find((framework) => framework.value === value)\n                    ?.label\n                : \"Select framework\"}\n            </span>\n            <ChevronDownIcon\n              size={16}\n              className=\"shrink-0 text-muted-foreground/80\"\n              aria-hidden=\"true\"\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-full min-w-[var(--radix-popper-anchor-width)] border-input p-0\"\n          align=\"start\"\n        >\n          <Command>\n            <CommandInput placeholder=\"Search framework...\" />\n            <CommandList>\n              <CommandEmpty>No framework found.</CommandEmpty>\n              <CommandGroup>\n                {frameworks.map((framework) => (\n                  <CommandItem\n                    key={framework.value}\n                    value={framework.value}\n                    onSelect={(currentValue) => {\n                      setValue(currentValue === value ? \"\" : currentValue)\n                      setOpen(false)\n                    }}\n                  >\n                    {framework.label}\n                    {value === framework.value && (\n                      <CheckIcon size={16} className=\"ml-auto\" />\n                    )}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "select",
+      "command",
+      "combobox",
+      "popover",
+      "search",
+      "autocomplete",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-23.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-23",
+  "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-23.tsx",
+      "content": "\"use client\"\n\nimport { useId, useState } from \"react\"\nimport { EyeIcon, EyeOffIcon } from \"lucide-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  const [isVisible, setIsVisible] = useState<boolean>(false)\n\n  const toggleVisibility = () => setIsVisible((prevState) => !prevState)\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Show/hide password input</Label>\n      <div className=\"relative\">\n        <Input\n          id={id}\n          className=\"pe-9\"\n          placeholder=\"Password\"\n          type={isVisible ? \"text\" : \"password\"}\n        />\n        <button\n          className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 transition-[color,box-shadow] outline-none hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n          type=\"button\"\n          onClick={toggleVisibility}\n          aria-label={isVisible ? \"Hide password\" : \"Show password\"}\n          aria-pressed={isVisible}\n          aria-controls=\"password\"\n        >\n          {isVisible ? (\n            <EyeOffIcon size={16} aria-hidden=\"true\" />\n          ) : (\n            <EyeIcon size={16} aria-hidden=\"true\" />\n          )}\n        </button>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label",
+      "button",
+      "password"
+    ]
+  }
+}

package/public/r/comp-230.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-230",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/command.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/popover.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-230.tsx",
+      "content": "\"use client\"\n\nimport { useId, useState } from \"react\"\nimport { CheckIcon, ChevronDownIcon, PlusIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"@/registry/building-blocks/default/ui/command\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\nconst organizations = [\n  {\n    value: \"loveui\",\n    label: \"loveui\",\n  },\n  {\n    value: \"cruip\",\n    label: \"Cruip\",\n  },\n]\n\nexport default function Component() {\n  const id = useId()\n  const [open, setOpen] = useState<boolean>(false)\n  const [value, setValue] = useState<string>(\"loveui\")\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with search and button</Label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            variant=\"outline\"\n            role=\"combobox\"\n            aria-expanded={open}\n            className=\"w-full justify-between border-input bg-background px-3 font-normal outline-offset-0 outline-none hover:bg-background focus-visible:outline-[3px]\"\n          >\n            <span className={cn(\"truncate\", !value && \"text-muted-foreground\")}>\n              {value\n                ? organizations.find(\n                    (organization) => organization.value === value\n                  )?.label\n                : \"Select organization\"}\n            </span>\n            <ChevronDownIcon\n              size={16}\n              className=\"shrink-0 text-muted-foreground/80\"\n              aria-hidden=\"true\"\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-full min-w-[var(--radix-popper-anchor-width)] border-input p-0\"\n          align=\"start\"\n        >\n          <Command>\n            <CommandInput placeholder=\"Find organization\" />\n            <CommandList>\n              <CommandEmpty>No organization found.</CommandEmpty>\n              <CommandGroup>\n                {organizations.map((organization) => (\n                  <CommandItem\n                    key={organization.value}\n                    value={organization.value}\n                    onSelect={(currentValue) => {\n                      setValue(currentValue === value ? \"\" : currentValue)\n                      setOpen(false)\n                    }}\n                  >\n                    {organization.label}\n                    {value === organization.value && (\n                      <CheckIcon size={16} className=\"ml-auto\" />\n                    )}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup>\n                <Button\n                  variant=\"ghost\"\n                  className=\"w-full justify-start font-normal\"\n                >\n                  <PlusIcon\n                    size={16}\n                    className=\"-ms-2 opacity-60\"\n                    aria-hidden=\"true\"\n                  />\n                  New organization\n                </Button>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "select",
+      "command",
+      "combobox",
+      "popover",
+      "search",
+      "autocomplete",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-231.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-231",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/command.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/popover.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-231.tsx",
+      "content": "\"use client\"\n\nimport { useId, useMemo, useState } from \"react\"\nimport { CheckIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/building-blocks/default/ui/command\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\nexport default function Component() {\n  const id = useId()\n  const [open, setOpen] = useState<boolean>(false)\n  const [value, setValue] = useState<string>(\"Europe/London\")\n\n  const timezones = Intl.supportedValuesOf(\"timeZone\")\n\n  const formattedTimezones = useMemo(() => {\n    return timezones\n      .map((timezone) => {\n        const formatter = new Intl.DateTimeFormat(\"en\", {\n          timeZone: timezone,\n          timeZoneName: \"shortOffset\",\n        })\n        const parts = formatter.formatToParts(new Date())\n        const offset =\n          parts.find((part) => part.type === \"timeZoneName\")?.value || \"\"\n        const modifiedOffset = offset === \"GMT\" ? \"GMT+0\" : offset\n\n        return {\n          value: timezone,\n          label: `(${modifiedOffset}) ${timezone.replace(/_/g, \" \")}`,\n          numericOffset: parseInt(\n            offset.replace(\"GMT\", \"\").replace(\"+\", \"\") || \"0\"\n          ),\n        }\n      })\n      .sort((a, b) => a.numericOffset - b.numericOffset)\n  }, [timezones])\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Timezone select with search</Label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            variant=\"outline\"\n            role=\"combobox\"\n            aria-expanded={open}\n            className=\"w-full justify-between border-input bg-background px-3 font-normal outline-offset-0 outline-none hover:bg-background focus-visible:outline-[3px]\"\n          >\n            <span className={cn(\"truncate\", !value && \"text-muted-foreground\")}>\n              {value\n                ? formattedTimezones.find(\n                    (timezone) => timezone.value === value\n                  )?.label\n                : \"Select timezone\"}\n            </span>\n            <ChevronDownIcon\n              size={16}\n              className=\"shrink-0 text-muted-foreground/80\"\n              aria-hidden=\"true\"\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-full min-w-[var(--radix-popper-anchor-width)] border-input p-0\"\n          align=\"start\"\n        >\n          <Command\n            filter={(value, search) => {\n              const normalizedValue = value.toLowerCase()\n              const normalizedSearch = search.toLowerCase().replace(/\\s+/g, \"\")\n              return normalizedValue.includes(normalizedSearch) ? 1 : 0\n            }}\n          >\n            <CommandInput placeholder=\"Search timezone...\" />\n            <CommandList>\n              <CommandEmpty>No timezone found.</CommandEmpty>\n              <CommandGroup>\n                {formattedTimezones.map(({ value: itemValue, label }) => (\n                  <CommandItem\n                    key={itemValue}\n                    value={itemValue}\n                    onSelect={(currentValue) => {\n                      setValue(currentValue === value ? \"\" : currentValue)\n                      setOpen(false)\n                    }}\n                  >\n                    {label}\n                    {value === itemValue && (\n                      <CheckIcon size={16} className=\"ml-auto\" />\n                    )}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "select",
+      "command",
+      "combobox",
+      "popover",
+      "search",
+      "autocomplete",
+      "timezone",
+      "time",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-232.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-232",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/command.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/popover.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-232.tsx",
+      "content": "\"use client\"\n\nimport { Fragment, useId, useState } from \"react\"\nimport { CheckIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/building-blocks/default/ui/command\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\nconst countries = [\n  {\n    continent: \"America\",\n    items: [\n      { value: \"United States\", flag: \"🇺🇸\" },\n      { value: \"Canada\", flag: \"🇨🇦\" },\n      { value: \"Mexico\", flag: \"🇲🇽\" },\n    ],\n  },\n  {\n    continent: \"Africa\",\n    items: [\n      { value: \"South Africa\", flag: \"🇿🇦\" },\n      { value: \"Nigeria\", flag: \"🇳🇬\" },\n      { value: \"Morocco\", flag: \"🇲🇦\" },\n    ],\n  },\n  {\n    continent: \"Asia\",\n    items: [\n      { value: \"China\", flag: \"🇨🇳\" },\n      { value: \"Japan\", flag: \"🇯🇵\" },\n      { value: \"India\", flag: \"🇮🇳\" },\n    ],\n  },\n  {\n    continent: \"Europe\",\n    items: [\n      { value: \"United Kingdom\", flag: \"🇬🇧\" },\n      { value: \"France\", flag: \"🇫🇷\" },\n      { value: \"Germany\", flag: \"🇩🇪\" },\n    ],\n  },\n  {\n    continent: \"Oceania\",\n    items: [\n      { value: \"Australia\", flag: \"🇦🇺\" },\n      { value: \"New Zealand\", flag: \"🇳🇿\" },\n    ],\n  },\n]\n\nexport default function Component() {\n  const id = useId()\n  const [open, setOpen] = useState<boolean>(false)\n  const [value, setValue] = useState<string>(\"\")\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Options with flag and search</Label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            variant=\"outline\"\n            role=\"combobox\"\n            aria-expanded={open}\n            className=\"w-full justify-between border-input bg-background px-3 font-normal outline-offset-0 outline-none hover:bg-background focus-visible:outline-[3px]\"\n          >\n            {value ? (\n              <span className=\"flex min-w-0 items-center gap-2\">\n                <span className=\"text-lg leading-none\">\n                  {\n                    countries\n                      .map((group) =>\n                        group.items.find((item) => item.value === value)\n                      )\n                      .filter(Boolean)[0]?.flag\n                  }\n                </span>\n                <span className=\"truncate\">{value}</span>\n              </span>\n            ) : (\n              <span className=\"text-muted-foreground\">Select country</span>\n            )}\n            <ChevronDownIcon\n              size={16}\n              className=\"shrink-0 text-muted-foreground/80\"\n              aria-hidden=\"true\"\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-full min-w-[var(--radix-popper-anchor-width)] border-input p-0\"\n          align=\"start\"\n        >\n          <Command>\n            <CommandInput placeholder=\"Search country...\" />\n            <CommandList>\n              <CommandEmpty>No country found.</CommandEmpty>\n              {countries.map((group) => (\n                <Fragment key={group.continent}>\n                  <CommandGroup heading={group.continent}>\n                    {group.items.map((country) => (\n                      <CommandItem\n                        key={country.value}\n                        value={country.value}\n                        onSelect={(currentValue) => {\n                          setValue(currentValue)\n                          setOpen(false)\n                        }}\n                      >\n                        <span className=\"text-lg leading-none\">\n                          {country.flag}\n                        </span>{\" \"}\n                        {country.value}\n                        {value === country.value && (\n                          <CheckIcon size={16} className=\"ml-auto\" />\n                        )}\n                      </CommandItem>\n                    ))}\n                  </CommandGroup>\n                </Fragment>\n              ))}\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "select",
+      "command",
+      "combobox",
+      "popover",
+      "search",
+      "autocomplete",
+      "flag",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-233.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-233",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/command.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/popover.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-233.tsx",
+      "content": "\"use client\"\n\nimport { useId, useState } from \"react\"\nimport {\n  BlocksIcon,\n  BrainIcon,\n  ChevronDownIcon,\n  CpuIcon,\n  DatabaseIcon,\n  GlobeIcon,\n  LayoutIcon,\n  LineChartIcon,\n  NetworkIcon,\n  SearchIcon,\n  ServerIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/building-blocks/default/ui/command\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\nconst items = [\n  {\n    value: \"analytics platform\",\n    label: \"Analytics Platform\",\n    icon: LineChartIcon,\n    number: 2451,\n  },\n  {\n    value: \"ai services\",\n    label: \"AI Services\",\n    icon: BrainIcon,\n    number: 1832,\n  },\n  {\n    value: \"database systems\",\n    label: \"Database Systems\",\n    icon: DatabaseIcon,\n    number: 1654,\n  },\n  {\n    value: \"compute resources\",\n    label: \"Compute Resources\",\n    icon: CpuIcon,\n    number: 943,\n  },\n  {\n    value: \"network services\",\n    label: \"Network Services\",\n    icon: NetworkIcon,\n    number: 832,\n  },\n  {\n    value: \"web services\",\n    label: \"Web Services\",\n    icon: GlobeIcon,\n    number: 654,\n  },\n  {\n    value: \"monitoring tools\",\n    label: \"Monitoring Tools\",\n    icon: SearchIcon,\n    number: 432,\n  },\n  {\n    value: \"server management\",\n    label: \"Server Management\",\n    icon: ServerIcon,\n    number: 321,\n  },\n  {\n    value: \"infrastructure\",\n    label: \"Infrastructure\",\n    icon: BlocksIcon,\n    number: 234,\n  },\n  {\n    value: \"frontend services\",\n    label: \"Frontend Services\",\n    icon: LayoutIcon,\n    number: 123,\n  },\n]\n\nexport default function Component() {\n  const id = useId()\n  const [open, setOpen] = useState<boolean>(false)\n  const [value, setValue] = useState<string>(\"\")\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Options with icon and number</Label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            variant=\"outline\"\n            role=\"combobox\"\n            aria-expanded={open}\n            className=\"w-full justify-between border-input bg-background px-3 font-normal outline-offset-0 outline-none hover:bg-background focus-visible:outline-[3px]\"\n          >\n            {value ? (\n              <span className=\"flex min-w-0 items-center gap-2\">\n                {(() => {\n                  const selectedItem = items.find(\n                    (item) => item.value === value\n                  )\n                  if (selectedItem) {\n                    const Icon = selectedItem.icon\n                    return <Icon className=\"size-4 text-muted-foreground\" />\n                  }\n                  return null\n                })()}\n                <span className=\"truncate\">\n                  {items.find((item) => item.value === value)?.label}\n                </span>\n              </span>\n            ) : (\n              <span className=\"text-muted-foreground\">\n                Select service category\n              </span>\n            )}\n            <ChevronDownIcon\n              size={16}\n              className=\"shrink-0 text-muted-foreground/80\"\n              aria-hidden=\"true\"\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-full min-w-[var(--radix-popper-anchor-width)] border-input p-0\"\n          align=\"start\"\n        >\n          <Command>\n            <CommandInput placeholder=\"Search services...\" />\n            <CommandList>\n              <CommandEmpty>No service found.</CommandEmpty>\n              <CommandGroup>\n                {items.map((item) => (\n                  <CommandItem\n                    key={item.value}\n                    value={item.value}\n                    onSelect={(currentValue) => {\n                      setValue(currentValue === value ? \"\" : currentValue)\n                      setOpen(false)\n                    }}\n                    className=\"flex items-center justify-between\"\n                  >\n                    <div className=\"flex items-center gap-2\">\n                      <item.icon className=\"size-4 text-muted-foreground\" />\n                      {item.label}\n                    </div>\n                    <span className=\"text-xs text-muted-foreground\">\n                      {item.number.toLocaleString()}\n                    </span>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "select",
+      "command",
+      "combobox",
+      "popover",
+      "search",
+      "autocomplete",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-234.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-234",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/multiselect.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-234.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport MultipleSelector, { Option } from \"@/registry/building-blocks/default/ui/multiselect\"\n\nconst frameworks: Option[] = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n    disable: true,\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n  {\n    value: \"angular\",\n    label: \"Angular\",\n  },\n  {\n    value: \"vue\",\n    label: \"Vue.js\",\n  },\n  {\n    value: \"react\",\n    label: \"React\",\n  },\n  {\n    value: \"ember\",\n    label: \"Ember.js\",\n  },\n  {\n    value: \"gatsby\",\n    label: \"Gatsby\",\n  },\n  {\n    value: \"eleventy\",\n    label: \"Eleventy\",\n    disable: true,\n  },\n  {\n    value: \"solid\",\n    label: \"SolidJS\",\n  },\n  {\n    value: \"preact\",\n    label: \"Preact\",\n  },\n  {\n    value: \"qwik\",\n    label: \"Qwik\",\n  },\n  {\n    value: \"alpine\",\n    label: \"Alpine.js\",\n  },\n  {\n    value: \"lit\",\n    label: \"Lit\",\n  },\n]\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label>Multiselect</Label>\n      <MultipleSelector\n        commandProps={{\n          label: \"Select frameworks\",\n        }}\n        value={frameworks.slice(0, 2)}\n        defaultOptions={frameworks}\n        placeholder=\"Select frameworks\"\n        hideClearAllButton\n        hidePlaceholderWhenSelected\n        emptyIndicator={<p className=\"text-center text-sm\">No results found</p>}\n      />\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Inspired by{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://shadcnui-expansions.typeart.cc/docs/multiple-selector\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          shadcn/ui expansions\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "select",
+      "multiselect",
+      "tag",
+      "input",
+      "search",
+      "autocomplete",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-235.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-235",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/multiselect.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-235.tsx",
+      "content": "import { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport MultipleSelector, { Option } from \"@/registry/building-blocks/default/ui/multiselect\"\n\nconst frameworks: Option[] = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n  {\n    value: \"angular\",\n    label: \"Angular\",\n  },\n  {\n    value: \"vue\",\n    label: \"Vue.js\",\n  },\n  {\n    value: \"react\",\n    label: \"React\",\n  },\n  {\n    value: \"ember\",\n    label: \"Ember.js\",\n  },\n  {\n    value: \"gatsby\",\n    label: \"Gatsby\",\n  },\n  {\n    value: \"eleventy\",\n    label: \"Eleventy\",\n  },\n  {\n    value: \"solid\",\n    label: \"SolidJS\",\n  },\n  {\n    value: \"preact\",\n    label: \"Preact\",\n  },\n  {\n    value: \"qwik\",\n    label: \"Qwik\",\n  },\n  {\n    value: \"alpine\",\n    label: \"Alpine.js\",\n  },\n  {\n    value: \"lit\",\n    label: \"Lit\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label>Multiselect with placeholder and clear</Label>\n      <MultipleSelector\n        commandProps={{\n          label: \"Select frameworks\",\n        }}\n        defaultOptions={frameworks}\n        placeholder=\"Select frameworks\"\n        emptyIndicator={<p className=\"text-center text-sm\">No results found</p>}\n      />\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Inspired by{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://shadcnui-expansions.typeart.cc/docs/multiple-selector\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          shadcn/ui expansions\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "select",
+      "multiselect",
+      "tag",
+      "input",
+      "search",
+      "autocomplete",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-236.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-236",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/select-native.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-236.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { SelectNative } from \"@/registry/building-blocks/default/ui/select-native\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Multiple select (native)</Label>\n      <div className=\"overflow-hidden rounded-md border border-input\">\n        <SelectNative id={id} multiple className=\"rounded-none border-none\">\n          <option value=\"1\">React</option>\n          <option value=\"2\">Next.js</option>\n          <option value=\"3\">Astro</option>\n          <option value=\"4\">Gatsby</option>\n          <option value=\"5\">Vue</option>\n          <option value=\"6\">Angular</option>\n        </SelectNative>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "select",
+      "multiselect",
+      "native select"
+    ]
+  }
+}