@tioelvis/next-template 2.3.7 → 2.3.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tioelvis/next-template",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.8",
|
|
4
4
|
"description": "CLI to scaffold a Next.js + Tailwind project using shadcn/ui components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -50,6 +50,7 @@
|
|
|
50
50
|
"@radix-ui/react-scroll-area": "^1.2.9",
|
|
51
51
|
"@radix-ui/react-select": "^2.2.5",
|
|
52
52
|
"@radix-ui/react-separator": "^1.1.7",
|
|
53
|
+
"@radix-ui/react-slider": "^1.3.5",
|
|
53
54
|
"@radix-ui/react-slot": "^1.2.3",
|
|
54
55
|
"@radix-ui/react-tooltip": "^1.2.7",
|
|
55
56
|
"@tailwindcss/postcss": "^4.1.11",
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import * as SliderPrimitive from "@radix-ui/react-slider";
|
|
5
|
+
|
|
6
|
+
import { cn } from "@/lib/utils";
|
|
7
|
+
|
|
8
|
+
function Slider({
|
|
9
|
+
className,
|
|
10
|
+
defaultValue,
|
|
11
|
+
value,
|
|
12
|
+
min = 0,
|
|
13
|
+
max = 100,
|
|
14
|
+
...props
|
|
15
|
+
}: React.ComponentProps<typeof SliderPrimitive.Root>) {
|
|
16
|
+
const _values = React.useMemo(
|
|
17
|
+
() =>
|
|
18
|
+
Array.isArray(value)
|
|
19
|
+
? value
|
|
20
|
+
: Array.isArray(defaultValue)
|
|
21
|
+
? defaultValue
|
|
22
|
+
: [min, max],
|
|
23
|
+
[value, defaultValue, min, max]
|
|
24
|
+
);
|
|
25
|
+
|
|
26
|
+
return (
|
|
27
|
+
<SliderPrimitive.Root
|
|
28
|
+
data-slot="slider"
|
|
29
|
+
defaultValue={defaultValue}
|
|
30
|
+
value={value}
|
|
31
|
+
min={min}
|
|
32
|
+
max={max}
|
|
33
|
+
className={cn(
|
|
34
|
+
"relative flex w-full touch-none items-center cursor-pointer select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
|
|
35
|
+
className
|
|
36
|
+
)}
|
|
37
|
+
{...props}>
|
|
38
|
+
<SliderPrimitive.Track
|
|
39
|
+
data-slot="slider-track"
|
|
40
|
+
className={cn(
|
|
41
|
+
"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
|
|
42
|
+
)}>
|
|
43
|
+
<SliderPrimitive.Range
|
|
44
|
+
data-slot="slider-range"
|
|
45
|
+
className={cn(
|
|
46
|
+
"bg-primary cursor-pointer absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
|
|
47
|
+
)}
|
|
48
|
+
/>
|
|
49
|
+
</SliderPrimitive.Track>
|
|
50
|
+
{Array.from({ length: _values.length }, (_, index) => (
|
|
51
|
+
<SliderPrimitive.Thumb
|
|
52
|
+
data-slot="slider-thumb"
|
|
53
|
+
key={index}
|
|
54
|
+
className="cursor-pointer border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
|
|
55
|
+
/>
|
|
56
|
+
))}
|
|
57
|
+
</SliderPrimitive.Root>
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
export { Slider };
|