love-ui 1.2.12 → 1.2.14

package/public/r/comp-237.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-237",
+  "type": "registry:component",
+  "dependencies": [
+    "react-aria-components"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-237.tsx",
+      "content": "\"use client\"\n\nimport { ListBox, ListBoxItem } from \"react-aria-components\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label>Listbox with single option</Label>\n      <div className=\"overflow-hidden rounded-md border border-input\">\n        <ListBox\n          className=\"space-y-1 bg-background p-1 text-sm shadow-xs transition-[color,box-shadow]\"\n          aria-label=\"Select framework\"\n          selectionMode=\"single\"\n          defaultSelectedKeys={[\"svelte\"]}\n        >\n          <ListBoxItem\n            id=\"react\"\n            className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\"\n          >\n            React\n          </ListBoxItem>\n          <ListBoxItem\n            id=\"vue\"\n            className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\"\n          >\n            Vue\n          </ListBoxItem>\n          <ListBoxItem\n            id=\"angular\"\n            className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\"\n            isDisabled\n          >\n            Angular\n          </ListBoxItem>\n          <ListBoxItem\n            id=\"svelte\"\n            className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\"\n          >\n            Svelte\n          </ListBoxItem>\n        </ListBox>\n      </div>\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://react-spectrum.adobe.com/react-aria/ListBox.html\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React Aria\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "select",
+      "multiselect",
+      "react aria"
+    ]
+  }
+}

package/public/r/comp-238.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-238",
+  "type": "registry:component",
+  "dependencies": [
+    "react-aria-components"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-238.tsx",
+      "content": "\"use client\"\n\nimport { ListBox, ListBoxItem } from \"react-aria-components\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label>Listbox with multiple options</Label>\n      <div className=\"overflow-hidden rounded-md border border-input\">\n        <ListBox\n          className=\"max-h-72 min-h-20 space-y-1 overflow-auto bg-background p-1 text-sm shadow-xs transition-[color,box-shadow]\"\n          aria-label=\"Select framework\"\n          selectionMode=\"multiple\"\n          defaultSelectedKeys={[\"react\", \"vue\"]}\n        >\n          <ListBoxItem\n            id=\"react\"\n            className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\"\n          >\n            React\n          </ListBoxItem>\n          <ListBoxItem\n            id=\"vue\"\n            className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\"\n          >\n            Vue\n          </ListBoxItem>\n          <ListBoxItem\n            id=\"angular\"\n            className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\"\n          >\n            Angular\n          </ListBoxItem>\n          <ListBoxItem\n            id=\"svelte\"\n            className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\"\n          >\n            Svelte\n          </ListBoxItem>\n        </ListBox>\n      </div>\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://react-spectrum.adobe.com/react-aria/ListBox.html\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React Aria\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "select",
+      "multiselect",
+      "react aria"
+    ]
+  }
+}

package/public/r/comp-239.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-239",
+  "type": "registry:component",
+  "dependencies": [
+    "react-aria-components"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-239.tsx",
+      "content": "\"use client\"\n\nimport {\n  Header,\n  ListBox,\n  ListBoxItem,\n  ListBoxSection,\n  Separator,\n} from \"react-aria-components\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label>Listbox with option groups</Label>\n      <div className=\"overflow-hidden rounded-md border border-input\">\n        <ListBox\n          className=\"max-h-72 min-h-20 space-y-2 overflow-auto bg-background p-1 text-sm shadow-xs transition-[color,box-shadow]\"\n          aria-label=\"Select some foods\"\n          selectionMode=\"multiple\"\n          defaultSelectedKeys={[\"lettuce\", \"tuna\"]}\n        >\n          <ListBoxSection className=\"space-y-1\">\n            <Header className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n              Veggies\n            </Header>\n            <ListBoxItem\n              id=\"lettuce\"\n              className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\"\n            >\n              Lettuce\n            </ListBoxItem>\n            <ListBoxItem\n              id=\"tomato\"\n              className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\"\n            >\n              Tomato\n            </ListBoxItem>\n            <ListBoxItem\n              id=\"onion\"\n              className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\"\n            >\n              Onion\n            </ListBoxItem>\n          </ListBoxSection>\n          <Separator className=\"-mx-1 my-2 h-px bg-border\" />\n          <ListBoxSection className=\"space-y-1\">\n            <Header className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n              Protein\n            </Header>\n            <ListBoxItem\n              id=\"ham\"\n              className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\"\n            >\n              Ham\n            </ListBoxItem>\n            <ListBoxItem\n              id=\"tuna\"\n              className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\"\n            >\n              Tuna\n            </ListBoxItem>\n            <ListBoxItem\n              id=\"tofu\"\n              className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\"\n            >\n              Tofu\n            </ListBoxItem>\n          </ListBoxSection>\n          <Separator className=\"-mx-1 my-2 h-px bg-border\" />\n          <ListBoxSection className=\"space-y-1\">\n            <Header className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n              Condiments\n            </Header>\n            <ListBoxItem\n              id=\"mayo\"\n              className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\"\n            >\n              Mayonaise\n            </ListBoxItem>\n            <ListBoxItem\n              id=\"mustard\"\n              className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\"\n            >\n              Mustard\n            </ListBoxItem>\n            <ListBoxItem\n              id=\"ranch\"\n              className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\"\n            >\n              Ranch\n            </ListBoxItem>\n          </ListBoxSection>\n        </ListBox>\n      </div>\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://react-spectrum.adobe.com/react-aria/ListBox.html\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React Aria\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "select",
+      "multiselect",
+      "react aria"
+    ]
+  }
+}

