@julseb-lib/react 0.1.3 → 0.1.4

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

@@ -1,30 +0,0 @@
-import type {
-    LibButtonLinkRequired,
-    LibComponentBase,
-    LibIcon,
-    LibSpacers,
-} from "../../types"
-
-export interface ILibForm
-    extends Exclude<LibComponentBase<HTMLFormElement>, "as"> {
-    buttonPrimary?:
-        | string
-        | {
-              text: string
-              iconLeft?: LibIcon
-              iconRight?: LibIcon
-              iconLeftSize?: number
-              iconRightSize?: number
-          }
-    buttonSecondary?: LibButtonLinkRequired & {
-        text: string
-        iconLeft?: LibIcon
-        iconRight?: LibIcon
-        iconLeftSize?: number
-        iconRightSize?: number
-    }
-    isLoading?: boolean
-    disabled?: boolean
-    gap?: LibSpacers
-    maxWidth?: string | number
-}

package/dist/lib/components/FullBleed/FullBleed.tsx

@@ -1,48 +0,0 @@
-import type { FC } from "react"
-import { StyledFullBleed } from "./styles"
-import type { ILibFullBleed } from "./types"
-
-/**
- * FullBleed component for rendering a full-width section with optional height, aspect ratio, and padding.
- *
- * @component
- * @extends HTMLDivElement
- * @param {Object} props - FullBleed props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ElementType} [props.as] - Custom element type to render as.
- * @param {ForwardedRef<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
- * @param {number|string} [props.height] - Height of the full-bleed section.
- * @param {string} [props.aspectRatio] - Aspect ratio for the section (e.g., "16/9").
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | Object} [props.padding] - Padding for the section.
- * @param {ReactNode} [props.children] - Content to display inside the section.
- * @returns {JSX.Element} The rendered FullBleed component.
- *
- * @example
- * <FullBleed height="300px" aspectRatio="16/9" padding="l">
- *   <img src="/banner.jpg" alt="Banner" />
- * </FullBleed>
- */
-export const FullBleed: FC<ILibFullBleed> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    children,
-    height,
-    aspectRatio,
-    padding,
-    ...rest
-}) => {
-    return (
-        <StyledFullBleed
-            data-testid={testid}
-            ref={ref}
-            as={as}
-            $height={height}
-            $aspectRatio={aspectRatio}
-            $padding={padding}
-            {...rest}
-        >
-            {children}
-        </StyledFullBleed>
-    )
-}

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

@@ -1 +0,0 @@
-export * from "./FullBleed"

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

@@ -1,30 +0,0 @@
-import styled, { css } from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import { Mixins, setDefaultTheme } from "../../"
-import type { ILibPadding } from "../../types"
-
-const StyledFullBleed = styled.div<{
-    $height?: number | string
-    $aspectRatio?: string
-    $padding?: ILibPadding
-}>`
-    width: 100%;
-    grid-column: 1/4;
-    aspect-ratio: ${({ $aspectRatio }) => $aspectRatio};
-    ${({ $padding }) => Mixins.Padding($padding)}
-
-    ${({ $height }) =>
-        $height &&
-        css`
-            height: ${stringifyPx($height)};
-
-            & > img,
-            & > figure {
-                height: 100%;
-            }
-        `}
-`
-
-setDefaultTheme([StyledFullBleed])
-
-export { StyledFullBleed }

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

@@ -1,7 +0,0 @@
-import type { LibComponentBase, ILibPadding } from "../../types"
-
-export interface ILibFullBleed extends LibComponentBase<HTMLDivElement> {
-    height?: number | string
-    aspectRatio?: string
-    padding?: ILibPadding
-}

package/dist/lib/components/Grid/Grid.tsx

