Updates

components/lib/layout/Button.tsx

@@ -119,26 +119,26 @@ export default function Button({
         } else if (variant == "ghost") {
             if (color == "primary" || !color)
                 return twMerge(
-                    "bg-transparent outline-none p-2",
-                    "text-blue-500",
+                    "bg-transparent dark:bg-transparent outline-none p-2",
+                    "text-blue-500 hover:bg-transparent dark:hover:bg-transparent",
                     "twui-button-primary-ghost"
                 );
             if (color == "secondary")
                 return twMerge(
-                    "bg-transparent outline-none p-2",
-                    "text-emerald-500",
+                    "bg-transparent dark:bg-transparent outline-none p-2",
+                    "text-emerald-500 hover:bg-transparent dark:hover:bg-transparent",
                     "twui-button-secondary-ghost"
                 );
             if (color == "accent")
                 return twMerge(
-                    "bg-transparent outline-none p-2",
-                    "text-violet-500",
+                    "bg-transparent dark:bg-transparent outline-none p-2",
+                    "text-violet-500 hover:bg-transparent dark:hover:bg-transparent",
                     "twui-button-accent-ghost"
                 );
             if (color == "gray")
                 return twMerge(
-                    "bg-transparent outline-none p-2",
-                    "text-slate-600 dark:text-white/70",
+                    "bg-transparent dark:bg-transparent outline-none p-2 hover:bg-transparent dark:hover:bg-transparent",
+                    "text-slate-600 dark:text-white/70 hover:opacity-80",
                     "twui-button-gray-ghost"
                 );
             if (color == "error")

components/lib/layout/Divider.tsx

@@ -17,7 +17,7 @@ export default function Divider({
         <div
             {...props}
             className={twMerge(
-                "border-slate-200 dark:border-white/10",
+                "border-slate-200 dark:border-white/10 border-solid",
                 vertical
                     ? "border-0 border-l h-full min-h-5"
                     : "border-0 border-t w-full",

components/lib/layout/Link.tsx

@@ -1,16 +1,26 @@
-import { AnchorHTMLAttributes, DetailedHTMLProps } from "react";
+import { AnchorHTMLAttributes, DetailedHTMLProps, RefAttributes } from "react";
 import { twMerge } from "tailwind-merge";
+import { ArrowUpRight, LucideProps } from "lucide-react";
+
+type Props = DetailedHTMLProps<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+> & {
+    showArrow?: boolean;
+    arrowSize?: number;
+    arrowProps?: Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>;
+};
 
 /**
  * # General Anchor Elements
  * @className twui-a | twui-anchor
  */
 export default function Link({
+    showArrow,
+    arrowSize = 20,
+    arrowProps,
     ...props
-}: DetailedHTMLProps<
-    AnchorHTMLAttributes<HTMLAnchorElement>,
-    HTMLAnchorElement
->) {
+}: Props) {
     return (
         <a
             {...props}
@@ -18,13 +28,22 @@ export default function Link({
                 "text-base text-link-500 no-underline hover:text-link-500/50",
                 "text-blue-600 dark:text-blue-400 hover:opacity-60 transition-all",
                 "border-0 border-b border-blue-300 dark:border-blue-200/30 border-solid leading-4",
-                // "focus:text-red-600",
                 "twui-anchor",
                 "twui-a",
                 props.className
             )}
         >
             {props.children}
+            {showArrow && (
+                <ArrowUpRight
+                    size={arrowSize}
+                    {...arrowProps}
+                    className={twMerge(
+                        "inline-block ml-1 -mt-[1px]",
+                        arrowProps?.className
+                    )}
+                />
+            )}
         </a>
     );
 }

components/lib/layout/Stack.tsx

@@ -2,15 +2,18 @@ import _ from "lodash";
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
+type Props = DetailedHTMLProps<
+    HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+> & {
+    center?: boolean;
+};
+
 /**
  * # Flexbox Column
  * @className twui-stack
  */
-export default function Stack({
-    ...props
-}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
-    center?: boolean;
-}) {
+export default function Stack({ ...props }: Props) {
     const finalProps = _.omit(props, "center");
     return (
         <div