@ugurdemirel/landcraft 0.1.16 → 0.1.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/MegaMenu/MegaMenu.cjs +1 -1
- package/dist/cjs/components/MegaMenu/MegaMenu.cjs.map +1 -1
- package/dist/cjs/components/Navbar/Navbar.cjs +1 -1
- package/dist/cjs/components/Navbar/Navbar.cjs.map +1 -1
- package/dist/es/components/MegaMenu/MegaMenu.js +78 -72
- package/dist/es/components/MegaMenu/MegaMenu.js.map +1 -1
- package/dist/es/components/Navbar/Navbar.js +30 -26
- package/dist/es/components/Navbar/Navbar.js.map +1 -1
- package/dist/index.d.ts +8 -0
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),s=require("../../utils/cn.cjs"),J=require("../../utils/contrast.cjs"),x=require("../../icons.cjs"),B="text-on-secondary",b="text-foreground",Q={classic:{shell:"border-b border-border bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/75",bar:"mx-auto max-w-6xl px-5 sm:px-8",header:"px-0",trigger:"text-muted-foreground hover:text-foreground hover:bg-surface",triggerOpen:"bg-surface text-foreground",badge:"bg-primary-soft text-primary",panel:"border-border bg-surface shadow-raised",columnTitle:"text-muted-foreground/70",columnLink:"hover:bg-surface-strong",linkDescription:"text-muted-foreground",mobilePanel:"border-t border-border bg-background",mobileButton:`${b} hover:bg-surface`,mobileLink:"text-muted-foreground hover:bg-surface hover:text-foreground",brandText:b,brandDot:"bg-foreground"},floating:{shell:"px-0",bar:"mx-auto mt-3 max-w-5xl rounded-xl border border-border bg-surface/90 px-5 shadow-soft backdrop-blur-md supports-[backdrop-filter]:bg-surface/70",header:"px-3 sm:px-6",trigger:"text-muted-foreground hover:text-foreground hover:bg-surface",triggerOpen:"bg-surface text-foreground",badge:"bg-primary-soft text-primary",panel:"border-border bg-surface shadow-raised",columnTitle:"text-muted-foreground/70",columnLink:"hover:bg-surface-strong",linkDescription:"text-muted-foreground",mobilePanel:"mx-3 mb-3 max-w-5xl overflow-hidden rounded-b-xl border border-border bg-surface",mobileButton:`${b} hover:bg-surface`,mobileLink:"text-muted-foreground hover:bg-surface hover:text-foreground",brandText:b,brandDot:"bg-foreground"},inverse:{shell:"border-b border-white/10 bg-[#101010]/85 backdrop-blur-md",bar:"mx-auto max-w-6xl px-5 sm:px-8",header:"px-0",trigger:"text-on-secondary/60 hover:text-on-secondary hover:bg-white/10",triggerOpen:"bg-white/10 text-on-secondary",badge:"bg-white/15 text-on-secondary",panel:"border-white/10 bg-[#161616]",columnTitle:"text-on-secondary/45",columnLink:"hover:bg-white/10",linkDescription:"text-on-secondary/50",mobilePanel:"border-t border-white/10 bg-[#101010]",mobileButton:`${B} hover:bg-white/10`,mobileLink:"text-on-secondary/70 hover:bg-white/10 hover:text-on-secondary",brandText:B,brandDot:"bg-on-secondary"}},$=({className:q,variant:w="classic",brand:p,logo:E,logoSrc:k,logoAlt:_,logoClassName:I,brandHref:S="#",items:g,actions:m,cta:h,languageSwitcher:f,sticky:z=!0,LinkComponent:A,onKeyDown:v,...F})=>{const R=u.useId(),d=A??"a",[M,i]=u.useState(null),[c,j]=u.useState(!1),[y,C]=u.useState(null),o=Q[w],X=()=>i(null),N=()=>{i(null),j(!1),C(null)},L=r=>`${R}-panel-${r}`,T=E??(k?e.jsx("img",{src:k,alt:_??(typeof p=="string"?p:"Logo"),className:s.cn("h-7 w-auto",I)}):null),G=T?e.jsx("span",{className:"flex items-center",children:T}):e.jsxs("span",{className:s.cn("flex items-center gap-2 font-display text-[17px] font-bold tracking-tight",o.brandText),children:[e.jsx("span",{"aria-hidden":!0,className:s.cn("inline-block h-2.5 w-2.5 rounded-sm",o.brandDot)}),p]}),O=s.cn("flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150",o.trigger),D=r=>{var l;return e.jsx("div",{className:s.cn("grid gap-x-10 gap-y-8 sm:grid-cols-2",r.featured?"":"lg:grid-cols-3"),children:(l=r.columns)==null?void 0:l.map((n,t)=>e.jsxs("div",{children:[n.title?e.jsx("h4",{className:s.cn("text-xs font-semibold uppercase tracking-[0.14em]",o.columnTitle),children:n.title}):null,e.jsx("ul",{className:s.cn(n.title&&"mt-3","space-y-0.5"),children:n.links.map(a=>e.jsx("li",{children:e.jsxs(d,{href:a.href,onClick:N,target:a.external?"_blank":void 0,rel:a.external?"noopener noreferrer":void 0,className:s.cn("-mx-2 block rounded-md px-2 py-2 transition-colors duration-150",o.columnLink),children:[e.jsx("span",{className:"block text-sm font-medium text-foreground",children:a.label}),a.description?e.jsx("span",{className:s.cn("mt-0.5 block text-[13px] leading-snug",o.linkDescription),children:a.description}):null]})},a.href))})]},n.title??t))})},P=(r,l=!1)=>{const n=r.featured;if(!n)return null;const t=n.accent?{backgroundColor:n.accent,color:J.getContrastText(n.accent)}:void 0;return e.jsxs(d,{href:n.href,onClick:N,target:n.external?"_blank":void 0,rel:n.external?"noopener noreferrer":void 0,className:s.cn("group relative block overflow-hidden rounded-lg p-6 transition-transform duration-150 hover:-translate-y-0.5",l&&"mt-8",!n.accent&&"bg-primary text-on-primary"),style:t,children:[e.jsxs("div",{className:"flex h-full flex-col justify-between gap-4",children:[e.jsxs("div",{children:[e.jsx("h4",{className:"font-display text-base font-semibold tracking-tight",children:n.title}),n.description?e.jsx("p",{className:"mt-1.5 text-[13px] leading-relaxed opacity-80",children:n.description}):null]}),n.cta?e.jsxs("span",{className:"text-sm font-semibold underline decoration-1 underline-offset-4",children:[n.cta," →"]}):null]}),e.jsx("div",{"aria-hidden":!0,className:"pointer-events-none absolute -right-8 -top-8 h-28 w-28 rounded-full opacity-20 blur-2xl bg-black/40"})]})},H=r=>{r.key==="Escape"&&N(),v==null||v(r)};return e.jsxs("header",{className:s.cn("relative w-full transition-colors duration-200",z&&"sticky top-0 z-50",o.shell,o.header,q),onKeyDown:H,...F,children:[e.jsxs("nav",{className:s.cn("relative flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200",o.bar),onMouseLeave:X,"aria-label":"Mega menu",children:[e.jsx(d,{href:S,className:"shrink-0",children:G}),e.jsx("ul",{className:"hidden items-center gap-1 lg:flex",children:g.map((r,l)=>{var a;const n=!!((a=r.columns)!=null&&a.length||r.featured),t=M===l;return e.jsx("li",{className:"relative",children:n?e.jsxs("button",{type:"button","aria-haspopup":"true","aria-expanded":t,"aria-controls":L(l),onClick:()=>i(t?null:l),onMouseEnter:()=>i(l),className:s.cn(O,t&&o.triggerOpen),children:[e.jsxs("span",{className:"flex items-center gap-1.5",children:[r.label,r.badge?e.jsx("span",{className:s.cn("rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide",o.badge),children:r.badge}):null]}),e.jsx(x.ChevronDown,{className:s.cn("h-4 w-4 shrink-0 transition-transform duration-150",t&&"rotate-180")})]}):e.jsxs(d,{href:r.href??"#",target:r.external?"_blank":void 0,rel:r.external?"noopener noreferrer":void 0,className:O,children:[r.label,r.badge?e.jsx("span",{className:s.cn("rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide",o.badge),children:r.badge}):null]})},r.label)})}),e.jsxs("div",{className:"hidden items-center gap-3 lg:flex",children:[f,m,h]}),e.jsx("button",{type:"button","aria-label":c?"Close menu":"Open menu","aria-expanded":c,onClick:()=>j(r=>!r),className:s.cn("inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md lg:hidden","transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",o.mobileButton),children:c?e.jsx(x.X,{className:"h-5 w-5"}):e.jsx(x.Menu,{className:"h-5 w-5"})})]}),g.map((r,l)=>{var t;if(!((t=r.columns)!=null&&t.length)&&!r.featured)return null;const n=M===l;return e.jsx("div",{id:L(l),role:"region","aria-label":`${r.label} menu`,onMouseEnter:()=>i(l),className:s.cn("absolute top-full z-50 pt-2 transition-all duration-150",w==="floating"?"inset-x-0 mx-auto w-full max-w-5xl":"inset-x-0",n?"visible translate-y-0 opacity-100":"pointer-events-none invisible -translate-y-1 opacity-0"),children:e.jsxs("div",{className:s.cn("overflow-hidden rounded-xl border p-6 md:p-8",o.panel,r.featured?"lg:grid lg:grid-cols-[minmax(0,1fr)_auto] lg:gap-12":""),children:[D(r),r.featured&&e.jsx("div",{className:s.cn("mt-8 max-w-sm lg:mt-0 lg:w-64"),children:P(r)})]})},r.label)}),e.jsx("div",{className:s.cn("grid transition-[grid-template-rows,opacity] duration-200 lg:hidden",c?"grid-rows-[1fr] opacity-100":"grid-rows-[0fr] opacity-0",o.mobilePanel),children:e.jsx("div",{className:"min-h-0 overflow-hidden",children:e.jsxs("ul",{className:"flex flex-col py-4",children:[f?e.jsx("li",{className:"px-5 pb-4",children:f}):null,g.map((r,l)=>{var n;return(n=r.columns)!=null&&n.length||r.featured?e.jsxs("li",{className:"px-5",children:[e.jsxs("button",{type:"button","aria-expanded":y===l,onClick:()=>C(t=>t===l?null:l),className:s.cn("flex w-full items-center justify-between rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150",o.mobileButton),children:[e.jsxs("span",{className:"flex items-center gap-2",children:[r.label,r.badge?e.jsx("span",{className:s.cn("rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide",o.badge),children:r.badge}):null]}),e.jsx(x.ChevronDown,{className:s.cn("h-4 w-4 shrink-0 transition-transform duration-150",y===l&&"rotate-180")})]}),e.jsx("div",{className:s.cn("grid transition-[grid-template-rows,opacity] duration-200",y===l?"grid-rows-[1fr] opacity-100":"grid-rows-[0fr] opacity-0"),children:e.jsx("div",{className:"min-h-0 overflow-hidden",children:e.jsxs("div",{className:"py-2 pl-1",children:[D(r),r.featured?e.jsx("div",{className:"max-w-sm",children:P(r,!0)}):null]})})})]},r.label):e.jsx("li",{className:"px-5",children:e.jsx(d,{href:r.href??"#",target:r.external?"_blank":void 0,rel:r.external?"noopener noreferrer":void 0,onClick:()=>j(!1),className:s.cn("block rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150",o.mobileLink),children:r.label})},r.label)}),h?e.jsx("li",{className:"px-8 pb-2 pt-3",children:h}):m?e.jsx("li",{className:"mt-3 flex flex-wrap gap-3 px-8 pb-2",children:m}):null]})})})]})};$.displayName="MegaMenu";exports.MegaMenu=$;
|
|
3
3
|
//# sourceMappingURL=MegaMenu.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MegaMenu.cjs","sources":["../../../../src/components/MegaMenu/MegaMenu.tsx"],"sourcesContent":["\"use client\";\nimport { useId, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { getContrastText } from \"../../utils/contrast\";\nimport { ChevronDown, Menu, X } from \"../../icons\";\nimport type { MegaMenuProps, MegaMenuVariant, MegaMenuItem } from \"./types\";\n\ninterface MegaMenuStyle {\n shell: string;\n bar: string;\n header: string;\n trigger: string;\n triggerOpen: string;\n badge: string;\n panel: string;\n columnTitle: string;\n columnLink: string;\n linkDescription: string;\n mobilePanel: string;\n mobileButton: string;\n mobileLink: string;\n brandText: string;\n brandDot: string;\n}\n\nconst inverse = \"text-on-secondary\";\nconst light = \"text-foreground\";\n\nconst styles: Record<MegaMenuVariant, MegaMenuStyle> = {\n classic: {\n shell: \"border-b border-border bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/75\",\n bar: \"mx-auto max-w-6xl px-5 sm:px-8\",\n header: \"px-0\",\n trigger: \"text-muted-foreground hover:text-foreground hover:bg-surface\",\n triggerOpen: \"bg-surface text-foreground\",\n badge: \"bg-primary-soft text-primary\",\n panel: \"border-border bg-surface shadow-raised\",\n columnTitle: \"text-muted-foreground/70\",\n columnLink: \"hover:bg-surface-strong\",\n linkDescription: \"text-muted-foreground\",\n mobilePanel: \"border-t border-border bg-background\",\n mobileButton: `${light} hover:bg-surface`,\n mobileLink: \"text-muted-foreground hover:bg-surface hover:text-foreground\",\n brandText: light,\n brandDot: \"bg-foreground\",\n },\n floating: {\n shell: \"px-0\",\n bar: \"mx-auto mt-3 max-w-5xl rounded-xl border border-border bg-surface/90 px-5 shadow-soft backdrop-blur-md supports-[backdrop-filter]:bg-surface/70\",\n header: \"px-3 sm:px-6\",\n trigger: \"text-muted-foreground hover:text-foreground hover:bg-surface\",\n triggerOpen: \"bg-surface text-foreground\",\n badge: \"bg-primary-soft text-primary\",\n panel: \"border-border bg-surface shadow-raised\",\n columnTitle: \"text-muted-foreground/70\",\n columnLink: \"hover:bg-surface-strong\",\n linkDescription: \"text-muted-foreground\",\n mobilePanel: \"mx-3 mb-3 max-w-5xl overflow-hidden rounded-b-xl border border-border bg-surface\",\n mobileButton: `${light} hover:bg-surface`,\n mobileLink: \"text-muted-foreground hover:bg-surface hover:text-foreground\",\n brandText: light,\n brandDot: \"bg-foreground\",\n },\n inverse: {\n shell: \"border-b border-white/10 bg-[#101010]/85 backdrop-blur-md\",\n bar: \"mx-auto max-w-6xl px-5 sm:px-8\",\n header: \"px-0\",\n trigger: \"text-on-secondary/60 hover:text-on-secondary hover:bg-white/10\",\n triggerOpen: \"bg-white/10 text-on-secondary\",\n badge: \"bg-white/15 text-on-secondary\",\n panel: \"border-white/10 bg-[#161616]\",\n columnTitle: \"text-on-secondary/45\",\n columnLink: \"hover:bg-white/10\",\n linkDescription: \"text-on-secondary/50\",\n mobilePanel: \"border-t border-white/10 bg-[#101010]\",\n mobileButton: `${inverse} hover:bg-white/10`,\n mobileLink: \"text-on-secondary/70 hover:bg-white/10 hover:text-on-secondary\",\n brandText: inverse,\n brandDot: \"bg-on-secondary\",\n },\n};\n\nexport const MegaMenu = ({\n className,\n variant = \"classic\",\n brand,\n logo,\n logoSrc,\n logoAlt,\n logoClassName,\n brandHref = \"#\",\n items,\n actions,\n cta,\n languageSwitcher,\n sticky = true,\n LinkComponent,\n onKeyDown,\n ...props\n}: MegaMenuProps) => {\n const ids = useId();\n const Link = LinkComponent ?? \"a\";\n const [openIndex, setOpenIndex] = useState<number | null>(null);\n const [mobileOpen, setMobileOpen] = useState(false);\n const [mobileExpanded, setMobileExpanded] = useState<number | null>(null);\n const s = styles[variant];\n\n const closePanels = () => setOpenIndex(null);\n const closeAll = () => {\n setOpenIndex(null);\n setMobileOpen(false);\n setMobileExpanded(null);\n };\n\n const panelId = (i: number) => `${ids}-panel-${i}`;\n\n const logoNode =\n logo ??\n (logoSrc ? (\n <img\n src={logoSrc}\n alt={logoAlt ?? (typeof brand === \"string\" ? brand : \"Logo\")}\n className={cn(\"h-7 w-auto\", logoClassName)}\n />\n ) : null);\n\n const brandNode = logoNode ? (\n <span className=\"flex items-center\">{logoNode}</span>\n ) : (\n <span className={cn(\"flex items-center gap-2 font-display text-[17px] font-bold tracking-tight\", s.brandText)}>\n <span aria-hidden className={cn(\"inline-block h-2.5 w-2.5 rounded-sm\", s.brandDot)} />\n {brand}\n </span>\n );\n\n const triggerClasses = cn(\n \"flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150\",\n s.trigger,\n );\n\n const renderColumns = (item: MegaMenuItem) => (\n <div\n className={cn(\n \"grid gap-x-10 gap-y-8 sm:grid-cols-2\",\n item.featured ? \"\" : \"lg:grid-cols-3\",\n )}\n >\n {item.columns?.map((column, ci) => (\n <div key={column.title ?? ci}>\n {column.title ? (\n <h4\n className={cn(\n \"text-xs font-semibold uppercase tracking-[0.14em]\",\n s.columnTitle,\n )}\n >\n {column.title}\n </h4>\n ) : null}\n <ul className={cn(column.title && \"mt-3\", \"space-y-0.5\")}>\n {column.links.map((link) => (\n <li key={link.href}>\n <Link\n href={link.href}\n onClick={closeAll}\n className={cn(\n \"-mx-2 block rounded-md px-2 py-2 transition-colors duration-150\",\n s.columnLink,\n )}\n >\n <span className=\"block text-sm font-medium text-foreground\">\n {link.label}\n </span>\n {link.description ? (\n <span\n className={cn(\n \"mt-0.5 block text-[13px] leading-snug\",\n s.linkDescription,\n )}\n >\n {link.description}\n </span>\n ) : null}\n </Link>\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n );\n\n const renderFeatured = (item: MegaMenuItem, mobile = false) => {\n const featured = item.featured;\n if (!featured) return null;\n const featuredStyle = featured.accent\n ? { backgroundColor: featured.accent, color: getContrastText(featured.accent) }\n : undefined;\n\n return (\n <Link\n href={featured.href}\n onClick={closeAll}\n className={cn(\n \"group relative block overflow-hidden rounded-lg p-6 transition-transform duration-150 hover:-translate-y-0.5\",\n mobile && \"mt-8\",\n !featured.accent && \"bg-primary text-on-primary\",\n )}\n style={featuredStyle}\n >\n <div className=\"flex h-full flex-col justify-between gap-4\">\n <div>\n <h4 className=\"font-display text-base font-semibold tracking-tight\">\n {featured.title}\n </h4>\n {featured.description ? (\n <p className=\"mt-1.5 text-[13px] leading-relaxed opacity-80\">\n {featured.description}\n </p>\n ) : null}\n </div>\n {featured.cta ? (\n <span className=\"text-sm font-semibold underline decoration-1 underline-offset-4\">\n {featured.cta} →\n </span>\n ) : null}\n </div>\n <div\n aria-hidden\n className=\"pointer-events-none absolute -right-8 -top-8 h-28 w-28 rounded-full opacity-20 blur-2xl bg-black/40\"\n />\n </Link>\n );\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n if (event.key === \"Escape\") {\n closeAll();\n }\n onKeyDown?.(event);\n };\n\n return (\n <header\n className={cn(\n \"relative w-full transition-colors duration-200\",\n sticky && \"sticky top-0 z-50\",\n s.shell,\n s.header,\n className,\n )}\n onKeyDown={handleKeyDown}\n {...props}\n >\n <nav className={cn(\"relative flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200\", s.bar)} onMouseLeave={closePanels} aria-label=\"Mega menu\">\n <Link href={brandHref} className=\"shrink-0\">\n {brandNode}\n </Link>\n\n <ul className=\"hidden items-center gap-1 lg:flex\">\n {items.map((item, i) => {\n const hasPanel = Boolean(item.columns?.length || item.featured);\n const open = openIndex === i;\n return (\n <li key={item.label} className=\"relative\">\n {hasPanel ? (\n <button\n type=\"button\"\n aria-haspopup=\"true\"\n aria-expanded={open}\n aria-controls={panelId(i)}\n onClick={() => setOpenIndex(open ? null : i)}\n onMouseEnter={() => setOpenIndex(i)}\n className={cn(triggerClasses, open && s.triggerOpen)}\n >\n <span className=\"flex items-center gap-1.5\">\n {item.label}\n {item.badge ? (\n <span\n className={cn(\n \"rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide\",\n s.badge,\n )}\n >\n {item.badge}\n </span>\n ) : null}\n </span>\n <ChevronDown\n className={cn(\n \"h-4 w-4 shrink-0 transition-transform duration-150\",\n open && \"rotate-180\",\n )}\n />\n </button>\n ) : (\n <Link href={item.href ?? \"#\"} className={triggerClasses}>\n {item.label}\n {item.badge ? (\n <span className={cn(\"rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide\", s.badge)}>\n {item.badge}\n </span>\n ) : null}\n </Link>\n )}\n </li>\n );\n })}\n </ul>\n\n <div className=\"hidden items-center gap-3 lg:flex\">\n {languageSwitcher}\n {actions}\n {cta}\n </div>\n\n <button\n type=\"button\"\n aria-label={mobileOpen ? \"Close menu\" : \"Open menu\"}\n aria-expanded={mobileOpen}\n onClick={() => setMobileOpen((o) => !o)}\n className={cn(\n \"inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md lg:hidden\",\n \"transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n s.mobileButton,\n )}\n >\n {mobileOpen ? <X className=\"h-5 w-5\" /> : <Menu className=\"h-5 w-5\" />}\n </button>\n </nav>\n\n {items.map((item, i) => {\n if (!item.columns?.length && !item.featured) return null;\n const open = openIndex === i;\n return (\n <div\n key={item.label}\n id={panelId(i)}\n role=\"region\"\n aria-label={`${item.label} menu`}\n onMouseEnter={() => setOpenIndex(i)}\n className={cn(\n \"absolute top-full z-50 pt-2 transition-all duration-150\",\n variant === \"floating\" ? \"inset-x-0 mx-auto w-full max-w-5xl\" : \"inset-x-0\",\n open\n ? \"visible translate-y-0 opacity-100\"\n : \"pointer-events-none invisible -translate-y-1 opacity-0\",\n )}\n >\n <div\n className={cn(\n \"overflow-hidden rounded-xl border p-6 md:p-8\",\n s.panel,\n item.featured ? \"lg:grid lg:grid-cols-[minmax(0,1fr)_auto] lg:gap-12\" : \"\",\n )}\n >\n {renderColumns(item)}\n {item.featured && (\n <div className={cn(\"mt-8 max-w-sm lg:mt-0 lg:w-64\")}>\n {renderFeatured(item)}\n </div>\n )}\n </div>\n </div>\n );\n })}\n\n <div\n className={cn(\n \"grid transition-[grid-template-rows,opacity] duration-200 lg:hidden\",\n mobileOpen ? \"grid-rows-[1fr] opacity-100\" : \"grid-rows-[0fr] opacity-0\",\n s.mobilePanel,\n )}\n >\n <div className=\"min-h-0 overflow-hidden\">\n <ul className=\"flex flex-col py-4\">\n {languageSwitcher ? (\n <li className=\"px-5 pb-4\">{languageSwitcher}</li>\n ) : null}\n {items.map((item, i) =>\n item.columns?.length || item.featured ? (\n <li key={item.label} className=\"px-5\">\n <button\n type=\"button\"\n aria-expanded={mobileExpanded === i}\n onClick={() =>\n setMobileExpanded((prev) => (prev === i ? null : i))\n }\n className={cn(\n \"flex w-full items-center justify-between rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150\",\n s.mobileButton,\n )}\n >\n <span className=\"flex items-center gap-2\">\n {item.label}\n {item.badge ? (\n <span className={cn(\"rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide\", s.badge)}>\n {item.badge}\n </span>\n ) : null}\n </span>\n <ChevronDown\n className={cn(\n \"h-4 w-4 shrink-0 transition-transform duration-150\",\n mobileExpanded === i && \"rotate-180\",\n )}\n />\n </button>\n <div\n className={cn(\n \"grid transition-[grid-template-rows,opacity] duration-200\",\n mobileExpanded === i\n ? \"grid-rows-[1fr] opacity-100\"\n : \"grid-rows-[0fr] opacity-0\",\n )}\n >\n <div className=\"min-h-0 overflow-hidden\">\n <div className=\"py-2 pl-1\">\n {renderColumns(item)}\n {item.featured ? (\n <div className=\"max-w-sm\">{renderFeatured(item, true)}</div>\n ) : null}\n </div>\n </div>\n </div>\n </li>\n ) : (\n <li key={item.label} className=\"px-5\">\n <Link\n href={item.href ?? \"#\"}\n onClick={() => setMobileOpen(false)}\n className={cn(\n \"block rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150\",\n s.mobileLink,\n )}\n >\n {item.label}\n </Link>\n </li>\n ),\n )}\n {cta ? (\n <li className=\"px-8 pb-2 pt-3\">{cta}</li>\n ) : actions ? (\n <li className=\"mt-3 flex flex-wrap gap-3 px-8 pb-2\">{actions}</li>\n ) : null}\n </ul>\n </div>\n </div>\n </header>\n );\n};\nMegaMenu.displayName = \"MegaMenu\";"],"names":["inverse","light","styles","MegaMenu","className","variant","brand","logo","logoSrc","logoAlt","logoClassName","brandHref","items","actions","cta","languageSwitcher","sticky","LinkComponent","onKeyDown","props","ids","useId","Link","openIndex","setOpenIndex","useState","mobileOpen","setMobileOpen","mobileExpanded","setMobileExpanded","s","closePanels","closeAll","panelId","i","logoNode","jsx","cn","brandNode","jsxs","triggerClasses","renderColumns","item","column","ci","link","renderFeatured","mobile","featured","featuredStyle","getContrastText","handleKeyDown","event","hasPanel","_a","open","ChevronDown","o","X","Menu","prev"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MegaMenu.cjs","sources":["../../../../src/components/MegaMenu/MegaMenu.tsx"],"sourcesContent":["\"use client\";\nimport { useId, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { getContrastText } from \"../../utils/contrast\";\nimport { ChevronDown, Menu, X } from \"../../icons\";\nimport type { MegaMenuProps, MegaMenuVariant, MegaMenuItem } from \"./types\";\n\ninterface MegaMenuStyle {\n shell: string;\n bar: string;\n header: string;\n trigger: string;\n triggerOpen: string;\n badge: string;\n panel: string;\n columnTitle: string;\n columnLink: string;\n linkDescription: string;\n mobilePanel: string;\n mobileButton: string;\n mobileLink: string;\n brandText: string;\n brandDot: string;\n}\n\nconst inverse = \"text-on-secondary\";\nconst light = \"text-foreground\";\n\nconst styles: Record<MegaMenuVariant, MegaMenuStyle> = {\n classic: {\n shell: \"border-b border-border bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/75\",\n bar: \"mx-auto max-w-6xl px-5 sm:px-8\",\n header: \"px-0\",\n trigger: \"text-muted-foreground hover:text-foreground hover:bg-surface\",\n triggerOpen: \"bg-surface text-foreground\",\n badge: \"bg-primary-soft text-primary\",\n panel: \"border-border bg-surface shadow-raised\",\n columnTitle: \"text-muted-foreground/70\",\n columnLink: \"hover:bg-surface-strong\",\n linkDescription: \"text-muted-foreground\",\n mobilePanel: \"border-t border-border bg-background\",\n mobileButton: `${light} hover:bg-surface`,\n mobileLink: \"text-muted-foreground hover:bg-surface hover:text-foreground\",\n brandText: light,\n brandDot: \"bg-foreground\",\n },\n floating: {\n shell: \"px-0\",\n bar: \"mx-auto mt-3 max-w-5xl rounded-xl border border-border bg-surface/90 px-5 shadow-soft backdrop-blur-md supports-[backdrop-filter]:bg-surface/70\",\n header: \"px-3 sm:px-6\",\n trigger: \"text-muted-foreground hover:text-foreground hover:bg-surface\",\n triggerOpen: \"bg-surface text-foreground\",\n badge: \"bg-primary-soft text-primary\",\n panel: \"border-border bg-surface shadow-raised\",\n columnTitle: \"text-muted-foreground/70\",\n columnLink: \"hover:bg-surface-strong\",\n linkDescription: \"text-muted-foreground\",\n mobilePanel: \"mx-3 mb-3 max-w-5xl overflow-hidden rounded-b-xl border border-border bg-surface\",\n mobileButton: `${light} hover:bg-surface`,\n mobileLink: \"text-muted-foreground hover:bg-surface hover:text-foreground\",\n brandText: light,\n brandDot: \"bg-foreground\",\n },\n inverse: {\n shell: \"border-b border-white/10 bg-[#101010]/85 backdrop-blur-md\",\n bar: \"mx-auto max-w-6xl px-5 sm:px-8\",\n header: \"px-0\",\n trigger: \"text-on-secondary/60 hover:text-on-secondary hover:bg-white/10\",\n triggerOpen: \"bg-white/10 text-on-secondary\",\n badge: \"bg-white/15 text-on-secondary\",\n panel: \"border-white/10 bg-[#161616]\",\n columnTitle: \"text-on-secondary/45\",\n columnLink: \"hover:bg-white/10\",\n linkDescription: \"text-on-secondary/50\",\n mobilePanel: \"border-t border-white/10 bg-[#101010]\",\n mobileButton: `${inverse} hover:bg-white/10`,\n mobileLink: \"text-on-secondary/70 hover:bg-white/10 hover:text-on-secondary\",\n brandText: inverse,\n brandDot: \"bg-on-secondary\",\n },\n};\n\nexport const MegaMenu = ({\n className,\n variant = \"classic\",\n brand,\n logo,\n logoSrc,\n logoAlt,\n logoClassName,\n brandHref = \"#\",\n items,\n actions,\n cta,\n languageSwitcher,\n sticky = true,\n LinkComponent,\n onKeyDown,\n ...props\n}: MegaMenuProps) => {\n const ids = useId();\n const Link = LinkComponent ?? \"a\";\n const [openIndex, setOpenIndex] = useState<number | null>(null);\n const [mobileOpen, setMobileOpen] = useState(false);\n const [mobileExpanded, setMobileExpanded] = useState<number | null>(null);\n const s = styles[variant];\n\n const closePanels = () => setOpenIndex(null);\n const closeAll = () => {\n setOpenIndex(null);\n setMobileOpen(false);\n setMobileExpanded(null);\n };\n\n const panelId = (i: number) => `${ids}-panel-${i}`;\n\n const logoNode =\n logo ??\n (logoSrc ? (\n <img\n src={logoSrc}\n alt={logoAlt ?? (typeof brand === \"string\" ? brand : \"Logo\")}\n className={cn(\"h-7 w-auto\", logoClassName)}\n />\n ) : null);\n\n const brandNode = logoNode ? (\n <span className=\"flex items-center\">{logoNode}</span>\n ) : (\n <span className={cn(\"flex items-center gap-2 font-display text-[17px] font-bold tracking-tight\", s.brandText)}>\n <span aria-hidden className={cn(\"inline-block h-2.5 w-2.5 rounded-sm\", s.brandDot)} />\n {brand}\n </span>\n );\n\n const triggerClasses = cn(\n \"flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150\",\n s.trigger,\n );\n\n const renderColumns = (item: MegaMenuItem) => (\n <div\n className={cn(\n \"grid gap-x-10 gap-y-8 sm:grid-cols-2\",\n item.featured ? \"\" : \"lg:grid-cols-3\",\n )}\n >\n {item.columns?.map((column, ci) => (\n <div key={column.title ?? ci}>\n {column.title ? (\n <h4\n className={cn(\n \"text-xs font-semibold uppercase tracking-[0.14em]\",\n s.columnTitle,\n )}\n >\n {column.title}\n </h4>\n ) : null}\n <ul className={cn(column.title && \"mt-3\", \"space-y-0.5\")}>\n {column.links.map((link) => (\n <li key={link.href}>\n <Link\n href={link.href}\n onClick={closeAll}\n target={link.external ? \"_blank\" : undefined}\n rel={link.external ? \"noopener noreferrer\" : undefined}\n className={cn(\n \"-mx-2 block rounded-md px-2 py-2 transition-colors duration-150\",\n s.columnLink,\n )}\n >\n <span className=\"block text-sm font-medium text-foreground\">\n {link.label}\n </span>\n {link.description ? (\n <span\n className={cn(\n \"mt-0.5 block text-[13px] leading-snug\",\n s.linkDescription,\n )}\n >\n {link.description}\n </span>\n ) : null}\n </Link>\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n );\n\n const renderFeatured = (item: MegaMenuItem, mobile = false) => {\n const featured = item.featured;\n if (!featured) return null;\n const featuredStyle = featured.accent\n ? { backgroundColor: featured.accent, color: getContrastText(featured.accent) }\n : undefined;\n\n return (\n <Link\n href={featured.href}\n onClick={closeAll}\n target={featured.external ? \"_blank\" : undefined}\n rel={featured.external ? \"noopener noreferrer\" : undefined}\n className={cn(\n \"group relative block overflow-hidden rounded-lg p-6 transition-transform duration-150 hover:-translate-y-0.5\",\n mobile && \"mt-8\",\n !featured.accent && \"bg-primary text-on-primary\",\n )}\n style={featuredStyle}\n >\n <div className=\"flex h-full flex-col justify-between gap-4\">\n <div>\n <h4 className=\"font-display text-base font-semibold tracking-tight\">\n {featured.title}\n </h4>\n {featured.description ? (\n <p className=\"mt-1.5 text-[13px] leading-relaxed opacity-80\">\n {featured.description}\n </p>\n ) : null}\n </div>\n {featured.cta ? (\n <span className=\"text-sm font-semibold underline decoration-1 underline-offset-4\">\n {featured.cta} →\n </span>\n ) : null}\n </div>\n <div\n aria-hidden\n className=\"pointer-events-none absolute -right-8 -top-8 h-28 w-28 rounded-full opacity-20 blur-2xl bg-black/40\"\n />\n </Link>\n );\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n if (event.key === \"Escape\") {\n closeAll();\n }\n onKeyDown?.(event);\n };\n\n return (\n <header\n className={cn(\n \"relative w-full transition-colors duration-200\",\n sticky && \"sticky top-0 z-50\",\n s.shell,\n s.header,\n className,\n )}\n onKeyDown={handleKeyDown}\n {...props}\n >\n <nav className={cn(\"relative flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200\", s.bar)} onMouseLeave={closePanels} aria-label=\"Mega menu\">\n <Link href={brandHref} className=\"shrink-0\">\n {brandNode}\n </Link>\n\n <ul className=\"hidden items-center gap-1 lg:flex\">\n {items.map((item, i) => {\n const hasPanel = Boolean(item.columns?.length || item.featured);\n const open = openIndex === i;\n return (\n <li key={item.label} className=\"relative\">\n {hasPanel ? (\n <button\n type=\"button\"\n aria-haspopup=\"true\"\n aria-expanded={open}\n aria-controls={panelId(i)}\n onClick={() => setOpenIndex(open ? null : i)}\n onMouseEnter={() => setOpenIndex(i)}\n className={cn(triggerClasses, open && s.triggerOpen)}\n >\n <span className=\"flex items-center gap-1.5\">\n {item.label}\n {item.badge ? (\n <span\n className={cn(\n \"rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide\",\n s.badge,\n )}\n >\n {item.badge}\n </span>\n ) : null}\n </span>\n <ChevronDown\n className={cn(\n \"h-4 w-4 shrink-0 transition-transform duration-150\",\n open && \"rotate-180\",\n )}\n />\n </button>\n ) : (\n <Link href={item.href ?? \"#\"} target={item.external ? \"_blank\" : undefined} rel={item.external ? \"noopener noreferrer\" : undefined} className={triggerClasses}>\n {item.label}\n {item.badge ? (\n <span className={cn(\"rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide\", s.badge)}>\n {item.badge}\n </span>\n ) : null}\n </Link>\n )}\n </li>\n );\n })}\n </ul>\n\n <div className=\"hidden items-center gap-3 lg:flex\">\n {languageSwitcher}\n {actions}\n {cta}\n </div>\n\n <button\n type=\"button\"\n aria-label={mobileOpen ? \"Close menu\" : \"Open menu\"}\n aria-expanded={mobileOpen}\n onClick={() => setMobileOpen((o) => !o)}\n className={cn(\n \"inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md lg:hidden\",\n \"transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n s.mobileButton,\n )}\n >\n {mobileOpen ? <X className=\"h-5 w-5\" /> : <Menu className=\"h-5 w-5\" />}\n </button>\n </nav>\n\n {items.map((item, i) => {\n if (!item.columns?.length && !item.featured) return null;\n const open = openIndex === i;\n return (\n <div\n key={item.label}\n id={panelId(i)}\n role=\"region\"\n aria-label={`${item.label} menu`}\n onMouseEnter={() => setOpenIndex(i)}\n className={cn(\n \"absolute top-full z-50 pt-2 transition-all duration-150\",\n variant === \"floating\" ? \"inset-x-0 mx-auto w-full max-w-5xl\" : \"inset-x-0\",\n open\n ? \"visible translate-y-0 opacity-100\"\n : \"pointer-events-none invisible -translate-y-1 opacity-0\",\n )}\n >\n <div\n className={cn(\n \"overflow-hidden rounded-xl border p-6 md:p-8\",\n s.panel,\n item.featured ? \"lg:grid lg:grid-cols-[minmax(0,1fr)_auto] lg:gap-12\" : \"\",\n )}\n >\n {renderColumns(item)}\n {item.featured && (\n <div className={cn(\"mt-8 max-w-sm lg:mt-0 lg:w-64\")}>\n {renderFeatured(item)}\n </div>\n )}\n </div>\n </div>\n );\n })}\n\n <div\n className={cn(\n \"grid transition-[grid-template-rows,opacity] duration-200 lg:hidden\",\n mobileOpen ? \"grid-rows-[1fr] opacity-100\" : \"grid-rows-[0fr] opacity-0\",\n s.mobilePanel,\n )}\n >\n <div className=\"min-h-0 overflow-hidden\">\n <ul className=\"flex flex-col py-4\">\n {languageSwitcher ? (\n <li className=\"px-5 pb-4\">{languageSwitcher}</li>\n ) : null}\n {items.map((item, i) =>\n item.columns?.length || item.featured ? (\n <li key={item.label} className=\"px-5\">\n <button\n type=\"button\"\n aria-expanded={mobileExpanded === i}\n onClick={() =>\n setMobileExpanded((prev) => (prev === i ? null : i))\n }\n className={cn(\n \"flex w-full items-center justify-between rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150\",\n s.mobileButton,\n )}\n >\n <span className=\"flex items-center gap-2\">\n {item.label}\n {item.badge ? (\n <span className={cn(\"rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide\", s.badge)}>\n {item.badge}\n </span>\n ) : null}\n </span>\n <ChevronDown\n className={cn(\n \"h-4 w-4 shrink-0 transition-transform duration-150\",\n mobileExpanded === i && \"rotate-180\",\n )}\n />\n </button>\n <div\n className={cn(\n \"grid transition-[grid-template-rows,opacity] duration-200\",\n mobileExpanded === i\n ? \"grid-rows-[1fr] opacity-100\"\n : \"grid-rows-[0fr] opacity-0\",\n )}\n >\n <div className=\"min-h-0 overflow-hidden\">\n <div className=\"py-2 pl-1\">\n {renderColumns(item)}\n {item.featured ? (\n <div className=\"max-w-sm\">{renderFeatured(item, true)}</div>\n ) : null}\n </div>\n </div>\n </div>\n </li>\n ) : (\n <li key={item.label} className=\"px-5\">\n <Link\n href={item.href ?? \"#\"}\n target={item.external ? \"_blank\" : undefined}\n rel={item.external ? \"noopener noreferrer\" : undefined}\n onClick={() => setMobileOpen(false)}\n className={cn(\n \"block rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150\",\n s.mobileLink,\n )}\n >\n {item.label}\n </Link>\n </li>\n ),\n )}\n {cta ? (\n <li className=\"px-8 pb-2 pt-3\">{cta}</li>\n ) : actions ? (\n <li className=\"mt-3 flex flex-wrap gap-3 px-8 pb-2\">{actions}</li>\n ) : null}\n </ul>\n </div>\n </div>\n </header>\n );\n};\nMegaMenu.displayName = \"MegaMenu\";"],"names":["inverse","light","styles","MegaMenu","className","variant","brand","logo","logoSrc","logoAlt","logoClassName","brandHref","items","actions","cta","languageSwitcher","sticky","LinkComponent","onKeyDown","props","ids","useId","Link","openIndex","setOpenIndex","useState","mobileOpen","setMobileOpen","mobileExpanded","setMobileExpanded","s","closePanels","closeAll","panelId","i","logoNode","jsx","cn","brandNode","jsxs","triggerClasses","renderColumns","item","column","ci","link","renderFeatured","mobile","featured","featuredStyle","getContrastText","handleKeyDown","event","hasPanel","_a","open","ChevronDown","o","X","Menu","prev"],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),q=require("react"),
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),q=require("react"),n=require("../../utils/cn.cjs"),p=require("../../icons.cjs"),f="text-on-secondary",s="text-foreground",B={classic:{shell:"border-b border-border bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/75",bar:"mx-auto max-w-6xl px-5 sm:px-8",header:"px-0",link:"text-muted-foreground hover:text-foreground",mobilePanel:"border-t border-border bg-background",mobileLink:"text-muted-foreground hover:bg-surface hover:text-foreground",menuButton:`${s} hover:bg-surface`,brandText:s,brandDot:"bg-foreground",desktopList:"hidden items-center gap-7 md:flex"},floating:{shell:"px-0",bar:"mx-auto mt-3 max-w-5xl rounded-xl border border-border bg-surface/90 px-5 shadow-soft backdrop-blur-md supports-[backdrop-filter]:bg-surface/70",header:"px-3 sm:px-6",link:"text-muted-foreground hover:text-foreground",mobilePanel:"mx-3 mb-3 max-w-5xl overflow-hidden rounded-b-xl border border-border bg-surface",mobileLink:"text-muted-foreground hover:bg-surface hover:text-foreground",menuButton:`${s} hover:bg-surface`,brandText:s,brandDot:"bg-foreground",desktopList:"hidden items-center gap-7 md:flex"},inverse:{shell:"border-b border-white/10 bg-[#101010]/85 backdrop-blur-md",bar:"mx-auto max-w-6xl px-5 sm:px-8",header:"px-0",link:"text-on-secondary/60 hover:text-on-secondary",mobilePanel:"border-t border-white/10 bg-[#101010]",mobileLink:"text-on-secondary/70 hover:bg-white/10 hover:text-on-secondary",menuButton:`${f} hover:bg-white/10`,brandText:f,brandDot:"bg-on-secondary",desktopList:"hidden items-center gap-7 md:flex"}},g=({className:v,variant:x="classic",brand:a,logo:j,logoSrc:b,logoAlt:N,logoClassName:k,brandHref:w="#",links:m,actions:d,cta:l,languageSwitcher:i,sticky:y=!0,LinkComponent:L,...P})=>{const[t,u]=q.useState(!1),c=L??"a",o=B[x],h=j??(b?e.jsx("img",{src:b,alt:N??(typeof a=="string"?a:"Logo"),className:n.cn("h-7 w-auto",k)}):null),T=h?e.jsx("span",{className:"flex items-center",children:h}):e.jsxs("span",{className:n.cn("flex items-center gap-2 font-display text-[17px] font-bold tracking-tight",o.brandText),children:[e.jsx("span",{"aria-hidden":!0,className:n.cn("inline-block h-2.5 w-2.5 rounded-sm",o.brandDot)}),a]});return e.jsxs("header",{className:n.cn("w-full transition-colors duration-200",y&&"sticky top-0 z-50",o.shell,o.header,v),...P,children:[e.jsxs("nav",{className:n.cn("flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200",o.bar),"aria-label":"Main navigation",children:[e.jsx(c,{href:w,className:"shrink-0",children:T}),e.jsx("ul",{className:o.desktopList,children:m.map(r=>e.jsx("li",{children:e.jsx(c,{href:r.href,target:r.external?"_blank":void 0,rel:r.external?"noopener noreferrer":void 0,className:n.cn("text-sm font-medium transition-colors duration-150",o.link),children:r.label})},r.href))}),e.jsxs("div",{className:"hidden items-center gap-3 md:flex",children:[i,d,l]}),e.jsx("button",{type:"button","aria-label":t?"Close menu":"Open menu","aria-expanded":t,onClick:()=>u(r=>!r),className:n.cn("inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md md:hidden","transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",o.menuButton),children:t?e.jsx(p.X,{className:"h-5 w-5"}):e.jsx(p.Menu,{className:"h-5 w-5"})})]}),e.jsx("div",{className:n.cn("grid transition-[grid-template-rows,opacity] duration-200 md:hidden",t?"grid-rows-[1fr] opacity-100":"grid-rows-[0fr] opacity-0",o.mobilePanel),children:e.jsx("div",{className:"min-h-0 overflow-hidden",children:e.jsxs("ul",{className:n.cn("flex flex-col py-4",x!=="floating"&&"px-5"),children:[i?e.jsx("li",{className:"px-2 pb-4",children:i}):null,m.map(r=>e.jsx("li",{children:e.jsx(c,{href:r.href,target:r.external?"_blank":void 0,rel:r.external?"noopener noreferrer":void 0,onClick:()=>u(!1),className:n.cn("block rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150",o.mobileLink),children:r.label})},r.href)),l?e.jsx("li",{className:"mt-3 px-2 pb-2",children:l}):d?e.jsx("li",{className:"mt-3 flex flex-wrap gap-3 px-2 pb-2",children:d}):null]})})})]})};g.displayName="Navbar";exports.Navbar=g;
|
|
3
3
|
//# sourceMappingURL=Navbar.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navbar.cjs","sources":["../../../../src/components/Navbar/Navbar.tsx"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Menu, X } from \"../../icons\";\nimport type { NavbarProps, NavbarVariant } from \"./types\";\n\ninterface NavbarStyle {\n shell: string;\n bar: string;\n header: string;\n link: string;\n mobilePanel: string;\n mobileLink: string;\n menuButton: string;\n brandText: string;\n brandDot: string;\n desktopList: string;\n}\n\nconst inverse = \"text-on-secondary\";\nconst light = \"text-foreground\";\n\nconst styles: Record<NavbarVariant, NavbarStyle> = {\n classic: {\n shell: \"border-b border-border bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/75\",\n bar: \"mx-auto max-w-6xl px-5 sm:px-8\",\n header: \"px-0\",\n link: \"text-muted-foreground hover:text-foreground\",\n mobilePanel: \"border-t border-border bg-background\",\n mobileLink:\n \"text-muted-foreground hover:bg-surface hover:text-foreground\",\n menuButton: `${light} hover:bg-surface`,\n brandText: light,\n brandDot: \"bg-foreground\",\n desktopList: \"hidden items-center gap-7 md:flex\",\n },\n floating: {\n shell: \"px-0\",\n bar: \"mx-auto mt-3 max-w-5xl rounded-xl border border-border bg-surface/90 px-5 shadow-soft backdrop-blur-md supports-[backdrop-filter]:bg-surface/70\",\n header: \"px-3 sm:px-6\",\n link: \"text-muted-foreground hover:text-foreground\",\n mobilePanel:\n \"mx-3 mb-3 max-w-5xl overflow-hidden rounded-b-xl border border-border bg-surface\",\n mobileLink:\n \"text-muted-foreground hover:bg-surface hover:text-foreground\",\n menuButton: `${light} hover:bg-surface`,\n brandText: light,\n brandDot: \"bg-foreground\",\n desktopList: \"hidden items-center gap-7 md:flex\",\n },\n inverse: {\n shell: \"border-b border-white/10 bg-[#101010]/85 backdrop-blur-md\",\n bar: \"mx-auto max-w-6xl px-5 sm:px-8\",\n header: \"px-0\",\n link: \"text-on-secondary/60 hover:text-on-secondary\",\n mobilePanel: \"border-t border-white/10 bg-[#101010]\",\n mobileLink:\n \"text-on-secondary/70 hover:bg-white/10 hover:text-on-secondary\",\n menuButton: `${inverse} hover:bg-white/10`,\n brandText: inverse,\n brandDot: \"bg-on-secondary\",\n desktopList: \"hidden items-center gap-7 md:flex\",\n },\n};\n\nexport const Navbar = ({\n className,\n variant = \"classic\",\n brand,\n logo,\n logoSrc,\n logoAlt,\n logoClassName,\n brandHref = \"#\",\n links,\n actions,\n cta,\n languageSwitcher,\n sticky = true,\n LinkComponent,\n ...props\n}: NavbarProps) => {\n const [open, setOpen] = useState(false);\n const Link = LinkComponent ?? \"a\";\n const s = styles[variant];\n\n const logoNode =\n logo ??\n (logoSrc ? (\n <img\n src={logoSrc}\n alt={logoAlt ?? (typeof brand === \"string\" ? brand : \"Logo\")}\n className={cn(\"h-7 w-auto\", logoClassName)}\n />\n ) : null);\n\n const brandNode = logoNode ? (\n <span className=\"flex items-center\">{logoNode}</span>\n ) : (\n <span className={cn(\"flex items-center gap-2 font-display text-[17px] font-bold tracking-tight\", s.brandText)}>\n <span aria-hidden className={cn(\"inline-block h-2.5 w-2.5 rounded-sm\", s.brandDot)} />\n {brand}\n </span>\n );\n\n return (\n <header className={cn(\"w-full transition-colors duration-200\", sticky && \"sticky top-0 z-50\", s.shell, s.header, className)} {...props}>\n <nav className={cn(\"flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200\", s.bar)} aria-label=\"Main navigation\">\n <Link href={brandHref} className=\"shrink-0\">\n {brandNode}\n </Link>\n\n <ul className={s.desktopList}>\n {links.map((link) => (\n <li key={link.href}>\n <Link\n href={link.href}\n className={cn(\"text-sm font-medium transition-colors duration-150\", s.link)}\n >\n {link.label}\n </Link>\n </li>\n ))}\n </ul>\n\n <div className=\"hidden items-center gap-3 md:flex\">\n {languageSwitcher}\n {actions}\n {cta}\n </div>\n\n <button\n type=\"button\"\n aria-label={open ? \"Close menu\" : \"Open menu\"}\n aria-expanded={open}\n onClick={() => setOpen((o) => !o)}\n className={cn(\n \"inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md md:hidden\",\n \"transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n s.menuButton,\n )}\n >\n {open ? <X className=\"h-5 w-5\" /> : <Menu className=\"h-5 w-5\" />}\n </button>\n </nav>\n\n <div\n className={cn(\n \"grid transition-[grid-template-rows,opacity] duration-200 md:hidden\",\n open ? \"grid-rows-[1fr] opacity-100\" : \"grid-rows-[0fr] opacity-0\",\n s.mobilePanel,\n )}\n >\n <div className=\"min-h-0 overflow-hidden\">\n <ul className={cn(\"flex flex-col py-4\", variant !== \"floating\" && \"px-5\")}>\n {languageSwitcher ? (\n <li className=\"px-2 pb-4\">{languageSwitcher}</li>\n ) : null}\n {links.map((link) => (\n <li key={link.href}>\n <Link\n href={link.href}\n onClick={() => setOpen(false)}\n className={cn(\n \"block rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150\",\n s.mobileLink,\n )}\n >\n {link.label}\n </Link>\n </li>\n ))}\n {cta ? (\n <li className=\"mt-3 px-2 pb-2\">{cta}</li>\n ) : actions ? (\n <li className=\"mt-3 flex flex-wrap gap-3 px-2 pb-2\">{actions}</li>\n ) : null}\n </ul>\n </div>\n </div>\n </header>\n );\n};\nNavbar.displayName = \"Navbar\";"],"names":["inverse","light","styles","Navbar","className","variant","brand","logo","logoSrc","logoAlt","logoClassName","brandHref","links","actions","cta","languageSwitcher","sticky","LinkComponent","props","open","setOpen","useState","Link","s","logoNode","jsx","cn","brandNode","jsxs","link","o","X","Menu"],"mappings":"qMAmBMA,EAAU,oBACVC,EAAQ,kBAERC,EAA6C,CACjD,QAAS,CACP,MAAO,uGACP,IAAK,iCACL,OAAQ,OACR,KAAM,8CACN,YAAa,uCACb,WACE,+DACF,WAAY,GAAGD,CAAK,oBACpB,UAAWA,EACX,SAAU,gBACV,YAAa,mCAAA,EAEf,SAAU,CACR,MAAO,OACP,IAAK,kJACL,OAAQ,eACR,KAAM,8CACN,YACE,mFACF,WACE,+DACF,WAAY,GAAGA,CAAK,oBACpB,UAAWA,EACX,SAAU,gBACV,YAAa,mCAAA,EAEf,QAAS,CACP,MAAO,4DACP,IAAK,iCACL,OAAQ,OACR,KAAM,+CACN,YAAa,wCACb,WACE,iEACF,WAAY,GAAGD,CAAO,qBACtB,UAAWA,EACX,SAAU,kBACV,YAAa,mCAAA,CAEjB,EAEaG,EAAS,CAAC,CACrB,UAAAC,EACA,QAAAC,EAAU,UACV,MAAAC,EACA,KAAAC,EACA,QAAAC,EACA,QAAAC,EACA,cAAAC,EACA,UAAAC,EAAY,IACZ,MAAAC,EACA,QAAAC,EACA,IAAAC,EACA,iBAAAC,EACA,OAAAC,EAAS,GACT,cAAAC,EACA,GAAGC,CACL,IAAmB,CACjB,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAK,EAChCC,EAAOL,GAAiB,IACxBM,EAAIrB,EAAOG,CAAO,EAElBmB,EACJjB,IACCC,EACCiB,EAAAA,IAAC,MAAA,CACC,IAAKjB,EACL,IAAKC,IAAY,OAAOH,GAAU,SAAWA,EAAQ,QACrD,UAAWoB,EAAAA,GAAG,aAAchB,CAAa,CAAA,CAAA,EAEzC,MAEAiB,EAAYH,EAChBC,MAAC,OAAA,CAAK,UAAU,oBAAqB,SAAAD,CAAA,CAAS,EAE9CI,OAAC,QAAK,UAAWF,EAAAA,GAAG,4EAA6EH,EAAE,SAAS,EAC1G,SAAA,CAAAE,EAAAA,IAAC,OAAA,CAAK,cAAW,GAAC,UAAWC,EAAAA,GAAG,sCAAuCH,EAAE,QAAQ,EAAG,EACnFjB,CAAA,EACH,EAGF,OACEsB,EAAAA,KAAC,SAAA,CAAO,UAAWF,EAAAA,GAAG,wCAAyCV,GAAU,oBAAqBO,EAAE,MAAOA,EAAE,OAAQnB,CAAS,EAAI,GAAGc,EAC/H,SAAA,CAAAU,EAAAA,KAAC,MAAA,CAAI,UAAWF,KAAG,qFAAsFH,EAAE,GAAG,EAAG,aAAW,kBAC1H,SAAA,CAAAE,MAACH,EAAA,CAAK,KAAMX,EAAW,UAAU,WAC9B,SAAAgB,EACH,EAEAF,EAAAA,IAAC,KAAA,CAAG,UAAWF,EAAE,YACd,WAAM,IAAKM,GACVJ,EAAAA,IAAC,KAAA,CACC,SAAAA,EAAAA,IAACH,EAAA,CACC,KAAMO,EAAK,KACX,UAAWH,EAAAA,GAAG,qDAAsDH,EAAE,IAAI,EAEzE,SAAAM,EAAK,KAAA,CAAA,CACR,
|
|
1
|
+
{"version":3,"file":"Navbar.cjs","sources":["../../../../src/components/Navbar/Navbar.tsx"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Menu, X } from \"../../icons\";\nimport type { NavbarProps, NavbarVariant } from \"./types\";\n\ninterface NavbarStyle {\n shell: string;\n bar: string;\n header: string;\n link: string;\n mobilePanel: string;\n mobileLink: string;\n menuButton: string;\n brandText: string;\n brandDot: string;\n desktopList: string;\n}\n\nconst inverse = \"text-on-secondary\";\nconst light = \"text-foreground\";\n\nconst styles: Record<NavbarVariant, NavbarStyle> = {\n classic: {\n shell: \"border-b border-border bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/75\",\n bar: \"mx-auto max-w-6xl px-5 sm:px-8\",\n header: \"px-0\",\n link: \"text-muted-foreground hover:text-foreground\",\n mobilePanel: \"border-t border-border bg-background\",\n mobileLink:\n \"text-muted-foreground hover:bg-surface hover:text-foreground\",\n menuButton: `${light} hover:bg-surface`,\n brandText: light,\n brandDot: \"bg-foreground\",\n desktopList: \"hidden items-center gap-7 md:flex\",\n },\n floating: {\n shell: \"px-0\",\n bar: \"mx-auto mt-3 max-w-5xl rounded-xl border border-border bg-surface/90 px-5 shadow-soft backdrop-blur-md supports-[backdrop-filter]:bg-surface/70\",\n header: \"px-3 sm:px-6\",\n link: \"text-muted-foreground hover:text-foreground\",\n mobilePanel:\n \"mx-3 mb-3 max-w-5xl overflow-hidden rounded-b-xl border border-border bg-surface\",\n mobileLink:\n \"text-muted-foreground hover:bg-surface hover:text-foreground\",\n menuButton: `${light} hover:bg-surface`,\n brandText: light,\n brandDot: \"bg-foreground\",\n desktopList: \"hidden items-center gap-7 md:flex\",\n },\n inverse: {\n shell: \"border-b border-white/10 bg-[#101010]/85 backdrop-blur-md\",\n bar: \"mx-auto max-w-6xl px-5 sm:px-8\",\n header: \"px-0\",\n link: \"text-on-secondary/60 hover:text-on-secondary\",\n mobilePanel: \"border-t border-white/10 bg-[#101010]\",\n mobileLink:\n \"text-on-secondary/70 hover:bg-white/10 hover:text-on-secondary\",\n menuButton: `${inverse} hover:bg-white/10`,\n brandText: inverse,\n brandDot: \"bg-on-secondary\",\n desktopList: \"hidden items-center gap-7 md:flex\",\n },\n};\n\nexport const Navbar = ({\n className,\n variant = \"classic\",\n brand,\n logo,\n logoSrc,\n logoAlt,\n logoClassName,\n brandHref = \"#\",\n links,\n actions,\n cta,\n languageSwitcher,\n sticky = true,\n LinkComponent,\n ...props\n}: NavbarProps) => {\n const [open, setOpen] = useState(false);\n const Link = LinkComponent ?? \"a\";\n const s = styles[variant];\n\n const logoNode =\n logo ??\n (logoSrc ? (\n <img\n src={logoSrc}\n alt={logoAlt ?? (typeof brand === \"string\" ? brand : \"Logo\")}\n className={cn(\"h-7 w-auto\", logoClassName)}\n />\n ) : null);\n\n const brandNode = logoNode ? (\n <span className=\"flex items-center\">{logoNode}</span>\n ) : (\n <span className={cn(\"flex items-center gap-2 font-display text-[17px] font-bold tracking-tight\", s.brandText)}>\n <span aria-hidden className={cn(\"inline-block h-2.5 w-2.5 rounded-sm\", s.brandDot)} />\n {brand}\n </span>\n );\n\n return (\n <header className={cn(\"w-full transition-colors duration-200\", sticky && \"sticky top-0 z-50\", s.shell, s.header, className)} {...props}>\n <nav className={cn(\"flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200\", s.bar)} aria-label=\"Main navigation\">\n <Link href={brandHref} className=\"shrink-0\">\n {brandNode}\n </Link>\n\n <ul className={s.desktopList}>\n {links.map((link) => (\n <li key={link.href}>\n <Link\n href={link.href}\n target={link.external ? \"_blank\" : undefined}\n rel={link.external ? \"noopener noreferrer\" : undefined}\n className={cn(\"text-sm font-medium transition-colors duration-150\", s.link)}\n >\n {link.label}\n </Link>\n </li>\n ))}\n </ul>\n\n <div className=\"hidden items-center gap-3 md:flex\">\n {languageSwitcher}\n {actions}\n {cta}\n </div>\n\n <button\n type=\"button\"\n aria-label={open ? \"Close menu\" : \"Open menu\"}\n aria-expanded={open}\n onClick={() => setOpen((o) => !o)}\n className={cn(\n \"inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md md:hidden\",\n \"transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n s.menuButton,\n )}\n >\n {open ? <X className=\"h-5 w-5\" /> : <Menu className=\"h-5 w-5\" />}\n </button>\n </nav>\n\n <div\n className={cn(\n \"grid transition-[grid-template-rows,opacity] duration-200 md:hidden\",\n open ? \"grid-rows-[1fr] opacity-100\" : \"grid-rows-[0fr] opacity-0\",\n s.mobilePanel,\n )}\n >\n <div className=\"min-h-0 overflow-hidden\">\n <ul className={cn(\"flex flex-col py-4\", variant !== \"floating\" && \"px-5\")}>\n {languageSwitcher ? (\n <li className=\"px-2 pb-4\">{languageSwitcher}</li>\n ) : null}\n {links.map((link) => (\n <li key={link.href}>\n <Link\n href={link.href}\n target={link.external ? \"_blank\" : undefined}\n rel={link.external ? \"noopener noreferrer\" : undefined}\n onClick={() => setOpen(false)}\n className={cn(\n \"block rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150\",\n s.mobileLink,\n )}\n >\n {link.label}\n </Link>\n </li>\n ))}\n {cta ? (\n <li className=\"mt-3 px-2 pb-2\">{cta}</li>\n ) : actions ? (\n <li className=\"mt-3 flex flex-wrap gap-3 px-2 pb-2\">{actions}</li>\n ) : null}\n </ul>\n </div>\n </div>\n </header>\n );\n};\nNavbar.displayName = \"Navbar\";"],"names":["inverse","light","styles","Navbar","className","variant","brand","logo","logoSrc","logoAlt","logoClassName","brandHref","links","actions","cta","languageSwitcher","sticky","LinkComponent","props","open","setOpen","useState","Link","s","logoNode","jsx","cn","brandNode","jsxs","link","o","X","Menu"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as r, jsxs as a } from "react/jsx-runtime";
|
|
3
3
|
import { useId as R, useState as w } from "react";
|
|
4
|
-
import { cn as
|
|
4
|
+
import { cn as l } from "../../utils/cn.js";
|
|
5
5
|
import { getContrastText as U } from "../../utils/contrast.js";
|
|
6
6
|
import { ChevronDown as P, X as V, Menu as W } from "../../icons.js";
|
|
7
7
|
const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
@@ -60,33 +60,33 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
60
60
|
className: E,
|
|
61
61
|
variant: k = "classic",
|
|
62
62
|
brand: p,
|
|
63
|
-
logo:
|
|
63
|
+
logo: _,
|
|
64
64
|
logoSrc: C,
|
|
65
|
-
logoAlt:
|
|
66
|
-
logoClassName:
|
|
67
|
-
brandHref:
|
|
68
|
-
items:
|
|
69
|
-
actions:
|
|
70
|
-
cta:
|
|
71
|
-
languageSwitcher:
|
|
72
|
-
sticky:
|
|
73
|
-
LinkComponent:
|
|
74
|
-
onKeyDown:
|
|
65
|
+
logoAlt: I,
|
|
66
|
+
logoClassName: z,
|
|
67
|
+
brandHref: A = "#",
|
|
68
|
+
items: g,
|
|
69
|
+
actions: m,
|
|
70
|
+
cta: f,
|
|
71
|
+
languageSwitcher: x,
|
|
72
|
+
sticky: F = !0,
|
|
73
|
+
LinkComponent: X,
|
|
74
|
+
onKeyDown: h,
|
|
75
75
|
...q
|
|
76
76
|
}) => {
|
|
77
|
-
const G = R(), i =
|
|
77
|
+
const G = R(), i = X ?? "a", [L, c] = w(null), [u, v] = w(!1), [y, M] = w(null), t = Y[k], H = () => c(null), N = () => {
|
|
78
78
|
c(null), v(!1), M(null);
|
|
79
|
-
}, T = (e) => `${G}-panel-${e}`, O =
|
|
79
|
+
}, T = (e) => `${G}-panel-${e}`, O = _ ?? (C ? /* @__PURE__ */ r(
|
|
80
80
|
"img",
|
|
81
81
|
{
|
|
82
82
|
src: C,
|
|
83
|
-
alt:
|
|
84
|
-
className:
|
|
83
|
+
alt: I ?? (typeof p == "string" ? p : "Logo"),
|
|
84
|
+
className: l("h-7 w-auto", z)
|
|
85
85
|
}
|
|
86
|
-
) : null), J = O ? /* @__PURE__ */ r("span", { className: "flex items-center", children: O }) : /* @__PURE__ */ a("span", { className:
|
|
87
|
-
/* @__PURE__ */ r("span", { "aria-hidden": !0, className:
|
|
86
|
+
) : null), J = O ? /* @__PURE__ */ r("span", { className: "flex items-center", children: O }) : /* @__PURE__ */ a("span", { className: l("flex items-center gap-2 font-display text-[17px] font-bold tracking-tight", t.brandText), children: [
|
|
87
|
+
/* @__PURE__ */ r("span", { "aria-hidden": !0, className: l("inline-block h-2.5 w-2.5 rounded-sm", t.brandDot) }),
|
|
88
88
|
p
|
|
89
|
-
] }), D =
|
|
89
|
+
] }), D = l(
|
|
90
90
|
"flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150",
|
|
91
91
|
t.trigger
|
|
92
92
|
), j = (e) => {
|
|
@@ -94,27 +94,29 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
94
94
|
return /* @__PURE__ */ r(
|
|
95
95
|
"div",
|
|
96
96
|
{
|
|
97
|
-
className:
|
|
97
|
+
className: l(
|
|
98
98
|
"grid gap-x-10 gap-y-8 sm:grid-cols-2",
|
|
99
99
|
e.featured ? "" : "lg:grid-cols-3"
|
|
100
100
|
),
|
|
101
|
-
children: (o = e.columns) == null ? void 0 : o.map((
|
|
102
|
-
|
|
101
|
+
children: (o = e.columns) == null ? void 0 : o.map((n, s) => /* @__PURE__ */ a("div", { children: [
|
|
102
|
+
n.title ? /* @__PURE__ */ r(
|
|
103
103
|
"h4",
|
|
104
104
|
{
|
|
105
|
-
className:
|
|
105
|
+
className: l(
|
|
106
106
|
"text-xs font-semibold uppercase tracking-[0.14em]",
|
|
107
107
|
t.columnTitle
|
|
108
108
|
),
|
|
109
|
-
children:
|
|
109
|
+
children: n.title
|
|
110
110
|
}
|
|
111
111
|
) : null,
|
|
112
|
-
/* @__PURE__ */ r("ul", { className: n
|
|
112
|
+
/* @__PURE__ */ r("ul", { className: l(n.title && "mt-3", "space-y-0.5"), children: n.links.map((d) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ a(
|
|
113
113
|
i,
|
|
114
114
|
{
|
|
115
115
|
href: d.href,
|
|
116
116
|
onClick: N,
|
|
117
|
-
|
|
117
|
+
target: d.external ? "_blank" : void 0,
|
|
118
|
+
rel: d.external ? "noopener noreferrer" : void 0,
|
|
119
|
+
className: l(
|
|
118
120
|
"-mx-2 block rounded-md px-2 py-2 transition-colors duration-150",
|
|
119
121
|
t.columnLink
|
|
120
122
|
),
|
|
@@ -123,7 +125,7 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
123
125
|
d.description ? /* @__PURE__ */ r(
|
|
124
126
|
"span",
|
|
125
127
|
{
|
|
126
|
-
className:
|
|
128
|
+
className: l(
|
|
127
129
|
"mt-0.5 block text-[13px] leading-snug",
|
|
128
130
|
t.linkDescription
|
|
129
131
|
),
|
|
@@ -133,32 +135,34 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
133
135
|
]
|
|
134
136
|
}
|
|
135
137
|
) }, d.href)) })
|
|
136
|
-
] },
|
|
138
|
+
] }, n.title ?? s))
|
|
137
139
|
}
|
|
138
140
|
);
|
|
139
141
|
}, B = (e, o = !1) => {
|
|
140
|
-
const
|
|
141
|
-
if (!
|
|
142
|
-
const s =
|
|
142
|
+
const n = e.featured;
|
|
143
|
+
if (!n) return null;
|
|
144
|
+
const s = n.accent ? { backgroundColor: n.accent, color: U(n.accent) } : void 0;
|
|
143
145
|
return /* @__PURE__ */ a(
|
|
144
146
|
i,
|
|
145
147
|
{
|
|
146
|
-
href:
|
|
148
|
+
href: n.href,
|
|
147
149
|
onClick: N,
|
|
148
|
-
|
|
150
|
+
target: n.external ? "_blank" : void 0,
|
|
151
|
+
rel: n.external ? "noopener noreferrer" : void 0,
|
|
152
|
+
className: l(
|
|
149
153
|
"group relative block overflow-hidden rounded-lg p-6 transition-transform duration-150 hover:-translate-y-0.5",
|
|
150
154
|
o && "mt-8",
|
|
151
|
-
!
|
|
155
|
+
!n.accent && "bg-primary text-on-primary"
|
|
152
156
|
),
|
|
153
157
|
style: s,
|
|
154
158
|
children: [
|
|
155
159
|
/* @__PURE__ */ a("div", { className: "flex h-full flex-col justify-between gap-4", children: [
|
|
156
160
|
/* @__PURE__ */ a("div", { children: [
|
|
157
|
-
/* @__PURE__ */ r("h4", { className: "font-display text-base font-semibold tracking-tight", children:
|
|
158
|
-
|
|
161
|
+
/* @__PURE__ */ r("h4", { className: "font-display text-base font-semibold tracking-tight", children: n.title }),
|
|
162
|
+
n.description ? /* @__PURE__ */ r("p", { className: "mt-1.5 text-[13px] leading-relaxed opacity-80", children: n.description }) : null
|
|
159
163
|
] }),
|
|
160
|
-
|
|
161
|
-
|
|
164
|
+
n.cta ? /* @__PURE__ */ a("span", { className: "text-sm font-semibold underline decoration-1 underline-offset-4", children: [
|
|
165
|
+
n.cta,
|
|
162
166
|
" →"
|
|
163
167
|
] }) : null
|
|
164
168
|
] }),
|
|
@@ -173,14 +177,14 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
173
177
|
}
|
|
174
178
|
);
|
|
175
179
|
}, Q = (e) => {
|
|
176
|
-
e.key === "Escape" && N(),
|
|
180
|
+
e.key === "Escape" && N(), h == null || h(e);
|
|
177
181
|
};
|
|
178
182
|
return /* @__PURE__ */ a(
|
|
179
183
|
"header",
|
|
180
184
|
{
|
|
181
|
-
className:
|
|
185
|
+
className: l(
|
|
182
186
|
"relative w-full transition-colors duration-200",
|
|
183
|
-
|
|
187
|
+
F && "sticky top-0 z-50",
|
|
184
188
|
t.shell,
|
|
185
189
|
t.header,
|
|
186
190
|
E
|
|
@@ -188,12 +192,12 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
188
192
|
onKeyDown: Q,
|
|
189
193
|
...q,
|
|
190
194
|
children: [
|
|
191
|
-
/* @__PURE__ */ a("nav", { className:
|
|
192
|
-
/* @__PURE__ */ r(i, { href:
|
|
193
|
-
/* @__PURE__ */ r("ul", { className: "hidden items-center gap-1 lg:flex", children:
|
|
195
|
+
/* @__PURE__ */ a("nav", { className: l("relative flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200", t.bar), onMouseLeave: H, "aria-label": "Mega menu", children: [
|
|
196
|
+
/* @__PURE__ */ r(i, { href: A, className: "shrink-0", children: J }),
|
|
197
|
+
/* @__PURE__ */ r("ul", { className: "hidden items-center gap-1 lg:flex", children: g.map((e, o) => {
|
|
194
198
|
var d;
|
|
195
|
-
const
|
|
196
|
-
return /* @__PURE__ */ r("li", { className: "relative", children:
|
|
199
|
+
const n = !!((d = e.columns) != null && d.length || e.featured), s = L === o;
|
|
200
|
+
return /* @__PURE__ */ r("li", { className: "relative", children: n ? /* @__PURE__ */ a(
|
|
197
201
|
"button",
|
|
198
202
|
{
|
|
199
203
|
type: "button",
|
|
@@ -202,14 +206,14 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
202
206
|
"aria-controls": T(o),
|
|
203
207
|
onClick: () => c(s ? null : o),
|
|
204
208
|
onMouseEnter: () => c(o),
|
|
205
|
-
className:
|
|
209
|
+
className: l(D, s && t.triggerOpen),
|
|
206
210
|
children: [
|
|
207
211
|
/* @__PURE__ */ a("span", { className: "flex items-center gap-1.5", children: [
|
|
208
212
|
e.label,
|
|
209
213
|
e.badge ? /* @__PURE__ */ r(
|
|
210
214
|
"span",
|
|
211
215
|
{
|
|
212
|
-
className:
|
|
216
|
+
className: l(
|
|
213
217
|
"rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide",
|
|
214
218
|
t.badge
|
|
215
219
|
),
|
|
@@ -220,7 +224,7 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
220
224
|
/* @__PURE__ */ r(
|
|
221
225
|
P,
|
|
222
226
|
{
|
|
223
|
-
className:
|
|
227
|
+
className: l(
|
|
224
228
|
"h-4 w-4 shrink-0 transition-transform duration-150",
|
|
225
229
|
s && "rotate-180"
|
|
226
230
|
)
|
|
@@ -228,15 +232,15 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
228
232
|
)
|
|
229
233
|
]
|
|
230
234
|
}
|
|
231
|
-
) : /* @__PURE__ */ a(i, { href: e.href ?? "#", className: D, children: [
|
|
235
|
+
) : /* @__PURE__ */ a(i, { href: e.href ?? "#", target: e.external ? "_blank" : void 0, rel: e.external ? "noopener noreferrer" : void 0, className: D, children: [
|
|
232
236
|
e.label,
|
|
233
|
-
e.badge ? /* @__PURE__ */ r("span", { className:
|
|
237
|
+
e.badge ? /* @__PURE__ */ r("span", { className: l("rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide", t.badge), children: e.badge }) : null
|
|
234
238
|
] }) }, e.label);
|
|
235
239
|
}) }),
|
|
236
240
|
/* @__PURE__ */ a("div", { className: "hidden items-center gap-3 lg:flex", children: [
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
241
|
+
x,
|
|
242
|
+
m,
|
|
243
|
+
f
|
|
240
244
|
] }),
|
|
241
245
|
/* @__PURE__ */ r(
|
|
242
246
|
"button",
|
|
@@ -245,7 +249,7 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
245
249
|
"aria-label": u ? "Close menu" : "Open menu",
|
|
246
250
|
"aria-expanded": u,
|
|
247
251
|
onClick: () => v((e) => !e),
|
|
248
|
-
className:
|
|
252
|
+
className: l(
|
|
249
253
|
"inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md lg:hidden",
|
|
250
254
|
"transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
251
255
|
t.mobileButton
|
|
@@ -254,10 +258,10 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
254
258
|
}
|
|
255
259
|
)
|
|
256
260
|
] }),
|
|
257
|
-
|
|
261
|
+
g.map((e, o) => {
|
|
258
262
|
var s;
|
|
259
263
|
if (!((s = e.columns) != null && s.length) && !e.featured) return null;
|
|
260
|
-
const
|
|
264
|
+
const n = L === o;
|
|
261
265
|
return /* @__PURE__ */ r(
|
|
262
266
|
"div",
|
|
263
267
|
{
|
|
@@ -265,22 +269,22 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
265
269
|
role: "region",
|
|
266
270
|
"aria-label": `${e.label} menu`,
|
|
267
271
|
onMouseEnter: () => c(o),
|
|
268
|
-
className:
|
|
272
|
+
className: l(
|
|
269
273
|
"absolute top-full z-50 pt-2 transition-all duration-150",
|
|
270
274
|
k === "floating" ? "inset-x-0 mx-auto w-full max-w-5xl" : "inset-x-0",
|
|
271
|
-
|
|
275
|
+
n ? "visible translate-y-0 opacity-100" : "pointer-events-none invisible -translate-y-1 opacity-0"
|
|
272
276
|
),
|
|
273
277
|
children: /* @__PURE__ */ a(
|
|
274
278
|
"div",
|
|
275
279
|
{
|
|
276
|
-
className:
|
|
280
|
+
className: l(
|
|
277
281
|
"overflow-hidden rounded-xl border p-6 md:p-8",
|
|
278
282
|
t.panel,
|
|
279
283
|
e.featured ? "lg:grid lg:grid-cols-[minmax(0,1fr)_auto] lg:gap-12" : ""
|
|
280
284
|
),
|
|
281
285
|
children: [
|
|
282
286
|
j(e),
|
|
283
|
-
e.featured && /* @__PURE__ */ r("div", { className:
|
|
287
|
+
e.featured && /* @__PURE__ */ r("div", { className: l("mt-8 max-w-sm lg:mt-0 lg:w-64"), children: B(e) })
|
|
284
288
|
]
|
|
285
289
|
}
|
|
286
290
|
)
|
|
@@ -291,36 +295,36 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
291
295
|
/* @__PURE__ */ r(
|
|
292
296
|
"div",
|
|
293
297
|
{
|
|
294
|
-
className:
|
|
298
|
+
className: l(
|
|
295
299
|
"grid transition-[grid-template-rows,opacity] duration-200 lg:hidden",
|
|
296
300
|
u ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
|
|
297
301
|
t.mobilePanel
|
|
298
302
|
),
|
|
299
303
|
children: /* @__PURE__ */ r("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ a("ul", { className: "flex flex-col py-4", children: [
|
|
300
|
-
|
|
301
|
-
|
|
304
|
+
x ? /* @__PURE__ */ r("li", { className: "px-5 pb-4", children: x }) : null,
|
|
305
|
+
g.map(
|
|
302
306
|
(e, o) => {
|
|
303
|
-
var
|
|
304
|
-
return (
|
|
307
|
+
var n;
|
|
308
|
+
return (n = e.columns) != null && n.length || e.featured ? /* @__PURE__ */ a("li", { className: "px-5", children: [
|
|
305
309
|
/* @__PURE__ */ a(
|
|
306
310
|
"button",
|
|
307
311
|
{
|
|
308
312
|
type: "button",
|
|
309
313
|
"aria-expanded": y === o,
|
|
310
314
|
onClick: () => M((s) => s === o ? null : o),
|
|
311
|
-
className:
|
|
315
|
+
className: l(
|
|
312
316
|
"flex w-full items-center justify-between rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150",
|
|
313
317
|
t.mobileButton
|
|
314
318
|
),
|
|
315
319
|
children: [
|
|
316
320
|
/* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
|
|
317
321
|
e.label,
|
|
318
|
-
e.badge ? /* @__PURE__ */ r("span", { className:
|
|
322
|
+
e.badge ? /* @__PURE__ */ r("span", { className: l("rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide", t.badge), children: e.badge }) : null
|
|
319
323
|
] }),
|
|
320
324
|
/* @__PURE__ */ r(
|
|
321
325
|
P,
|
|
322
326
|
{
|
|
323
|
-
className:
|
|
327
|
+
className: l(
|
|
324
328
|
"h-4 w-4 shrink-0 transition-transform duration-150",
|
|
325
329
|
y === o && "rotate-180"
|
|
326
330
|
)
|
|
@@ -332,7 +336,7 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
332
336
|
/* @__PURE__ */ r(
|
|
333
337
|
"div",
|
|
334
338
|
{
|
|
335
|
-
className:
|
|
339
|
+
className: l(
|
|
336
340
|
"grid transition-[grid-template-rows,opacity] duration-200",
|
|
337
341
|
y === o ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
|
|
338
342
|
),
|
|
@@ -346,8 +350,10 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
346
350
|
i,
|
|
347
351
|
{
|
|
348
352
|
href: e.href ?? "#",
|
|
353
|
+
target: e.external ? "_blank" : void 0,
|
|
354
|
+
rel: e.external ? "noopener noreferrer" : void 0,
|
|
349
355
|
onClick: () => v(!1),
|
|
350
|
-
className:
|
|
356
|
+
className: l(
|
|
351
357
|
"block rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150",
|
|
352
358
|
t.mobileLink
|
|
353
359
|
),
|
|
@@ -356,7 +362,7 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
356
362
|
) }, e.label);
|
|
357
363
|
}
|
|
358
364
|
),
|
|
359
|
-
|
|
365
|
+
f ? /* @__PURE__ */ r("li", { className: "px-8 pb-2 pt-3", children: f }) : m ? /* @__PURE__ */ r("li", { className: "mt-3 flex flex-wrap gap-3 px-8 pb-2", children: m }) : null
|
|
360
366
|
] }) })
|
|
361
367
|
}
|
|
362
368
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MegaMenu.js","sources":["../../../../src/components/MegaMenu/MegaMenu.tsx"],"sourcesContent":["\"use client\";\nimport { useId, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { getContrastText } from \"../../utils/contrast\";\nimport { ChevronDown, Menu, X } from \"../../icons\";\nimport type { MegaMenuProps, MegaMenuVariant, MegaMenuItem } from \"./types\";\n\ninterface MegaMenuStyle {\n shell: string;\n bar: string;\n header: string;\n trigger: string;\n triggerOpen: string;\n badge: string;\n panel: string;\n columnTitle: string;\n columnLink: string;\n linkDescription: string;\n mobilePanel: string;\n mobileButton: string;\n mobileLink: string;\n brandText: string;\n brandDot: string;\n}\n\nconst inverse = \"text-on-secondary\";\nconst light = \"text-foreground\";\n\nconst styles: Record<MegaMenuVariant, MegaMenuStyle> = {\n classic: {\n shell: \"border-b border-border bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/75\",\n bar: \"mx-auto max-w-6xl px-5 sm:px-8\",\n header: \"px-0\",\n trigger: \"text-muted-foreground hover:text-foreground hover:bg-surface\",\n triggerOpen: \"bg-surface text-foreground\",\n badge: \"bg-primary-soft text-primary\",\n panel: \"border-border bg-surface shadow-raised\",\n columnTitle: \"text-muted-foreground/70\",\n columnLink: \"hover:bg-surface-strong\",\n linkDescription: \"text-muted-foreground\",\n mobilePanel: \"border-t border-border bg-background\",\n mobileButton: `${light} hover:bg-surface`,\n mobileLink: \"text-muted-foreground hover:bg-surface hover:text-foreground\",\n brandText: light,\n brandDot: \"bg-foreground\",\n },\n floating: {\n shell: \"px-0\",\n bar: \"mx-auto mt-3 max-w-5xl rounded-xl border border-border bg-surface/90 px-5 shadow-soft backdrop-blur-md supports-[backdrop-filter]:bg-surface/70\",\n header: \"px-3 sm:px-6\",\n trigger: \"text-muted-foreground hover:text-foreground hover:bg-surface\",\n triggerOpen: \"bg-surface text-foreground\",\n badge: \"bg-primary-soft text-primary\",\n panel: \"border-border bg-surface shadow-raised\",\n columnTitle: \"text-muted-foreground/70\",\n columnLink: \"hover:bg-surface-strong\",\n linkDescription: \"text-muted-foreground\",\n mobilePanel: \"mx-3 mb-3 max-w-5xl overflow-hidden rounded-b-xl border border-border bg-surface\",\n mobileButton: `${light} hover:bg-surface`,\n mobileLink: \"text-muted-foreground hover:bg-surface hover:text-foreground\",\n brandText: light,\n brandDot: \"bg-foreground\",\n },\n inverse: {\n shell: \"border-b border-white/10 bg-[#101010]/85 backdrop-blur-md\",\n bar: \"mx-auto max-w-6xl px-5 sm:px-8\",\n header: \"px-0\",\n trigger: \"text-on-secondary/60 hover:text-on-secondary hover:bg-white/10\",\n triggerOpen: \"bg-white/10 text-on-secondary\",\n badge: \"bg-white/15 text-on-secondary\",\n panel: \"border-white/10 bg-[#161616]\",\n columnTitle: \"text-on-secondary/45\",\n columnLink: \"hover:bg-white/10\",\n linkDescription: \"text-on-secondary/50\",\n mobilePanel: \"border-t border-white/10 bg-[#101010]\",\n mobileButton: `${inverse} hover:bg-white/10`,\n mobileLink: \"text-on-secondary/70 hover:bg-white/10 hover:text-on-secondary\",\n brandText: inverse,\n brandDot: \"bg-on-secondary\",\n },\n};\n\nexport const MegaMenu = ({\n className,\n variant = \"classic\",\n brand,\n logo,\n logoSrc,\n logoAlt,\n logoClassName,\n brandHref = \"#\",\n items,\n actions,\n cta,\n languageSwitcher,\n sticky = true,\n LinkComponent,\n onKeyDown,\n ...props\n}: MegaMenuProps) => {\n const ids = useId();\n const Link = LinkComponent ?? \"a\";\n const [openIndex, setOpenIndex] = useState<number | null>(null);\n const [mobileOpen, setMobileOpen] = useState(false);\n const [mobileExpanded, setMobileExpanded] = useState<number | null>(null);\n const s = styles[variant];\n\n const closePanels = () => setOpenIndex(null);\n const closeAll = () => {\n setOpenIndex(null);\n setMobileOpen(false);\n setMobileExpanded(null);\n };\n\n const panelId = (i: number) => `${ids}-panel-${i}`;\n\n const logoNode =\n logo ??\n (logoSrc ? (\n <img\n src={logoSrc}\n alt={logoAlt ?? (typeof brand === \"string\" ? brand : \"Logo\")}\n className={cn(\"h-7 w-auto\", logoClassName)}\n />\n ) : null);\n\n const brandNode = logoNode ? (\n <span className=\"flex items-center\">{logoNode}</span>\n ) : (\n <span className={cn(\"flex items-center gap-2 font-display text-[17px] font-bold tracking-tight\", s.brandText)}>\n <span aria-hidden className={cn(\"inline-block h-2.5 w-2.5 rounded-sm\", s.brandDot)} />\n {brand}\n </span>\n );\n\n const triggerClasses = cn(\n \"flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150\",\n s.trigger,\n );\n\n const renderColumns = (item: MegaMenuItem) => (\n <div\n className={cn(\n \"grid gap-x-10 gap-y-8 sm:grid-cols-2\",\n item.featured ? \"\" : \"lg:grid-cols-3\",\n )}\n >\n {item.columns?.map((column, ci) => (\n <div key={column.title ?? ci}>\n {column.title ? (\n <h4\n className={cn(\n \"text-xs font-semibold uppercase tracking-[0.14em]\",\n s.columnTitle,\n )}\n >\n {column.title}\n </h4>\n ) : null}\n <ul className={cn(column.title && \"mt-3\", \"space-y-0.5\")}>\n {column.links.map((link) => (\n <li key={link.href}>\n <Link\n href={link.href}\n onClick={closeAll}\n className={cn(\n \"-mx-2 block rounded-md px-2 py-2 transition-colors duration-150\",\n s.columnLink,\n )}\n >\n <span className=\"block text-sm font-medium text-foreground\">\n {link.label}\n </span>\n {link.description ? (\n <span\n className={cn(\n \"mt-0.5 block text-[13px] leading-snug\",\n s.linkDescription,\n )}\n >\n {link.description}\n </span>\n ) : null}\n </Link>\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n );\n\n const renderFeatured = (item: MegaMenuItem, mobile = false) => {\n const featured = item.featured;\n if (!featured) return null;\n const featuredStyle = featured.accent\n ? { backgroundColor: featured.accent, color: getContrastText(featured.accent) }\n : undefined;\n\n return (\n <Link\n href={featured.href}\n onClick={closeAll}\n className={cn(\n \"group relative block overflow-hidden rounded-lg p-6 transition-transform duration-150 hover:-translate-y-0.5\",\n mobile && \"mt-8\",\n !featured.accent && \"bg-primary text-on-primary\",\n )}\n style={featuredStyle}\n >\n <div className=\"flex h-full flex-col justify-between gap-4\">\n <div>\n <h4 className=\"font-display text-base font-semibold tracking-tight\">\n {featured.title}\n </h4>\n {featured.description ? (\n <p className=\"mt-1.5 text-[13px] leading-relaxed opacity-80\">\n {featured.description}\n </p>\n ) : null}\n </div>\n {featured.cta ? (\n <span className=\"text-sm font-semibold underline decoration-1 underline-offset-4\">\n {featured.cta} →\n </span>\n ) : null}\n </div>\n <div\n aria-hidden\n className=\"pointer-events-none absolute -right-8 -top-8 h-28 w-28 rounded-full opacity-20 blur-2xl bg-black/40\"\n />\n </Link>\n );\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n if (event.key === \"Escape\") {\n closeAll();\n }\n onKeyDown?.(event);\n };\n\n return (\n <header\n className={cn(\n \"relative w-full transition-colors duration-200\",\n sticky && \"sticky top-0 z-50\",\n s.shell,\n s.header,\n className,\n )}\n onKeyDown={handleKeyDown}\n {...props}\n >\n <nav className={cn(\"relative flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200\", s.bar)} onMouseLeave={closePanels} aria-label=\"Mega menu\">\n <Link href={brandHref} className=\"shrink-0\">\n {brandNode}\n </Link>\n\n <ul className=\"hidden items-center gap-1 lg:flex\">\n {items.map((item, i) => {\n const hasPanel = Boolean(item.columns?.length || item.featured);\n const open = openIndex === i;\n return (\n <li key={item.label} className=\"relative\">\n {hasPanel ? (\n <button\n type=\"button\"\n aria-haspopup=\"true\"\n aria-expanded={open}\n aria-controls={panelId(i)}\n onClick={() => setOpenIndex(open ? null : i)}\n onMouseEnter={() => setOpenIndex(i)}\n className={cn(triggerClasses, open && s.triggerOpen)}\n >\n <span className=\"flex items-center gap-1.5\">\n {item.label}\n {item.badge ? (\n <span\n className={cn(\n \"rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide\",\n s.badge,\n )}\n >\n {item.badge}\n </span>\n ) : null}\n </span>\n <ChevronDown\n className={cn(\n \"h-4 w-4 shrink-0 transition-transform duration-150\",\n open && \"rotate-180\",\n )}\n />\n </button>\n ) : (\n <Link href={item.href ?? \"#\"} className={triggerClasses}>\n {item.label}\n {item.badge ? (\n <span className={cn(\"rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide\", s.badge)}>\n {item.badge}\n </span>\n ) : null}\n </Link>\n )}\n </li>\n );\n })}\n </ul>\n\n <div className=\"hidden items-center gap-3 lg:flex\">\n {languageSwitcher}\n {actions}\n {cta}\n </div>\n\n <button\n type=\"button\"\n aria-label={mobileOpen ? \"Close menu\" : \"Open menu\"}\n aria-expanded={mobileOpen}\n onClick={() => setMobileOpen((o) => !o)}\n className={cn(\n \"inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md lg:hidden\",\n \"transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n s.mobileButton,\n )}\n >\n {mobileOpen ? <X className=\"h-5 w-5\" /> : <Menu className=\"h-5 w-5\" />}\n </button>\n </nav>\n\n {items.map((item, i) => {\n if (!item.columns?.length && !item.featured) return null;\n const open = openIndex === i;\n return (\n <div\n key={item.label}\n id={panelId(i)}\n role=\"region\"\n aria-label={`${item.label} menu`}\n onMouseEnter={() => setOpenIndex(i)}\n className={cn(\n \"absolute top-full z-50 pt-2 transition-all duration-150\",\n variant === \"floating\" ? \"inset-x-0 mx-auto w-full max-w-5xl\" : \"inset-x-0\",\n open\n ? \"visible translate-y-0 opacity-100\"\n : \"pointer-events-none invisible -translate-y-1 opacity-0\",\n )}\n >\n <div\n className={cn(\n \"overflow-hidden rounded-xl border p-6 md:p-8\",\n s.panel,\n item.featured ? \"lg:grid lg:grid-cols-[minmax(0,1fr)_auto] lg:gap-12\" : \"\",\n )}\n >\n {renderColumns(item)}\n {item.featured && (\n <div className={cn(\"mt-8 max-w-sm lg:mt-0 lg:w-64\")}>\n {renderFeatured(item)}\n </div>\n )}\n </div>\n </div>\n );\n })}\n\n <div\n className={cn(\n \"grid transition-[grid-template-rows,opacity] duration-200 lg:hidden\",\n mobileOpen ? \"grid-rows-[1fr] opacity-100\" : \"grid-rows-[0fr] opacity-0\",\n s.mobilePanel,\n )}\n >\n <div className=\"min-h-0 overflow-hidden\">\n <ul className=\"flex flex-col py-4\">\n {languageSwitcher ? (\n <li className=\"px-5 pb-4\">{languageSwitcher}</li>\n ) : null}\n {items.map((item, i) =>\n item.columns?.length || item.featured ? (\n <li key={item.label} className=\"px-5\">\n <button\n type=\"button\"\n aria-expanded={mobileExpanded === i}\n onClick={() =>\n setMobileExpanded((prev) => (prev === i ? null : i))\n }\n className={cn(\n \"flex w-full items-center justify-between rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150\",\n s.mobileButton,\n )}\n >\n <span className=\"flex items-center gap-2\">\n {item.label}\n {item.badge ? (\n <span className={cn(\"rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide\", s.badge)}>\n {item.badge}\n </span>\n ) : null}\n </span>\n <ChevronDown\n className={cn(\n \"h-4 w-4 shrink-0 transition-transform duration-150\",\n mobileExpanded === i && \"rotate-180\",\n )}\n />\n </button>\n <div\n className={cn(\n \"grid transition-[grid-template-rows,opacity] duration-200\",\n mobileExpanded === i\n ? \"grid-rows-[1fr] opacity-100\"\n : \"grid-rows-[0fr] opacity-0\",\n )}\n >\n <div className=\"min-h-0 overflow-hidden\">\n <div className=\"py-2 pl-1\">\n {renderColumns(item)}\n {item.featured ? (\n <div className=\"max-w-sm\">{renderFeatured(item, true)}</div>\n ) : null}\n </div>\n </div>\n </div>\n </li>\n ) : (\n <li key={item.label} className=\"px-5\">\n <Link\n href={item.href ?? \"#\"}\n onClick={() => setMobileOpen(false)}\n className={cn(\n \"block rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150\",\n s.mobileLink,\n )}\n >\n {item.label}\n </Link>\n </li>\n ),\n )}\n {cta ? (\n <li className=\"px-8 pb-2 pt-3\">{cta}</li>\n ) : actions ? (\n <li className=\"mt-3 flex flex-wrap gap-3 px-8 pb-2\">{actions}</li>\n ) : null}\n </ul>\n </div>\n </div>\n </header>\n );\n};\nMegaMenu.displayName = \"MegaMenu\";"],"names":["inverse","light","styles","MegaMenu","className","variant","brand","logo","logoSrc","logoAlt","logoClassName","brandHref","items","actions","cta","languageSwitcher","sticky","LinkComponent","onKeyDown","props","ids","useId","Link","openIndex","setOpenIndex","useState","mobileOpen","setMobileOpen","mobileExpanded","setMobileExpanded","s","closePanels","closeAll","panelId","i","logoNode","jsx","cn","brandNode","jsxs","triggerClasses","renderColumns","item","column","ci","link","renderFeatured","mobile","featured","featuredStyle","getContrastText","handleKeyDown","event","hasPanel","_a","open","ChevronDown","o","X","Menu","prev"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MegaMenu.js","sources":["../../../../src/components/MegaMenu/MegaMenu.tsx"],"sourcesContent":["\"use client\";\nimport { useId, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { getContrastText } from \"../../utils/contrast\";\nimport { ChevronDown, Menu, X } from \"../../icons\";\nimport type { MegaMenuProps, MegaMenuVariant, MegaMenuItem } from \"./types\";\n\ninterface MegaMenuStyle {\n shell: string;\n bar: string;\n header: string;\n trigger: string;\n triggerOpen: string;\n badge: string;\n panel: string;\n columnTitle: string;\n columnLink: string;\n linkDescription: string;\n mobilePanel: string;\n mobileButton: string;\n mobileLink: string;\n brandText: string;\n brandDot: string;\n}\n\nconst inverse = \"text-on-secondary\";\nconst light = \"text-foreground\";\n\nconst styles: Record<MegaMenuVariant, MegaMenuStyle> = {\n classic: {\n shell: \"border-b border-border bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/75\",\n bar: \"mx-auto max-w-6xl px-5 sm:px-8\",\n header: \"px-0\",\n trigger: \"text-muted-foreground hover:text-foreground hover:bg-surface\",\n triggerOpen: \"bg-surface text-foreground\",\n badge: \"bg-primary-soft text-primary\",\n panel: \"border-border bg-surface shadow-raised\",\n columnTitle: \"text-muted-foreground/70\",\n columnLink: \"hover:bg-surface-strong\",\n linkDescription: \"text-muted-foreground\",\n mobilePanel: \"border-t border-border bg-background\",\n mobileButton: `${light} hover:bg-surface`,\n mobileLink: \"text-muted-foreground hover:bg-surface hover:text-foreground\",\n brandText: light,\n brandDot: \"bg-foreground\",\n },\n floating: {\n shell: \"px-0\",\n bar: \"mx-auto mt-3 max-w-5xl rounded-xl border border-border bg-surface/90 px-5 shadow-soft backdrop-blur-md supports-[backdrop-filter]:bg-surface/70\",\n header: \"px-3 sm:px-6\",\n trigger: \"text-muted-foreground hover:text-foreground hover:bg-surface\",\n triggerOpen: \"bg-surface text-foreground\",\n badge: \"bg-primary-soft text-primary\",\n panel: \"border-border bg-surface shadow-raised\",\n columnTitle: \"text-muted-foreground/70\",\n columnLink: \"hover:bg-surface-strong\",\n linkDescription: \"text-muted-foreground\",\n mobilePanel: \"mx-3 mb-3 max-w-5xl overflow-hidden rounded-b-xl border border-border bg-surface\",\n mobileButton: `${light} hover:bg-surface`,\n mobileLink: \"text-muted-foreground hover:bg-surface hover:text-foreground\",\n brandText: light,\n brandDot: \"bg-foreground\",\n },\n inverse: {\n shell: \"border-b border-white/10 bg-[#101010]/85 backdrop-blur-md\",\n bar: \"mx-auto max-w-6xl px-5 sm:px-8\",\n header: \"px-0\",\n trigger: \"text-on-secondary/60 hover:text-on-secondary hover:bg-white/10\",\n triggerOpen: \"bg-white/10 text-on-secondary\",\n badge: \"bg-white/15 text-on-secondary\",\n panel: \"border-white/10 bg-[#161616]\",\n columnTitle: \"text-on-secondary/45\",\n columnLink: \"hover:bg-white/10\",\n linkDescription: \"text-on-secondary/50\",\n mobilePanel: \"border-t border-white/10 bg-[#101010]\",\n mobileButton: `${inverse} hover:bg-white/10`,\n mobileLink: \"text-on-secondary/70 hover:bg-white/10 hover:text-on-secondary\",\n brandText: inverse,\n brandDot: \"bg-on-secondary\",\n },\n};\n\nexport const MegaMenu = ({\n className,\n variant = \"classic\",\n brand,\n logo,\n logoSrc,\n logoAlt,\n logoClassName,\n brandHref = \"#\",\n items,\n actions,\n cta,\n languageSwitcher,\n sticky = true,\n LinkComponent,\n onKeyDown,\n ...props\n}: MegaMenuProps) => {\n const ids = useId();\n const Link = LinkComponent ?? \"a\";\n const [openIndex, setOpenIndex] = useState<number | null>(null);\n const [mobileOpen, setMobileOpen] = useState(false);\n const [mobileExpanded, setMobileExpanded] = useState<number | null>(null);\n const s = styles[variant];\n\n const closePanels = () => setOpenIndex(null);\n const closeAll = () => {\n setOpenIndex(null);\n setMobileOpen(false);\n setMobileExpanded(null);\n };\n\n const panelId = (i: number) => `${ids}-panel-${i}`;\n\n const logoNode =\n logo ??\n (logoSrc ? (\n <img\n src={logoSrc}\n alt={logoAlt ?? (typeof brand === \"string\" ? brand : \"Logo\")}\n className={cn(\"h-7 w-auto\", logoClassName)}\n />\n ) : null);\n\n const brandNode = logoNode ? (\n <span className=\"flex items-center\">{logoNode}</span>\n ) : (\n <span className={cn(\"flex items-center gap-2 font-display text-[17px] font-bold tracking-tight\", s.brandText)}>\n <span aria-hidden className={cn(\"inline-block h-2.5 w-2.5 rounded-sm\", s.brandDot)} />\n {brand}\n </span>\n );\n\n const triggerClasses = cn(\n \"flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150\",\n s.trigger,\n );\n\n const renderColumns = (item: MegaMenuItem) => (\n <div\n className={cn(\n \"grid gap-x-10 gap-y-8 sm:grid-cols-2\",\n item.featured ? \"\" : \"lg:grid-cols-3\",\n )}\n >\n {item.columns?.map((column, ci) => (\n <div key={column.title ?? ci}>\n {column.title ? (\n <h4\n className={cn(\n \"text-xs font-semibold uppercase tracking-[0.14em]\",\n s.columnTitle,\n )}\n >\n {column.title}\n </h4>\n ) : null}\n <ul className={cn(column.title && \"mt-3\", \"space-y-0.5\")}>\n {column.links.map((link) => (\n <li key={link.href}>\n <Link\n href={link.href}\n onClick={closeAll}\n target={link.external ? \"_blank\" : undefined}\n rel={link.external ? \"noopener noreferrer\" : undefined}\n className={cn(\n \"-mx-2 block rounded-md px-2 py-2 transition-colors duration-150\",\n s.columnLink,\n )}\n >\n <span className=\"block text-sm font-medium text-foreground\">\n {link.label}\n </span>\n {link.description ? (\n <span\n className={cn(\n \"mt-0.5 block text-[13px] leading-snug\",\n s.linkDescription,\n )}\n >\n {link.description}\n </span>\n ) : null}\n </Link>\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n );\n\n const renderFeatured = (item: MegaMenuItem, mobile = false) => {\n const featured = item.featured;\n if (!featured) return null;\n const featuredStyle = featured.accent\n ? { backgroundColor: featured.accent, color: getContrastText(featured.accent) }\n : undefined;\n\n return (\n <Link\n href={featured.href}\n onClick={closeAll}\n target={featured.external ? \"_blank\" : undefined}\n rel={featured.external ? \"noopener noreferrer\" : undefined}\n className={cn(\n \"group relative block overflow-hidden rounded-lg p-6 transition-transform duration-150 hover:-translate-y-0.5\",\n mobile && \"mt-8\",\n !featured.accent && \"bg-primary text-on-primary\",\n )}\n style={featuredStyle}\n >\n <div className=\"flex h-full flex-col justify-between gap-4\">\n <div>\n <h4 className=\"font-display text-base font-semibold tracking-tight\">\n {featured.title}\n </h4>\n {featured.description ? (\n <p className=\"mt-1.5 text-[13px] leading-relaxed opacity-80\">\n {featured.description}\n </p>\n ) : null}\n </div>\n {featured.cta ? (\n <span className=\"text-sm font-semibold underline decoration-1 underline-offset-4\">\n {featured.cta} →\n </span>\n ) : null}\n </div>\n <div\n aria-hidden\n className=\"pointer-events-none absolute -right-8 -top-8 h-28 w-28 rounded-full opacity-20 blur-2xl bg-black/40\"\n />\n </Link>\n );\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n if (event.key === \"Escape\") {\n closeAll();\n }\n onKeyDown?.(event);\n };\n\n return (\n <header\n className={cn(\n \"relative w-full transition-colors duration-200\",\n sticky && \"sticky top-0 z-50\",\n s.shell,\n s.header,\n className,\n )}\n onKeyDown={handleKeyDown}\n {...props}\n >\n <nav className={cn(\"relative flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200\", s.bar)} onMouseLeave={closePanels} aria-label=\"Mega menu\">\n <Link href={brandHref} className=\"shrink-0\">\n {brandNode}\n </Link>\n\n <ul className=\"hidden items-center gap-1 lg:flex\">\n {items.map((item, i) => {\n const hasPanel = Boolean(item.columns?.length || item.featured);\n const open = openIndex === i;\n return (\n <li key={item.label} className=\"relative\">\n {hasPanel ? (\n <button\n type=\"button\"\n aria-haspopup=\"true\"\n aria-expanded={open}\n aria-controls={panelId(i)}\n onClick={() => setOpenIndex(open ? null : i)}\n onMouseEnter={() => setOpenIndex(i)}\n className={cn(triggerClasses, open && s.triggerOpen)}\n >\n <span className=\"flex items-center gap-1.5\">\n {item.label}\n {item.badge ? (\n <span\n className={cn(\n \"rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide\",\n s.badge,\n )}\n >\n {item.badge}\n </span>\n ) : null}\n </span>\n <ChevronDown\n className={cn(\n \"h-4 w-4 shrink-0 transition-transform duration-150\",\n open && \"rotate-180\",\n )}\n />\n </button>\n ) : (\n <Link href={item.href ?? \"#\"} target={item.external ? \"_blank\" : undefined} rel={item.external ? \"noopener noreferrer\" : undefined} className={triggerClasses}>\n {item.label}\n {item.badge ? (\n <span className={cn(\"rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide\", s.badge)}>\n {item.badge}\n </span>\n ) : null}\n </Link>\n )}\n </li>\n );\n })}\n </ul>\n\n <div className=\"hidden items-center gap-3 lg:flex\">\n {languageSwitcher}\n {actions}\n {cta}\n </div>\n\n <button\n type=\"button\"\n aria-label={mobileOpen ? \"Close menu\" : \"Open menu\"}\n aria-expanded={mobileOpen}\n onClick={() => setMobileOpen((o) => !o)}\n className={cn(\n \"inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md lg:hidden\",\n \"transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n s.mobileButton,\n )}\n >\n {mobileOpen ? <X className=\"h-5 w-5\" /> : <Menu className=\"h-5 w-5\" />}\n </button>\n </nav>\n\n {items.map((item, i) => {\n if (!item.columns?.length && !item.featured) return null;\n const open = openIndex === i;\n return (\n <div\n key={item.label}\n id={panelId(i)}\n role=\"region\"\n aria-label={`${item.label} menu`}\n onMouseEnter={() => setOpenIndex(i)}\n className={cn(\n \"absolute top-full z-50 pt-2 transition-all duration-150\",\n variant === \"floating\" ? \"inset-x-0 mx-auto w-full max-w-5xl\" : \"inset-x-0\",\n open\n ? \"visible translate-y-0 opacity-100\"\n : \"pointer-events-none invisible -translate-y-1 opacity-0\",\n )}\n >\n <div\n className={cn(\n \"overflow-hidden rounded-xl border p-6 md:p-8\",\n s.panel,\n item.featured ? \"lg:grid lg:grid-cols-[minmax(0,1fr)_auto] lg:gap-12\" : \"\",\n )}\n >\n {renderColumns(item)}\n {item.featured && (\n <div className={cn(\"mt-8 max-w-sm lg:mt-0 lg:w-64\")}>\n {renderFeatured(item)}\n </div>\n )}\n </div>\n </div>\n );\n })}\n\n <div\n className={cn(\n \"grid transition-[grid-template-rows,opacity] duration-200 lg:hidden\",\n mobileOpen ? \"grid-rows-[1fr] opacity-100\" : \"grid-rows-[0fr] opacity-0\",\n s.mobilePanel,\n )}\n >\n <div className=\"min-h-0 overflow-hidden\">\n <ul className=\"flex flex-col py-4\">\n {languageSwitcher ? (\n <li className=\"px-5 pb-4\">{languageSwitcher}</li>\n ) : null}\n {items.map((item, i) =>\n item.columns?.length || item.featured ? (\n <li key={item.label} className=\"px-5\">\n <button\n type=\"button\"\n aria-expanded={mobileExpanded === i}\n onClick={() =>\n setMobileExpanded((prev) => (prev === i ? null : i))\n }\n className={cn(\n \"flex w-full items-center justify-between rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150\",\n s.mobileButton,\n )}\n >\n <span className=\"flex items-center gap-2\">\n {item.label}\n {item.badge ? (\n <span className={cn(\"rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide\", s.badge)}>\n {item.badge}\n </span>\n ) : null}\n </span>\n <ChevronDown\n className={cn(\n \"h-4 w-4 shrink-0 transition-transform duration-150\",\n mobileExpanded === i && \"rotate-180\",\n )}\n />\n </button>\n <div\n className={cn(\n \"grid transition-[grid-template-rows,opacity] duration-200\",\n mobileExpanded === i\n ? \"grid-rows-[1fr] opacity-100\"\n : \"grid-rows-[0fr] opacity-0\",\n )}\n >\n <div className=\"min-h-0 overflow-hidden\">\n <div className=\"py-2 pl-1\">\n {renderColumns(item)}\n {item.featured ? (\n <div className=\"max-w-sm\">{renderFeatured(item, true)}</div>\n ) : null}\n </div>\n </div>\n </div>\n </li>\n ) : (\n <li key={item.label} className=\"px-5\">\n <Link\n href={item.href ?? \"#\"}\n target={item.external ? \"_blank\" : undefined}\n rel={item.external ? \"noopener noreferrer\" : undefined}\n onClick={() => setMobileOpen(false)}\n className={cn(\n \"block rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150\",\n s.mobileLink,\n )}\n >\n {item.label}\n </Link>\n </li>\n ),\n )}\n {cta ? (\n <li className=\"px-8 pb-2 pt-3\">{cta}</li>\n ) : actions ? (\n <li className=\"mt-3 flex flex-wrap gap-3 px-8 pb-2\">{actions}</li>\n ) : null}\n </ul>\n </div>\n </div>\n </header>\n );\n};\nMegaMenu.displayName = \"MegaMenu\";"],"names":["inverse","light","styles","MegaMenu","className","variant","brand","logo","logoSrc","logoAlt","logoClassName","brandHref","items","actions","cta","languageSwitcher","sticky","LinkComponent","onKeyDown","props","ids","useId","Link","openIndex","setOpenIndex","useState","mobileOpen","setMobileOpen","mobileExpanded","setMobileExpanded","s","closePanels","closeAll","panelId","i","logoNode","jsx","cn","brandNode","jsxs","triggerClasses","renderColumns","item","column","ci","link","renderFeatured","mobile","featured","featuredStyle","getContrastText","handleKeyDown","event","hasPanel","_a","open","ChevronDown","o","X","Menu","prev"],"mappings":";;;;;AAyBA,MAAMA,IAAU,qBACVC,IAAQ,mBAERC,IAAiD;AAAA,EACrD,SAAS;AAAA,IACP,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,aAAa;AAAA,IACb,OAAO;AAAA,IACP,OAAO;AAAA,IACP,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,cAAc,GAAGD,CAAK;AAAA,IACtB,YAAY;AAAA,IACZ,WAAWA;AAAA,IACX,UAAU;AAAA,EAAA;AAAA,EAEZ,UAAU;AAAA,IACR,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,aAAa;AAAA,IACb,OAAO;AAAA,IACP,OAAO;AAAA,IACP,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,cAAc,GAAGA,CAAK;AAAA,IACtB,YAAY;AAAA,IACZ,WAAWA;AAAA,IACX,UAAU;AAAA,EAAA;AAAA,EAEZ,SAAS;AAAA,IACP,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,aAAa;AAAA,IACb,OAAO;AAAA,IACP,OAAO;AAAA,IACP,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,cAAc,GAAGD,CAAO;AAAA,IACxB,YAAY;AAAA,IACZ,WAAWA;AAAA,IACX,UAAU;AAAA,EAAA;AAEd,GAEaG,IAAW,CAAC;AAAA,EACvB,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAAqB;AACnB,QAAMC,IAAMC,EAAA,GACNC,IAAOL,KAAiB,KACxB,CAACM,GAAWC,CAAY,IAAIC,EAAwB,IAAI,GACxD,CAACC,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAC5C,CAACG,GAAgBC,CAAiB,IAAIJ,EAAwB,IAAI,GAClEK,IAAI5B,EAAOG,CAAO,GAElB0B,IAAc,MAAMP,EAAa,IAAI,GACrCQ,IAAW,MAAM;AACrB,IAAAR,EAAa,IAAI,GACjBG,EAAc,EAAK,GACnBE,EAAkB,IAAI;AAAA,EACxB,GAEMI,IAAU,CAACC,MAAc,GAAGd,CAAG,UAAUc,CAAC,IAE1CC,IACJ5B,MACCC,IACC,gBAAA4B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK5B;AAAA,MACL,KAAKC,MAAY,OAAOH,KAAU,WAAWA,IAAQ;AAAA,MACrD,WAAW+B,EAAG,cAAc3B,CAAa;AAAA,IAAA;AAAA,EAAA,IAEzC,OAEA4B,IAAYH,IAChB,gBAAAC,EAAC,QAAA,EAAK,WAAU,qBAAqB,UAAAD,EAAA,CAAS,IAE9C,gBAAAI,EAAC,UAAK,WAAWF,EAAG,6EAA6EP,EAAE,SAAS,GAC1G,UAAA;AAAA,IAAA,gBAAAM,EAAC,QAAA,EAAK,eAAW,IAAC,WAAWC,EAAG,uCAAuCP,EAAE,QAAQ,GAAG;AAAA,IACnFxB;AAAA,EAAA,GACH,GAGIkC,IAAiBH;AAAA,IACrB;AAAA,IACAP,EAAE;AAAA,EAAA,GAGEW,IAAgB,CAACC;;AACrB,2BAAAN;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACAK,EAAK,WAAW,KAAK;AAAA,QAAA;AAAA,QAGtB,iBAAK,8BAAS,IAAI,CAACC,GAAQC,wBACzB,OAAA,EACE,UAAA;AAAA,UAAAD,EAAO,QACN,gBAAAP;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC;AAAA,gBACT;AAAA,gBACAP,EAAE;AAAA,cAAA;AAAA,cAGH,UAAAa,EAAO;AAAA,YAAA;AAAA,UAAA,IAER;AAAA,UACJ,gBAAAP,EAAC,MAAA,EAAG,WAAWC,EAAGM,EAAO,SAAS,QAAQ,aAAa,GACpD,YAAO,MAAM,IAAI,CAACE,wBAChB,MAAA,EACC,UAAA,gBAAAN;AAAA,YAACjB;AAAA,YAAA;AAAA,cACC,MAAMuB,EAAK;AAAA,cACX,SAASb;AAAA,cACT,QAAQa,EAAK,WAAW,WAAW;AAAA,cACnC,KAAKA,EAAK,WAAW,wBAAwB;AAAA,cAC7C,WAAWR;AAAA,gBACT;AAAA,gBACAP,EAAE;AAAA,cAAA;AAAA,cAGJ,UAAA;AAAA,gBAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,6CACb,UAAAS,EAAK,OACR;AAAA,gBACCA,EAAK,cACJ,gBAAAT;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWC;AAAA,sBACT;AAAA,sBACAP,EAAE;AAAA,oBAAA;AAAA,oBAGH,UAAAe,EAAK;AAAA,kBAAA;AAAA,gBAAA,IAEN;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA,KAvBCA,EAAK,IAyBd,CACD,EAAA,CACH;AAAA,QAAA,KAxCQF,EAAO,SAASC,CAyC1B;AAAA,MACD;AAAA,IAAA;AAAA,KAICE,IAAiB,CAACJ,GAAoBK,IAAS,OAAU;AAC7D,UAAMC,IAAWN,EAAK;AACtB,QAAI,CAACM,EAAU,QAAO;AACtB,UAAMC,IAAgBD,EAAS,SAC3B,EAAE,iBAAiBA,EAAS,QAAQ,OAAOE,EAAgBF,EAAS,MAAM,EAAA,IAC1E;AAEJ,WACE,gBAAAT;AAAA,MAACjB;AAAA,MAAA;AAAA,QACC,MAAM0B,EAAS;AAAA,QACf,SAAShB;AAAA,QACT,QAAQgB,EAAS,WAAW,WAAW;AAAA,QACvC,KAAKA,EAAS,WAAW,wBAAwB;AAAA,QACjD,WAAWX;AAAA,UACT;AAAA,UACAU,KAAU;AAAA,UACV,CAACC,EAAS,UAAU;AAAA,QAAA;AAAA,QAEtB,OAAOC;AAAA,QAEP,UAAA;AAAA,UAAA,gBAAAV,EAAC,OAAA,EAAI,WAAU,8CACb,UAAA;AAAA,YAAA,gBAAAA,EAAC,OAAA,EACC,UAAA;AAAA,cAAA,gBAAAH,EAAC,MAAA,EAAG,WAAU,uDACX,UAAAY,EAAS,OACZ;AAAA,cACCA,EAAS,cACR,gBAAAZ,EAAC,KAAA,EAAE,WAAU,iDACV,UAAAY,EAAS,aACZ,IACE;AAAA,YAAA,GACN;AAAA,YACCA,EAAS,MACR,gBAAAT,EAAC,QAAA,EAAK,WAAU,mEACb,UAAA;AAAA,cAAAS,EAAS;AAAA,cAAI;AAAA,YAAA,EAAA,CAChB,IACE;AAAA,UAAA,GACN;AAAA,UACA,gBAAAZ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,GAEMe,IAAgB,CAACC,MAA4C;AACjE,IAAIA,EAAM,QAAQ,YAChBpB,EAAA,GAEFd,KAAA,QAAAA,EAAYkC;AAAA,EACd;AAEA,SACE,gBAAAb;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,QACT;AAAA,QACArB,KAAU;AAAA,QACVc,EAAE;AAAA,QACFA,EAAE;AAAA,QACF1B;AAAA,MAAA;AAAA,MAEF,WAAW+C;AAAA,MACV,GAAGhC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAoB,EAAC,OAAA,EAAI,WAAWF,EAAG,+FAA+FP,EAAE,GAAG,GAAG,cAAcC,GAAa,cAAW,aAC9J,UAAA;AAAA,UAAA,gBAAAK,EAACd,GAAA,EAAK,MAAMX,GAAW,WAAU,YAC9B,UAAA2B,GACH;AAAA,UAEA,gBAAAF,EAAC,QAAG,WAAU,qCACX,YAAM,IAAI,CAACM,GAAMR,MAAM;;AACtB,kBAAMmB,IAAW,IAAQC,IAAAZ,EAAK,YAAL,QAAAY,EAAc,UAAUZ,EAAK,WAChDa,IAAOhC,MAAcW;AAC3B,mBACE,gBAAAE,EAAC,MAAA,EAAoB,WAAU,YAC5B,UAAAiB,IACC,gBAAAd;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,iBAAc;AAAA,gBACd,iBAAegB;AAAA,gBACf,iBAAetB,EAAQC,CAAC;AAAA,gBACxB,SAAS,MAAMV,EAAa+B,IAAO,OAAOrB,CAAC;AAAA,gBAC3C,cAAc,MAAMV,EAAaU,CAAC;AAAA,gBAClC,WAAWG,EAAGG,GAAgBe,KAAQzB,EAAE,WAAW;AAAA,gBAEnD,UAAA;AAAA,kBAAA,gBAAAS,EAAC,QAAA,EAAK,WAAU,6BACb,UAAA;AAAA,oBAAAG,EAAK;AAAA,oBACLA,EAAK,QACJ,gBAAAN;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAWC;AAAA,0BACT;AAAA,0BACAP,EAAE;AAAA,wBAAA;AAAA,wBAGH,UAAAY,EAAK;AAAA,sBAAA;AAAA,oBAAA,IAEN;AAAA,kBAAA,GACN;AAAA,kBACA,gBAAAN;AAAA,oBAACoB;AAAA,oBAAA;AAAA,sBACC,WAAWnB;AAAA,wBACT;AAAA,wBACAkB,KAAQ;AAAA,sBAAA;AAAA,oBACV;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YAAA,IAGF,gBAAAhB,EAACjB,GAAA,EAAK,MAAMoB,EAAK,QAAQ,KAAK,QAAQA,EAAK,WAAW,WAAW,QAAW,KAAKA,EAAK,WAAW,wBAAwB,QAAW,WAAWF,GAC5I,UAAA;AAAA,cAAAE,EAAK;AAAA,cACLA,EAAK,QACJ,gBAAAN,EAAC,QAAA,EAAK,WAAWC,EAAG,sEAAsEP,EAAE,KAAK,GAC9F,UAAAY,EAAK,MAAA,CACR,IACE;AAAA,YAAA,GACN,EAAA,GAvCKA,EAAK,KAyCd;AAAA,UAEJ,CAAC,EAAA,CACH;AAAA,UAEA,gBAAAH,EAAC,OAAA,EAAI,WAAU,qCACZ,UAAA;AAAA,YAAAxB;AAAA,YACAF;AAAA,YACAC;AAAA,UAAA,GACH;AAAA,UAEA,gBAAAsB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAYV,IAAa,eAAe;AAAA,cACxC,iBAAeA;AAAA,cACf,SAAS,MAAMC,EAAc,CAAC8B,MAAM,CAACA,CAAC;AAAA,cACtC,WAAWpB;AAAA,gBACT;AAAA,gBACA;AAAA,gBACAP,EAAE;AAAA,cAAA;AAAA,cAGH,UAAAJ,sBAAcgC,GAAA,EAAE,WAAU,WAAU,IAAK,gBAAAtB,EAACuB,GAAA,EAAK,WAAU,UAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACtE,GACF;AAAA,QAEC/C,EAAM,IAAI,CAAC8B,GAAMR,MAAM;;AACtB,cAAI,GAACoB,IAAAZ,EAAK,YAAL,QAAAY,EAAc,WAAU,CAACZ,EAAK,SAAU,QAAO;AACpD,gBAAMa,IAAOhC,MAAcW;AAC3B,iBACE,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,IAAIH,EAAQC,CAAC;AAAA,cACb,MAAK;AAAA,cACL,cAAY,GAAGQ,EAAK,KAAK;AAAA,cACzB,cAAc,MAAMlB,EAAaU,CAAC;AAAA,cAClC,WAAWG;AAAA,gBACT;AAAA,gBACAhC,MAAY,aAAa,uCAAuC;AAAA,gBAChEkD,IACI,sCACA;AAAA,cAAA;AAAA,cAGN,UAAA,gBAAAhB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWF;AAAA,oBACT;AAAA,oBACAP,EAAE;AAAA,oBACFY,EAAK,WAAW,wDAAwD;AAAA,kBAAA;AAAA,kBAGzE,UAAA;AAAA,oBAAAD,EAAcC,CAAI;AAAA,oBAClBA,EAAK,YACJ,gBAAAN,EAAC,OAAA,EAAI,WAAWC,EAAG,+BAA+B,GAC/C,UAAAS,EAAeJ,CAAI,EAAA,CACtB;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAEJ;AAAA,YA1BKA,EAAK;AAAA,UAAA;AAAA,QA6BhB,CAAC;AAAA,QAED,gBAAAN;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,cACAX,IAAa,gCAAgC;AAAA,cAC7CI,EAAE;AAAA,YAAA;AAAA,YAGJ,4BAAC,OAAA,EAAI,WAAU,2BACb,UAAA,gBAAAS,EAAC,MAAA,EAAG,WAAU,sBACX,UAAA;AAAA,cAAAxB,IACC,gBAAAqB,EAAC,MAAA,EAAG,WAAU,aAAa,aAAiB,IAC1C;AAAA,cACHxB,EAAM;AAAA,gBAAI,CAAC8B,GAAMR,MAAA;;AAChB,0BAAAoB,IAAAZ,EAAK,YAAL,QAAAY,EAAc,UAAUZ,EAAK,WAC3B,gBAAAH,EAAC,MAAA,EAAoB,WAAU,QAC7B,UAAA;AAAA,oBAAA,gBAAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,iBAAeX,MAAmBM;AAAA,wBAClC,SAAS,MACPL,EAAkB,CAAC+B,MAAUA,MAAS1B,IAAI,OAAOA,CAAE;AAAA,wBAErD,WAAWG;AAAA,0BACT;AAAA,0BACAP,EAAE;AAAA,wBAAA;AAAA,wBAGJ,UAAA;AAAA,0BAAA,gBAAAS,EAAC,QAAA,EAAK,WAAU,2BACb,UAAA;AAAA,4BAAAG,EAAK;AAAA,4BACLA,EAAK,QACJ,gBAAAN,EAAC,QAAA,EAAK,WAAWC,EAAG,sEAAsEP,EAAE,KAAK,GAC9F,UAAAY,EAAK,MAAA,CACR,IACE;AAAA,0BAAA,GACN;AAAA,0BACA,gBAAAN;AAAA,4BAACoB;AAAA,4BAAA;AAAA,8BACC,WAAWnB;AAAA,gCACT;AAAA,gCACAT,MAAmBM,KAAK;AAAA,8BAAA;AAAA,4BAC1B;AAAA,0BAAA;AAAA,wBACF;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAEF,gBAAAE;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAWC;AAAA,0BACT;AAAA,0BACAT,MAAmBM,IACf,gCACA;AAAA,wBAAA;AAAA,wBAGN,4BAAC,OAAA,EAAI,WAAU,2BACb,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,0BAAAE,EAAcC,CAAI;AAAA,0BAClBA,EAAK,WACJ,gBAAAN,EAAC,OAAA,EAAI,WAAU,YAAY,UAAAU,EAAeJ,GAAM,EAAI,EAAA,CAAE,IACpD;AAAA,wBAAA,EAAA,CACN,EAAA,CACF;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACF,KA3COA,EAAK,KA4Cd,IAEA,gBAAAN,EAAC,MAAA,EAAoB,WAAU,QAC7B,UAAA,gBAAAA;AAAA,oBAACd;AAAA,oBAAA;AAAA,sBACC,MAAMoB,EAAK,QAAQ;AAAA,sBACnB,QAAQA,EAAK,WAAW,WAAW;AAAA,sBACnC,KAAKA,EAAK,WAAW,wBAAwB;AAAA,sBAC7C,SAAS,MAAMf,EAAc,EAAK;AAAA,sBAClC,WAAWU;AAAA,wBACT;AAAA,wBACAP,EAAE;AAAA,sBAAA;AAAA,sBAGH,UAAAY,EAAK;AAAA,oBAAA;AAAA,kBAAA,EACR,GAZOA,EAAK,KAad;AAAA;AAAA,cAAA;AAAA,cAGH5B,IACC,gBAAAsB,EAAC,MAAA,EAAG,WAAU,kBAAkB,UAAAtB,EAAA,CAAI,IAClCD,IACF,gBAAAuB,EAAC,MAAA,EAAG,WAAU,uCAAuC,aAAQ,IAC3D;AAAA,YAAA,EAAA,CACN,EAAA,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;AACAjC,EAAS,cAAc;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as e, jsxs as t } from "react/jsx-runtime";
|
|
3
3
|
import { useState as D } from "react";
|
|
4
|
-
import { cn as
|
|
4
|
+
import { cn as n } from "../../utils/cn.js";
|
|
5
5
|
import { X as P, Menu as T } from "../../icons.js";
|
|
6
6
|
const f = "text-on-secondary", d = "text-foreground", C = {
|
|
7
7
|
classic: {
|
|
@@ -49,7 +49,7 @@ const f = "text-on-secondary", d = "text-foreground", C = {
|
|
|
49
49
|
logoAlt: N,
|
|
50
50
|
logoClassName: k,
|
|
51
51
|
brandHref: w = "#",
|
|
52
|
-
links:
|
|
52
|
+
links: x,
|
|
53
53
|
actions: l,
|
|
54
54
|
cta: i,
|
|
55
55
|
languageSwitcher: c,
|
|
@@ -57,28 +57,30 @@ const f = "text-on-secondary", d = "text-foreground", C = {
|
|
|
57
57
|
LinkComponent: L,
|
|
58
58
|
...j
|
|
59
59
|
}) => {
|
|
60
|
-
const [a,
|
|
60
|
+
const [a, h] = D(!1), m = L ?? "a", o = C[b], p = v ?? (u ? /* @__PURE__ */ e(
|
|
61
61
|
"img",
|
|
62
62
|
{
|
|
63
63
|
src: u,
|
|
64
64
|
alt: N ?? (typeof s == "string" ? s : "Logo"),
|
|
65
|
-
className:
|
|
65
|
+
className: n("h-7 w-auto", k)
|
|
66
66
|
}
|
|
67
|
-
) : null), B = p ? /* @__PURE__ */ e("span", { className: "flex items-center", children: p }) : /* @__PURE__ */ t("span", { className:
|
|
68
|
-
/* @__PURE__ */ e("span", { "aria-hidden": !0, className:
|
|
67
|
+
) : null), B = p ? /* @__PURE__ */ e("span", { className: "flex items-center", children: p }) : /* @__PURE__ */ t("span", { className: n("flex items-center gap-2 font-display text-[17px] font-bold tracking-tight", o.brandText), children: [
|
|
68
|
+
/* @__PURE__ */ e("span", { "aria-hidden": !0, className: n("inline-block h-2.5 w-2.5 rounded-sm", o.brandDot) }),
|
|
69
69
|
s
|
|
70
70
|
] });
|
|
71
|
-
return /* @__PURE__ */ t("header", { className:
|
|
72
|
-
/* @__PURE__ */ t("nav", { className:
|
|
71
|
+
return /* @__PURE__ */ t("header", { className: n("w-full transition-colors duration-200", y && "sticky top-0 z-50", o.shell, o.header, g), ...j, children: [
|
|
72
|
+
/* @__PURE__ */ t("nav", { className: n("flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200", o.bar), "aria-label": "Main navigation", children: [
|
|
73
73
|
/* @__PURE__ */ e(m, { href: w, className: "shrink-0", children: B }),
|
|
74
|
-
/* @__PURE__ */ e("ul", { className:
|
|
74
|
+
/* @__PURE__ */ e("ul", { className: o.desktopList, children: x.map((r) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
|
|
75
75
|
m,
|
|
76
76
|
{
|
|
77
|
-
href:
|
|
78
|
-
|
|
79
|
-
|
|
77
|
+
href: r.href,
|
|
78
|
+
target: r.external ? "_blank" : void 0,
|
|
79
|
+
rel: r.external ? "noopener noreferrer" : void 0,
|
|
80
|
+
className: n("text-sm font-medium transition-colors duration-150", o.link),
|
|
81
|
+
children: r.label
|
|
80
82
|
}
|
|
81
|
-
) },
|
|
83
|
+
) }, r.href)) }),
|
|
82
84
|
/* @__PURE__ */ t("div", { className: "hidden items-center gap-3 md:flex", children: [
|
|
83
85
|
c,
|
|
84
86
|
l,
|
|
@@ -90,11 +92,11 @@ const f = "text-on-secondary", d = "text-foreground", C = {
|
|
|
90
92
|
type: "button",
|
|
91
93
|
"aria-label": a ? "Close menu" : "Open menu",
|
|
92
94
|
"aria-expanded": a,
|
|
93
|
-
onClick: () =>
|
|
94
|
-
className:
|
|
95
|
+
onClick: () => h((r) => !r),
|
|
96
|
+
className: n(
|
|
95
97
|
"inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md md:hidden",
|
|
96
98
|
"transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
97
|
-
|
|
99
|
+
o.menuButton
|
|
98
100
|
),
|
|
99
101
|
children: a ? /* @__PURE__ */ e(P, { className: "h-5 w-5" }) : /* @__PURE__ */ e(T, { className: "h-5 w-5" })
|
|
100
102
|
}
|
|
@@ -103,25 +105,27 @@ const f = "text-on-secondary", d = "text-foreground", C = {
|
|
|
103
105
|
/* @__PURE__ */ e(
|
|
104
106
|
"div",
|
|
105
107
|
{
|
|
106
|
-
className:
|
|
108
|
+
className: n(
|
|
107
109
|
"grid transition-[grid-template-rows,opacity] duration-200 md:hidden",
|
|
108
110
|
a ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
|
|
109
|
-
|
|
111
|
+
o.mobilePanel
|
|
110
112
|
),
|
|
111
|
-
children: /* @__PURE__ */ e("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ t("ul", { className:
|
|
113
|
+
children: /* @__PURE__ */ e("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ t("ul", { className: n("flex flex-col py-4", b !== "floating" && "px-5"), children: [
|
|
112
114
|
c ? /* @__PURE__ */ e("li", { className: "px-2 pb-4", children: c }) : null,
|
|
113
|
-
|
|
115
|
+
x.map((r) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
|
|
114
116
|
m,
|
|
115
117
|
{
|
|
116
|
-
href:
|
|
117
|
-
|
|
118
|
-
|
|
118
|
+
href: r.href,
|
|
119
|
+
target: r.external ? "_blank" : void 0,
|
|
120
|
+
rel: r.external ? "noopener noreferrer" : void 0,
|
|
121
|
+
onClick: () => h(!1),
|
|
122
|
+
className: n(
|
|
119
123
|
"block rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150",
|
|
120
|
-
|
|
124
|
+
o.mobileLink
|
|
121
125
|
),
|
|
122
|
-
children:
|
|
126
|
+
children: r.label
|
|
123
127
|
}
|
|
124
|
-
) },
|
|
128
|
+
) }, r.href)),
|
|
125
129
|
i ? /* @__PURE__ */ e("li", { className: "mt-3 px-2 pb-2", children: i }) : l ? /* @__PURE__ */ e("li", { className: "mt-3 flex flex-wrap gap-3 px-2 pb-2", children: l }) : null
|
|
126
130
|
] }) })
|
|
127
131
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navbar.js","sources":["../../../../src/components/Navbar/Navbar.tsx"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Menu, X } from \"../../icons\";\nimport type { NavbarProps, NavbarVariant } from \"./types\";\n\ninterface NavbarStyle {\n shell: string;\n bar: string;\n header: string;\n link: string;\n mobilePanel: string;\n mobileLink: string;\n menuButton: string;\n brandText: string;\n brandDot: string;\n desktopList: string;\n}\n\nconst inverse = \"text-on-secondary\";\nconst light = \"text-foreground\";\n\nconst styles: Record<NavbarVariant, NavbarStyle> = {\n classic: {\n shell: \"border-b border-border bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/75\",\n bar: \"mx-auto max-w-6xl px-5 sm:px-8\",\n header: \"px-0\",\n link: \"text-muted-foreground hover:text-foreground\",\n mobilePanel: \"border-t border-border bg-background\",\n mobileLink:\n \"text-muted-foreground hover:bg-surface hover:text-foreground\",\n menuButton: `${light} hover:bg-surface`,\n brandText: light,\n brandDot: \"bg-foreground\",\n desktopList: \"hidden items-center gap-7 md:flex\",\n },\n floating: {\n shell: \"px-0\",\n bar: \"mx-auto mt-3 max-w-5xl rounded-xl border border-border bg-surface/90 px-5 shadow-soft backdrop-blur-md supports-[backdrop-filter]:bg-surface/70\",\n header: \"px-3 sm:px-6\",\n link: \"text-muted-foreground hover:text-foreground\",\n mobilePanel:\n \"mx-3 mb-3 max-w-5xl overflow-hidden rounded-b-xl border border-border bg-surface\",\n mobileLink:\n \"text-muted-foreground hover:bg-surface hover:text-foreground\",\n menuButton: `${light} hover:bg-surface`,\n brandText: light,\n brandDot: \"bg-foreground\",\n desktopList: \"hidden items-center gap-7 md:flex\",\n },\n inverse: {\n shell: \"border-b border-white/10 bg-[#101010]/85 backdrop-blur-md\",\n bar: \"mx-auto max-w-6xl px-5 sm:px-8\",\n header: \"px-0\",\n link: \"text-on-secondary/60 hover:text-on-secondary\",\n mobilePanel: \"border-t border-white/10 bg-[#101010]\",\n mobileLink:\n \"text-on-secondary/70 hover:bg-white/10 hover:text-on-secondary\",\n menuButton: `${inverse} hover:bg-white/10`,\n brandText: inverse,\n brandDot: \"bg-on-secondary\",\n desktopList: \"hidden items-center gap-7 md:flex\",\n },\n};\n\nexport const Navbar = ({\n className,\n variant = \"classic\",\n brand,\n logo,\n logoSrc,\n logoAlt,\n logoClassName,\n brandHref = \"#\",\n links,\n actions,\n cta,\n languageSwitcher,\n sticky = true,\n LinkComponent,\n ...props\n}: NavbarProps) => {\n const [open, setOpen] = useState(false);\n const Link = LinkComponent ?? \"a\";\n const s = styles[variant];\n\n const logoNode =\n logo ??\n (logoSrc ? (\n <img\n src={logoSrc}\n alt={logoAlt ?? (typeof brand === \"string\" ? brand : \"Logo\")}\n className={cn(\"h-7 w-auto\", logoClassName)}\n />\n ) : null);\n\n const brandNode = logoNode ? (\n <span className=\"flex items-center\">{logoNode}</span>\n ) : (\n <span className={cn(\"flex items-center gap-2 font-display text-[17px] font-bold tracking-tight\", s.brandText)}>\n <span aria-hidden className={cn(\"inline-block h-2.5 w-2.5 rounded-sm\", s.brandDot)} />\n {brand}\n </span>\n );\n\n return (\n <header className={cn(\"w-full transition-colors duration-200\", sticky && \"sticky top-0 z-50\", s.shell, s.header, className)} {...props}>\n <nav className={cn(\"flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200\", s.bar)} aria-label=\"Main navigation\">\n <Link href={brandHref} className=\"shrink-0\">\n {brandNode}\n </Link>\n\n <ul className={s.desktopList}>\n {links.map((link) => (\n <li key={link.href}>\n <Link\n href={link.href}\n className={cn(\"text-sm font-medium transition-colors duration-150\", s.link)}\n >\n {link.label}\n </Link>\n </li>\n ))}\n </ul>\n\n <div className=\"hidden items-center gap-3 md:flex\">\n {languageSwitcher}\n {actions}\n {cta}\n </div>\n\n <button\n type=\"button\"\n aria-label={open ? \"Close menu\" : \"Open menu\"}\n aria-expanded={open}\n onClick={() => setOpen((o) => !o)}\n className={cn(\n \"inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md md:hidden\",\n \"transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n s.menuButton,\n )}\n >\n {open ? <X className=\"h-5 w-5\" /> : <Menu className=\"h-5 w-5\" />}\n </button>\n </nav>\n\n <div\n className={cn(\n \"grid transition-[grid-template-rows,opacity] duration-200 md:hidden\",\n open ? \"grid-rows-[1fr] opacity-100\" : \"grid-rows-[0fr] opacity-0\",\n s.mobilePanel,\n )}\n >\n <div className=\"min-h-0 overflow-hidden\">\n <ul className={cn(\"flex flex-col py-4\", variant !== \"floating\" && \"px-5\")}>\n {languageSwitcher ? (\n <li className=\"px-2 pb-4\">{languageSwitcher}</li>\n ) : null}\n {links.map((link) => (\n <li key={link.href}>\n <Link\n href={link.href}\n onClick={() => setOpen(false)}\n className={cn(\n \"block rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150\",\n s.mobileLink,\n )}\n >\n {link.label}\n </Link>\n </li>\n ))}\n {cta ? (\n <li className=\"mt-3 px-2 pb-2\">{cta}</li>\n ) : actions ? (\n <li className=\"mt-3 flex flex-wrap gap-3 px-2 pb-2\">{actions}</li>\n ) : null}\n </ul>\n </div>\n </div>\n </header>\n );\n};\nNavbar.displayName = \"Navbar\";"],"names":["inverse","light","styles","Navbar","className","variant","brand","logo","logoSrc","logoAlt","logoClassName","brandHref","links","actions","cta","languageSwitcher","sticky","LinkComponent","props","open","setOpen","useState","Link","s","logoNode","jsx","cn","brandNode","jsxs","link","o","X","Menu"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Navbar.js","sources":["../../../../src/components/Navbar/Navbar.tsx"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Menu, X } from \"../../icons\";\nimport type { NavbarProps, NavbarVariant } from \"./types\";\n\ninterface NavbarStyle {\n shell: string;\n bar: string;\n header: string;\n link: string;\n mobilePanel: string;\n mobileLink: string;\n menuButton: string;\n brandText: string;\n brandDot: string;\n desktopList: string;\n}\n\nconst inverse = \"text-on-secondary\";\nconst light = \"text-foreground\";\n\nconst styles: Record<NavbarVariant, NavbarStyle> = {\n classic: {\n shell: \"border-b border-border bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/75\",\n bar: \"mx-auto max-w-6xl px-5 sm:px-8\",\n header: \"px-0\",\n link: \"text-muted-foreground hover:text-foreground\",\n mobilePanel: \"border-t border-border bg-background\",\n mobileLink:\n \"text-muted-foreground hover:bg-surface hover:text-foreground\",\n menuButton: `${light} hover:bg-surface`,\n brandText: light,\n brandDot: \"bg-foreground\",\n desktopList: \"hidden items-center gap-7 md:flex\",\n },\n floating: {\n shell: \"px-0\",\n bar: \"mx-auto mt-3 max-w-5xl rounded-xl border border-border bg-surface/90 px-5 shadow-soft backdrop-blur-md supports-[backdrop-filter]:bg-surface/70\",\n header: \"px-3 sm:px-6\",\n link: \"text-muted-foreground hover:text-foreground\",\n mobilePanel:\n \"mx-3 mb-3 max-w-5xl overflow-hidden rounded-b-xl border border-border bg-surface\",\n mobileLink:\n \"text-muted-foreground hover:bg-surface hover:text-foreground\",\n menuButton: `${light} hover:bg-surface`,\n brandText: light,\n brandDot: \"bg-foreground\",\n desktopList: \"hidden items-center gap-7 md:flex\",\n },\n inverse: {\n shell: \"border-b border-white/10 bg-[#101010]/85 backdrop-blur-md\",\n bar: \"mx-auto max-w-6xl px-5 sm:px-8\",\n header: \"px-0\",\n link: \"text-on-secondary/60 hover:text-on-secondary\",\n mobilePanel: \"border-t border-white/10 bg-[#101010]\",\n mobileLink:\n \"text-on-secondary/70 hover:bg-white/10 hover:text-on-secondary\",\n menuButton: `${inverse} hover:bg-white/10`,\n brandText: inverse,\n brandDot: \"bg-on-secondary\",\n desktopList: \"hidden items-center gap-7 md:flex\",\n },\n};\n\nexport const Navbar = ({\n className,\n variant = \"classic\",\n brand,\n logo,\n logoSrc,\n logoAlt,\n logoClassName,\n brandHref = \"#\",\n links,\n actions,\n cta,\n languageSwitcher,\n sticky = true,\n LinkComponent,\n ...props\n}: NavbarProps) => {\n const [open, setOpen] = useState(false);\n const Link = LinkComponent ?? \"a\";\n const s = styles[variant];\n\n const logoNode =\n logo ??\n (logoSrc ? (\n <img\n src={logoSrc}\n alt={logoAlt ?? (typeof brand === \"string\" ? brand : \"Logo\")}\n className={cn(\"h-7 w-auto\", logoClassName)}\n />\n ) : null);\n\n const brandNode = logoNode ? (\n <span className=\"flex items-center\">{logoNode}</span>\n ) : (\n <span className={cn(\"flex items-center gap-2 font-display text-[17px] font-bold tracking-tight\", s.brandText)}>\n <span aria-hidden className={cn(\"inline-block h-2.5 w-2.5 rounded-sm\", s.brandDot)} />\n {brand}\n </span>\n );\n\n return (\n <header className={cn(\"w-full transition-colors duration-200\", sticky && \"sticky top-0 z-50\", s.shell, s.header, className)} {...props}>\n <nav className={cn(\"flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200\", s.bar)} aria-label=\"Main navigation\">\n <Link href={brandHref} className=\"shrink-0\">\n {brandNode}\n </Link>\n\n <ul className={s.desktopList}>\n {links.map((link) => (\n <li key={link.href}>\n <Link\n href={link.href}\n target={link.external ? \"_blank\" : undefined}\n rel={link.external ? \"noopener noreferrer\" : undefined}\n className={cn(\"text-sm font-medium transition-colors duration-150\", s.link)}\n >\n {link.label}\n </Link>\n </li>\n ))}\n </ul>\n\n <div className=\"hidden items-center gap-3 md:flex\">\n {languageSwitcher}\n {actions}\n {cta}\n </div>\n\n <button\n type=\"button\"\n aria-label={open ? \"Close menu\" : \"Open menu\"}\n aria-expanded={open}\n onClick={() => setOpen((o) => !o)}\n className={cn(\n \"inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md md:hidden\",\n \"transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n s.menuButton,\n )}\n >\n {open ? <X className=\"h-5 w-5\" /> : <Menu className=\"h-5 w-5\" />}\n </button>\n </nav>\n\n <div\n className={cn(\n \"grid transition-[grid-template-rows,opacity] duration-200 md:hidden\",\n open ? \"grid-rows-[1fr] opacity-100\" : \"grid-rows-[0fr] opacity-0\",\n s.mobilePanel,\n )}\n >\n <div className=\"min-h-0 overflow-hidden\">\n <ul className={cn(\"flex flex-col py-4\", variant !== \"floating\" && \"px-5\")}>\n {languageSwitcher ? (\n <li className=\"px-2 pb-4\">{languageSwitcher}</li>\n ) : null}\n {links.map((link) => (\n <li key={link.href}>\n <Link\n href={link.href}\n target={link.external ? \"_blank\" : undefined}\n rel={link.external ? \"noopener noreferrer\" : undefined}\n onClick={() => setOpen(false)}\n className={cn(\n \"block rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150\",\n s.mobileLink,\n )}\n >\n {link.label}\n </Link>\n </li>\n ))}\n {cta ? (\n <li className=\"mt-3 px-2 pb-2\">{cta}</li>\n ) : actions ? (\n <li className=\"mt-3 flex flex-wrap gap-3 px-2 pb-2\">{actions}</li>\n ) : null}\n </ul>\n </div>\n </div>\n </header>\n );\n};\nNavbar.displayName = \"Navbar\";"],"names":["inverse","light","styles","Navbar","className","variant","brand","logo","logoSrc","logoAlt","logoClassName","brandHref","links","actions","cta","languageSwitcher","sticky","LinkComponent","props","open","setOpen","useState","Link","s","logoNode","jsx","cn","brandNode","jsxs","link","o","X","Menu"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -460,6 +460,8 @@ export declare interface MegaMenuFeatured {
|
|
|
460
460
|
cta?: string;
|
|
461
461
|
/** Background color for the card; glyph text color is computed for contrast. */
|
|
462
462
|
accent?: string;
|
|
463
|
+
/** When true, the card opens in a new tab (`target="_blank"` with `rel="noopener noreferrer"`). */
|
|
464
|
+
external?: boolean;
|
|
463
465
|
}
|
|
464
466
|
|
|
465
467
|
export declare interface MegaMenuItem {
|
|
@@ -471,12 +473,16 @@ export declare interface MegaMenuItem {
|
|
|
471
473
|
featured?: MegaMenuFeatured;
|
|
472
474
|
/** Small pill rendered next to the trigger label. */
|
|
473
475
|
badge?: string;
|
|
476
|
+
/** When true, a plain link item opens in a new tab (`target="_blank"` with `rel="noopener noreferrer"`). */
|
|
477
|
+
external?: boolean;
|
|
474
478
|
}
|
|
475
479
|
|
|
476
480
|
export declare interface MegaMenuLink {
|
|
477
481
|
label: string;
|
|
478
482
|
href: string;
|
|
479
483
|
description?: string;
|
|
484
|
+
/** When true, the link opens in a new tab (`target="_blank"` with `rel="noopener noreferrer"`). */
|
|
485
|
+
external?: boolean;
|
|
480
486
|
}
|
|
481
487
|
|
|
482
488
|
export declare interface MegaMenuProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
|
|
@@ -559,6 +565,8 @@ declare type NavbarVariant = "classic" | "floating" | "inverse";
|
|
|
559
565
|
export declare interface NavLink {
|
|
560
566
|
label: string;
|
|
561
567
|
href: string;
|
|
568
|
+
/** When true, the link opens in a new tab (`target="_blank"` with `rel="noopener noreferrer"`). */
|
|
569
|
+
external?: boolean;
|
|
562
570
|
}
|
|
563
571
|
|
|
564
572
|
export declare const Newsletter: {
|