package/public/r/comp-24.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-24",
+  "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-24.tsx",
+      "content": "\"use client\"\n\nimport { useId, useRef, useState } from \"react\"\nimport { CircleXIcon } 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 [inputValue, setInputValue] = useState(\"Click to clear\")\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const handleClearInput = () => {\n    setInputValue(\"\")\n    if (inputRef.current) {\n      inputRef.current.focus()\n    }\n  }\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with clear button</Label>\n      <div className=\"relative\">\n        <Input\n          id={id}\n          ref={inputRef}\n          className=\"pe-9\"\n          placeholder=\"Type something...\"\n          type=\"text\"\n          value={inputValue}\n          onChange={(e) => setInputValue(e.target.value)}\n        />\n        {inputValue && (\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            aria-label=\"Clear input\"\n            onClick={handleClearInput}\n          >\n            <CircleXIcon size={16} aria-hidden=\"true\" />\n          </button>\n        )}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label",
+      "button"
+    ]
+  }
+}

package/public/r/comp-240.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-240",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/slider.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-240.tsx",
+      "content": "import { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Slider } from \"@/registry/building-blocks/default/ui/slider\"\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Simple slider</Label>\n      <Slider defaultValue={[25]} aria-label=\"Simple slider\" />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "slider",
+      "label",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-241.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-241",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/slider.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-241.tsx",
+      "content": "import { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Slider } from \"@/registry/building-blocks/default/ui/slider\"\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Disabled slider</Label>\n      <Slider defaultValue={[25]} disabled aria-label=\"Disabled slider\" />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "slider",
+      "label",
+      "disabled",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-242.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-242",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/slider.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-242.tsx",
+      "content": "import { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Slider } from \"@/registry/building-blocks/default/ui/slider\"\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Slider with square thumb</Label>\n      <Slider\n        defaultValue={[25]}\n        max={100}\n        step={10}\n        className=\"[&>:last-child>span]:rounded\"\n        aria-label=\"Slider with square thumb\"\n      />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "slider",
+      "label",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-243.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-243",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/slider.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-243.tsx",
+      "content": "import { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Slider } from \"@/registry/building-blocks/default/ui/slider\"\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Slider with solid thumb</Label>\n      <Slider\n        defaultValue={[25]}\n        className=\"[&>:first-child>span]:opacity-70 [&>:last-child>span]:bg-primary\"\n        aria-label=\"Slider with solid thumb\"\n      />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "slider",
+      "label",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-244.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-244",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/slider.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-244.tsx",
+      "content": "import { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Slider } from \"@/registry/building-blocks/default/ui/slider\"\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Slider with tiny thumb</Label>\n      <Slider\n        defaultValue={[25]}\n        className=\"**:data-[slot=slider-thumb]:shadow-none [&>:last-child>span]:h-6 [&>:last-child>span]:w-2.5 [&>:last-child>span]:border-[3px] [&>:last-child>span]:border-background [&>:last-child>span]:bg-primary [&>:last-child>span]:ring-offset-0\"\n        aria-label=\"Slider with tiny thumb\"\n      />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "slider",
+      "label",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-245.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-245",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/slider.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-245.tsx",
+      "content": "import { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Slider } from \"@/registry/building-blocks/default/ui/slider\"\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Slider with reference labels</Label>\n      <div>\n        <Slider\n          defaultValue={[15]}\n          min={5}\n          max={35}\n          aria-label=\"Slider with reference labels\"\n        />\n        <span\n          className=\"mt-4 flex w-full items-center justify-between gap-1 text-xs font-medium text-muted-foreground\"\n          aria-hidden=\"true\"\n        >\n          <span>5 GB</span>\n          <span>20 GB</span>\n          <span>35 GB</span>\n        </span>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "slider",
+      "label",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-246.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-246",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/slider.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-246.tsx",
+      "content": "import { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Slider } from \"@/registry/building-blocks/default/ui/slider\"\n\nexport default function Component() {\n  const max = 12\n  const skipInterval = 2 // Set to 1 to allow no text skipping\n  const ticks = [...Array(max + 1)].map((_, i) => i)\n\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Slider with ticks</Label>\n      <div>\n        <Slider defaultValue={[5]} max={max} aria-label=\"Slider with ticks\" />\n        <span\n          className=\"mt-3 flex w-full items-center justify-between gap-1 px-2.5 text-xs font-medium text-muted-foreground\"\n          aria-hidden=\"true\"\n        >\n          {ticks.map((_, i) => (\n            <span\n              key={i}\n              className=\"flex w-0 flex-col items-center justify-center gap-2\"\n            >\n              <span\n                className={cn(\n                  \"h-1 w-px bg-muted-foreground/70\",\n                  i % skipInterval !== 0 && \"h-0.5\"\n                )}\n              />\n              <span className={cn(i % skipInterval !== 0 && \"opacity-0\")}>\n                {i}\n              </span>\n            </span>\n          ))}\n        </span>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "slider",
+      "label",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-247.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-247",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/slider.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-247.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Slider } from \"@/registry/building-blocks/default/ui/slider\"\n\nexport default function Component() {\n  const [value, setValue] = useState([25])\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex items-center justify-between gap-2\">\n        <Label className=\"leading-6\">Slider with output</Label>\n        <output className=\"text-sm font-medium tabular-nums\">{value[0]}</output>\n      </div>\n      <Slider\n        value={value}\n        onValueChange={setValue}\n        aria-label=\"Slider with output\"\n      />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "slider",
+      "label",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-248.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-248",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/slider.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-248.tsx",
+      "content": "import { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Slider } from \"@/registry/building-blocks/default/ui/slider\"\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Slider with labels</Label>\n      <div>\n        <span\n          className=\"mb-3 flex w-full items-center justify-between gap-2 text-xs font-medium text-muted-foreground\"\n          aria-hidden=\"true\"\n        >\n          <span>Low</span>\n          <span>High</span>\n        </span>\n        <Slider defaultValue={[50]} step={10} aria-label=\"Slider with labels\" />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "slider",
+      "label",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-249.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-249",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/slider.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-249.tsx",
+      "content": "import { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Slider } from \"@/registry/building-blocks/default/ui/slider\"\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Slider with labels and tooltip</Label>\n      <div>\n        <span\n          className=\"mb-3 flex w-full items-center justify-between gap-2 text-xs font-medium text-muted-foreground\"\n          aria-hidden=\"true\"\n        >\n          <span>Low</span>\n          <span>High</span>\n        </span>\n        <Slider\n          defaultValue={[50]}\n          step={10}\n          showTooltip={true}\n          aria-label=\"Slider with labels and tooltip\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "slider",
+      "label",
+      "tooltip",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-25.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-25",
+  "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-25.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Search input with &lt;kbd&gt;</Label>\n      <div className=\"relative\">\n        <Input\n          id={id}\n          className=\"pe-11\"\n          placeholder=\"Search...\"\n          type=\"search\"\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-2 text-muted-foreground\">\n          <kbd className=\"inline-flex h-5 max-h-full items-center rounded border px-1 font-[inherit] text-[0.625rem] font-medium text-muted-foreground/70\">\n            ⌘K\n          </kbd>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label",
+      "search",
+      "kbd"
+    ]
+  }
+}

