@anker-in/headless-ui 1.3.73 → 1.3.74
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/biz-components/AiuiProvider/index.d.ts +9 -0
- package/dist/cjs/biz-components/AiuiProvider/index.js +1 -1
- package/dist/cjs/biz-components/FooterNavigation/index.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/MobileMenuComponents.d.ts +2 -1
- package/dist/cjs/biz-components/HeaderNavigation/MobileMenuComponents.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/MobileResourceSidebarMenu.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/MobileSidebarMenu.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/MobileSupportMenu.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/MulticolDropdown.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/ResourceItem.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/ResourceSidebarDropdown.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/SidebarDropdown.d.ts +2 -1
- package/dist/cjs/biz-components/HeaderNavigation/SidebarDropdown.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/SupportsDropdown.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/types.d.ts +1 -0
- package/dist/cjs/biz-components/HeaderNavigation/types.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/useNavCollapse.d.ts +30 -0
- package/dist/cjs/biz-components/HeaderNavigation/useNavCollapse.js +1 -0
- package/dist/cjs/biz-components/HeaderNavigation/useScrollLock.d.ts +2 -1
- package/dist/cjs/biz-components/HeaderNavigation/useScrollLock.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/withCategory.js +1 -1
- package/dist/cjs/biz-components/SearchPage/index.js +1 -1
- package/dist/cjs/components/badge.d.ts +1 -1
- package/dist/cjs/components/badge.js +1 -1
- package/dist/cjs/components/board.js +1 -1
- package/dist/esm/biz-components/AiuiProvider/index.d.ts +9 -0
- package/dist/esm/biz-components/AiuiProvider/index.js +1 -1
- package/dist/esm/biz-components/FooterNavigation/index.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/MobileMenuComponents.d.ts +2 -1
- package/dist/esm/biz-components/HeaderNavigation/MobileMenuComponents.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/MobileResourceSidebarMenu.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/MobileSidebarMenu.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/MobileSupportMenu.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/MulticolDropdown.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/ResourceItem.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/ResourceSidebarDropdown.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/SidebarDropdown.d.ts +2 -1
- package/dist/esm/biz-components/HeaderNavigation/SidebarDropdown.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/SupportsDropdown.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/types.d.ts +1 -0
- package/dist/esm/biz-components/HeaderNavigation/useNavCollapse.d.ts +30 -0
- package/dist/esm/biz-components/HeaderNavigation/useNavCollapse.js +1 -0
- package/dist/esm/biz-components/HeaderNavigation/useScrollLock.d.ts +2 -1
- package/dist/esm/biz-components/HeaderNavigation/useScrollLock.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/withCategory.js +1 -1
- package/dist/esm/biz-components/SearchPage/index.js +1 -1
- package/dist/esm/components/badge.d.ts +1 -1
- package/dist/esm/components/badge.js +1 -1
- package/dist/esm/components/board.js +1 -1
- package/dist/tokens/oneAnker.css +22 -0
- package/package.json +1 -1
- package/style.css +29 -2
- package/tailwind.config.js +5 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{Fragment as Pe,jsx as e,jsxs as o}from"react/jsx-runtime";import{forwardRef as ae,useCallback as ne,useEffect as G,useImperativeHandle as Ee,useMemo as P,useRef as J,useState as D}from"react";import{Picture as me,Text as w,Button as oe,Container as pe,BrandStrip as Te}from"../../components/index.js";import{withLayout as He}from"../../shared/Styles.js";import{cn as E,getLocalizedPath as ie}from"../../helpers/utils.js";import Le,{useNavContext as te}from"./NavProvider.js";import{HeaderNavigationMenu as $,HeaderNavigationBlockType as T,HeaderNavigationActionBlockType as C}from"./types.js";import ze from"jump.js";import{useGSAP as le}from"@gsap/react";import{gsap as re}from"gsap";import{WithSidebar as fe,WithSupports as be,WithMulticol as ve,WithGroupCategory as ge,WithResource as he}from"./withCategory.js";import{Menu as Be,Close as ye,User as Re,LeftArrow as Ie,DownArrow as Ne,Polygon as Ae}from"./icons/index.js";import Oe from"../NavigationSearch/index.js";import{ResourceSidebarDropdown as je}from"./ResourceSidebarDropdown.js";import{MobileResourceSidebarMenu as _e}from"./MobileResourceSidebarMenu.js";import{SidebarDropdown as We}from"./SidebarDropdown.js";import{useScrollLock as se}from"./useScrollLock.js";import{MulticolDropdown as $e}from"./MulticolDropdown.js";import{SupportsDropdown as Ke}from"./SupportsDropdown.js";import{MobileSidebarMenu as Fe}from"./MobileSidebarMenu.js";import{MobileSupportMenu as Ue}from"./MobileSupportMenu.js";import{MobileMulticolMenu as Ge}from"./MobileMulticolMenu.js";import{MenuItem as ce}from"./MobileMenuComponents.js";import{useAiuiContext as ue}from"../AiuiProvider/index.js";import ke from"../../shared/throttle.js";const we=ae((a,s)=>{const{data:{header:r}={},buildProps:c,event:f,profile:H,theme:n="light",isTop:i=!1,searchResult:v,onSearch:p,isSearching:u,keywords:z,onPrimaryNavClick:N,onSeriesProductClick:g,onSidebarNavClick:x,onMobileMenuToggle:Y,headerId:M,cartCount:B,menuData:R,render:I,componentOverrides:q,...Q}=a,[A,d]=D(!1),[K,O]=D(!1),[j,L]=D(!1),[V,b]=D(!1),_=J(null),k=J(null),X=()=>{const h=document?.querySelector("body")?.offsetWidth||0;b(h<=1440)};G(()=>(X(),window.addEventListener("resize",X),()=>{window.removeEventListener("resize",X)}),[]),Ee(s,()=>k.current),G(()=>{k.current&&i&&ze(k.current,{duration:0,offset:k.current?.getBoundingClientRect()?.bottom||0})},[i]),G(()=>{if(i){O(!1),L(!1);return}let h=0,t=0,l=0;const m=()=>document?.documentElement?.scrollTop||document?.body?.scrollTop||0,y=m();h=y,O(y>300),L(y>30);const F=ke(()=>{const S=m(),U=S-h;L(S>30),U>0?(t=0,l+=U,l>=300&&S>300&&O(!0)):U<0&&(l=0,t+=Math.abs(U),t>=300&&(O(!1),t=0)),h=S},100);return window.addEventListener("scroll",F,{passive:!0}),()=>window.removeEventListener("scroll",F)},[i]),G(()=>{f&&(f.search=()=>d(!0))},[f]),le(()=>{_?.current&&A&&re.fromTo(_.current,{height:0},{height:"auto",duration:.3})},[A]),se(A);const Z=P(()=>r?.bar?.actions?.find(h=>h?.blockType===C.Search)?.searchBar?.[0]||{},[r]),W=I?.mobileHeaderNavigation;return e(Le,{buildProps:c,profile:H,isMobile:V,event:f,payloadData:r,onSidebarNavClick:x,onSeriesProductClick:g,cartCount:B,componentOverrides:q,children:e("header",{...Q,id:M||"header","data-ui-component-id":"HeaderNavigation",className:i?"relative z-[100] bg-white":E("sticky top-0 z-[100] transition-transform duration-500 ease-in-out",{"translate-y-[-100%]":K}),ref:k,children:o("div",{className:E("hover:bg-white hover:text-black",n==="light"?"text-black":"text-white",{"!bg-white transition-all duration-500 ease-in-out":!i&&j},{"hover:!text-black":n==="dark","!text-black":!i&&j}),onClick:()=>!i&&L(!0),children:[e(Ce,{data:r,className:"desktop:block hidden !bg-white",theme:n,onNavItemClick:()=>!i&&L(!0),onPrimaryNavClick:N}),W?e(W,{className:"desktop:hidden block !bg-white",menuData:R,data:r,onPrimaryNavClick:N}):e(xe,{menuData:R,data:r,className:"desktop:hidden block !bg-white",onPrimaryNavClick:N,onMobileMenuToggle:Y}),A&&o("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${k?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[e("div",{ref:_,className:E("overflow-y-auto",{}),children:e(Oe,{data:Z,keywords:z,isSearching:u,searchResult:v,onSearch:h=>{p?.(h)},onClose:()=>{p?.(),d(!1)}})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>d(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:h=>{(h.key==="Enter"||h.key===" "||h.key==="Escape")&&(h.preventDefault(),d(!1))}})]})]})})})}),Ce=ae((a,s)=>{const{data:r,onNavItemClick:c,className:f,theme:H,onPrimaryNavClick:n}=a,{event:i,profile:v}=te(),[p,u]=D(!1),{locale:z="us"}=ue(),N=P(()=>ge(r?.categories?.filter(t=>t?.pcShow)),[r]),[g,x]=D(null),[Y,M]=D([]),B=J(null),[R,I]=D(!1),q=J(null),Q=J(null),A=J(N.map(t=>Array(t?.length||0).fill(null)));G(()=>{N?.length&&M(N?.map((t,l)=>t?.map((m,y)=>({groupIndex:l,index:y,open:!1}))))},[N]);const d=P(()=>{let t=null;for(const l of Y){for(const m of l)if(m.open){t=m;break}if(t)break}return t},[Y]);se(!!d?.open||R);const K=(t,l,m)=>{I(!1);const y=N[l][m];if(y?.components?.[0]?.blockType===T.Links)y?.components?.[0]?.url&&window.open(y?.components?.[0]?.url,y?.components?.[0]?.target??"_blank");else{const F=N?.flat()||[],S=F?.findIndex(U=>U?.id===N[l][m]?.id);t.stopPropagation(),c?.(),n?.(F[S],S),x(y),M(U=>U.map(De=>De.map(ee=>ee.groupIndex===l&&ee.index===m?{...ee,open:!ee.open}:{...ee,open:!1})))}},O=(t,l,m)=>{t.key==="Enter"||t.key===" "?(t.preventDefault(),K(t,l,m)):t.key==="Escape"&&d?.groupIndex===l&&d?.index===m&&(t.preventDefault(),j())},j=()=>{M(t=>t.map(l=>l.map(m=>({...m,open:!1}))))},L=P(()=>{if(g)return g?.components?.[0]?.blockType},[g]),V=fe(We,g),b=he(je,g),_=ve($e,g),k=be(Ke,{categoriesItem:g,currentNavItemRef:A.current?.[d?.groupIndex||0]?.[d?.index||0]}),X=P(()=>{switch(L){case T.Sidebar:return e(V,{});case T.Resource:return e(b,{});case T.Supports:return e(k,{});case T.Multicol:return e(_,{});default:return null}},[L,g]),Z=P(()=>r?.bar?.actions?.filter(t=>t?.pcShow),[r]),W=P(()=>Z?.find(t=>t?.blockType===C.Profile),[Z]),h=ne(()=>{I(t=>!t)},[]);return G(()=>{if(B?.current){const t=B.current;return t.addEventListener("click",h),()=>{t.removeEventListener("click",h)}}},[h]),le(()=>{d?.open&&re.fromTo(Q?.current,{height:0},{height:"auto"})},[d?.open]),o(pe,{className:E("relative h-[92px]",f),children:[o("div",{ref:q,onClick:j,className:"flex h-full flex-col justify-end gap-4",children:[o("div",{className:"flex items-center justify-between",children:[e(Me,{}),e(de,{ref:B,actions:Z,activeStatus:R})]}),e("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",children:N?.map((t,l)=>e("div",{className:"flex gap-3",children:t?.map((m,y)=>{const F=d?.groupIndex===l&&d?.index===y;return e("div",{ref:S=>{A.current[l][y]=S},className:"group",children:o("div",{className:"relative",children:[o("button",{className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4",onClick:S=>K(S,l,y),onKeyDown:S=>O(S,l,y),"aria-expanded":F,"aria-haspopup":"true","aria-label":m.text,children:[e(w,{html:m.text,className:"text-sm font-bold leading-[1.4]"}),e(Ne,{className:E("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":d?.groupIndex===l&&d?.index===y,"opacity-100":p&&d?.groupIndex===l&&d?.index===y,invisible:!m?.components?.length||m?.components?.[0]?.blockType===T.Links})})]}),e("div",{className:E("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":F},H==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},m.id)})},`groupCategory-${l}`))})]}),o("div",{role:"menu","aria-hidden":!(d?.open&&g),className:E("absolute left-0 top-full z-[999] flex w-full flex-col overflow-hidden border-t border-b-[#E4E5E6] bg-black/70 text-black",{hidden:!(d?.open&&g)}),onMouseEnter:()=>u(!0),onMouseLeave:()=>u(!1),style:{height:`calc(100dvh - ${q?.current?.getBoundingClientRect()?.bottom}px)`},children:[e("div",{ref:Q,className:E("relative z-50",{"overflow-hidden":L!==T.Supports}),children:X}),e("div",{className:"flex-1 bg-transparent",onClick:j,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:t=>{(t.key==="Enter"||t.key===" "||t.key==="Escape")&&(t.preventDefault(),j())}})]}),R&&o("div",{className:"absolute left-0 top-full z-[999] flex h-dvh w-full bg-black/70",role:"dialog","aria-modal":"true","aria-label":"User profile menu",children:[e("div",{className:"rounded-box absolute w-[272px] overflow-hidden bg-white p-4",style:{right:`calc(100% - ${B?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:v?.email?o(Pe,{children:[e(w,{html:v?.nick_name||W?.welcome,className:"text-sm font-bold"}),e("div",{className:"mt-2 h-px bg-[#D9D9D9]","aria-hidden":"true"}),e("nav",{className:"mt-2",role:"navigation","aria-label":"Profile navigation",children:W?.profiles?.map(t=>e(ce,{className:"py-2",label:t?.title,href:ie(t?.url,z)},t.id))})]}):o(Pe,{children:[e(Ae,{className:"absolute -top-2 right-[46px] z-30 text-white","aria-hidden":"true"}),e(w,{html:W?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:W?.benefits?.map(t=>o("div",{className:"flex items-center gap-[6px]",children:[e(me,{source:t.benefitIcon?.url,className:"size-4 shrink-0",alt:t.benefit,width:16,height:16}),e(w,{html:t.benefit,className:"text-sm font-bold leading-[1.4]"})]},t.id))}),o("div",{className:"mt-4 flex flex-wrap gap-2",children:[e(oe,{className:"grow",variant:"secondary",size:"lg",onClick:()=>i?.join?.(),children:e(w,{html:W?.primaryButton||"Join Now",className:"font-bold"})}),e(oe,{className:"grow",variant:"primary",size:"lg",onClick:()=>i?.login?.(),children:e(w,{html:W?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>I(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:t=>{(t.key==="Enter"||t.key===" "||t.key==="Escape")&&(t.preventDefault(),I(!1))}})]})]})}),xe=ae(({data:a,menuData:s,className:r,onPrimaryNavClick:c,onMobileMenuToggle:f},H)=>{const n=P(()=>ge(a?.categories?.filter(b=>b?.mobileShow)),[a]),{currentMenu:i,setCurrentMenu:v,subSubCategory:p}=te(),[u,z]=D(!1),[N,g]=D(0),[x,Y]=D(null),M=J(null),B=J(!1);G(()=>{if(M?.current&&u){const b=M?.current?.getBoundingClientRect();g(window?.innerHeight-(b?.top||0))}f?.({open:u})},[u,f]),G(()=>{if(!u)return;const b=ke(()=>{if(M?.current){const _=M.current.getBoundingClientRect();B.current=!0,g(window?.innerHeight-(_?.top||0))}},100);return window.addEventListener("resize",b),()=>window.removeEventListener("resize",b)},[u]),le(()=>{if(B.current){re.set(M.current,{height:N}),B.current=!1;return}re.fromTo(M.current,{height:0},{height:N,duration:.3})},[N]),se(u);const R=P(()=>x?.components?.[0]?.blockType,[x]),I=be(Ue,{categoriesItem:x}),q=fe(Fe,x),Q=he(_e,x),A=ve(Ge,x),d=P(()=>{switch(R){case T.Sidebar:return e(q,{});case T.Resource:return e(Q,{});case T.Supports:return e(I,{});case T.Multicol:return e(A,{});default:return null}},[R,x,I]),K=ne(()=>{z(!1),g(0),v&&v($.Primary)},[z,g,v]),O=P(()=>a?.bar?.actions?.filter(b=>b?.mobileShow&&b?.blockType!==C.Profile),[a]),j=P(()=>a?.bar?.actions?.find(b=>b?.mobileShow&&b?.blockType===C.Profile)||{},[a]),L=P(()=>{switch(i){case $.Primary:return e(qe,{actions:O,menuOpen:u,onMenuOpenClose:()=>{z(!1),g(0)},onMenuOpenClick:()=>z(!0)});case $.Secondary:return e(Se,{title:x?.text,onMenuOpenClose:K,onMenuBackClick:()=>v?.($.Primary)});case $.Third:return e(Se,{title:p?.label,onMenuOpenClose:K,onMenuBackClick:()=>v?.($.Secondary)});default:return null}},[u,i,v,x,O,p,K]),V=ne((b,_)=>{const k=Array.isArray(n)?Array.isArray(n[b])?n[b][_]:{}:{};Y(k),k?.components?.[0]?.blockType===T.Links?k?.components?.[0]?.url&&window.open(k?.components?.[0]?.url,k?.components?.[0]?.target??"_blank"):v?.($.Secondary)},[n,v]);return o(pe,{className:E("relative h-[56px]",r),children:[L,u&&o("nav",{ref:M,className:"absolute left-0 top-full z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:N},role:"navigation","aria-label":"Mobile navigation menu",children:[i===$.Primary&&s?e("div",{className:"pt-4",children:e(Te,{data:s})}):null,i===$.Primary?e(Je,{categories:n,onPrimaryMenuClick:V,onPrimaryNavClick:c,profileAction:j,menuData:s}):d]})]})}),Je=({categories:a,onPrimaryMenuClick:s,profileAction:r,onPrimaryNavClick:c,menuData:f})=>o("div",{className:"flex h-full flex-col justify-between",children:[e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:a?.map((H,n)=>o("div",{className:"",children:[n>0||f?e("div",{className:E("my-2 h-px w-full bg-[#E5E5E7]")}):null,H?.map((i,v)=>e(ce,{label:i.text,onClick:()=>{const u=(a?.flat()||[])?.findIndex(z=>z?.id===a[n][v]?.id);s(n,v),c?.(i,u)},icon:i.components?.[0]?.icon},i.id))]},`groupCategory-${n}`))}),e(Ye,{profileAction:r})]}),Ye=({profileAction:a})=>{const[s,r]=D(!1),{profile:c,event:f}=te(),{locale:H="us"}=ue();return o("div",{className:E("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":s}),children:[o("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>r(!s),"aria-expanded":s,"aria-label":c?.nick_name||a?.welcome,children:[o("div",{className:"flex items-center gap-[14px]",children:[e("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:e(Re,{"aria-hidden":"true"})}),e(w,{html:c?.nick_name||a?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!c?.email&&e(Ne,{"aria-hidden":"true",className:E("laptop:size-4 size-5",{"rotate-180":s})})]}),c?.email&&e("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:a?.profiles?.map(n=>e(ce,{label:n?.title,href:ie(n?.url,H)},n.id))}),s&&!c?.email&&o("div",{className:"mt-4",children:[e(w,{html:a?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:a?.benefits?.map(n=>o("div",{className:"flex items-center gap-[6px]",children:[e(me,{source:n.benefitIcon?.url,className:"size-4",alt:n.benefit,width:16,height:16}),e(w,{html:n.benefit,className:"text-sm font-bold leading-[1.4]"})]},n.id))})]}),!c?.email&&o("div",{className:"mt-4 flex items-center gap-3",children:[e(oe,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>f?.join?.(),children:e(w,{html:a?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),e(oe,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>f?.login?.(),children:e(w,{html:a?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},qe=({menuOpen:a,onMenuOpenClose:s,onMenuOpenClick:r,actions:c})=>o("div",{className:"flex h-full items-center justify-between gap-4",children:[e(Me,{}),o("div",{className:"desktop:gap-6 flex items-center gap-4",children:[e(de,{actions:c}),a?e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>s(),"aria-label":"Close menu","aria-expanded":"true",children:e(ye,{className:"size-5","aria-hidden":"true"})}):e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Open menu","aria-expanded":"false","aria-haspopup":"true",children:e(Be,{className:"size-5","aria-hidden":"true"})})]})]}),Me=()=>{const{payloadData:a,isMobile:s}=te(),{locale:r="us"}=ue();return e("a",{href:ie("/",r),className:"hover:text-[#00CBEB] [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:s?a?.bar?.mobileLogo:a?.bar?.desktopLogo}})},de=ae(({actions:a,activeStatus:s=!1},r)=>{const{event:c,cartCount:f}=te(),[H,n]=D(null),i=p=>{switch(p){case C.Search:return"Search";case C.Cart:return`Shopping cart${f>0?` (${f} items)`:""}`;case C.Profile:return"User profile";case C.Livestream:return"Livestream";default:return"Action"}},v=ne((p,u)=>{switch(n(u),p?.blockType){case C.Search:c?.search?.();break;case C.Cart:c?.cart?.();break;case C.Profile:c?.profile?.();break;case C.Livestream:c?.livestream?.();break;default:return()=>{}}},[c]);return e("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(a)&&a?.map((p,u)=>o("button",{className:"relative cursor-pointer border-0 bg-transparent p-0","data-tag":p?.tag||"",ref:p.blockType===C.Profile?r:null,onClick:()=>v(p,u),"aria-label":i(p.blockType),"aria-pressed":s&&H===u,children:[e(w,{html:p.icon,className:E("size-5",{"text-brand-0":s&&H===u}),"aria-hidden":"true"}),p.blockType===C.Cart&&f>0&&e("div",{className:"bg-brand-0 absolute right-[-12px] top-[calc(100%-16px)] z-[1] flex min-h-5 min-w-5 items-center justify-center rounded-full px-[2px]","aria-hidden":"true",children:e(w,{html:f?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},p.id))})}),Se=({title:a,onMenuOpenClose:s,onMenuBackClick:r})=>o("div",{className:"flex h-full items-center gap-3",children:[e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Back to previous menu",children:e(Ie,{className:"size-5","aria-hidden":"true"})}),e(w,{html:a,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>s(),"aria-label":"Close menu",children:e(ye,{className:"size-5","aria-hidden":"true"})})]});xe.displayName="MobileNavigation",de.displayName="Actions",we.displayName="HeaderNavigation",Ce.displayName="DesktopNavigation";var kt=He(we);export{kt as default};
|
|
1
|
+
"use client";import{Fragment as Ie,jsx as e,jsxs as o}from"react/jsx-runtime";import{forwardRef as ue,useCallback as de,useEffect as F,useImperativeHandle as Ae,useMemo as L,useRef as $,useState as P}from"react";import{Picture as Ne,Text as k,Button as me,Container as fe,BrandStrip as Oe}from"../../components/index.js";import{withLayout as je}from"../../shared/Styles.js";import{cn as x,getLocalizedPath as ne}from"../../helpers/utils.js";import _e,{useNavContext as re}from"./NavProvider.js";import{HeaderNavigationMenu as K,HeaderNavigationBlockType as C,HeaderNavigationActionBlockType as M}from"./types.js";import $e from"jump.js";import{useGSAP as be}from"@gsap/react";import{gsap as pe}from"gsap";import{WithSidebar as ke,WithSupports as xe,WithMulticol as Ce,WithGroupCategory as we,WithResource as Me}from"./withCategory.js";import{Menu as Ke,Close as Se,User as Ue,LeftArrow as We,DownArrow as ve,Polygon as Fe}from"./icons/index.js";import Ge from"../NavigationSearch/index.js";import{ResourceSidebarDropdown as Je}from"./ResourceSidebarDropdown.js";import{MobileResourceSidebarMenu as Ye}from"./MobileResourceSidebarMenu.js";import{SidebarDropdown as qe}from"./SidebarDropdown.js";import{useScrollLock as ge}from"./useScrollLock.js";import{MulticolDropdown as Qe}from"./MulticolDropdown.js";import{SupportsDropdown as Ve}from"./SupportsDropdown.js";import{MobileSidebarMenu as Xe}from"./MobileSidebarMenu.js";import{MobileSupportMenu as Ze}from"./MobileSupportMenu.js";import{MobileMulticolMenu as et}from"./MobileMulticolMenu.js";import{MenuItem as he}from"./MobileMenuComponents.js";import{useAiuiContext as oe}from"../AiuiProvider/index.js";import Te from"../../shared/throttle.js";import{useNavCollapse as tt}from"./useNavCollapse.js";const De=a=>!!a?.components?.length&&a?.components?.[0]?.blockType!==C.Links,Le=a=>a?.components?.[0]?.blockType===C.Links&&a?.components?.[0]?.url||a?.url||void 0,Pe=a=>a?.components?.[0]?.blockType===C.Links&&a?.components?.[0]?.target||a?.target,at=({groupCategories:a})=>e("div",{className:"pointer-events-none invisible absolute inset-x-0 top-0 overflow-hidden","aria-hidden":"true",children:e(fe,{className:"h-[92px]",children:e("nav",{className:"flex h-full items-end justify-between",children:a?.map((i,r)=>e("div",{className:"flex gap-3","data-nav-item":!0,children:i?.map(l=>o("div",{className:"flex items-center gap-1",children:[e(k,{html:l.text,"data-nav-item-label":!0,className:"desktop:text-pretty text-nowrap text-sm font-bold leading-[1.4]"}),De(l)&&e(ve,{className:"size-4 opacity-0","aria-hidden":"true"})]},l.id))},`measure-group-${r}`))})})}),Ee=ue((a,i)=>{const{data:{header:r}={},buildProps:l,event:g,profile:E,theme:c="light",isTop:n=!1,searchResult:u,onSearch:d,isSearching:m,keywords:H,onPrimaryNavClick:S,onSeriesProductClick:b,onSidebarNavClick:T,onMobileMenuToggle:Y,headerId:w,cartCount:R,menuData:z,render:I,componentOverrides:q,...G}=a,[h,A]=P(!1),[p,O]=P(!1),[Q,j]=P(!1),D=$(null),s=$(null),U=L(()=>we(r?.categories?.filter(y=>y?.pcShow)),[r]),B=tt(s),{setNavCollapsed:ie}=oe();F(()=>{ie?.(B)},[B,ie]),Ae(i,()=>s.current),F(()=>{s.current&&n&&$e(s.current,{duration:0,offset:s.current?.getBoundingClientRect()?.bottom||0})},[n]),F(()=>{if(n){O(!1),j(!1);return}let y=0,V=0,Z=0;const se=()=>document?.documentElement?.scrollTop||document?.body?.scrollTop||0,J=se();y=J,O(J>300),j(J>30);const _=Te(()=>{const W=se(),t=W-y;j(W>30),t>0?(V=0,Z+=t,Z>=300&&W>300&&O(!0)):t<0&&(Z=0,V+=Math.abs(t),V>=300&&(O(!1),V=0)),y=W},100);return window.addEventListener("scroll",_,{passive:!0}),()=>window.removeEventListener("scroll",_)},[n]),F(()=>{g&&(g.search=()=>A(!0))},[g]),be(()=>{D?.current&&h&&pe.fromTo(D.current,{height:0},{height:"auto",duration:.3})},[h]),ge(h);const X=L(()=>r?.bar?.actions?.find(y=>y?.blockType===M.Search)?.searchBar?.[0]||{},[r]),le=I?.mobileHeaderNavigation;return e(_e,{buildProps:l,profile:E,isMobile:B,event:g,payloadData:r,onSidebarNavClick:T,onSeriesProductClick:b,cartCount:R,componentOverrides:q,children:e("header",{...G,id:w||"header","data-ui-component-id":"HeaderNavigation",className:n?"relative z-[100] bg-white":x("sticky top-0 z-[100] transition-transform duration-500 ease-in-out",{"translate-y-[-100%]":p}),ref:s,children:o("div",{className:x("hover:bg-white hover:text-black",c==="light"?"text-black":"text-white",{"!bg-white transition-all duration-500 ease-in-out":!n&&Q},{"hover:!text-black":c==="dark","!text-black":!n&&Q}),onClick:()=>!n&&j(!0),children:[e(at,{groupCategories:U}),e("div",{className:x("hidden",B?"laptop:hidden":"laptop:block","desktop:block"),children:e(He,{data:r,groupCategories:U,theme:c,onNavItemClick:()=>!n&&j(!0),onPrimaryNavClick:S,className:"!bg-white"})}),e("div",{className:x("block",B?"laptop:block":"laptop:hidden","desktop:hidden"),children:le?e(le,{menuData:z,data:r,onPrimaryNavClick:S}):e(Re,{menuData:z,data:r,onPrimaryNavClick:S,onMobileMenuToggle:Y,className:"!bg-white"})}),h&&o("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${s?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[e("div",{ref:D,className:x("overflow-y-auto",{}),children:e(Ge,{data:X,keywords:H,isSearching:m,searchResult:u,onSearch:y=>{d?.(y)},onClose:()=>{d?.(),A(!1)}})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>A(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:y=>{(y.key==="Enter"||y.key===" "||y.key==="Escape")&&(y.preventDefault(),A(!1))}})]})]})})})}),He=ue((a,i)=>{const{data:r,onNavItemClick:l,className:g,theme:E,onPrimaryNavClick:c,groupCategories:n}=a,{event:u,profile:d}=re(),[m,H]=P(!1),{locale:S="us"}=oe(),[b,T]=P(null),[Y,w]=P([]),R=$(null),[z,I]=P(!1),q=$(null),G=$(null),h=$(null),A=$(n.map(t=>Array(t?.length||0).fill(null)));F(()=>{n?.length&&w(n?.map((t,f)=>t?.map((v,N)=>({groupIndex:f,index:N,open:!1}))))},[n]);const p=L(()=>{let t=null;for(const f of Y){for(const v of f)if(v.open){t=v;break}if(t)break}return t},[Y]);ge(!!p?.open||z);const O=(t,f)=>{I(!1),l?.();const v=n?.flat()||[],N=v?.findIndex(ee=>ee?.id===n[t][f]?.id);c?.(v[N],N)},Q=(t,f)=>{const v=n[t][f],N=v?.components?.[0];N&&N?.blockType!==C.Links&&(T(v),w(te=>te.map(ae=>ae.map(ce=>ce.groupIndex===t&&ce.index===f?{...ce,open:!0}:{...ce,open:!1}))))},j=(t,f,v)=>{t.key==="Escape"&&p?.groupIndex===f&&p?.index===v&&(t.preventDefault(),D())},D=()=>{w(t=>t.map(f=>f.map(v=>({...v,open:!1}))))},s=()=>{h.current&&clearTimeout(h.current),h.current=setTimeout(()=>{D()},200)},U=()=>{h.current&&clearTimeout(h.current)},B=()=>{h.current&&clearTimeout(h.current)},ie=()=>{h.current&&clearTimeout(h.current),h.current=setTimeout(()=>{D()},200)},X=L(()=>{if(b)return b?.components?.[0]?.blockType},[b]),le=ke(qe,b),y=Me(Je,b),V=Ce(Qe,b),Z=xe(Ve,{categoriesItem:b,currentNavItemRef:A.current?.[p?.groupIndex||0]?.[p?.index||0]}),se=L(()=>{switch(X){case C.Sidebar:return e(le,{});case C.Resource:return e(y,{});case C.Supports:return e(Z,{});case C.Multicol:return e(V,{});default:return null}},[X,b]),J=L(()=>r?.bar?.actions?.filter(t=>t?.pcShow),[r]),_=L(()=>J?.find(t=>t?.blockType===M.Profile),[J]),W=de(()=>{I(t=>!t)},[]);return F(()=>{if(R?.current){const t=R.current;return t.addEventListener("click",W),()=>{t.removeEventListener("click",W)}}},[W]),be(()=>{p?.open&&G?.current&&pe.fromTo(G?.current,{height:0},{height:"auto"})},[p?.open]),o(fe,{className:x("relative h-[92px]",g),children:[o("div",{ref:q,onClick:D,className:"flex h-full flex-col justify-end gap-4",children:[o("div",{className:"flex items-center justify-between",children:[e(Be,{}),e(ye,{ref:R,actions:J,activeStatus:z})]}),e("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",onMouseEnter:U,onMouseLeave:s,children:n?.map((t,f)=>e("div",{className:"flex gap-3",children:t?.map((v,N)=>{const ee=p?.groupIndex===f&&p?.index===N,te=Pe(v);return e("div",{ref:ae=>{A.current[f][N]=ae},className:"group",onMouseEnter:()=>Q(f,N),children:o("div",{className:"relative",children:[o("a",{href:ne(Le(v),S,"ref=navMenu"),...te?{target:te}:{},rel:te==="_blank"?"noopener noreferrer":void 0,className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4 no-underline",onClick:()=>O(f,N),onKeyDown:ae=>j(ae,f,N),"aria-expanded":ee,"aria-haspopup":"true","aria-label":v.text,children:[e(k,{html:v.text,className:"desktop:text-pretty text-nowrap text-sm font-bold leading-[1.4]"}),e(ve,{className:x("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":p?.groupIndex===f&&p?.index===N,"opacity-100":m&&p?.groupIndex===f&&p?.index===N,hidden:!De(v)})})]}),e("div",{className:x("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":ee},E==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},v.id)})},`groupCategory-${f}`))})]}),o("div",{role:"menu","aria-hidden":!(p?.open&&b),className:x("absolute left-0 top-full z-[999] flex w-full flex-col overflow-hidden border-t border-b-[#E4E5E6] bg-black/70 text-black",{hidden:!(p?.open&&b)}),style:{height:`calc(100dvh - ${q?.current?.getBoundingClientRect()?.bottom}px)`},children:[e("div",{ref:G,className:x("relative z-50",{"overflow-hidden":X!==C.Supports}),onMouseEnter:()=>{B(),H(!0)},onMouseLeave:()=>{ie(),H(!1)},children:se}),e("div",{className:"flex-1 bg-transparent",onClick:D,onMouseEnter:D,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:t=>{(t.key==="Enter"||t.key===" "||t.key==="Escape")&&(t.preventDefault(),D())}})]}),z&&o("div",{className:"absolute left-0 top-full z-[999] flex h-dvh w-full bg-black/70",role:"dialog","aria-modal":"true","aria-label":"User profile menu",children:[e("div",{className:"rounded-box absolute w-[272px] overflow-hidden bg-white p-4",style:{right:`calc(100% - ${R?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:d?.email?o(Ie,{children:[e(k,{html:d?.nick_name||_?.welcome,className:"text-sm font-bold"}),e("div",{className:"mt-2 h-px bg-[#D9D9D9]","aria-hidden":"true"}),e("nav",{className:"mt-2",role:"navigation","aria-label":"Profile navigation",children:_?.profiles?.map(t=>e(he,{className:"py-2",label:t?.title,href:ne(t?.url,S,"ref=navMenu")},t.id))})]}):o(Ie,{children:[e(Fe,{className:"absolute -top-2 right-[46px] z-30 text-white","aria-hidden":"true"}),e(k,{html:_?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:_?.benefits?.map(t=>o("div",{className:"flex items-center gap-[6px]",children:[e(Ne,{source:t.benefitIcon?.url,className:"size-4 shrink-0",alt:t.benefit,width:16,height:16}),e(k,{html:t.benefit,className:"text-sm font-bold leading-[1.4]"})]},t.id))}),o("div",{className:"mt-4 flex flex-wrap gap-2",children:[e(me,{className:"grow",variant:"secondary",size:"lg",onClick:()=>u?.join?.(),children:e(k,{html:_?.primaryButton||"Join Now",className:"font-bold"})}),e(me,{className:"grow",variant:"primary",size:"lg",onClick:()=>u?.login?.(),children:e(k,{html:_?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>I(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:t=>{(t.key==="Enter"||t.key===" "||t.key==="Escape")&&(t.preventDefault(),I(!1))}})]})]})}),Re=ue(({data:a,menuData:i,className:r,onPrimaryNavClick:l,onMobileMenuToggle:g},E)=>{const c=L(()=>we(a?.categories?.filter(s=>s?.mobileShow)),[a]),{currentMenu:n,setCurrentMenu:u,subSubCategory:d}=re(),[m,H]=P(!1),[S,b]=P(0),[T,Y]=P(null),w=$(null),R=$(!1);F(()=>{if(w?.current&&m){const s=w?.current?.getBoundingClientRect();b(window?.innerHeight-(s?.top||0))}g?.({open:m})},[m,g]),F(()=>{if(!m)return;const s=Te(()=>{if(w?.current){const U=w.current.getBoundingClientRect();R.current=!0,b(window?.innerHeight-(U?.top||0))}},100);return window.addEventListener("resize",s),()=>window.removeEventListener("resize",s)},[m]),be(()=>{if(w.current){if(R.current){pe.set(w.current,{height:S}),R.current=!1;return}pe.fromTo(w.current,{height:0},{height:S,duration:.3})}},[S]),ge(m);const z=L(()=>T?.components?.[0]?.blockType,[T]),I=xe(Ze,{categoriesItem:T}),q=ke(Xe,T),G=Me(Ye,T),h=Ce(et,T),A=L(()=>{switch(z){case C.Sidebar:return e(q,{});case C.Resource:return e(G,{});case C.Supports:return e(I,{});case C.Multicol:return e(h,{});default:return null}},[z,T,I]),p=de(()=>{H(!1),b(0),u&&u(K.Primary)},[H,b,u]),O=L(()=>a?.bar?.actions?.filter(s=>s?.mobileShow&&s?.blockType!==M.Profile),[a]),Q=L(()=>a?.bar?.actions?.find(s=>s?.mobileShow&&s?.blockType===M.Profile)||{},[a]),j=L(()=>{switch(n){case K.Primary:return e(ot,{actions:O,menuOpen:m,onMenuOpenClose:()=>{H(!1),b(0)},onMenuOpenClick:()=>H(!0)});case K.Secondary:return e(ze,{title:T?.text,onMenuOpenClose:p,onMenuBackClick:()=>u?.(K.Primary)});case K.Third:return e(ze,{title:d?.label,onMenuOpenClose:p,onMenuBackClick:()=>u?.(K.Secondary)});default:return null}},[m,n,u,T,O,d,p]),D=de((s,U)=>{const B=Array.isArray(c)?Array.isArray(c[s])?c[s][U]:{}:{};B?.components?.[0]?.blockType!==C.Links&&(Y(B),u?.(K.Secondary))},[c,u]);return o(fe,{className:x("relative h-[56px]",r),children:[j,m&&o("nav",{ref:w,className:"absolute left-0 top-full z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:S},role:"navigation","aria-label":"Mobile navigation menu",children:[n===K.Primary&&i?e("div",{className:"pt-4",children:e(Oe,{data:i})}):null,n===K.Primary?e(nt,{categories:c,onPrimaryMenuClick:D,onPrimaryNavClick:l,profileAction:Q,menuData:i}):A]})]})}),nt=({categories:a,onPrimaryMenuClick:i,profileAction:r,onPrimaryNavClick:l,menuData:g})=>{const{locale:E="us"}=oe();return o("div",{className:"flex h-full flex-col justify-between",children:[e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:a?.map((c,n)=>o("div",{className:"",children:[n>0||g?e("div",{className:x("my-2 h-px w-full bg-[#E5E5E7]")}):null,c?.map((u,d)=>{const m=u.components?.[0]?.blockType===C.Links;return e(he,{label:u.text,href:m?ne(Le(u),E,"ref=navMenu"):void 0,target:m?Pe(u):void 0,onClick:()=>{const S=(a?.flat()||[])?.findIndex(b=>b?.id===a[n][d]?.id);i(n,d),l?.(u,S)},icon:u.components?.[0]?.icon},u.id)})]},`groupCategory-${n}`))}),e(rt,{profileAction:r})]})},rt=({profileAction:a})=>{const[i,r]=P(!1),{profile:l,event:g}=re(),{locale:E="us"}=oe();return o("div",{className:x("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":i}),children:[o("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>r(!i),"aria-expanded":i,"aria-label":l?.nick_name||a?.welcome,children:[o("div",{className:"flex items-center gap-[14px]",children:[e("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:e(Ue,{"aria-hidden":"true"})}),e(k,{html:l?.nick_name||a?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!l?.email&&e(ve,{"aria-hidden":"true",className:x("laptop:size-4 size-5",{"rotate-180":i})})]}),l?.email&&e("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:a?.profiles?.map(c=>e(he,{label:c?.title,href:ne(c?.url,E,"ref=navMenu")},c.id))}),i&&!l?.email&&o("div",{className:"mt-4",children:[e(k,{html:a?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:a?.benefits?.map(c=>o("div",{className:"flex items-center gap-[6px]",children:[e(Ne,{source:c.benefitIcon?.url,className:"size-4",alt:c.benefit,width:16,height:16}),e(k,{html:c.benefit,className:"text-sm font-bold leading-[1.4]"})]},c.id))})]}),!l?.email&&o("div",{className:"mt-4 flex items-center gap-3",children:[e(me,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>g?.join?.(),children:e(k,{html:a?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),e(me,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>g?.login?.(),children:e(k,{html:a?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},ot=({menuOpen:a,onMenuOpenClose:i,onMenuOpenClick:r,actions:l})=>o("div",{className:"flex h-full items-center justify-between gap-4",children:[e(Be,{}),o("div",{className:"desktop:gap-6 flex items-center gap-4",children:[e(ye,{actions:l}),a?e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>i(),"aria-label":"Close menu","aria-expanded":"true",children:e(Se,{className:"size-5","aria-hidden":"true"})}):e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Open menu","aria-expanded":"false","aria-haspopup":"true",children:e(Ke,{className:"size-5","aria-hidden":"true"})})]})]}),Be=()=>{const{payloadData:a,isMobile:i}=re(),{locale:r="us"}=oe();return e("a",{href:ne("/",r,"ref=logo"),className:"hover:text-[#00CBEB] [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:i?a?.bar?.mobileLogo:a?.bar?.desktopLogo}})},ye=ue(({actions:a,activeStatus:i=!1},r)=>{const{event:l,cartCount:g}=re(),[E,c]=P(null),n=d=>{switch(d){case M.Search:return"Search";case M.Cart:return`Shopping cart${g>0?` (${g} items)`:""}`;case M.Profile:return"User profile";case M.Livestream:return"Livestream";default:return"Action"}},u=de((d,m)=>{switch(c(m),d?.blockType){case M.Search:l?.search?.();break;case M.Cart:l?.cart?.();break;case M.Profile:l?.profile?.();break;case M.Livestream:l?.livestream?.();break;default:return()=>{}}},[l]);return e("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(a)&&a?.map((d,m)=>o("button",{className:"relative cursor-pointer border-0 bg-transparent p-0","data-tag":d?.tag||"",ref:d.blockType===M.Profile?r:null,onClick:()=>u(d,m),"aria-label":n(d.blockType),"aria-pressed":i&&E===m,children:[e(k,{html:d.icon,className:x("size-5",{"text-brand-0":i&&E===m}),"aria-hidden":"true"}),d.blockType===M.Cart&&g>0&&e("div",{className:"bg-brand-0 absolute right-[-12px] top-[calc(100%-16px)] z-[1] flex min-h-5 min-w-5 items-center justify-center rounded-full px-[2px]","aria-hidden":"true",children:e(k,{html:g?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},d.id))})}),ze=({title:a,onMenuOpenClose:i,onMenuBackClick:r})=>o("div",{className:"flex h-full items-center gap-3",children:[e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Back to previous menu",children:e(We,{className:"size-5","aria-hidden":"true"})}),e(k,{html:a,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>i(),"aria-label":"Close menu",children:e(Se,{className:"size-5","aria-hidden":"true"})})]});Re.displayName="MobileNavigation",ye.displayName="Actions",Ee.displayName="HeaderNavigation",He.displayName="DesktopNavigation";var Ht=je(Ee);export{Ht as default};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 导航内容驱动双向折叠判断 Hook
|
|
3
|
+
*
|
|
4
|
+
* 断点模型(三区间):
|
|
5
|
+
* - viewport < 1025px :固定移动端形态(汉堡菜单 + 抽屉)
|
|
6
|
+
* - viewport >= 1440px :固定桌面形态(完整展开)
|
|
7
|
+
* - 1025–1440px :内容驱动双向切换
|
|
8
|
+
*
|
|
9
|
+
* 通过测量隐藏测量层(始终渲染、visibility:hidden),判断三条件:
|
|
10
|
+
* 1. 导航组之间最小间距 < minGap (默认 16px)
|
|
11
|
+
* 2. 任一导航项文字被截断
|
|
12
|
+
* 3. 导航区总宽度溢出容器
|
|
13
|
+
*
|
|
14
|
+
* 双向对称滞回(避免临界宽度反复横跳/闪烁):
|
|
15
|
+
* - pc → 移动:三条件任一命中即折叠(间距阈值 = minGap)
|
|
16
|
+
* - 移动 → pc:三条件全部以宽松阈值解除(间距 >= minGap + buffer、无截断、无溢出)
|
|
17
|
+
* 折叠点(16) 与恢复点(16+buffer) 之间形成 buffer 宽度的滞回死区。
|
|
18
|
+
*
|
|
19
|
+
* SSR:首帧统一 false(桌面),测量逻辑全部放在 useLayoutEffect 中执行,
|
|
20
|
+
* 服务端与客户端首次渲染一致,避免 hydration mismatch;useLayoutEffect 在绘制前同步执行,
|
|
21
|
+
* 保证小屏首帧直接折叠、不闪现桌面导航。
|
|
22
|
+
*
|
|
23
|
+
* @param containerRef 测量层容器 ref(包含 [data-nav-item] / [data-nav-item-label])
|
|
24
|
+
* @param options { minGap: 最小间距阈值, buffer: 滞回缓冲带像素 }
|
|
25
|
+
* @returns shouldCollapse 是否应折叠为移动端形态
|
|
26
|
+
*/
|
|
27
|
+
export declare function useNavCollapse(containerRef: React.RefObject<HTMLElement | null>, { minGap, buffer }?: {
|
|
28
|
+
minGap?: number;
|
|
29
|
+
buffer?: number;
|
|
30
|
+
}): boolean;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{useLayoutEffect as w,useRef as y,useState as R}from"react";function A(i,{minGap:o=16,buffer:u=20}={}){const[p,s]=R(!1),n=y(!1);return w(()=>{const t=i.current;if(!t)return;const f=()=>{const m=window.innerWidth;if(m<1025){n.current=!0,s(!0);return}if(m>=1440){n.current=!1,s(!1);return}const b=t.scrollWidth>t.clientWidth+1;let c=!1;const g=Array.from(t.querySelectorAll("[data-nav-item-label]"));for(const e of g)if(e.scrollWidth>e.clientWidth+1){c=!0;break}let r=1/0;const a=Array.from(t.querySelectorAll("[data-nav-item]"));for(let e=0;e<a.length-1;e++){const v=a[e].getBoundingClientRect(),h=a[e+1].getBoundingClientRect().left-v.right;h<r&&(r=h)}let l;n.current?l=!(r>=o+u&&!c&&!b):l=r<o||c||b,n.current=l,s(l)};f();const d=new ResizeObserver(()=>f());return d.observe(t),()=>{d.disconnect()}},[i,o,u]),p}export{A as useNavCollapse};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useEffect as
|
|
1
|
+
import{useEffect as r,useRef as d}from"react";function l(n){const t=d(void 0),i=d(void 0);r(()=>{const e=document.documentElement;if(typeof t.current>"u"&&(t.current=e.style.overflow,i.current=e.style.paddingRight),n){const o=Math.max(0,window.innerWidth-e.clientWidth);e.style.paddingRight=`${o}px`,e.style.overflow="hidden"}else e.style.overflow=t.current??"",e.style.paddingRight=i.current??""},[n])}var u=l;export{u as default,l as useScrollLock};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as d}from"react/jsx-runtime";import c,{useMemo as u}from"react";function p(
|
|
1
|
+
import{jsx as d}from"react/jsx-runtime";import c,{useMemo as u}from"react";function p(t,e){const o=u(()=>{let a=null;try{a=JSON.parse(e?.components?.[0]?.sidebar?.categoriesMetadata||"{}")}catch(r){console.log("categoriesMetadata Parse error",r)}return a},[e]),s=u(()=>{let a=null;try{a=JSON.parse(e?.components?.[0]?.sidebar?.seriesMetadata||"[]")}catch(r){console.log("seriesMetadata Parse error",r)}return a},[e]),n=c.forwardRef((a,r)=>d(t,{...a,ref:r,seriesMetadata:s,sidebarCategoriesMetadata:o,navigationTitle:e?.text}));return n.displayName=t.displayName||t.name||"WithSidebarDropdown",n}function y(t,{categoriesItem:e,currentNavItemRef:o}){const s=u(()=>e?.components?.[0]?.supports,[e]),n=c.forwardRef((a,r)=>d(t,{...a,supportsMetadata:s,currentNavItemRef:o,ref:r}));return n.displayName=t.displayName||t.name||"WithSupportsDropdown",n}function M(t,e){const o=e?.components?.[0]?.showStatsBanner,s=e?.components?.[0]?.statsBanner?.[0],n=u(()=>{try{return JSON.parse(e?.components?.[0]?.multicol?.multicolMetadata||"{}")}catch(r){console.log("multicolMetadata Parse error",r)}return null},[e]),a=c.forwardRef((r,l)=>d(t,{...r,ref:l,multicolMetadata:n,showStatsBanner:o,statsBannerData:s}));return a.displayName=t.displayName||t.name||"WithMulticolDropdown",a}function f(t,e){const o=u(()=>{let a=null;try{a=JSON.parse(e?.components?.[0]?.resource?.categoriesMetadata||"{}")}catch(r){console.log("resourceCategoriesMetadata Parse error",r)}return a},[e]),s=u(()=>{let a=null;try{a=JSON.parse(e?.components?.[0]?.resource?.resourceMetadata||"[]")}catch(r){console.log("resourcesMetadata Parse error",r)}return a},[e]),n=c.forwardRef((a,r)=>d(t,{...a,ref:r,resourcesMetadata:s,resourceCategoriesMetadata:o}));return n.displayName=t.displayName||t.name||"WithResourceDropdown",n}function w(t){return t?Object.values(t?.reduce((e,o)=>(e[o.group]||(e[o.group]=[]),e[o.group].push(o),e),{})):[[]]}export{w as WithGroupCategory,M as WithMulticol,f as WithResource,p as WithSidebar,y as WithSupports};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Fragment as I,jsx as e,jsxs as i}from"react/jsx-runtime";import{Heading as S,Tabs as q,TabsList as J,TabsTrigger as Q,TabsContent as A,Text as N,Picture as C,Link as X,Button as L,DropdownMenu as Y,DropdownMenuTrigger as Z,DropdownMenuContent as ee,DropdownMenuItem as te,LoadingDots as M,Badge as ae}from"../../components/index.js";import{DownArrow as se}from"../HeaderNavigation/icons/index.js";import{useMemo as u,useState as O}from"react";import{cn as _,atobID as ie,highlightSearchWord as T,replaceTemplate as le}from"../../helpers/utils.js";import{useAiuiContext as j}from"../AiuiProvider/index.js";import{formatVariantPrice as oe}from"../ShelfDisplay/shelfDisplay.js";import{SearchPageTabType as v}from"./types.js";import{getLocalizedPath as B}from"../../helpers/utils.js";const F=({product:t,onSecondaryButton:o,onPrimaryButton:s,searchValue:n,variantData:m,shopNowLoadingProductId:y,badgeVariant:b})=>{const l=u(()=>m||t?.variants?.[0],[t,m]),{locale:g="us",copyWriting:c,currencyCode:x}=j(),f=y===t?.id,D=u(()=>B(`/products/${t?.handle}?variant=${ie(l?.id)}?ref=search_result_${n?.toLowerCase()}`,g),[t?.handle,l?.id,n,g]),P=l?.coupons?.[0],{price:k,basePrice:r}=oe({locale:x==="CAD"?"us":g||"us",amount:P?P.variant_price4wscode:l?.price?.amount??l?.price,baseAmount:P?l?.price?.amount??l?.price:0,currencyCode:t?.price?.currencyCode||"USD"}),z=u(()=>t?.tags?.filter?.(d=>d?.startsWith?.("CLtag"))?.map?.(d=>d?.replace?.("CLtag:",""))?.slice?.(0,2),[t?.tags]);return e("div",{className:"rounded-image-text ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto overflow-hidden",children:t?.type==="advertising"&&t?.advertisingLink?i(X,{href:B(t?.advertisingLink,g),className:"h-full",children:[e(C,{source:`${t?.advertisingBgImg}`,className:"size-full",imgClassName:"size-full object-cover"}),i("div",{className:"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[e(N,{html:t?.advertisingTitle,className:_("desktop:text-base text-sm font-bold leading-[1.2]",{"text-white":t?.advertisingTheme==="light","text-info-primary":t?.advertisingTheme==="dark"})}),t?.advertisingSubtitle&&e(S,{size:3,html:t?.advertisingSubtitle,className:_("laptop:line-clamp-3 mt-2 line-clamp-4 font-bold",{"text-white":t?.advertisingTheme==="light","text-info-primary":t?.advertisingTheme==="dark"})})]})]}):i("a",{href:D,className:"tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300",children:[e("div",{className:"ipc_search_product_item_image",children:e(C,{className:"lg-desktop:size-[196px] mx-auto size-[138px]",source:l?.image?.url||t?.images?.[0]?.url,alt:t?.title,imgClassName:"object-cover size-full"})}),i("div",{className:"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4",children:[i("div",{className:"flex-1",children:[e("div",{className:"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2",children:z?.map((d,E)=>e(ae,{size:"lg",variant:b,children:d},E))}),e(N,{className:"lg-desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]",weight:"bold",html:T(t?.title||"",n||"")}),e(N,{as:"p",className:"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold",html:T(t?.description,n||"")})]}),i("div",{children:[e("div",{className:"mb-2 flex items-center",children:l?.availableForSale?i(I,{children:[e("div",{className:"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:l?.availableForSale&&k||""}),e("div",{className:"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through",children:l?.availableForSale&&r||""})]}):e("div",{className:"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:c?.soldOutText||"Sold Out"})}),i("div",{className:_("ipc_search_product_item_button_group","lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2"),children:[c?.learnMoreText&&e(L,{variant:"secondary",className:"laptop:w-auto w-full",size:"lg",onClick:d=>{d.preventDefault(),d.stopPropagation(),o?.()},children:c?.learnMoreText}),c?.shopNowText&&e(L,{variant:"primary",className:"laptop:w-auto w-full",size:"lg",disabled:!l?.availableForSale,loading:f,onClick:d=>{d.preventDefault(),d.stopPropagation(),s?.()},children:c?.shopNowText})]})]})]})]})})},re=({blog:t,searchValue:o})=>{const{copyWriting:s,locale:n="us"}=j(),m=u(()=>B(`/blogs/${t?.blog?.handle}/${t?.handle.replace("storefront-","")}`,n),[t,n]);return e("div",{className:"ipc_search_blog_item border-b border-[#E4E5E6] py-6",children:i("div",{className:"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4",children:[e("div",{className:"rounded-image-text laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px] overflow-hidden",children:e(C,{source:t?.image?.url,className:"size-full",imgClassName:"size-full object-cover",alt:t?.title})}),i("div",{className:"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center",children:[e(S,{size:3,html:T(t?.title,o)}),e(N,{html:T(t?.content,o),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]"}),e("div",{className:"desktop:mt-6 mt-4",children:e(L,{as:"a",href:m,variant:"secondary",size:"lg",children:s?.learnMoreText||"Learn More"})})]})]})})},ne=({searchValue:t,page:o})=>{const{copyWriting:s,locale:n="us"}=j(),m=u(()=>B(`/${o?.handle}`,n),[o,n]);return i("div",{className:"ipc_search_page_items border-b border-[#E4E5E6] py-6",children:[e(S,{size:3,html:T(o?.name,t)}),e(N,{as:"p",html:T(o?.bodySummary||"",t),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]"}),e(L,{as:"a",href:m,variant:"secondary",size:"lg",className:"desktop:mt-6 mt-4",children:s?.learnMoreText||"Learn More"})]})},R=({url:t,label:o})=>i("div",{className:"flex flex-col items-center justify-center gap-4",children:[e(C,{source:t,className:"h-[180px] w-[240px]",imgClassName:"object-cover"}),e(N,{html:o,className:"desktop:text-[18px] text-sm font-bold leading-[1.4]"})]}),$=({products:t,title:o,buildProps:s,onSecondaryButton:n,onPrimaryButton:m,badgeVariant:y})=>{const{products:b}=s||{};return console.log(b,"buildProducts"),i("div",{className:"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",children:[e(S,{size:4,weight:"bold",html:o}),e("div",{className:" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4",children:t?.map((l,g)=>{const c=b?.find(f=>f.handle===l.handle);if(!c)return null;const x=c?.variants?.find(f=>f.sku===l.sku);return e(F,{product:c,variantData:x,badgeVariant:y,onSecondaryButton:()=>n?.(),onPrimaryButton:()=>m?.()},l.sku+g)})})]})},de=({searchResult:t,searchValue:o,data:s,onSecondaryButton:n,onPrimaryButton:m,onChangeSort:y,loading:b,shopNowLoadingProductId:l,searchResultCount:g,onChangeTab:c,buildProps:x,componentOverrides:f,className:D,...P})=>{const k=f?.badge?.variant,[r,z]=O(s?.tabs?.[0]),[d,E]=O(!1),[V,G]=O({[v.PRODUCTS]:s?.tabs?.find(a=>a.tabType===v.PRODUCTS)?.sortKeys?.[0],[v.BLOGS]:s?.tabs?.find(a=>a.tabType===v.BLOGS)?.sortKeys?.[0],[v.PAGES]:s?.tabs?.find(a=>a.tabType===v.PAGES)?.sortKeys?.[0]}),w=u(()=>t?.products||[],[t]),K=u(()=>t?.blogs||[],[t]),W=u(()=>t?.pages||[],[t]),U=u(()=>Object.values(g||{}).reduce((a,p)=>a+p,0),[g]),H=u(()=>{const a={advertisingBgImg:`${r?.advertisingBgImg?.url}, ${r?.advertisingMobBgImg?.url} 768`,advertisingTitle:r?.advertisingTitle,advertisingSubtitle:r?.advertisingSubtitle,advertisingLink:r?.advertisingLink,advertisingTheme:r?.advertisingTheme,type:"advertising"};if(!!r?.advertisingBgImg?.url||!!r?.advertisingTitle||!!r?.advertisingLink){const h=[...w||[]];return h.length>=8?h.splice(7,0,a):h.length>0&&h.push(a),h}else return w},[r,w]);return i("div",{...P,className:_("ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16",D),children:[e(S,{size:4,weight:"bold",html:le(s?.title,{totalCount:U?.toString(),inputValue:`"${o}"`})}),e("div",{className:"mt-6",children:i(q,{className:"ipc_search_page_tabs",defaultValue:"products",children:[i("div",{className:" desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between",children:[e(J,{children:s?.tabs?.map(a=>i(Q,{onClick:()=>{z(a);const p=a?.sortKeys?.[0];p&&(G(h=>({...h,[a?.tabType]:p})),y?.(a?.tabType,p)),c?.(a?.tabType)},defaultValue:"products",value:a.tabType,children:[a.label," (",g?.[a.tabType],")"]},a.id))}),i(Y,{onOpenChange:E,children:[e(Z,{asChild:!0,children:i("button",{className:"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2] focus-visible:!outline-none",children:[r?.sortLabel," ",V?.[r?.tabType]?.label," ",e(se,{className:_("inline-block size-4",{"rotate-180":d})})]})}),e(ee,{align:"start",sideOffset:8,className:"rounded-sidebar-shelf bg-white !px-0 py-2 focus-visible:!outline-none",children:r?.sortKeys?.map(a=>e(te,{className:_("laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current hover:!outline-none",{"bg-[#EAEAEC]":V?.[r?.tabType]?.value===a.value}),onClick:()=>{y?.(r?.tabType,a),G(p=>({...p,[r?.tabType]:a}))},children:a.label},a.id))})]})]}),i(A,{value:v.PRODUCTS,className:"ipc_search_page_tabs_products_content mt-6",children:[e("div",{className:" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4",children:H?.map((a,p)=>e(F,{searchValue:o,product:a,shopNowLoadingProductId:l,badgeVariant:k,onSecondaryButton:()=>n?.(a),onPrimaryButton:()=>m?.(a)},(a.id||"")+p))}),b?e("div",{className:"mt-6 flex w-full justify-center",children:e(M,{})}):!w?.length&&i(I,{children:[e(R,{url:s?.noResultImage?.url,label:s?.noResultLabel}),e($,{products:s?.recommendProducts||[],buildProps:x,title:s?.recommendProductsTitle,shopNowLoadingProductId:l,badgeVariant:k})]})]}),e(A,{value:v.BLOGS,className:"ipc_search_page_tabs_blogs_content",children:i("div",{children:[K?.map(a=>e(re,{blog:a,searchValue:o},a.id)),b?e("div",{className:"mt-6 flex justify-center",children:e(M,{})}):!K?.length&&i(I,{children:[e(R,{url:s?.noResultImage?.url,label:s?.noResultLabel}),e($,{products:s?.recommendProducts||[],buildProps:x,title:s?.recommendProductsTitle,badgeVariant:k})]})]})}),i(A,{value:v.PAGES,className:"ipc_search_page_tabs_pages_content",children:[e("div",{children:W?.map((a,p)=>e(ne,{page:a,searchValue:o},(a.global_id||a.id)+p))}),b?e("div",{className:"mt-6 flex justify-center",children:e(M,{})}):!W?.length&&i(I,{children:[e(R,{url:s?.noResultImage?.url,label:s?.noResultLabel}),e($,{products:s?.recommendProducts||[],buildProps:x,title:s?.recommendProductsTitle,shopNowLoadingProductId:l,badgeVariant:k})]})]})]})})]})};var fe=de;export{fe as default};
|
|
1
|
+
import{Fragment as I,jsx as e,jsxs as i}from"react/jsx-runtime";import{Heading as S,Tabs as q,TabsList as J,TabsTrigger as Q,TabsContent as A,Text as N,Picture as C,Link as X,Button as L,DropdownMenu as Y,DropdownMenuTrigger as Z,DropdownMenuContent as ee,DropdownMenuItem as te,LoadingDots as M,Badge as ae}from"../../components/index.js";import{DownArrow as se}from"../HeaderNavigation/icons/index.js";import{useMemo as u,useState as O}from"react";import{cn as _,atobID as ie,highlightSearchWord as T,replaceTemplate as le}from"../../helpers/utils.js";import{useAiuiContext as j}from"../AiuiProvider/index.js";import{formatVariantPrice as oe}from"../ShelfDisplay/shelfDisplay.js";import{SearchPageTabType as v}from"./types.js";import{getLocalizedPath as B}from"../../helpers/utils.js";const F=({product:t,onSecondaryButton:o,onPrimaryButton:s,searchValue:n,variantData:m,shopNowLoadingProductId:y,badgeVariant:b})=>{const l=u(()=>m||t?.variants?.[0],[t,m]),{locale:g="us",copyWriting:c,currencyCode:x}=j(),f=y===t?.id,D=u(()=>B(`/products/${t?.handle}`,g,`variant=${ie(l?.id)}&ref=search_result_${n?.toLowerCase()}`),[t?.handle,l?.id,n,g]),P=l?.coupons?.[0],{price:k,basePrice:r}=oe({locale:x==="CAD"?"us":g||"us",amount:P?P.variant_price4wscode:l?.price?.amount??l?.price,baseAmount:P?l?.price?.amount??l?.price:0,currencyCode:t?.price?.currencyCode||"USD"}),z=u(()=>t?.tags?.filter?.(d=>d?.startsWith?.("CLtag"))?.map?.(d=>d?.replace?.("CLtag:",""))?.slice?.(0,2),[t?.tags]);return e("div",{className:"rounded-image-text ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto overflow-hidden",children:t?.type==="advertising"&&t?.advertisingLink?i(X,{href:B(t?.advertisingLink,g),className:"h-full",children:[e(C,{source:`${t?.advertisingBgImg}`,className:"size-full",imgClassName:"size-full object-cover"}),i("div",{className:"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[e(N,{html:t?.advertisingTitle,className:_("desktop:text-base text-sm font-bold leading-[1.2]",{"text-white":t?.advertisingTheme==="light","text-info-primary":t?.advertisingTheme==="dark"})}),t?.advertisingSubtitle&&e(S,{size:3,html:t?.advertisingSubtitle,className:_("laptop:line-clamp-3 mt-2 line-clamp-4 font-bold",{"text-white":t?.advertisingTheme==="light","text-info-primary":t?.advertisingTheme==="dark"})})]})]}):i("a",{href:D,className:"tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300",children:[e("div",{className:"ipc_search_product_item_image",children:e(C,{className:"lg-desktop:size-[196px] mx-auto size-[138px]",source:l?.image?.url||t?.images?.[0]?.url,alt:t?.title,imgClassName:"object-cover size-full"})}),i("div",{className:"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4",children:[i("div",{className:"flex-1",children:[e("div",{className:"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2",children:z?.map((d,E)=>e(ae,{size:"lg",variant:b,children:d},E))}),e(N,{className:"lg-desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]",weight:"bold",html:T(t?.title||"",n||"")}),e(N,{as:"p",className:"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold",html:T(t?.description,n||"")})]}),i("div",{children:[e("div",{className:"mb-2 flex items-center",children:l?.availableForSale?i(I,{children:[e("div",{className:"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:l?.availableForSale&&k||""}),e("div",{className:"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through",children:l?.availableForSale&&r||""})]}):e("div",{className:"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:c?.soldOutText||"Sold Out"})}),i("div",{className:_("ipc_search_product_item_button_group","lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2"),children:[c?.learnMoreText&&e(L,{variant:"secondary",className:"laptop:w-auto w-full",size:"lg",onClick:d=>{d.preventDefault(),d.stopPropagation(),o?.()},children:c?.learnMoreText}),c?.shopNowText&&e(L,{variant:"primary",className:"laptop:w-auto w-full",size:"lg",disabled:!l?.availableForSale,loading:f,onClick:d=>{d.preventDefault(),d.stopPropagation(),s?.()},children:c?.shopNowText})]})]})]})]})})},re=({blog:t,searchValue:o})=>{const{copyWriting:s,locale:n="us"}=j(),m=u(()=>B(`/blogs/${t?.blog?.handle}/${t?.handle.replace("storefront-","")}`,n),[t,n]);return e("div",{className:"ipc_search_blog_item border-b border-[#E4E5E6] py-6",children:i("div",{className:"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4",children:[e("div",{className:"rounded-image-text laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px] overflow-hidden",children:e(C,{source:t?.image?.url,className:"size-full",imgClassName:"size-full object-cover",alt:t?.title})}),i("div",{className:"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center",children:[e(S,{size:3,html:T(t?.title,o)}),e(N,{html:T(t?.content,o),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]"}),e("div",{className:"desktop:mt-6 mt-4",children:e(L,{as:"a",href:m,variant:"secondary",size:"lg",children:s?.learnMoreText||"Learn More"})})]})]})})},ne=({searchValue:t,page:o})=>{const{copyWriting:s,locale:n="us"}=j(),m=u(()=>B(`/${o?.handle}`,n),[o,n]);return i("div",{className:"ipc_search_page_items border-b border-[#E4E5E6] py-6",children:[e(S,{size:3,html:T(o?.name,t)}),e(N,{as:"p",html:T(o?.bodySummary||"",t),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]"}),e(L,{as:"a",href:m,variant:"secondary",size:"lg",className:"desktop:mt-6 mt-4",children:s?.learnMoreText||"Learn More"})]})},R=({url:t,label:o})=>i("div",{className:"flex flex-col items-center justify-center gap-4",children:[e(C,{source:t,className:"h-[180px] w-[240px]",imgClassName:"object-cover"}),e(N,{html:o,className:"desktop:text-[18px] text-sm font-bold leading-[1.4]"})]}),$=({products:t,title:o,buildProps:s,onSecondaryButton:n,onPrimaryButton:m,badgeVariant:y})=>{const{products:b}=s||{};return console.log(b,"buildProducts"),i("div",{className:"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",children:[e(S,{size:4,weight:"bold",html:o}),e("div",{className:" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4",children:t?.map((l,g)=>{const c=b?.find(f=>f.handle===l.handle);if(!c)return null;const x=c?.variants?.find(f=>f.sku===l.sku);return e(F,{product:c,variantData:x,badgeVariant:y,onSecondaryButton:()=>n?.(),onPrimaryButton:()=>m?.()},l.sku+g)})})]})},de=({searchResult:t,searchValue:o,data:s,onSecondaryButton:n,onPrimaryButton:m,onChangeSort:y,loading:b,shopNowLoadingProductId:l,searchResultCount:g,onChangeTab:c,buildProps:x,componentOverrides:f,className:D,...P})=>{const k=f?.badge?.variant,[r,z]=O(s?.tabs?.[0]),[d,E]=O(!1),[V,G]=O({[v.PRODUCTS]:s?.tabs?.find(a=>a.tabType===v.PRODUCTS)?.sortKeys?.[0],[v.BLOGS]:s?.tabs?.find(a=>a.tabType===v.BLOGS)?.sortKeys?.[0],[v.PAGES]:s?.tabs?.find(a=>a.tabType===v.PAGES)?.sortKeys?.[0]}),w=u(()=>t?.products||[],[t]),K=u(()=>t?.blogs||[],[t]),W=u(()=>t?.pages||[],[t]),U=u(()=>Object.values(g||{}).reduce((a,p)=>a+p,0),[g]),H=u(()=>{const a={advertisingBgImg:`${r?.advertisingBgImg?.url}, ${r?.advertisingMobBgImg?.url} 768`,advertisingTitle:r?.advertisingTitle,advertisingSubtitle:r?.advertisingSubtitle,advertisingLink:r?.advertisingLink,advertisingTheme:r?.advertisingTheme,type:"advertising"};if(!!r?.advertisingBgImg?.url||!!r?.advertisingTitle||!!r?.advertisingLink){const h=[...w||[]];return h.length>=8?h.splice(7,0,a):h.length>0&&h.push(a),h}else return w},[r,w]);return i("div",{...P,className:_("ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16",D),children:[e(S,{size:4,weight:"bold",html:le(s?.title,{totalCount:U?.toString(),inputValue:`"${o}"`})}),e("div",{className:"mt-6",children:i(q,{className:"ipc_search_page_tabs",defaultValue:"products",children:[i("div",{className:" desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between",children:[e(J,{children:s?.tabs?.map(a=>i(Q,{onClick:()=>{z(a);const p=a?.sortKeys?.[0];p&&(G(h=>({...h,[a?.tabType]:p})),y?.(a?.tabType,p)),c?.(a?.tabType)},defaultValue:"products",value:a.tabType,children:[a.label," (",g?.[a.tabType],")"]},a.id))}),i(Y,{onOpenChange:E,children:[e(Z,{asChild:!0,children:i("button",{className:"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2] focus-visible:!outline-none",children:[r?.sortLabel," ",V?.[r?.tabType]?.label," ",e(se,{className:_("inline-block size-4",{"rotate-180":d})})]})}),e(ee,{align:"start",sideOffset:8,className:"rounded-sidebar-shelf bg-white !px-0 py-2 focus-visible:!outline-none",children:r?.sortKeys?.map(a=>e(te,{className:_("laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current hover:!outline-none",{"bg-[#EAEAEC]":V?.[r?.tabType]?.value===a.value}),onClick:()=>{y?.(r?.tabType,a),G(p=>({...p,[r?.tabType]:a}))},children:a.label},a.id))})]})]}),i(A,{value:v.PRODUCTS,className:"ipc_search_page_tabs_products_content mt-6",children:[e("div",{className:" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4",children:H?.map((a,p)=>e(F,{searchValue:o,product:a,shopNowLoadingProductId:l,badgeVariant:k,onSecondaryButton:()=>n?.(a),onPrimaryButton:()=>m?.(a)},(a.id||"")+p))}),b?e("div",{className:"mt-6 flex w-full justify-center",children:e(M,{})}):!w?.length&&i(I,{children:[e(R,{url:s?.noResultImage?.url,label:s?.noResultLabel}),e($,{products:s?.recommendProducts||[],buildProps:x,title:s?.recommendProductsTitle,shopNowLoadingProductId:l,badgeVariant:k})]})]}),e(A,{value:v.BLOGS,className:"ipc_search_page_tabs_blogs_content",children:i("div",{children:[K?.map(a=>e(re,{blog:a,searchValue:o},a.id)),b?e("div",{className:"mt-6 flex justify-center",children:e(M,{})}):!K?.length&&i(I,{children:[e(R,{url:s?.noResultImage?.url,label:s?.noResultLabel}),e($,{products:s?.recommendProducts||[],buildProps:x,title:s?.recommendProductsTitle,badgeVariant:k})]})]})}),i(A,{value:v.PAGES,className:"ipc_search_page_tabs_pages_content",children:[e("div",{children:W?.map((a,p)=>e(ne,{page:a,searchValue:o},(a.global_id||a.id)+p))}),b?e("div",{className:"mt-6 flex justify-center",children:e(M,{})}):!W?.length&&i(I,{children:[e(R,{url:s?.noResultImage?.url,label:s?.noResultLabel}),e($,{products:s?.recommendProducts||[],buildProps:x,title:s?.recommendProductsTitle,shopNowLoadingProductId:l,badgeVariant:k})]})]})]})})]})};var fe=de;export{fe as default};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const badgeVariants: (props?: ({
|
|
4
|
-
size?: "lg" | "sm" | null | undefined;
|
|
4
|
+
size?: "lg" | "sm" | "xs" | null | undefined;
|
|
5
5
|
variant?: "fill" | "outline" | "promotional" | null | undefined;
|
|
6
6
|
promotionalType?: "plus-member" | "regular-member" | "regular-discount" | "time-limited-discount" | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as t,jsxs as e}from"react/jsx-runtime";import"react";import{cva as p}from"class-variance-authority";import{cn as C}from"../helpers/index.js";const d=p("text-
|
|
1
|
+
import{jsx as t,jsxs as e}from"react/jsx-runtime";import"react";import{cva as p}from"class-variance-authority";import{cn as C}from"../helpers/index.js";const d=p("text-badge-outline-text outline-badge-outline-color inline-flex items-center justify-center whitespace-nowrap rounded-[16px] border-none text-xs font-bold outline outline-[1.6px] outline-offset-[-1.6px] transition-colors focus:outline-none",{variants:{size:{xs:"h-[20px] px-[4px] pb-[2px] pt-1 text-[12px] leading-normal",sm:"h-[24px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight",lg:"lg-desktop:px-[8px] lg-desktop:pb-[4px] lg-desktop:pt-[5px] lg-desktop:text-[16px] lg-desktop:h-[28px] h-[24px] p-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight"},variant:{outline:"bg-transparent",fill:"bg-badge-fill-color bg-badge-fill-gradient text-badge-fill-text",promotional:"bg-gradient-brand text-badge-foreground relative !border-none !outline-none"},promotionalType:{"plus-member":"bg-gradient-to-r from-[#6E6754] via-[#4A453A] to-[#070708] ","regular-member":"bg-brand-0 bg-gradient-brand ","regular-discount":"bg-brand-0 bg-gradient-brand ","time-limited-discount":"bg-brand-0 bg-gradient-brand "}},compoundVariants:[{variant:"promotional",size:"sm",class:"!pl-[24px]"},{variant:"promotional",size:"lg",class:"lg-desktop:!pl-[28px] !pl-[24px]"}],defaultVariants:{size:"lg",variant:"outline"}}),g=()=>e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 28",fill:"none",className:"h-full w-auto",children:[t("path",{d:"M23.2222 0C24.2096 0 25.1341 0.501396 25.6903 1.34106L31.4814 10.0846C32.283 11.2948 32.1429 12.9193 31.1474 13.9659L19.0336 26.6998C17.3854 28.4319 14.6772 28.4335 13.0264 26.7039L0.855644 13.9536C-0.130438 12.9204 -0.281462 11.3186 0.492455 10.1091L6.07548 1.38199C6.6279 0.518743 7.56576 0 8.57008 0H23.2222Z",fill:"url(#paint0_linear_22508_6946)"}),t("path",{d:"M22.4084 10.2119C22.9545 9.66492 23.8409 9.66346 24.3881 10.2092C24.9351 10.7553 24.9366 11.6416 24.3908 12.1889L17.451 19.1397C16.8776 19.714 15.9474 19.7155 15.3729 19.1424L8.41114 12.1916C7.86414 11.6455 7.86268 10.7592 8.40841 10.2119C8.95451 9.66492 9.84087 9.66346 10.3881 10.2092L16.4092 16.2193L22.4084 10.2119Z",fill:"url(#paint1_linear_22508_6946)"}),e("defs",{children:[e("linearGradient",{id:"paint0_linear_22508_6946",x1:"2.1318",y1:"0.390243",x2:"33.6892",y2:"7.35765",gradientUnits:"userSpaceOnUse",children:[t("stop",{offset:"0.0865385",stopColor:"#FFF5E0"}),t("stop",{offset:"1",stopColor:"#E8C08A"})]}),e("linearGradient",{id:"paint1_linear_22508_6946",x1:"7.79513",y1:"9.80078",x2:"25.937",y2:"13.8215",gradientUnits:"userSpaceOnUse",children:[t("stop",{offset:"0.9999",stopColor:"#6E6754"}),t("stop",{offset:"1",stopColor:"#050608"})]})]})]}),u=()=>e("svg",{width:"32",height:"28",viewBox:"0 0 32 28",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"h-full w-auto",children:[t("path",{d:"M23.2222 0C24.2096 0 25.1341 0.501396 25.6903 1.34106L31.4814 10.0846C32.283 11.2948 32.1429 12.9193 31.1474 13.9659L19.0336 26.6998C17.3854 28.4319 14.6772 28.4335 13.0264 26.7039L0.855644 13.9536C-0.130438 12.9204 -0.281462 11.3186 0.492455 10.1091L6.07548 1.38199C6.6279 0.518743 7.56576 0 8.57008 0H23.2222Z",fill:"#B5E5F9"}),t("path",{d:"M22.4084 10.2119C22.9545 9.66492 23.8409 9.66346 24.3881 10.2092C24.9351 10.7553 24.9366 11.6416 24.3908 12.1889L17.451 19.1397C16.8776 19.714 15.9474 19.7155 15.3729 19.1424L8.41114 12.1916C7.86414 11.6455 7.86268 10.7592 8.40841 10.2119C8.95451 9.66492 9.84087 9.66346 10.3881 10.2092L16.4092 16.2193L22.4084 10.2119Z",fill:"white"})]}),c=()=>e("svg",{width:"32",height:"28",viewBox:"0 0 32 28",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"h-full w-auto",children:[e("g",{clipPath:"url(#clip0_20420_244316)",children:[t("path",{opacity:"0.4",d:"M3.90567 7.45107C4.19697 6.0806 5.21359 4.9787 6.55622 4.57818L13.8699 2.39643C15.1173 2.02431 16.4683 2.31148 17.4565 3.15879L23.2505 8.12665C24.3141 9.03864 24.7946 10.4588 24.5033 11.8292L21.3938 26.4587C20.9541 28.527 18.921 29.8474 16.8527 29.4077L3.74508 26.6216C1.67675 26.182 0.356442 24.1489 0.796078 22.0805L3.90567 7.45107Z",fill:"#B5E5F9"}),t("path",{d:"M5 7.9615C5 6.50843 5.78799 5.16965 7.05839 4.46433L14.0584 0.57797C15.266 -0.0924777 16.734 -0.0924768 17.9416 0.577971L24.9416 4.46434C26.212 5.16966 27 6.50844 27 7.9615V24C27 26.2091 25.2091 28 23 28H9C6.79086 28 5 26.2091 5 24V7.9615Z",fill:"#B5E5F9"}),t("path",{d:"M20.3094 17.6141C21.0396 17.6143 21.7533 17.8311 22.3603 18.2371C22.9672 18.6431 23.4402 19.22 23.7194 19.8949C23.9986 20.5698 24.0715 21.3124 23.9288 22.0287C23.7861 22.745 23.4343 23.4029 22.9178 23.9192C22.4013 24.4355 21.7434 24.787 21.0272 24.9293C20.311 25.0715 19.5687 24.9982 18.8942 24.7184C18.2197 24.4387 17.6433 23.9652 17.2378 23.3577C16.8324 22.7503 16.6161 22.0362 16.6163 21.3058C16.6163 19.2667 18.2697 17.6141 20.3094 17.6141ZM10.8221 20.5232L19.527 11.8217C19.7491 11.6041 20.0454 11.4786 20.3562 11.4704C20.667 11.4622 20.9695 11.5719 21.2028 11.7776C21.4361 11.9832 21.583 12.2695 21.6139 12.579C21.6449 12.8885 21.5577 13.1983 21.3698 13.4461L21.2677 13.5618L12.5628 22.2632C12.3407 22.4808 12.0444 22.6064 11.7336 22.6145C11.4228 22.6227 11.1203 22.513 10.887 22.3074C10.6537 22.1017 10.5068 21.8154 10.4759 21.5059C10.4449 21.1964 10.5321 20.8867 10.72 20.6388L10.8221 20.5232ZM20.3094 20.0752C19.9831 20.0752 19.6702 20.2049 19.4395 20.4356C19.2088 20.6664 19.0792 20.9794 19.0792 21.3058C19.0792 21.6322 19.2088 21.9452 19.4395 22.176C19.6702 22.4067 19.9831 22.5364 20.3094 22.5364C20.6357 22.5364 20.9486 22.4067 21.1793 22.176C21.41 21.9452 21.5396 21.6322 21.5396 21.3058C21.5396 20.9794 21.41 20.6664 21.1793 20.4356C20.9486 20.2049 20.6357 20.0752 20.3094 20.0752ZM11.6931 9C12.4232 9.00024 13.1369 9.21707 13.7439 9.62306C14.3509 10.0291 14.8239 10.606 15.1031 11.2809C15.3823 11.9558 15.4552 12.6983 15.3125 13.4146C15.1698 14.131 14.818 14.7889 14.3015 15.3052C13.785 15.8215 13.1271 16.173 12.4109 16.3152C11.6947 16.4575 10.9524 16.3841 10.2779 16.1044C9.60339 15.8246 9.02696 15.3511 8.6215 14.7437C8.21604 14.1362 7.99976 13.4221 8 12.6917C8 10.6527 9.65339 9 11.6931 9ZM11.6931 11.4612C11.5315 11.4611 11.3715 11.4928 11.2222 11.5546C11.073 11.6164 10.9373 11.7069 10.823 11.8212C10.5922 12.0518 10.4624 12.3648 10.4622 12.6911C10.4621 13.0175 10.5915 13.3306 10.8221 13.5615C11.0527 13.7923 11.3656 13.9222 11.6918 13.9223C12.0181 13.9223 12.331 13.7927 12.5617 13.5619C12.7924 13.3311 12.922 13.0181 12.922 12.6917C12.922 12.3654 12.7924 12.0524 12.5617 11.8216C12.331 11.5908 12.0181 11.4612 11.6918 11.4612H11.6931Z",fill:"white"})]}),t("defs",{children:t("clipPath",{id:"clip0_20420_244316",children:t("rect",{width:"32",height:"28",fill:"white"})})})]}),x=()=>e("svg",{width:"24",height:"28",viewBox:"0 0 24 28",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"h-full w-auto",children:[t("path",{d:"M0.112855 14.5991L6.23786 0.599179C6.3971 0.235193 6.75672 0 7.15401 0H19.4534C20.1791 0 20.6631 0.74862 20.3653 1.41036L16.5 10H22.5443C23.36 10 23.8326 10.9242 23.3549 11.5855L11.5 28.0001L9.6547 16L1.029 15.9999C0.307853 15.9999 -0.176196 15.2598 0.112855 14.5991Z",fill:"#B5E5F9"}),t("path",{d:"M0.112855 14.5991L6.23786 0.599179C6.3971 0.235193 6.75672 0 7.15401 0H19.4534C20.1791 0 20.6631 0.74862 20.3653 1.41036L16.5 10H22.5443C23.36 10 23.8326 10.9242 23.3549 11.5855L11.5 28.0001L9.6547 16L1.029 15.9999C0.307853 15.9999 -0.176196 15.2598 0.112855 14.5991Z",fill:"#B5E5F9"})]}),m={"plus-member":()=>t(g,{}),"regular-member":()=>t(u,{}),"regular-discount":()=>t(c,{}),"time-limited-discount":()=>t(x,{})};function f({className:r,size:s,variant:o="outline",promotionalType:l,...n}){const i=o==="promotional",a=i?m[l||"regular-discount"]:null;return e("div",{className:C(d({size:s,variant:o,promotionalType:i?l:void 0}),r),...n,children:[i&&a&&t("div",{className:"absolute inset-y-0 left-0 flex -translate-x-1/3 items-center",children:t(a,{})}),t("span",{className:i?"relative z-10":"",children:n.children})]})}var w=f;export{w as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as a,jsxs as c}from"react/jsx-runtime";import{Fragment as s}from"react";import{cn as o}from"../helpers/utils.js";import{Container as m}from"./container.js";import d from"./link.js";import{Text as n}from"./text.js";import{useAiuiContext as f}from"../biz-components/AiuiProvider/index.js";const g=({data:l,sizeClass:t})=>{const{navCollapsed:i}=f();return a("div",{className:"aiui-dark relative z-[46] box-border h-[30px]",children:c(m,{childClassName:"flex !bg-container-primary items-center justify-between",className:"h-full",children:[a("div",{className:o("h-full items-center gap-3",i===void 0?"desktop:flex hidden":i?"hidden":"flex"),children:l?.leftIcon?.map?.((e,r)=>c(s,{children:[r>0&&a("span",{className:"bg-lines h-3 w-px","aria-hidden":"true"}),e?.link?a(d,{href:e?.link,variant:"secondary","aria-label":e?.label||e?.title,className:o("text-sm leading-[1.4] no-underline",t),children:a(n,{className:"board-left-icon","aria-hidden":"true",html:e?.logo||""})}):a(n,{className:"board-left-icon",html:e?.logo||""})]},r))}),a("div",{className:"flex h-full flex-1 items-center justify-end gap-2",children:l?.rightIcon?.map?.((e,r)=>a(s,{children:e?.link?a(d,{href:e?.link,variant:"secondary","aria-label":e?.label||e?.title,className:o("flex items-center text-sm leading-[1.4] no-underline",t),children:a(n,{className:"board-right-icon","aria-hidden":"true",html:e?.logo||""})}):a(n,{className:"board-right-icon",html:e?.logo||""})},r))})]})})};var k=g;export{k as default};
|
package/dist/tokens/oneAnker.css
CHANGED
|
@@ -14,6 +14,13 @@
|
|
|
14
14
|
--brand-color-0: #00cbeb;
|
|
15
15
|
--tabs-radius: 28px;
|
|
16
16
|
--badge-text-color: #080a0f;
|
|
17
|
+
/* Badge 描边型(outline):描边色 + 文字色(oneanker 专属) */
|
|
18
|
+
--badge-outline-color: #93e0ec;
|
|
19
|
+
--badge-outline-text-color: #004966;
|
|
20
|
+
/* Badge 填充型(fill):填充纯色 + 渐变 + 文字色(oneanker 专属) */
|
|
21
|
+
--badge-fill-color: #93e0ec;
|
|
22
|
+
--badge-fill-gradient: linear-gradient(90deg, #93e0ec 0%, #93e0ec 100%);
|
|
23
|
+
--badge-fill-text-color: #004966;
|
|
17
24
|
|
|
18
25
|
/* 侧边栏选中状态和货架组件圆角:<=1024px 为 6px */
|
|
19
26
|
--sidebar-shelf-radius: 6px;
|
|
@@ -39,5 +46,20 @@
|
|
|
39
46
|
--tabs-hover-foreground-color: #004966;
|
|
40
47
|
--brand-gradient-color-0: linear-gradient(90deg, var(--brand-color-0) 0%, var(--brand-color-0) 100%);
|
|
41
48
|
--badge-text-color: #080a0f;
|
|
49
|
+
--badge-outline-color: #93e0ec;
|
|
50
|
+
--badge-outline-text-color: #004966;
|
|
51
|
+
--badge-fill-color: #93e0ec;
|
|
52
|
+
--badge-fill-gradient: linear-gradient(90deg, #93e0ec 0%, #93e0ec 100%);
|
|
53
|
+
--badge-fill-text-color: #004966;
|
|
42
54
|
--btn-text-active-color: #1E2024;
|
|
43
55
|
}
|
|
56
|
+
|
|
57
|
+
/* link 按钮 hover 颜色覆盖(oneAnker 专属) */
|
|
58
|
+
:root .link-btn:hover,
|
|
59
|
+
.aiui-light .link-btn:hover {
|
|
60
|
+
color: #004966;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.aiui-dark .link-btn:hover {
|
|
64
|
+
color: #93E0EC;
|
|
65
|
+
}
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -499,6 +499,9 @@ video {
|
|
|
499
499
|
.invisible {
|
|
500
500
|
visibility: hidden;
|
|
501
501
|
}
|
|
502
|
+
.collapse {
|
|
503
|
+
visibility: collapse;
|
|
504
|
+
}
|
|
502
505
|
.static {
|
|
503
506
|
position: static;
|
|
504
507
|
}
|
|
@@ -659,6 +662,9 @@ video {
|
|
|
659
662
|
.right-0 {
|
|
660
663
|
right: 0px;
|
|
661
664
|
}
|
|
665
|
+
.right-1 {
|
|
666
|
+
right: 0.25rem;
|
|
667
|
+
}
|
|
662
668
|
.right-4 {
|
|
663
669
|
right: 1rem;
|
|
664
670
|
}
|
|
@@ -677,6 +683,9 @@ video {
|
|
|
677
683
|
.top-0 {
|
|
678
684
|
top: 0px;
|
|
679
685
|
}
|
|
686
|
+
.top-1 {
|
|
687
|
+
top: 0.25rem;
|
|
688
|
+
}
|
|
680
689
|
.top-1\/2 {
|
|
681
690
|
top: 50%;
|
|
682
691
|
}
|
|
@@ -3111,6 +3120,9 @@ video {
|
|
|
3111
3120
|
.bg-background {
|
|
3112
3121
|
background-color: var(--container-primary-color);
|
|
3113
3122
|
}
|
|
3123
|
+
.bg-badge-fill-color {
|
|
3124
|
+
background-color: var(--badge-fill-color, var(--brand-color-0));
|
|
3125
|
+
}
|
|
3114
3126
|
.bg-bg-0 {
|
|
3115
3127
|
background-color: var(--bg-color-0);
|
|
3116
3128
|
}
|
|
@@ -3249,6 +3261,9 @@ video {
|
|
|
3249
3261
|
.\!bg-none {
|
|
3250
3262
|
background-image: none !important;
|
|
3251
3263
|
}
|
|
3264
|
+
.bg-badge-fill-gradient {
|
|
3265
|
+
background-image: var(--badge-fill-gradient, var(--brand-gradient-color-0));
|
|
3266
|
+
}
|
|
3252
3267
|
.bg-gradient-brand {
|
|
3253
3268
|
background-image: var(--brand-gradient-color-0);
|
|
3254
3269
|
}
|
|
@@ -3686,6 +3701,9 @@ video {
|
|
|
3686
3701
|
.pb-\[24px\] {
|
|
3687
3702
|
padding-bottom: 24px;
|
|
3688
3703
|
}
|
|
3704
|
+
.pb-\[2px\] {
|
|
3705
|
+
padding-bottom: 2px;
|
|
3706
|
+
}
|
|
3689
3707
|
.pb-\[3px\] {
|
|
3690
3708
|
padding-bottom: 3px;
|
|
3691
3709
|
}
|
|
@@ -4175,9 +4193,15 @@ video {
|
|
|
4175
4193
|
.text-\[var\(--brand-2\2c \#005d8e\)\] {
|
|
4176
4194
|
color: var(--brand-2,#005d8e);
|
|
4177
4195
|
}
|
|
4196
|
+
.text-badge-fill-text {
|
|
4197
|
+
color: var(--badge-fill-text-color, var(--badge-text-color, #ffffff));
|
|
4198
|
+
}
|
|
4178
4199
|
.text-badge-foreground {
|
|
4179
4200
|
color: var(--badge-text-color, #ffffff);
|
|
4180
4201
|
}
|
|
4202
|
+
.text-badge-outline-text {
|
|
4203
|
+
color: var(--badge-outline-text-color, var(--brand-color-0));
|
|
4204
|
+
}
|
|
4181
4205
|
.text-black {
|
|
4182
4206
|
--tw-text-opacity: 1;
|
|
4183
4207
|
color: rgb(0 0 0 / var(--tw-text-opacity, 1));
|
|
@@ -4377,8 +4401,8 @@ video {
|
|
|
4377
4401
|
.outline-offset-\[-1\.6px\] {
|
|
4378
4402
|
outline-offset: -1.6px;
|
|
4379
4403
|
}
|
|
4380
|
-
.outline-
|
|
4381
|
-
outline-color: var(--brand-color-0);
|
|
4404
|
+
.outline-badge-outline-color {
|
|
4405
|
+
outline-color: var(--badge-outline-color, var(--brand-color-0));
|
|
4382
4406
|
}
|
|
4383
4407
|
.outline-btn-primary {
|
|
4384
4408
|
outline-color: var(--info-primary-color);
|
|
@@ -7959,6 +7983,9 @@ video {
|
|
|
7959
7983
|
.desktop\:gap-y-3 {
|
|
7960
7984
|
row-gap: 0.75rem;
|
|
7961
7985
|
}
|
|
7986
|
+
.desktop\:text-pretty {
|
|
7987
|
+
text-wrap: pretty;
|
|
7988
|
+
}
|
|
7962
7989
|
.desktop\:border-none {
|
|
7963
7990
|
border-style: none;
|
|
7964
7991
|
}
|
package/tailwind.config.js
CHANGED
|
@@ -167,6 +167,10 @@ module.exports = {
|
|
|
167
167
|
badge: {
|
|
168
168
|
DEFAULT: 'var(--secondary-brand-color-2)',
|
|
169
169
|
foreground: 'var(--badge-text-color, #ffffff)',
|
|
170
|
+
'outline-color': 'var(--badge-outline-color, var(--brand-color-0))',
|
|
171
|
+
'outline-text': 'var(--badge-outline-text-color, var(--brand-color-0))',
|
|
172
|
+
'fill-color': 'var(--badge-fill-color, var(--brand-color-0))',
|
|
173
|
+
'fill-text': 'var(--badge-fill-text-color, var(--badge-text-color, #ffffff))',
|
|
170
174
|
},
|
|
171
175
|
skeleton: {
|
|
172
176
|
DEFAULT: 'var(--info-tertiary-color)',
|
|
@@ -180,6 +184,7 @@ module.exports = {
|
|
|
180
184
|
},
|
|
181
185
|
backgroundImage: {
|
|
182
186
|
'gradient-brand': 'var(--brand-gradient-color-0)',
|
|
187
|
+
'badge-fill-gradient': 'var(--badge-fill-gradient, var(--brand-gradient-color-0))',
|
|
183
188
|
},
|
|
184
189
|
borderRadius: {
|
|
185
190
|
btn: 'var(--btn-radius)',
|