@julseb-lib/react 0.1.2 → 0.1.4

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

@@ -1,216 +0,0 @@
-import styled, { css } from "styled-components"
-import {
-	FONT_FAMILIES,
-	FONT_SIZES,
-	Mixins,
-	SPACERS,
-	TRANSITIONS,
-	setDefaultTheme,
-	COLORS_LIGHT,
-	COLORS_DARK,
-} from "../../"
-import type { LibInputBackground, LibValidationStatus } from "../../types"
-import { InputBaseMixin, type ILibInputBaseMixin } from "../ComponentsMixins"
-
-const StyledInputPhone = styled.input<ILibInputBaseMixin>`
-	${InputBaseMixin}
-`
-
-const CountryButton = styled.button<{
-	$inputBackground: LibInputBackground | undefined
-}>`
-	height: 100%;
-	background-color: transparent;
-	border-radius: 0;
-	border: none;
-	color: ${({ theme }) => theme.FONT};
-	${"" /* padding: 0 ${SPACERS.XS}; */}
-	width: calc(32px + ${SPACERS.XS} + ${SPACERS.XS});
-	${Mixins.Flexbox({
-		$alignItems: "center",
-		$justifyContent: "center",
-		$gap: "xxs",
-	})}
-
-	&:disabled {
-		color: ${({ theme }) => theme.GRAY_500};
-	}
-
-	${({ $inputBackground }) => {
-		switch ($inputBackground) {
-			case "light":
-				return css`
-					color: ${COLORS_LIGHT.FONT};
-
-					&:disabled {
-						color: ${COLORS_LIGHT.GRAY_500};
-					}
-				`
-			case "dark":
-				return css`
-					color: ${COLORS_DARK.FONT};
-
-					&:disabled {
-						color: ${COLORS_DARK.GRAY_500};
-					}
-				`
-			default:
-				return null
-		}
-	}}
-`
-
-const Flag = styled.img`
-	width: 16px;
-	object-fit: contain;
-`
-
-const CountryCode = styled.span<{
-	$inputBackground: LibInputBackground | undefined
-	$disabled: boolean | undefined
-}>`
-	height: 100%;
-	cursor: ${({ $disabled }) => ($disabled ? "not-allowed" : "default")};
-	color: ${({ theme }) => theme.FONT};
-	padding-right: ${SPACERS.XS};
-	${Mixins.Flexbox({
-		$alignItems: "center",
-	})}
-
-	${({ $disabled, theme }) =>
-		$disabled &&
-		css`
-			color: ${theme.GRAY_500};
-		`}
-
-    ${({ $inputBackground, $disabled }) => {
-		switch ($inputBackground) {
-			case "light":
-				return css`
-					color: ${$disabled
-						? COLORS_LIGHT.GRAY_500
-						: COLORS_LIGHT.FONT};
-				`
-			case "dark":
-				return css`
-					color: ${$disabled
-						? COLORS_DARK.GRAY_500
-						: COLORS_DARK.FONT};
-				`
-			default:
-				return null
-		}
-	}}
-`
-
-const SearchContainer = styled.div<{
-	$validationStatus: LibValidationStatus
-	$inputBackground: LibInputBackground | undefined
-}>`
-	color: ${({ theme, $validationStatus }) =>
-		$validationStatus === false ? theme.DANGER_500 : theme.PRIMARY_500};
-	border-bottom: 1px solid ${({ theme }) => theme.GRAY_200};
-	width: 100%;
-	padding-bottom: ${SPACERS.XS};
-	transition: ${TRANSITIONS.SHORT};
-	${Mixins.Flexbox({
-		$alignItems: "center",
-		$gap: "xs",
-	})}
-
-	&:has(input:focus) {
-		border-bottom-color: ${({ theme, $validationStatus }) =>
-			$validationStatus === false ? theme.DANGER_500 : theme.PRIMARY_500};
-	}
-
-	${({ $inputBackground, $validationStatus }) => {
-		switch ($inputBackground) {
-			case "light":
-				return css`
-					color: ${$validationStatus === false
-						? COLORS_LIGHT.DANGER_500
-						: COLORS_LIGHT.PRIMARY_500};
-					border-color: ${COLORS_LIGHT.GRAY_200};
-
-					&:has(input:focus) {
-						border-bottom-color: ${$validationStatus === false
-							? COLORS_LIGHT.DANGER_500
-							: COLORS_LIGHT.PRIMARY_500};
-					}
-				`
-			case "dark":
-				return css`
-					color: ${$validationStatus === false
-						? COLORS_DARK.DANGER_500
-						: COLORS_DARK.PRIMARY_500};
-					border-color: ${COLORS_DARK.GRAY_200};
-
-					&:has(input:focus) {
-						border-bottom-color: ${$validationStatus === false
-							? COLORS_DARK.DANGER_500
-							: COLORS_DARK.PRIMARY_500};
-					}
-				`
-			default:
-				return null
-		}
-	}}
-`
-
-const SearchInput = styled.input<{
-	$inputBackground: LibInputBackground | undefined
-}>`
-	border: none;
-	padding: 0;
-	font-family: ${FONT_FAMILIES.BODY};
-	font-size: ${FONT_SIZES.BODY};
-	color: ${({ theme }) => theme.FONT};
-	outline: none;
-	width: 100%;
-	background-color: transparent;
-
-	&::placeholder {
-		color: ${({ theme }) => theme.GRAY_400};
-	}
-
-	${({ $inputBackground }) => {
-		switch ($inputBackground) {
-			case "light":
-				return css`
-					color: ${COLORS_LIGHT.FONT};
-
-					&::placeholder {
-						color: ${COLORS_LIGHT.GRAY_400};
-					}
-				`
-			case "dark":
-				return css`
-					color: ${COLORS_DARK.FONT};
-
-					&::placeholder {
-						color: ${COLORS_DARK.GRAY_400};
-					}
-				`
-			default:
-				return null
-		}
-	}}
-`
-
-setDefaultTheme([
-	StyledInputPhone,
-	CountryButton,
-	SearchContainer,
-	SearchInput,
-	Flag,
-	CountryCode,
-])
-
-export {
-	StyledInputPhone,
-	CountryButton,
-	SearchContainer,
-	SearchInput,
-	Flag,
-	CountryCode,
-}

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

