@julseb-lib/react 0.0.51 → 0.0.52

package/src/lib/components/InputCheck/styles.tsx

@@ -1,284 +0,0 @@
-/*=============================================== InputCheck styles ===============================================*/
-
-import styled, { css } from "styled-components"
-import {
-    MEDIA,
-    FONT_SIZES,
-    LINE_HEIGHTS,
-    Mixins,
-    RADIUSES,
-    SPACERS,
-    TRANSITIONS,
-    setDefaultTheme,
-} from "../../"
-import type { LibValidationStatus, LibInputCheckVariant } from "../../types"
-
-const CheckContainer = styled.span<{
-    $validationStatus: LibValidationStatus
-    $disabled: boolean | undefined
-}>`
-    height: calc(${FONT_SIZES.BODY} * ${LINE_HEIGHTS.BODY});
-    ${Mixins.Flexbox({
-        $alignItems: "center",
-        $justifyContent: "center",
-    })}
-    color: ${({ theme, $disabled, $validationStatus }) => {
-        if ($disabled) return theme.GRAY_500
-        if ($validationStatus === false) return theme.DANGER_500
-        return theme.PRIMARY_500
-    }}
-`
-
-const CHECK_SIZE = 16
-
-const Radio = styled.span`
-    width: ${CHECK_SIZE}px;
-    height: ${CHECK_SIZE}px;
-    border-radius: ${RADIUSES.CIRCLE};
-    border: 2px solid currentColor;
-    position: relative;
-
-    &:after {
-        content: "";
-        position: absolute;
-        width: 8px;
-        height: 8px;
-        background-color: currentColor;
-        border-radius: ${RADIUSES.CIRCLE};
-        top: 2px;
-        left: 2px;
-        opacity: 0;
-        transition: ${TRANSITIONS.SHORT};
-    }
-`
-
-const Checkbox = styled.span`
-    width: ${CHECK_SIZE}px;
-    height: ${CHECK_SIZE}px;
-    border: 2px solid currentColor;
-    border-radius: ${RADIUSES.S};
-    transition: ${TRANSITIONS.SHORT};
-    ${Mixins.Flexbox({
-        $alignItems: "center",
-        $justifyContent: "center",
-    })}
-
-    & > * {
-        opacity: 0;
-        transition: ${TRANSITIONS.SHORT};
-        color: ${({ theme }) => theme.BACKGROUND};
-    }
-`
-
-const Toggle = styled.span`
-    width: 24px;
-    height: 16px;
-    border: 2px solid currentColor;
-    border-radius: ${RADIUSES.ROUND};
-    position: relative;
-    transition: ${TRANSITIONS.SHORT};
-
-    &:after {
-        content: "";
-        width: 8px;
-        height: 8px;
-        background-color: currentColor;
-        border-radius: ${RADIUSES.CIRCLE};
-        position: absolute;
-        top: 2px;
-        left: 2px;
-        transition: ${TRANSITIONS.SHORT};
-    }
-`
-
-const StyledText = styled.span`
-    font-size: ${FONT_SIZES.BODY};
-    line-height: ${LINE_HEIGHTS.BODY};
-`
-
-const StyledInput = styled.input`
-    display: none;
-`
-
-const StyledInputCheck = styled.label<{
-    $variant: LibInputCheckVariant | undefined
-    $disabled: boolean | undefined
-    $validationStatus: LibValidationStatus
-}>`
-    cursor: ${({ $disabled }) => ($disabled ? "not-allowed" : "pointer")};
-    ${Mixins.Flexbox({
-        $gap: "xxs",
-        $inline: true,
-    })}
-
-    ${({ theme, $variant, $disabled, $validationStatus }) =>
-        $variant === "tile"
-            ? css`
-                  width: 100%;
-                  background-color: ${theme.BACKGROUND};
-                  border: 1px solid ${theme.GRAY_200};
-                  padding: ${SPACERS.S};
-                  border-radius: ${RADIUSES.M};
-                  transition: ${TRANSITIONS.SHORT};
-
-                  ${!$disabled &&
-                  css`
-                      @media ${MEDIA.HOVER} {
-                          &:hover {
-                              border-color: ${Mixins.ColorsHoverHover(
-                                  $validationStatus === false
-                                      ? "danger"
-                                      : "primary",
-                                  theme
-                              )};
-                          }
-
-                          &:active {
-                              border-color: ${Mixins.ColorsHoverActive(
-                                  $validationStatus === false
-                                      ? "danger"
-                                      : "primary",
-                                  theme
-                              )};
-                          }
-                      }
-                  `}
-              `
-            : $variant === "selector" &&
-              css`
-                  background-color: ${$disabled
-                      ? theme.GRAY_50
-                      : $validationStatus === false
-                      ? theme.DANGER_50
-                      : theme.GRAY_100};
-                  padding: ${SPACERS.XXS} ${SPACERS.M};
-                  border-radius: ${RADIUSES.ROUND};
-                  transition: ${TRANSITIONS.SHORT};
-                  color: ${$disabled && theme.GRAY_500};
-
-                  ${!$disabled &&
-                  css`
-                      @media ${MEDIA.HOVER} {
-                          &:hover {
-                              background-color: ${Mixins.ColorsHoverHover(
-                                  $validationStatus === false
-                                      ? "danger"
-                                      : "primary",
-                                  theme
-                              )};
-                          }
-
-                          &:active {
-                              background-color: ${Mixins.ColorsHoverActive(
-                                  $validationStatus === false
-                                      ? "danger"
-                                      : "primary",
-                                  theme
-                              )};
-                          }
-                      }
-                  `}
-              `}
-
-    &:has(input:checked) {
-        ${Radio}:after {
-            opacity: 1;
-        }
-
-        ${Checkbox} {
-            background-color: ${({ theme, $validationStatus, $disabled }) =>
-                $disabled
-                    ? theme.GRAY_500
-                    : $validationStatus === false
-                    ? theme.DANGER_500
-                    : theme.PRIMARY_500};
-
-            & > * {
-                opacity: 1;
-            }
-        }
-
-        ${Toggle} {
-            border-color: ${({ $validationStatus, $disabled, theme }) =>
-                $disabled
-                    ? theme.GRAY_100
-                    : $validationStatus === false
-                    ? theme.DANGER_500
-                    : theme.SUCCESS_500};
-            background-color: ${({ $validationStatus, $disabled, theme }) =>
-                $disabled
-                    ? theme.GRAY_100
-                    : $validationStatus === false
-                    ? theme.DANGER_500
-                    : theme.SUCCESS_500};
-
-            &:after {
-                background-color: ${({ theme, $disabled }) =>
-                    $disabled ? theme.GRAY_500 : theme.BACKGROUND};
-                transform: translateX(8px);
-            }
-        }
-
-        ${({ theme, $variant, $validationStatus, $disabled }) =>
-            $variant === "tile"
-                ? css`
-                      border-color: ${$disabled
-                          ? theme.GRAY_500
-                          : $validationStatus === false
-                          ? theme.DANGER_500
-                          : theme.PRIMARY_500};
-                  `
-                : $variant === "selector" &&
-                  css`
-                      background-color: ${$disabled
-                          ? theme.GRAY_100
-                          : $validationStatus === false
-                          ? theme.DANGER_500
-                          : theme.PRIMARY_500};
-                      color: ${!$disabled && theme.BACKGROUND};
-
-                      ${!$disabled &&
-                      css`
-                          @media ${MEDIA.HOVER} {
-                              &:hover {
-                                  background-color: ${Mixins.ColorsHoverHover(
-                                      $validationStatus === false
-                                          ? "danger"
-                                          : "primary",
-                                      theme
-                                  )};
-                              }
-
-                              &:active {
-                                  background-color: ${Mixins.ColorsHoverActive(
-                                      $validationStatus === false
-                                          ? "danger"
-                                          : "primary",
-                                      theme
-                                  )};
-                              }
-                          }
-                      `}
-                  `}
-    }
-`
-
-setDefaultTheme([
-    StyledInputCheck,
-    CheckContainer,
-    Radio,
-    Checkbox,
-    Toggle,
-    StyledText,
-    StyledInput,
-])
-
-export {
-    StyledInputCheck,
-    CheckContainer,
-    Radio,
-    Checkbox,
-    Toggle,
-    StyledText,
-    StyledInput,
-}

