@julseb-lib/react 0.1.3 → 0.1.5

package/dist/lib/components/Input/templates/TimeInput.tsx

@@ -1,117 +0,0 @@
-import { useCallback, useRef, type FC } from "react"
-import { useMergeRefs } from "../../.."
-import {
-    InputIcon,
-    InputRightContainer,
-    InputButton,
-    InputValidationIcon,
-    InputPrefix,
-    InputLeftContainer,
-} from "../../InputComponents"
-import { Clock } from "../../../icons"
-import { StyledInput } from "../styles"
-import type { ILibTimeInput } from "../subtypes"
-
-export const TimeInput: FC<ILibTimeInput> = ({
-    "data-testid": testid,
-    id,
-    ref,
-    label,
-    helper,
-    helperBottom,
-    validation,
-    inputBackground,
-    inputVariant = "rounded",
-    className,
-    disabled,
-    iconClockSize = 16,
-    iconClock = (
-        <Clock
-            data-testid={testid && `${testid}.Button.Icon`}
-            className={className && "Icon"}
-            size={iconClockSize}
-        />
-    ),
-    icon,
-    iconSize,
-    iconBaseUrl,
-    prefix,
-    ...rest
-}) => {
-    const inputRef = useRef<HTMLInputElement>(null)
-    const showPicker = useCallback(() => inputRef?.current?.showPicker(), [])
-
-    return (
-        <>
-            {(prefix || icon) && (
-                <InputLeftContainer
-                    data-testid={testid}
-                    className={className}
-                    disabled={disabled}
-                >
-                    <InputPrefix
-                        data-testid={testid}
-                        className={className}
-                        prefix={prefix}
-                        inputBackground={inputBackground}
-                    />
-
-                    <InputIcon
-                        data-testid={testid}
-                        className={className}
-                        icon={icon}
-                        iconSize={iconSize}
-                        validationStatus={validation?.status}
-                        disabled={disabled}
-                        inputBackground={inputBackground}
-                        inputVariant={inputVariant}
-                        iconBaseUrl={iconBaseUrl}
-                    />
-                </InputLeftContainer>
-            )}
-
-            <StyledInput
-                data-testid={testid && `${testid}.Input`}
-                id={id}
-                className={className && "Input"}
-                ref={useMergeRefs([ref, inputRef])}
-                disabled={disabled}
-                $inputBackground={inputBackground}
-                $inputVariant={inputVariant}
-                $disabled={disabled}
-                $validationStatus={validation?.status}
-                {...rest}
-            />
-
-            <InputRightContainer
-                data-testid={testid}
-                className={className}
-                disabled={disabled}
-                withPadding
-                withBorder={false}
-            >
-                <InputButton
-                    data-testid={testid}
-                    className={className}
-                    icon={iconClock}
-                    iconSize={iconClockSize}
-                    inputBackground={inputBackground}
-                    disabled={disabled}
-                    aria-label="Clock"
-                    onClick={showPicker}
-                    validationStatus={validation?.status}
-                    iconBaseUrl={iconBaseUrl}
-                />
-
-                {validation && (
-                    <InputValidationIcon
-                        data-testid={testid}
-                        className={className}
-                        validation={validation}
-                        inputBackground={inputBackground}
-                    />
-                )}
-            </InputRightContainer>
-        </>
-    )
-}

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

@@ -1,22 +0,0 @@
-import type {
-    ILibColorInput,
-    ILibDateInput,
-    ILibFileInput,
-    ILibPasswordInput,
-    ILibSearchInput,
-    ILibSelectInput,
-    ILibTextareaInput,
-    ILibTextInput,
-    ILibTimeInput,
-} from "./subtypes"
-
-export type ILibInput =
-    | ILibColorInput
-    | ILibDateInput
-    | ILibFileInput
-    | ILibPasswordInput
-    | ILibSearchInput
-    | ILibSelectInput
-    | ILibTextareaInput
-    | ILibTextInput
-    | ILibTimeInput

package/dist/lib/components/InputCheck/InputCheck.tsx

