Updates

components/lib/elements/Border.tsx

@@ -17,7 +17,7 @@ export default function Border({ spacing, ...props }: TWUI_BORDER_PROPS) {
         <div
             {...props}
             className={twMerge(
-                "relative flex items-center gap-2 border rounded",
+                "relative flex items-center gap-2 border border-solid rounded",
                 "border-slate-300 dark:border-white/10",
                 spacing
                     ? spacing == "normal"

components/lib/elements/Card.tsx

@@ -1,6 +1,19 @@
 import React, { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
+type Props = DetailedHTMLProps<
+    HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+> & {
+    variant?: "normal";
+    href?: string;
+    linkProps?: DetailedHTMLProps<
+        React.AnchorHTMLAttributes<HTMLAnchorElement>,
+        HTMLAnchorElement
+    >;
+    noHover?: boolean;
+};
+
 /**
  * # General Card
  * @className twui-card
@@ -13,22 +26,18 @@ export default function Card({
     href,
     variant,
     linkProps,
+    noHover,
     ...props
-}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
-    variant?: "normal";
-    href?: string;
-    linkProps?: DetailedHTMLProps<
-        React.AnchorHTMLAttributes<HTMLAnchorElement>,
-        HTMLAnchorElement
-    >;
-}) {
+}: Props) {
     const component = (
         <div
             {...props}
             className={twMerge(
                 "flex flex-row items-center p-4 rounded bg-white dark:bg-white/10",
                 "border border-slate-200 dark:border-white/10 border-solid",
-                href
+                noHover
+                    ? ""
+                    : href
                     ? "hover:bg-slate-100 dark:hover:bg-white/30 hover:border-slate-400 dark:hover:border-white/20"
                     : "",
                 "twui-card",

components/lib/elements/Dropdown.tsx

@@ -24,6 +24,7 @@ export type TWUI_DROPDOWN_PROPS = PropsWithChildren &
         >;
         debounce?: number;
         hoverOpen?: boolean;
+        above?: boolean;
         position?: (typeof TWUIDropdownContentPositions)[number];
         topOffset?: number;
         externalSetOpen?: React.Dispatch<React.SetStateAction<boolean>>;
@@ -41,6 +42,7 @@ export default function Dropdown({
     contentWrapperProps,
     targetWrapperProps,
     hoverOpen,
+    above,
     debounce = 500,
     target,
     position = "center",
@@ -122,6 +124,7 @@ export default function Dropdown({
                         : position == "right"
                         ? "right-0"
                         : "",
+                    above ? "-translate-y-[120%]" : "",
                     open ? "flex" : "hidden",
                     "twui-dropdown-content",
                     contentWrapperProps?.className

components/lib/elements/Tag.tsx

@@ -15,6 +15,7 @@ export type TWUI_TOGGLE_PROPS = PropsWithChildren &
     > & {
         color?: "normal" | "secondary" | "error" | "success" | "gray";
         variant?: "normal" | "outlined" | "ghost";
+        href?: string;
     };
 
 /**
@@ -25,13 +26,15 @@ export default function Tag({
     color,
     variant,
     children,
+    href,
     ...props
 }: TWUI_TOGGLE_PROPS) {
-    return (
+    const mainComponent = (
         <div
             {...props}
             className={twMerge(
                 "text-xs px-2 py-0.5 rounded-full outline outline-0",
+                "text-center flex items-center justify-center",
                 color == "secondary"
                     ? "bg-violet-600 outline-violet-600"
                     : color == "success"
@@ -63,7 +66,7 @@ export default function Tag({
                           : color == "gray"
                           ? "text-slate-700 dark:text-white/80"
                           : "text-blue-600")
-                    : "",
+                    : "text-white",
 
                 "twui-tag",
                 props.className
@@ -72,4 +75,14 @@ export default function Tag({
             {children}
         </div>
     );
+
+    if (href) {
+        return (
+            <a href={href} className={twMerge("hover:opacity-80")}>
+                {mainComponent}
+            </a>
+        );
+    }
+
+    return mainComponent;
 }