love-ui 1.2.13 → 1.2.15

package/public/r/comp-25.json

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

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

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

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

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

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

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

package/public/r/comp-256.json

@@ -1,25 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-256",
-  "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-256.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([3])\n\n  const labels = [\"Awful\", \"Poor\", \"Okay\", \"Good\", \"Amazing\"]\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex items-center justify-between gap-2\">\n        <Label className=\"leading-6\">Rate your experience</Label>\n        <span className=\"text-sm font-medium\">{labels[value[0] - 1]}</span>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <span className=\"text-2xl\">😡</span>\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={1}\n          max={5}\n          aria-label=\"Rate your experience\"\n        />\n        <span className=\"text-2xl\">😍</span>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "slider",
-      "label",
-      "vote",
-      "rating",
-      "radix"
-    ]
-  }
-}

package/public/r/comp-257.json

@@ -1,25 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-257",
-  "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-257.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([3])\n\n  const emojis = [\"😡\", \"🙁\", \"😐\", \"🙂\", \"😍\"]\n  const labels = [\"Awful\", \"Poor\", \"Okay\", \"Good\", \"Amazing\"]\n\n  return (\n    <div className=\"*:not-first:mt-3\">\n      <Label>Rate your experience</Label>\n      <div className=\"flex items-center gap-2\">\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={1}\n          max={5}\n          showTooltip\n          tooltipContent={(value) => labels[value - 1]}\n          aria-label=\"Rate your experience\"\n        />\n        <span className=\"text-2xl\">{emojis[value[0] - 1]}</span>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "slider",
-      "label",
-      "vote",
-      "rating",
-      "radix"
-    ]
-  }
-}

package/public/r/comp-258.json

@@ -1,32 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-258",
-  "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-258.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 = 200\n  const initialValue = [50, 150]\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>Dual range slider with input</Label>\n      <div className=\"flex items-center gap-4\">\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 minimum value\"\n        />\n        <Slider\n          className=\"grow\"\n          value={sliderValue}\n          onValueChange={handleSliderChange}\n          min={minValue}\n          max={maxValue}\n          aria-label=\"Dual range 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[1]}\n          onChange={(e) => handleInputChange(e, 1)}\n          onBlur={() => validateAndUpdateValue(inputValues[1], 1)}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\") {\n              validateAndUpdateValue(inputValues[1], 1)\n            }\n          }}\n          aria-label=\"Enter maximum 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",
-      "range slider",
-      "label",
-      "input",
-      "range",
-      "radix"
-    ]
-  }
-}

package/public/r/comp-259.json

@@ -1,26 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-259",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/button.json",
-    "https://loveui.dev/building-blocks/r/label.json",
-    "https://loveui.dev/building-blocks/r/slider.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-259.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MinusIcon, PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\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 = 200\n  const steps = 5\n  const [value, setValue] = useState([100])\n\n  const decreaseValue = () =>\n    setValue((prev) => [Math.max(minValue, prev[0] - steps)])\n  const increaseValue = () =>\n    setValue((prev) => [Math.min(maxValue, prev[0] + steps)])\n\n  return (\n    <div className=\"*:not-first:mt-3\">\n      <Label className=\"tabular-nums\">{value[0]} credits/mo</Label>\n      <div className=\"flex items-center gap-4\">\n        <div>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            className=\"size-8\"\n            aria-label=\"Decrease value\"\n            onClick={decreaseValue}\n            disabled={value[0] === 0}\n          >\n            <MinusIcon size={16} aria-hidden=\"true\" />\n          </Button>\n        </div>\n        <Slider\n          className=\"grow\"\n          value={value}\n          onValueChange={setValue}\n          min={minValue}\n          max={maxValue}\n          step={steps}\n          aria-label=\"Dual range slider with buttons\"\n        />\n        <div>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            className=\"size-8\"\n            aria-label=\"Increase value\"\n            onClick={increaseValue}\n            disabled={value[0] === 200}\n          >\n            <PlusIcon size={16} aria-hidden=\"true\" />\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "slider",
-      "label",
-      "button",
-      "pricing",
-      "radix"
-    ]
-  }
-}

