@infinityfx/fluid/dist/components/navigation/navigation-menu/group.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useId as i,Children as o}from"react";import{createStyles as n}from"../../../core/style.js";import{combineClasses as t,classes as a}from"../../../core/utils.js";import{LayoutGroup as s,Morph as l}from"@infinityfx/lively/layout";import{useNavigationMenu as d}from"./root.js";import{Animatable as u}from"@infinityfx/lively";import{Icon as c}from"../../../core/icons.js";const m=n("navigation-menu.group",{".group":{position:"relative",display:"flex",justifyContent:"center"},".link":{position:"relative",padding:".4em .6em",borderRadius:"var(--f-radius-sml)",fontWeight:600,color:"var(--f-clr-text-100)",outline:"none",cursor:"pointer",lineHeight:1.25,display:"flex",alignItems:"center",gap:"var(--f-spacing-xsm)",WebkitTapHighlightColor:"transparent"},".link.round":{borderRadius:"1em"},".arrow":{display:"flex",transition:"rotate .35s",fontSize:".8em"},".selection":{position:"absolute",inset:0,borderRadius:"inherit",backgroundColor:"var(--f-clr-primary-400)",zIndex:-1},".menu":{position:"absolute",top:"calc(100% + var(--f-spacing-sml))",borderRadius:"calc(.25em + var(--f-radius-sml))",padding:".25em",backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",boxShadow:"var(--f-shadow-med)",overflow:"hidden",zIndex:99}});function p({children:n,cc:p={},label:f,round:g=!1,href:v,target:h,active:x=!1,position:y="center",Link:b="a",...N}){const k=t(m,p),j=i(),{root:w,id:R,selection:C,select:z}=d(),I=o.count(n)>0;return e("div",{className:k.group,children:[e(b,{className:a(k.link,g&&k.round),role:"menuitem",href:v,target:h,"aria-haspopup":I?"menu":void 0,"aria-expanded":I?j===C:void 0,"aria-controls":I?R+j:void 0,onMouseEnter:()=>z(j),onFocus:()=>z(j),onBlur:e=>{w.current?.contains(e.relatedTarget)||z(void 0)},children:[f,I&&r("div",{className:k.arrow,style:{rotate:j===C?"180deg":"0deg"},children:r(c,{type:"down"})}),r(s,{children:(C?j===C:x)&&r(l,{id:"fluid-navigation-menu-selection",group:`fluid-navigation-menu-selection-${R}`,cachable:["x","sx","borderRadius"],deform:!1,transition:{duration:.35},animate:{opacity:[1,0],duration:.25},triggers:[{on:"mount",reverse:!0},{on:"unmount"}],children:r("div",{className:k.selection})})})]}),r(s,{children:I&&j===C&&r(l,{id:"fluid-navigation-menu-group",group:`fluid-navigation-menu-group-${R}`,cachable:["x","y","sx","sy"],deform:!1,transition:{duration:.35},animate:{opacity:[1,0],translate:["0px 0px","0px -8px"],duration:.25},triggers:[{on:"mount",reverse:!0},{on:"unmount"}],children:r("div",{...N,id:R+j,role:"menu",className:a(k.menu,N.className),style:{...N.style,left:"start"===y?0:void 0,right:"end"===y?0:void 0},children:r(u,{stagger:.06,triggers:[{on:"mount",delay:.25}],children:n})})})})]})}p.displayName="NavigationMenu.Group";export{p as default};
//# sourceMappingURL=group.js.map