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

⚛️ React UI library by GuruHotel

import o from"react";import*as r from"@radix-ui/react-navigation-menu";import{keyframes as $,styled as i}from"../theme";import{ChevronDownRegular as a}from"../icons";import{jsx as e}from"react/jsx-runtime";import{jsxs as t}from"react/jsx-runtime";const s=$({from:{transform:"translateX(200px)",opacity:0},to:{transform:"translateX(0)",opacity:1}}),n=$({from:{transform:"translateX(-200px)",opacity:0},to:{transform:"translateX(0)",opacity:1}}),l=$({from:{transform:"translateX(0)",opacity:1},to:{transform:"translateX(200px)",opacity:0}}),d=$({from:{transform:"translateX(0)",opacity:1},to:{transform:"translateX(-200px)",opacity:0}}),c=$({from:{transform:"rotateX(-30deg) scale(0.9)",opacity:0},to:{transform:"rotateX(0deg) scale(1)",opacity:1}}),p=$({from:{transform:"rotateX(0deg) scale(1)",opacity:1},to:{transform:"rotateX(-10deg) scale(0.95)",opacity:0}}),u=$({from:{opacity:0},to:{opacity:1}}),m=$({from:{opacity:1},to:{opacity:0}}),g=$({from:{opacity:0},to:{opacity:1}}),f=$({from:{opacity:1},to:{opacity:0}});export const NavigationMenuRoot=i(r.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}});export const NavigationMenuList=i(r.List,{display:"flex",justifyContent:"center",backgroundColor:"white",padding:"$$listPadding",borderRadius:"$$outsideBorderRadius",listStyle:"none",boxShadow:"$$shadow",margin:0});const h={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"}};export const NavigationMenuTrigger=i(r.Trigger,{all:"unset",...h,color:"$$primaryColor",display:"flex",alignItems:"center",justifyContent:"space-between",gap:"$$iconGap"});export const NavigationMenuLink=i(r.Link,{...h,display:"block",textDecoration:"none",fontSize:"$$fontSize",lineHeight:1});export const NavigationMenuContent=i(r.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"}});export const NavigationMenuItem=i(r.Item,{});export const NavigationMenuSub=i(r.Sub,{});export const NavigationMenuIndicator=i(r.Indicator,{display:"flex",alignItems:"flex-end",justifyContent:"center",height:10,top:"100%",overflow:"hidden",zIndex:1,transition:"all 250ms ease",'&[data-state="visible"]':{animation:`${g} 200ms ease`},'&[data-state="hidden"]':{animation:`${f} 200ms ease`}});export const ViewportPosition=i("div",{position:"absolute",left:0,top:"100%",width:"100%",display:"flex",justifyContent:"center",perspective:"2000px"});export const NavigationMenuViewport=i(r.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:`${p} 200ms ease`}},follow:{top:"100%",'&[data-state="open"]':{animation:`${u} 200ms ease`},'&[data-state="closed"]':{animation:`${m} 200ms ease`}}}},defaultVariants:{layout:"default"}});export const List=i("ul",{display:"grid",padding:"$$listPadding",margin:0,columnGap:10,listStyle:"none",maxWidth:600});const C=i("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"}});export const ListItem=o.forwardRef((({children:o,title:$,description:i,...a},s)=>e("li",{children:e(r.Link,{asChild:!0,children:t(C,{...a,ref:s,children:[$&&e(y,{hasDescription:!!i,children:$}),i&&e(x,{children:i})]})})})));const y=i("div",{fontWeight:500,lineHeight:1.2,color:"$$headingColor",variants:{hasDescription:{true:{mb:"$1"}}}}),x=i("p",{all:"unset",color:"$gray11",lineHeight:1.4,fontWeight:"initial"});export const CaretDown=i(a,{position:"relative",top:1,transition:"transform 250ms ease","[data-state=open] &":{transform:"rotate(-180deg)"},ml:"$2",size:"$$iconSize","> path":{fill:"$$primaryColor"}});export const Arrow=i("div",{position:"relative",top:"70%",backgroundColor:"white",size:"$$iconSize",transform:"rotate(45deg)",borderTopLeftRadius:2});