@julseb-lib/react 0.0.56 → 0.0.57

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

@@ -1,74 +0,0 @@
-/*=============================================== IconMenuItem ===============================================*/
-
-import { forwardRef } 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
- * @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
- */
-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}
-            />
-        )
-    }
-)

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

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

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

@@ -1,116 +0,0 @@
-/*=============================================== IconMenu styles ===============================================*/
-
-import styled, { css } from "styled-components"
-import {
-    setDefaultTheme,
-    TRANSITIONS,
-    ButtonIcon,
-    Mixins,
-    SPACERS,
-} from "../../"
-import { Plus } from "../../icons"
-import type {
-    LibIconMenuDirection,
-    LibPositionExtract,
-    LibSpacers,
-} from "../../types"
-
-const DEFAULT_BUTTON_SIZE = 48
-
-const StyledIconMenu = styled.nav<{
-    $position?: LibPositionExtract
-    $left?: LibSpacers
-    $top?: LibSpacers
-    $right?: LibSpacers
-    $bottom?: LibSpacers
-    $zIndex?: number
-}>`
-    ${Mixins.Position};
-    width: ${DEFAULT_BUTTON_SIZE}px;
-    height: ${DEFAULT_BUTTON_SIZE}px;
-`
-
-const OpenButton = styled(ButtonIcon).attrs({ size: DEFAULT_BUTTON_SIZE })`
-    position: relative;
-    z-index: 100;
-`
-
-const OpenIcon = styled(Plus).attrs({ size: DEFAULT_BUTTON_SIZE })`
-    transition: ${TRANSITIONS.SHORT};
-    transform: rotate(0deg);
-
-    &.Open {
-        transform: rotate(45deg);
-    }
-`
-
-const StyledButtonIcon = styled(ButtonIcon)<{
-    $direction?: LibIconMenuDirection
-}>`
-    position: absolute;
-    transition: left 200ms ease, top 200ms ease, right 200ms ease,
-        bottom 200ms ease;
-    display: block;
-    overflow: hidden;
-    width: ${DEFAULT_BUTTON_SIZE}px;
-    height: ${DEFAULT_BUTTON_SIZE}px;
-    z-index: 0;
-
-    &.Open {
-        z-index: calc(var(--button-position) + 1);
-        overflow: visible;
-    }
-
-    ${({ $direction }) => {
-        const POSITION = `calc(var(--button-position) * ${DEFAULT_BUTTON_SIZE}px + ${SPACERS.XS} * var(--button-position))`
-
-        switch ($direction) {
-            case "left":
-                return css`
-                    top: 0;
-                    right: 0;
-
-                    &.Open {
-                        right: ${POSITION};
-                    }
-                `
-            case "up":
-                return css`
-                    left: 0;
-                    bottom: 0;
-
-                    &.Open {
-                        bottom: ${POSITION};
-                    }
-                `
-            case "right":
-                return css`
-                    top: 0;
-                    left: 0;
-
-                    &.Open {
-                        left: ${POSITION};
-                    }
-                `
-            case "down":
-                return css`
-                    left: 0;
-                    top: 0;
-
-                    &.Open {
-                        top: ${POSITION};
-                    }
-                `
-        }
-    }}
-` as any
-
-setDefaultTheme([StyledIconMenu, OpenButton, OpenIcon, StyledButtonIcon])
-
-export {
-    StyledIconMenu,
-    OpenButton,
-    OpenIcon,
-    StyledButtonIcon,
-    DEFAULT_BUTTON_SIZE,
-}

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

@@ -1,56 +0,0 @@
-/*=============================================== IconMenu types ===============================================*/
-
-import type {
-    LibComponentBase,
-    LibIconMenuItem,
-    LibIconMenuDirection,
-    LibColorsHover,
-    ReactChildren,
-    LibIcon,
-    LibIconMenuIcon,
-    ILibPosition,
-    LibButtonIconVariant,
-} from "../../types"
-import type { ILibButtonIcon } from "../ButtonIcon/types"
-
-/*====================== IconMenu ======================*/
-
-interface ILibIconMenuBase extends LibComponentBase<HTMLDivElement> {
-    direction?: LibIconMenuDirection
-    color?: LibColorsHover
-    position?: ILibPosition
-    hideTooltips?: boolean
-    buttonsVariant?: LibButtonIconVariant
-    iconBaseUrl?: string
-    icon?:
-        | LibIconMenuIcon
-        | {
-              open: LibIcon
-              close: LibIcon
-              openSize?: number
-              closeSize?: number
-          }
-}
-
-interface IconMenuWithItems extends ILibIconMenuBase {
-    items: Array<LibIconMenuItem>
-    children?: never
-}
-
-interface IconMenuWithChildren extends ILibIconMenuBase {
-    items?: never
-    children?: ReactChildren
-}
-
-export type ILibIconMenu = IconMenuWithItems | IconMenuWithChildren
-
-/*====================== IconMenu ======================*/
-
-export type ILibIconMenuItem = ILibButtonIcon &
-    Omit<LibIconMenuItem, "ref"> & {
-        indexPosition: number
-        isOpen: boolean
-        direction?: LibIconMenuDirection
-        variant?: LibButtonIconVariant
-        iconBaseUrl?: string
-    }

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

