@guruhotel/aura-ui/cjs/navigation-menu/navigation-menu.styles.js

⚛️ React UI library by GuruHotel

var o=require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule=!0,exports.ViewportPosition=exports.NavigationMenuViewport=exports.NavigationMenuTrigger=exports.NavigationMenuSub=exports.NavigationMenuRoot=exports.NavigationMenuList=exports.NavigationMenuLink=exports.NavigationMenuItem=exports.NavigationMenuIndicator=exports.NavigationMenuContent=exports.ListItem=exports.List=exports.CaretDown=exports.Arrow=void 0;var r=o(require("react")),e=function(o,r){if(!r&&o&&o.__esModule)return o;if(null===o||"object"!=typeof o&&"function"!=typeof o)return{default:o};var e=$(r);if(e&&e.has(o))return e.get(o);var t={},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in o)if("default"!==i&&Object.prototype.hasOwnProperty.call(o,i)){var s=a?Object.getOwnPropertyDescriptor(o,i):null;s&&(s.get||s.set)?Object.defineProperty(t,i,s):t[i]=o[i]}t.default=o,e&&e.set(o,t);return t}(require("@radix-ui/react-navigation-menu")),t=require("../theme"),a=require("../icons"),i=require("react/jsx-runtime");function $(o){if("function"!=typeof WeakMap)return null;var r=new WeakMap,e=new WeakMap;return($=function(o){return o?e:r})(o)}const s=(0,t.keyframes)({from:{transform:"translateX(200px)",opacity:0},to:{transform:"translateX(0)",opacity:1}}),n=(0,t.keyframes)({from:{transform:"translateX(-200px)",opacity:0},to:{transform:"translateX(0)",opacity:1}}),l=(0,t.keyframes)({from:{transform:"translateX(0)",opacity:1},to:{transform:"translateX(200px)",opacity:0}}),d=(0,t.keyframes)({from:{transform:"translateX(0)",opacity:1},to:{transform:"translateX(-200px)",opacity:0}}),c=(0,t.keyframes)({from:{transform:"rotateX(-30deg) scale(0.9)",opacity:0},to:{transform:"rotateX(0deg) scale(1)",opacity:1}}),u=(0,t.keyframes)({from:{transform:"rotateX(0deg) scale(1)",opacity:1},to:{transform:"rotateX(-10deg) scale(0.95)",opacity:0}}),p=(0,t.keyframes)({from:{opacity:0},to:{opacity:1}}),m=(0,t.keyframes)({from:{opacity:1},to:{opacity:0}}),f=(0,t.keyframes)({from:{opacity:0},to:{opacity:1}}),g=(0,t.keyframes)({from:{opacity:1},to:{opacity:0}}),y=(0,t.styled)(e.Root,{position:"relative",display:"flex",justifyContent:"center",width:"100vw",zIndex:1,variants:{shadow:{false:{$$shadow:"none",$$listPadding:"$space$1"},true:{$$shadow:"0 2px 10px $colors$blackA7"}},size:{xs:{$$padding:"$space$1",$$listPadding:"$space$1",$$fontSize:"$fontSizes$sm",$$iconSize:"$space$1",$$iconGap:"$space$1"},sm:{$$padding:"$space$2",$$listPadding:"$space$2",$$fontSize:"$fontSizes$sm",$$iconSize:"$space$2",$$iconGap:"$space$1"},md:{$$padding:"$space$3",$$listPadding:"$space$3",$$fontSize:"$fontSizes$md",$$iconSize:"$space$3",$$iconGap:"$space$1"},lg:{$$padding:"$space$4",$$listPadding:"$space$4",$$fontSize:"$fontSizes$lg",$$iconSize:"$space$4",$$iconGap:"$space$2"}},rounded:{xs:{$$outsideBorderRadius:"$radii$sm",$$insideBorderRadius:"$radii$xs"},sm:{$$outsideBorderRadius:"$radii$md",$$insideBorderRadius:"$radii$sm"},md:{$$outsideBorderRadius:"$radii$lg",$$insideBorderRadius:"$radii$md"},lg:{$$outsideBorderRadius:"$radii$xl",$$insideBorderRadius:"$radii$lg"}},colorScheme:{guru:{$$primaryColor:"$colors$guru11",$$hoverColor:"$colors$guru3",$$focusColor:"$colors$guru7",$$disabledColor:"$colors$guru5",$$backgroundColor:"$colors$guru9",$$headingColor:"$colors$guru12"},darkie:{$$primaryColor:"$colors$darkie11",$$hoverColor:"$colors$darkie3",$$focusColor:"$colors$darkie7",$$disabledColor:"$colors$darkie5",$$backgroundColor:"$colors$darkie9",$$headingColor:"$colors$darkie12"},fellow:{$$primaryColor:"$colors$fellow11",$$hoverColor:"$colors$fellow3",$$focusColor:"$colors$fellow7",$$disabledColor:"$colors$fellow5",$$backgroundColor:"$colors$fellow9",$$headingColor:"$colors$fellow12"},red:{$$primaryColor:"$colors$red11",$$hoverColor:"$colors$red3",$$focusColor:"$colors$red7",$$disabledColor:"$colors$red5",$$backgroundColor:"$colors$red9",$$headingColor:"$colors$red12"},violet:{$$primaryColor:"$colors$violet11",$$hoverColor:"$colors$violet3",$$focusColor:"$colors$violet7",$$disabledColor:"$colors$violet5",$$backgroundColor:"$colors$violet9",$$headingColor:"$colors$violet12"},sunshine:{$$primaryColor:"$colors$sunshine11",$$hoverColor:"$colors$sunshine3",$$focusColor:"$colors$sunshine7",$$disabledColor:"$colors$sunshine5",$$backgroundColor:"$colors$sunshine9",$$headingColor:"$colors$sunshine12"},nature:{$$primaryColor:"$colors$nature11",$$hoverColor:"$colors$nature3",$$focusColor:"$colors$nature7",$$disabledColor:"$colors$nature5",$$backgroundColor:"$colors$nature9",$$headingColor:"$colors$nature12"},gray:{$$primaryColor:"$colors$gray11",$$hoverColor:"$colors$gray3",$$focusColor:"$colors$gray7",$$disabledColor:"$colors$gray5",$$backgroundColor:"$colors$gray9",$$headingColor:"$colors$gray12"},text:{$$primaryColor:"$colors$text11",$$hoverColor:"$colors$text3",$$focusColor:"$colors$text7",$$disabledColor:"$colors$text5",$$backgroundColor:"$colors$text9",$$headingColor:"$colors$text12"},primary:{$$primaryColor:"$colors$primary11",$$hoverColor:"$colors$primary3",$$focusColor:"$colors$primary7",$$disabledColor:"$colors$primary5",$$backgroundColor:"$colors$primary9",$$headingColor:"$colors$primary12"},secondary:{$$primaryColor:"$colors$secondary11",$$hoverColor:"$colors$secondary3",$$focusColor:"$colors$secondary7",$$disabledColor:"$colors$secondary5",$$backgroundColor:"$colors$secondary9",$$headingColor:"$colors$secondary12"},utilitary:{$$primaryColor:"$colors$utilitary11",$$hoverColor:"$colors$utilitary3",$$focusColor:"$colors$utilitary7",$$disabledColor:"$colors$utilitary5",$$backgroundColor:"$colors$utilitary9",$$headingColor:"$colors$utilitary12"}}},defaultVariants:{colorScheme:"guru",rounded:"lg",size:"md",shadow:!0}});exports.NavigationMenuRoot=y;const h=(0,t.styled)(e.List,{display:"flex",justifyContent:"center",backgroundColor:"white",padding:"$$listPadding",borderRadius:"$$outsideBorderRadius",listStyle:"none",boxShadow:"$$shadow",margin:0});exports.NavigationMenuList=h;const C={padding:"$$padding",outline:"none",userSelect:"none",fontWeight:500,lineHeight:1,borderRadius:"$$insideBorderRadius",fontSize:"$$fontSize",color:"$$primaryColor","&:focus":{boxShadow:"0 0 0 2px $$focusColor"},"&:hover":{backgroundColor:"$$hoverColor"}},x=(0,t.styled)(e.Trigger,{all:"unset",...C,color:"$$primaryColor",display:"flex",alignItems:"center",justifyContent:"space-between",gap:"$$iconGap"});exports.NavigationMenuTrigger=x;const v=(0,t.styled)(e.Link,{...C,display:"block",textDecoration:"none",fontSize:"$$fontSize",lineHeight:1});exports.NavigationMenuLink=v;const b=(0,t.styled)(e.Content,{variants:{layout:{default:{position:"absolute",top:0,left:0,width:"100%","@media only screen and (min-width: 600px)":{width:"auto"},animationDuration:"250ms",animationTimingFunction:"ease",'&[data-motion="from-start"]':{animationName:n},'&[data-motion="from-end"]':{animationName:s},'&[data-motion="to-start"]':{animationName:d},'&[data-motion="to-end"]':{animationName:l}},follow:{width:"max-content",maxWidth:500,transition:"all 250ms ease"}}},defaultVariants:{layout:"default"}});exports.NavigationMenuContent=b;const w=(0,t.styled)(e.Item,{});exports.NavigationMenuItem=w;const k=(0,t.styled)(e.Sub,{});exports.NavigationMenuSub=k;const S=(0,t.styled)(e.Indicator,{display:"flex",alignItems:"flex-end",justifyContent:"center",height:10,top:"100%",overflow:"hidden",zIndex:1,transition:"all 250ms ease",'&[data-state="visible"]':{animation:`${f} 200ms ease`},'&[data-state="hidden"]':{animation:`${g} 200ms ease`}});exports.NavigationMenuIndicator=S;const z=(0,t.styled)("div",{position:"absolute",left:0,top:"100%",width:"100%",display:"flex",justifyContent:"center",perspective:"2000px"});exports.ViewportPosition=z;const M=(0,t.styled)(e.Viewport,{position:"relative",marginTop:10,backgroundColor:"white",borderRadius:"$$outsideBorderRadius",overflow:"hidden",boxShadow:"$$shadow",transformOrigin:"top center",width:"100%",height:"var(--radix-navigation-menu-viewport-height)",transition:"width, height, 300ms ease","@media only screen and (min-width: 600px)":{width:"var(--radix-navigation-menu-viewport-width)"},variants:{layout:{default:{'&[data-state="open"]':{animation:`${c} 200ms ease`},'&[data-state="closed"]':{animation:`${u} 200ms ease`}},follow:{top:"100%",'&[data-state="open"]':{animation:`${p} 200ms ease`},'&[data-state="closed"]':{animation:`${m} 200ms ease`}}}},defaultVariants:{layout:"default"}});exports.NavigationMenuViewport=M;const R=(0,t.styled)("ul",{display:"grid",padding:"$$listPadding",margin:0,columnGap:10,listStyle:"none",maxWidth:600});exports.List=R;const N=(0,t.styled)("a",{display:"block",outline:"none",textDecoration:"none",userSelect:"none",padding:"$$listPadding",borderRadius:"$$insideBorderRadius",fontSize:"$$fontSize",lineHeight:1,"&:focus":{boxShadow:"0 0 0 2px $$focusColor"},"&:hover":{backgroundColor:"$gray3"}}),j=r.default.forwardRef((({children:o,title:r,description:t,...a},$)=>(0,i.jsx)("li",{children:(0,i.jsx)(e.Link,{asChild:!0,children:(0,i.jsxs)(N,{...a,ref:$,children:[r&&(0,i.jsx)(P,{hasDescription:!!t,children:r}),t&&(0,i.jsx)(B,{children:t})]})})})));exports.ListItem=j;const P=(0,t.styled)("div",{fontWeight:500,lineHeight:1.2,color:"$$headingColor",variants:{hasDescription:{true:{mb:"$1"}}}}),B=(0,t.styled)("p",{all:"unset",color:"$gray11",lineHeight:1.4,fontWeight:"initial"}),I=(0,t.styled)(a.ChevronDownRegular,{position:"relative",top:1,transition:"transform 250ms ease","[data-state=open] &":{transform:"rotate(-180deg)"},ml:"$2",size:"$$iconSize","> path":{fill:"$$primaryColor"}});exports.CaretDown=I;const L=(0,t.styled)("div",{position:"relative",top:"70%",backgroundColor:"white",size:"$$iconSize",transform:"rotate(45deg)",borderTopLeftRadius:2});exports.Arrow=L;