Skip to content

Commit 1383600

Browse files
ariflogsariflogs
committed
minor changes to existing components
1 parent 8f22b21 commit 1383600

19 files changed

+148
-334
lines changed

‎components/retroui/Button.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,21 @@ import { cva, VariantProps } from "class-variance-authority";
33
import React, { ButtonHTMLAttributes } from "react";
44

55
const buttonVariants = cva(
6-
"font-head transition-all outline-hidden cursor-pointer flex items-center",
6+
"font-head transition-all outline-hidden cursor-pointer duration-200 font-medium flex items-center",
77
{
88
variants: {
99
variant: {
1010
default:
11-
"shadow-md hover:shadow-xs bg-primary text-black border-2 border-black hover:bg-primary-hover",
11+
"shadow-md hover:shadow-xs bg-primary text-black border-2 border-black transition hover:translate-y-1 hover:bg-primary-hover",
1212
secondary:
13-
"bg-black text-white shadow-primary hover:-translate-y-1 hover:shadow-md",
13+
"shadow-md hover:shadow-xs bg-black shadow-primary text-white border-2 border-black transition hover:translate-y-1",
1414
outline:
15-
"shadow-md hover:shadow-xs bg-transparent text-black border-2 border-black",
16-
link: "bg-transparent text-black hover:underline hs",
15+
"shadow-md hover:shadow-xs bg-transparent text-black border-2 border-black transition hover:translate-y-1",
16+
link: "bg-transparent text-black hover:underline",
1717
},
1818
size: {
19-
sm: "px-4 py-1.5 text-sm",
20-
md: "px-6 py-2 text-base",
19+
sm: "px-3 py-1 text-sm",
20+
md: "px-4 py-1.5 text-base",
2121
lg: "px-8 py-3 text-lg",
2222
},
2323
},

‎components/retroui/Popover.tsx‎

Lines changed: 26 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,7 @@ import { cn } from "@/lib/utils";
77
import { cva, VariantProps } from "class-variance-authority";
88

99
const popoverContentVariants = cva(
10-
"z-50 w-72 rounded-md border bg-primary p-4 text-popover-foreground outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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-popover-content-transform-origin]",
11-
{
12-
variants: {
13-
variant: {
14-
default: "bg-background",
15-
primary: "bg-primary",
16-
},
17-
shadow: {
18-
default: "",
19-
sm: "shadow-sm",
20-
md: "shadow-md",
21-
lg: "shadow-lg",
22-
},
23-
},
24-
defaultVariants: {
25-
variant: "default",
26-
shadow: "default",
27-
},
28-
},
10+
"z-50 w-72 border-2 bg-background p-4 text-popover-foreground outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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-popover-content-transform-origin]",
2911
);
3012

3113
const Popover = PopoverPrimitive.Root;
@@ -35,38 +17,30 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
3517
const PopoverAnchor = PopoverPrimitive.Anchor;
3618

3719
const PopoverContent = React.forwardRef<
38-
React.ElementRef<typeof PopoverPrimitive.Content>,
39-
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &
40-
VariantProps<typeof popoverContentVariants>
41-
>(
42-
(
43-
{
44-
className,
45-
align = "center",
46-
sideOffset = 4,
47-
variant,
48-
shadow,
49-
...props
50-
},
51-
ref,
52-
) => (
53-
<PopoverPrimitive.Portal>
54-
<PopoverPrimitive.Content
55-
ref={ref}
56-
align={align}
57-
sideOffset={sideOffset}
58-
className={cn(
59-
popoverContentVariants({
60-
variant,
61-
shadow,
62-
className,
63-
}),
64-
)}
65-
{...props}
66-
/>
67-
</PopoverPrimitive.Portal>
68-
),
69-
);
20+
React.ElementRef<typeof PopoverPrimitive.Content>,
21+
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &
22+
VariantProps<typeof popoverContentVariants>
23+
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
24+
<PopoverPrimitive.Portal>
25+
<PopoverPrimitive.Content
26+
ref={ref}
27+
align={align}
28+
sideOffset={sideOffset}
29+
className={cn(
30+
popoverContentVariants({
31+
className,
32+
}),
33+
)}
34+
{...props}
35+
/>
36+
</PopoverPrimitive.Portal>
37+
));
7038
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
7139

72-
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
40+
const PopoverObject = Object.assign(Popover, {
41+
Trigger: PopoverTrigger,
42+
Content: PopoverContent,
43+
Anchor: PopoverAnchor,
44+
});
45+
46+
export { PopoverObject as Popover };

‎components/retroui/Sonner.tsx‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,27 @@ import { Toaster as Sonner } from "sonner";
55
type ToasterProps = React.ComponentProps<typeof Sonner>;
66