@@ -1,106 +0,0 @@
-/*=============================================== Image component ===============================================*/
-
-import { forwardRef } 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
- * @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
- */
-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,
-        }
-
-        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>
-            )
-
-        return <ImageFunction {...imageProps} />
-    }
-)

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

@@ -1,53 +0,0 @@
-/*=============================================== ImageFunction ===============================================*/
-
-import { forwardRef, lazy, Suspense } 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>
-        )
-    }
-)

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

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

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

@@ -1,87 +0,0 @@
-/*=============================================== Image styles ===============================================*/
-
-import type { FC } from "react"
-import styled from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import { setDefaultTheme, Text, Mixins, SPACERS, FONT_WEIGHTS } from "../../"
-import type {
-    LibAllColors,
-    ILibRadius,
-    CssObjectFit,
-    LibImageBackgroundOverlay,
-    LibFontSizes,
-} from "../../types"
-
-const StyledImage = styled.img<{
-    $width: string | number
-    $height: string | number
-    $borderRadius?: ILibRadius
-    $fit?: CssObjectFit
-    $aspectRatio?: string
-    $fallbackBackground: LibAllColors
-    $fallbackTextColor: LibAllColors
-    $fallbackFontSize?: LibFontSizes
-}>`
-    display: block;
-    width: ${({ $width }) => stringifyPx($width)};
-    height: ${({ $height }) => stringifyPx($height)};
-    object-fit: ${({ $fit }) => $fit};
-    aspect-ratio: ${({ $aspectRatio }) => $aspectRatio};
-    position: relative;
-    z-index: 0;
-    ${({ $borderRadius }) => Mixins.BorderRadius($borderRadius)}
-
-    &[alt]:after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        ${Mixins.Flexbox({
-            $alignItems: "center",
-            $justifyContent: "center",
-        })};
-        width: 100%;
-        height: 100%;
-        background-color: ${({ $fallbackBackground, theme }) =>
-            Mixins.AllColors($fallbackBackground, theme)};
-        color: ${({ $fallbackTextColor, theme }) =>
-            Mixins.AllColors($fallbackTextColor, theme)};
-        content: attr(data-fallback);
-        font-weight: ${FONT_WEIGHTS.BOLD};
-        font-size: ${({ $fallbackFontSize }) =>
-            Mixins.FontSize($fallbackFontSize)};
-    }
-`
-
-const ImgContainer = styled.figure<{
-    $width: string | number
-    $height: string | number
-    $borderRadius?: ILibRadius
-}>`
-    position: relative;
-    overflow: hidden;
-    width: ${({ $width }) => stringifyPx($width)};
-    height: ${({ $height }) => stringifyPx($height)};
-    ${({ $borderRadius }) => Mixins.BorderRadius($borderRadius)};
-`
-
-const Caption = styled(Text).attrs({ as: "figcaption" })<{
-    $backgroundColor: LibImageBackgroundOverlay
-    $textColor: LibAllColors
-}>`
-    background: ${({ theme, $backgroundColor }) =>
-        Mixins.ColorsAndOverlays($backgroundColor, theme)};
-    color: ${({ theme, $textColor }) => Mixins.AllColors($textColor, theme)};
-    padding: ${SPACERS.S};
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    z-index: 1;
-` as FC<any>
-
-setDefaultTheme([StyledImage, ImgContainer, Caption])
-
-export { ImgContainer, Caption }
-
-// eslint-disable-next-line
-export default StyledImage

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

@@ -1,48 +0,0 @@
-/*=============================================== Image types ===============================================*/
-
-import type { CSSProperties, ElementType, ImgHTMLAttributes } from "react"
-import type {
-    LibComponentBase,
-    ILibRadius,
-    CssObjectFit,
-    LibAllColors,
-    LibImageBackgroundOverlay,
-    LibFontSizes,
-} from "../../types"
-
-interface ILibImageBase
-    extends Omit<LibComponentBase<HTMLImageElement>, "as">,
-        ImgHTMLAttributes<HTMLImageElement> {
-    borderRadius?: ILibRadius
-    fit?: CssObjectFit
-    aspectRatio?: string
-    fallback?: JSX.Element | string
-    imgFallback?: {
-        text: string
-        background?: LibAllColors
-        textColor?: LibAllColors
-        fontSize?: LibFontSizes
-    }
-    children?: never
-}
-
-interface ImageWithCaption extends ILibImageBase {
-    caption?:
-        | string
-        | {
-              text: string
-              textColor?: LibAllColors
-              background?: LibImageBackgroundOverlay
-              as?: ElementType
-          }
-    containerStyle?: CSSProperties
-    containerAs?: ElementType
-}
-
-interface ImageWithoutCaption extends ILibImageBase {
-    caption?: undefined
-    containerStyle?: never
-    containerAs?: never
-}
-
-export type ILibImage = ImageWithCaption | ImageWithoutCaption