@@ -1,71 +0,0 @@
-import type { FC } from "react"
-import { StyledGrid } from "./styles"
-import type { ILibGrid } from "./types"
-
-/**
- * Grid component for creating flexible grid layouts with configurable columns, gaps, alignment, and padding.
- *
- * @component
- * @extends HTMLDivElement
- * @param {Object} props - Grid props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ElementType} [props.as] - Custom element type to render as.
- * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
- * @param {boolean} [props.inline] - Display as inline-grid.
- * @param {number|string} [props.col] - Number or string for grid columns.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap] - Gap between grid items.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.columnGap] - Column gap.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.rowGap] - Row gap.
- * @param {CssJustifyItems} [props.justifyItems] - Justify items.
- * @param {CssAlignItems} [props.alignItems] - Align items.
- * @param {CssJustifyContent} [props.justifyContent] - Justify content.
- * @param {CssAlignContent} [props.alignContent] - Align content.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | Object} [props.padding] - Padding for the grid container.
- * @param {ReactNode} [props.children] - Grid content.
- * @returns {JSX.Element} The rendered Grid component.
- *
- * @example
- * <Grid col={3} gap="l" padding="m">
- *   <div>Item 1</div>
- *   <div>Item 2</div>
- *   <div>Item 3</div>
- * </Grid>
- */
-export const Grid: FC<ILibGrid> = ({
-	"data-testid": testid,
-	as,
-	ref,
-	children,
-	inline,
-	col = 1,
-	gap,
-	columnGap,
-	rowGap,
-	justifyItems = "stretch",
-	alignItems = "stretch",
-	justifyContent = "auto",
-	alignContent = "normal",
-	padding = "0px",
-	...rest
-}) => {
-	return (
-		<StyledGrid
-			data-testid={testid}
-			ref={ref}
-			as={as}
-			$inline={inline}
-			$col={col}
-			$gap={gap}
-			$columnGap={columnGap}
-			$rowGap={rowGap}
-			$justifyItems={justifyItems}
-			$alignItems={alignItems}
-			$justifyContent={justifyContent}
-			$alignContent={alignContent}
-			$padding={padding}
-			{...rest}
-		>
-			{children}
-		</StyledGrid>
-	)
-}

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

@@ -1,29 +0,0 @@
-import styled from "styled-components"
-import { setDefaultTheme, Mixins } from "../../"
-import type {
-    CssAlignContent,
-    CssAlignItems,
-    CssJustifyContent,
-    CssJustifyItems,
-    ILibPadding,
-    LibSpacers,
-} from "../../types"
-
-const StyledGrid = styled.div<{
-    $inline?: boolean
-    $col?: number | string
-    $gap?: LibSpacers
-    $columnGap?: LibSpacers
-    $rowGap?: LibSpacers
-    $justifyItems?: CssJustifyItems
-    $alignItems?: CssAlignItems
-    $justifyContent?: CssJustifyContent
-    $alignContent?: CssAlignContent
-    $padding?: ILibPadding
-}>`
-    ${Mixins.Grid}
-`
-
-setDefaultTheme([StyledGrid])
-
-export { StyledGrid }

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

@@ -1,22 +0,0 @@
-import type {
-    CssAlignContent,
-    CssAlignItems,
-    CssJustifyContent,
-    CssJustifyItems,
-    LibComponentBase,
-    LibSpacers,
-    ILibPadding,
-} from "../../types"
-
-export interface ILibGrid extends LibComponentBase<HTMLDivElement> {
-    inline?: boolean
-    col?: number | string
-    gap?: LibSpacers
-    columnGap?: LibSpacers
-    rowGap?: LibSpacers
-    justifyItems?: CssJustifyItems
-    alignItems?: CssAlignItems
-    justifyContent?: CssJustifyContent
-    alignContent?: CssAlignContent
-    padding?: ILibPadding
-}

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

