From 1383600e71e5d9be9ac03658097260a13373f6c9 Mon Sep 17 00:00:00 2001 From: ariflogs Date: Wed, 30 Apr 2025 05:57:26 +0600 Subject: [PATCH 1/3] minor changes to existing components --- components/retroui/Button.tsx | 14 ++-- components/retroui/Popover.tsx | 78 +++++++------------ components/retroui/Sonner.tsx | 41 +++++----- components/retroui/Tooltip.tsx | 64 ++++++++------- config/components.ts | 33 ++------ content/docs/components/button.mdx | 2 +- content/docs/components/popover.mdx | 12 --- content/docs/components/sonner.mdx | 19 ++--- content/docs/components/tooltip.mdx | 3 + .../popover-style-default-shadow.tsx | 17 ++-- preview/components/popover-style-default.tsx | 17 ++-- .../popover-style-primary-shadow.tsx | 52 ------------- preview/components/popover-style-primary.tsx | 52 ------------- ...rs.tsx => sonner-style-colored-status.tsx} | 4 +- preview/components/sonner-style-status.tsx | 10 +++ preview/components/sonner-style-warning.tsx | 10 --- preview/components/tooltip-style-default.tsx | 18 ++--- preview/components/tooltip-style-primary.tsx | 18 ++--- preview/components/tooltip-style-solid.tsx | 18 ++--- 19 files changed, 148 insertions(+), 334 deletions(-) delete mode 100644 preview/components/popover-style-primary-shadow.tsx delete mode 100644 preview/components/popover-style-primary.tsx rename preview/components/{sonner-style-rich-colors.tsx => sonner-style-colored-status.tsx} (63%) create mode 100644 preview/components/sonner-style-status.tsx delete mode 100644 preview/components/sonner-style-warning.tsx diff --git a/components/retroui/Button.tsx b/components/retroui/Button.tsx index bbf8414..5afadbd 100644 --- a/components/retroui/Button.tsx +++ b/components/retroui/Button.tsx @@ -3,21 +3,21 @@ 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-xs 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-xs bg-black shadow-primary text-white 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-xs bg-transparent text-black border-2 border-black transition hover:translate-y-1", + link: "bg-transparent text-black 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", + md: "px-4 py-1.5 text-base", lg: "px-8 py-3 text-lg", }, }, diff --git a/components/retroui/Popover.tsx b/components/retroui/Popover.tsx index 6a7ad1a..45c2795 100644 --- a/components/retroui/Popover.tsx +++ b/components/retroui/Popover.tsx @@ -7,25 +7,7 @@ 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", - }, - }, + "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]", ); const Popover = PopoverPrimitive.Root; @@ -35,38 +17,30 @@ const PopoverTrigger = PopoverPrimitive.Trigger; const PopoverAnchor = PopoverPrimitive.Anchor; const PopoverContent = React.forwardRef< - React.ElementRef, - 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/Sonner.tsx b/components/retroui/Sonner.tsx index 71a47da..60c0529 100644 --- a/components/retroui/Sonner.tsx +++ b/components/retroui/Sonner.tsx @@ -5,26 +5,27 @@ import { Toaster as Sonner } from "sonner"; type ToasterProps = React.ComponentProps; 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..3e2e44d 100644 --- a/config/components.ts +++ b/config/components.ts @@ -287,11 +287,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 +294,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 +404,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..64e42f5 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 --- 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/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/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 ( - - - - - -
-
-

Dimensions

-

- Set the dimensions for the layer. -

-
- -
-
- - - -
- -
- - - -
-
-
- - - ); -} diff --git a/preview/components/popover-style-primary.tsx b/preview/components/popover-style-primary.tsx deleted file mode 100644 index e7cc9ab..0000000 --- a/preview/components/popover-style-primary.tsx +++ /dev/null @@ -1,52 +0,0 @@ -"use client"; - -import { - Popover, - PopoverTrigger, - PopoverContent, - Label, - Button, - Input, -} from "@/components/retroui"; - -export default function PopoverStylePrimary() { - return ( - - - - - -
-
-

Dimensions

-

- Set the dimensions for the layer. -

-
- -
-
- - - -
- -
- - - -
-
-
- - - ); -} diff --git a/preview/components/sonner-style-rich-colors.tsx b/preview/components/sonner-style-colored-status.tsx similarity index 63% rename from preview/components/sonner-style-rich-colors.tsx rename to preview/components/sonner-style-colored-status.tsx index afdf208..78181b4 100644 --- a/preview/components/sonner-style-rich-colors.tsx +++ b/preview/components/sonner-style-colored-status.tsx @@ -3,10 +3,10 @@ import { toast } from "sonner"; export default function SonnerStyleRichColors() { const onClick = () => { - toast.success("Congrats man 🎉", { + toast.success("Congrats man (Colored) 🎉", { richColors: true, }); }; - return ; + return ; } diff --git a/preview/components/sonner-style-status.tsx b/preview/components/sonner-style-status.tsx new file mode 100644 index 0000000..c27da50 --- /dev/null +++ b/preview/components/sonner-style-status.tsx @@ -0,0 +1,10 @@ +import { Button } from "@/components/retroui"; +import { toast } from "sonner"; + +export default function SonnerStyleStatus() { + const onClick = () => { + toast.success("Congrats man 🎉 (Plain)"); + }; + + return ; +} diff --git a/preview/components/sonner-style-warning.tsx b/preview/components/sonner-style-warning.tsx deleted file mode 100644 index a136c1a..0000000 --- a/preview/components/sonner-style-warning.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Button } from "@/components/retroui"; -import { toast } from "sonner"; - -export default function SonnerStyleWarning() { - const onClick = () => { - toast.warning("This is a serious warning"); - }; - - return ; -} diff --git a/preview/components/tooltip-style-default.tsx b/preview/components/tooltip-style-default.tsx index 10557be..7c76c38 100644 --- a/preview/components/tooltip-style-default.tsx +++ b/preview/components/tooltip-style-default.tsx @@ -1,22 +1,16 @@ "use client"; -import { - Button, - Tooltip, - TooltipProvider, - TooltipTrigger, - TooltipContent, -} from "@/components/retroui"; +import { Button, Tooltip } from "@/components/retroui"; export default function TooltipStyleDefault() { return ( - + - + - - Add to Library + + Add to Library - + ); } diff --git a/preview/components/tooltip-style-primary.tsx b/preview/components/tooltip-style-primary.tsx index 170b0ff..33632b2 100644 --- a/preview/components/tooltip-style-primary.tsx +++ b/preview/components/tooltip-style-primary.tsx @@ -1,22 +1,16 @@ "use client"; -import { - Button, - Tooltip, - TooltipProvider, - TooltipTrigger, - TooltipContent, -} from "@/components/retroui"; +import { Button, Tooltip } from "@/components/retroui"; export default function TooltipStylePrimary() { return ( - + - + - - Add to Library + + Add to Library - + ); } diff --git a/preview/components/tooltip-style-solid.tsx b/preview/components/tooltip-style-solid.tsx index 5f926d5..5e745b8 100644 --- a/preview/components/tooltip-style-solid.tsx +++ b/preview/components/tooltip-style-solid.tsx @@ -1,22 +1,16 @@ "use client"; -import { - Button, - Tooltip, - TooltipProvider, - TooltipTrigger, - TooltipContent, -} from "@/components/retroui"; +import { Button, Tooltip } from "@/components/retroui"; export default function TooltipStyleSolid() { return ( - + - + - - Add to Library + + Add to Library - + ); } From 6ff8ec81105ed0b66b6baf99dd618eac4bff3bfb Mon Sep 17 00:00:00 2001 From: ariflogs Date: Wed, 30 Apr 2025 21:28:36 +0600 Subject: [PATCH 2/3] added dark mode --- app/(docs)/docs/[[...slug]]/page.tsx | 2 +- app/global.css | 37 +- app/layout.tsx | 20 +- components/SideNav.tsx | 5 +- components/TopNav.tsx | 39 +- components/retroui/Accordion.tsx | 4 +- components/retroui/Alert.tsx | 2 +- components/retroui/Avatar.tsx | 2 +- components/retroui/Badge.tsx | 4 +- components/retroui/BasicCard.tsx | 2 +- components/retroui/Button.tsx | 11 +- components/retroui/Card.tsx | 2 +- components/retroui/Checkbox.tsx | 5 +- components/retroui/Dialog.tsx | 6 +- components/retroui/Input.tsx | 2 +- components/retroui/Menu.tsx | 4 +- components/retroui/Progress.tsx | 2 +- config/components.ts | 5 + content/docs/components/button.mdx | 7 + content/docs/components/progress.mdx | 50 +-- .../components/accordion-style-default.tsx | 2 +- preview/components/button-style-icon.tsx | 10 + preview/components/input-style-default.tsx | 10 +- registry.json | 364 ++++++++++++++---- 24 files changed, 404 insertions(+), 193 deletions(-) create mode 100644 preview/components/button-style-icon.tsx diff --git a/app/(docs)/docs/[[...slug]]/page.tsx b/app/(docs)/docs/[[...slug]]/page.tsx index a83fb41..789229b 100644 --- a/app/(docs)/docs/[[...slug]]/page.tsx +++ b/app/(docs)/docs/[[...slug]]/page.tsx @@ -50,7 +50,7 @@ export default function page({ params }: IProps) { {doc.title}

{doc.description}

{doc.links && ( -
+
{doc.links?.api_reference && ( +