@@ -1,33 +0,0 @@
-import type { InputHTMLAttributes } from "react"
-import type {
-    CountryCode,
-    LibInputListDirection,
-    LibCountry,
-    LibIcon,
-    DispatchState,
-} from "../../types"
-import type {
-    ILibInputBase,
-    LibInputWithValidation,
-} from "../InputComponents/types"
-
-export type ILibInputPhone = InputHTMLAttributes<HTMLInputElement> &
-    ILibInputBase &
-    LibInputWithValidation & {
-        selectedCountry: LibCountry | undefined
-        setSelectedCountry: DispatchState<LibCountry | undefined>
-        defaultCountry?: CountryCode
-        type?: never
-        icons?: {
-            search?: LibIcon
-            caret?: LibIcon
-        }
-        iconSizes?: {
-            search?: number
-            caret?: number
-        }
-        searchPlaceholder?: string
-        listDirection?: LibInputListDirection
-        countryButtonAriaLabel?: string
-        textNoResult?: string
-    }

package/dist/lib/components/InputPin/InputPin.tsx

@@ -1,137 +0,0 @@
-import { createRef, useState, type ChangeEvent, type Ref, type FC } from "react"
-import { Flexbox } from "../../"
-import { InputContainer } from "../InputComponents"
-import { StyledInputPin } from "./styles"
-import type { ILibInputPin } from "./types"
-
-/**
- * InputPin component for rendering a multi-field PIN or code input with flexible container, size, font, and validation options.
- *
- * @component
- * @extends HTMLDivElement
- * @param {Object} props - InputPin props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- *  * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
- * @param {{ [n: number]: number | "" | undefined }} props.values - Current values for each PIN input.
- *  * @param {Dispatch<React.SetStateAction<{ [n: number]: number | "" | undefined }>>} props.setValues - Setter for the PIN values.
- * @param {Array<string>} [props.placeholders] - Placeholders for each input field.
- * @param {{ justifyContent?: CssJustifyContent; columnGap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" }} [props.container] - Flexbox container options.
- * @param {number} [props.inputSize=48] - Size of each input field.
- * @param {"display-h1" | "display-h2" | "display-h3" | "display-h4" | "display-h5" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body" | "small"} [props.inputFontSize="body"] - Font size for input fields.
- * @param {boolean} [props.hideValues] - Hide input values (show as password).
- * @param {boolean} [props.disabled] - Disable all input fields.
- * @param {string} [props.label] - Label for the input group.
- * @param {string} [props.labelComment] - Additional comment for the label.
- * @param {string} [props.helper] - Helper text above the input.
- * @param {string|Object} [props.helperBottom] - Helper text or element below the input.
- * @param {Object} [props.validation] - Validation status and message.
- * @param {string} [props.iconBaseUrl] - Base URL for icons.
- * @param {"light" | "dark"} [props.inputBackground] - Input background style.
- *  * @param {CSSProperties} [props.containerStyle] - Style for the input container.
- * @param {string} [props.className] - Additional class names.
- * @param {any} [props.rest] - Additional props passed to the Flexbox container.
- * @returns {JSX.Element} The rendered InputPin component.
- *
- * @see https://documentation-components-react.vercel.app/components/input-pin
- * @example
- * <InputPin
- *   values={{ 0: "", 1: "", 2: "", 3: "" }}
- *   setValues={setPinValues}
- *   label="Enter PIN"
- *   inputSize={40}
- *   hideValues
- * />
- */
-export const InputPin: FC<ILibInputPin> = ({
-    "data-testid": testid,
-    ref,
-    className,
-    values,
-    setValues,
-    placeholders,
-    container,
-    hideValues,
-    label,
-    labelComment,
-    id,
-    helper,
-    helperBottom,
-    validation,
-    inputBackground,
-    disabled,
-    inputSize = 48,
-    inputFontSize = "body",
-    containerStyle,
-    ...rest
-}) => {
-    const hasContainer: boolean = !!(
-        label ||
-        labelComment ||
-        helper ||
-        helperBottom ||
-        validation
-    )
-
-    const [inputsRefsArr] = useState<Array<Ref<HTMLInputElement>>>(() =>
-        Array.from({ length: Object.keys(values).length }, () => createRef())
-    )
-
-    const handleChange = (e: ChangeEvent<HTMLInputElement>, i: number) => {
-        setValues({ ...values, [e.target.id]: e.target.value })
-
-        if (i !== Object.keys(values).length - 1) {
-            // @ts-ignore
-            inputsRefsArr[i + 1]!.current.focus()
-        }
-    }
-
-    return (
-        <InputContainer
-            data-testid={testid}
-            className={className}
-            id={id}
-            label={label}
-            labelComment={labelComment}
-            helper={helper}
-            helperBottom={helperBottom}
-            validation={validation}
-            value={values}
-            counter={false}
-            maxLength={undefined}
-            style={containerStyle}
-            hasListOpen={undefined}
-            iconBaseUrl={undefined}
-        >
-            <Flexbox
-                data-testid={hasContainer ? `${testid}.FlexContainer` : testid}
-                ref={ref}
-                className={hasContainer ? "FlexContainer" : className}
-                justifyContent={container?.justifyContent ?? "center"}
-                columnGap={container?.columnGap ?? "xs"}
-                {...rest}
-            >
-                {inputsRefsArr.map((inputRef, i) => (
-                    <StyledInputPin
-                        key={i}
-                        data-testid={testid && `${testid}.Input`}
-                        className={className && "InputPin"}
-                        ref={inputRef}
-                        id={Object.keys(values)[i]}
-                        onChange={e => handleChange(e, i)}
-                        value={Object.values(values)[i]}
-                        placeholder={placeholders && placeholders[i]}
-                        type={hideValues ? "password" : "text"}
-                        maxLength={1}
-                        disabled={disabled}
-                        $validationStatus={validation?.status}
-                        $disabled={disabled}
-                        $inputBackground={inputBackground}
-                        $inputVariant={undefined}
-                        $inputSize={inputSize}
-                        $fontSize={inputFontSize}
-                    />
-                ))}
-            </Flexbox>
-        </InputContainer>
-    )
-}

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

