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

⚛️ React UI library by GuruHotel

import{styled as o,theme as e}from"../theme";import*as r from"@radix-ui/react-select";import{scrollButtonStyles as t}from"./select.constants";import{rounded as l,size as a}from"../common-variants";export const StyledViewport=o(r.Viewport,{padding:"$2"});export const StyledItem=o(r.Item,{all:"unset",lineHeight:1,display:"flex",alignItems:"center",position:"relative",userSelect:"none",fontSize:"$sm",height:25,padding:"0 35px 0 25px","&[data-disabled]":{color:"$gray8",pointerEvents:"none"},_hover:{cursor:"pointer"}});export const StyledLabel=o(r.Label,{padding:"0 25px",lineHeight:"2rem",color:"$gray11",userSelect:"none"});export const StyledSeparator=o(r.Separator,{height:1,margin:5});export const StyledItemIndicator=o(r.ItemIndicator,{position:"absolute",left:0,width:25,display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:"70%"});export const StyledScrollUpButton=o(r.ScrollUpButton,t);export const StyledScrollDownButton=o(r.ScrollDownButton,t);export const StyledSelectIcon=o(r.SelectIcon,{svg:{fontSize:"70%"}});export const StyledTrigger=o(r.SelectTrigger,{all:"unset",display:"inline-flex",alignItems:"center",justifyContent:"space-between",padding:"0 15px",gap:"$2",lineHeight:1,backgroundColor:"$surfaceLight",boxShadow:"0 0 0 1px $colors$gray7",_hover:{backgroundColor:"$gray3",cursor:"pointer"},variants:{rounded:l,size:a,colorScheme:{text:{color:"$text11",_focusWithin:{boxShadow:"0 0 0 2px $colors$text9"},"&[data-placeholder]":{color:"$text9"}},guru:{color:"$guru11",_focusWithin:{boxShadow:"0 0 0 2px $colors$guru9"},"&[data-placeholder]":{color:"$guru9"}},fellow:{color:"$fellow11",_focusWithin:{boxShadow:"0 0 0 2px $colors$fellow9"},"&[data-placeholder]":{color:"$fellow9"}},darkie:{color:"$darkie11",_focusWithin:{boxShadow:"0 0 0 2px $colors$darkie9"},"&[data-placeholder]":{color:"$darkie9"}},red:{color:"$red11",_focusWithin:{boxShadow:"0 0 0 2px $colors$red9"},"&[data-placeholder]":{color:"$red9"}},nature:{color:"$nature11",_focusWithin:{boxShadow:"0 0 0 2px $colors$nature9"},"&[data-placeholder]":{color:"$nature9"}},sunshine:{color:"$sunshine11",_focusWithin:{boxShadow:"0 0 0 2px $colors$sunshine9"},"&[data-placeholder]":{color:"$sunshine9"}},violet:{color:"$violet11",_focusWithin:{boxShadow:"0 0 0 2px $colors$violet9"},"&[data-placeholder]":{color:"$violet9"}},gray:{color:"$gray11",_focusWithin:{boxShadow:"0 0 0 2px $colors$gray9"},"&[data-placeholder]":{color:"$gray9"}},primary:{color:"$primary11",_focusWithin:{boxShadow:"0 0 0 2px $colors$primary9"},"&[data-placeholder]":{color:"$primary9"}},secondary:{color:"$secondary11",_focusWithin:{boxShadow:"0 0 0 2px $colors$secondary9"},"&[data-placeholder]":{color:"$secondary9"}},utilitary:{color:"$utilitary11",_focusWithin:{boxShadow:"0 0 0 2px $colors$utilitary9"},"&[data-placeholder]":{color:"$utilitary9"}}}},defaultVariants:{colorScheme:"guru",rounded:"lg"}});export const StyledContent=o(r.Content,{overflow:"hidden",backgroundColor:"white",borderRadius:"$sm",boxShadow:"$md",zIndex:"$sticky",maxHeight:"var(--radix-select-content-available-height)",variants:{rounded:{none:{rounded:"$none"},xs:{rounded:"$xs",[`& ${StyledItem}`]:{rounded:"$xs"}},sm:{rounded:"$sm",[`& ${StyledItem}`]:{rounded:"$xs"}},md:{rounded:"$md",[`& ${StyledItem}`]:{rounded:"$sm"}},lg:{rounded:"$lg",[`& ${StyledItem}`]:{rounded:"$md"}},xl:{rounded:"$xl",[`& ${StyledItem}`]:{rounded:"$lg"}},"2xl":{rounded:"$2xl",[`& ${StyledItem}`]:{rounded:"$xl"}},"3xl":{rounded:"$3xl",[`& ${StyledItem}`]:{rounded:"$2xl"}},full:{rounded:"$full",[`& ${StyledItem}`]:{rounded:"$full"}},base:{rounded:"$base",[`& ${StyledItem}`]:{rounded:"$halfBase"}},halfBase:{rounded:"$halfBase",[`& ${StyledItem}`]:{rounded:Math.abs(parseInt(e.radii.halfBase.value.replace(/\D/g,""),10)/2)}}},colorScheme:{text:{[`& ${StyledItem}`]:{color:"$text11","&[data-highlighted]":{backgroundColor:"$text9",color:"$text1"}},[`& ${StyledSeparator}`]:{backgroundColor:"$text4"}},darkie:{[`& ${StyledItem}`]:{color:"$darkie11","&[data-highlighted]":{backgroundColor:"$darkie9",color:"$darkie1"}},[`& ${StyledSeparator}`]:{backgroundColor:"$darkie4"}},fellow:{[`& ${StyledItem}`]:{color:"$fellow11","&[data-highlighted]":{backgroundColor:"$fellow9",color:"$fellow1"}},[`& ${StyledSeparator}`]:{backgroundColor:"$fellow4"}},guru:{[`& ${StyledItem}`]:{color:"$guru11","&[data-highlighted]":{backgroundColor:"$guru9",color:"$guru1"}},[`& ${StyledSeparator}`]:{backgroundColor:"$guru4"}},red:{[`& ${StyledItem}`]:{color:"$red11","&[data-highlighted]":{backgroundColor:"$red9",color:"$red1"}},[`& ${StyledSeparator}`]:{backgroundColor:"$red4"}},nature:{[`& ${StyledItem}`]:{color:"$nature11","&[data-highlighted]":{backgroundColor:"$nature9",color:"$nature1"}},[`& ${StyledSeparator}`]:{backgroundColor:"$nature4"}},sunshine:{[`& ${StyledItem}`]:{color:"$sunshine11","&[data-highlighted]":{backgroundColor:"$sunshine9",color:"$sunshine1"}},[`& ${StyledSeparator}`]:{backgroundColor:"$sunshine4"}},violet:{[`& ${StyledItem}`]:{color:"$violet11","&[data-highlighted]":{backgroundColor:"$violet9",color:"$violet1"}},[`& ${StyledSeparator}`]:{backgroundColor:"$violet4"}},gray:{[`& ${StyledItem}`]:{color:"$gray11","&[data-highlighted]":{backgroundColor:"$gray9",color:"$gray1"}},[`& ${StyledSeparator}`]:{backgroundColor:"$gray4"}},primary:{[`& ${StyledItem}`]:{color:"$primary11","&[data-highlighted]":{backgroundColor:"$primary9",color:"$primary1"}},[`& ${StyledSeparator}`]:{backgroundColor:"$primary4"}},secondary:{[`& ${StyledItem}`]:{color:"$secondary11","&[data-highlighted]":{backgroundColor:"$secondary9",color:"$secondary1"}},[`& ${StyledSeparator}`]:{backgroundColor:"$secondary4"}},utilitary:{[`& ${StyledItem}`]:{color:"$utilitary11","&[data-highlighted]":{backgroundColor:"$utilitary9",color:"$utilitary1"}},[`& ${StyledSeparator}`]:{backgroundColor:"$utilitary4"}}},size:{xs:{[`& ${StyledItem}`]:{fontSize:"$xs"},[`& ${StyledLabel}`]:{fontSize:"$xs"}},sm:{[`& ${StyledItem}`]:{fontSize:"$sm"},[`& ${StyledLabel}`]:{fontSize:"$sm"}},md:{[`& ${StyledItem}`]:{fontSize:"$sm",height:30},[`& ${StyledLabel}`]:{fontSize:"$sm"}},lg:{[`& ${StyledItem}`]:{fontSize:"$md",height:32},[`& ${StyledLabel}`]:{fontSize:"$md"}},xl:{[`& ${StyledItem}`]:{fontSize:"$lg",height:35},[`& ${StyledLabel}`]:{fontSize:"$lg"}}}},defaultVariants:{colorScheme:"guru",rounded:"lg",size:"md"}});export const StyledSelectValue=o(r.Value);