@julseb-lib/react 0.0.56 → 0.0.57

package/dist/lib/components/ComponentsMixins/ComponentsMixins.tsx

@@ -1,441 +0,0 @@
-/*=============================================== ComponentsMixins ===============================================*/
-
-import { css } from "styled-components"
-import {
-    MEDIA,
-    FONT_FAMILIES,
-    INPUT_HEIGHT,
-    LINE_HEIGHTS,
-    Mixins,
-    RADIUSES,
-    SPACERS,
-    TRANSITIONS,
-    COLORS_LIGHT,
-    COLORS_DARK,
-    FONT_SIZES,
-    FONT_WEIGHTS,
-} from "../../"
-import type {
-    ILibButtonMixin,
-    ILibInputBaseMixin,
-    ILibTextBaseMixin,
-} from "./types"
-
-/*====================== Button ======================*/
-
-export const ButtonMixin = ({
-    $color,
-    $shadow,
-    $borderRadius,
-    $variant,
-}: ILibButtonMixin) => css`
-    border: 1px solid transparent;
-    text-decoration: none;
-    background-color: transparent;
-    line-height: 100%;
-    transition: ${TRANSITIONS.SHORT};
-    cursor: pointer;
-    ${Mixins.BorderRadius($borderRadius)}
-    ${Mixins.Flexbox({
-        $inline: true,
-        $alignItems: "center",
-        $justifyContent: "center",
-    })}
-    ${Mixins.BoxShadow($shadow)}
-
-    ${({ theme }) => {
-        switch ($variant) {
-            case "plain":
-                return css`
-                    background-color: ${Mixins.ColorsHoverDefault(
-                        $color,
-                        theme
-                    )};
-                    color: ${$color === "white"
-                        ? theme.PRIMARY_500
-                        : $color === "background"
-                        ? theme.FONT
-                        : theme.BACKGROUND};
-
-                    @media ${MEDIA.HOVER} {
-                        &:not(:disabled):hover {
-                            background-color: ${Mixins.ColorsHoverHover(
-                                $color,
-                                theme
-                            )};
-                        }
-
-                        &:not(:disabled):active {
-                            background-color: ${Mixins.ColorsHoverActive(
-                                $color,
-                                theme
-                            )};
-                        }
-
-                        &:disabled {
-                            background-color: ${theme.GRAY_100};
-                            color: ${theme.GRAY_500};
-                        }
-                    }
-                `
-            case "transparent":
-                return css`
-                    color: ${Mixins.ColorsHoverDefault($color, theme)};
-
-                    @media ${MEDIA.HOVER} {
-                        &:not(:disabled):hover {
-                            color: ${Mixins.ColorsHoverHover($color, theme)};
-                        }
-
-                        &:not(:disabled):active {
-                            color: ${Mixins.ColorsHoverActive($color, theme)};
-                        }
-
-                        &:disabled {
-                            color: ${theme.GRAY_500};
-                        }
-                    }
-                `
-            case "ghost":
-                return css`
-                    background-color: ${Mixins.ColorsGhostDefault(
-                        $color,
-                        theme
-                    )};
-                    color: ${$color === "white" || $color === "background"
-                        ? theme.PRIMARY_500
-                        : $color === "font"
-                        ? theme.BACKGROUND
-                        : Mixins.ColorsHoverDefault($color, theme)};
-
-                    @media ${MEDIA.HOVER} {
-                        &:not(:disabled):hover {
-                            background-color: ${Mixins.ColorsGhostHover(
-                                $color,
-                                theme
-                            )};
-                        }
-
-                        &:not(:disabled):active {
-                            background-color: ${Mixins.ColorsGhostActive(
-                                $color,
-                                theme
-                            )};
-                        }
-
-                        &:disabled {
-                            background-color: ${theme.GRAY_50};
-                            color: ${theme.GRAY_500};
-                        }
-                    }
-                `
-            case "outline":
-                return css`
-                    border-color: ${Mixins.ColorsHoverDefault($color, theme)};
-                    color: ${Mixins.ColorsHoverDefault($color, theme)};
-
-                    @media ${MEDIA.HOVER} {
-                        &:not(:disabled):hover {
-                            border-color: ${Mixins.ColorsHoverHover(
-                                $color,
-                                theme
-                            )};
-                            color: ${Mixins.ColorsHoverHover($color, theme)};
-                        }
-
-                        &:not(:disabled):active {
-                            border-color: ${Mixins.ColorsHoverActive(
-                                $color,
-                                theme
-                            )};
-                            color: ${Mixins.ColorsHoverActive($color, theme)};
-                        }
-
-                        &:disabled {
-                            border-color: ${theme.GRAY_500};
-                            color: ${theme.GRAY_500};
-                        }
-                    }
-                `
-            default:
-                return null
-        }
-    }}
-`
-/*====================== Text ======================*/
-
-export const TextBaseMixin = ({
-    $fontSize,
-    $fontWeight,
-    $textAlign,
-    $color = "currentColor",
-    $linkColor = "primary",
-}: ILibTextBaseMixin) => css`
-    font-family: ${FONT_FAMILIES.BODY};
-    font-size: ${Mixins.FontSize($fontSize)};
-    font-weight: ${Mixins.FontWeight($fontWeight)};
-    text-align: ${$textAlign};
-    color: ${({ theme }) => Mixins.AllColors($color, theme)};
-    line-height: ${LINE_HEIGHTS.BODY};
-
-    & > * {
-        font-size: inherit;
-    }
-
-    & > code {
-        font-family: ${FONT_FAMILIES.CODE};
-        line-height: ${LINE_HEIGHTS.CODE};
-        color: ${({ theme }) => theme.PRIMARY_500};
-        padding: ${SPACERS.XXS};
-        background-color: ${({ theme }) => theme.GRAY_50};
-        border-radius: ${RADIUSES.S};
-        font-size: inherit;
-    }
-
-    & > a,
-    & > button {
-        padding: 0;
-        border: none;
-        background-color: transparent;
-        text-decoration: none;
-        font-size: inherit;
-        font-weight: ${FONT_WEIGHTS.BLACK};
-        transition: ${TRANSITIONS.SHORT};
-        color: ${({ theme }) => Mixins.ColorsHoverDefault($linkColor, theme)};
-
-        &:not(:disabled) {
-            @media ${MEDIA.HOVER} {
-                &:hover {
-                    color: ${({ theme }) =>
-                        Mixins.ColorsHoverHover($linkColor, theme)};
-                }
-
-                &:active {
-                    color: ${({ theme }) =>
-                        Mixins.ColorsHoverActive($linkColor, theme)};
-                }
-            }
-        }
-    }
-`
-
-/*====================== Input ======================*/
-
-export const InputBaseMixin = ({
-    $disabled,
-    $inputBackground,
-    $inputVariant,
-    $validationStatus,
-}: ILibInputBaseMixin) => css`
-    height: ${INPUT_HEIGHT}px;
-    width: 100%;
-    flex-grow: 1;
-    border: none;
-    background-color: transparent;
-    outline: none;
-    font-family: ${FONT_FAMILIES.BODY};
-    padding: 0 ${SPACERS.XS};
-    font-size: ${FONT_SIZES.BODY};
-
-    &::placeholder {
-        color: ${({ theme }) => theme.GRAY_400};
-    }
-
-    &:disabled {
-        cursor: not-allowed;
-        background-color: ${({ theme }) => theme.GRAY_100};
-        color: ${({ theme }) => theme.GRAY_500};
-
-        &::placeholder {
-            color: ${({ theme }) => theme.GRAY_500};
-        }
-    }
-
-    &[type="file"],
-    &[type="color"] {
-        padding: 0;
-        cursor: pointer;
-    }
-
-    &[type="file"] {
-        overflow: hidden;
-
-        &::file-selector-button {
-            height: 100%;
-            background-color: ${({ theme }) => theme.GRAY_100};
-            color: ${({ theme }) => theme.FONT};
-            border: none;
-            height: ${INPUT_HEIGHT}px;
-            padding: 0 ${SPACERS.XS};
-            line-height: 100%;
-            transition: ${TRANSITIONS.SHORT};
-            cursor: pointer;
-            transform: translateY(-1px);
-        }
-
-        @media ${MEDIA.HOVER} {
-            &:not(:disabled):hover::file-selector-button {
-                background-color: ${({ theme }) => theme.GRAY_300};
-            }
-
-            &:not(:disabled):active::file-selector-button {
-                background-color: ${({ theme }) => theme.GRAY_200};
-            }
-        }
-
-        &:disabled {
-            cursor: not-allowed;
-
-            &::file-selector-button {
-                cursor: not-allowed;
-                color: ${({ theme }) => theme.GRAY_500};
-            }
-        }
-
-        ${() => {
-            switch ($inputBackground) {
-                case "light":
-                    return css`
-                        &::file-selector-button {
-                            background-color: ${COLORS_LIGHT.GRAY_100};
-                            color: ${COLORS_LIGHT.FONT};
-                        }
-
-                        @media ${MEDIA.HOVER} {
-                            &:not(:disabled):hover::file-selector-button {
-                                background-color: ${COLORS_LIGHT.GRAY_300};
-                            }
-
-                            &:not(:disabled):active::file-selector-button {
-                                background-color: ${COLORS_LIGHT.GRAY_200};
-                            }
-                        }
-
-                        &:disabled {
-                            &::file-selector-button {
-                                color: ${COLORS_LIGHT.GRAY_500};
-                            }
-                        }
-                    `
-                case "dark":
-                    return css`
-                        &::file-selector-button {
-                            background-color: ${COLORS_DARK.GRAY_100};
-                            color: ${COLORS_DARK.FONT};
-                        }
-
-                        @media ${MEDIA.HOVER} {
-                            &:not(:disabled):hover::file-selector-button {
-                                background-color: ${COLORS_DARK.GRAY_300};
-                            }
-
-                            &:not(:disabled):active::file-selector-button {
-                                background-color: ${COLORS_DARK.GRAY_200};
-                            }
-                        }
-
-                        &:disabled {
-                            &::file-selector-button {
-                                color: ${COLORS_DARK.GRAY_500};
-                            }
-                        }
-                    `
-                default:
-                    return null
-            }
-        }}
-    }
-
-    &[type="color"] {
-        padding: ${SPACERS.XS};
-        overflow: hidden;
-
-        &::-webkit-color-swatch-wrapper,
-        &::-webkit-color-swatch {
-            padding: 0;
-            margin: 0;
-            width: 100%;
-            border-radius: ${$inputVariant === "pill"
-                ? RADIUSES.ROUND
-                : RADIUSES.S};
-        }
-    }
-
-    &[type="date"],
-    &[type="datetime-local"],
-    &[type="month"],
-    &[type="week"],
-    &[type="time"] {
-        padding-left: ${SPACERS.XS};
-
-        &::-webkit-inner-spin-button,
-        &::-webkit-calendar-picker-indicator {
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            appearance: none;
-            display: none;
-        }
-    }
-
-    &[type="search"] {
-        &::-webkit-search-cancel-button {
-            -webkit-appearance: none;
-            appearance: none;
-        }
-    }
-
-    ${() => {
-        switch ($inputBackground) {
-            case "light":
-                return css`
-                    background-color: ${$validationStatus === false
-                        ? COLORS_LIGHT.DANGER_50
-                        : $disabled
-                        ? COLORS_LIGHT.GRAY_100
-                        : COLORS_LIGHT.BACKGROUND};
-                    color: ${$disabled
-                        ? COLORS_LIGHT.GRAY_500
-                        : COLORS_LIGHT.FONT};
-
-                    &::placeholder {
-                        color: ${COLORS_LIGHT.GRAY_400};
-                    }
-
-                    &:disabled {
-                        background-color: ${COLORS_LIGHT.GRAY_100};
-                        color: ${COLORS_LIGHT.GRAY_500};
-
-                        &::placeholder {
-                            color: ${COLORS_LIGHT.GRAY_500};
-                        }
-                    }
-                `
-            case "dark":
-                return css`
-                    background-color: ${$validationStatus === false
-                        ? COLORS_DARK.DANGER_50
-                        : $disabled
-                        ? COLORS_DARK.GRAY_100
-                        : COLORS_DARK.BACKGROUND};
-                    color: ${$disabled
-                        ? COLORS_DARK.GRAY_500
-                        : COLORS_DARK.FONT};
-
-                    &::placeholder {
-                        color: ${COLORS_DARK.GRAY_400};
-                    }
-
-                    &:disabled {
-                        background-color: ${COLORS_DARK.GRAY_100};
-                        color: ${COLORS_DARK.GRAY_500};
-
-                        &::placeholder {
-                            color: ${COLORS_DARK.GRAY_500};
-                        }
-                    }
-                `
-            default:
-                return null
-        }
-    }}
-`

