@julseb-lib/react 0.0.50 → 0.0.52

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

@@ -1,219 +0,0 @@
-/*=============================================== InputPhone styles ===============================================*/
-
-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}
-    padding-left: 0;
-`
-
-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,35 +0,0 @@
-/*=============================================== InputPhone types ===============================================*/
-
-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
-    }