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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledMotionInputLabelWrapper = exports.StyledMotionInputElement = exports.StyledMotionInputClearIcon = exports.StyledInputRightElement = exports.StyledInputLabel = exports.StyledInputIconWrapper = exports.StyledInputField = exports.StyledInputContentWrapper = exports.StyledInputContent = exports.StyledInput = void 0;
var _react = require("motion/react");
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const StyledInput = exports.StyledInput = _styledComponents.default.div`
    opacity: ${({
  $isDisabled
}) => $isDisabled ? 0.5 : 1};
    display: flex;
    width: 100%;
`;
const StyledInputContentWrapper = exports.StyledInputContentWrapper = _styledComponents.default.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 (0, _styledComponents.css)`
                border-color: ${$borderColor};
            `;
  if ($isInvalid) {
    return (0, _styledComponents.css)`
                border-color: ${theme.wrong};
            `;
  }
  if ($shouldShowTransparentBackground) {
    if (theme.colorMode === 'dark') {
      return (0, _styledComponents.css)`
                    border-color: rgba(255, 255, 255, 0.5);
                `;
    }
    return (0, _styledComponents.css)`
                border-color: rgba(0, 0, 0, 0.5);
            `;
  }
  return (0, _styledComponents.css)`
            border-color: rgba(160, 160, 160, 0.3);
        `;
}}

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

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

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

    ${({
  $shouldShowKeyboardHighlighting
}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
            /* Show highlighting when the input field is focused */
            &:has(input:focus-visible) {
                transition: none;
                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
            }
        `}
`;
const StyledInputContent = exports.StyledInputContent = _styledComponents.default.div`
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    margin: ${({
  $shouldShowOnlyBottomBorder
}) => !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};
    position: relative;
`;
const StyledInputField = exports.StyledInputField = _styledComponents.default.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 && (0, _styledComponents.css)`
            text-align: center;
        `}
`;
const StyledMotionInputLabelWrapper = exports.StyledMotionInputLabelWrapper = (0, _styledComponents.default)(_react.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%;
`;
const StyledMotionInputElement = exports.StyledMotionInputElement = (0, _styledComponents.default)(_react.motion.div)`
    display: flex;
`;
const StyledInputLabel = exports.StyledInputLabel = _styledComponents.default.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)`)};
`;
const StyledMotionInputClearIcon = exports.StyledMotionInputClearIcon = (0, _styledComponents.default)(_react.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 && (0, _styledComponents.css)`
            &:focus-visible {
                transition: none;
                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
            }
        `}
`;
const StyledInputIconWrapper = exports.StyledInputIconWrapper = _styledComponents.default.div`
    align-items: baseline;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    margin-left: 10px;
`;
const StyledInputRightElement = exports.StyledInputRightElement = _styledComponents.default.div`
    flex: 0 0 auto;
    overflow: hidden;
    min-width: 28px;
    text-align: center;

    ${({
  $isInline
}) => !$isInline && (0, _styledComponents.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