@julseb-lib/react 0.0.84 → 0.0.86

package/dist/lib/components/ButtonIcon/ButtonFunction.tsx

@@ -1,6 +1,4 @@
-/*=============================================== ButtonIconFunction ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { Link } from "react-router-dom"
 import { Loader } from "../../"
 import { LibIcon } from "../LibIcon"
@@ -8,88 +6,79 @@ import type { ILibLoader } from "../Loader/types"
 import { StyledButtonIcon } from "./styles"
 import type { ILibButtonIcon } from "./types"
 
-export const ButtonIconFunction = forwardRef<
-    HTMLButtonElement & HTMLAnchorElement,
-    ILibButtonIcon
->(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            showTooltip,
-            to,
-            href,
-            isLoading,
-            disabled,
-            "aria-disabled": ariaDisabled,
-            "aria-label": ariaLabel,
-            blank,
-            variant,
-            showBackgroundHover,
-            borderRadius,
-            color,
-            shadow,
-            size,
-            loaderVariant,
-            icon,
-            iconSize,
-            iconBaseUrl,
-            loaderBorderWidth,
-            ...rest
-        },
-        ref
-    ) => {
-        const loaderProps: Omit<ILibLoader, "variant" | "borderWidth"> = {
-            size: iconSize,
-            color: "gray",
-            "data-testid": testid && `${testid}.Loader`,
-            className: className && "Loader",
-        }
+export const ButtonIconFunction: FC<ILibButtonIcon> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    className,
+    showTooltip,
+    to,
+    href,
+    isLoading,
+    disabled,
+    "aria-disabled": ariaDisabled,
+    "aria-label": ariaLabel,
+    blank,
+    variant,
+    showBackgroundHover,
+    borderRadius,
+    color,
+    shadow,
+    size,
+    loaderVariant,
+    icon,
+    iconSize,
+    iconBaseUrl,
+    loaderBorderWidth,
+    ...rest
+}) => {
+    const loaderProps: Omit<ILibLoader, "variant" | "borderWidth"> = {
+        size: iconSize,
+        color: "gray",
+        "data-testid": testid && `${testid}.Loader`,
+        className: className && "Loader",
+    }
 
-        return (
-            <StyledButtonIcon
-                data-testid={
-                    showTooltip && testid ? `${testid}.Button` : testid
-                }
-                ref={ref}
-                as={as ? as : to ? Link : href ? "a" : "button"}
-                className={showTooltip && className ? "Button" : className}
-                aria-label={ariaLabel}
-                disabled={isLoading || disabled}
-                aria-disabled={ariaDisabled && ariaDisabled.toString()}
-                to={to === "prev" ? -1 : to}
-                href={href}
-                target={blank && "_blank"}
-                rel={blank && "noreferrer noopener"}
-                $variant={variant}
-                $showBackgroundHover={showBackgroundHover}
-                $borderRadius={borderRadius}
-                $color={color}
-                $shadow={shadow}
-                $size={size}
-                {...rest}
-            >
-                {isLoading ? (
-                    loaderVariant === 4 ? (
-                        <Loader variant={4} {...loaderProps} />
-                    ) : (
-                        <Loader
-                            variant={loaderVariant}
-                            borderWidth={loaderBorderWidth}
-                            {...loaderProps}
-                        />
-                    )
+    return (
+        <StyledButtonIcon
+            data-testid={showTooltip && testid ? `${testid}.Button` : testid}
+            ref={ref}
+            as={as ? as : to ? Link : href ? "a" : "button"}
+            className={showTooltip && className ? "Button" : className}
+            aria-label={ariaLabel}
+            disabled={isLoading || disabled}
+            aria-disabled={ariaDisabled && ariaDisabled.toString()}
+            to={to === "prev" ? -1 : to}
+            href={href}
+            target={blank && "_blank"}
+            rel={blank && "noreferrer noopener"}
+            $variant={variant}
+            $showBackgroundHover={showBackgroundHover}
+            $borderRadius={borderRadius}
+            $color={color}
+            $shadow={shadow}
+            $size={size}
+            {...rest}
+        >
+            {isLoading ? (
+                loaderVariant === 4 ? (
+                    <Loader variant={4} {...loaderProps} />
                 ) : (
-                    <LibIcon
-                        data-testid={testid && `${testid}.Icon`}
-                        className={className && "Icon"}
-                        icon={icon}
-                        size={iconSize}
-                        baseUrl={iconBaseUrl}
+                    <Loader
+                        variant={loaderVariant}
+                        borderWidth={loaderBorderWidth}
+                        {...loaderProps}
                     />
-                )}
-            </StyledButtonIcon>
-        )
-    }
-)
+                )
+            ) : (
+                <LibIcon
+                    data-testid={testid && `${testid}.Icon`}
+                    className={className && "Icon"}
+                    icon={icon}
+                    size={iconSize}
+                    baseUrl={iconBaseUrl}
+                />
+            )}
+        </StyledButtonIcon>
+    )
+}

package/dist/lib/components/ButtonIcon/ButtonIcon.tsx

@@ -1,6 +1,4 @@
-/*=============================================== ButtonIcon component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { capitalize } from "@julseb-lib/utils"
 import { Tooltip } from "../../"
 import { roundIconSize } from "../../lib-utils"
@@ -8,132 +6,133 @@ import { ButtonIconFunction } from "./ButtonFunction"
 import type { ILibButtonIcon } from "./types"
 
 /**
- * @description Returns a ButtonIcon component
- * @link https://documentation-components-react.vercel.app/components/button-icon
- * @extends HTMLButtonElement
- * @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 icon: string | JSX.Element
- * @prop iconSize?: number
- * @prop iconBaseUrl?: string
- * @prop size?: number
- * @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 color?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- * @prop variant?: "plain" | "ghost" | "transparent"
- * @prop showBackgroundHover?: boolean => only if variant is set to transparent
- * @prop isLoading?: boolean
- * @prop loaderVariant?: 1 | 2 | 3 | 4 => only if isLoading is defined
- * @prop loaderBorderWidth?: number => only if loaderVariant is set to 1 | 2 | 3
- * @prop tooltip?: string
- * @prop showTooltip?: boolean | { position?: "top" | "bottom" | "left" | "right"; offset?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"; backgroundColor?: Any color from the library; textColor?: Any color from the library; hideArrow?: boolean } => only if tooltip is defined
- * @prop containerStyle?: CSSProperties => only if tooltip is defined
+ * ButtonIcon component for rendering an icon button with support for tooltips, loading state, and variants.
+ *
+ * @component
+ * @param {Object} props - ButtonIcon props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {Ref<HTMLButtonElement & HTMLAnchorElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {() => void} [props.onClick] - Click handler (only if `to` or `href` are not defined).
+ * @param {boolean} [props.disabled] - Disables the button (only if `onClick` is defined).
+ * @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).
+ * @param {string|JSX.Element} props.icon - Icon to display.
+ * @param {number} [props.iconSize] - Size of the icon.
+ * @param {string} [props.iconBaseUrl] - Base URL for the icon.
+ * @param {number} [props.size=32] - Size of the button.
+ * @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="circle"] - Border radius.
+ * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.color="primary"] - Button color.
+ * @param {"plain" | "ghost" | "transparent"} [props.variant="plain"] - Visual variant.
+ * @param {boolean} [props.showBackgroundHover] - Show background on hover (only if variant is transparent).
+ * @param {boolean} [props.isLoading] - Show loading indicator.
+ * @param {1 | 2 | 3 | 4} [props.loaderVariant] - Loader variant (only if isLoading is true).
+ * @param {number} [props.loaderBorderWidth=2] - Loader border width (only if loaderVariant is 1, 2, or 3).
+ * @param {string} [props.tooltip] - Tooltip text.
+ * @param {boolean|Object} [props.showTooltip] - Show tooltip or tooltip options.
+ * @param {CSSProperties} [props.containerStyle] - Style for the tooltip container.
+ * @param {string} [props.className] - Additional class names.
+ * @param {string} [props.aria-label] - Accessible label for the button.
+ * @returns {JSX.Element} The rendered ButtonIcon component.
+ *
+ * @example
+ * <ButtonIcon icon="star" tooltip="Favorite" />
+ * <ButtonIcon icon={<CustomIcon />} isLoading loaderVariant={2} />
  */