package/src/lib/components/InputCheck/types.ts

@@ -1,35 +0,0 @@
-/*=============================================== InputCheck types ===============================================*/
-
-import type { CSSProperties, InputHTMLAttributes } from "react"
-import type {
-    LibIcon,
-    LibValidationStatus,
-    LibInputCheckVariant,
-    ReactChildren,
-} from "../../types"
-
-interface ILibInputCheckBase extends InputHTMLAttributes<HTMLInputElement> {
-    "data-testid"?: string
-    id: string
-    label: ReactChildren
-    children?: never
-    validation?: LibValidationStatus
-    variant?: LibInputCheckVariant
-    containerStyle?: CSSProperties
-}
-
-interface InputCheckbox extends ILibInputCheckBase {
-    type?: "checkbox"
-    iconCheck?: LibIcon
-    iconCheckSize?: number
-    iconBaseUrl?: string
-}
-
-interface InputRadio extends ILibInputCheckBase {
-    type?: "radio"
-    iconCheck?: never
-    iconCheckSize?: never
-    iconBaseUrl?: never
-}
-
-export type ILibInputCheck = InputCheckbox | InputRadio

package/src/lib/components/InputComponents/components/InputAndListContainer.tsx

@@ -1,51 +0,0 @@
-/*=============================================== InputAndListContainer component ===============================================*/
-
-import { forwardRef } from "react"
-import classNames from "classnames"
-import { StyledInputAndListContainer } from "../styles"
-import type { ILibInputAndListContainer } from "../types"
-
-/**
- * @description Returns a container for Input and List
- * @access Only for building library, do not export
- * @prop data-testid: string | undefined
- * @prop className: string | undefined
- * @prop hasListOpen: boolean
- * @prop isParent: boolean | undefined
- * @prop inputAndListContainerStyle: CSSProperties | undefined
- * @prop children?: ReactChildren
- */
-export const InputAndListContainer = forwardRef<
-    HTMLDivElement,
-    ILibInputAndListContainer
->(
-    (
-        {
-            "data-testid": testid,
-            className,
-            children,
-            hasListOpen,
-            isParent,
-            inputAndListContainerStyle,
-        },
-        ref
-    ) => {
-        return (
-            <StyledInputAndListContainer
-                data-testid={
-                    testid &&
-                    (isParent ? testid : `${testid}.InputAndListContainer`)
-                }
-                className={classNames(
-                    { InputAndListContainer: className && !isParent },
-                    { Open: hasListOpen },
-                    isParent && className
-                )}
-                ref={ref}
-                style={inputAndListContainerStyle}
-            >
-                {children}
-            </StyledInputAndListContainer>
-        )
-    }
-)