@@ -1,223 +0,0 @@
-import { useState, useEffect, useRef, type Ref, type FC } from "react"
-import classNames from "classnames"
-import { enableScroll, disableScroll } from "@julseb-lib/utils"
-import { useMaxWidth, useKeyPress } from "../../"
-import { HeaderBurger } from "./HeaderBurger"
-import { HeaderSearch } from "./HeaderSearch"
-import { HeaderNav } from "./HeaderNav"
-import { HeaderLogo } from "./HeaderLogo"
-import { StyledHeader, Overlay } from "./styles"
-import type { ILibHeader } from "./types"
-import type {
-	ILibHeaderNav,
-	ILibHeaderBurger,
-	ILibHeaderSearch,
-} from "./subtypes"
-
-/**
- * Header component for displaying a responsive navigation bar with logo, links, burger menu, and optional search.
- *
- * @component
- * @extends HTMLDivElement
- * @param {Object} props - Header props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ElementType} [props.as] - Custom element type to render as.
- * @param {ForwardedRef<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
- * @param {LibHeaderLogo|String} props.logo - Logo for the header (object or string).
- * @param {Array<LibHeaderLink>} [props.links] - Array of navigation links (used if children is not provided).
- * @param {ReactNode} [props.children] - Custom header content (used if links is not provided).
- * @param {"left" | "right"} [props.burgerPosition="right"] - Position of the burger menu.
- * @param {Object|string} [props.burgerColor] - Color for burger menu (string or object with open/closed).
- * @param {"left" | "right"} [props.navDesktopVariant="right"] - Desktop navigation alignment.
- * @param {"drawer" | "inline"} [props.navMobileVariant="drawer"] - Mobile navigation variant.
- * @param {boolean} [props.enableScrollingOpen] - Allow scrolling when menu is open.
- * @param {Object} [props.search] - Search bar configuration.
- * @param {"relative" | "fixed"} [props.position="relative"] - Header position.
- * @param {boolean|number} [props.hideOnScroll] - Hide header on scroll (only if position is fixed).
- * @param {"primary" | "white" | "transparent"} [props.variant="primary"] - Header visual variant.
- * @param {string} [props.backgroundColor="primary"] - Header background color (only if variant is primary).
- * @param {string} [props.textColor="background"] - Header text color (only if variant is primary).
- * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font"} [props.linkColor="white"] - Link color.
- * @param {string} [props.className] - Additional class names.
- * @returns {JSX.Element} The rendered Header component.
- *
- * @example
- * <Header
- *   logo={{ img: "/logo.svg", text: "MyApp", alt: "Logo" }}
- *   links={[
- *     { text: "Home", to: "/" },
- *     { text: "About", to: "/about" }
- *   ]}
- *   burgerPosition="left"
- *   variant="primary"
- *   backgroundColor="primary"
- *   textColor="background"
- *   linkColor="white"
- * />
- */
-export const Header: FC<ILibHeader> = ({
-	"data-testid": testid,
-	as,
-	ref,
-	children,
-	role = "navigation",
-	className,
-	logo,
-	variant = "primary",
-	burgerPosition = "right",
-	navDesktopVariant = "right",
-	navMobileVariant = "drawer",
-	search,
-	position = "relative",
-	hideOnScroll,
-	links,
-	nav,
-	enableScrollingOpen,
-	backgroundColor = "primary",
-	textColor = "background",
-	linkColor = "white",
-	...rest
-}) => {
-	const [isOpen, setIsOpen] = useState(false)
-
-	const handleOpen = () => {
-		if (!enableScrollingOpen) disableScroll()
-		setIsOpen(true)
-	}
-
-	const handleClose = () => {
-		if (!enableScrollingOpen) enableScroll()
-		setTimeout(() => setIsOpen(false), 10)
-	}
-
-	const isMobile = useMaxWidth(600)
-
-	const logoObj = typeof logo === "object" ? logo : undefined
-
-	const logoHeight = logoObj?.height || 30
-	const burgerHeight = 32
-	const logoTextHeight = 35
-	const heightsArr = [logoHeight, burgerHeight, logoTextHeight].sort()
-	const valueForHeight = heightsArr[heightsArr.length - 1]
-
-	const headerHeight = valueForHeight + 16 * 2
-
-	const [isHidden, setIsHidden] = useState(false)
-	const hidePosition = typeof hideOnScroll === "boolean" ? 400 : hideOnScroll
-
-	useEffect(() => {
-		if (hidePosition) {
-			if (window.pageYOffset >= hidePosition) {
-				setIsHidden(true)
-			} else {
-				setIsHidden(false)
-			}
-
-			window.addEventListener("scroll", () => {
-				if (window.pageYOffset >= hidePosition) {
-					setIsHidden(true)
-				} else {
-					setIsHidden(false)
-				}
-			})
-		}
-	}, [hidePosition])
-
-	const burgerRef = useRef<HTMLButtonElement>(null as any)
-
-	useKeyPress("Escape", () => {
-		if (isOpen) handleClose()
-	})
-
-	const burgerProps: ILibHeaderBurger & {
-		ref: Ref<HTMLButtonElement>
-	} = {
-		"data-testid": testid,
-		className,
-		isOpen,
-		navMobileVariant,
-		variant,
-		ref: burgerRef,
-		handleOpen,
-		handleClose,
-	}
-
-	const navProps: ILibHeaderNav = {
-		"data-testid": testid,
-		className,
-		search,
-		isOpen,
-		handleClose,
-		links,
-		children,
-		headerHeight,
-		variant,
-		navMobileVariant,
-		burgerPosition,
-		burgerRef,
-	}
-
-	const searchProps: ILibHeaderSearch = {
-		"data-testid": testid,
-		className,
-		search,
-		handleClose,
-	}
-
-	return (
-		<StyledHeader
-			data-testid={testid}
-			ref={ref}
-			as={as}
-			className={classNames(
-				className,
-				{ Hidden: isHidden },
-				{ Open: isOpen }
-			)}
-			role={role}
-			$burgerPosition={burgerPosition}
-			$headerHeight={headerHeight}
-			$position={position}
-			$variant={variant}
-			$backgroundColor={backgroundColor}
-			$linkColor={linkColor}
-			$textColor={textColor}
-			{...rest}
-		>
-			{burgerPosition === "left" && <HeaderBurger {...burgerProps} />}
-
-			<HeaderLogo
-				data-testid={testid}
-				className={className}
-				logo={logo}
-				isOpen={isOpen}
-			>
-				{typeof logo === "object" ? logo.text : logo}
-			</HeaderLogo>
-
-			{navDesktopVariant === "left" && <HeaderNav {...navProps} />}
-
-			{!isMobile && navDesktopVariant === "right" && (
-				<HeaderSearch {...searchProps} />
-			)}
-
-			{burgerPosition === "right" && <HeaderBurger {...burgerProps} />}
-
-			{navDesktopVariant === "right" && <HeaderNav {...navProps} />}
-
-			{isMobile && navMobileVariant === "drawer" && (
-				<Overlay
-					onClick={() => setIsOpen(false)}
-					className={classNames(
-						{ HeaderOverlay: className },
-						{ Visible: isOpen }
-					)}
-				/>
-			)}
-
-			{!isMobile && navDesktopVariant === "left" && (
-				<HeaderSearch {...searchProps} />
-			)}
-		</StyledHeader>
-	)
-}

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