-export const ButtonIcon = forwardRef<
-    HTMLButtonElement & HTMLAnchorElement,
-    ILibButtonIcon
->(
-    (
-        {
-            "data-testid": testid,
-            as,
-            size = 32,
-            icon,
-            iconSize = roundIconSize(size),
-            shadow,
-            borderRadius = "circle",
-            tooltip,
-            showTooltip,
-            "aria-label": ariaLabel = capitalize(
-                typeof icon === "string" ? icon : "button icon"
-            ),
-            to,
-            href,
-            blank,
-            variant = "plain",
-            showBackgroundHover,
-            isLoading,
-            loaderVariant,
-            loaderBorderWidth = 2,
-            disabled,
-            "aria-disabled": ariaDisabled = isLoading || disabled,
-            color = "primary",
-            className,
-            containerStyle,
-            ...rest
-        },
-        ref
-    ) => {
-        const props = {
-            "data-testid": testid,
-            as,
-            className,
-            showTooltip,
-            to,
-            href,
-            isLoading,
-            disabled,
-            "aria-disabled": ariaDisabled,
-            "aria-label": ariaLabel,
-            blank,
-            variant,
-            showBackgroundHover,
-            borderRadius,
-            color,
-            shadow,
-            size,
-            loaderVariant,
-            icon,
-            iconSize,
-            loaderBorderWidth,
-            ref,
-            ...rest,
-        }
+export const ButtonIcon: FC<ILibButtonIcon> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    size = 32,
+    icon,
+    iconSize = roundIconSize(size),
+    shadow,
+    borderRadius = "circle",
+    tooltip,
+    showTooltip,
+    "aria-label": ariaLabel = capitalize(
+        typeof icon === "string" ? icon : "button icon"
+    ),
+    to,
+    href,
+    blank,
+    variant = "plain",
+    showBackgroundHover,
+    isLoading,
+    loaderVariant,
+    loaderBorderWidth = 2,
+    disabled,
+    "aria-disabled": ariaDisabled = isLoading || disabled,
+    color = "primary",
+    className,
+    containerStyle,
+    ...rest
+}) => {
+    const props = {
+        "data-testid": testid,
+        as,
+        className,
+        showTooltip,
+        to,
+        href,
+        isLoading,
+        disabled,
+        "aria-disabled": ariaDisabled,
+        "aria-label": ariaLabel,
+        blank,
+        variant,
+        showBackgroundHover,
+        borderRadius,
+        color,
+        shadow,
+        size,
+        loaderVariant,
+        icon,
+        iconSize,
+        loaderBorderWidth,
+        ref,
+        ...rest,
+    }
 
-        if (tooltip && showTooltip)
-            return (
-                <Tooltip
-                    data-testid={testid}
-                    className={className}
-                    tooltip={tooltip}
-                    position={
-                        typeof showTooltip === "object" && showTooltip?.position
-                            ? showTooltip.position
-                            : "top"
-                    }
-                    offset={
-                        typeof showTooltip === "object" && showTooltip?.offset
-                            ? showTooltip.offset
-                            : undefined
-                    }
-                    hideArrow={
-                        typeof showTooltip === "object" && showTooltip.hideArrow
-                            ? showTooltip.hideArrow
-                            : false
-                    }
-                    backgroundColor={
-                        typeof showTooltip === "object" &&
-                        showTooltip.backgroundColor
-                            ? showTooltip.backgroundColor
-                            : "black-80"
-                    }
-                    textColor={
-                        typeof showTooltip === "object" && showTooltip.textColor
-                            ? showTooltip.textColor
-                            : "white"
-                    }
-                    style={containerStyle}
-                >
-                    <ButtonIconFunction {...(props as any)} />
-                </Tooltip>
-            )
+    if (tooltip && showTooltip)
+        return (
+            <Tooltip
+                data-testid={testid}
+                className={className}
+                tooltip={tooltip}
+                position={
+                    typeof showTooltip === "object" && showTooltip?.position
+                        ? showTooltip.position
+                        : "top"
+                }
+                offset={
+                    typeof showTooltip === "object" && showTooltip?.offset
+                        ? showTooltip.offset
+                        : undefined
+                }
+                hideArrow={
+                    typeof showTooltip === "object" && showTooltip.hideArrow
+                        ? showTooltip.hideArrow
+                        : false
+                }
+                backgroundColor={
+                    typeof showTooltip === "object" &&
+                    showTooltip.backgroundColor
+                        ? showTooltip.backgroundColor
+                        : "black-80"
+                }
+                textColor={
+                    typeof showTooltip === "object" && showTooltip.textColor
+                        ? showTooltip.textColor
+                        : "white"
+                }
+                style={containerStyle}
+            >
+                <ButtonIconFunction {...(props as any)} />
+            </Tooltip>
+        )
 
-        return <ButtonIconFunction {...(props as any)} />
-    }
-)
+    return <ButtonIconFunction {...(props as any)} />
+}

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

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

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

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

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

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

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

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