package/src/lib/components/InputComponents/components/InputButton.tsx

@@ -1,62 +0,0 @@
-/*=============================================== InputButton component ===============================================*/
-
-import { LibIcon } from "../../LibIcon"
-import { StyledInputButton } from "../styles"
-import type { ILibInputButton } from "../types"
-
-/**
- * @description Returns a button used on the right of an input
- * @access Only for building library, do not export
- * @prop data-testid: string | undefined
- * @prop icon: string | JSX.Element | undefined => only if text is not defined, required when text is not defined
- * @prop iconSize: number | undefined => only if icon is defined
- * @prop iconBaseUrl: string | undefined => only if icon is defined
- * @prop text: string | undefined => only if icon is not defined, required when icon is not defined
- * @prop aria-label: string | undefined
- * @prop onClick?: MouseEventHandler<HTMLButtonElement>
- * @prop disabled: boolean | undefined
- * @prop inputBackground: "light" | "dark" | undefined
- * @prop validationStatus: boolean | undefined | undefined
- * @prop className: string | undefined
- */
-export const InputButton = ({
-    "data-testid": testid,
-    "aria-label": ariaLabel,
-    onClick,
-    icon,
-    iconSize = 16,
-    iconBaseUrl,
-    text,
-    disabled,
-    inputBackground,
-    validationStatus,
-    className,
-}: ILibInputButton) => {
-    return (
-        <StyledInputButton
-            aria-label={ariaLabel}
-            data-testid={testid && `${testid}.Button`}
-            className={className && "InputButton"}
-            onClick={onClick}
-            disabled={disabled}
-            as={onClick ? "button" : "span"}
-            type="button"
-            $inputBackground={inputBackground}
-            $validationStatus={validationStatus}
-            $isSpan={!onClick}
-            $disabled={disabled}
-        >
-            {icon ? (
-                <LibIcon
-                    icon={icon}
-                    size={iconSize}
-                    data-testid={testid && `${testid}.Button.Icon`}
-                    className={className && "Icon"}
-                    baseUrl={iconBaseUrl}
-                />
-            ) : (
-                text
-            )}
-        </StyledInputButton>
-    )
-}

