@julseb-lib/react 0.0.43 → 0.0.45

package/dist/lib/components/Dropdown/styles.tsx

@@ -107,16 +107,22 @@ const StyledDropdownItem = styled.button<{
             $gap,
         })}
 
+    &:disabled {
+        color: ${({ theme }) => theme.GRAY_500};
+    }
+
     @media ${MEDIA.HOVER} {
-        &:hover {
-            background-color: ${({ theme, $accentColor }) =>
-                Mixins.ColorsHoverHover($accentColor, theme)};
-            color: ${({ theme }) => theme.BACKGROUND};
-        }
+        &:not(:disabled) {
+            &:hover {
+                background-color: ${({ theme, $accentColor }) =>
+                    Mixins.ColorsHoverHover($accentColor, theme)};
+                color: ${({ theme }) => theme.BACKGROUND};
+            }
 
-        &:active {
-            background-color: ${({ theme, $accentColor }) =>
-                Mixins.ColorsHoverActive($accentColor, theme)};
+            &:active {
+                background-color: ${({ theme, $accentColor }) =>
+                    Mixins.ColorsHoverActive($accentColor, theme)};
+            }
         }
     }
 `

package/dist/lib/components/Header/HeaderNavLink.tsx

@@ -2,7 +2,7 @@
 /*=============================================== HeaderNavLink ===============================================*/
 
 import { isValidElement } from "react"
-import { NavLink } from "react-router-dom"
+import { Link } from "../../"
 import type { ILibHeaderNavLink } from "./subtypes"
 
 export const HeaderNavLink = ({
@@ -12,56 +12,21 @@ export const HeaderNavLink = ({
 }: ILibHeaderNavLink) => {
     if (isValidElement(link)) return link
 
-    if (link.to)
-        return (
-            <NavLink
-                data-testid={
-                    link["data-testid"] || (testid && `${testid}.NavLink`)
-                }
-                className={link.className || (className && "NavLink")}
-                id={link.id}
-                ref={link.ref}
-                to={link.to}
-                end={link.end}
-                target={link.blank ? "_blank" : undefined}
-                rel={link.blank ? "noreferrer noopener" : undefined}
-            >
-                {link.text}
-            </NavLink>
-        )
-
-    if (link.href)
-        return (
-            <a
-                data-testid={
-                    link["data-testid"] || (testid && `${testid}.NavLink`)
-                }
-                className={link.className || (className && "NavLink")}
-                id={link.id}
-                ref={link.ref}
-                href={link.href}
-                target={link.blank ? "_blank" : undefined}
-                rel={link.blank ? "noreferrer noopener" : undefined}
-            >
-                {link.text}
-            </a>
-        )
-
-    if (link.onClick)
-        return (
-            <button
-                data-testid={
-                    link["data-testid"] || (testid && `${testid}.NavButton`)
-                }
-                className={link.className || (className && "NavButton")}
-                id={link.id}
-                ref={link.ref}
-                onClick={link.onClick}
-                disabled={link.disabled}
-            >
-                {link.text}
-            </button>
-        )
-
-    return null
+    return (
+        <Link
+            data-testid={link["data-testid"] || (testid && `${testid}.NavLink`)}
+            className={link.className || (className && "NavLink")}
+            id={link.id}
+            ref={link.ref}
+            end={link.end}
+            blank={link.blank}
+            to={link.to}
+            href={link.href}
+            onClick={link.onClick}
+            disabled={link.disabled}
+            isNavLink
+        >
+            {link.text}
+        </Link>
+    )
 }

package/dist/lib/components/Link/Link.tsx

@@ -0,0 +1,68 @@
+/*=============================================== Link component ===============================================*/
+
+import { forwardRef, type RefObject } from "react"
+import { Link as RouterLink, NavLink } from "react-router-dom"
+import type { ILibLink } from "./types"
+
+/**
+ * @description Returns a Link component
+ * @link https://documentation-components-react.vercel.app/components/link
+ * @extends HTMLDivElement
+ * @prop data-testid?: string
+ * @prop ref?: ForwardedRef<HTMLDivElement>
+ */
+export const Link = forwardRef<HTMLAnchorElement | HTMLButtonElement, ILibLink>(
+    (
+        { "data-testid": testid, isNavLink, to, href, onClick, blank, end, ...rest },
+        ref
+    ) => {
+        if (onClick)
+            return (
+                <button
+                    data-testid={testid}
+                    ref={ref as RefObject<HTMLButtonElement>}
+                    onClick={onClick}
+                    {...rest}
+                />
+            )
+
+        if (href)
+            return (
+                <a
+                    data-testid={testid}
+                    ref={ref as RefObject<HTMLAnchorElement>}
+                    href={href}
+                    target={blank ? "_blank" : undefined}
+                    rel={blank ? "noreferrer noopener" : undefined}
+                    {...rest}
+                />
+            )
+
+        if (isNavLink && to)
+            return (
+                <NavLink
+                    data-testid={testid}
+                    ref={ref as RefObject<HTMLAnchorElement>}
+                    to={to}
+                    target={blank ? "_blank" : undefined}
+                    rel={blank ? "noreferrer noopener" : undefined}
+                    end={end}
+                    {...rest}
+                />
+            )
+
+        if (to)
+            return (
+                <RouterLink
+                    data-testid={testid}
+                    ref={ref as RefObject<HTMLAnchorElement>}
+                    to={to}
+                    target={blank ? "_blank" : undefined}
+                    rel={blank ? "noreferrer noopener" : undefined}
+                    {...rest}
+                />
+            )
+
+        return null
+    }
+)

package/dist/lib/components/Link/index.ts

@@ -0,0 +1,3 @@
+/*=============================================== Link exports ===============================================*/
+
+export * from "./Link"

package/dist/lib/components/Link/types.ts

@@ -0,0 +1,9 @@
+/*=============================================== Link types ===============================================*/
+
+import type { LibComponentBase, LibButtonLinkBlank } from "../../types"
+
+export type ILibLink = LibComponentBase<HTMLAnchorElement | HTMLButtonElement> &
+    LibButtonLinkBlank & {
+        isNavLink?: boolean
+        end?: boolean
+    }

package/dist/lib/index.ts

@@ -85,6 +85,7 @@ export * from "./components/Section"
 export * from "./components/Grid"
 export * from "./components/Flexbox"
 export * from "./components/Icon"
+export * from "./components/Link"
 export * from "./components/Key"
 export * from "./components/TextIcon"
 export * from "./components/Highlight"

package/dist/lib/types/components-props.ts

@@ -78,4 +78,5 @@ export * from "../components/DragList/types"
 export * from "../components/Fieldset/types"
 export * from "../components/Datepicker/types"
 export * from "../components/Timepicker/types"
+export * from "../components/Link/types"
 // prependHere

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@julseb-lib/react",
-    "version": "0.0.43",
+    "version": "0.0.45",
     "type": "module",
     "license": "MIT",
     "scripts": {