Skip to content

Commit 2f628bb

Browse files
ariflogsariflogs
committed
slider added
1 parent 75cc6d3 commit 2f628bb

17 files changed

+3430
-5899
lines changed

‎components/ComponentInstall.tsx

-3
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,6 @@ function ComponentInstall({ children }: IComponentShowcase) {
2323
<Tab className="min-w-12 cursor-pointer relative px-2 py-1 bg-transparent data-selected:border data-selected:border-b-0 data-selected:bg-black data-selected:text-white focus:outline-hidden">
2424
Manual
2525
</Tab>
26-
<Tab className="min-w-12 cursor-pointer relative px-2 py-1 bg-transparent data-selected:border data-selected:border-b-0 data-selected:bg-black data-selected:text-white focus:outline-hidden">
27-
Open in V0
28-
</Tab>
2926
</TabList>
3027

3128
<TabPanels>{children}</TabPanels>

‎components/retroui/Label.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,9 @@ const labelVariants = cva(
88
"leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
99
);
1010

11-
const Label = ({
11+
export const Label = ({
1212
className,
1313
...props
1414
}: React.ComponentProps<typeof LabelPrimitive.Root>) => (
1515
<LabelPrimitive.Root className={cn(labelVariants(), className)} {...props} />
1616
);
17-
18-
export { Label };

‎components/retroui/Slider.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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+
const Slider = React.forwardRef<
9+
React.ElementRef<typeof SliderPrimitive.Root>,
10+
React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
11+
>(({ className, ...props }, ref) => (
12+
<SliderPrimitive.Root
13+
ref={ref}
14+
className={cn(
15+
"relative flex w-full touch-none select-none items-center",
16+
className,
17+
)}
18+
{...props}
19+
>
20+
<SliderPrimitive.Track className="relative h-3 w-full grow overflow-hidden bg-background border-2">
21+
<SliderPrimitive.Range className="absolute h-full bg-primary" />
22+
</SliderPrimitive.Track>
23+
<SliderPrimitive.Thumb className="block h-4.5 w-4.5 border-2 bg-background shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
24+
</SliderPrimitive.Root>
25+
));
26+
Slider.displayName = SliderPrimitive.Root.displayName;
27+
28+
export { Slider };

‎components/retroui/index.ts

-1
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,4 @@ export * from "./Badge";
1616
export * from "./Tab";
1717
export * from "./Dialog";
1818
export * from "./Menu";
19-
export * from "./Slider";
2019
export * from "./Progress";

‎components/ui/Slider/Slider.tsx

-98
This file was deleted.

‎components/ui/Slider/index.ts

-1
This file was deleted.

‎config/components.ts

+13-13
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,10 @@ export const componentConfig: {
5555
name: "input",
5656
filePath: "components/retroui/Input.tsx",
5757
},
58+
label: {
59+
name: "label",
60+
filePath: "components/retroui/Label.tsx",
61+
},
5862
menu: {
5963
name: "menu",
6064
filePath: "components/retroui/Menu.tsx",
@@ -82,8 +86,8 @@ export const componentConfig: {
8286
slider: {
8387
name: "slider",
8488
dependencies: ["@radix-ui/react-slider"],
85-
filePath: "components/ui/Slider.tsx",
86-
}
89+
filePath: "components/retroui/Slider.tsx",
90+
},
8791
},
8892
examples: {
8993
"accordion-style-default": {
@@ -241,6 +245,11 @@ export const componentConfig: {
241245
filePath: "preview/components/input-style-error.tsx",
242246
preview: lazy(() => import("@/preview/components/input-style-error")),
243247
},
248+
"label-style-default": {
249+
name: "label-style-default",
250+
filePath: "preview/components/label-style-default.tsx",
251+
preview: lazy(() => import("@/preview/components/label-style-default")),
252+
},
244253
"menu-style-default": {
245254
name: "menu-style-default",
246255
filePath: "preview/components/menu-style-default.tsx",
@@ -331,19 +340,10 @@ export const componentConfig: {
331340
() => import("@/preview/components/dialog-style-with-form"),
332341
),
333342
},
334-
"slider-style-default":{
343+
"slider-style-default": {
335344
name: "slider-style-default",
336345
filePath: "preview/components/slider-style-default.tsx",
337-
preview: lazy(
338-
() => import("@/preview/components/slider-style-default")
339-
),
340-
},
341-
"slider-style-thin":{
342-
name:"slider-style-thin",
343-
filePath: "preview/components/slider-style-thin.tsx",
344-
preview: lazy(
345-
() => import("@/preview/components/slider-style-thin")
346-
),
346+
preview: lazy(() => import("@/preview/components/slider-style-default")),
347347
},
348348
},
349349
};

‎config/navigation.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,12 @@ export const navConfig: INavigationConfig = {
3333
{ title: "Checkbox", href: `${componentsRoute}/checkbox` },
3434
{ title: "Dialog", href: `${componentsRoute}/dialog` },
3535
{ title: "Input", href: `${componentsRoute}/input` },
36+
{ title: "Label", href: `${componentsRoute}/label`, tag: "New" },
3637
{ title: "Menu", href: `${componentsRoute}/menu` },
37-
{ title: "Progress", href: `${componentsRoute}/progress`, tag: "New" },
38+
{ title: "Progress", href: `${componentsRoute}/progress` },
3839
{ title: "Radio", href: `${componentsRoute}/radio` },
3940
{ title: "Select", href: `${componentsRoute}/select` },
41+
{ title: "Slider", href: `${componentsRoute}/slider`, tag: "New" },
4042
{ title: "Switch", href: `${componentsRoute}/switch` },
4143
{ title: "Tab", href: `${componentsRoute}/tab` },
4244
{ title: "Textarea", href: `${componentsRoute}/textarea` },

‎content/docs/components/label.mdx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
title: Label
3+
description: An universal component for labeling various inputs.
4+
lastUpdated: 04 Apr, 2025
5+
---
6+
7+
<ComponentShowcase name="label-style-default" />
8+
9+
<br />
10+
<br />
11+
12+
<ComponentInstall>
13+
<ComponentInstall.Cli>
14+
```sh
15+
npx shadcn@latest add "https://retroui.dev/r/label.json"
16+
```
17+
</ComponentInstall.Cli>
18+
<ComponentInstall.Manual>
19+
#### 1. Install dependencies:
20+
21+
```sh
22+
npm install @radix-ui/react-label
23+
```
24+
25+
<br />
26+
#### 2. Copy the code 👇 into your project:
27+
28+
<ComponentSource name="label" />
29+
</ComponentInstall.Manual>
30+
31+
</ComponentInstall>
32+
33+
<br />
34+
<br />
35+
36+
## Usage
37+
38+
```tsx
39+
import { Label } from "@/components/retroui/label";
40+
```

‎content/docs/components/slider.mdx

+1-9
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,4 @@ npm install @radix-ui/react-slider
4343

4444
### Default
4545

46-
<ComponentShowcase name="slider-style-default" />
47-
<br />
48-
<br />
49-
50-
### Thin
51-
52-
<ComponentShowcase name="slider-style-thin" />
53-
<br />
54-
<br />
46+
<ComponentShowcase name="slider-style-default" />

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"@radix-ui/react-progress": "^1.1.2",
2121
"@radix-ui/react-radio-group": "^1.2.3",
2222
"@radix-ui/react-select": "^2.1.6",
23-
"@radix-ui/react-slider": "^1.2.3",
23+
"@radix-ui/react-slider": "^1.2.4",
2424
"@radix-ui/react-switch": "^1.1.3",
2525
"@radix-ui/react-visually-hidden": "^1.1.0",
2626
"class-variance-authority": "^0.7.0",

0 commit comments

Comments
 (0)