@julseb-lib/react 0.0.50 → 0.0.52

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

@@ -1,361 +0,0 @@
-/*=============================================== Slideshow styles ===============================================*/
-
-import styled, { css } from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import {
-    setDefaultTheme,
-    Mixins,
-    RADIUSES,
-    MEDIA,
-    SPACERS,
-    Flexbox,
-    TRANSITIONS,
-} from "../../"
-import type {
-    LibSlideshowButtonSize,
-    LibColorsHover,
-    LibSlideshowButtonPosition,
-    CssObjectFit,
-    LibSlideshowPaginationPosition,
-    LibSlideshowPagination,
-} from "../../types"
-
-const StyledSlideshow = styled.div`
-    width: 100%;
-    ${Mixins.Flexbox({
-        $gap: "xs",
-        $flexDirection: "column",
-        $alignItems: "center",
-        $justifyItems: "center",
-    })};
-    position: relative;
-`
-
-const SlideshowWrapper = styled(Flexbox).attrs({ flexDirection: "column" })<{
-    $height: string | number
-}>`
-    width: 100%;
-    height: ${({ $height }) => stringifyPx($height)};
-    position: relative;
-    overflow: hidden;
-`
-
-const SlideshowContentWrapper = styled(Flexbox)`
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-`
-
-const SlideshowContent = styled(Flexbox)<{
-    $speed: number
-    $active: number
-    $imgFit: CssObjectFit
-}>`
-    transition: all ${({ $speed }) => $speed}ms ease;
-    width: 100%;
-    transform: ${({ $active }) => `translateX(-${$active * 100}%)`};
-    height: 100%;
-
-    ${Mixins.HideScrollbar}
-
-    & > * {
-        width: 100%;
-        height: 100%;
-        flex-shrink: 0;
-        flex-grow: 1;
-        transition: ${TRANSITIONS.LONG};
-    }
-
-    img {
-        width: 100%;
-        height: 100%;
-        object-fit: ${({ $imgFit }) => $imgFit};
-    }
-`
-
-const BUTTON_SIZE = 32
-const BUTTON_SIZE_LARGE = 48
-
-const StyledSlideshowButton = styled.button<{
-    $size: LibSlideshowButtonSize
-    $color: LibColorsHover
-    $position: LibSlideshowButtonPosition
-    $hideOnTouch: boolean
-}>`
-    border-radius: ${({ $position, $size }) =>
-        $size === "small"
-            ? RADIUSES.CIRCLE
-            : $position === "left"
-            ? `0 ${RADIUSES.M} ${RADIUSES.M} 0`
-            : `${RADIUSES.M} 0 0 ${RADIUSES.M}`};
-    padding: 0;
-    border: none;
-    position: absolute;
-    z-index: 2;
-    ${Mixins.Flexbox({
-        $alignItems: "center",
-        $justifyContent: "center",
-    })}
-    color: ${({ $color, theme }) =>
-        $color === "white" || $color === "background"
-            ? theme.PRIMARY_500
-            : theme.BACKGROUND};
-    background-color: ${({ theme, $color }) =>
-        Mixins.ColorsHoverDefault($color, theme)};
-    width: ${({ $size }) =>
-        $size === "large" ? BUTTON_SIZE_LARGE : BUTTON_SIZE}px;
-    height: ${({ $size }) =>
-        $size === "large" ? BUTTON_SIZE_LARGE : BUTTON_SIZE}px;
-    top: calc(
-        50% -
-            ${({ $size }) =>
-                $size === "large" ? BUTTON_SIZE_LARGE : BUTTON_SIZE}px / 2
-    );
-    left: ${({ $position, $size }) => {
-        if ($position === "right") return null
-        if ($size === "large") return "0"
-        if ($position === "left") return SPACERS.XS
-        return null
-    }};
-    right: ${({ $position, $size }) => {
-        if ($position === "left") return null
-        if ($size === "large") return "0"
-        if ($position === "right") return SPACERS.XS
-        return null
-    }};
-
-    @media ${MEDIA.HOVER} {
-        &:hover {
-            background-color: ${({ theme, $color }) =>
-                Mixins.ColorsHoverHover($color, theme)};
-        }
-
-        &:active {
-            background-color: ${({ theme, $color }) =>
-                Mixins.ColorsHoverActive($color, theme)};
-        }
-    }
-
-    ${({ $hideOnTouch }) =>
-        $hideOnTouch &&
-        css`
-            @media ${MEDIA.TOUCH} {
-                display: none;
-            }
-        `}
-`
-
-const StyledSlideshowPagination = styled(Flexbox).attrs({
-    justifyContent: "center",
-    alignItems: "center",
-    gap: "xs",
-})<{ $hideOnTouch: boolean; $position: LibSlideshowPaginationPosition }>`
-    width: 100%;
-    max-width: 70%;
-
-    ${({ $position }) =>
-        $position === "inside" &&
-        css`
-            position: absolute;
-            bottom: 8px;
-        `}
-
-    ${({ $hideOnTouch }) =>
-        $hideOnTouch &&
-        css`
-            @media ${MEDIA.TOUCH} {
-                display: none;
-            }
-        `}
-`
-
-const DOT_SIZE = 8
-
-const SlideshowPaginationItem = styled.button<{
-    $type: LibSlideshowPagination
-    $color: LibColorsHover
-}>`
-    padding: 0;
-    border: none;
-    transition: ${TRANSITIONS.SHORT};
-
-    ${({ $type, $color, theme }) => {
-        switch ($type) {
-            case "bars":
-                return css`
-                    flex-grow: 1;
-                    height: 4px;
-                    border-radius: ${RADIUSES.ROUND};
-                    background-color: ${Mixins.ColorsHoverHover($color, theme)};
-
-                    @media ${MEDIA.HOVER} {
-                        &:hover {
-                            background-color: ${Mixins.ColorsHoverDefault(
-                                $color,
-                                theme
-                            )};
-                        }
-
-                        &:active {
-                            background-color: ${Mixins.ColorsHoverActive(
-                                $color,
-                                theme
-                            )};
-                        }
-                    }
-
-                    &.Active {
-                        background-color: ${Mixins.ColorsHoverDefault(
-                            $color,
-                            theme
-                        )};
-
-                        @media ${MEDIA.HOVER} {
-                            &:hover {
-                                background-color: ${Mixins.ColorsHoverHover(
-                                    $color,
-                                    theme
-                                )};
-                            }
-                        }
-                    }
-                `
-            case "dots":
-                return css`
-                    width: ${DOT_SIZE}px;
-                    height: ${DOT_SIZE}px;
-                    border-radius: 50%;
-                    background-color: ${Mixins.ColorsHoverHover($color, theme)};
-
-                    @media ${MEDIA.HOVER} {
-                        &:hover {
-                            background-color: ${Mixins.ColorsHoverDefault(
-                                $color,
-                                theme
-                            )};
-                        }
-
-                        &:active {
-                            background-color: ${Mixins.ColorsHoverActive(
-                                $color,
-                                theme
-                            )};
-                        }
-                    }
-
-                    &.Active {
-                        background-color: ${Mixins.ColorsHoverDefault(
-                            $color,
-                            theme
-                        )};
-
-                        @media ${MEDIA.HOVER} {
-                            &:hover {
-                                background-color: ${Mixins.ColorsHoverHover(
-                                    $color,
-                                    theme
-                                )};
-                            }
-                        }
-                    }
-                `
-            case "dots-outline":
-                return css`
-                    width: ${DOT_SIZE}px;
-                    height: ${DOT_SIZE}px;
-                    border-radius: 50%;
-                    background-color: transparent;
-                    border: 1px solid
-                        ${Mixins.ColorsHoverDefault($color, theme)};
-
-                    @media ${MEDIA.HOVER} {
-                        &:hover {
-                            border-color: ${Mixins.ColorsHoverHover(
-                                $color,
-                                theme
-                            )};
-                        }
-
-                        &:active {
-                            border-color: ${Mixins.ColorsHoverActive(
-                                $color,
-                                theme
-                            )};
-                        }
-                    }
-
-                    &.Active {
-                        background-color: ${Mixins.ColorsHoverDefault(
-                            $color,
-                            theme
-                        )};
-
-                        @media ${MEDIA.HOVER} {
-                            &:hover {
-                                background-color: ${Mixins.ColorsHoverHover(
-                                    $color,
-                                    theme
-                                )};
-                            }
-
-                            &:active {
-                                background-color: ${Mixins.ColorsHoverActive(
-                                    $color,
-                                    theme
-                                )};
-                            }
-                        }
-                    }
-                `
-            default:
-                return null
-        }
-    }}
-`
-
-const THUMBNAIL_SIZE = 48
-
-const SlideshowThumbnail = styled.button`
-    width: ${THUMBNAIL_SIZE}px;
-    height: ${THUMBNAIL_SIZE}px;
-    padding: 0;
-    border: none;
-    opacity: 0.5;
-    transition: ${TRANSITIONS.SHORT};
-
-    @media ${MEDIA.HOVER} {
-        &:hover {
-            opacity: 0.8;
-        }
-
-        &:active {
-            opacity: 0.9;
-        }
-    }
-
-    &.Active {
-        opacity: 1;
-    }
-`
-
-setDefaultTheme([
-    StyledSlideshow,
-    SlideshowWrapper,
-    SlideshowContentWrapper,
-    SlideshowContent,
-    StyledSlideshowButton,
-    StyledSlideshowPagination,
-    SlideshowPaginationItem,
-    SlideshowThumbnail,
-])
-
-export {
-    StyledSlideshow,
-    SlideshowWrapper,
-    SlideshowContentWrapper,
-    SlideshowContent,
-    StyledSlideshowButton,
-    StyledSlideshowPagination,
-    SlideshowPaginationItem,
-    SlideshowThumbnail,
-}

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