package/src/lib/components/InputComponents/components/InputContainer.tsx

@@ -1,70 +0,0 @@
-/*=============================================== InputContainer component ===============================================*/
-
-import { InputContainer as Container } from "../../InputContainer"
-import type { ILibInputContainer } from "../../InputContainer/types"
-
-/**
- * @description Returns a input container, with label, helper, helper bottom, counter and validation
- * @access Only for building library, do not export
- * @prop data-testid: string | undefined
- * @prop className: string | undefined
- * @prop label: string | undefined
- * @prop labelComment: string | undefined
- * @prop helper: string | undefined
- * @prop helperBottom: string | { text: string; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number } | undefined
- * @prop children?: ReactChildren
- * @prop value: any | undefined
- * @prop counter: boolean | undefined
- * @prop maxLength: number | undefined
- * @prop hasListOpen: boolean | undefined
- * @prop style: CSSProperties | undefined
- * @prop iconBaseUrl: string | undefined
- */
-export const InputContainer = ({
-    "data-testid": testid,
-    id,
-    label,
-    labelComment,
-    helper,
-    helperBottom,
-    validation,
-    counter,
-    maxLength,
-    children,
-    value,
-    className,
-    hasListOpen,
-    iconBaseUrl,
-    style,
-}: ILibInputContainer) => {
-    if (
-        !label &&
-        !labelComment &&
-        !helper &&
-        !helperBottom &&
-        !validation &&
-        !counter
-    )
-        return children
-
-    return (
-        <Container
-            data-testid={testid}
-            id={id}
-            label={label}
-            labelComment={labelComment}
-            helper={helper}
-            helperBottom={helperBottom}
-            validation={validation}
-            counter={counter}
-            maxLength={maxLength}
-            value={value}
-            className={className}
-            hasListOpen={hasListOpen}
-            iconBaseUrl={iconBaseUrl}
-            style={style}
-        >
-            {children}
-        </Container>
-    )
-}

package/src/lib/components/InputComponents/components/InputIcon.tsx

@@ -1,51 +0,0 @@
-/*=============================================== InputIconComponent ===============================================*/
-
-import { LibIcon } from "../../LibIcon"
-import { StyledInputIconContainer } from "../styles"
-import type { ILibInputIconContainer } from "../types"
-
-/**
- * @description Returns a icon located on the left of an input
- * @access Only for building library, do not export
- * @prop data-testid: string | undefined
- * @prop className: string | undefined
- * @prop icon: string | JSX.Element | undefined
- * @prop iconSize: number | undefined
- * @prop iconBaseUrl: string | undefined
- * @prop validationStatus: boolean | undefined
- * @prop disabled: boolean | undefined
- * @prop inputBackground: "light" | "dark" | undefined
- * @prop inputVariant: "rounded" | "pill" | undefined
- */
-export const InputIcon = ({
-    "data-testid": testid,
-    className,
-    icon,
-    iconSize = 24,
-    iconBaseUrl,
-    validationStatus,
-    inputBackground,
-    disabled,
-    inputVariant,
-}: ILibInputIconContainer) => {
-    if (!icon) return null
-
-    return (
-        <StyledInputIconContainer
-            data-testid={testid && `${testid}.IconContainer`}
-            className={className && "IconContainerLeft"}
-            $disabled={disabled}
-            $inputBackground={inputBackground}
-            $inputVariant={inputVariant}
-            $validationStatus={validationStatus}
-        >
-            <LibIcon
-                data-testid={testid && `${testid}.IconContainer.Icon`}
-                className={className && "IconLeft"}
-                icon={icon}
-                size={iconSize}
-                baseUrl={iconBaseUrl}
-            />
-        </StyledInputIconContainer>
-    )
-}