77
const Toaster = ({ ...props }: ToasterProps) => {
8-
return (
9-
<Sonner
10-
toastOptions={{
11-
classNames: {
12-
toast: "h-auto w-full p-4 bg-background rounded-md border group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border shadow-lg flex items-center relative",
13-
description:
14-
"group-[.toast]:text-muted-foreground ml-2 font-sans",
15-
actionButton:
16-
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground py-1 px-2 shadow-md bg-background border-border border-2 ml-auto h-fit min-w-fit",
17-
cancelButton:
18-
"group-[.toast]:bg-muted group-[.toast]:text-foreground py-1 px-2 shadow-md bg-background border-border border-2 ml-auto h-fit min-w-fit",
19-
title: "ml-2 font-sans",
20-
closeButton:
21-
"absolute bg-background shadow-md -top-1 -left-1 rounded-full p-0.5",
22-
},
23-
unstyled: true,
24-
}}
25-
{...props}
26-
/>
27-
);
8+
return (
9+
<Sonner
10+
toastOptions={{
11+
classNames: {
12+
toast:
13+
"h-auto w-full p-4 bg-background border group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border flex items-center relative",
14+
description:
15+
"group-[.toast]:text-muted-foreground ml-2 text-sm font-sans",
16+
actionButton:
17+
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground py-1 px-2 bg-background border-border shadow border-2 ml-auto h-fit min-w-fit",
18+
cancelButton:
19+
"group-[.toast]:bg-muted group-[.toast]:text-foreground py-1 px-2 text-sm bg-background border-border shadow border-2 ml-auto h-fit min-w-fit",
20+
title: "ml-2 font-sans",
21+
closeButton:
22+
"absolute bg-background -top-1 -left-1 rounded-full p-0.5",
23+
},
24+
unstyled: true,
25+
}}
26+
{...props}
27+
/>
28+
);
2829
};
2930

3031
export { Toaster };

‎components/retroui/Tooltip.tsx‎

Lines changed: 35 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,19 @@ import { cn } from "@/lib/utils";
77
import { cva, VariantProps } from "class-variance-authority";
88