@@ -1,68 +0,0 @@
-import styled, { css } from "styled-components"
-import {
-    setDefaultTheme,
-    RADIUSES,
-    TRANSITIONS,
-    Mixins,
-    COLORS_LIGHT,
-    COLORS_DARK,
-} from "../../"
-import { InputBaseMixin } from "../ComponentsMixins"
-import type { IStyledInputPin } from "./subtypes"
-
-const StyledInputPin = styled.input<IStyledInputPin>`
-    ${InputBaseMixin}
-    border: 1px solid ${({ theme }) => theme.GRAY_200};
-    border-radius: ${RADIUSES.S};
-    width: ${({ $inputSize }) => $inputSize}px;
-    height: ${({ $inputSize }) => $inputSize}px;
-    display: block;
-    flex-grow: unset;
-    text-align: center;
-    transition: ${TRANSITIONS.SHORT};
-    font-size: ${({ $fontSize }) => Mixins.FontSize($fontSize)};
-    background-color: ${({ $validationStatus, theme }) =>
-        $validationStatus === false ? theme.DANGER_50 : theme.BACKGROUND};
-
-    &:focus {
-        border-color: ${({ theme, $validationStatus }) =>
-            $validationStatus === false ? theme.DANGER_500 : theme.PRIMARY_500};
-    }
-
-    ${({ $inputBackground, $validationStatus }) => {
-        switch ($inputBackground) {
-            case "light":
-                return css`
-                    background-color: ${$validationStatus === false
-                        ? COLORS_LIGHT.DANGER_50
-                        : COLORS_LIGHT.BACKGROUND};
-                    border-color: ${COLORS_LIGHT.GRAY_200};
-
-                    &:focus {
-                        border-color: ${$validationStatus === false
-                            ? COLORS_LIGHT.DANGER_500
-                            : COLORS_LIGHT.PRIMARY_500};
-                    }
-                `
-            case "dark":
-                return css`
-                    background-color: ${$validationStatus === false
-                        ? COLORS_DARK.DANGER_50
-                        : COLORS_DARK.BACKGROUND};
-                    border-color: ${COLORS_DARK.GRAY_200};
-
-                    &:focus {
-                        border-color: ${$validationStatus === false
-                            ? COLORS_DARK.DANGER_500
-                            : COLORS_DARK.PRIMARY_500};
-                    }
-                `
-            default:
-                return null
-        }
-    }}
-`
-
-setDefaultTheme([StyledInputPin])
-
-export { StyledInputPin }

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