@@ -1,52 +0,0 @@
-import type { FC } from "react"
-import type { LibColorsHover } from "../../types"
-import { StyledHeaderBurger } from "./styles"
-import type { ILibHeaderBurger } from "./subtypes"
-
-export const HeaderBurger: FC<ILibHeaderBurger> = ({
-	"data-testid": testid,
-	ref,
-	className,
-	isOpen,
-	navMobileVariant,
-	variant,
-	burgerColor,
-	handleOpen,
-	handleClose,
-}) => {
-	const getBurgerColor = (): LibColorsHover => {
-		if (burgerColor) {
-			if (typeof burgerColor === "string") return burgerColor
-
-			return isOpen ? burgerColor.open : burgerColor.closed
-		}
-
-		if (
-			(navMobileVariant === "drawer" && isOpen) ||
-			variant === "primary" ||
-			navMobileVariant === "full" ||
-			(navMobileVariant === "top" && isOpen && variant === "transparent")
-		) {
-			return "white"
-		}
-
-		return "primary"
-	}
-
-	return (
-		<StyledHeaderBurger
-			data-testid={testid && `${testid}.HeaderBurger`}
-			ref={ref}
-			role="button"
-			className={className && "HeaderBurger"}
-			isOpen={isOpen}
-			onClick={() => {
-				if (isOpen) handleClose()
-				else handleOpen()
-			}}
-			width={32}
-			height={24}
-			color={getBurgerColor()}
-		/>
-	)
-}

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

