@bothub-chat/ui/dist/components/button/styled.js

Bothub UI Components

import{styled as a,css as r,keyframes as o}from"styled-components";import{isBright as e}from"../../utils/colors/isBright.js";import"../../utils/colors/calculateGrayScale.js";import"../../utils/colors/calculateAccentColors.js";const t=a=>o`
  0% {
    box-shadow: 0px 0px 0px 1px ${a} inset;
  }
  10% {
    box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.4) inset;
  }
  80% {
    box-shadow: 0px 0.9px 0px 0px rgba(255, 255, 255, 0.4) inset;
  }
  100% {
    box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.4) inset;
  }
`,s=a=>o`
  0% {
    box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.4) inset;
  }
  10% {
    box-shadow: 0px 0.9px 0px 0px rgba(255, 255, 255, 0.4) inset;
  }
  50% {
    box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.4) inset;
  }
  100% {
    box-shadow: 0px 0px 0px 1px ${a} inset;
  }
`,c=a.button.withConfig({displayName:"styled__ButtonStyled",componentId:"sc-1gc24ba-0"})(["display:inline-flex;justify-content:center;align-items:center;gap:10px;border:none;cursor:",";svg path{transition:fill 0.2s;}"," "," "," "," "," "," "," "," transition:background-color 0.3s ease-out,opacity 0.3s ease-out,box-shadow 0.2s ease-in-out,transform 0.3s ease-out;"],(({$disabled:a,$skeleton:r,$variant:o})=>a?"not-allowed":r?"progress":"help"===o?"help":"pointer"),(({theme:a,$disabled:o,$variant:e,$skeleton:c,$color:n})=>{switch(e){case"primary":{let e;return e=n||(o||c?a.colors.grayScale.gray3:"light"===a.mode&&"standard"===a.scheme?a.colors.accent.primaryLight:a.colors.accent.primary),r`
          background: ${e};
          box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.4) inset;
          opacity: 1;

          ${!o&&!c&&r`
            &:hover {
              background: ${null!=n?n:a.colors.accent.strong};
            }
            &:active {
              background: ${null!=n?n:a.colors.accent.strongDown};
            }
          `}
        `}case"primary-transparent":return r`
          background: ${null!=n?n:o||c?a.colors.grayScale.gray3:a.colors.accent.primary};
          box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.4) inset;
          opacity: ${o||c?1:.5};

          ${!o&&!c&&r`
            &:hover {
              opacity: 1;
            }
          `}
        `;case"primary-outline":return r`
          background: ${o||c?a.colors.grayScale.gray3:"rgba(255, 255, 255, 0)"};

          box-shadow: ${o||c?"box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.0) inset;":`0px 0px 0px 1px ${a.colors.accent.primary} inset`};
          animation: ${s(a.colors.accent.primary)}
            0.3s linear forwards;

          ${!o&&!c&&r`
            &:hover {
              background: ${null!=n?n:a.colors.accent.primary};
              animation: ${t(a.colors.accent.primary)} 0.3s
                linear forwards;
            }
            &:active {
              background: ${null!=n?n:a.colors.accent.strongDown};
              transform: translateY(1px);
              box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0) inset;
            }
          `}
        `;case"secondary":return r`
          background: ${null!=n?n:a.colors.grayScale.gray4};
          box-shadow: 0px 0px 0px 1px ${a.colors.grayScale.gray2} inset;
          animation: ${s(a.colors.grayScale.gray2)}
            0.3s linear forwards;

          ${!o&&!c&&r`
            &:hover {
              background: ${null!=n?n:a.colors.grayScale.gray2};
              animation: ${t(a.colors.grayScale.gray2)}
                0.3s linear forwards;
            }
            &:active {
              background: ${null!=n?n:a.colors.grayScale.gray3};
            }
          `}
        `;case"gradient":return r`
          background: ${null!=n?n:a.colors.gradient.elite20};
          box-shadow: 0px 0px 0px 1px ${a.colors.gradient.elite20} inset;
          animation: ${s(a.colors.gradient.elite20)}
            0.3s linear forwards;

          ${!o&&!c&&r`
            &:hover {
              background: ${null!=n?n:a.colors.gradient.elite20};
              animation: ${t(a.colors.gradient.elite20)}
                0.3s linear forwards;
            }
            &:active {
              background: ${null!=n?n:a.colors.gradient.elite20};
            }
          `}
        `;case"success":return r`
          background: ${o||c?null!=n?n:a.colors.grayScale.gray2:a.colors.green};
          box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.4) inset;
          opacity: 1;

          ${!o&&!c&&r`
            &:hover {
              background: ${a.colors.accent.strong};
            }
            &:active {
              background: ${a.colors.accent.strongDown};
            }
          `}
        `;case"text":case"help":return r`
          background: rgba(255, 255, 255, 0);
          box-shadow: none;
        `}}),(({$disabled:a,$skeleton:o})=>!a&&!o&&r`
      &:active {
        transform: translateY(1px);
      }
    `),(({$variant:a,$icon:o,$size:e})=>{switch(a){case"primary":case"primary-transparent":case"gradient":case"primary-outline":case"secondary":case"success":return"md"===e?o?r`
                padding: 14px;
              `:r`
              padding: 14px 24px;
            `:o?r`
                padding: 10px;
              `:r`
              padding: 10px 18px;
            `;case"text":case"help":return r`
          padding: 0px;
        `}}),(({$variant:a,$icon:o,$corner:e})=>{switch(a){case"primary":case"primary-transparent":case"primary-outline":case"gradient":case"secondary":case"success":return o?"rounded"===e?r`
                border-radius: 50%;
              `:r`
                border-radius: 8px;
              `:r`
            border-radius: 8px;
          `;case"text":case"help":return r``}}),(({$fullWidth:a})=>a&&r`
      width: 100%;
    `),(({theme:a,$variant:o,$icon:e,$iconFill:t,$disabled:s,$disableHoverColor:c})=>"text"!==o||s||c?r``:e?r`
        svg path {
          fill: ${null!=t?t:a.colors.grayScale.gray1} !important;
        }
        &:hover {
          svg path {
            fill: ${"light"===a.mode?a.default.colors.accent.primary:a.colors.base.white} !important;
          }
        }
      `:r`
      &:hover {
        ${n} {
          color: ${a.colors.accent.primary};
        }
        svg path {
          fill: ${a.colors.accent.primary} !important;
        }
      }
    `),(({theme:a,$variant:o})=>"help"===o&&r`
      &:hover {
        svg path {
          fill: ${a.colors.base.white} !important;
        }
      }
    `),(({theme:a,$variant:o})=>"primary-outline"===o&&"light"===a.mode&&r`
      &:hover,
      &:active {
        ${n} {
          color: ${a.colors.base.black};
        }
        svg path {
          fill: ${a.colors.base.black};
        }
      }
    `)),n=a.span.withConfig({displayName:"styled__ButtonText",componentId:"sc-1gc24ba-1"})(["display:inline-flex;width:auto;font-weight:500;transition:color 0.3s ease-out;color:",";",""],(({theme:a,$variant:r,$disabled:o})=>{if(o)return a.colors.grayScale.gray1;switch(r){case"primary":case"primary-transparent":return"custom"===a.scheme?a.bright?e(a.colors.custom.interface.text)?"dark"===a.mode?a.colors.base.black:a.default.colors.base.black:a.colors.custom.interface.text:e(a.colors.custom.interface.text)?a.colors.custom.interface.text:a.default.colors.base.white:a.bright?"dark"===a.mode?a.colors.base.black:a.colors.base.white:a.default.colors.base.white;case"primary-outline":return"light"===a.mode?a.default.colors.base.black:a.colors.base.white;default:return a.colors.base.white}}),(({$size:a})=>"md"===a?r`
          font-size: 18px;
        `:r`
          font-size: 15px;
        `));export{c as ButtonStyled,n as ButtonText};