@guruhotel/aura-ui/esm/input/input.styles.js

⚛️ React UI library by GuruHotel

import{styled as o}from"../theme";import{rounded as t,size as e,isDisabled as i}from"../common-variants";const r={xs:{fontSize:"$xs",height:"$6",width:"$6"},sm:{fontSize:"$sm",height:"$8",width:"$8"},md:{fontSize:"$md",height:"$10",width:"$10"},lg:{fontSize:"$lg",height:"$12",width:"$12"},xl:{fontSize:"$xl",height:"$14",width:"$14"}};export const StyledInputContainer=o("div",{width:"auto",display:"flex",position:"relative",variants:{isDisabled:{true:{cursor:"not-allowed",opacity:.5,"> *":{pointerEvents:"none"}}}}});export const StyledInput=o("input",{width:"100%",minWidth:0,margin:"0",outline:"none",lineHeight:"$base",whiteSpace:"normal",display:"inline-flex",alignItems:"center",justifyContent:"center",borderWidth:"0px",borderStyle:"solid",transition:".2s ease",boxShadow:"0 0 0 1px $colors$gray7",_placeholder:{color:"$placeholder",fontWeight:"$normal"},_hover:{boxShadow:"0 0 0 1px $colors$gray8"},variants:{rounded:t,size:e,withoutNumberArrows:{true:{textAlign:"center","&::-webkit-inner-spin-button, &::-webkit-outer-spin-button":{"-webkit-appearance":"none",margin:0},"&[type=number]":{"-moz-appearance":"textfield"}}},isDisabled:i,hasLeftElement:{true:{}},hasRightElement:{true:{}},colorScheme:{text:{_focusWithin:{boxShadow:"0 0 0 2px $colors$text9"}},guru:{_focusWithin:{boxShadow:"0 0 0 2px $colors$guru9"}},fellow:{_focusWithin:{boxShadow:"0 0 0 2px $colors$fellow9"}},darkie:{_focusWithin:{boxShadow:"0 0 0 2px $colors$darkie9"}},red:{_focusWithin:{boxShadow:"0 0 0 2px $colors$red9"}},nature:{_focusWithin:{boxShadow:"0 0 0 2px $colors$nature9"}},sunshine:{_focusWithin:{boxShadow:"0 0 0 2px $colors$sunshine9"}},violet:{_focusWithin:{boxShadow:"0 0 0 2px $colors$violet9"}},gray:{_focusWithin:{boxShadow:"0 0 0 2px $colors$gray9"}},primary:{_focusWithin:{boxShadow:"0 0 0 2px $colors$primary9"}},secondary:{_focusWithin:{boxShadow:"0 0 0 2px $colors$secondary9"}},utilitary:{_focusWithin:{boxShadow:"0 0 0 2px $colors$utilitary9"}}}},defaultVariants:{rounded:"lg",colorScheme:"guru",size:"md"},compoundVariants:[{size:"xs",hasLeftElement:!0,css:{paddingInlineStart:"$6"}},{size:"sm",hasLeftElement:!0,css:{paddingInlineStart:"$8"}},{size:"md",hasLeftElement:!0,css:{paddingInlineStart:"$10"}},{size:"lg",hasLeftElement:!0,css:{paddingInlineStart:"$12"}},{size:"xl",hasLeftElement:!0,css:{paddingInlineStart:"$14"}},{size:"xs",hasRightElement:!0,css:{paddingInlineEnd:"$6"}},{size:"sm",hasRightElement:!0,css:{paddingInlineEnd:"$8"}},{size:"md",hasRightElement:!0,css:{paddingInlineEnd:"$10"}},{size:"lg",hasRightElement:!0,css:{paddingInlineEnd:"$12"}},{size:"xl",hasRightElement:!0,css:{paddingInlineEnd:"$14"}}]});export const StyledInputLeftElement=o("div",{left:0,display:"flex",alignItems:"center",WebkitBoxPack:"center",justifyContent:"center",position:"absolute",top:0,zIndex:2,variants:{size:{...r}},defaultVariants:{size:"md"}});export const StyledInputRightElement=o("div",{right:0,display:"flex",alignItems:"center",justifyContent:"center",position:"absolute",top:0,zIndex:2,variants:{size:{...r}},defaultVariants:{size:"md"}});export const StyledInputLeftAddon=o("div",{marginInlineEnd:"-1px",borderInlineEndColor:"$transparent",width:"auto",display:"flex",alignItems:"center",whiteSpace:"nowrap",borderWidth:"0px",borderStyle:"solid",borderImage:"initial",borderColor:"inherit",background:"$gray3",flex:"0 0 auto",boxShadow:"0 0 0 1px $colors$gray7",variants:{size:e,rounded:{none:{rounded:"$none"},xs:{borderTopLeftRadius:"$xs",borderBottomLeftRadius:"$xs",borderTopRightRadius:0,borderBottomRightRadius:0},sm:{borderTopLeftRadius:"$sm",borderBottomLeftRadius:"$sm",borderTopRightRadius:0,borderBottomRightRadius:0},md:{borderTopLeftRadius:"$md",borderBottomLeftRadius:"$md",borderTopRightRadius:0,borderBottomRightRadius:0},lg:{borderTopLeftRadius:"$lg",borderBottomLeftRadius:"$lg",borderTopRightRadius:0,borderBottomRightRadius:0},xl:{borderTopLeftRadius:"$xl",borderBottomLeftRadius:"$xl",borderTopRightRadius:0,borderBottomRightRadius:0},"2xl":{borderTopLeftRadius:"$2xl",borderBottomLeftRadius:"2xl",borderTopRightRadius:0,borderBottomRightRadius:0},"3xl":{borderTopLeftRadius:"$3xl",borderBottomLeftRadius:"3xl",borderTopRightRadius:0,borderBottomRightRadius:0},full:{borderTopLeftRadius:"$full",borderBottomLeftRadius:"$full",borderTopRightRadius:0,borderBottomRightRadius:0},base:{borderTopLeftRadius:"$base",borderBottomLeftRadius:"$base",borderTopRightRadius:0,borderBottomRightRadius:0},halfBase:{borderTopLeftRadius:"$halfBase",borderBottomLeftRadius:"$halfBase",borderTopRightRadius:0,borderBottomRightRadius:0}}},defaultVariants:{rounded:"lg",size:"md"}});export const StyledInputRightAddon=o("div",{marginInlineStart:"-1px",borderInlineStartColor:"$transparent",width:"auto",display:"flex",alignItems:"center",whiteSpace:"nowrap",borderWidth:"0px",borderStyle:"solid",borderImage:"initial",borderColor:"inherit",background:"$gray3",flex:"0 0 auto",boxShadow:"0 0 0 1px $colors$gray7",variants:{size:e,rounded:{none:{rounded:"$none"},xs:{borderTopLeftRadius:0,borderBottomLeftRadius:0,borderTopRightRadius:"$xs",borderBottomRightRadius:"$xs"},sm:{borderTopLeftRadius:0,borderBottomLeftRadius:0,borderTopRightRadius:"$sm",borderBottomRightRadius:"$sm"},md:{borderTopLeftRadius:0,borderBottomLeftRadius:0,borderTopRightRadius:"$md",borderBottomRightRadius:"$md"},lg:{borderTopLeftRadius:0,borderBottomLeftRadius:0,borderTopRightRadius:"$lg",borderBottomRightRadius:"$lg"},xl:{borderTopLeftRadius:0,borderBottomLeftRadius:0,borderTopRightRadius:"$xl",borderBottomRightRadius:"$xl"},"2xl":{borderTopLeftRadius:0,borderBottomLeftRadius:0,borderTopRightRadius:"$2xl",borderBottomRightRadius:"$2xl"},"3xl":{borderTopLeftRadius:0,borderBottomLeftRadius:0,borderTopRightRadius:"$3xl",borderBottomRightRadius:"$3xl"},full:{borderTopLeftRadius:0,borderBottomLeftRadius:0,borderTopRightRadius:"$full",borderBottomRightRadius:"$full"},base:{borderTopLeftRadius:0,borderBottomLeftRadius:0,borderTopRightRadius:"$base",borderBottomRightRadius:"$base"},halfBase:{borderTopLeftRadius:0,borderBottomLeftRadius:0,borderTopRightRadius:"$halfBase",borderBottomRightRadius:"$halfBase"}}},defaultVariants:{rounded:"lg",size:"md"}});