package/dist/lib/components/ComponentsMixins/hooks/useKeyboardNavigation.tsx

@@ -1,81 +0,0 @@
-/*=============================================== Component Hooks ===============================================*/
-
-import { useState, useCallback, useRef, useEffect } from "react"
-import type { DispatchState } from "../../../types"
-
-interface ILibKeyboardNav<T> {
-    data: T
-    value: string
-    setValue: DispatchState<string>
-}
-
-export function useKeyboardNavigation<T>({
-    data,
-    value,
-    setValue,
-}: ILibKeyboardNav<T>) {
-    const [isOpen, setIsOpen] = useState(false)
-    const [cursor, setCursor] = useState(0)
-    const listRef = useRef<HTMLDivElement>(null)
-
-    const handleKeyboardNavigation = useCallback(
-        (e: KeyboardEvent) => {
-            const { key } = e
-            const dataArr: Array<T> = data as Array<T>
-
-            if (isOpen) {
-                if (key === "ArrowDown") {
-                    e.preventDefault()
-
-                    if (dataArr.length) {
-                        setCursor(prev =>
-                            prev < dataArr.length ? prev + 1 : 0
-                        )
-
-                        if (cursor === dataArr.length)
-                            listRef?.current?.scrollTo({ top: 0 })
-                        else listRef?.current?.scrollTo({ top: cursor * 40 })
-                    }
-                }
-
-                if (key === "ArrowUp") {
-                    e.preventDefault()
-
-                    if (dataArr.length) {
-                        setCursor(prev =>
-                            prev > 0 ? prev - 1 : dataArr.length
-                        )
-
-                        if (cursor === 0)
-                            listRef?.current?.scrollTo({
-                                top: listRef?.current?.scrollHeight,
-                            })
-                        else listRef?.current?.scrollTo({ top: cursor * 40 })
-                    }
-                }
-
-                if (key === "Tab" || key === "Enter") {
-                    e.preventDefault()
-
-                    if (cursor === dataArr.length) {
-                        setValue(value)
-                        setIsOpen(false)
-                    } else {
-                        setValue((data as Array<any>)[cursor])
-                        setIsOpen(false)
-                    }
-                }
-            }
-        },
-        [isOpen, cursor, data, value, setValue]
-    )
-
-    useEffect(() => {
-        document.addEventListener("keydown", handleKeyboardNavigation)
-
-        return () =>
-            document.removeEventListener("keydown", handleKeyboardNavigation)
-    }, [handleKeyboardNavigation])
-
-    return { isOpen, setIsOpen, cursor, listRef, handleKeyboardNavigation }
-}

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