@@ -1,22 +0,0 @@
-/*=============================================== Slideshow sub types ===============================================*/
-
-import type { LibSlideshowButtonPosition, DispatchState } from "../../types"
-import type { ILibSlideshow } from "./types"
-
-// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN THOSE COMPONENTS
-
-export interface ILibSlideshowButton
-    extends Pick<ILibSlideshow, "data-testid" | "className" | "controls"> {
-    position: LibSlideshowButtonPosition
-    onClick: () => void
-}
-
-export interface ILibSlideshowPagination
-    extends Pick<
-        ILibSlideshow,
-        "data-testid" | "className" | "pagination" | "images"
-    > {
-    setActive: DispatchState<number>
-    contentLength: number
-    activeSlide: number
-}

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

@@ -1,99 +0,0 @@
-/*=============================================== Slideshow types ===============================================*/
-
-import type { ReactNode } from "react"
-import type {
-    LibColorsHover,
-    LibComponentBase,
-    LibIcon,
-    LibSlideshowButtonSize,
-    LibSlideshowPagination,
-    LibSlideshowPaginationPosition,
-    CssObjectFit,
-} from "../../types"
-
-type PaginationWithThumbnails = {
-    type?: Extract<LibSlideshowPagination, "thumbnails">
-    position?: LibSlideshowPaginationPosition
-    hideOnTouch?: boolean
-    color?: never
-}
-
-type PaginationWithOther = {
-    type?: Exclude<LibSlideshowPagination, "thumbnails">
-    position?: LibSlideshowPaginationPosition
-    hideOnTouch?: boolean
-    color?: LibColorsHover
-}
-
-type Controls = {
-    "data-testid"?: string
-    className?: string
-    size?: LibSlideshowButtonSize
-    color?: LibColorsHover
-    hideOnTouch?: boolean
-    icons?: { prev?: LibIcon; next?: LibIcon }
-    iconsSizes?: { prev?: number; next?: number }
-    iconBaseUrl?: string
-    labelPrev?: string
-    labelNext?: string
-}
-
-type Options = {
-    autoPlay?: number
-    speed?: number
-}
-
-interface ILibSlideshowBase extends LibComponentBase<HTMLDivElement> {
-    height?: string | number
-    imgFit?: CssObjectFit
-    /**
-     * @type Controls
-     * @type boolean or object
-     * @prop data-testid?: string
-     * @prop className?: string
-     * @prop size?: LibSlideshowButtonSize
-     * @prop color?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
-     * @prop hideOnTouch?: boolean
-     * @prop iconPrev?: string | JSX.Element
-     * @prop iconNext?: string | JSX.Element
-     * @prop iconPrevSize?: number
-     * @prop iconNextSize?: number
-     * @prop labelPrev?: string
-     * @prop labelNext?: string
-     */
-    controls?: boolean | Controls
-    /**
-     * @type Options
-     * @prop autoPlay?: number
-     * @prop speed?: number
-     */
-    options?: Options
-}
-
-interface SlideshowWithChildren extends ILibSlideshowBase {
-    images?: never
-    children?: Array<ReactNode>
-    /**
-     * @type PaginationWithOther
-     * @type boolean or object
-     * @prop type?: "dots" | "dots-outline" | "bars"
-     * @prop position?: "inside" | "outside"
-     * @prop hideOnTouch?: boolean
-     * @prop color?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
-     */
-    pagination?: boolean | PaginationWithOther
-}
-
-interface SlideshowWithImages extends ILibSlideshowBase {
-    images: Array<string>
-    children?: never
-    /**
-     * @type PaginationWithThumbnails
-     * @prop type?: "dots" | "dots-outline" | "bars" | "thumbnails"
-     * @prop position?: "inside" | "outside"
-     * @prop hideOnTouch?: boolean
-     */
-    pagination?: boolean | PaginationWithThumbnails
-}
-
-export type ILibSlideshow = SlideshowWithImages | SlideshowWithChildren

