@julseb-lib/react 0.0.84 → 0.0.86

package/dist/lib/components/Breadcrumbs/BreadcrumbsFn.tsx

@@ -1,76 +1,64 @@
-/*=============================================== BreadcrumbsFn ===============================================*/
-
-import { forwardRef, Fragment } from "react"
+import { Fragment, type FC } from "react"
 import { uuid } from "@julseb-lib/utils"
 import { LibIcon } from "../LibIcon"
 import { ChevronRight } from "../../icons"
 import { StyledBreadcrumbs, SeparatorContainer } from "./styles"
 import type { ILibBreadcrumbs } from "./types"
 
-export const BreadcrumbsFn = forwardRef<
-    HTMLDivElement,
-    Omit<ILibBreadcrumbs, "items">
->(
-    (
-        {
-            "data-testid": testid,
-            className,
-            as,
-            children,
-            linksColor = "primary",
-            activeColor = "currentColor",
-            gap = "xs",
-            separator = "slash",
-            separatorColor = "currentColor",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledBreadcrumbs
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={className}
-                $gap={gap}
-                $linkColor={linksColor}
-                $activeColor={activeColor}
-                {...rest}
-            >
-                {children?.map((child, i) => (
-                    <Fragment key={uuid()}>
-                        {child}
+export const BreadcrumbsFn: FC<Omit<ILibBreadcrumbs, "items">> = ({
+    "data-testid": testid,
+    className,
+    as,
+    ref,
+    children,
+    linksColor = "primary",
+    activeColor = "currentColor",
+    gap = "xs",
+    separator = "slash",
+    separatorColor = "currentColor",
+    ...rest
+}) => {
+    return (
+        <StyledBreadcrumbs
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            className={className}
+            $gap={gap}
+            $linkColor={linksColor}
+            $activeColor={activeColor}
+            {...rest}
+        >
+            {children?.map((child, i) => (
+                <Fragment key={uuid()}>
+                    {child}
 
-                        {i !== children.length - 1 && (
-                            <SeparatorContainer
-                                data-testid={
-                                    testid && `${testid}.SeparatorContainer`
-                                }
-                                className={className && "SeparatorContainer"}
-                                $color={separatorColor}
-                            >
-                                {separator === "chevron" ? (
-                                    <ChevronRight
-                                        size={16}
-                                        data-testid={
-                                            testid &&
-                                            `${testid}.SeparatorContainer.Icon`
-                                        }
-                                        className={className && "Icon"}
-                                    />
-                                ) : separator === "slash" ? (
-                                    "/"
-                                ) : (
-                                    <LibIcon
-                                        icon={separator}
-                                        baseUrl={undefined}
-                                    />
-                                )}
-                            </SeparatorContainer>
-                        )}
-                    </Fragment>
-                ))}
-            </StyledBreadcrumbs>
-        )
-    }
-)
+                    {i !== children.length - 1 && (
+                        <SeparatorContainer
+                            data-testid={
+                                testid && `${testid}.SeparatorContainer`
+                            }
+                            className={className && "SeparatorContainer"}
+                            $color={separatorColor}
+                        >
+                            {separator === "chevron" ? (
+                                <ChevronRight
+                                    size={16}
+                                    data-testid={
+                                        testid &&
+                                        `${testid}.SeparatorContainer.Icon`
+                                    }
+                                    className={className && "Icon"}
+                                />
+                            ) : separator === "slash" ? (
+                                "/"
+                            ) : (
+                                <LibIcon icon={separator} baseUrl={undefined} />
+                            )}
+                        </SeparatorContainer>
+                    )}
+                </Fragment>
+            ))}
+        </StyledBreadcrumbs>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Breadcrumbs styles ===============================================*/
-
 import styled from "styled-components"
 import {
     MEDIA,

package/dist/lib/components/Breadcrumbs/subtypes.ts

@@ -1,5 +1,3 @@
-/*=============================================== Breadcrumbs sub components types ===============================================*/
-
 import type { LibBreadcrumbItem } from "../../types"
 import type { ILibBreadcrumbs } from "./types"
 

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

@@ -1,5 +1,3 @@
-/*=============================================== Breadcrumbs types ===============================================*/
-
 import type { ReactNode } from "react"
 import type {
     LibAllColors,

package/dist/lib/components/Burger/Burger.tsx

@@ -1,59 +1,60 @@
-/*=============================================== Burger component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import classNames from "classnames"
 import { StyledBurger } from "./styles"
 import type { ILibBurger } from "./types"
 
 /**
- * @description Returns a Burger component
- * @link https://documentation-components-react.vercel.app/components/burger
- * @extends HTMLButtonElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLButtonElement>
- * @prop isOpen: boolean
- * @prop color?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background" | "currentColor"
- * @prop width?: number
- * @prop height?: number
- * @prop noHover?: boolean
- * @prop borderWidth?: number
+ * Burger component for toggling menus, typically used in navigation headers.
+ *
+ * @component
+ * @param {Object} props - Burger props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {Ref<HTMLButtonElement>} [props.ref] - Ref forwarded to the button element.
+ * @param {string} [props.className] - Additional class names.
+ * @param {boolean} props.isOpen - Whether the burger is open (active) or closed.
+ * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background" | "currentColor"} [props.color="primary"] - Color of the burger lines.
+ * @param {number} [props.width=32] - Width of the burger icon.
+ * @param {number} [props.height=24] - Height of the burger icon.
+ * @param {boolean} [props.noHover] - If true, disables hover effect.
+ * @param {number} [props.borderWidth=2] - Width of the burger lines.
+ * @param {string} [props.aria-label] - Accessible label for the button.
+ * @returns {JSX.Element} The rendered Burger component.
+ *
+ * @example
+ * <Burger isOpen={menuOpen} onClick={toggleMenu} />
  */
-export const Burger = forwardRef<HTMLButtonElement, ILibBurger>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            isOpen,
-            color = "primary",
-            width = 32,
-            height = 24,
-            noHover,
-            borderWidth = 2,
-            "aria-label": ariaLabel = `${isOpen ? "Close" : "Open"} burger`,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledBurger
-                data-testid={testid}
-                ref={ref}
-                as={as ? as : noHover ? "span" : "button"}
-                className={classNames(className, { Open: isOpen })}
-                aria-label={ariaLabel}
-                $noHover={noHover}
-                $borderWidth={borderWidth}
-                $color={color}
-                $height={height}
-                $width={width}
-                {...rest}
-            >
-                <span />
-                <span />
-                <span />
-            </StyledBurger>
-        )
-    }
-)
+export const Burger: FC<ILibBurger> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    className,
+    isOpen,
+    color = "primary",
+    width = 32,
+    height = 24,
+    noHover,
+    borderWidth = 2,
+    "aria-label": ariaLabel = `${isOpen ? "Close" : "Open"} burger`,
+    ...rest
+}) => {
+    return (
+        <StyledBurger
+            data-testid={testid}
+            ref={ref}
+            as={as ? as : noHover ? "span" : "button"}
+            className={classNames(className, { Open: isOpen })}
+            aria-label={ariaLabel}
+            $noHover={noHover}
+            $borderWidth={borderWidth}
+            $color={color}
+            $height={height}
+            $width={width}
+            {...rest}
+        >
+            <span />
+            <span />
+            <span />
+        </StyledBurger>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Burger styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import { stringifyPx } from "@julseb-lib/utils"
 import { MEDIA, RADIUSES, TRANSITIONS, setDefaultTheme, Mixins } from "../../"

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

@@ -1,5 +1,3 @@
-/*=============================================== Burger types ===============================================*/
-
 import type { LibComponentBase, LibColorsHoverAndCurrent } from "../../types"
 
 export interface ILibBurger extends LibComponentBase<HTMLButtonElement> {

package/dist/lib/components/Button/Button.tsx

@@ -1,6 +1,4 @@
-/*=============================================== Button component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { Link } from "react-router-dom"
 import { Loader } from "../../"
 import { LibIcon } from "../LibIcon"
@@ -9,126 +7,128 @@ import { StyledButton } from "./styles"
 import type { ILibButton } from "./types"
 
 /**
- * @description Returns a Button component
- * @link https://documentation-components-react.vercel.app/components/button
- * @extends HTMLButtonElement & HTMLAnchorElement & LibButtonLinkBlank
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLButtonElement & HTMLAnchorElement>
- * @prop onClick?: void => only if `to` or `href` are not defined
- * @prop disabled?: boolean => only if `onClick` is defined
- * @prop to?: string => only if `onClick` and `href` are not defined
- * @prop href?: string => only if `onClick` and `to` are not defined
- * @prop blank?: boolean => only if `to` or `href` are defined
- * @prop color?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- * @prop shadow?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | { default: "xxl" | "xl" | "l" | "m" | "s" | "xs"; hover: "xxl" | "xl" | "l" | "m" | "s" | "xs"; active: "xxl" | "xl" | "l" | "m" | "s" | "xs" }
- * @prop borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
- * @prop size?: "default" | "small"
- * @prop icons?: { left?: string | JSX.Element; right?: string | JSX.Element }
- * @prop iconSizes?: { left?: number; right?: number }
- * @prop iconBaseUrl?: string
- * @prop isLoading?: boolean
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" => only if icons or isLoading are defined
- * @prop variant?: "plain" | "outline" | "ghost" | "transparent"
- * @prop noPadding?: boolean => only if variant is set to transparent
- * @prop loaderVariant?: 1 | 2 | 3 | 4 => only if isLoading is defined
+ * Button component for actions, navigation, or links, supporting icons, loading state, and variants.
+ *
+ * @component
+ * @param {Object} props - Button props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {string} [props.aria-label="Button"] - Accessible label for the button.
+ * @param {boolean} [props.disabled] - Disables the button (only if `onClick` is defined).
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {Ref<HTMLButtonElement & HTMLAnchorElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {string} [props.className] - Additional class names.
+ * @param {ReactNode} [props.children] - Button content.
+ * @param {string} [props.color="primary"] - Button color.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | object} [props.shadow] - Shadow style.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | object} [props.borderRadius] - Border radius.
+ * @param {"default" | "small"} [props.size="default"] - Button size.
+ * @param {Object} [props.icons] - Icons for left and right ({ left, right }).
+ * @param {Object} [props.iconSizes] - Icon sizes for left and right ({ left, right }).
+ * @param {string} [props.iconBaseUrl] - Base URL for icons.
+ * @param {boolean} [props.isLoading] - Show loading indicator.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap="xs"] - Gap between content and icons/loader.
+ * @param {"plain" | "outline" | "ghost" | "transparent"} [props.variant="plain"] - Button visual variant.
+ * @param {boolean} [props.noPadding] - Remove padding (only if variant is transparent).
+ * @param {1 | 2 | 3 | 4} [props.loaderVariant] - Loader variant (only if isLoading is true).
+ * @param {string} [props.to] - React Router link target (only if `onClick` and `href` are not defined).
+ * @param {string} [props.href] - Anchor link target (only if `onClick` and `to` are not defined).
+ * @param {boolean} [props.blank] - Open link in new tab (only if `to` or `href` are defined).
+ * @returns {JSX.Element} The rendered Button component.
+ *
+ * @example
+ * <Button color="success" size="small" icons={{ left: <CheckIcon /> }}>
+ *   Confirm
+ * </Button>
  */
-export const Button = forwardRef<
-    HTMLButtonElement & HTMLAnchorElement,
-    ILibButton
->(
-    (
-        {
-            "data-testid": testid,
-            "aria-label": ariaLabel = "Button",
-            disabled,
-            "aria-disabled": ariaDisabled = disabled,
-            as,
-            className,
-            children,
-            color = "primary",
-            shadow,
-            size = "default",
-            borderRadius = size === "small" ? "s" : "m",
-            icons,
-            iconSizes,
-            iconBaseUrl,
-            gap = "xs",
-            variant = "plain",
-            noPadding,
-            isLoading,
-            loaderVariant,
-            to,
-            href,
-            blank,
-            ...rest
-        },
-        ref
-    ) => {
-        const loaderProps: Omit<ILibLoader, "variant" | "borderWidth"> = {
-            size: size === "small" ? 14 : 16,
-            color: "gray",
-            "data-testid": testid && `${testid}.Loader`,
-            className: "Loader",
-        }
+export const Button: FC<ILibButton> = ({
+    "data-testid": testid,
+    "aria-label": ariaLabel = "Button",
+    disabled,
+    "aria-disabled": ariaDisabled = disabled,
+    as,
+    ref,
+    className,
+    children,
+    color = "primary",
+    shadow,
+    size = "default",
+    borderRadius = size === "small" ? "s" : "m",
+    icons,
+    iconSizes,
+    iconBaseUrl,
+    gap = "xs",
+    variant = "plain",
+    noPadding,
+    isLoading,
+    loaderVariant,
+    to,
+    href,
+    blank,
+    ...rest
+}) => {
+    const loaderProps: Omit<ILibLoader, "variant" | "borderWidth"> = {
+        size: size === "small" ? 14 : 16,
+        color: "gray",
+        "data-testid": testid && `${testid}.Loader`,
+        className: "Loader",
+    }
 
-        const defaultIconSize = size === "small" ? 14 : 16
+    const defaultIconSize = size === "small" ? 14 : 16
 
-        return (
-            <StyledButton
-                data-testid={testid}
-                ref={ref}
-                as={as ? as : to ? Link : href ? "a" : "button"}
-                to={to === "prev" ? -1 : to}
-                href={href}
-                className={className}
-                aria-label={ariaLabel}
-                aria-disabled={ariaDisabled}
-                disabled={isLoading || disabled}
-                target={blank && "_blank"}
-                rel={blank && "noreferrer noopener"}
-                $color={color}
-                $shadow={shadow}
-                $borderRadius={borderRadius}
-                $size={size}
-                $gap={gap}
-                $variant={variant}
-                $noPadding={noPadding}
-                {...rest}
-            >
-                {icons?.left && !isLoading && (
-                    <LibIcon
-                        icon={icons.left}
-                        data-testid={testid && `${testid}.IconLeft`}
-                        className={className && "IconLeft"}
-                        size={iconSizes?.left || defaultIconSize}
-                        baseUrl={iconBaseUrl}
-                    />
-                )}
+    return (
+        <StyledButton
+            data-testid={testid}
+            ref={ref}
+            as={as ? as : to ? Link : href ? "a" : "button"}
+            to={to === "prev" ? -1 : to}
+            href={href}
+            className={className}
+            aria-label={ariaLabel}
+            aria-disabled={ariaDisabled}
+            disabled={isLoading || disabled}
+            target={blank && "_blank"}
+            rel={blank && "noreferrer noopener"}
+            $color={color}
+            $shadow={shadow}
+            $borderRadius={borderRadius}
+            $size={size}
+            $gap={gap}
+            $variant={variant}
+            $noPadding={noPadding}
+            {...rest}
+        >
+            {icons?.left && !isLoading && (
+                <LibIcon
+                    icon={icons.left}
+                    data-testid={testid && `${testid}.IconLeft`}
+                    className={className && "IconLeft"}
+                    size={iconSizes?.left || defaultIconSize}
+                    baseUrl={iconBaseUrl}
+                />
+            )}
 
-                {isLoading &&
-                    (loaderVariant === 4 ? (
-                        <Loader variant={4} {...loaderProps} />
-                    ) : (
-                        <Loader
-                            variant={loaderVariant}
-                            borderWidth={2}
-                            {...loaderProps}
-                        />
-                    ))}
+            {isLoading &&
+                (loaderVariant === 4 ? (
+                    <Loader variant={4 as any} {...loaderProps} />
+                ) : (
+                    <Loader
+                        variant={loaderVariant as any}
+                        borderWidth={2}
+                        {...loaderProps}
+                    />
+                ))}
 
-                {children}
+            {children}
 
-                {icons?.right && (
-                    <LibIcon
-                        icon={icons.right}
-                        data-testid={testid && `${testid}.IconRight`}
-                        className={className && "IconRight"}
-                        size={iconSizes?.right || defaultIconSize}
-                        baseUrl={iconBaseUrl}
-                    />
-                )}
-            </StyledButton>
-        )
-    }
-)
+            {icons?.right && (
+                <LibIcon
+                    icon={icons.right}
+                    data-testid={testid && `${testid}.IconRight`}
+                    className={className && "IconRight"}
+                    size={iconSizes?.right || defaultIconSize}
+                    baseUrl={iconBaseUrl}
+                />
+            )}
+        </StyledButton>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Button styles ===============================================*/
-
 import styled from "styled-components"
 import {
     FONT_FAMILIES,

package/dist/lib/components/Button/subtypes.ts

@@ -1,5 +1,3 @@
-/*=============================================== Button sub components types ===============================================*/
-
 import type { LibButtonSize, LibSpacers } from "../../types"
 import type { ILibButtonMixin } from "../ComponentsMixins"
 

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

@@ -1,5 +1,3 @@
-/*=============================================== Button types ===============================================*/
-
 import type { ButtonHTMLAttributes } from "react"
 import type {
     LibComponentBase,