99
const tooltipContentVariants = cva(
10-
"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]",
11-
{
12-
variants: {
13-
variant: {
14-
default: "bg-background text-foreground",
15-
primary: "bg-primary text-foreground",
16-
solid: "bg-solid text-solid-foreground",
17-
},
18-
},
19-
defaultVariants: {
20-
variant: "default",
21-
},
10+
"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]",
11+
{
12+
variants: {
13+
variant: {
14+
default: "bg-background text-foreground",
15+
primary: "bg-primary text-foreground",
16+
solid: "bg-black text-white",
17+
},
2218
},
19+
defaultVariants: {
20+
variant: "default",
21+
},
22+
},
2323
);
2424

2525
const TooltipProvider = TooltipPrimitive.Provider;
@@ -29,24 +29,30 @@ const Tooltip = TooltipPrimitive.Root;
2929
const TooltipTrigger = TooltipPrimitive.Trigger;
3030

3131
const TooltipContent = React.forwardRef<
32-
React.ElementRef<typeof TooltipPrimitive.Content>,
33-
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &
34-
VariantProps<typeof tooltipContentVariants>
32+
React.ElementRef<typeof TooltipPrimitive.Content>,
33+
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &
34+
VariantProps<typeof tooltipContentVariants>
3535
>(({ className, sideOffset = 4, variant, ...props }, ref) => (
36-
<TooltipPrimitive.Portal>
37-
<TooltipPrimitive.Content
38-
ref={ref}
39-
sideOffset={sideOffset}
40-
className={cn(
41-
tooltipContentVariants({
42-
variant,
43-
className,
44-
}),
45-
)}
46-
{...props}
47-
/>
48-
</TooltipPrimitive.Portal>
36+
<TooltipPrimitive.Portal>
37+
<TooltipPrimitive.Content
38+
ref={ref}
39+
sideOffset={sideOffset}
40+
className={cn(
41+
tooltipContentVariants({
42+
variant,
43+
className,
44+
}),
45+
)}
46+
{...props}
47+
/>
48+
</TooltipPrimitive.Portal>
4949
));
5050
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
5151

52-
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
52+
const TooltipObject = Object.assign(Tooltip, {
53+
Trigger: TooltipTrigger,
54+
Content: TooltipContent,
55+
Provider: TooltipProvider,
56+
});
57+
58+
export { TooltipObject as Tooltip };

‎config/components.ts‎

Lines changed: 8 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -287,25 +287,13 @@ export const componentConfig: {
287287
filePath: "preview/components/popover-style-default.tsx",
288288
preview: lazy(() => import("@/preview/components/popover-style-default")),
289289
},
290-
"popover-style-primary": {
291-
name: "popover-style-primary",
292-
filePath: "preview/components/popover-style-primary.tsx",
293-
preview: lazy(() => import("@/preview/components/popover-style-primary")),
294-
},
295290
"popover-style-default-shadow": {
296291
name: "popover-style-default-shadow",
297292
filePath: "preview/components/popover-style-default-shadow.tsx",
298293
preview: lazy(
299294
() => import("@/preview/components/popover-style-default-shadow"),
300295
),
301296
},
302-
"popover-style-primary-shadow": {
303-
name: "popover-style-primary-shadow",
304-
filePath: "preview/components/popover-style-primary-shadow.tsx",
305-
preview: lazy(
306-
() => import("@/preview/components/popover-style-primary-shadow"),
307-
),
308-
},
309297
"radio-style-default": {
310298
name: "radio-style-default",
311299
filePath: "preview/components/radio-style-default.tsx",
@@ -416,21 +404,16 @@ export const componentConfig: {
416404
filePath: "preview/components/sonner-style-default.tsx",
417405
preview: lazy(() => import("@/preview/components/sonner-style-default")),
418406
},
419-
"sonner-style-warning": {
420-
name: "sonner-style-warning",
421-
filePath: "preview/components/sonner-style-warning.tsx",
422-
preview: lazy(() => import("@/preview/components/sonner-style-warning")),
423-
},
424-
"sonner-style-error": {
425-
name: "sonner-style-error",
426-
filePath: "preview/components/sonner-style-error.tsx",
427-
preview: lazy(() => import("@/preview/components/sonner-style-error")),
407+
"sonner-style-status": {
408+
name: "sonner-style-status",
409+
filePath: "preview/components/sonner-style-status.tsx",
410+
preview: lazy(() => import("@/preview/components/sonner-style-status")),
428411
},
429-
"sonner-style-rich-colors": {
430-
name: "sonner-style-rich-colors",
431-
filePath: "preview/components/sonner-style-rich-colors.tsx",
412+
"sonner-style-colored-status": {
413+
name: "sonner-style-colored-status",
414+
filePath: "preview/components/sonner-style-colored-status.tsx",
432415
preview: lazy(
433-
() => import("@/preview/components/sonner-style-rich-colors"),
416+
() => import("@/preview/components/sonner-style-colored-status"),
434417
),
435418
},
436419
label: {

‎content/docs/components/button.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Button
33
description: This bold button makes sure your users click on it and perform the actions you want! 🚀
4-
lastUpdated: 05 Apr, 2025
4+
lastUpdated: 30 Apr, 2025
55
links:
66
source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/Buttons/Button.tsx
77
---

‎content/docs/components/popover.mdx‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -61,20 +61,8 @@ import {
6161
<br />
6262
<br />
6363

64-
### Primary
65-
66-
<ComponentShowcase name="popover-style-primary" />
67-
<br />
68-
<br />
69-
7064
### Shadowed
7165

7266
<ComponentShowcase name="popover-style-default-shadow" />
7367
<br />
7468
<br />
75-
76-
### Primary Shadowed
77-
78-
<ComponentShowcase name="popover-style-primary-shadow" />
79-
<br />
80-
<br />

‎content/docs/components/sonner.mdx‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
---
22
title: Sonner
33
description: A beautiful toast component that can grab audience attention from any place.
4-
lastUpdated: 04 Apr, 2025
4+
lastUpdated: 30 Apr, 2025
5+
links:
6+
api_reference: https://sonner.emilkowal.ski/toast#api-reference
57
---
68

79
<ComponentShowcase name="sonner-style-default" />
@@ -68,19 +70,12 @@ lastUpdated: 04 Apr, 2025
6870
<br />
6971
<br />
7072

71-
### Warning Sonner
73+
### Status
7274

73-
<ComponentShowcase name="sonner-style-warning" />
75+
<ComponentShowcase name="sonner-style-status" />
7476
<br />
7577
<br />
7678

77-
### Error Sonner
79+
### Colored Status
7880

79-
<ComponentShowcase name="sonner-style-error" />
80-
81-
<br />
82-
<br />
83-
84-
### Rich Colors Sonner
85-
86-
<ComponentShowcase name="sonner-style-rich-colors" />
81+
<ComponentShowcase name="sonner-style-colored-status" />

‎content/docs/components/tooltip.mdx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
title: Tooltip
33
description: A cool way to give your users a hint of what a component does...😉
44
lastUpdated: 08 Apr, 2025
5+
links:
6+
source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/Tooltip.tsx
7+
api_reference: https://www.radix-ui.com/primitives/docs/components/tooltip#api-reference
58
---
69

710
<ComponentShowcase name="tooltip-style-default" />

0 commit comments

Comments
 (0)