added progress bar

ariflogs · ariflogs · commit 18c13087b56c · 2025-04-05T01:28:04.000+06:00
diff --git a/components/ui/Progress.tsx b/components/ui/Progress.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+import { cn } from "@/lib/utils";
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden bg-background border-2 border-black",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };
diff --git a/components/ui/Switch.tsx b/components/ui/Switch.tsx
@@ -15,7 +15,7 @@ const Switch = ({ className, ...props }: SwitchPrimitives.SwitchProps) => (
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 bg-primary border-2 mx-0.5 border-foreground shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background"
+        "pointer-events-none block h-4 w-4 bg-primary border-2 mx-0.5 border-foreground ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background"
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/components/ui/index.ts b/components/ui/index.ts
@@ -16,3 +16,4 @@ export * from "./Badge";
 export * from "./Tab";
 export * from "./Dialog";
 export * from "./Menu";
+export * from "./Progress";
diff --git a/config/components.ts b/config/components.ts
@@ -59,6 +59,10 @@ export const componentConfig: {
       name: "menu",
       filePath: "components/ui/Menu.tsx",
     },
+    progress: {
+      name: "progress",
+      filePath: "components/ui/Progress.tsx",
+    },
     radio: {
       name: "radio",
       filePath: "components/ui/Radio.tsx",
@@ -237,6 +241,13 @@ export const componentConfig: {
       filePath: "preview/components/menu-style-default.tsx",
       preview: lazy(() => import("@/preview/components/menu-style-default")),
     },
+    "progress-style-default": {
+      name: "progress-style-default",
+      filePath: "preview/components/progress-style-default.tsx",
+      preview: lazy(
+        () => import("@/preview/components/progress-style-default")
+      ),
+    },
     "radio-style-default": {
       name: "radio-style-default",
       filePath: "preview/components/radio-style-default.tsx",
diff --git a/config/navigation.ts b/config/navigation.ts
@@ -28,15 +28,16 @@ export const navConfig: INavigationConfig = {
         { title: "Alert", href: `${componentsRoute}/alert` },
         { title: "Avatar", href: `${componentsRoute}/avatar` },
         { title: "Badge", href: `${componentsRoute}/badge` },
-        { title: "Button", href: `${componentsRoute}/button` },
+        { title: "Button", href: `${componentsRoute}/button`, tag: "Updated" },
         { title: "Card", href: `${componentsRoute}/card` },
         { title: "Checkbox", href: `${componentsRoute}/checkbox` },
         { title: "Dialog", href: `${componentsRoute}/dialog` },
         { title: "Input", href: `${componentsRoute}/input`, tag: "Updated" },
         { title: "Menu", href: `${componentsRoute}/menu` },
+        { title: "Progress", href: `${componentsRoute}/progress` },
         { title: "Radio", href: `${componentsRoute}/radio` },
-        { title: "Select", href: `${componentsRoute}/select`, tag: "New" },
-        { title: "Switch", href: `${componentsRoute}/switch`, tag: "New" },
+        { title: "Select", href: `${componentsRoute}/select` },
+        { title: "Switch", href: `${componentsRoute}/switch` },
         { title: "Tab", href: `${componentsRoute}/tab` },
         { title: "Textarea", href: `${componentsRoute}/textarea` },
         { title: "Text", href: `${componentsRoute}/text` },
diff --git a/content/docs/components/progress.mdx b/content/docs/components/progress.mdx
@@ -0,0 +1,92 @@
+---
+title: Progress
+description: Let's you users know how long to wait.
+lastUpdated: 05 Apr, 2025
+links:
+  api_reference: https://www.radix-ui.com/docs/primitives/components/progress#api-reference
+  source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/ui/Progress.tsx
+---
+
+<ComponentShowcase name="progress-style-default" />
+<br />
+<br />
+
+## Installation
+
+<ComponentInstall>
+  <ComponentInstall.Cli>
+    ```sh
+npx shadcn@latest add "https://retroui.dev/r/progress.json"
+    ```
+  </ComponentInstall.Cli>
+  <ComponentInstall.Manual>
+#### 1. Install dependencies:
+
+```sh
+npm install @radix-ui/react-progress lucide-react
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="progress" />
+
+  </ComponentInstall.Manual>
+</ComponentInstall>
+
+<br />
+<br />
+
+## Examples
+
+### Default
+
+<ComponentShowcase name="progress-style-default" />
+{/* ## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add progress
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-progress
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="progress" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx
+import { Progress } from "@/components/ui/progress"
+```
+
+```tsx
+<Progress value={33} />
+``` */}
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.2",
+    "@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-switch": "^1.1.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/preview/components/progress-style-default.tsx b/preview/components/progress-style-default.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import * as React from "react";
+
+import { Progress } from "@/components/ui";
+
+export default function ProgressDemo() {
+  const [progress, setProgress] = React.useState(13);
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setProgress(66), 500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return <Progress value={progress} className="w-[60%]" />;
+}
diff --git a/preview/components/select-style-default.tsx b/preview/components/select-style-default.tsx
@@ -5,7 +5,7 @@ export default function SelectStyleDefault() {
   return (
     <Select>
       <Select.Trigger className="w-60">
-        <Select.Value placeholder="Pick your favorite Pokemon" />
+        <Select.Value placeholder="Pick your Pokemon" />
       </Select.Trigger>
       <Select.Content>
         <Select.Group>
diff --git a/public/r/button.json b/public/r/button.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "components/ui/Button.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { ButtonHTMLAttributes } from \"react\";\n\nconst buttonVariants = cva(\"font-head transition-all outline-hidden\", {\n  variants: {\n    variant: {\n      default:\n        \"shadow-md hover:shadow-xs bg-primary text-black border-2 border-black hover:bg-primary-hover\",\n      outline:\n        \"shadow-md hover:shadow-xs bg-transparent text-black border-2 border-black\",\n      link: \"bg-transparent text-black hover:underline\",\n    },\n    size: {\n      sm: \"px-4 py-1 text-sm\",\n      md: \"px-6 py-2 text-base\",\n      lg: \"px-8 py-3 text-lg\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n    variant: \"default\",\n  },\n});\n\nexport interface IButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {}\n\nexport const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(\n  (\n    {\n      children,\n      size = \"md\",\n      className = \"\",\n      variant = \"default\",\n      ...props\n    }: IButtonProps,\n    forwardedRef\n  ) => (\n    <button\n      ref={forwardedRef}\n      className={cn(buttonVariants({ variant, size }), className)}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n);\n\nButton.displayName = \"Button\";\n",
+      "content": "import { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { ButtonHTMLAttributes } from \"react\";\n\nconst buttonVariants = cva(\n  \"font-head transition-all outline-hidden cursor-pointer flex items-center\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"shadow-md hover:shadow-xs bg-primary text-black border-2 border-black hover:bg-primary-hover\",\n        secondary:\n          \"bg-black text-white shadow-primary hover:-translate-y-1 hover:shadow-md\",\n        outline:\n          \"shadow-md hover:shadow-xs bg-transparent text-black border-2 border-black\",\n        link: \"bg-transparent text-black hover:underline hs\",\n      },\n      size: {\n        sm: \"px-4 py-1.5 text-sm\",\n        md: \"px-6 py-2 text-base\",\n        lg: \"px-8 py-3 text-lg\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n    },\n  }\n);\n\nexport interface IButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {}\n\nexport const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(\n  (\n    {\n      children,\n      size = \"md\",\n      className = \"\",\n      variant = \"default\",\n      ...props\n    }: IButtonProps,\n    forwardedRef\n  ) => (\n    <button\n      ref={forwardedRef}\n      className={cn(buttonVariants({ variant, size }), className)}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n);\n\nButton.displayName = \"Button\";\n",
       "type": "registry:component",
       "target": "components/retroui/Button.tsx"
     }
diff --git a/public/r/card.json b/public/r/card.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "components/ui/Card.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\nimport { HTMLAttributes } from \"react\";\nimport { Text } from \"@/components/ui/Text\";\n\ninterface ICardProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n}\n\nconst Card = ({ className, ...props }: ICardProps) => {\n  return (\n    <div\n      className={cn(\n        \"inline-block border-2 border-black shadow-md cursor-pointer transition-all hover:shadow-xs\",\n        className\n      )}\n      {...props}\n    />\n  );\n};\n\nconst CardHeader = ({ className, ...props }: ICardProps) => {\n  return (\n    <div\n      className={cn(\"flex flex-col justify-start p-4\", className)}\n      {...props}\n    />\n  );\n};\n\nconst CardTitle = ({ className, ...props }: ICardProps) => {\n  return <Text as=\"h3\" className={cn(\"mb-2\", className)} {...props} />;\n};\n\nconst CardDescription = ({ className, ...props }: ICardProps) => (\n  <p className={cn(\"text-muted-foreground\", className)} {...props} />\n);\n\nconst CardContent = ({ className, ...props }: ICardProps) => {\n  return <div className={cn(\"p-4\", className)} {...props} />;\n};\n\nconst CardComponent = Object.assign(Card, {\n  Header: CardHeader,\n  Title: CardTitle,\n  Description: CardDescription,\n  Content: CardContent,\n});\n\nexport { CardComponent as Card };\n",
+      "content": "import { cn } from \"@/lib/utils\";\nimport { HTMLAttributes } from \"react\";\nimport { Text } from \"@/components/ui/Text\";\n\ninterface ICardProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n}\n\nconst Card = ({ className, ...props }: ICardProps) => {\n  return (\n    <div\n      className={cn(\n        \"inline-block border-2 border-black shadow-md transition-all hover:shadow-xs\",\n        className\n      )}\n      {...props}\n    />\n  );\n};\n\nconst CardHeader = ({ className, ...props }: ICardProps) => {\n  return (\n    <div\n      className={cn(\"flex flex-col justify-start p-4\", className)}\n      {...props}\n    />\n  );\n};\n\nconst CardTitle = ({ className, ...props }: ICardProps) => {\n  return <Text as=\"h3\" className={cn(\"mb-2\", className)} {...props} />;\n};\n\nconst CardDescription = ({ className, ...props }: ICardProps) => (\n  <p className={cn(\"text-muted-foreground\", className)} {...props} />\n);\n\nconst CardContent = ({ className, ...props }: ICardProps) => {\n  return <div className={cn(\"p-4\", className)} {...props} />;\n};\n\nconst CardComponent = Object.assign(Card, {\n  Header: CardHeader,\n  Title: CardTitle,\n  Description: CardDescription,\n  Content: CardContent,\n});\n\nexport { CardComponent as Card };\n",
       "type": "registry:component",
       "target": "components/retroui/Card.tsx"
     }
diff --git a/public/r/switch.json b/public/r/switch.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "components/ui/Switch.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Switch = ({ className, ...props }: SwitchPrimitives.SwitchProps) => (\n  <SwitchPrimitives.Root\n    className={cn(\n      \"peer inline-flex h-6 w-11 shrink-0 cursor-pointer border-2 border-foreground items-center disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary\",\n      className\n    )}\n    {...props}\n  >\n    <SwitchPrimitives.Thumb\n      className={cn(\n        \"pointer-events-none block h-4 w-4 bg-primary border-2 mx-0.5 border-foreground shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background\"\n      )}\n    />\n  </SwitchPrimitives.Root>\n);\n\nexport { Switch };\n",
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Switch = ({ className, ...props }: SwitchPrimitives.SwitchProps) => (\n  <SwitchPrimitives.Root\n    className={cn(\n      \"peer inline-flex h-6 w-11 shrink-0 cursor-pointer border-2 border-foreground items-center disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary\",\n      className\n    )}\n    {...props}\n  >\n    <SwitchPrimitives.Thumb\n      className={cn(\n        \"pointer-events-none block h-4 w-4 bg-primary border-2 mx-0.5 border-foreground ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background\"\n      )}\n    />\n  </SwitchPrimitives.Root>\n);\n\nexport { Switch };\n",
       "type": "registry:component",
       "target": "components/retroui/Switch.tsx"
     }

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ const Switch = ({ className, ...props }: SwitchPrimitives.SwitchProps) => (`
`15`	`15`	`>`
`16`	`16`	`<SwitchPrimitives.Thumb`
`17`	`17`	`className={cn(`
`18`		`- "pointer-events-none block h-4 w-4 bg-primary border-2 mx-0.5 border-foreground shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background"`
	`18`	`+ "pointer-events-none block h-4 w-4 bg-primary border-2 mx-0.5 border-foreground ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background"`
`19`	`19`	`)}`
`20`	`20`	`/>`
`21`	`21`	`</SwitchPrimitives.Root>`