@@ -1,145 +0,0 @@
-import type { FC } from "react"
-import classNames from "classnames"
-import { capitalize } from "@julseb-lib/utils"
-import { LibIcon } from "../LibIcon"
-import { Check } from "../../icons"
-import {
-    StyledInputCheck,
-    CheckContainer,
-    Radio,
-    Checkbox,
-    Toggle,
-    StyledText,
-    StyledInput,
-} from "./styles"
-import type { ILibInputCheck } from "./types"
-
-/**
- * InputCheck component for rendering a checkbox or radio input with flexible variants, icons, and validation.
- *
- * @component
- * @extends HTMLInputElement
- * @param {Object} props - InputCheck props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ForwardedRef<HTMLInputElement>} [props.ref] - Ref forwarded to the input element.
- * @param {string} props.id - Input id.
- * @param {ReactNode} props.label - Label for the input.
- * @param {boolean} [props.validation] - Validation status.
- * @param {"tile" | "toggle" | "selector"} [props.variant] - Visual variant of the input.
- * @param {CSSProperties} [props.containerStyle] - Style for the input container.
- * @param {"checkbox" | "radio"} [props.type="checkbox"] - Input type.
- * @param {string | JSX.Element} [props.iconCheck] - Icon for the checkbox (only if type is checkbox).
- * @param {number} [props.iconCheckSize=14] - Size of the checkbox icon (only if type is checkbox).
- * @param {string} [props.iconBaseUrl] - Base URL for the icon (only if type is checkbox).
- * @param {boolean} [props.disabled] - Disable the input.
- * @param {string} [props.className] - Additional class names.
- * @param {any} [props.rest] - Additional props passed to the input.
- * @returns {JSX.Element} The rendered InputCheck component.
- *
- * @see https://documentation-components-react.vercel.app/components/input-check
- * @example
- * <InputCheck
- *   id="accept"
- *   label="Accept terms"
- *   type="checkbox"
- *   variant="tile"
- *   validation={true}
- * />
- */
-export const InputCheck: FC<ILibInputCheck> = ({
-    "data-testid": testid,
-    ref,
-    type = "checkbox",
-    className,
-    validation,
-    id,
-    variant,
-    label,
-    iconCheckSize = 14,
-    iconCheck = (
-        <Check
-            size={iconCheckSize}
-            data-testid={testid && `${testid}.CheckContainer.Checkbox.Icon`}
-            className={className && "Icon"}
-        />
-    ),
-    iconBaseUrl,
-    disabled,
-    containerStyle,
-    ...rest
-}) => {
-    return (
-        <StyledInputCheck
-            data-testid={testid}
-            className={
-                className &&
-                classNames(className, variant && capitalize(variant))
-            }
-            htmlFor={id}
-            style={containerStyle}
-            $variant={variant}
-            $disabled={disabled}
-            $validationStatus={validation}
-        >
-            <StyledInput
-                data-testid={testid && `${testid}.Input`}
-                className={className && "Input"}
-                ref={ref}
-                type={type}
-                id={id}
-                disabled={disabled}
-                {...rest}
-            />
-
-            {variant !== "selector" && (
-                <CheckContainer
-                    data-testid={testid && `${testid}.CheckContainer`}
-                    className={className && "CheckContainer"}
-                    $validationStatus={validation}
-                    $disabled={disabled}
-                >
-                    {variant === "toggle" ? (
-                        <Toggle
-                            data-testid={
-                                testid && `${testid}.CheckContainer.Toggle`
-                            }
-                            className={className && "Toggle"}
-                        />
-                    ) : type === "radio" ? (
-                        <Radio
-                            data-testid={
-                                testid && `${testid}.CheckContainer.Radio`
-                            }
-                            className={className && "Radio"}
-                        />
-                    ) : (
-                        <Checkbox
-                            data-testid={
-                                testid && `${testid}.CheckContainer.Checkbox`
-                            }
-                            className={className && "Checkbox"}
-                        >
-                            <LibIcon
-                                data-testid={
-                                    testid &&
-                                    `${testid}.CheckContainer.Checkbox.Icon`
-                                }
-                                className={className && "CheckIcon"}
-                                icon={iconCheck}
-                                size={iconCheckSize}
-                                baseUrl={iconBaseUrl}
-                            />
-                        </Checkbox>
-                    )}
-                </CheckContainer>
-            )}
-
-            <StyledText
-                data-testid={testid && `${testid}.Text`}
-                className={className && "Text"}
-            >
-                {label}
-            </StyledText>
-        </StyledInputCheck>
-    )
-}

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

@@ -1,282 +0,0 @@
-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/dist/lib/components/InputCheck/types.ts

@@ -1,34 +0,0 @@
-import type { CSSProperties, InputHTMLAttributes, Ref } from "react"
-import type {
-    LibIcon,
-    LibValidationStatus,
-    LibInputCheckVariant,
-    ReactChildren,
-} from "../../types"
-
-interface ILibInputCheckBase extends InputHTMLAttributes<HTMLInputElement> {
-    "data-testid"?: string
-    ref?: Ref<HTMLInputElement>
-    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/dist/lib/components/InputComponents/components/InputAndListContainer.tsx

@@ -1,42 +0,0 @@
-import type { FC } 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: FC<ILibInputAndListContainer> = ({
-    "data-testid": testid,
-    ref,
-    className,
-    children,
-    hasListOpen,
-    isParent,
-    inputAndListContainerStyle,
-}) => {
-    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/dist/lib/components/InputComponents/components/InputButton.tsx

@@ -1,61 +0,0 @@
-import type { FC } from "react"
-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: FC<ILibInputButton> = ({
-    "data-testid": testid,
-    "aria-label": ariaLabel,
-    onClick,
-    icon,
-    iconSize = 16,
-    iconBaseUrl,
-    text,
-    disabled,
-    inputBackground,
-    validationStatus,
-    className,
-}) => {
-    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>
-    )
-}