@@ -1,5 +0,0 @@
-/*=============================================== ComponentsMixins exports ===============================================*/
-
-export * from "./ComponentsMixins"
-export * from "./hooks/useKeyboardNavigation"
-export * from "./types"

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

@@ -1,37 +0,0 @@
-/*=============================================== ComponentsMixins types ===============================================*/
-
-import type {
-    CssTextAlign,
-    ILibBoxShadow,
-    ILibRadius,
-    LibAllColors,
-    LibButtonVariant,
-    LibColorsHover,
-    LibFontSizes,
-    LibFontWeights,
-    LibInputBackground,
-    LibInputVariant,
-    LibValidationStatus,
-} from "../../types"
-
-export interface ILibButtonMixin {
-    $color: LibColorsHover
-    $shadow?: ILibBoxShadow
-    $borderRadius?: ILibRadius
-    $variant?: LibButtonVariant
-}
-
-export interface ILibTextBaseMixin {
-    $fontSize: LibFontSizes | "inherit"
-    $fontWeight: LibFontWeights
-    $textAlign?: CssTextAlign
-    $color?: LibAllColors
-    $linkColor?: LibColorsHover
-}
-
-export interface ILibInputBaseMixin {
-    $validationStatus: LibValidationStatus | undefined
-    $inputBackground: LibInputBackground | undefined
-    $disabled: boolean | undefined
-    $inputVariant: LibInputVariant | undefined
-}

