@julseb-lib/react 0.0.85 → 0.0.86

package/dist/lib/components/IconMenu/IconMenuItem.tsx

@@ -1,74 +1,75 @@
-/*=============================================== IconMenuItem ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledButtonIcon } from "./styles"
 import type { ILibIconMenuItem } from "./types"
 
 /**
- * @description Returns a IconMenuItem component
- * @link https://documentation-components-react.vercel.app/components/icon-menu
+ * IconMenuItem component for rendering an icon button inside an IconMenu, supporting links, tooltips, loading states, and custom styles.
+ *
+ * @component
  * @extends HTMLButtonElement & HTMLAnchorElement & ILibButtonIcon
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLButtonElement & HTMLAnchorElement>
- * @prop label: string
- * @prop indexPosition: number
- * @prop isOpen: boolean
- * @prop icon: string | JSX.Element
- * @prop iconSize?: number
- * @prop direction?: "left" | "up" | "right" | "down"
- * @prop variant?: "plain" | "transparent" | "ghost"
- * @prop iconBaseUrl?: string
- * @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
+ * @param {Object} props - IconMenuItem props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {ForwardedRef<HTMLButtonElement & HTMLAnchorElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {string} props.label - Accessible label for the menu item.
+ * @param {number} props.indexPosition - Position index of the item in the menu.
+ * @param {boolean} props.isOpen - Whether the menu is open.
+ * @param {string|JSX.Element} props.icon - Icon to display in the item.
+ * @param {number} [props.iconSize] - Size of the icon.
+ * @param {"left" | "up" | "right" | "down"} [props.direction] - Direction in which the menu appears.
+ * @param {"plain" | "ghost" | "transparent"} [props.variant="ghost"] - Button variant.
+ * @param {string} [props.iconBaseUrl] - Base URL for the icon.
+ * @param {() => void} [props.onClick] - Click handler (only if `to` or `href` are not defined).
+ * @param {boolean} [props.disabled] - Disables the item (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 {number} [props.size] - Size of the button.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | Object} [props.shadow] - Shadow style for the button.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | Object} [props.borderRadius] - Border radius for the button.
+ * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.color] - Color for the button and icon.
+ * @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 defined).
+ * @param {number} [props.loaderBorderWidth] - 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 (only if tooltip is defined).
+ * @param {CSSProperties} [props.containerStyle] - Custom style for the button container (only if tooltip is defined).
+ * @returns {JSX.Element} The rendered IconMenuItem component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/icon-menu
+ * @example
+ * <IconMenuItem
+ *   label="Edit"
+ *   icon="edit"
+ *   indexPosition={0}
+ *   isOpen={true}
+ *   onClick={handleEdit}
+ *   tooltip="Edit item"
+ * />
  */
-export const IconMenuItem = forwardRef<
-    HTMLButtonElement & HTMLAnchorElement,
-    ILibIconMenuItem
->(
-    (
-        {
-            indexPosition,
-            direction,
-            isOpen,
-            variant = "ghost",
-            style,
-            iconBaseUrl,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledButtonIcon
-                ref={ref}
-                type="button"
-                variant={variant}
-                iconBaseUrl={iconBaseUrl}
-                $direction={direction}
-                containerStyle={{
-                    ["--button-position" as any]: indexPosition,
-                    ...style,
-                }}
-                {...rest}
-            />
-        )
-    }
-)
+export const IconMenuItem: FC<ILibIconMenuItem> = ({
+    ref,
+    indexPosition,
+    direction,
+    isOpen,
+    variant = "ghost",
+    style,
+    iconBaseUrl,
+    ...rest
+}) => {
+    return (
+        <StyledButtonIcon
+            ref={ref}
+            type="button"
+            variant={variant}
+            iconBaseUrl={iconBaseUrl}
+            $direction={direction}
+            containerStyle={{
+                ["--button-position" as any]: indexPosition,
+                ...style,
+            }}
+            {...rest}
+        />
+    )
+}

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

@@ -1,4 +1,2 @@
-/*=============================================== IconMenu exports ===============================================*/
-
 export * from "./IconMenu"
 export * from "./IconMenuItem"

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

