@julseb-lib/react 0.0.87 → 0.0.89

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

@@ -1,4 +1,4 @@
-import { useRef, type FC, type ReactNode } from "react"
+import { useRef, type FC, type ReactNode, type ReactElement } from "react"
 import classNames from "classnames"
 import { uuid } from "@julseb-lib/utils"
 import { useMaxWidth, useClickOutside } from "../../"
@@ -9,72 +9,81 @@ import type { ILibHeaderNav } from "./subtypes"
 import type { LibHeaderLink } from "../../types"
 
 export const HeaderNav: FC<ILibHeaderNav> = ({
-    "data-testid": testid,
-    className,
-    search,
-    isOpen,
-    children,
-    links,
-    headerHeight,
-    variant,
-    navMobileVariant,
-    burgerPosition,
-    burgerRef,
-    handleClose,
-    nav,
+	"data-testid": testid,
+	role = "navigation",
+	className,
+	search,
+	isOpen,
+	children,
+	links,
+	headerHeight,
+	variant,
+	navMobileVariant,
+	burgerPosition,
+	burgerRef,
+	handleClose,
+	nav,
 }) => {
-    const isMobile = useMaxWidth(600)
+	const isMobile = useMaxWidth(600)
 
-    const el = useRef<HTMLDivElement>(null as any)
-    useClickOutside(el, e => {
-        if (!burgerRef?.current?.contains(e.target as any)) {
-            handleClose()
-        }
-    })
+	const el = useRef<HTMLDivElement>(null as any)
+	useClickOutside(el, e => {
+		if (
+			!(
+				typeof burgerRef === "object" &&
+				burgerRef !== null &&
+				"current" in burgerRef &&
+				burgerRef.current?.contains(e.target as any)
+			)
+		) {
+			handleClose()
+		}
+	})
 
-    const valueArr = links ? links : (children as Array<ReactNode>)
+	const valueArr = links ? links : (children as Array<ReactNode>)
 
-    const searchHeight = isMobile && !!search ? 32 : 0
+	const searchHeight = isMobile && !!search ? 32 : 0
 
-    const linksHeight = links
-        ? links.length * 24 + ([...valueArr, searchHeight].length - 1) * 12
-        : 56
+	const linksHeight = links
+		? links.length * 24 + ([...valueArr, searchHeight].length - 1) * 12
+		: 56
 
-    const navHeight = searchHeight + linksHeight
+	const navHeight = searchHeight + linksHeight
 
-    return (
-        <Nav
-            data-testid={testid && `${testid}.HeaderNav`}
-            ref={el}
-            className={classNames({ HeaderNav: className }, { Open: isOpen })}
-            $headerHeight={headerHeight}
-            $variant={variant}
-            $burgerPosition={burgerPosition}
-            $navMobileVariant={navMobileVariant}
-            $navHeight={navHeight}
-        >
-            {isMobile && search && (
-                <HeaderSearch
-                    {...search}
-                    data-testid={testid}
-                    className={className}
-                    handleClose={handleClose}
-                />
-            )}
+	return (
+		<Nav
+			data-testid={testid && `${testid}.HeaderNav`}
+			ref={el}
+			className={classNames({ HeaderNav: className }, { Open: isOpen })}
+			role={role}
+			$headerHeight={headerHeight}
+			$variant={variant}
+			$burgerPosition={burgerPosition}
+			$navMobileVariant={navMobileVariant}
+			$navHeight={navHeight}
+		>
+			{isMobile && search && (
+				<HeaderSearch
+					{...search}
+					data-testid={testid}
+					className={className}
+					handleClose={handleClose}
+				/>
+			)}
 
-            {links &&
-                links.map(link => (
-                    <HeaderNavLink
-                        data-testid={testid}
-                        className={className}
-                        link={link as LibHeaderLink | JSX.Element}
-                        key={uuid()}
-                    />
-                ))}
+			{links &&
+				links.map(link => (
+					<HeaderNavLink
+						data-testid={testid}
+						className={className}
+						link={link as LibHeaderLink | ReactElement}
+						key={uuid()}
+					/>
+				))}
 
-            {children && children}
+			{children && children}
 
-            {nav && nav}
-        </Nav>
-    )
+			{nav && nav}
+		</Nav>
+	)
 }

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

@@ -1,78 +1,79 @@
-import type { FC, Ref } from "react"
+import type { FC, ReactElement, Ref } from "react"
 import type { LibHeaderLink, LibLink } from "../../types"
 import type { ILibHeader } from "./types"
 
 // ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN THOSE COMPONENTS
 
 export interface ILibHeaderNav
