@guruhotel/aura-ui/esm/date-picker/date-picker.styles.js

⚛️ React UI library by GuruHotel

import{DateFieldElements as o,SegmentContainer as r}from"../date-field/date-field.styles";import{styled as $,theme as n}from"../theme";export const Button=$("button",{all:"unset",display:"inline-flex",alignItems:"center",justifyContent:"center",rounded:"$halfBase",_focusWithin:{"> svg path":{fill:"$surfaceLight"}},variants:{isPressed:{true:{"&:disabled":{cursor:"no-drop"}}},rounded:{none:{rounded:"$none"},xs:{rounded:"$xs"},sm:{rounded:"$xs"},md:{rounded:"$sm"},lg:{rounded:"$md"},xl:{rounded:"$lg"},"2xl":{rounded:"$xl"},"3xl":{rounded:"$2xl"},full:{rounded:"$full"},halfBase:{rounded:Math.abs(parseInt(n.radii.halfBase.value.replace(/\D/g,""),10)/2)},base:{rounded:"$halfBase"}}}});export const DatePickerContainer=$("div",{width:"max-content",position:"relative",display:"flex",alignItems:"center",bg:"$surfaceLight",rounded:"$base",transition:"$default",variants:{colorScheme:{text:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$text9",_hover:{boxShadow:"0 0 0 2px $colors$text9"}},[`& ${r}`]:{_focus:{bg:"$text11",color:"$surfaceLight"}},[`& ${Button}`]:{_focusWithin:{bg:"$text11"}}},guru:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$guru9",_hover:{boxShadow:"0 0 0 2px $colors$guru9"}},[`& ${r}`]:{_focus:{bg:"$guru11",color:"$surfaceLight"}},[`& ${Button}`]:{_focusWithin:{bg:"$guru11"}}},fellow:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$fellow9",_hover:{boxShadow:"0 0 0 2px $colors$fellow9"}},[`& ${r}`]:{_focus:{bg:"$fellow11",color:"$surfaceLight"}},[`& ${Button}`]:{_focusWithin:{bg:"$fellow11"}}},darkie:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$darkie9",_hover:{boxShadow:"0 0 0 2px $colors$darkie9"}},[`& ${r}`]:{_focus:{bg:"$darkie11",color:"$surfaceLight"}},[`& ${Button}`]:{_focusWithin:{bg:"$darkie11"}}},red:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$red9",_hover:{boxShadow:"0 0 0 2px $colors$red9"}},[`& ${r}`]:{_focus:{bg:"$red11",color:"$surfaceLight"}},[`& ${Button}`]:{_focusWithin:{bg:"$red11"}}},nature:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$nature9",_hover:{boxShadow:"0 0 0 2px $colors$nature9"}},[`& ${r}`]:{_focus:{bg:"$nature11",color:"$surfaceLight"}},[`& ${Button}`]:{_focusWithin:{bg:"$nature11"}}},sunshine:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$sunshine10",_hover:{boxShadow:"0 0 0 2px $colors$sunshine10"}},[`& ${r}`]:{_focus:{bg:"$sunshine11",color:"$surfaceLight"}},[`& ${Button}`]:{_focusWithin:{bg:"$sunshine11"}}},violet:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$violet9",_hover:{boxShadow:"0 0 0 2px $colors$violet9"}},[`& ${r}`]:{_focus:{bg:"$violet11",color:"$surfaceLight"}},[`& ${Button}`]:{_focusWithin:{bg:"$violet11"}}},gray:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$gray9",_hover:{boxShadow:"0 0 0 2px $colors$gray9"}},[`& ${r}`]:{_focus:{bg:"$gray11",color:"$surfaceLight"}},[`& ${Button}`]:{_focusWithin:{bg:"$gray11"}}},primary:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$primary9",_hover:{boxShadow:"0 0 0 2px $colors$primary9"}},[`& ${r}`]:{_focus:{bg:"$primary11",color:"$surfaceLight"}},[`& ${Button}`]:{_focusWithin:{bg:"$primary11"}}},secondary:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$secondary9",_hover:{boxShadow:"0 0 0 2px $colors$secondary9"}},[`& ${r}`]:{_focus:{bg:"$secondary11",color:"$surfaceLight"}},[`& ${Button}`]:{_focusWithin:{bg:"$secondary11"}}},utilitary:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$utilitary9",_hover:{boxShadow:"0 0 0 2px $colors$utilitary9"}},[`& ${r}`]:{_focus:{bg:"$utilitary11",color:"$surfaceLight"}},[`& ${Button}`]:{_focusWithin:{bg:"$utilitary11"}}},unstyled:{boxShadow:"$none"}},size:{xs:{fontSize:"$xs",height:"$6",paddingInlineStart:"$1",paddingInlineEnd:"$1",[`& ${o}`]:{fontSize:"$xs",px:"$1",backgroundColor:"transparent"},[`& ${r}`]:{px:"$1"},[`& ${Button}`]:{py:4,paddingInlineStart:"$1",paddingInlineEnd:"$1",mr:4}},sm:{fontSize:"$sm",height:"$8",paddingInlineStart:"$1",paddingInlineEnd:"$1",[`& ${o}`]:{fontSize:"$sm",px:6,backgroundColor:"transparent"},[`& ${r}`]:{px:"$1",py:4},[`& ${Button}`]:{py:5,paddingInlineStart:"$2",paddingInlineEnd:"$2",mr:6}},md:{height:"$10",fontSize:"$md",paddingInlineStart:"$1",paddingInlineEnd:"$1",[`& ${o}`]:{fontSize:"$md",px:"$2",backgroundColor:"transparent"},[`& ${r}`]:{px:"$1",py:6},[`& ${Button}`]:{py:6,paddingInlineStart:"$2",paddingInlineEnd:"$2",mr:8}},lg:{height:"$12",fontSize:"$lg",paddingInlineStart:"$1",paddingInlineEnd:"$1",[`& ${o}`]:{fontSize:"$lg",px:"$2",backgroundColor:"transparent"},[`& ${r}`]:{px:"$1",py:8},[`& ${Button}`]:{py:10,paddingInlineStart:"$2",paddingInlineEnd:"$2",mr:8}},xl:{height:"$14",fontSize:"$xl",paddingInlineStart:"$3",paddingInlineEnd:"$3",[`& ${o}`]:{fontSize:"$xl",px:"$2",backgroundColor:"transparent"},[`& ${r}`]:{px:"$1",py:10},[`& ${Button}`]:{py:12,paddingInlineStart:"$3",paddingInlineEnd:"$3",mr:2}}},rounded:{none:{rounded:"$none",[`& ${Button}`]:{rounded:"$none"}},xs:{rounded:"$xs",[`& ${Button}`]:{rounded:"$xs"}},sm:{rounded:"$sm",[`& ${Button}`]:{rounded:"$sm"}},md:{rounded:"$md",[`& ${Button}`]:{rounded:"$md"}},lg:{rounded:"$lg",[`& ${Button}`]:{rounded:"$lg"}},xl:{rounded:"$xl",[`& ${Button}`]:{rounded:"$xl"}},"2xl":{rounded:"$2xl",[`& ${Button}`]:{rounded:"$2x"}},"3xl":{rounded:"$3xl",[`& ${Button}`]:{rounded:"$3x"}},full:{rounded:"$full",[`& ${Button}`]:{rounded:"$fu"}},base:{rounded:"$base",[`& ${Button}`]:{rounded:"$ba"}},halfBase:{rounded:"$halfBase",[`& ${Button}`]:{rounded:"$ha"}}}}});export const SpanSeparator=$("span",{px:"$2"});export const PopoverContent=$("div",{position:"absolute",top:"100%",left:0,mt:"$2",bg:"$surfaceLight",border:"1px solid $colors$gray7",rounded:"$base",zIndex:"$docked",variants:{isDatePicker:{true:{width:"$full"}},rounded:{none:{rounded:"$none"},xs:{rounded:"$xs"},sm:{rounded:"$sm"},md:{rounded:"$md"},lg:{rounded:"$lg"},xl:{rounded:"$xl"},"2xl":{rounded:"$2xl"},"3xl":{rounded:"$3xl"},full:{rounded:"$full"},base:{rounded:"$base"},halfBase:{rounded:"$halfBase"}}},defaultVariants:{isDatePicker:!1}});