This is card Title
diff --git a/components/retroui/Button.tsx b/components/retroui/Button.tsx
index bbf8414..3583942 100644
--- a/components/retroui/Button.tsx
+++ b/components/retroui/Button.tsx
@@ -3,22 +3,23 @@ import { cva, VariantProps } from "class-variance-authority";
import React, { ButtonHTMLAttributes } from "react";
const buttonVariants = cva(
- "font-head transition-all outline-hidden cursor-pointer flex items-center",
+ "font-head transition-all outline-hidden cursor-pointer duration-200 font-medium flex items-center",
{
variants: {
variant: {
default:
- "shadow-md hover:shadow-xs bg-primary text-black border-2 border-black hover:bg-primary-hover",
+ "shadow-md hover:shadow-none bg-primary text-black border-2 border-black transition hover:translate-y-1 hover:bg-primary-hover",
secondary:
- "bg-black text-white shadow-primary hover:-translate-y-1 hover:shadow-md",
+ "shadow-md hover:shadow-none bg-secondary shadow-primary text-secondary-foreground border-2 border-black transition hover:translate-y-1",
outline:
- "shadow-md hover:shadow-xs bg-transparent text-black border-2 border-black",
- link: "bg-transparent text-black hover:underline hs",
+ "shadow-md hover:shadow-none bg-transparent border-2 transition hover:translate-y-1",
+ link: "bg-transparent hover:underline",
},
size: {
- sm: "px-4 py-1.5 text-sm",
- md: "px-6 py-2 text-base",
+ sm: "px-3 py-1 text-sm shadow hover:shadow-none",
+ md: "px-4 py-1.5 text-base",
lg: "px-8 py-3 text-lg",
+ icon: "p-2",
},
},
defaultVariants: {
diff --git a/components/retroui/Card.tsx b/components/retroui/Card.tsx
index 4a90db3..9836257 100644
--- a/components/retroui/Card.tsx
+++ b/components/retroui/Card.tsx
@@ -10,7 +10,7 @@ const Card = ({ className, ...props }: ICardProps) => {
return (
= ({
(
side="bottom"
align="start"
className={cn(
- "bg-white border-2 border-black shadow-md absolute top-2 min-w-20",
+ "bg-white border-2 shadow-md absolute top-2 min-w-20",
className,
)}
{...props}
@@ -31,7 +31,7 @@ const MenuItem = React.forwardRef<
,
- React.ComponentPropsWithoutRef &
- VariantProps
->(
- (
- {
- className,
- align = "center",
- sideOffset = 4,
- variant,
- shadow,
- ...props
- },
- ref,
- ) => (
-
-
-
- ),
-);
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+
+
+
+));
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+const PopoverObject = Object.assign(Popover, {
+ Trigger: PopoverTrigger,
+ Content: PopoverContent,
+ Anchor: PopoverAnchor,
+});
+
+export { PopoverObject as Popover };
diff --git a/components/retroui/Progress.tsx b/components/retroui/Progress.tsx
index cf4d8cc..f0470f2 100644
--- a/components/retroui/Progress.tsx
+++ b/components/retroui/Progress.tsx
@@ -12,7 +12,7 @@ const Progress = React.forwardRef<
;
const Toaster = ({ ...props }: ToasterProps) => {
- return (
-
- );
+ return (
+
+ );
};
export { Toaster };
diff --git a/components/retroui/Tooltip.tsx b/components/retroui/Tooltip.tsx
index 37d7c5d..67454c8 100644
--- a/components/retroui/Tooltip.tsx
+++ b/components/retroui/Tooltip.tsx
@@ -7,19 +7,19 @@ import { cn } from "@/lib/utils";
import { cva, VariantProps } from "class-variance-authority";
const tooltipContentVariants = cva(
- "z-50 overflow-hidden border-2 border-border bg-background px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
- {
- variants: {
- variant: {
- default: "bg-background text-foreground",
- primary: "bg-primary text-foreground",
- solid: "bg-solid text-solid-foreground",
- },
- },
- defaultVariants: {
- variant: "default",
- },
+ "z-50 overflow-hidden border-2 border-border bg-background px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+ {
+ variants: {
+ variant: {
+ default: "bg-background text-foreground",
+ primary: "bg-primary text-foreground",
+ solid: "bg-black text-white",
+ },
},
+ defaultVariants: {
+ variant: "default",
+ },
+ },
);
const TooltipProvider = TooltipPrimitive.Provider;
@@ -29,24 +29,30 @@ const Tooltip = TooltipPrimitive.Root;
const TooltipTrigger = TooltipPrimitive.Trigger;
const TooltipContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef &
- VariantProps
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
>(({ className, sideOffset = 4, variant, ...props }, ref) => (
-
-
-
+
+
+
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+const TooltipObject = Object.assign(Tooltip, {
+ Trigger: TooltipTrigger,
+ Content: TooltipContent,
+ Provider: TooltipProvider,
+});
+
+export { TooltipObject as Tooltip };
diff --git a/config/components.ts b/config/components.ts
index 453eb06..df92a48 100644
--- a/config/components.ts
+++ b/config/components.ts
@@ -190,6 +190,11 @@ export const componentConfig: {
() => import("@/preview/components/button-style-secondary"),
),
},
+ "button-style-icon": {
+ name: "button-style-icon",
+ filePath: "preview/components/button-style-icon.tsx",
+ preview: lazy(() => import("@/preview/components/button-style-icon")),
+ },
"button-style-outline": {
name: "button-style-default",
filePath: "preview/components/button-style-outline.tsx",
@@ -287,11 +292,6 @@ export const componentConfig: {
filePath: "preview/components/popover-style-default.tsx",
preview: lazy(() => import("@/preview/components/popover-style-default")),
},
- "popover-style-primary": {
- name: "popover-style-primary",
- filePath: "preview/components/popover-style-primary.tsx",
- preview: lazy(() => import("@/preview/components/popover-style-primary")),
- },
"popover-style-default-shadow": {
name: "popover-style-default-shadow",
filePath: "preview/components/popover-style-default-shadow.tsx",
@@ -299,13 +299,6 @@ export const componentConfig: {
() => import("@/preview/components/popover-style-default-shadow"),
),
},
- "popover-style-primary-shadow": {
- name: "popover-style-primary-shadow",
- filePath: "preview/components/popover-style-primary-shadow.tsx",
- preview: lazy(
- () => import("@/preview/components/popover-style-primary-shadow"),
- ),
- },
"radio-style-default": {
name: "radio-style-default",
filePath: "preview/components/radio-style-default.tsx",
@@ -416,21 +409,16 @@ export const componentConfig: {
filePath: "preview/components/sonner-style-default.tsx",
preview: lazy(() => import("@/preview/components/sonner-style-default")),
},
- "sonner-style-warning": {
- name: "sonner-style-warning",
- filePath: "preview/components/sonner-style-warning.tsx",
- preview: lazy(() => import("@/preview/components/sonner-style-warning")),
- },
- "sonner-style-error": {
- name: "sonner-style-error",
- filePath: "preview/components/sonner-style-error.tsx",
- preview: lazy(() => import("@/preview/components/sonner-style-error")),
+ "sonner-style-status": {
+ name: "sonner-style-status",
+ filePath: "preview/components/sonner-style-status.tsx",
+ preview: lazy(() => import("@/preview/components/sonner-style-status")),
},
- "sonner-style-rich-colors": {
- name: "sonner-style-rich-colors",
- filePath: "preview/components/sonner-style-rich-colors.tsx",
+ "sonner-style-colored-status": {
+ name: "sonner-style-colored-status",
+ filePath: "preview/components/sonner-style-colored-status.tsx",
preview: lazy(
- () => import("@/preview/components/sonner-style-rich-colors"),
+ () => import("@/preview/components/sonner-style-colored-status"),
),
},
label: {
diff --git a/content/docs/components/button.mdx b/content/docs/components/button.mdx
index a0aa276..eb66b07 100644
--- a/content/docs/components/button.mdx
+++ b/content/docs/components/button.mdx
@@ -1,7 +1,7 @@
---
title: Button
description: This bold button makes sure your users click on it and perform the actions you want! 🚀
-lastUpdated: 05 Apr, 2025
+lastUpdated: 30 Apr, 2025
links:
source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/Buttons/Button.tsx
---
@@ -61,6 +61,13 @@ npm install class-variance-authority
+### Icon
+
+
+
+
+
+
### With Icon
diff --git a/content/docs/components/popover.mdx b/content/docs/components/popover.mdx
index 86a7273..0c99b30 100644
--- a/content/docs/components/popover.mdx
+++ b/content/docs/components/popover.mdx
@@ -61,20 +61,8 @@ import {
-### Primary
-
-
-
-
-
### Shadowed
-
-### Primary Shadowed
-
-
-
-
diff --git a/content/docs/components/progress.mdx b/content/docs/components/progress.mdx
index 256758c..f796447 100644
--- a/content/docs/components/progress.mdx
+++ b/content/docs/components/progress.mdx
@@ -42,52 +42,4 @@ npm install @radix-ui/react-progress lucide-react
### Default
-
-{/* ## Installation
-
-
-
-
- CLI
- Manual
-
-
-
-```bash
-npx shadcn@latest add progress
-```
-
-
-
-
-
-
-
-Install the following dependencies:
-
-```bash
-npm install @radix-ui/react-progress
-```
-
-Copy and paste the following code into your project.
-
-
-
-Update the import paths to match your project setup.
-
-
-
-
-
-
-
-## Usage
-
-```tsx
-import { Progress } from "@/components/retroui/progress";
-```
-
-````tsx
-
-``` */}
-````
+
\ No newline at end of file
diff --git a/content/docs/components/sonner.mdx b/content/docs/components/sonner.mdx
index 4159099..9825bca 100644
--- a/content/docs/components/sonner.mdx
+++ b/content/docs/components/sonner.mdx
@@ -1,7 +1,9 @@
---
title: Sonner
description: A beautiful toast component that can grab audience attention from any place.
-lastUpdated: 04 Apr, 2025
+lastUpdated: 30 Apr, 2025
+links:
+ api_reference: https://sonner.emilkowal.ski/toast#api-reference
---
@@ -68,19 +70,12 @@ lastUpdated: 04 Apr, 2025
-### Warning Sonner
+### Status
-
+
-### Error Sonner
+### Colored Status
-
-
-
-
-
-### Rich Colors Sonner
-
-
+
diff --git a/content/docs/components/tooltip.mdx b/content/docs/components/tooltip.mdx
index d075801..2b9a807 100644
--- a/content/docs/components/tooltip.mdx
+++ b/content/docs/components/tooltip.mdx
@@ -2,6 +2,9 @@
title: Tooltip
description: A cool way to give your users a hint of what a component does...😉
lastUpdated: 08 Apr, 2025
+links:
+ source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/Tooltip.tsx
+ api_reference: https://www.radix-ui.com/primitives/docs/components/tooltip#api-reference
---
diff --git a/preview/components/accordion-style-default.tsx b/preview/components/accordion-style-default.tsx
index 134c179..f251f43 100644
--- a/preview/components/accordion-style-default.tsx
+++ b/preview/components/accordion-style-default.tsx
@@ -4,7 +4,7 @@ import { Accordion } from "@/components/retroui/Accordion";
export default function AccordionStyleDefault() {
return (
-
+
Accordion Item 1
diff --git a/preview/components/button-style-icon.tsx b/preview/components/button-style-icon.tsx
new file mode 100644
index 0000000..6f88b77
--- /dev/null
+++ b/preview/components/button-style-icon.tsx
@@ -0,0 +1,10 @@
+import { Button } from "@/components/retroui/Button";
+import { PenIcon } from "lucide-react";
+
+export default function ButtonStyleIcon() {
+ return (
+
+ );
+}
diff --git a/preview/components/input-style-default.tsx b/preview/components/input-style-default.tsx
index a71368b..ca4dc43 100644
--- a/preview/components/input-style-default.tsx
+++ b/preview/components/input-style-default.tsx
@@ -1,9 +1,5 @@
+import { Input } from "@/components/retroui/Input";
+
export default function InputStyleDefault() {
- return (
-
- );
+ return ;
}
diff --git a/preview/components/popover-style-default-shadow.tsx b/preview/components/popover-style-default-shadow.tsx
index 3a3efc3..3e5855e 100644
--- a/preview/components/popover-style-default-shadow.tsx
+++ b/preview/components/popover-style-default-shadow.tsx
@@ -1,21 +1,14 @@
"use client";
-import {
- Popover,
- PopoverTrigger,
- PopoverContent,
- Label,
- Button,
- Input,
-} from "@/components/retroui";
+import { Popover, Label, Button, Input } from "@/components/retroui";
export default function PopoverStyleDefaultShadow() {
return (
-
+
-
-
+
+
Dimensions
@@ -46,7 +39,7 @@ export default function PopoverStyleDefaultShadow() {
-
+
);
}
diff --git a/preview/components/popover-style-default.tsx b/preview/components/popover-style-default.tsx
index ffb62ea..7507b3a 100644
--- a/preview/components/popover-style-default.tsx
+++ b/preview/components/popover-style-default.tsx
@@ -1,21 +1,14 @@
"use client";
-import {
- Popover,
- PopoverTrigger,
- PopoverContent,
- Label,
- Button,
- Input,
-} from "@/components/retroui";
+import { Popover, Label, Button, Input } from "@/components/retroui";
export default function PopoverStyleDefault() {
return (
-
+
-
-
+
+
Dimensions
@@ -46,7 +39,7 @@ export default function PopoverStyleDefault() {
-
+
);
}
diff --git a/preview/components/popover-style-primary-shadow.tsx b/preview/components/popover-style-primary-shadow.tsx
deleted file mode 100644
index 57b11d4..0000000
--- a/preview/components/popover-style-primary-shadow.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-"use client";
-
-import {
- Popover,
- PopoverTrigger,
- PopoverContent,
- Label,
- Button,
- Input,
-} from "@/components/retroui";
-
-export default function PopoverStylePrimaryShadow() {
- return (
-