@@ -1,9 +0,0 @@
-import type { LibFontSizes } from "../../types"
-import type { ILibInputBaseMixin } from "../ComponentsMixins"
-
-// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN INPUT_PIN COMPONENTS
-
-export interface IStyledInputPin extends ILibInputBaseMixin {
-    $inputSize: number
-    $fontSize: LibFontSizes
-}

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

@@ -1,29 +0,0 @@
-import type {
-    CssJustifyContent,
-    LibSpacers,
-    DispatchState,
-    LibValueInputPin,
-    LibComponentBase,
-    LibFontSizes,
-} from "../../types"
-import type { ILibInputBase } from "../InputComponents/types"
-
-export type ILibInputPin = LibComponentBase<HTMLDivElement> &
-    Omit<ILibInputBase, "inputVariant"> & {
-        values: LibValueInputPin
-        setValues: DispatchState<LibValueInputPin>
-        placeholders?: Array<string>
-        container?: {
-            justifyContent?: CssJustifyContent
-            columnGap?: LibSpacers
-        }
-        inputSize?: number
-        inputFontSize?: LibFontSizes
-        hideValues?: boolean
-        disabled?: boolean
-        maxLength?: never
-        type?: never
-        placeholder?: never
-        value?: never
-        onChange?: never
-    }

package/dist/lib/components/InputSlider/InputSlider.tsx

