Merge pull request #54 from Logging-Stuff/slider

slider added

Author: ariflogs

.github/workflows/deploy.yml

@@ -24,8 +24,8 @@ jobs:
 
       - name: Build and push to DockerHub
         run: |
-          docker build -t devarifhossain/retroui:1.1.9 ./
-          docker push devarifhossain/retroui:1.1.9
+          docker build -t devarifhossain/retroui:1.1.10 ./
+          docker push devarifhossain/retroui:1.1.10
 
       # - name: Set up SSH
       #   uses: webfactory/ssh-agent@v0.9.0

components/ComponentInstall.tsx

@@ -23,9 +23,6 @@ function ComponentInstall({ children }: IComponentShowcase) {
         <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">
           Manual
         </Tab>
-        <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">
-          Open in V0
-        </Tab>
       </TabList>
 
       <TabPanels>{children}</TabPanels>

components/retroui/Label.tsx

@@ -8,11 +8,9 @@ const labelVariants = cva(
   "leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
-const Label = ({
+export const Label = ({
   className,
   ...props
 }: React.ComponentProps<typeof LabelPrimitive.Root>) => (
   <LabelPrimitive.Root className={cn(labelVariants(), className)} {...props} />
 );
-
-export { Label };

components/retroui/Slider.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import { cn } from "@/lib/utils";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className,
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-3 w-full grow overflow-hidden bg-background border-2">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <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" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };

components/retroui/index.ts

@@ -16,5 +16,4 @@ export * from "./Badge";
 export * from "./Tab";
 export * from "./Dialog";
 export * from "./Menu";
-export * from "./Slider";
 export * from "./Progress";

components/ui/Slider/Slider.tsx

@@ -55,6 +55,10 @@ export const componentConfig: {
       name: "input",
       filePath: "components/retroui/Input.tsx",
     },
+    label: {
+      name: "label",
+      filePath: "components/retroui/Label.tsx",
+    },
     menu: {
       name: "menu",
       filePath: "components/retroui/Menu.tsx",
@@ -82,8 +86,8 @@ export const componentConfig: {
     slider: {
       name: "slider",
       dependencies: ["@radix-ui/react-slider"],
-      filePath: "components/ui/Slider.tsx",
-    }
+      filePath: "components/retroui/Slider.tsx",
+    },
   },
   examples: {
     "accordion-style-default": {
@@ -241,6 +245,11 @@ export const componentConfig: {
       filePath: "preview/components/input-style-error.tsx",
       preview: lazy(() => import("@/preview/components/input-style-error")),
     },
+    "label-style-default": {
+      name: "label-style-default",
+      filePath: "preview/components/label-style-default.tsx",
+      preview: lazy(() => import("@/preview/components/label-style-default")),
+    },
     "menu-style-default": {
       name: "menu-style-default",
       filePath: "preview/components/menu-style-default.tsx",
@@ -331,19 +340,10 @@ export const componentConfig: {
         () => import("@/preview/components/dialog-style-with-form"),
       ),
     },
-    "slider-style-default":{
+    "slider-style-default": {
       name: "slider-style-default",
       filePath: "preview/components/slider-style-default.tsx",
-      preview: lazy(
-        () => import("@/preview/components/slider-style-default")
-      ),
-    },
-    "slider-style-thin":{
-      name:"slider-style-thin",
-      filePath: "preview/components/slider-style-thin.tsx",
-      preview: lazy(
-        () => import("@/preview/components/slider-style-thin")
-      ),
+      preview: lazy(() => import("@/preview/components/slider-style-default")),
     },
   },
 };

components/ui/Slider/index.ts

@@ -33,10 +33,12 @@ export const navConfig: INavigationConfig = {
         { title: "Checkbox", href: `${componentsRoute}/checkbox` },
         { title: "Dialog", href: `${componentsRoute}/dialog` },
         { title: "Input", href: `${componentsRoute}/input` },
+        { title: "Label", href: `${componentsRoute}/label`, tag: "New" },
         { title: "Menu", href: `${componentsRoute}/menu` },
-        { title: "Progress", href: `${componentsRoute}/progress`, tag: "New" },
+        { title: "Progress", href: `${componentsRoute}/progress` },
         { title: "Radio", href: `${componentsRoute}/radio` },
         { title: "Select", href: `${componentsRoute}/select` },
+        { title: "Slider", href: `${componentsRoute}/slider`, tag: "New" },
         { title: "Switch", href: `${componentsRoute}/switch` },
         { title: "Tab", href: `${componentsRoute}/tab` },
         { title: "Textarea", href: `${componentsRoute}/textarea` },

config/components.ts

@@ -0,0 +1,40 @@
+---
+title: Label
+description: An universal component for labeling various inputs.
+lastUpdated: 04 Apr, 2025
+---
+
+<ComponentShowcase name="label-style-default" />
+
+<br />
+<br />
+
+ <ComponentInstall>
+    <ComponentInstall.Cli>
+        ```sh
+        npx shadcn@latest add "https://retroui.dev/r/label.json"
+        ```
+    </ComponentInstall.Cli>
+    <ComponentInstall.Manual>
+    #### 1. Install dependencies:
+
+    ```sh
+    npm install @radix-ui/react-label
+    ```
+
+    <br />
+    #### 2. Copy the code 👇 into your project:
+
+    <ComponentSource name="label" />
+    </ComponentInstall.Manual>
+
+</ComponentInstall>
+
+<br />
+<br />
+
+## Usage
+
+```tsx
+import { Label } from "@/components/retroui/label";
+```

config/navigation.ts

@@ -43,12 +43,4 @@ npm install @radix-ui/react-slider
 
 ### Default
 
-<ComponentShowcase name="slider-style-default" />
-<br />
-<br />
-
-### Thin
-
-<ComponentShowcase name="slider-style-thin" />
-<br />
-<br />
+<ComponentShowcase name="slider-style-default" />

content/docs/components/label.mdx

@@ -20,7 +20,7 @@
     "@radix-ui/react-progress": "^1.1.2",
     "@radix-ui/react-radio-group": "^1.2.3",
     "@radix-ui/react-select": "^2.1.6",
-    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slider": "^1.2.4",
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "class-variance-authority": "^0.7.0",