package/public/r/comp-26.json

@@ -1,24 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-26",
-  "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-26.tsx",
-      "content": "import { useId } from \"react\"\nimport { ArrowRightIcon, SearchIcon } 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  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Search input with icon and button</Label>\n      <div className=\"relative\">\n        <Input\n          id={id}\n          className=\"peer ps-9 pe-9\"\n          placeholder=\"Search...\"\n          type=\"search\"\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n          <SearchIcon size={16} />\n        </div>\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=\"Submit search\"\n          type=\"submit\"\n        >\n          <ArrowRightIcon size={16} aria-hidden=\"true\" />\n        </button>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "input",
-      "label",
-      "button",
-      "search"
-    ]
-  }
-}

package/public/r/comp-260.json

@@ -1,26 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-260",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/button.json",
-    "https://loveui.dev/building-blocks/r/label.json",
-    "https://loveui.dev/building-blocks/r/slider.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-260.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\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 min_price = 5\n  const max_price = 1240\n  const [value, setValue] = useState([min_price, max_price])\n\n  const formatPrice = (price: number) => {\n    return price === max_price\n      ? `$${price.toLocaleString()}+`\n      : `$${price.toLocaleString()}`\n  }\n\n  return (\n    <div className=\"*:not-first:mt-3\">\n      <Label className=\"tabular-nums\">\n        From {formatPrice(value[0])} to {formatPrice(value[1])}\n      </Label>\n      <div className=\"flex items-center gap-4\">\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={min_price}\n          max={max_price}\n          aria-label=\"Price range slider\"\n        />\n        <Button variant=\"outline\">Go</Button>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "slider",
-      "range slider",
-      "label",
-      "button",
-      "radix"
-    ]
-  }
-}

package/public/r/comp-261.json

@@ -1,24 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-261",
-  "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-261.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>Vertical slider</Label>\n      <div className=\"flex h-40 justify-center\">\n        <Slider\n          defaultValue={[5]}\n          max={10}\n          orientation=\"vertical\"\n          aria-label=\"Vertical slider\"\n        />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "slider",
-      "vertical slider",
-      "label",
-      "radix"
-    ]
-  }
-}

package/public/r/comp-262.json

@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-262",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/label.json",
-    "https://loveui.dev/building-blocks/r/slider.json",
-    "https://loveui.dev/building-blocks/r/input.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-262.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-4\">\n      <Label>Vertical slider with input</Label>\n      <div className=\"flex h-40 flex-col items-center justify-center gap-4\">\n        <Slider\n          className=\"data-[orientation=vertical]:min-h-0\"\n          value={sliderValue}\n          onValueChange={handleSliderChange}\n          min={minValue}\n          max={maxValue}\n          orientation=\"vertical\"\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",
-      "vertical slider",
-      "label",
-      "input",
-      "radix"
-    ]
-  }
-}

package/public/r/comp-263.json

@@ -1,25 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-263",
-  "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-263.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>Vertical dual range slider and tooltip</Label>\n      <div className=\"flex h-40 justify-center\">\n        <Slider\n          defaultValue={[2, 7]}\n          max={10}\n          orientation=\"vertical\"\n          aria-label=\"Vertical slider\"\n          showTooltip\n        />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "slider",
-      "vertical slider",
-      "range slider",
-      "label",
-      "radix"
-    ]
-  }
-}

package/public/r/comp-264.json