package/dist/lib/components/SrOnly/SrOnly.tsx

@@ -1,23 +0,0 @@
-/*=============================================== SrOnly component ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledSrOnly } from "./styles"
-import type { ILibSrOnly } from "./types"
-
-/**
- * @description Returns a component only for ScreenReaders
- * @link https://documentation-components-react.vercel.app/components/sr-only
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- */
-export const SrOnly = forwardRef<HTMLDivElement, ILibSrOnly>(
-    ({ "data-testid": testid, as, children, ...rest }, ref) => {
-        return (
-            <StyledSrOnly data-testid={testid} ref={ref} as={as} {...rest}>
-                {children}
-            </StyledSrOnly>
-        )
-    }
-)

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

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

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

@@ -1,21 +0,0 @@
-/*=============================================== SrOnly styles ===============================================*/
-
-import styled from "styled-components"
-import { setDefaultTheme } from "../../"
-
-const StyledSrOnly = styled.div`
-    border: 0 !important;
-    clip: rect(1px, 1px, 1px, 1px) !important;
-    clip-path: inset(50%) !important;
-    height: 1px !important;
-    margin: -1px !important;
-    overflow: hidden !important;
-    padding: 0 !important;
-    position: absolute !important;
-    width: 1px !important;
-    white-space: nowrap !important;
-`
-
-setDefaultTheme([StyledSrOnly])
-
-export { StyledSrOnly }

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

