feat: ✨ add new shadcn components

app/layout.tsx

@@ -2,6 +2,7 @@ import TopNav from "@/components/TopNav";
 import "./global.css";
 import { Archivo_Black, Space_Grotesk, Space_Mono } from "next/font/google";
 import { Metadata } from "next";
+import { Toaster } from "@/components/retroui";
 
 const archivoBlack = Archivo_Black({
   subsets: ["latin"],
@@ -55,6 +56,7 @@ export default function RootLayout({
           <TopNav />
         </div>
         {children}
+        <Toaster />
       </body>
     </html>
   );

components/retroui/Popover.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/lib/utils";
+import { cva, VariantProps } from "class-variance-authority";
+
+const popoverContentVariants = cva(
+    "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]",
+    {
+        variants: {
+            variant: {
+                default: "bg-background",
+                primary: "bg-primary",
+            },
+            shadow: {
+                default: "",
+                sm: "shadow-sm",
+                md: "shadow-md",
+                lg: "shadow-lg",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            shadow: "default",
+        },
+    },
+);
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+    React.ElementRef<typeof PopoverPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &
+        VariantProps<typeof popoverContentVariants>
+>(
+    (
+        {
+            className,
+            align = "center",
+            sideOffset = 4,
+            variant,
+            shadow,
+            ...props
+        },
+        ref,
+    ) => (
+        <PopoverPrimitive.Portal>
+            <PopoverPrimitive.Content
+                ref={ref}
+                align={align}
+                sideOffset={sideOffset}
+                className={cn(
+                    popoverContentVariants({
+                        variant,
+                        shadow,
+                        className,
+                    }),
+                )}
+                {...props}
+            />
+        </PopoverPrimitive.Portal>
+    ),
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

components/retroui/Sonner.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+    return (
+        <Sonner
+            toastOptions={{
+                classNames: {
+                    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",
+                    description:
+                        "group-[.toast]:text-muted-foreground ml-2 font-sans",
+                    actionButton:
+                        "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",
+                    cancelButton:
+                        "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",
+                    title: "ml-2 font-sans",
+                    closeButton:
+                        "absolute bg-background shadow-md -top-1 -left-1 rounded-full p-0.5",
+                },
+                unstyled: true,
+            }}
+            {...props}
+        />
+    );
+};
+
+export { Toaster };

components/retroui/Toggle.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const toggleVariants = cva(
+    "inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+    {
+        variants: {
+            variant: {
+                default:
+                    "bg-transparent hover:bg-muted/70 hover:text-muted-foreground data-[state=on]:bg-muted",
+                outlined:
+                    "border-2 border-input bg-transparent hover:bg-accent hover:text-accent-foreground/80 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+                solid: "border-2 border-input bg-transparent hover:bg-black hover:text-white/90 hover:border-black data-[state=on]:bg-black data-[state=on]:text-white data-[state=on]:border-black",
+                "outline-muted":
+                    "border-2 border-input bg-transparent hover:hover:bg-muted/70 hover:hover:text-muted-foreground data-[state=on]:bg-muted",
+            },
+            size: {
+                default: "h-10 px-3 min-w-10",
+                sm: "h-9 px-2.5 min-w-9",
+                lg: "h-11 px-5 min-w-11",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    },
+);
+
+const Toggle = React.forwardRef<
+    React.ElementRef<typeof TogglePrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+        VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+    <TogglePrimitive.Root
+        ref={ref}
+        className={cn(toggleVariants({ variant, size, className }))}
+        {...props}
+    />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

components/retroui/ToggleGroup.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { toggleVariants } from "./Toggle";
+
+const ToggleGroupContext = React.createContext<
+    VariantProps<typeof toggleVariants>
+>({
+    size: "default",
+    variant: "default",
+});
+
+const ToggleGroup = React.forwardRef<
+    React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+        VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+    <ToggleGroupPrimitive.Root
+        ref={ref}
+        className={cn("flex items-center justify-center gap-1", className)}
+        {...props}
+    >
+        <ToggleGroupContext.Provider value={{ variant, size }}>
+            {children}
+        </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+));
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = React.forwardRef<
+    React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+        VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+    const context = React.useContext(ToggleGroupContext);
+
+    return (
+        <ToggleGroupPrimitive.Item
+            ref={ref}
+            className={cn(
+                toggleVariants({
+                    variant: context.variant || variant,
+                    size: context.size || size,
+                }),
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </ToggleGroupPrimitive.Item>
+    );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };

components/retroui/Tooltip.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+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",
+        },
+    },
+);
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+    React.ElementRef<typeof TooltipPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &
+        VariantProps<typeof tooltipContentVariants>
+>(({ className, sideOffset = 4, variant, ...props }, ref) => (
+    <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Content
+            ref={ref}
+            sideOffset={sideOffset}
+            className={cn(
+                tooltipContentVariants({
+                    variant,
+                    className,
+                }),
+            )}
+            {...props}
+        />
+    </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

components/retroui/index.ts

@@ -17,3 +17,8 @@ export * from "./Tab";
 export * from "./Dialog";
 export * from "./Menu";
 export * from "./Progress";
+export * from "./Popover";
+export * from "./Toggle";
+export * from "./ToggleGroup";
+export * from "./Sonner";
+export * from "./Tooltip";