-    extends Pick<
-        ILibHeader,
-        | "data-testid"
-        | "className"
-        | "search"
-        | "children"
-        | "links"
-        | "variant"
-        | "navMobileVariant"
-        | "burgerPosition"
-        | "nav"
-    > {
-    burgerRef: Ref<HTMLButtonElement>
-    isOpen: boolean
-    headerHeight: number
-    handleClose: () => void
+	extends Pick<
+		ILibHeader,
+		| "data-testid"
+		| "className"
+		| "search"
+		| "children"
+		| "links"
+		| "variant"
+		| "navMobileVariant"
+		| "burgerPosition"
+		| "nav"
+		| "role"
+	> {
+	burgerRef: Ref<HTMLButtonElement>
+	isOpen: boolean
+	headerHeight: number
+	handleClose: () => void
 }
 
 export interface ILibHeaderBurger
-    extends Pick<
-        ILibHeader,
-        | "data-testid"
-        | "className"
-        | "navMobileVariant"
-        | "variant"
-        | "burgerColor"
-    > {
-    isOpen: boolean
-    handleOpen: () => void
-    handleClose: () => void
-    ref?: Ref<HTMLButtonElement>
+	extends Pick<
+		ILibHeader,
+		| "data-testid"
+		| "className"
+		| "navMobileVariant"
+		| "variant"
+		| "burgerColor"
+	> {
+	isOpen: boolean
+	handleOpen: () => void
+	handleClose: () => void
+	ref?: Ref<HTMLButtonElement>
 }
 
 export interface ILibHeaderLogo
-    extends Pick<
-        ILibHeader,
-        "data-testid" | "className" | "logo" | "children"
-    > {
-    isOpen: boolean
+	extends Pick<
+		ILibHeader,
+		"data-testid" | "className" | "logo" | "children"
+	> {
+	isOpen: boolean
 }
 
 export interface ILibHeaderNavLink {
-    "data-testid": string | undefined
-    className: string | undefined
-    link: LibHeaderLink | JSX.Element | FC
+	"data-testid": string | undefined
+	className: string | undefined
+	link: LibHeaderLink | ReactElement | FC
 }
 
 export interface ILibHeaderSearch
-    extends Pick<ILibHeader, "data-testid" | "className" | "search"> {
-    handleClose: () => void
+	extends Pick<ILibHeader, "data-testid" | "className" | "search"> {
+	handleClose: () => void
 }
 
 type HeaderLogoWithText = LibLink & {
-    text: string
-    img?: never
-    imgOpen?: never
-    alt?: never
-    width?: never
-    height?: never
+	text: string
+	img?: never
+	imgOpen?: never
+	alt?: never
+	width?: never
+	height?: never
 }
 
 type HeaderLogoWithImg = LibLink & {
-    text?: never
-    img: string
-    imgOpen?: string
-    alt?: string
-    width?: number
-    height?: number
+	text?: never
+	img: string
+	imgOpen?: string
+	alt?: string
+	width?: number
+	height?: number
 }
 
 export type LibHeaderLogo = string | HeaderLogoWithText | HeaderLogoWithImg

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

@@ -40,81 +40,85 @@ import type { ILibImage } from "./types"
  * />
  */
 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
+	"data-testid": testid,
+	ref,
+	role = "img",
+	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,
-    }
+	const imageProps = {
+		"data-testid": testid,
+		ref,
+		role,
+		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}
+				role="figure"
+				$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"}
+					role="contentinfo"
+					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

@@ -4,42 +4,44 @@ import type { ILibImage } from "./types"
 const StyledImage = lazy(() => import("./styles"))
 
 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
+	"data-testid": testid,
+	ref,
+	role = "img",
+	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>
-    )
+	return (
+		<Suspense fallback={fallback}>
+			<StyledImage
+				data-testid={!caption ? testid : testid && `${testid}.Image`}
+				className={!caption ? className : className && "Image"}
+				role={role}
+				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/Main/Main.tsx

@@ -25,24 +25,24 @@ import type { ILibMain } from "./types"
  * </Main>
  */
 export const Main: FC<ILibMain> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    children,
-    size,
-    contentSize,
-    ...rest
+	"data-testid": testid,
+	as,
+	ref,
+	children,
+	size = "default",
+	contentSize = "default",
+	...rest
 }) => {
-    return (
-        <StyledMain
-            data-testid={testid}
-            ref={ref}
-            as={as}
-            $size={size}
-            $contentSize={contentSize}
-            {...rest}
-        >
-            {children}
-        </StyledMain>
-    )
+	return (
+		<StyledMain
+			data-testid={testid}
+			ref={ref}
+			as={as}
+			$size={size}
+			$contentSize={contentSize}
+			{...rest}
+		>
+			{children}
+		</StyledMain>
+	)
 }