@chayns-components/core/lib/esm/components/input/Input.styles.js

A set of beautiful React components for developing your own applications with chayns.

import { motion } from 'motion/react';
import styled, { css } from 'styled-components';
import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
export const StyledInput = styled.div`
    opacity: ${({
  $isDisabled
}) => $isDisabled ? 0.5 : 1};
    display: flex;
    width: 100%;
`;
export const StyledInputContentWrapper = styled.div`
    align-items: center;
    background-color: ${({
  theme,
  $backgroundColor
}) => $backgroundColor ?? theme['100']};
    border: 1px solid transparent;
    color: ${({
  theme
}) => theme['006']};
    display: flex;
    justify-content: space-between;
    width: 100%;
    transition: opacity 0.3s ease;

    ${({
  theme,
  $isInvalid,
  $shouldShowTransparentBackground,
  $borderColor
}) => {
  if ($borderColor) return css`
                border-color: ${$borderColor};
            `;
  if ($isInvalid) {
    return css`
                border-color: ${theme.wrong};
            `;
  }
  if ($shouldShowTransparentBackground) {
    if (theme.colorMode === 'dark') {
      return css`
                    border-color: rgba(255, 255, 255, 0.5);
                `;
    }
    return css`
                border-color: rgba(0, 0, 0, 0.5);
            `;
  }
  return css`
            border-color: rgba(160, 160, 160, 0.3);
        `;
}}

    ${({
  $size
}) => $size === 'small' && css`
            height: 32px;
        `}

    ${({
  $shouldShowOnlyBottomBorder,
  $size
}) => !$shouldShowOnlyBottomBorder && css`
            min-height: ${$size === 'medium' ? '42px' : '32px'};
        `}

    ${({
  $shouldRoundRightCorners,
  $shouldShowOnlyBottomBorder,
  theme
}) => {
  if ($shouldShowOnlyBottomBorder) {
    return css`
                border-top: none;
                border-right: none;
                border-left: none;
                background-color: transparent;
                border-color: ${theme['408']};
            `;
  }
  if ($shouldRoundRightCorners) {
    return css`
                border-radius: 3px;
            `;
  }
  return css`
            border-bottom-left-radius: 3px;
            border-top-left-radius: 3px;
            border-right: none;
        `;
}}

    ${({
  $shouldShowKeyboardHighlighting
}) => $shouldShowKeyboardHighlighting && css`
            /* Show highlighting when the input field is focused */
            &:has(input:focus-visible) {
                transition: none;
                ${keyboardFocusHighlightingRingCss}
            }
        `}
`;
export const StyledInputContent = styled.div`
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    margin: ${({
  $shouldShowOnlyBottomBorder
}) => !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};
    position: relative;
`;
export const StyledInputField = styled.input`
    background: none;
    border: none;
    color: ${({
  theme,
  $color,
  $isInvalid
}) => $color ?? ($isInvalid ? theme.wrong : theme.text)};
    padding: 0;
    width: ${({
  $placeholderWidth
}) => `calc(100% - ${$placeholderWidth}px)`};
    line-height: 1em;

    ${({
  $shouldShowCenteredContent
}) => $shouldShowCenteredContent && css`
            text-align: center;
        `}
`;
export const StyledMotionInputLabelWrapper = styled(motion.label)`
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    line-height: 1.3;
    pointer-events: none;
    position: absolute;
    user-select: none;
    max-width: 100%;
`;
export const StyledMotionInputElement = styled(motion.div)`
    display: flex;
`;
export const StyledInputLabel = styled.label`
    line-height: 1.3;
    pointer-events: none;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: ${({
  theme,
  $color,
  $isInvalid
}) => $color ?? ($isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`)};
`;
export const StyledMotionInputClearIcon = styled(motion.div)`
    align-items: center;
    border-left: ${({
  $shouldShowOnlyBottomBorder
}) => $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    height: ${({
  $size
}) => $size === 'medium' ? '40px' : '30px'};
    justify-content: center;
    width: ${({
  $size
}) => $size === 'medium' ? '40px' : '30px'};

    ${({
  $shouldShowKeyboardHighlighting
}) => $shouldShowKeyboardHighlighting && css`
            &:focus-visible {
                transition: none;
                ${keyboardFocusHighlightingRingCss}
            }
        `}
`;
export const StyledInputIconWrapper = styled.div`
    align-items: baseline;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    margin-left: 10px;
`;
export const StyledInputRightElement = styled.div`
    flex: 0 0 auto;
    overflow: hidden;
    min-width: 28px;
    text-align: center;

    ${({
  $isInline
}) => !$isInline && css`
            border-bottom-right-radius: 3px;
            border-top-right-radius: 3px;
        `}

    &:has(*:focus-visible) {
        overflow: visible;
    }

    .beta-chayns-icon:focus-visible::after {
        transform: translate(-50%, -50%) scale(0.78);
    }
`;
//# sourceMappingURL=Input.styles.js.map