@@ -1,5 +0,0 @@
-/*=============================================== SrOnly types ===============================================*/
-
-import type { LibComponentBase } from "../../types"
-
-export interface ILibSrOnly extends LibComponentBase<HTMLDivElement> {}

package/dist/lib/components/Stepper/Step.tsx

@@ -1,118 +0,0 @@
-/*=============================================== Step ===============================================*/
-
-import { forwardRef, type ElementType } from "react"
-import { Link } from "react-router-dom"
-import classNames from "classnames"
-import { Text } from "../../"
-import { LibIcon } from "../LibIcon"
-import { CheckCircle } from "../../icons"
-import { StyledStep, NumberContainer } from "./styles"
-import type { ILibStep } from "./types"
-
-/**
- * @description Returns a Step component
- * @link https://documentation-components-react.vercel.app/components/stepper
- * @extends HTMLSpanElement & LibButtonLinkBlank
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLSpanElement>
- * @prop direction?: "column" | "row"
- * @prop accentColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- * @prop isActive?: boolean
- * @prop isDone?: boolean
- * @prop iconActive?: string | JSX.Element
- * @prop iconActiveSize?: number
- * @prop number?: number
- * @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
- */
-export const Step = forwardRef<HTMLSpanElement, ILibStep>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            className,
-            direction = "row",
-            accentColor = "primary",
-            isActive,
-            isDone,
-            iconActiveSize = 16,
-            iconActive = (
-                <CheckCircle
-                    data-testid={testid && `${testid}.NumberContainer.Icon`}
-                    className={className && "Icon"}
-                    size={iconActiveSize}
-                />
-            ),
-            iconBaseUrl,
-            number,
-            to,
-            href,
-            blank,
-            onClick,
-            ...rest
-        },
-        ref
-    ) => {
-        const getAs: ElementType = as
-            ? as
-            : to
-            ? Link
-            : onClick
-            ? "button"
-            : href
-            ? "a"
-            : "span"
-
-        const isLink: boolean = !!(to || href || onClick)
-
-        return (
-            <StyledStep
-                data-testid={testid}
-                className={classNames(className, { StepLink: isLink })}
-                ref={ref}
-                as={getAs}
-                to={to}
-                onClick={onClick}
-                href={href}
-                target={blank ? "blank" : null}
-                rel={blank ? "noreferrer noopener" : null}
-                $direction={direction}
-                $accentColor={accentColor}
-                {...rest}
-            >
-                <NumberContainer
-                    data-testid={testid && `${testid}.NumberContainer`}
-                    className={classNames(
-                        { NumberContainer: className },
-                        { Active: isActive }
-                    )}
-                    $accentColor={accentColor}
-                >
-                    {isActive && isDone ? (
-                        <LibIcon
-                            icon={iconActive}
-                            size={iconActiveSize}
-                            baseUrl={iconBaseUrl}
-                        />
-                    ) : (
-                        number
-                    )}
-                </NumberContainer>
-
-                <Text
-                    tag="small"
-                    data-testid={testid && `${testid}.Text`}
-                    className={className && "Text"}
-                >
-                    {children}
-                </Text>
-            </StyledStep>
-        )
-    }
-)