package/public/r/comp-250.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-250",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/slider.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-250.tsx",
+      "content": "import { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Slider } from \"@/registry/building-blocks/default/ui/slider\"\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Dual range slider</Label>\n      <Slider\n        defaultValue={[25, 75]}\n        step={10}\n        aria-label=\"Dual range slider\"\n      />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "slider",
+      "range slider",
+      "label",
+      "range",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-251.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-251",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/slider.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-251.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Slider } from \"@/registry/building-blocks/default/ui/slider\"\n\nexport default function Component() {\n  const [value, setValue] = useState([25, 75])\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex items-center justify-between gap-2\">\n        <Label className=\"leading-6\">Dual range slider with output</Label>\n        <output className=\"text-sm font-medium tabular-nums\">\n          {value[0]} - {value[1]}\n        </output>\n      </div>\n      <Slider\n        value={value}\n        onValueChange={setValue}\n        aria-label=\"Dual range slider with output\"\n      />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "slider",
+      "range slider",
+      "label",
+      "range",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-252.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-252",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/slider.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-252.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Volume2Icon, VolumeXIcon } from \"lucide-react\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Slider } from \"@/registry/building-blocks/default/ui/slider\"\n\nexport default function Component() {\n  const [value, setValue] = useState([25])\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex items-center justify-between gap-2\">\n        <Label className=\"leading-6\">Volume</Label>\n        <output className=\"text-sm font-medium tabular-nums\">{value[0]}</output>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <VolumeXIcon\n          className=\"shrink-0 opacity-60\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          aria-label=\"Volume slider\"\n        />\n        <Volume2Icon\n          className=\"shrink-0 opacity-60\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "slider",
+      "label",
+      "volume",
+      "controls",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-253.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-253",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/slider.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-253.tsx",
+      "content": "\"use client\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Slider } from \"@/registry/building-blocks/default/ui/slider\"\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Slider with multiple thumbs</Label>\n      <Slider\n        defaultValue={[25, 50, 100]}\n        aria-label=\"Slider with multiple thumbs\"\n        showTooltip\n        tooltipContent={(value) => `${value}%`}\n      />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "slider",
+      "range slider",
+      "label",
+      "range",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-254.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-254",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/slider.json",
+    "https://loveui.dev/building-blocks/r/tooltip.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-254.tsx",
+      "content": "\"use client\"\n\nimport { RotateCcwIcon } from \"lucide-react\"\n\nimport { useSliderWithInput } from \"@/registry/building-blocks/default/hooks/use-slider-with-input\"\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Slider } from \"@/registry/building-blocks/default/ui/slider\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/building-blocks/default/ui/tooltip\"\n\nexport default function Component() {\n  const minValue = 0\n  const maxValue = 2\n  const initialValue = [1.25]\n  const defaultValue = [1]\n\n  const {\n    sliderValue,\n    inputValues,\n    validateAndUpdateValue,\n    handleInputChange,\n    handleSliderChange,\n    resetToDefault,\n    showReset,\n  } = useSliderWithInput({ minValue, maxValue, initialValue, defaultValue })\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex items-center justify-between gap-2\">\n        <Label>Temperature</Label>\n        <div className=\"flex items-center gap-1\">\n          <TooltipProvider delayDuration={0}>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button\n                  size=\"icon\"\n                  variant=\"ghost\"\n                  className={cn(\n                    \"size-7 transition-opacity\",\n                    showReset ? \"opacity-100\" : \"opacity-0\"\n                  )}\n                  aria-label=\"Reset\"\n                  onClick={resetToDefault}\n                >\n                  <RotateCcwIcon size={16} aria-hidden=\"true\" />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent className=\"px-2 py-1 text-xs\">\n                Reset to default\n              </TooltipContent>\n            </Tooltip>\n          </TooltipProvider>\n          <Input\n            className=\"h-7 w-12 px-2 py-0\"\n            type=\"text\"\n            inputMode=\"decimal\"\n            value={inputValues[0]}\n            onChange={(e) => handleInputChange(e, 0)}\n            onBlur={() => validateAndUpdateValue(inputValues[0] ?? \"\", 0)}\n            onKeyDown={(e) => {\n              if (e.key === \"Enter\") {\n                validateAndUpdateValue(inputValues[0] ?? \"\", 0)\n              }\n            }}\n            aria-label=\"Enter value\"\n          />\n        </div>\n      </div>\n      <div className=\"flex items-center gap-4\">\n        <Slider\n          className=\"grow\"\n          value={sliderValue}\n          onValueChange={handleSliderChange}\n          min={minValue}\n          max={maxValue}\n          step={0.01}\n          aria-label=\"Temperature\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/hooks/use-slider-with-input.ts",
+      "content": "\"use client\"\n\nimport { useCallback, useState } from \"react\"\n\ntype UseSliderWithInputProps = {\n  minValue?: number\n  maxValue?: number\n  initialValue?: number[]\n  defaultValue?: number[]\n}\n\nexport function useSliderWithInput({\n  minValue = 0,\n  maxValue = 100,\n  initialValue = [minValue],\n  defaultValue = [minValue],\n}: UseSliderWithInputProps) {\n  const [sliderValue, setSliderValue] = useState(initialValue)\n  const [inputValues, setInputValues] = useState(\n    initialValue.map((v) => v.toString())\n  )\n\n  const showReset =\n    sliderValue.length === defaultValue.length &&\n    !sliderValue.every((value, index) => value === defaultValue[index])\n\n  const validateAndUpdateValue = useCallback(\n    (rawValue: string, index: number) => {\n      if (rawValue === \"\" || rawValue === \"-\") {\n        const newInputValues = [...inputValues]\n        newInputValues[index] = \"0\"\n        setInputValues(newInputValues)\n\n        const newSliderValues = [...sliderValue]\n        newSliderValues[index] = 0\n        setSliderValue(newSliderValues)\n        return\n      }\n\n      const numValue = parseFloat(rawValue)\n\n      if (isNaN(numValue)) {\n        const newInputValues = [...inputValues]\n        newInputValues[index] = sliderValue[index]!.toString()\n        setInputValues(newInputValues)\n        return\n      }\n\n      let clampedValue = Math.min(maxValue, Math.max(minValue, numValue))\n\n      if (sliderValue.length > 1) {\n        if (index === 0) {\n          clampedValue = Math.min(clampedValue, sliderValue[1]!)\n        } else {\n          clampedValue = Math.max(clampedValue, sliderValue[0]!)\n        }\n      }\n\n      const newSliderValues = [...sliderValue]\n      newSliderValues[index] = clampedValue\n      setSliderValue(newSliderValues)\n\n      const newInputValues = [...inputValues]\n      newInputValues[index] = clampedValue.toString()\n      setInputValues(newInputValues)\n    },\n    [sliderValue, inputValues, minValue, maxValue]\n  )\n\n  const handleInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, index: number) => {\n      const newValue = e.target.value\n      if (newValue === \"\" || /^-?\\d*\\.?\\d*$/.test(newValue)) {\n        const newInputValues = [...inputValues]\n        newInputValues[index] = newValue\n        setInputValues(newInputValues)\n      }\n    },\n    [inputValues]\n  )\n\n  const handleSliderChange = useCallback((newValue: number[]) => {\n    setSliderValue(newValue)\n    setInputValues(newValue.map((v) => v.toString()))\n  }, [])\n\n  const resetToDefault = useCallback(() => {\n    setSliderValue(defaultValue)\n    setInputValues(defaultValue.map((v) => v.toString()))\n  }, [defaultValue])\n\n  return {\n    sliderValue,\n    inputValues,\n    validateAndUpdateValue,\n    handleInputChange,\n    handleSliderChange,\n    resetToDefault,\n    showReset,\n  }\n}\n",
+      "type": "registry:hook"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "slider",
+      "label",
+      "button",
+      "input",
+      "tooltip",
+      "reset",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-255.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-255",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/slider.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-255.tsx",
+      "content": "\"use client\"\n\nimport { useSliderWithInput } from \"@/registry/building-blocks/default/hooks/use-slider-with-input\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Slider } from \"@/registry/building-blocks/default/ui/slider\"\n\nexport default function Component() {\n  const minValue = 0\n  const maxValue = 100\n  const initialValue = [25]\n\n  const {\n    sliderValue,\n    inputValues,\n    validateAndUpdateValue,\n    handleInputChange,\n    handleSliderChange,\n  } = useSliderWithInput({ minValue, maxValue, initialValue })\n\n  return (\n    <div className=\"*:not-first:mt-3\">\n      <Label>Slider with input</Label>\n      <div className=\"flex items-center gap-4\">\n        <Slider\n          className=\"grow\"\n          value={sliderValue}\n          onValueChange={handleSliderChange}\n          min={minValue}\n          max={maxValue}\n          aria-label=\"Slider with input\"\n        />\n        <Input\n          className=\"h-8 w-12 px-2 py-1\"\n          type=\"text\"\n          inputMode=\"decimal\"\n          value={inputValues[0]}\n          onChange={(e) => handleInputChange(e, 0)}\n          onBlur={() => validateAndUpdateValue(inputValues[0], 0)}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\") {\n              validateAndUpdateValue(inputValues[0], 0)\n            }\n          }}\n          aria-label=\"Enter value\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/hooks/use-slider-with-input.ts",
+      "content": "\"use client\"\n\nimport { useCallback, useState } from \"react\"\n\ntype UseSliderWithInputProps = {\n  minValue?: number\n  maxValue?: number\n  initialValue?: number[]\n  defaultValue?: number[]\n}\n\nexport function useSliderWithInput({\n  minValue = 0,\n  maxValue = 100,\n  initialValue = [minValue],\n  defaultValue = [minValue],\n}: UseSliderWithInputProps) {\n  const [sliderValue, setSliderValue] = useState(initialValue)\n  const [inputValues, setInputValues] = useState(\n    initialValue.map((v) => v.toString())\n  )\n\n  const showReset =\n    sliderValue.length === defaultValue.length &&\n    !sliderValue.every((value, index) => value === defaultValue[index])\n\n  const validateAndUpdateValue = useCallback(\n    (rawValue: string, index: number) => {\n      if (rawValue === \"\" || rawValue === \"-\") {\n        const newInputValues = [...inputValues]\n        newInputValues[index] = \"0\"\n        setInputValues(newInputValues)\n\n        const newSliderValues = [...sliderValue]\n        newSliderValues[index] = 0\n        setSliderValue(newSliderValues)\n        return\n      }\n\n      const numValue = parseFloat(rawValue)\n\n      if (isNaN(numValue)) {\n        const newInputValues = [...inputValues]\n        newInputValues[index] = sliderValue[index]!.toString()\n        setInputValues(newInputValues)\n        return\n      }\n\n      let clampedValue = Math.min(maxValue, Math.max(minValue, numValue))\n\n      if (sliderValue.length > 1) {\n        if (index === 0) {\n          clampedValue = Math.min(clampedValue, sliderValue[1]!)\n        } else {\n          clampedValue = Math.max(clampedValue, sliderValue[0]!)\n        }\n      }\n\n      const newSliderValues = [...sliderValue]\n      newSliderValues[index] = clampedValue\n      setSliderValue(newSliderValues)\n\n      const newInputValues = [...inputValues]\n      newInputValues[index] = clampedValue.toString()\n      setInputValues(newInputValues)\n    },\n    [sliderValue, inputValues, minValue, maxValue]\n  )\n\n  const handleInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, index: number) => {\n      const newValue = e.target.value\n      if (newValue === \"\" || /^-?\\d*\\.?\\d*$/.test(newValue)) {\n        const newInputValues = [...inputValues]\n        newInputValues[index] = newValue\n        setInputValues(newInputValues)\n      }\n    },\n    [inputValues]\n  )\n\n  const handleSliderChange = useCallback((newValue: number[]) => {\n    setSliderValue(newValue)\n    setInputValues(newValue.map((v) => v.toString()))\n  }, [])\n\n  const resetToDefault = useCallback(() => {\n    setSliderValue(defaultValue)\n    setInputValues(defaultValue.map((v) => v.toString()))\n  }, [defaultValue])\n\n  return {\n    sliderValue,\n    inputValues,\n    validateAndUpdateValue,\n    handleInputChange,\n    handleSliderChange,\n    resetToDefault,\n    showReset,\n  }\n}\n",
+      "type": "registry:hook"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "slider",
+      "label",
+      "input",
+      "radix"
+    ]
+  }
+}