@@ -1,5 +1,3 @@
-/*=============================================== IconMenu styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import {
     setDefaultTheme,

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

@@ -1,5 +1,3 @@
-/*=============================================== IconMenu types ===============================================*/
-
 import type {
     LibComponentBase,
     LibIconMenuItem,
@@ -13,8 +11,6 @@ import type {
 } from "../../types"
 import type { ILibButtonIcon } from "../ButtonIcon/types"
 
-/*====================== IconMenu ======================*/
-
 interface ILibIconMenuBase extends LibComponentBase<HTMLDivElement> {
     direction?: LibIconMenuDirection
     color?: LibColorsHover
@@ -44,8 +40,6 @@ interface IconMenuWithChildren extends ILibIconMenuBase {
 
 export type ILibIconMenu = IconMenuWithItems | IconMenuWithChildren
 
-/*====================== IconMenu ======================*/
-
 export type ILibIconMenuItem = ILibButtonIcon &
     Omit<LibIconMenuItem, "ref"> & {
         indexPosition: number

package/dist/lib/components/Image/Image.tsx

@@ -1,106 +1,120 @@
-/*=============================================== Image component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { Fallback } from "../../"
 import { ImageFunction } from "./ImageFunction"
 import { ImgContainer, Caption } from "./styles"
 import type { ILibImage } from "./types"
 
 /**
- * @description Returns an Image component
- * @link https://documentation-components-react.vercel.app/components/image
+ * Image component for rendering images with optional caption, aspect ratio, border radius, and fallback.
+ *
+ * @component
  * @extends HTMLImageElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLImageElement>
- * @prop borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
- * @prop fit?: CssObjectFit
- * @prop aspectRatio?: string
- * @prop fallback?: JSX.Element
- * @prop caption?: string | { text: string; textColor?: Any color from the library; background?: Any color or overlay from the library, except "gradient-black" | "gradient-white"; as?: ElementType }
- * @prop containerStyle?: CSSProperties => only if caption is defined
- * @prop containerAs?: ElementType => only if caption is defined
+ * @param {Object} props - Image props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {ForwardedRef<HTMLImageElement>} [props.ref] - Ref forwarded to the image element.
+ * @param {string} props.src - Image source URL.
+ * @param {string} props.alt - Alternative text for the image.
+ * @param {string|Object} [props.caption] - Caption for the image. String for text, or object with { text, textColor, background, as }.
+ * @param {string|number} [props.width="100%"] - Width of the image.
+ * @param {string|number} [props.height="auto"] - Height of the image.
+ * @param {string} [props.aspectRatio] - Aspect ratio for the image (e.g., "16/9").
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | Object} [props.borderRadius] - Border radius for the image.
+ * @param {CssObjectFit} [props.fit] - Object-fit property for the image.
+ * @param {JSX.Element} [props.fallback] - Fallback element to display while loading.
+ * @param {CSSProperties} [props.containerStyle] - Style for the image container (only if caption is defined).
+ * @param {ElementType} [props.containerAs] - Custom element type for the container (only if caption is defined).
+ * @param {string} [props.className] - Additional class names.
+ * @returns {JSX.Element} The rendered Image component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/image
+ * @example
+ * <Image
+ *   src="/banner.jpg"
+ *   alt="Banner"
+ *   caption={{ text: "Banner image", textColor: "white", background: "black-50" }}
+ *   width={400}
+ *   height={200}
+ *   aspectRatio="16/9"
+ *   borderRadius="m"
+ * />
  */
-export const Image = forwardRef<HTMLImageElement, ILibImage>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            src,
-            alt,
-            caption,
-            width = "100%",
-            height = "auto",
-            aspectRatio,
-            borderRadius,
-            fit,
-            fallback = (
-                <Fallback
-                    $aspectRatio={aspectRatio}
-                    $width={width}
-                    $height={height}
-                    $borderRadius={borderRadius}
-                />
-            ),
-            containerStyle,
-            containerAs,
-            ...rest
-        },
-        ref
-    ) => {
-        const imageProps = {
-            "data-testid": testid,
-            ref,
-            fallback,
-            caption,
-            className,
-            src,
-            alt,
-            aspectRatio,
-            width,
-            height,
-            borderRadius,
-            fit,
-            ...rest,
-        }
+export const Image: FC<ILibImage> = ({
+    "data-testid": testid,
+    ref,
+    className,
+    src,
+    alt,
+    caption,
+    width = "100%",
+    height = "auto",
+    aspectRatio,
+    borderRadius,
+    fit,
+    fallback = (
+        <Fallback
+            $aspectRatio={aspectRatio}
+            $width={width}
+            $height={height}
+            $borderRadius={borderRadius}
+        />
+    ),
+    containerStyle,
+    containerAs,
+    ...rest
+}) => {
+    const imageProps = {
+        "data-testid": testid,
+        ref,
+        fallback,
+        caption,
+        className,
+        src,
+        alt,
+        aspectRatio,
+        width,
+        height,
+        borderRadius,
+        fit,
+        ...rest,
+    }
 
-        if (caption)
-            return (
-                <ImgContainer
-                    data-testid={testid}
-                    className={className}
-                    style={containerStyle}
-                    as={containerAs}
-                    $width={width}
-                    $height={height}
-                    $borderRadius={borderRadius}
-                >
-                    <ImageFunction {...imageProps} />
+    if (caption)
+        return (
+            <ImgContainer
+                data-testid={testid}
+                className={className}
+                style={containerStyle}
+                as={containerAs}
+                $width={width}
+                $height={height}
+                $borderRadius={borderRadius}
+            >
+                <ImageFunction {...imageProps} />
 
-                    <Caption
-                        data-testid={testid && `${testid}.Caption`}
-                        className={className && "Caption"}
-                        as={
-                            typeof caption === "object" && caption.as
-                                ? caption.as
-                                : "figcaption"
-                        }
-                        $backgroundColor={
-                            typeof caption === "object" && caption.background
-                                ? caption?.background
-                                : "black-50"
-                        }
-                        $textColor={
-                            typeof caption === "object" && caption.textColor
-                                ? caption.textColor
-                                : "white"
-                        }
-                    >
-                        {typeof caption === "object" ? caption.text : caption}
-                    </Caption>
-                </ImgContainer>
-            )
+                <Caption
+                    data-testid={testid && `${testid}.Caption`}
+                    className={className && "Caption"}
+                    as={
+                        typeof caption === "object" && caption.as
+                            ? caption.as
+                            : "figcaption"
+                    }
+                    $backgroundColor={
+                        typeof caption === "object" && caption.background
+                            ? caption?.background
+                            : "black-50"
+                    }
+                    $textColor={
+                        typeof caption === "object" && caption.textColor
+                            ? caption.textColor
+                            : "white"
+                    }
+                >
+                    {typeof caption === "object" ? caption.text : caption}
+                </Caption>
+            </ImgContainer>
+        )
 
-        return <ImageFunction {...imageProps} />
-    }
-)
+    return <ImageFunction {...imageProps} />
+}

package/dist/lib/components/Image/ImageFunction.tsx

@@ -1,53 +1,45 @@
-/*=============================================== ImageFunction ===============================================*/
-
-import { forwardRef, lazy, Suspense } from "react"
+import { lazy, Suspense, type FC } from "react"
 import type { ILibImage } from "./types"
 
 const StyledImage = lazy(() => import("./styles"))
 
-export const ImageFunction = forwardRef<HTMLImageElement, ILibImage>(
-    (
-        {
-            "data-testid": testid,
-            fallback,
-            caption,
-            className,
-            src,
-            alt,
-            aspectRatio,
-            width = "100%",
-            height = "auto",
-            borderRadius,
-            fit,
-            loading = "lazy",
-            imgFallback,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <Suspense fallback={fallback}>
-                <StyledImage
-                    data-testid={
-                        !caption ? testid : testid && `${testid}.Image`
-                    }
-                    className={!caption ? className : className && "Image"}
-                    ref={ref}
-                    src={src}
-                    alt={alt}
-                    loading={loading}
-                    data-fallback={imgFallback?.text}
-                    $aspectRatio={aspectRatio}
-                    $width={width}
-                    $height={height}
-                    $borderRadius={borderRadius}
-                    $fit={fit}
-                    $fallbackBackground={imgFallback?.background ?? "primary"}
-                    $fallbackTextColor={imgFallback?.textColor ?? "background"}
-                    $fallbackFontSize={imgFallback?.fontSize ?? "body"}
-                    {...rest}
-                />
-            </Suspense>
-        )
-    }
-)
+export const ImageFunction: FC<ILibImage> = ({
+    "data-testid": testid,
+    ref,
+    fallback,
+    caption,
+    className,
+    src,
+    alt,
+    aspectRatio,
+    width = "100%",
+    height = "auto",
+    borderRadius,
+    fit,
+    loading = "lazy",
+    imgFallback,
+    ...rest
+}) => {
+    return (
+        <Suspense fallback={fallback}>
+            <StyledImage
+                data-testid={!caption ? testid : testid && `${testid}.Image`}
+                className={!caption ? className : className && "Image"}
+                ref={ref}
+                src={src}
+                alt={alt}
+                loading={loading}
+                data-fallback={imgFallback?.text}
+                $aspectRatio={aspectRatio}
+                $width={width}
+                $height={height}
+                $borderRadius={borderRadius}
+                $fit={fit}
+                $fallbackBackground={imgFallback?.background ?? "primary"}
+                $fallbackTextColor={imgFallback?.textColor ?? "background"}
+                $fallbackFontSize={imgFallback?.fontSize ?? "body"}
+                {...rest}
+            />
+        </Suspense>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Image styles ===============================================*/
-
 import type { FC } from "react"
 import styled from "styled-components"
 import { stringifyPx } from "@julseb-lib/utils"

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

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