UNPKG

@bothub-chat/ui

Version:

Bothub UI Components

47 lines (46 loc) 5.76 kB
import{jsx as e}from"react/jsx-runtime";import{styled as o,css as r}from"styled-components";import{Typography as i}from"../typography/index.js";import{Skeleton as t}from"../skeleton/index.js";import{Button as l}from"../button/index.js";import{CloseIcon as a}from"../../icons/close/index.js";const n=o.div.withConfig({displayName:"styled__TextFieldStyled",componentId:"sc-1p7nrvv-0"})(["display:inline-flex;flex-direction:column;align-items:flex-start;width:",";box-sizing:border-box;"," ",""],(({$fullWidth:e})=>e?"100%":"420px"),(({$disabled:e})=>e&&r` cursor: not-allowed; `),(({$disabled:e})=>!e&&r` cursor: default; `)),s=o(i).attrs({variant:"input-sm"}).withConfig({displayName:"styled__TextFieldLabel",componentId:"sc-1p7nrvv-1"})(["display:inline-flex;align-items:center;gap:8px;margin-bottom:8px;width:100%;cursor:inherit;"]),c=o.label.withConfig({displayName:"styled__TextFieldBlock",componentId:"sc-1p7nrvv-2"})(["display:inline-flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;border-radius:8px;overflow:hidden;cursor:",";padding:0px ","px;",";"," "," ",""],(({$disabled:e,$skeleton:o})=>o?"progress":e?"not-allowed":"text"),(({$variant:e})=>"primary"===e?16:10),(({$variant:e})=>"primary"===e&&r` border: 1px solid ${({theme:e})=>e.colors.grayScale.gray2}; `),(({theme:e,$error:o,$hover:i,$focus:t,$disabled:l,$skeleton:a})=>l||a?r` border-color: ${({theme:e})=>e.colors.grayScale.gray2}; `:o?r` border-color: ${e.colors.critic}; `:(i||t)&&r` border-color: ${e.colors.accent.primary}; `),(({theme:e,$focus:o,$disabled:i,$skeleton:t,$variant:l})=>i||t?r` background: ${e.colors.grayScale.gray3}; `:o?"custom"===e.scheme?r` background: ${e.colors.grayScale.gray2}; > svg path { fill: ${e.colors.accent.primary}; `:r` background: ${"light"===e.mode?"primary"===l?e.default.colors.base.white:e.colors.grayScale.gray7:"primary"===l?e.colors.grayScale.gray4:e.colors.grayScale.gray7}; > svg path { fill: ${"light"===e.mode?e.default.colors.accent.primary:e.colors.base.white}; } `:"custom"===e.scheme?r` background: ${e.colors.grayScale.gray7}; > svg path { fill: ${e.colors.grayScale.gray1}; `:r` background: ${"light"===e.mode?"primary"===l?e.default.colors.base.white:e.colors.grayScale.gray7:"primary"===l?e.colors.grayScale.gray4:e.colors.grayScale.gray7}; > svg path { fill: ${e.colors.grayScale.gray1}; } `),(({$focus:e,$disabled:o})=>o?r` ${y} { visibility: hidden; } `:r` ${y} { visibility: ${e?"visible":"hidden"}; } &:hover { ${y} { visibility: visible; } } `)),d=o.input.withConfig({displayName:"styled__TextFieldInput",componentId:"sc-1p7nrvv-3"})(["display:",";width:100%;background:none;border:none;outline:none;padding:","px 0px;color:",";font-size:14px;font-weight:400;line-height:18px;cursor:inherit;&:hover ~ ","{border-color:",";}&::placeholder{color:",";}&:focus::placeholder{color:",";}&:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:active{caret-color:",";-webkit-background-clip:text;-webkit-text-fill-color:",";box-shadow:0 0 0 100px "," inset !important;}&:-webkit-autofill:focus{caret-color:",";-webkit-background-clip:text;-webkit-text-fill-color:",";box-shadow:0 0 0 100px "," inset !important;}&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{-webkit-appearance:none;}&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}"],(({type:e})=>"color"===e?"none":"inline-flex"),(({$variant:e})=>"primary"===e?14:8),(({theme:e})=>e.colors.base.white),c,(({theme:e})=>e.colors.accent.primary),(({theme:e})=>e.colors.grayScale.gray1),(({theme:e})=>"light"===e.mode?e.colors.grayScale.gray1:e.colors.grayScale.gray6),(({theme:e})=>e.colors.base.white),(({theme:e})=>e.colors.base.white),(({theme:e})=>"light"===e.mode?e.default.colors.base.white:e.colors.grayScale.gray4),(({theme:e})=>e.colors.base.white),(({theme:e})=>e.colors.base.white),(({theme:e})=>"light"===e.mode?e.default.colors.base.white:e.colors.grayScale.gray4)),p=o.label.withConfig({displayName:"styled__TextFieldColor",componentId:"sc-1p7nrvv-4"})(["display:inline-flex;cursor:pointer;"]),g=o.input.attrs({type:"color"}).withConfig({displayName:"styled__TextFieldColorInput",componentId:"sc-1p7nrvv-5"})(["display:none;"]),m=o.span.withConfig({displayName:"styled__TextFieldColorPreview",componentId:"sc-1p7nrvv-6"})(["display:inline-flex;width:18px;height:18px;flex-shrink:0;background:",";border-radius:4px;"],(({$color:e})=>e)),y=o(l).attrs((({$big:o})=>({variant:"text",iconSize:o?16:12,children:e(a,{})}))).withConfig({displayName:"styled__TextFieldClearButton",componentId:"sc-1p7nrvv-7"})([""]),h=o.button.withConfig({displayName:"styled__TextFieldShowpassButton",componentId:"sc-1p7nrvv-8"})(["padding:0;margin:0;background-color:transparent;border:none;cursor:pointer;position:relative;"]),b=o(i).attrs({variant:"input-sm"}).withConfig({displayName:"styled__TextFieldErrorText",componentId:"sc-1p7nrvv-9"})(["display:inline-flex;margin-top:8px;color:",";"],(({theme:e})=>e.colors.critic)),x=o(t).withConfig({displayName:"styled__TextFieldSkeleton",componentId:"sc-1p7nrvv-10"})(["width:100%;height:18px;margin:14px 0px;"]);export{c as TextFieldBlock,y as TextFieldClearButton,p as TextFieldColor,g as TextFieldColorInput,m as TextFieldColorPreview,b as TextFieldErrorText,d as TextFieldInput,s as TextFieldLabel,h as TextFieldShowpassButton,x as TextFieldSkeleton,n as TextFieldStyled};