package/src/lib/components/InputComponents/components/InputLeftContainer.tsx

@@ -1,29 +0,0 @@
-/*=============================================== InputLeftContainer component ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledInputLeftContainer } from "../styles"
-import type { ILibInputLeftContainer } from "../types"
-
-/**
- * @description Returns a container on the left of an input
- * @access Only for building library, do not export
- * @prop data-testid: string | undefined
- * @prop className: string | undefined
- * @prop children?: ReactChildren
- * @prop disabled: boolean | undefined
- */
-export const InputLeftContainer = forwardRef<
-    HTMLSpanElement,
-    ILibInputLeftContainer
->(({ "data-testid": testid, className, children, disabled }, ref) => {
-    return (
-        <StyledInputLeftContainer
-            data-testid={testid && `${testid}.LeftContainer`}
-            ref={ref}
-            className={className && "LeftContainer"}
-            $disabled={disabled}
-        >
-            {children}
-        </StyledInputLeftContainer>
-    )
-})

package/src/lib/components/InputComponents/components/InputPrefix.tsx

@@ -1,31 +0,0 @@
-/*=============================================== InputPrefix component ===============================================*/
-
-import { StyledInputPrefix } from "../styles"
-import type { ILibInputPrefix } from "../types"
-
-/**
- * @description Returns a prefix on the left of an input
- * @access Only for building library, do not export
- * @prop data-testid: string | undefined
- * @prop className: string | undefined
- * @prop inputBackground: "light" | "dark" | undefined
- * @prop prefix: string | JSX.Element | undefined
- */
-export const InputPrefix = ({
-    "data-testid": testid,
-    className,
-    prefix,
-    inputBackground,
-}: ILibInputPrefix) => {
-    if (!prefix) return null
-
-    return (
-        <StyledInputPrefix
-            data-testid={testid && `${testid}.Prefix`}
-            className={className && "Prefix"}
-            $inputBackground={inputBackground}
-        >
-            {prefix}
-        </StyledInputPrefix>
-    )
-}

package/src/lib/components/InputComponents/components/InputRightContainer.tsx

@@ -1,35 +0,0 @@
-/*=============================================== InputRightContainer component ===============================================*/
-
-import { StyledInputRightContainer } from "../styles"
-import type { ILibInputRightContainer } from "../types"
-
-/**
- * @description Returns a container on the right of an input
- * @access Only for building library, do not export
- * @prop data-testid: string | undefined
- * @prop className: string | undefined
- * @prop disabled: boolean | undefined
- * @prop withPadding: boolean | undefined
- * @prop withBorder: boolean | undefined
- * @prop children?: ReactChildren
- */
-export const InputRightContainer = ({
-    "data-testid": testid,
-    className,
-    children,
-    disabled,
-    withPadding,
-    withBorder,
-}: ILibInputRightContainer) => {
-    return (
-        <StyledInputRightContainer
-            data-testid={testid && `${testid}.RightContainer`}
-            className={className && "RightContainer"}
-            $disabled={disabled}
-            $withPadding={withPadding}
-            $withBorder={withBorder}
-        >
-            {children}
-        </StyledInputRightContainer>
-    )
-}

package/src/lib/components/InputComponents/components/InputSuffix.tsx

@@ -1,31 +0,0 @@
-/*=============================================== InputSuffix component ===============================================*/
-
-import { StyledInputSuffix } from "../styles"
-import type { ILibInputSuffix } from "../types"
-
-/**
- * @description Add suffix on inputs with text
- * @access Only for building library, do not export
- * @prop data-testid: string | undefined
- * @prop className: string | undefined
- * @prop inputBackground: "light" | "dark" | undefined
- * @prop prefix: string | JSX.Element | undefined
- */
-export const InputSuffix = ({
-    "data-testid": testid,
-    className,
-    suffix,
-    inputBackground,
-}: ILibInputSuffix) => {
-    if (!suffix) return null
-
-    return (
-        <StyledInputSuffix
-            data-testid={testid && `${testid}.Suffix`}
-            className={className && "Suffix"}
-            $inputBackground={inputBackground}
-        >
-            {suffix}
-        </StyledInputSuffix>
-    )
-}