@@ -1,68 +0,0 @@
-import type { FC } from "react"
-import { Link } from "react-router-dom"
-import { Logo, LogoImg } from "./styles"
-import type { ILibHeaderLogo } from "./subtypes"
-
-export const HeaderLogo: FC<ILibHeaderLogo> = ({
-	"data-testid": testid,
-	className,
-	logo,
-	children,
-	isOpen,
-}) => {
-	const {
-		to = "/",
-		href,
-		img,
-		imgOpen,
-		alt = "Logo",
-		width = 100,
-		height = 30,
-	} = logo as any
-
-	if (img) {
-		const imgProps = {
-			"data-testid": testid && `${testid}.HeaderLogo.Img`,
-			className: className && "HeaderLogoImg",
-			src: imgOpen && isOpen ? imgOpen : img,
-			alt,
-			width,
-			height,
-		}
-
-		return href ? (
-			<a
-				href={href}
-				data-testid={testid && `${testid}.HeaderLogo`}
-				className={className && "HeaderLogo"}
-				role="link"
-			>
-				<LogoImg {...imgProps} />
-			</a>
-		) : (
-			<Link
-				data-testid={testid && `${testid}.HeaderLogo`}
-				className={className && "HeaderLogo"}
-				to={to}
-				role="link"
-			>
-				<LogoImg {...imgProps} />
-			</Link>
-		)
-	}
-
-	return (
-		<Logo
-			data-testid={testid && `${testid}.HeaderLogo`}
-			as={href ? "a" : Link}
-			className={className && "HeaderLogo"}
-			to={to}
-			href={href}
-			translate="no"
-			role="link"
-			aria-label="Header Logo"
-		>
-			{children}
-		</Logo>
-	)
-}

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

@@ -1,89 +0,0 @@
-import { useRef, type FC, type ReactNode, type ReactElement } from "react"
-import classNames from "classnames"
-import { uuid } from "@julseb-lib/utils"
-import { useMaxWidth, useClickOutside } from "../../"
-import { HeaderNavLink } from "./HeaderNavLink"
-import { HeaderSearch } from "./HeaderSearch"
-import { Nav } from "./styles"
-import type { ILibHeaderNav } from "./subtypes"
-import type { LibHeaderLink } from "../../types"
-
-export const HeaderNav: FC<ILibHeaderNav> = ({
-	"data-testid": testid,
-	role = "navigation",
-	className,
-	search,
-	isOpen,
-	children,
-	links,
-	headerHeight,
-	variant,
-	navMobileVariant,
-	burgerPosition,
-	burgerRef,
-	handleClose,
-	nav,
-}) => {
-	const isMobile = useMaxWidth(600)
-
-	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 searchHeight = isMobile && !!search ? 32 : 0
-
-	const linksHeight = links
-		? links.length * 24 + ([...valueArr, searchHeight].length - 1) * 12
-		: 56
-
-	const navHeight = searchHeight + linksHeight
-
-	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 | ReactElement}
-						key={uuid()}
-					/>
-				))}
-
-			{children && children}
-
-			{nav && nav}
-		</Nav>
-	)
-}