@ugurdemirel/landcraft 0.1.13 → 0.1.14
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 +45 -45
- package/dist/es/components/MegaMenu/MegaMenu.js.map +1 -1
- package/dist/es/components/Navbar/Navbar.js +19 -19
- package/dist/es/components/Navbar/Navbar.js.map +1 -1
- package/dist/styles.css +3 -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"),n=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:
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),n=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:I,logoClassName:S,brandHref:z="#",items:g,actions:m,cta:h,languageSwitcher:f,sticky:A=!0,LinkComponent:F,onKeyDown:j,...R})=>{const X=u.useId(),d=F??"a",[M,i]=u.useState(null),[c,v]=u.useState(!1),[y,C]=u.useState(null),t=Q[w],_=()=>i(null),N=()=>{i(null),v(!1),C(null)},L=r=>`${X}-panel-${r}`,T=E??(k?e.jsx("img",{src:k,alt:I??(typeof p=="string"?p:"Logo"),className:n.cn("h-7 w-auto",S)}):null),G=T?e.jsx("span",{className:"flex items-center",children:T}):e.jsxs("span",{className:n.cn("flex items-center gap-2 font-display text-[17px] font-bold tracking-tight",t.brandText),children:[e.jsx("span",{"aria-hidden":!0,className:n.cn("inline-block h-2.5 w-2.5 rounded-sm",t.brandDot)}),p]}),O=n.cn("flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150",t.trigger),D=r=>{var l;return e.jsx("div",{className:n.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((s,a)=>e.jsxs("div",{children:[s.title?e.jsx("h4",{className:n.cn("text-xs font-semibold uppercase tracking-[0.14em]",t.columnTitle),children:s.title}):null,e.jsx("ul",{className:n.cn(s.title&&"mt-3","space-y-0.5"),children:s.links.map(o=>e.jsx("li",{children:e.jsxs(d,{href:o.href,onClick:N,className:n.cn("-mx-2 block rounded-md px-2 py-2 transition-colors duration-150",t.columnLink),children:[e.jsx("span",{className:"block text-sm font-medium text-foreground",children:o.label}),o.description?e.jsx("span",{className:n.cn("mt-0.5 block text-[13px] leading-snug",t.linkDescription),children:o.description}):null]})},o.href))})]},s.title??a))})},P=(r,l=!1)=>{const s=r.featured;if(!s)return null;const a=s.accent?{backgroundColor:s.accent,color:J.getContrastText(s.accent)}:void 0;return e.jsxs(d,{href:s.href,onClick:N,className:n.cn("group relative block overflow-hidden rounded-lg p-6 transition-transform duration-150 hover:-translate-y-0.5",l&&"mt-8",!s.accent&&"bg-primary text-on-primary"),style:a,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:s.title}),s.description?e.jsx("p",{className:"mt-1.5 text-[13px] leading-relaxed opacity-80",children:s.description}):null]}),s.cta?e.jsxs("span",{className:"text-sm font-semibold underline decoration-1 underline-offset-4",children:[s.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(),j==null||j(r)};return e.jsxs("header",{className:n.cn("relative w-full transition-colors duration-200",A&&"sticky top-0 z-50",t.shell,t.header,q),onKeyDown:H,...R,children:[e.jsxs("nav",{className:n.cn("relative flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200",t.bar),onMouseLeave:_,"aria-label":"Mega menu",children:[e.jsx(d,{href:z,className:"shrink-0",children:G}),e.jsx("ul",{className:"hidden items-center gap-1 lg:flex",children:g.map((r,l)=>{var o;const s=!!((o=r.columns)!=null&&o.length||r.featured),a=M===l;return e.jsx("li",{className:"relative",children:s?e.jsxs("button",{type:"button","aria-haspopup":"true","aria-expanded":a,"aria-controls":L(l),onClick:()=>i(a?null:l),onMouseEnter:()=>i(l),className:n.cn(O,a&&t.triggerOpen),children:[e.jsxs("span",{className:"flex items-center gap-1.5",children:[r.label,r.badge?e.jsx("span",{className:n.cn("rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide",t.badge),children:r.badge}):null]}),e.jsx(x.ChevronDown,{className:n.cn("h-4 w-4 shrink-0 transition-transform duration-150",a&&"rotate-180")})]}):e.jsxs(d,{href:r.href??"#",className:O,children:[r.label,r.badge?e.jsx("span",{className:n.cn("rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide",t.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:()=>v(r=>!r),className:n.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",t.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 a;if(!((a=r.columns)!=null&&a.length)&&!r.featured)return null;const s=M===l;return e.jsx("div",{id:L(l),role:"region","aria-label":`${r.label} menu`,onMouseEnter:()=>i(l),className:n.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",s?"visible translate-y-0 opacity-100":"pointer-events-none invisible -translate-y-1 opacity-0"),children:e.jsxs("div",{className:n.cn("overflow-hidden rounded-xl border p-6 md:p-8",t.panel,r.featured?"lg:grid lg:grid-cols-[minmax(0,1fr)_auto] lg:gap-12":""),children:[D(r),r.featured&&e.jsx("div",{className:n.cn("mt-8 max-w-sm lg:mt-0 lg:w-64"),children:P(r)})]})},r.label)}),e.jsx("div",{className:n.cn("grid transition-[grid-template-rows,opacity] duration-200 lg:hidden",c?"grid-rows-[1fr] opacity-100":"grid-rows-[0fr] opacity-0",t.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 s;return(s=r.columns)!=null&&s.length||r.featured?e.jsxs("li",{className:"px-5",children:[e.jsxs("button",{type:"button","aria-expanded":y===l,onClick:()=>C(a=>a===l?null:l),className:n.cn("flex w-full items-center justify-between rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150",t.mobileButton),children:[e.jsxs("span",{className:"flex items-center gap-2",children:[r.label,r.badge?e.jsx("span",{className:n.cn("rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide",t.badge),children:r.badge}):null]}),e.jsx(x.ChevronDown,{className:n.cn("h-4 w-4 shrink-0 transition-transform duration-150",y===l&&"rotate-180")})]}),e.jsx("div",{className:n.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??"#",onClick:()=>v(!1),className:n.cn("block rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150",t.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 {languageSwitcher ? (\n <div className=\"flex items-center lg:hidden\">{languageSwitcher}</div>\n ) : null}\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 {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 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,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"),o=require("../../utils/cn.cjs"),
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),q=require("react"),o=require("../../utils/cn.cjs"),p=require("../../icons.cjs"),f="text-on-secondary",t="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:`${t} hover:bg-surface`,brandText:t,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:`${t} hover:bg-surface`,brandText:t,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:b="classic",brand:a,logo:j,logoSrc:m,logoAlt:N,logoClassName:k,brandHref:w="#",links:x,actions:d,cta:i,languageSwitcher:l,sticky:y=!0,LinkComponent:L,...P})=>{const[s,u]=q.useState(!1),c=L??"a",r=B[b],h=j??(m?e.jsx("img",{src:m,alt:N??(typeof a=="string"?a:"Logo"),className:o.cn("h-7 w-auto",k)}):null),T=h?e.jsx("span",{className:"flex items-center",children:h}):e.jsxs("span",{className:o.cn("flex items-center gap-2 font-display text-[17px] font-bold tracking-tight",r.brandText),children:[e.jsx("span",{"aria-hidden":!0,className:o.cn("inline-block h-2.5 w-2.5 rounded-sm",r.brandDot)}),a]});return e.jsxs("header",{className:o.cn("w-full transition-colors duration-200",y&&"sticky top-0 z-50",r.shell,r.header,v),...P,children:[e.jsxs("nav",{className:o.cn("flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200",r.bar),"aria-label":"Main navigation",children:[e.jsx(c,{href:w,className:"shrink-0",children:T}),e.jsx("ul",{className:r.desktopList,children:x.map(n=>e.jsx("li",{children:e.jsx(c,{href:n.href,className:o.cn("text-sm font-medium transition-colors duration-150",r.link),children:n.label})},n.href))}),e.jsxs("div",{className:"hidden items-center gap-3 md:flex",children:[l,d,i]}),e.jsx("button",{type:"button","aria-label":s?"Close menu":"Open menu","aria-expanded":s,onClick:()=>u(n=>!n),className:o.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",r.menuButton),children:s?e.jsx(p.X,{className:"h-5 w-5"}):e.jsx(p.Menu,{className:"h-5 w-5"})})]}),e.jsx("div",{className:o.cn("grid transition-[grid-template-rows,opacity] duration-200 md:hidden",s?"grid-rows-[1fr] opacity-100":"grid-rows-[0fr] opacity-0",r.mobilePanel),children:e.jsx("div",{className:"min-h-0 overflow-hidden",children:e.jsxs("ul",{className:o.cn("flex flex-col py-4",b!=="floating"&&"px-5"),children:[l?e.jsx("li",{className:"px-2 pb-4",children:l}):null,x.map(n=>e.jsx("li",{children:e.jsx(c,{href:n.href,onClick:()=>u(!1),className:o.cn("block rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150",r.mobileLink),children:n.label})},n.href)),i?e.jsx("li",{className:"mt-3 px-2 pb-2",children:i}):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
|
|
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":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as r, jsxs as
|
|
2
|
+
import { jsx as r, jsxs as a } from "react/jsx-runtime";
|
|
3
3
|
import { useId as R, useState as w } from "react";
|
|
4
4
|
import { cn as n } from "../../utils/cn.js";
|
|
5
5
|
import { getContrastText as U } from "../../utils/contrast.js";
|
|
@@ -59,13 +59,13 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
59
59
|
}, Z = ({
|
|
60
60
|
className: E,
|
|
61
61
|
variant: k = "classic",
|
|
62
|
-
brand:
|
|
62
|
+
brand: p,
|
|
63
63
|
logo: I,
|
|
64
64
|
logoSrc: C,
|
|
65
65
|
logoAlt: z,
|
|
66
66
|
logoClassName: A,
|
|
67
67
|
brandHref: F = "#",
|
|
68
|
-
items:
|
|
68
|
+
items: m,
|
|
69
69
|
actions: g,
|
|
70
70
|
cta: h,
|
|
71
71
|
languageSwitcher: f,
|
|
@@ -74,21 +74,21 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
74
74
|
onKeyDown: x,
|
|
75
75
|
...q
|
|
76
76
|
}) => {
|
|
77
|
-
const G = R(), i = _ ?? "a", [L, c] = w(null), [u, v] = w(!1), [y, M] = w(null),
|
|
77
|
+
const G = R(), i = _ ?? "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
79
|
}, T = (e) => `${G}-panel-${e}`, O = I ?? (C ? /* @__PURE__ */ r(
|
|
80
80
|
"img",
|
|
81
81
|
{
|
|
82
82
|
src: C,
|
|
83
|
-
alt: z ?? (typeof
|
|
83
|
+
alt: z ?? (typeof p == "string" ? p : "Logo"),
|
|
84
84
|
className: n("h-7 w-auto", A)
|
|
85
85
|
}
|
|
86
|
-
) : null), J = O ? /* @__PURE__ */ r("span", { className: "flex items-center", children: O }) : /* @__PURE__ */
|
|
87
|
-
/* @__PURE__ */ r("span", { "aria-hidden": !0, className: n("inline-block h-2.5 w-2.5 rounded-sm",
|
|
88
|
-
|
|
86
|
+
) : null), J = O ? /* @__PURE__ */ r("span", { className: "flex items-center", children: O }) : /* @__PURE__ */ a("span", { className: n("flex items-center gap-2 font-display text-[17px] font-bold tracking-tight", t.brandText), children: [
|
|
87
|
+
/* @__PURE__ */ r("span", { "aria-hidden": !0, className: n("inline-block h-2.5 w-2.5 rounded-sm", t.brandDot) }),
|
|
88
|
+
p
|
|
89
89
|
] }), D = n(
|
|
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) => {
|
|
93
93
|
var o;
|
|
94
94
|
return /* @__PURE__ */ r(
|
|
@@ -98,25 +98,25 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
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((l, s) => /* @__PURE__ */
|
|
101
|
+
children: (o = e.columns) == null ? void 0 : o.map((l, s) => /* @__PURE__ */ a("div", { children: [
|
|
102
102
|
l.title ? /* @__PURE__ */ r(
|
|
103
103
|
"h4",
|
|
104
104
|
{
|
|
105
105
|
className: n(
|
|
106
106
|
"text-xs font-semibold uppercase tracking-[0.14em]",
|
|
107
|
-
|
|
107
|
+
t.columnTitle
|
|
108
108
|
),
|
|
109
109
|
children: l.title
|
|
110
110
|
}
|
|
111
111
|
) : null,
|
|
112
|
-
/* @__PURE__ */ r("ul", { className: n(l.title && "mt-3", "space-y-0.5"), children: l.links.map((d) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */
|
|
112
|
+
/* @__PURE__ */ r("ul", { className: n(l.title && "mt-3", "space-y-0.5"), children: l.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
|
className: n(
|
|
118
118
|
"-mx-2 block rounded-md px-2 py-2 transition-colors duration-150",
|
|
119
|
-
|
|
119
|
+
t.columnLink
|
|
120
120
|
),
|
|
121
121
|
children: [
|
|
122
122
|
/* @__PURE__ */ r("span", { className: "block text-sm font-medium text-foreground", children: d.label }),
|
|
@@ -125,7 +125,7 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
125
125
|
{
|
|
126
126
|
className: n(
|
|
127
127
|
"mt-0.5 block text-[13px] leading-snug",
|
|
128
|
-
|
|
128
|
+
t.linkDescription
|
|
129
129
|
),
|
|
130
130
|
children: d.description
|
|
131
131
|
}
|
|
@@ -140,7 +140,7 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
140
140
|
const l = e.featured;
|
|
141
141
|
if (!l) return null;
|
|
142
142
|
const s = l.accent ? { backgroundColor: l.accent, color: U(l.accent) } : void 0;
|
|
143
|
-
return /* @__PURE__ */
|
|
143
|
+
return /* @__PURE__ */ a(
|
|
144
144
|
i,
|
|
145
145
|
{
|
|
146
146
|
href: l.href,
|
|
@@ -152,12 +152,12 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
152
152
|
),
|
|
153
153
|
style: s,
|
|
154
154
|
children: [
|
|
155
|
-
/* @__PURE__ */
|
|
156
|
-
/* @__PURE__ */
|
|
155
|
+
/* @__PURE__ */ a("div", { className: "flex h-full flex-col justify-between gap-4", children: [
|
|
156
|
+
/* @__PURE__ */ a("div", { children: [
|
|
157
157
|
/* @__PURE__ */ r("h4", { className: "font-display text-base font-semibold tracking-tight", children: l.title }),
|
|
158
158
|
l.description ? /* @__PURE__ */ r("p", { className: "mt-1.5 text-[13px] leading-relaxed opacity-80", children: l.description }) : null
|
|
159
159
|
] }),
|
|
160
|
-
l.cta ? /* @__PURE__ */
|
|
160
|
+
l.cta ? /* @__PURE__ */ a("span", { className: "text-sm font-semibold underline decoration-1 underline-offset-4", children: [
|
|
161
161
|
l.cta,
|
|
162
162
|
" →"
|
|
163
163
|
] }) : null
|
|
@@ -175,25 +175,25 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
175
175
|
}, Q = (e) => {
|
|
176
176
|
e.key === "Escape" && N(), x == null || x(e);
|
|
177
177
|
};
|
|
178
|
-
return /* @__PURE__ */
|
|
178
|
+
return /* @__PURE__ */ a(
|
|
179
179
|
"header",
|
|
180
180
|
{
|
|
181
181
|
className: n(
|
|
182
182
|
"relative w-full transition-colors duration-200",
|
|
183
183
|
X && "sticky top-0 z-50",
|
|
184
|
-
|
|
185
|
-
|
|
184
|
+
t.shell,
|
|
185
|
+
t.header,
|
|
186
186
|
E
|
|
187
187
|
),
|
|
188
188
|
onKeyDown: Q,
|
|
189
189
|
...q,
|
|
190
190
|
children: [
|
|
191
|
-
/* @__PURE__ */
|
|
191
|
+
/* @__PURE__ */ a("nav", { className: n("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: [
|
|
192
192
|
/* @__PURE__ */ r(i, { href: F, className: "shrink-0", children: J }),
|
|
193
|
-
/* @__PURE__ */ r("ul", { className: "hidden items-center gap-1 lg:flex", children:
|
|
193
|
+
/* @__PURE__ */ r("ul", { className: "hidden items-center gap-1 lg:flex", children: m.map((e, o) => {
|
|
194
194
|
var d;
|
|
195
195
|
const l = !!((d = e.columns) != null && d.length || e.featured), s = L === o;
|
|
196
|
-
return /* @__PURE__ */ r("li", { className: "relative", children: l ? /* @__PURE__ */
|
|
196
|
+
return /* @__PURE__ */ r("li", { className: "relative", children: l ? /* @__PURE__ */ a(
|
|
197
197
|
"button",
|
|
198
198
|
{
|
|
199
199
|
type: "button",
|
|
@@ -202,16 +202,16 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
202
202
|
"aria-controls": T(o),
|
|
203
203
|
onClick: () => c(s ? null : o),
|
|
204
204
|
onMouseEnter: () => c(o),
|
|
205
|
-
className: n(D, s &&
|
|
205
|
+
className: n(D, s && t.triggerOpen),
|
|
206
206
|
children: [
|
|
207
|
-
/* @__PURE__ */
|
|
207
|
+
/* @__PURE__ */ a("span", { className: "flex items-center gap-1.5", children: [
|
|
208
208
|
e.label,
|
|
209
209
|
e.badge ? /* @__PURE__ */ r(
|
|
210
210
|
"span",
|
|
211
211
|
{
|
|
212
212
|
className: n(
|
|
213
213
|
"rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide",
|
|
214
|
-
|
|
214
|
+
t.badge
|
|
215
215
|
),
|
|
216
216
|
children: e.badge
|
|
217
217
|
}
|
|
@@ -228,17 +228,16 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
228
228
|
)
|
|
229
229
|
]
|
|
230
230
|
}
|
|
231
|
-
) : /* @__PURE__ */
|
|
231
|
+
) : /* @__PURE__ */ a(i, { href: e.href ?? "#", className: D, children: [
|
|
232
232
|
e.label,
|
|
233
|
-
e.badge ? /* @__PURE__ */ r("span", { className: n("rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide",
|
|
233
|
+
e.badge ? /* @__PURE__ */ r("span", { className: n("rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide", t.badge), children: e.badge }) : null
|
|
234
234
|
] }) }, e.label);
|
|
235
235
|
}) }),
|
|
236
|
-
/* @__PURE__ */
|
|
236
|
+
/* @__PURE__ */ a("div", { className: "hidden items-center gap-3 lg:flex", children: [
|
|
237
237
|
f,
|
|
238
238
|
g,
|
|
239
239
|
h
|
|
240
240
|
] }),
|
|
241
|
-
f ? /* @__PURE__ */ r("div", { className: "flex items-center lg:hidden", children: f }) : null,
|
|
242
241
|
/* @__PURE__ */ r(
|
|
243
242
|
"button",
|
|
244
243
|
{
|
|
@@ -249,13 +248,13 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
249
248
|
className: n(
|
|
250
249
|
"inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md lg:hidden",
|
|
251
250
|
"transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
252
|
-
|
|
251
|
+
t.mobileButton
|
|
253
252
|
),
|
|
254
253
|
children: u ? /* @__PURE__ */ r(V, { className: "h-5 w-5" }) : /* @__PURE__ */ r(W, { className: "h-5 w-5" })
|
|
255
254
|
}
|
|
256
255
|
)
|
|
257
256
|
] }),
|
|
258
|
-
|
|
257
|
+
m.map((e, o) => {
|
|
259
258
|
var s;
|
|
260
259
|
if (!((s = e.columns) != null && s.length) && !e.featured) return null;
|
|
261
260
|
const l = L === o;
|
|
@@ -271,12 +270,12 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
271
270
|
k === "floating" ? "inset-x-0 mx-auto w-full max-w-5xl" : "inset-x-0",
|
|
272
271
|
l ? "visible translate-y-0 opacity-100" : "pointer-events-none invisible -translate-y-1 opacity-0"
|
|
273
272
|
),
|
|
274
|
-
children: /* @__PURE__ */
|
|
273
|
+
children: /* @__PURE__ */ a(
|
|
275
274
|
"div",
|
|
276
275
|
{
|
|
277
276
|
className: n(
|
|
278
277
|
"overflow-hidden rounded-xl border p-6 md:p-8",
|
|
279
|
-
|
|
278
|
+
t.panel,
|
|
280
279
|
e.featured ? "lg:grid lg:grid-cols-[minmax(0,1fr)_auto] lg:gap-12" : ""
|
|
281
280
|
),
|
|
282
281
|
children: [
|
|
@@ -295,14 +294,15 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
295
294
|
className: n(
|
|
296
295
|
"grid transition-[grid-template-rows,opacity] duration-200 lg:hidden",
|
|
297
296
|
u ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
|
|
298
|
-
|
|
297
|
+
t.mobilePanel
|
|
299
298
|
),
|
|
300
|
-
children: /* @__PURE__ */ r("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */
|
|
301
|
-
|
|
299
|
+
children: /* @__PURE__ */ r("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ a("ul", { className: "flex flex-col py-4", children: [
|
|
300
|
+
f ? /* @__PURE__ */ r("li", { className: "px-5 pb-4", children: f }) : null,
|
|
301
|
+
m.map(
|
|
302
302
|
(e, o) => {
|
|
303
303
|
var l;
|
|
304
|
-
return (l = e.columns) != null && l.length || e.featured ? /* @__PURE__ */
|
|
305
|
-
/* @__PURE__ */
|
|
304
|
+
return (l = e.columns) != null && l.length || e.featured ? /* @__PURE__ */ a("li", { className: "px-5", children: [
|
|
305
|
+
/* @__PURE__ */ a(
|
|
306
306
|
"button",
|
|
307
307
|
{
|
|
308
308
|
type: "button",
|
|
@@ -310,12 +310,12 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
310
310
|
onClick: () => M((s) => s === o ? null : o),
|
|
311
311
|
className: n(
|
|
312
312
|
"flex w-full items-center justify-between rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150",
|
|
313
|
-
|
|
313
|
+
t.mobileButton
|
|
314
314
|
),
|
|
315
315
|
children: [
|
|
316
|
-
/* @__PURE__ */
|
|
316
|
+
/* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
|
|
317
317
|
e.label,
|
|
318
|
-
e.badge ? /* @__PURE__ */ r("span", { className: n("rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide",
|
|
318
|
+
e.badge ? /* @__PURE__ */ r("span", { className: n("rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide", t.badge), children: e.badge }) : null
|
|
319
319
|
] }),
|
|
320
320
|
/* @__PURE__ */ r(
|
|
321
321
|
P,
|
|
@@ -336,7 +336,7 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
336
336
|
"grid transition-[grid-template-rows,opacity] duration-200",
|
|
337
337
|
y === o ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
|
|
338
338
|
),
|
|
339
|
-
children: /* @__PURE__ */ r("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */
|
|
339
|
+
children: /* @__PURE__ */ r("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ a("div", { className: "py-2 pl-1", children: [
|
|
340
340
|
j(e),
|
|
341
341
|
e.featured ? /* @__PURE__ */ r("div", { className: "max-w-sm", children: B(e, !0) }) : null
|
|
342
342
|
] }) })
|
|
@@ -349,7 +349,7 @@ const $ = "text-on-secondary", b = "text-foreground", Y = {
|
|
|
349
349
|
onClick: () => v(!1),
|
|
350
350
|
className: n(
|
|
351
351
|
"block rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150",
|
|
352
|
-
|
|
352
|
+
t.mobileLink
|
|
353
353
|
),
|
|
354
354
|
children: e.label
|
|
355
355
|
}
|
|
@@ -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 {languageSwitcher ? (\n <div className=\"flex items-center lg:hidden\">{languageSwitcher}</div>\n ) : null}\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 {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 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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"}
|
|
@@ -3,7 +3,7 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
|
|
|
3
3
|
import { useState as D } from "react";
|
|
4
4
|
import { cn as o } from "../../utils/cn.js";
|
|
5
5
|
import { X as P, Menu as T } from "../../icons.js";
|
|
6
|
-
const
|
|
6
|
+
const f = "text-on-secondary", d = "text-foreground", C = {
|
|
7
7
|
classic: {
|
|
8
8
|
shell: "border-b border-border bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/75",
|
|
9
9
|
bar: "mx-auto max-w-6xl px-5 sm:px-8",
|
|
@@ -11,8 +11,8 @@ const p = "text-on-secondary", a = "text-foreground", C = {
|
|
|
11
11
|
link: "text-muted-foreground hover:text-foreground",
|
|
12
12
|
mobilePanel: "border-t border-border bg-background",
|
|
13
13
|
mobileLink: "text-muted-foreground hover:bg-surface hover:text-foreground",
|
|
14
|
-
menuButton: `${
|
|
15
|
-
brandText:
|
|
14
|
+
menuButton: `${d} hover:bg-surface`,
|
|
15
|
+
brandText: d,
|
|
16
16
|
brandDot: "bg-foreground",
|
|
17
17
|
desktopList: "hidden items-center gap-7 md:flex"
|
|
18
18
|
},
|
|
@@ -23,8 +23,8 @@ const p = "text-on-secondary", a = "text-foreground", C = {
|
|
|
23
23
|
link: "text-muted-foreground hover:text-foreground",
|
|
24
24
|
mobilePanel: "mx-3 mb-3 max-w-5xl overflow-hidden rounded-b-xl border border-border bg-surface",
|
|
25
25
|
mobileLink: "text-muted-foreground hover:bg-surface hover:text-foreground",
|
|
26
|
-
menuButton: `${
|
|
27
|
-
brandText:
|
|
26
|
+
menuButton: `${d} hover:bg-surface`,
|
|
27
|
+
brandText: d,
|
|
28
28
|
brandDot: "bg-foreground",
|
|
29
29
|
desktopList: "hidden items-center gap-7 md:flex"
|
|
30
30
|
},
|
|
@@ -35,8 +35,8 @@ const p = "text-on-secondary", a = "text-foreground", C = {
|
|
|
35
35
|
link: "text-on-secondary/60 hover:text-on-secondary",
|
|
36
36
|
mobilePanel: "border-t border-white/10 bg-[#101010]",
|
|
37
37
|
mobileLink: "text-on-secondary/70 hover:bg-white/10 hover:text-on-secondary",
|
|
38
|
-
menuButton: `${
|
|
39
|
-
brandText:
|
|
38
|
+
menuButton: `${f} hover:bg-white/10`,
|
|
39
|
+
brandText: f,
|
|
40
40
|
brandDot: "bg-on-secondary",
|
|
41
41
|
desktopList: "hidden items-center gap-7 md:flex"
|
|
42
42
|
}
|
|
@@ -50,21 +50,21 @@ const p = "text-on-secondary", a = "text-foreground", C = {
|
|
|
50
50
|
logoClassName: k,
|
|
51
51
|
brandHref: w = "#",
|
|
52
52
|
links: h,
|
|
53
|
-
actions:
|
|
54
|
-
cta:
|
|
53
|
+
actions: l,
|
|
54
|
+
cta: i,
|
|
55
55
|
languageSwitcher: c,
|
|
56
56
|
sticky: y = !0,
|
|
57
57
|
LinkComponent: L,
|
|
58
58
|
...j
|
|
59
59
|
}) => {
|
|
60
|
-
const [
|
|
60
|
+
const [a, x] = D(!1), m = L ?? "a", r = 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
65
|
className: o("h-7 w-auto", k)
|
|
66
66
|
}
|
|
67
|
-
) : null), B =
|
|
67
|
+
) : null), B = p ? /* @__PURE__ */ e("span", { className: "flex items-center", children: p }) : /* @__PURE__ */ t("span", { className: o("flex items-center gap-2 font-display text-[17px] font-bold tracking-tight", r.brandText), children: [
|
|
68
68
|
/* @__PURE__ */ e("span", { "aria-hidden": !0, className: o("inline-block h-2.5 w-2.5 rounded-sm", r.brandDot) }),
|
|
69
69
|
s
|
|
70
70
|
] });
|
|
@@ -81,23 +81,22 @@ const p = "text-on-secondary", a = "text-foreground", C = {
|
|
|
81
81
|
) }, n.href)) }),
|
|
82
82
|
/* @__PURE__ */ t("div", { className: "hidden items-center gap-3 md:flex", children: [
|
|
83
83
|
c,
|
|
84
|
-
|
|
85
|
-
|
|
84
|
+
l,
|
|
85
|
+
i
|
|
86
86
|
] }),
|
|
87
|
-
c ? /* @__PURE__ */ e("div", { className: "flex items-center md:hidden", children: c }) : null,
|
|
88
87
|
/* @__PURE__ */ e(
|
|
89
88
|
"button",
|
|
90
89
|
{
|
|
91
90
|
type: "button",
|
|
92
|
-
"aria-label":
|
|
93
|
-
"aria-expanded":
|
|
91
|
+
"aria-label": a ? "Close menu" : "Open menu",
|
|
92
|
+
"aria-expanded": a,
|
|
94
93
|
onClick: () => x((n) => !n),
|
|
95
94
|
className: o(
|
|
96
95
|
"inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md md:hidden",
|
|
97
96
|
"transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
98
97
|
r.menuButton
|
|
99
98
|
),
|
|
100
|
-
children:
|
|
99
|
+
children: a ? /* @__PURE__ */ e(P, { className: "h-5 w-5" }) : /* @__PURE__ */ e(T, { className: "h-5 w-5" })
|
|
101
100
|
}
|
|
102
101
|
)
|
|
103
102
|
] }),
|
|
@@ -106,10 +105,11 @@ const p = "text-on-secondary", a = "text-foreground", C = {
|
|
|
106
105
|
{
|
|
107
106
|
className: o(
|
|
108
107
|
"grid transition-[grid-template-rows,opacity] duration-200 md:hidden",
|
|
109
|
-
|
|
108
|
+
a ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
|
|
110
109
|
r.mobilePanel
|
|
111
110
|
),
|
|
112
111
|
children: /* @__PURE__ */ e("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ t("ul", { className: o("flex flex-col py-4", b !== "floating" && "px-5"), children: [
|
|
112
|
+
c ? /* @__PURE__ */ e("li", { className: "px-2 pb-4", children: c }) : null,
|
|
113
113
|
h.map((n) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
|
|
114
114
|
m,
|
|
115
115
|
{
|
|
@@ -122,7 +122,7 @@ const p = "text-on-secondary", a = "text-foreground", C = {
|
|
|
122
122
|
children: n.label
|
|
123
123
|
}
|
|
124
124
|
) }, n.href)),
|
|
125
|
-
|
|
125
|
+
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
126
|
] }) })
|
|
127
127
|
}
|
|
128
128
|
)
|
|
@@ -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
|
|
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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"}
|
package/dist/styles.css
CHANGED