package/dist/lib/components/Cover/Cover.tsx

@@ -1,72 +0,0 @@
-/*=============================================== Cover component ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledCover, CoverImg, CoverContent } from "./styles"
-import type { ILibCover } from "./types"
-
-/**
- * @description Returns a Cover component
- * @link https://documentation-components-react.vercel.app/components/cover
- * @extends ILibFlexbox
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop img: string
- * @prop alt?: string
- * @prop overlay?: "black-50" | "black-80" | "white-50" | "white-80" | "gradient-black" | "gradient-white"
- * @prop height?: number | string
- * @prop padding?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | { left?: LibSpacers | "auto"; top?: LibSpacers | "auto"; right?: LibSpacers | "auto"; bottom?: LibSpacers | "auto"; leftRight?: LibSpacers | "auto"; topBottom?: LibSpacers | "auto" }
- */
-export const Cover = forwardRef<HTMLDivElement, ILibCover>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            img,
-            alt,
-            overlay,
-            height = "100vh",
-            gap = "s",
-            flexDirection = "column",
-            justifyContent = "center",
-            alignItems = "center",
-            padding = "xxl",
-            className,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledCover
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={className}
-                $height={height}
-                $overlay={overlay}
-                {...rest}
-            >
-                <CoverImg
-                    data-testid={testid && `${testid}.CoverImage`}
-                    className={className && "CoverImage"}
-                    src={img}
-                    alt={alt}
-                />
-
-                <CoverContent
-                    data-testid={testid && `${testid}.CoverContent`}
-                    className={className && "CoverContent"}
-                    flexDirection={flexDirection}
-                    gap={gap}
-                    justifyContent={justifyContent}
-                    alignItems={alignItems}
-                    $overlay={overlay}
-                    $padding={padding}
-                >
-                    {children}
-                </CoverContent>
-            </StyledCover>
-        )
-    }
-)

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

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