@@ -1,33 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-264",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/label.json",
-    "https://loveui.dev/building-blocks/r/slider.json",
-    "https://loveui.dev/building-blocks/r/input.json",
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-264.tsx",
-      "content": "\"use client\"\n\nimport React, { useRef } from \"react\"\nimport { RotateCcwIcon } from \"lucide-react\"\n\nimport { useSliderWithInput } from \"@/registry/building-blocks/default/hooks/use-slider-with-input\"\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\"\n\nexport default function Component() {\n  // Create refs to store reset functions\n  const resetFunctionsRef = useRef<(() => void)[]>([])\n\n  // Function to reset all sliders to default\n  const resetAll = () => {\n    resetFunctionsRef.current.forEach((resetFn) => resetFn())\n  }\n\n  // Function to register reset functions\n  const registerResetFunction = (resetFn: () => void, index: number) => {\n    resetFunctionsRef.current[index] = resetFn\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      <legend className=\"text-sm font-medium text-foreground\">\n        Object position\n      </legend>\n      <div className=\"space-y-2\">\n        <SliderWithInput\n          minValue={-10}\n          maxValue={10}\n          initialValue={[-2]}\n          defaultValue={[0]}\n          label=\"X\"\n          onRegisterReset={(resetFn) => registerResetFunction(resetFn, 0)}\n        />\n        <SliderWithInput\n          minValue={-10}\n          maxValue={10}\n          initialValue={[4]}\n          defaultValue={[0]}\n          label=\"Y\"\n          onRegisterReset={(resetFn) => registerResetFunction(resetFn, 1)}\n        />\n        <SliderWithInput\n          minValue={-10}\n          maxValue={10}\n          initialValue={[2]}\n          defaultValue={[0]}\n          label=\"Z\"\n          onRegisterReset={(resetFn) => registerResetFunction(resetFn, 2)}\n        />\n      </div>\n      <Button className=\"w-full\" variant=\"outline\" onClick={resetAll}>\n        <RotateCcwIcon\n          className=\"-ms-1 opacity-60\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n        Reset\n      </Button>\n    </div>\n  )\n}\n\nfunction SliderWithInput({\n  minValue,\n  maxValue,\n  initialValue,\n  defaultValue,\n  label,\n  onRegisterReset,\n}: {\n  minValue: number\n  maxValue: number\n  initialValue: number[]\n  defaultValue: number[]\n  label: string\n  onRegisterReset: (resetFn: () => void) => void\n}) {\n  const {\n    sliderValue,\n    inputValues,\n    validateAndUpdateValue,\n    handleInputChange,\n    handleSliderChange,\n    resetToDefault,\n  } = useSliderWithInput({ minValue, maxValue, initialValue, defaultValue })\n\n  // Register the reset function when the component mounts\n  React.useEffect(() => {\n    onRegisterReset(resetToDefault)\n  }, [onRegisterReset, resetToDefault])\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <Label className=\"text-xs text-muted-foreground\">{label}</Label>\n      <Slider\n        className=\"grow [&>:last-child>span]:rounded\"\n        value={sliderValue}\n        onValueChange={handleSliderChange}\n        min={minValue}\n        max={maxValue}\n        aria-label={label}\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  )\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",
-      "button",
-      "reset",
-      "radix"
-    ]
-  }
-}

package/public/r/comp-265.json