@@ -1,193 +0,0 @@
-import { useState, useCallback, type FC } from "react"
-import classNames from "classnames"
-import { Flexbox, Text } from "../../"
-import type { ILibText } from "../../types/components-props"
-import { Slider } from "./Slider"
-import { InputContainer } from "../InputComponents"
-import { SliderContainer, Tooltip } from "./styles"
-import type { ILibInputSlider } from "./types"
-
-/**
- * InputSlider component for rendering a slider input with optional min/max labels, value tooltip, and flexible styling.
- *
- * @component
- * @extends HTMLInputElement
- * @param {Object} props - InputSlider props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- *  * @param {Ref<HTMLInputElement>} [props.ref] - Ref forwarded to the input element.
- * @param {boolean} [props.showMinMax] - Show min and max values beside the slider.
- * @param {"hover" | "always" | "never"} [props.showValue] - When to show the slider value tooltip.
- * @param {number} [props.min=0] - Minimum slider value.
- * @param {number} [props.max=100] - Maximum slider value.
- * @param {number} [props.value=50] - Current slider value.
- * @param {string} [props.label] - Label for the slider.
- * @param {string} [props.labelComment] - Additional comment for the label.
- * @param {string} [props.helper] - Helper text above the slider.
- * @param {string|Object} [props.helperBottom] - Helper text or element below the slider.
- * @param {Object} [props.validation] - Validation status and message.
- * @param {string} [props.iconBaseUrl] - Base URL for icons.
- * @param {"light" | "dark"} [props.inputBackground] - Input background style.
- *  * @param {CSSProperties} [props.containerStyle] - Style for the input container.
- * @param {string} [props.className] - Additional class names.
- * @param {any} [props.rest] - Additional props passed to the slider.
- * @returns {JSX.Element} The rendered InputSlider component.
- *
- * @see https://documentation-components-react.vercel.app/components/input-slider
- * @example
- * <InputSlider
- *   label="Volume"
- *   min={0}
- *   max={100}
- *   value={50}
- *   showMinMax
- *   showValue="hover"
- * />
- */
-export const InputSlider: FC<ILibInputSlider> = ({
-    "data-testid": testid,
-    ref,
-    className,
-    label,
-    labelComment,
-    helper,
-    helperBottom,
-    validation,
-    id,
-    value = 50,
-    min = 0,
-    max = 100,
-    showMinMax,
-    showValue = value ? "hover" : "never",
-    inputBackground,
-    containerStyle,
-    ...rest
-}) => {
-    const hasContainer: boolean = !!(
-        label ||
-        labelComment ||
-        helper ||
-        helperBottom ||
-        validation
-    )
-    const hasWrapper: boolean = !!(showValue !== "never" || showMinMax)
-
-    const sliderProps: ILibInputSlider & {
-        hasContainer: boolean
-        hasWrapper: boolean
-    } = {
-        "data-testid": testid,
-        className,
-        ref,
-        id,
-        min,
-        max,
-        validation,
-        hasContainer,
-        hasWrapper,
-        inputBackground,
-        value,
-        ...rest,
-    }
-    const textProps: Pick<ILibText, "color" | "tag"> = {
-        tag: "small",
-        color: "gray",
-    }
-
-    const [isTooltipVisible, setIsTooltipVisible] = useState(
-        !!(showValue === "always")
-    )
-
-    const handleMouseEnter = useCallback(() => {
-        if (showValue === "hover") setIsTooltipVisible(true)
-    }, [showValue])
-    const handleMouseLeave = useCallback(() => {
-        if (showValue === "hover") setIsTooltipVisible(false)
-    }, [showValue])
-
-    return (
-        <InputContainer
-            data-testid={testid}
-            className={className}
-            label={label}
-            labelComment={labelComment}
-            helper={helper}
-            helperBottom={helperBottom}
-            id={id}
-            validation={validation}
-            value={value}
-            counter={false}
-            maxLength={undefined}
-            iconBaseUrl={undefined}
-            style={containerStyle}
-            hasListOpen={undefined}
-        >
-            {showMinMax || showValue !== "never" ? (
-                <Flexbox
-                    data-testid={
-                        hasContainer ? `${testid}.SliderWrapper` : testid
-                    }
-                    className={hasContainer ? "SliderWrapper" : className}
-                    alignItems="center"
-                    gap="xs"
-                >
-                    {showMinMax && (
-                        <Text
-                            data-testid={
-                                testid && `${testid}.SliderWrapper.Min`
-                            }
-                            className={className && "SliderMin"}
-                            {...textProps}
-                        >
-                            {min}
-                        </Text>
-                    )}
-
-                    {showValue ? (
-                        <SliderContainer
-                            data-testid={
-                                testid &&
-                                `${testid}.SliderWrapper.SliderContainer`
-                            }
-                            className={className && "SliderContainer"}
-                            onMouseEnter={handleMouseEnter}
-                            onMouseLeave={handleMouseLeave}
-                        >
-                            <Slider {...sliderProps} />
-
-                            <Tooltip
-                                data-testid={
-                                    testid &&
-                                    `${testid}.SliderWrapper.SliderContainer.Tooltip`
-                                }
-                                className={classNames(
-                                    { SliderTooltip: className },
-                                    { Visible: isTooltipVisible }
-                                )}
-                                $value={value || 0}
-                                $max={max}
-                            >
-                                {value}
-                            </Tooltip>
-                        </SliderContainer>
-                    ) : (
-                        <Slider {...sliderProps} />
-                    )}
-
-                    {showMinMax && (
-                        <Text
-                            data-testid={
-                                testid && `${testid}.SliderWrapper.Max`
-                            }
-                            className={className && "SliderMax"}
-                            {...textProps}
-                        >
-                            {max}
-                        </Text>
-                    )}
-                </Flexbox>
-            ) : (
-                <Slider {...sliderProps} />
-            )}
-        </InputContainer>
-    )
-}