t0ng7u
d146e45e2f
Add a Bun script to apply and normalize AGPL copyright headers across the default frontend source files. The script keeps headers idempotent, upgrades existing headers to the 2023-2026 QuantumNous range, and is exposed through `bun run copyright` for future maintenance.
192 lines
8.1 KiB
TypeScript
Vendored
192 lines
8.1 KiB
TypeScript
Vendored
/*
|
|
Copyright (C) 2023-2026 QuantumNous
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Affero General Public License as
|
|
published by the Free Software Foundation, either version 3 of the
|
|
License, or (at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Affero General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
|
|
For commercial licensing, please contact support@quantumnous.com
|
|
*/
|
|
import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu'
|
|
import { ArrowDown01Icon } from '@hugeicons/core-free-icons'
|
|
import { HugeiconsIcon } from '@hugeicons/react'
|
|
import { cva } from 'class-variance-authority'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
function NavigationMenu({
|
|
align = 'start',
|
|
className,
|
|
children,
|
|
...props
|
|
}: NavigationMenuPrimitive.Root.Props &
|
|
Pick<NavigationMenuPrimitive.Positioner.Props, 'align'>) {
|
|
return (
|
|
<NavigationMenuPrimitive.Root
|
|
data-slot='navigation-menu'
|
|
className={cn(
|
|
'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
<NavigationMenuPositioner align={align} />
|
|
</NavigationMenuPrimitive.Root>
|
|
)
|
|
}
|
|
|
|
function NavigationMenuList({
|
|
className,
|
|
...props
|
|
}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {
|
|
return (
|
|
<NavigationMenuPrimitive.List
|
|
data-slot='navigation-menu-list'
|
|
className={cn(
|
|
'group flex flex-1 list-none items-center justify-center gap-0',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function NavigationMenuItem({
|
|
className,
|
|
...props
|
|
}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {
|
|
return (
|
|
<NavigationMenuPrimitive.Item
|
|
data-slot='navigation-menu-item'
|
|
className={cn('relative', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const navigationMenuTriggerStyle = cva(
|
|
'group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted'
|
|
)
|
|
|
|
function NavigationMenuTrigger({
|
|
className,
|
|
children,
|
|
...props
|
|
}: NavigationMenuPrimitive.Trigger.Props) {
|
|
return (
|
|
<NavigationMenuPrimitive.Trigger
|
|
data-slot='navigation-menu-trigger'
|
|
className={cn(navigationMenuTriggerStyle(), 'group', className)}
|
|
{...props}
|
|
>
|
|
{children}{' '}
|
|
<HugeiconsIcon
|
|
icon={ArrowDown01Icon}
|
|
strokeWidth={2}
|
|
className='relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180'
|
|
aria-hidden='true'
|
|
/>
|
|
</NavigationMenuPrimitive.Trigger>
|
|
)
|
|
}
|
|
|
|
function NavigationMenuContent({
|
|
className,
|
|
...props
|
|
}: NavigationMenuPrimitive.Content.Props) {
|
|
return (
|
|
<NavigationMenuPrimitive.Content
|
|
data-slot='navigation-menu-content'
|
|
className={cn(
|
|
'data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:ring-foreground/10 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function NavigationMenuPositioner({
|
|
className,
|
|
side = 'bottom',
|
|
sideOffset = 8,
|
|
align = 'start',
|
|
alignOffset = 0,
|
|
...props
|
|
}: NavigationMenuPrimitive.Positioner.Props) {
|
|
return (
|
|
<NavigationMenuPrimitive.Portal>
|
|
<NavigationMenuPrimitive.Positioner
|
|
side={side}
|
|
sideOffset={sideOffset}
|
|
align={align}
|
|
alignOffset={alignOffset}
|
|
className={cn(
|
|
'isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<NavigationMenuPrimitive.Popup className='data-[ending-style]:easing-[ease] xs:w-(--popup-width) bg-popover text-popover-foreground ring-foreground/10 relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg shadow ring-1 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0'>
|
|
<NavigationMenuPrimitive.Viewport className='relative size-full overflow-hidden' />
|
|
</NavigationMenuPrimitive.Popup>
|
|
</NavigationMenuPrimitive.Positioner>
|
|
</NavigationMenuPrimitive.Portal>
|
|
)
|
|
}
|
|
|
|
function NavigationMenuLink({
|
|
className,
|
|
...props
|
|
}: NavigationMenuPrimitive.Link.Props) {
|
|
return (
|
|
<NavigationMenuPrimitive.Link
|
|
data-slot='navigation-menu-link'
|
|
className={cn(
|
|
"hover:bg-muted focus:bg-muted focus-visible:ring-ring/50 data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function NavigationMenuIndicator({
|
|
className,
|
|
...props
|
|
}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) {
|
|
return (
|
|
<NavigationMenuPrimitive.Icon
|
|
data-slot='navigation-menu-indicator'
|
|
className={cn(
|
|
'data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<div className='bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md' />
|
|
</NavigationMenuPrimitive.Icon>
|
|
)
|
|
}
|
|
|
|
export {
|
|
NavigationMenu,
|
|
NavigationMenuContent,
|
|
NavigationMenuIndicator,
|
|
NavigationMenuItem,
|
|
NavigationMenuLink,
|
|
NavigationMenuList,
|
|
NavigationMenuTrigger,
|
|
navigationMenuTriggerStyle,
|
|
NavigationMenuPositioner,
|
|
}
|