@julseb-lib/react 0.0.87 → 0.0.88

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/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>
+	)
 }

package/dist/lib/components/TextIcon/TextIcon.tsx

@@ -36,65 +36,65 @@ import type { ILibTextIcon } from "./types"
  * <TextIcon icon="star" tag="h2" color="primary">Featured</TextIcon>
  */
 export const TextIcon: FC<ILibTextIcon> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    textAs,
-    className,
-    children,
-    icon,
-    iconColor,
-    iconSize,
-    iconBaseUrl,
-    tag = "p",
-    display,
-    gap,
-    containerStyle,
-    ...rest
+	"data-testid": testid,
+	as,
+	ref,
+	textAs,
+	className,
+	children,
+	icon,
+	iconColor,
+	iconSize,
+	iconBaseUrl,
+	tag = "p",
+	display,
+	gap = "xs",
+	containerStyle,
+	...rest
 }) => {
-    const textProps: Partial<Omit<ILibTextIcon, "tag" | "display">> = {
-        "data-testid": testid && `${testid}.Text`,
-        as: textAs,
-        className: "Text",
-        children,
-        ...rest,
-    }
+	const textProps: Partial<Omit<ILibTextIcon, "tag" | "display">> = {
+		"data-testid": testid && `${testid}.Text`,
+		as: textAs,
+		className: "Text",
+		children,
+		...rest,
+	}
 
-    return (
-        <StyledTextIcon
-            data-testid={testid}
-            ref={ref}
-            as={as}
-            className={className}
-            style={containerStyle}
-            $gap={gap}
-        >
-            <IconContainer
-                data-testid={testid && `${testid}.IconContainer`}
-                className={className && "IconContainer"}
-                $tag={tag}
-                $display={display}
-                $iconSize={iconSize}
-            >
-                <LibIcon
-                    data-testid={testid && `${testid}.IconContainer.Icon`}
-                    className={className && "Icon"}
-                    icon={icon}
-                    size={iconSize || getIconHeight(tag, display)}
-                    color={iconColor}
-                    baseUrl={iconBaseUrl}
-                />
-            </IconContainer>
+	return (
+		<StyledTextIcon
+			data-testid={testid}
+			ref={ref}
+			as={as}
+			className={className}
+			style={containerStyle}
+			$gap={gap}
+		>
+			<IconContainer
+				data-testid={testid && `${testid}.IconContainer`}
+				className={className && "IconContainer"}
+				$tag={tag}
+				$display={display}
+				$iconSize={iconSize}
+			>
+				<LibIcon
+					data-testid={testid && `${testid}.IconContainer.Icon`}
+					className={className && "Icon"}
+					icon={icon}
+					size={iconSize || getIconHeight(tag, display)}
+					color={iconColor}
+					baseUrl={iconBaseUrl}
+				/>
+			</IconContainer>
 
-            {tag === "h1" ||
-            tag === "h2" ||
-            tag === "h3" ||
-            tag === "h4" ||
-            tag === "h5" ? (
-                <Text display={display} tag={tag} {...textProps} />
-            ) : (
-                <Text tag={tag} {...textProps} />
-            )}
-        </StyledTextIcon>
-    )
+			{tag === "h1" ||
+			tag === "h2" ||
+			tag === "h3" ||
+			tag === "h4" ||
+			tag === "h5" ? (
+				<Text display={display} tag={tag} {...textProps} />
+			) : (
+				<Text tag={tag} {...textProps} />
+			)}
+		</StyledTextIcon>
+	)
 }

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

@@ -1,20 +1,21 @@
 import type { CSSProperties } from "react"
 import type {
-    LibComponentBase,
-    LibAllColorsAndOverlays,
-    LibAllColors,
-    LibTooltipPosition,
-    LibSpacers,
-    LibTooltipTrigger,
+	LibComponentBase,
+	LibAllColorsAndOverlays,
+	LibAllColors,
+	LibTooltipPosition,
+	LibSpacers,
+	LibTooltipTrigger,
+	ReactChildren,
 } from "../../types"
 
 export interface ILibTooltip extends LibComponentBase<HTMLDivElement> {
-    tooltip: string | JSX.Element
-    position?: LibTooltipPosition
-    hideArrow?: boolean
-    trigger?: LibTooltipTrigger
-    backgroundColor?: LibAllColorsAndOverlays
-    textColor?: LibAllColors
-    offset?: LibSpacers
-    tooltipStyles?: CSSProperties
+	tooltip: string | ReactChildren
+	position?: LibTooltipPosition
+	hideArrow?: boolean
+	trigger?: LibTooltipTrigger
+	backgroundColor?: LibAllColorsAndOverlays
+	textColor?: LibAllColors
+	offset?: LibSpacers
+	tooltipStyles?: CSSProperties
 }

package/package.json

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