@@ -1,32 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-265",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/label.json",
-    "https://loveui.dev/building-blocks/r/slider.json",
-    "https://loveui.dev/building-blocks/r/input.json",
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-265.tsx",
-      "content": "\"use client\"\n\nimport { useId } from \"react\"\n\nimport { useSliderWithInput } from \"@/registry/building-blocks/default/hooks/use-slider-with-input\"\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\"\n\nconst items = [\n  { id: 1, price: 80 },\n  { id: 2, price: 95 },\n  { id: 3, price: 110 },\n  { id: 4, price: 125 },\n  { id: 5, price: 130 },\n  { id: 6, price: 140 },\n  { id: 7, price: 145 },\n  { id: 8, price: 150 },\n  { id: 9, price: 155 },\n  { id: 10, price: 165 },\n  { id: 11, price: 175 },\n  { id: 12, price: 185 },\n  { id: 13, price: 195 },\n  { id: 14, price: 205 },\n  { id: 15, price: 215 },\n  { id: 16, price: 225 },\n  { id: 17, price: 235 },\n  { id: 18, price: 245 },\n  { id: 19, price: 255 },\n  { id: 20, price: 260 },\n  { id: 21, price: 265 },\n  { id: 22, price: 270 },\n  { id: 23, price: 275 },\n  { id: 24, price: 280 },\n  { id: 25, price: 285 },\n  { id: 26, price: 290 },\n  { id: 27, price: 290 },\n  { id: 28, price: 295 },\n  { id: 29, price: 295 },\n  { id: 30, price: 295 },\n  { id: 31, price: 298 },\n  { id: 32, price: 299 },\n  { id: 33, price: 300 },\n  { id: 34, price: 305 },\n  { id: 35, price: 310 },\n  { id: 36, price: 315 },\n  { id: 37, price: 320 },\n  { id: 38, price: 325 },\n  { id: 39, price: 330 },\n  { id: 40, price: 335 },\n  { id: 41, price: 340 },\n  { id: 42, price: 345 },\n  { id: 43, price: 350 },\n  { id: 44, price: 355 },\n  { id: 45, price: 360 },\n  { id: 46, price: 365 },\n  { id: 47, price: 365 },\n  { id: 48, price: 375 },\n  { id: 49, price: 380 },\n  { id: 50, price: 385 },\n  { id: 51, price: 390 },\n  { id: 52, price: 395 },\n  { id: 53, price: 400 },\n  { id: 54, price: 405 },\n  { id: 55, price: 410 },\n  { id: 56, price: 415 },\n  { id: 57, price: 420 },\n  { id: 58, price: 425 },\n  { id: 59, price: 430 },\n  { id: 60, price: 435 },\n  { id: 61, price: 440 },\n  { id: 62, price: 445 },\n  { id: 63, price: 450 },\n  { id: 64, price: 455 },\n  { id: 65, price: 460 },\n  { id: 66, price: 465 },\n  { id: 67, price: 470 },\n  { id: 68, price: 475 },\n  { id: 69, price: 480 },\n  { id: 70, price: 485 },\n  { id: 71, price: 490 },\n  { id: 72, price: 495 },\n  { id: 73, price: 495 },\n  { id: 74, price: 498 },\n  { id: 75, price: 499 },\n  { id: 76, price: 500 },\n  { id: 77, price: 500 },\n  { id: 78, price: 500 },\n  { id: 79, price: 515 },\n  { id: 80, price: 530 },\n  { id: 81, price: 545 },\n  { id: 82, price: 560 },\n  { id: 83, price: 575 },\n  { id: 84, price: 590 },\n  { id: 85, price: 605 },\n  { id: 86, price: 620 },\n  { id: 87, price: 635 },\n  { id: 88, price: 650 },\n  { id: 89, price: 655 },\n  { id: 90, price: 660 },\n  { id: 91, price: 665 },\n  { id: 92, price: 670 },\n  { id: 93, price: 675 },\n  { id: 94, price: 680 },\n  { id: 95, price: 685 },\n  { id: 96, price: 690 },\n  { id: 97, price: 695 },\n  { id: 98, price: 700 },\n  { id: 99, price: 700 },\n  { id: 100, price: 700 },\n  { id: 101, price: 700 },\n  { id: 102, price: 700 },\n  { id: 103, price: 700 },\n  { id: 104, price: 725 },\n  { id: 105, price: 750 },\n  { id: 106, price: 775 },\n  { id: 107, price: 800 },\n  { id: 108, price: 815 },\n  { id: 109, price: 830 },\n  { id: 110, price: 845 },\n  { id: 111, price: 845 },\n  { id: 112, price: 845 },\n  { id: 113, price: 870 },\n  { id: 114, price: 875 },\n  { id: 115, price: 880 },\n  { id: 116, price: 885 },\n  { id: 117, price: 890 },\n  { id: 118, price: 895 },\n  { id: 119, price: 898 },\n  { id: 120, price: 900 },\n]\n\nexport default function Component() {\n  const id = useId()\n\n  // Define the number of ticks\n  const tick_count = 40\n  // Find the min and max values across all items\n  const minValue = Math.min(...items.map((item) => item.price))\n  const maxValue = Math.max(...items.map((item) => item.price))\n\n  const {\n    sliderValue,\n    inputValues,\n    validateAndUpdateValue,\n    handleInputChange,\n    handleSliderChange,\n  } = useSliderWithInput({ minValue, maxValue, initialValue: [200, 780] }) // set initialValue: [minValue, maxValue] to show all items by default\n\n  // Calculate the price step based on the min and max prices\n  const priceStep = (maxValue - minValue) / tick_count\n\n  // Calculate item counts for each price range\n  const itemCounts = Array(tick_count)\n    .fill(0)\n    .map((_, tick) => {\n      const rangeMin = minValue + tick * priceStep\n      const rangeMax = minValue + (tick + 1) * priceStep\n      return items.filter(\n        (item) => item.price >= rangeMin && item.price < rangeMax\n      ).length\n    })\n\n  // Find maximum count for scaling\n  const maxCount = Math.max(...itemCounts)\n\n  const handleSliderValueChange = (values: number[]) => {\n    handleSliderChange(values)\n  }\n\n  // Function to count items in the selected range\n  const countItemsInRange = (min: number, max: number) => {\n    return items.filter((item) => item.price >= min && item.price <= max).length\n  }\n\n  const isBarInSelectedRange = (\n    index: number,\n    minValue: number,\n    priceStep: number,\n    sliderValue: number[]\n  ) => {\n    const rangeMin = minValue + index * priceStep\n    const rangeMax = minValue + (index + 1) * priceStep\n    return (\n      countItemsInRange(sliderValue[0], sliderValue[1]) > 0 &&\n      rangeMin <= sliderValue[1] &&\n      rangeMax >= sliderValue[0]\n    )\n  }\n\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Price slider</Label>\n      <div>\n        {/* Histogram bars */}\n        <div className=\"flex h-12 w-full items-end px-3\" aria-hidden=\"true\">\n          {itemCounts.map((count, i) => (\n            <div\n              key={i}\n              className=\"flex flex-1 justify-center\"\n              style={{\n                height: `${(count / maxCount) * 100}%`,\n              }}\n            >\n              <span\n                data-selected={isBarInSelectedRange(\n                  i,\n                  minValue,\n                  priceStep,\n                  sliderValue\n                )}\n                className=\"size-full bg-primary/20\"\n              ></span>\n            </div>\n          ))}\n        </div>\n        <Slider\n          value={sliderValue}\n          onValueChange={handleSliderValueChange}\n          min={minValue}\n          max={maxValue}\n          aria-label=\"Price range\"\n        />\n      </div>\n\n      {/* Inputs */}\n      <div className=\"flex items-center justify-between gap-4\">\n        <div className=\"*:not-first:mt-1\">\n          <Label htmlFor={`${id}-min`}>Min price</Label>\n          <div className=\"relative\">\n            <Input\n              id={`${id}-min`}\n              className=\"peer w-full ps-6\"\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 minimum price\"\n            />\n            <span className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground peer-disabled:opacity-50\">\n              $\n            </span>\n          </div>\n        </div>\n        <div className=\"*:not-first:mt-1\">\n          <Label htmlFor={`${id}-max`}>Max price</Label>\n          <div className=\"relative\">\n            <Input\n              id={`${id}-max`}\n              className=\"peer w-full ps-6\"\n              type=\"text\"\n              inputMode=\"decimal\"\n              value={inputValues[1]}\n              onChange={(e) => handleInputChange(e, 1)}\n              onBlur={() => validateAndUpdateValue(inputValues[1], 1)}\n              onKeyDown={(e) => {\n                if (e.key === \"Enter\") {\n                  validateAndUpdateValue(inputValues[1], 1)\n                }\n              }}\n              aria-label=\"Enter maximum price\"\n            />\n            <span className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground peer-disabled:opacity-50\">\n              $\n            </span>\n          </div>\n        </div>\n      </div>\n\n      {/* Button */}\n      <Button className=\"w-full\" variant=\"outline\">\n        Show {countItemsInRange(sliderValue[0], sliderValue[1])} items\n      </Button>\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",
-      "button",
-      "radix"
-    ]
-  }
-}