@anker-in/headless-ui 1.2.3 → 1.2.4
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/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/cjs/biz-components/HeroBanner/HeroBannerCarousel.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBannerCarousel.js.map +3 -3
- package/dist/cjs/components/button.d.ts +4 -0
- package/dist/cjs/components/button.js +1 -1
- package/dist/cjs/components/button.js.map +3 -3
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/esm/biz-components/HeroBanner/HeroBannerCarousel.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBannerCarousel.js.map +2 -2
- package/dist/esm/components/button.d.ts +4 -0
- package/dist/esm/components/button.js +1 -1
- package/dist/esm/components/button.js.map +3 -3
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var Ne=Object.create;var T=Object.defineProperty;var Ve=Object.getOwnPropertyDescriptor;var He=Object.getOwnPropertyNames;var Te=Object.getPrototypeOf,ze=Object.prototype.hasOwnProperty;var Ce=(t,n)=>{for(var
|
|
1
|
+
"use strict";"use client";var Ne=Object.create;var T=Object.defineProperty;var Ve=Object.getOwnPropertyDescriptor;var He=Object.getOwnPropertyNames;var Te=Object.getPrototypeOf,ze=Object.prototype.hasOwnProperty;var Ce=(t,n)=>{for(var o in n)T(t,o,{get:n[o],enumerable:!0})},te=(t,n,o,x)=>{if(n&&typeof n=="object"||typeof n=="function")for(let d of He(n))!ze.call(t,d)&&d!==o&&T(t,d,{get:()=>n[d],enumerable:!(x=Ve(n,d))||x.enumerable});return t};var B=(t,n,o)=>(o=t!=null?Ne(Te(t)):{},te(n||!t||!t.__esModule?T(o,"default",{value:t,enumerable:!0}):o,t)),Ie=t=>te(T({},"__esModule",{value:!0}),t);var Ee={};Ce(Ee,{default:()=>De});module.exports=Ie(Ee);var e=require("react/jsx-runtime"),s=B(require("react")),$=B(require("gsap")),N=require("gsap/dist/ScrollTrigger"),D=B(require("jump.js")),E=require("react-responsive"),ae=require("react-intersection-observer"),oe=B(require("../../helpers/ScrollLoadVideo.js")),i=require("../../components/index.js"),c=require("../../helpers/index.js"),V=require("class-variance-authority"),ne=require("../../shared/Styles.js"),le=require("../../hooks/useExposure.js"),z=require("../../shared/trackUrlRef.js"),se=require("../../helpers/utils.js"),ie=require("../AiuiProvider/index.js"),pe=require("../../components/button.js"),ue=require("../VideoModal/index.js"),ce=B(require("./HeroBannerCarousel.js"));const f="image",g="hero_banner",Pe=(0,V.cva)("hero-banner-content lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]",{variants:{align:{left:"tablet:px-[32px] laptop:top-1/2 laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] laptop:-translate-y-1/2 left-0 px-[16px]",center:"tablet:top-[84px] laptop:top-[76px] desktop:top-[176px] lg-desktop:top-[192px] left-1/2 top-[84px] -translate-x-1/2 translate-y-0 items-center text-center"}},defaultVariants:{align:"left"}}),Le=(0,V.cva)("hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",{variants:{align:{left:"laptop:text-left",center:"text-center"}},defaultVariants:{align:"left"}}),Se=(0,V.cva)("hero-banner-button-group lg-desktop:gap-3 flex items-center gap-2",{variants:{align:{left:"laptop:justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),Re=(0,V.cva)("hero-banner-icon-group flex items-center gap-2",{variants:{align:{left:"justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),Me=({size:t="base"})=>{const{width:n,height:o}=pe.sizeMap[t];return(0,e.jsx)("svg",{width:n,height:o,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},re=s.default.forwardRef(({data:t,className:n,classNames:o={},onSecondaryClick:x,onPrimaryClick:d,jumpOptions:me={},...j},_)=>{const{locale:O}=(0,ie.useAiuiContext)(),U={...{duration:500,offset:0},...me},C=a=>!a||!O?a:(0,se.getLocalizedPath)(a,O),{label:G,title:u,subtitle:l,endDate:J,endDate_tz:de,dateFormat:fe,pcImage:h,padImage:q,mobileImage:H,pcVideo:ge,padVideo:be,mobileVideo:F,isShowVideo:xe,isVideoLoop:he=!0,primaryButton:p,secondaryButton:r,theme:ye="light",size:I="default",titleSize:P,caption:L=[],blockLink:A,iconArray:ve,align:y="left",enableParallax:W=!0}=t,Y=(0,E.useMediaQuery)({query:"(max-width: 768px)"}),Q=(0,E.useMediaQuery)({query:"(max-width: 1024px)"}),[Z,K]=(0,s.useState)(!1),{ref:ke,inView:X}=(0,ae.useInView)(),S=(0,s.useRef)(null),R=(0,s.useRef)(null),M=(0,s.useRef)(null),v=(0,s.useRef)(null),b=(0,s.useRef)(null),we=u?.trim()||l?.trim()||h?.alt?.trim()||void 0,Be=u!==void 0?u?.trim()||l?.trim()||h?.alt?.trim()||void 0:l&&l.trim()||"",$e=l&&l.trim()||"";return(0,le.useExposure)(b,{componentType:f,componentName:g,componentTitle:Be,componentDescription:$e}),(0,s.useImperativeHandle)(_,()=>b.current),(0,s.useEffect)(()=>{if(t.items&&t.items.length>0||!W)return;$.default.registerPlugin(N.ScrollTrigger);function a(){if(!v.current)return;const m=b.current?.clientHeight||100;window.innerHeight<=m?S.current=N.ScrollTrigger.create({trigger:b.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:k=>{const w=k.progress*40-20;$.default.set(v.current,{yPercent:w})}}):(M.current=N.ScrollTrigger.create({trigger:b.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:k=>{const w=k.progress*20-20;$.default.set(v.current,{yPercent:w})}}),R.current=N.ScrollTrigger.create({trigger:b.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:k=>{const w=k.progress*20;$.default.set(v.current,{yPercent:w})}}))}return X&&a(),()=>{S.current&&S.current.kill(),M.current&&M.current.kill(),R.current&&R.current.kill()}},[X,t.items,W]),t.items&&t.items.length>0?(0,e.jsx)(ce.default,{data:t,className:n,classNames:o,onPrimaryClick:d,onSecondaryClick:x,ref:_,...j}):(0,e.jsx)("div",{...j,ref:ke,"data-ui-component-id":"HeroBanner",children:(0,e.jsxs)("div",{ref:b,className:(0,c.cn)(ye==="dark"?"aiui-dark":"","text-info-primary relative w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]":I==="default","lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]":I==="sm"},n),children:[A&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,z.trackUrlRef)(C(A),`${f}_${g}`),"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${u}#${l}`,tabIndex:-1,"aria-hidden":"true","aria-label":we}),(0,e.jsx)("div",{ref:v,className:(0,c.cn)("absolute left-0 top-0 size-full"),children:xe?(0,e.jsx)(oe.default,{poster:Y?H?.url:Q?q?.url||H?.url:h?.url,src:Y?F?.url:Q?be?.url||F?.url:ge?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:he,playsInline:!0}):(0,e.jsx)(i.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:h?.alt||"",source:`${h?.url||""} , ${q?.url??(H?.url||"")} 1024, ${H?.url||""} 767`})}),(0,e.jsxs)("div",{className:Pe({align:y}),children:[(0,e.jsxs)("div",{className:Le({align:y}),children:[G&&(0,e.jsx)(i.Text,{size:2,as:"p",className:(0,c.cn)("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:G}),u&&(0,e.jsx)(i.Heading,{as:P==="4"?"h1":"h2",html:u,className:(0,c.cn)("hero-banner-title",o.title),size:P?Number(P||"5"):I==="sm"?4:5}),l&&(0,e.jsx)(i.Text,{as:"p",size:2,className:(0,c.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm",o.subtitle),html:l}),J&&(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)(i.Countdown,{endDate:J,endDate_tz:de,dateFormat:fe,variant:"spacious",align:y})})]}),(0,e.jsxs)("div",{className:(0,c.cn)(Se({align:y}),o.buttonGroup),children:[r?.isShowPlayVideoButton&&r?.playVideoButtonText?(0,e.jsxs)(i.Button,{onClick:()=>K(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${u}#${l}#${r?.playVideoButtonText}`,children:[r?.playVideoButtonText," ",(0,e.jsx)(Me,{size:"lg"})]}):r?.text?(0,e.jsxs)(i.Button,{"aria-label":u??l,size:"lg",variant:"secondary",className:(0,c.cn)("hero-banner-secondary-button",o.secondaryButton),as:r?.isCustomSecondaryButton?"button":"a",href:(0,z.trackUrlRef)(C(r?.link),`${f}_${g}`),target:r?.target,rel:r?.target==="_blank"?r?.rel??"noopener noreferrer":r?.rel,onClick:a=>{if(r.link?.startsWith("#")){a.preventDefault();const m=document.querySelector(r.link);m&&(0,D.default)(m,U)}r?.isCustomSecondaryButton&&x?.(t,a,r?.customSecondaryEventId)},"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${u}#${l}#${r?.text}`,children:[r?.text,(0,e.jsx)("span",{className:"sr-only",children:u??l})]}):null,p&&p.text&&(0,e.jsx)(i.Button,{"aria-label":u??l,size:"lg",variant:"primary",className:(0,c.cn)("hero-banner-primary-button",o.primaryButton),as:p?.isCustomPrimaryButton?"button":"a",href:(0,z.trackUrlRef)(C(p.link),`${f}_${g}`),target:p?.target,rel:p?.target==="_blank"?p?.rel??"noopener noreferrer":p?.rel,onClick:a=>{if(p.link?.startsWith("#")){a.preventDefault();const m=document.querySelector(p.link);m&&(0,D.default)(m,U)}p?.isCustomPrimaryButton&&d?.(t,a,p?.customPrimaryEventId)},"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${u}#${l}#${p?.text}`,children:p.text})]}),(0,e.jsx)("div",{className:Re({align:y}),children:ve?.map(a=>(0,e.jsx)("div",{className:"h-12",children:(0,e.jsx)(i.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:a?.pcImage?.alt||"",source:a?.pcImage?.url})},a?.pcImage?.url||a?.pcImage?.alt))})]}),L.length>0&&(0,e.jsx)("div",{className:(0,c.cn)("hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",o.captionGroup),children:L.map((a,m)=>(0,e.jsxs)(s.default.Fragment,{children:[(0,e.jsx)(i.Text,{size:2,className:(0,c.cn)("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:a.title}),m<L.length-1&&(0,e.jsx)("div",{className:(0,c.cn)("bg-info-primary w-px")})]},a.title))}),Z&&(0,e.jsx)(ue.VideoModal,{visible:Z,videoUrl:r?.isYoutubeVideo?void 0:r?.videoUrl?.url,youTubeId:r?.isYoutubeVideo?r?.youtubeId:void 0,onCloseModal:()=>K(!1)})]})})});re.displayName="HeroBanner";var De=(0,ne.withLayout)(re);
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport jump from 'jump.js'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text, Countdown } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { cva } from 'class-variance-authority'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n// Task 18: import carousel implementation for early-return delegation (DECISION-A002)\nimport HeroBannerCarousel from './HeroBannerCarousel.js'\n\n/**\n * jump.js \u914D\u7F6E\u9009\u9879\n */\nexport interface JumpOptions {\n /** \u52A8\u753B\u6301\u7EED\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09 @default 500 */\n duration?: number\n /** \u504F\u79FB\u91CF\uFF08\u50CF\u7D20\uFF09 @default 0 */\n offset?: number\n /** \u52A8\u753B\u5B8C\u6210\u56DE\u8C03 */\n callback?: () => void\n /** \u7F13\u52A8\u51FD\u6570 */\n easing?: (t: number, b: number, c: number, d: number) => number\n /** \u662F\u5426\u8003\u8651 a11y @default false */\n a11y?: boolean\n}\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\n// CVA variants for align\nconst contentVariants = cva(\n 'hero-banner-content lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]',\n {\n variants: {\n align: {\n left: 'tablet:px-[32px] laptop:top-1/2 laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] laptop:-translate-y-1/2 left-0 px-[16px]',\n center:\n 'tablet:top-[84px] laptop:top-[76px] desktop:top-[176px] lg-desktop:top-[192px] left-1/2 top-[84px] -translate-x-1/2 translate-y-0 items-center text-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n }\n)\n\nconst textVariants = cva(\n 'hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]',\n {\n variants: {\n align: {\n left: 'laptop:text-left',\n center: 'text-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n }\n)\n\nconst buttonGroupVariants = cva('hero-banner-button-group lg-desktop:gap-3 flex items-center gap-2', {\n variants: {\n align: {\n left: 'laptop:justify-start',\n center: 'justify-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n})\n\nconst iconGroupVariants = cva('hero-banner-icon-group flex items-center gap-2', {\n variants: {\n align: {\n left: 'justify-start',\n center: 'justify-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n})\n\nexport type HeroBannerSemanticName =\n | 'root'\n | 'title'\n | 'subtitle'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n | 'captionGroup'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<\n HTMLDivElement,\n HeroBannerProps & {\n classNames?: Partial<Record<HeroBannerSemanticName, string>>\n /**\n * \u951A\u70B9\u8DF3\u8F6C\u914D\u7F6E\uFF08\u7528\u4E8E # \u5F00\u5934\u7684\u94FE\u63A5\uFF09\n * @default { duration: 500, offset: 0 }\n */\n jumpOptions?: JumpOptions\n }\n>(({ data, className, classNames = {}, onSecondaryClick, onPrimaryClick, jumpOptions = {}, ...rest }, ref) => {\n const { locale } = useAiuiContext()\n\n // \u9ED8\u8BA4 jump \u914D\u7F6E\n const defaultJumpOptions: JumpOptions = { duration: 500, offset: 0 }\n const mergedJumpOptions = { ...defaultJumpOptions, ...jumpOptions }\n\n // \u5305\u88C5\u94FE\u63A5\uFF0C\u81EA\u52A8\u6DFB\u52A0 locale \u524D\u7F00\n const localizeUrl = (url?: string) => {\n if (!url || !locale) return url\n return getLocalizedPath(url, locale)\n }\n\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n isVideoLoop = true,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n titleSize,\n caption = [],\n blockLink,\n iconArray,\n align = 'left',\n enableParallax = true,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n // Task 7: Compute accessibility / tracking fallback values (Rule 2/3/4 \u2014 DECISION-T3)\n // blockLink aria-label: title \u2192 subtitle \u2192 pcImage.alt \u2192 undefined (absent attr)\n const blockLinkLabel = title?.trim() || subtitle?.trim() || pcImage?.alt?.trim() || undefined\n // componentTitle: title=undefined \u2192 coerce '' via subtitle only (no pcImage.alt for undefined title);\n // title='' (intentional) \u2192 cascade: subtitle \u2192 pcImage.alt \u2192 undefined\n const resolvedComponentTitle =\n title !== undefined\n ? title?.trim() || subtitle?.trim() || pcImage?.alt?.trim() || undefined\n : (subtitle && subtitle.trim()) || ''\n // componentDescription: subtitle with undefined guard\n const resolvedComponentDescription = (subtitle && subtitle.trim()) || ''\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: resolvedComponentTitle,\n componentDescription: resolvedComponentDescription,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n // Task 18: GSAP bypass \u2014 skip ALL GSAP setup in carousel mode (DECISION-A002/DECISION-009)\n if (data.items && data.items.length > 0) return\n if (!enableParallax) return\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView, data.items, enableParallax])\n\n // Task 18: Carousel mode early return (DECISION-A002 / DECISION-011)\n // All hooks above have already run. Delegate entirely to HeroBannerCarousel\n // when data.items is non-empty; GSAP was already bypassed in the useEffect above.\n if (data.items && data.items.length > 0) {\n return (\n <HeroBannerCarousel\n data={data}\n className={className}\n classNames={classNames}\n onPrimaryClick={onPrimaryClick}\n onSecondaryClick={onSecondaryClick}\n ref={ref as React.Ref<HTMLDivElement>}\n {...rest}\n />\n )\n }\n return (\n <div {...rest} ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'text-info-primary relative w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]':\n size === 'default',\n 'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]':\n size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(localizeUrl(blockLink), `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={blockLinkLabel}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop={isVideoLoop}\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className={contentVariants({ align })}>\n <div className={textVariants({ align })}>\n {label && (\n <Text\n size={2}\n as=\"p\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && (\n <Heading\n as={titleSize === '4' ? 'h1' : 'h2'}\n html={title}\n className={cn('hero-banner-title', classNames.title)}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Text\n as=\"p\"\n size={2}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm',\n classNames.subtitle\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n align={align}\n />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className={cn(buttonGroupVariants({ align }), classNames.buttonGroup)}>\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className={cn('hero-banner-secondary-button', classNames.secondaryButton)}\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={trackUrlRef(localizeUrl(secondaryButton?.link), `${componentType}_${componentName}`)}\n onClick={e => {\n if (secondaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(secondaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n secondaryButton?.isCustomSecondaryButton &&\n onSecondaryClick?.(data, e, secondaryButton?.customSecondaryEventId)\n }}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className={cn('hero-banner-primary-button', classNames.primaryButton)}\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={trackUrlRef(localizeUrl(primaryButton.link), `${componentType}_${componentName}`)}\n onClick={e => {\n if (primaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(primaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e, primaryButton?.customPrimaryEventId)\n }}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className={iconGroupVariants({ align })}>\n {iconArray?.map(icon => (\n <div key={icon?.pcImage?.url || icon?.pcImage?.alt} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div\n className={cn(\n 'hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]',\n classNames.captionGroup\n )}\n >\n {caption.map((c, index) => (\n <React.Fragment key={c.title}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.isYoutubeVideo ? undefined : secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.isYoutubeVideo ? secondaryButton?.youtubeId : undefined}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport jump from 'jump.js'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text, Countdown } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { cva } from 'class-variance-authority'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n// Task 18: import carousel implementation for early-return delegation (DECISION-A002)\nimport HeroBannerCarousel from './HeroBannerCarousel.js'\n\n/**\n * jump.js \u914D\u7F6E\u9009\u9879\n */\nexport interface JumpOptions {\n /** \u52A8\u753B\u6301\u7EED\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09 @default 500 */\n duration?: number\n /** \u504F\u79FB\u91CF\uFF08\u50CF\u7D20\uFF09 @default 0 */\n offset?: number\n /** \u52A8\u753B\u5B8C\u6210\u56DE\u8C03 */\n callback?: () => void\n /** \u7F13\u52A8\u51FD\u6570 */\n easing?: (t: number, b: number, c: number, d: number) => number\n /** \u662F\u5426\u8003\u8651 a11y @default false */\n a11y?: boolean\n}\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\n// CVA variants for align\nconst contentVariants = cva(\n 'hero-banner-content lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]',\n {\n variants: {\n align: {\n left: 'tablet:px-[32px] laptop:top-1/2 laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] laptop:-translate-y-1/2 left-0 px-[16px]',\n center:\n 'tablet:top-[84px] laptop:top-[76px] desktop:top-[176px] lg-desktop:top-[192px] left-1/2 top-[84px] -translate-x-1/2 translate-y-0 items-center text-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n }\n)\n\nconst textVariants = cva(\n 'hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]',\n {\n variants: {\n align: {\n left: 'laptop:text-left',\n center: 'text-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n }\n)\n\nconst buttonGroupVariants = cva('hero-banner-button-group lg-desktop:gap-3 flex items-center gap-2', {\n variants: {\n align: {\n left: 'laptop:justify-start',\n center: 'justify-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n})\n\nconst iconGroupVariants = cva('hero-banner-icon-group flex items-center gap-2', {\n variants: {\n align: {\n left: 'justify-start',\n center: 'justify-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n})\n\nexport type HeroBannerSemanticName =\n | 'root'\n | 'title'\n | 'subtitle'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n | 'captionGroup'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<\n HTMLDivElement,\n HeroBannerProps & {\n classNames?: Partial<Record<HeroBannerSemanticName, string>>\n /**\n * \u951A\u70B9\u8DF3\u8F6C\u914D\u7F6E\uFF08\u7528\u4E8E # \u5F00\u5934\u7684\u94FE\u63A5\uFF09\n * @default { duration: 500, offset: 0 }\n */\n jumpOptions?: JumpOptions\n }\n>(({ data, className, classNames = {}, onSecondaryClick, onPrimaryClick, jumpOptions = {}, ...rest }, ref) => {\n const { locale } = useAiuiContext()\n\n // \u9ED8\u8BA4 jump \u914D\u7F6E\n const defaultJumpOptions: JumpOptions = { duration: 500, offset: 0 }\n const mergedJumpOptions = { ...defaultJumpOptions, ...jumpOptions }\n\n // \u5305\u88C5\u94FE\u63A5\uFF0C\u81EA\u52A8\u6DFB\u52A0 locale \u524D\u7F00\n const localizeUrl = (url?: string) => {\n if (!url || !locale) return url\n return getLocalizedPath(url, locale)\n }\n\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n isVideoLoop = true,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n titleSize,\n caption = [],\n blockLink,\n iconArray,\n align = 'left',\n enableParallax = true,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n // Task 7: Compute accessibility / tracking fallback values (Rule 2/3/4 \u2014 DECISION-T3)\n // blockLink aria-label: title \u2192 subtitle \u2192 pcImage.alt \u2192 undefined (absent attr)\n const blockLinkLabel = title?.trim() || subtitle?.trim() || pcImage?.alt?.trim() || undefined\n // componentTitle: title=undefined \u2192 coerce '' via subtitle only (no pcImage.alt for undefined title);\n // title='' (intentional) \u2192 cascade: subtitle \u2192 pcImage.alt \u2192 undefined\n const resolvedComponentTitle =\n title !== undefined\n ? title?.trim() || subtitle?.trim() || pcImage?.alt?.trim() || undefined\n : (subtitle && subtitle.trim()) || ''\n // componentDescription: subtitle with undefined guard\n const resolvedComponentDescription = (subtitle && subtitle.trim()) || ''\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: resolvedComponentTitle,\n componentDescription: resolvedComponentDescription,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n // Task 18: GSAP bypass \u2014 skip ALL GSAP setup in carousel mode (DECISION-A002/DECISION-009)\n if (data.items && data.items.length > 0) return\n if (!enableParallax) return\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView, data.items, enableParallax])\n\n // Task 18: Carousel mode early return (DECISION-A002 / DECISION-011)\n // All hooks above have already run. Delegate entirely to HeroBannerCarousel\n // when data.items is non-empty; GSAP was already bypassed in the useEffect above.\n if (data.items && data.items.length > 0) {\n return (\n <HeroBannerCarousel\n data={data}\n className={className}\n classNames={classNames}\n onPrimaryClick={onPrimaryClick}\n onSecondaryClick={onSecondaryClick}\n ref={ref as React.Ref<HTMLDivElement>}\n {...rest}\n />\n )\n }\n return (\n <div {...rest} ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'text-info-primary relative w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]':\n size === 'default',\n 'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]':\n size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(localizeUrl(blockLink), `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={blockLinkLabel}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop={isVideoLoop}\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className={contentVariants({ align })}>\n <div className={textVariants({ align })}>\n {label && (\n <Text\n size={2}\n as=\"p\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && (\n <Heading\n as={titleSize === '4' ? 'h1' : 'h2'}\n html={title}\n className={cn('hero-banner-title', classNames.title)}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Text\n as=\"p\"\n size={2}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm',\n classNames.subtitle\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n align={align}\n />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className={cn(buttonGroupVariants({ align }), classNames.buttonGroup)}>\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className={cn('hero-banner-secondary-button', classNames.secondaryButton)}\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={trackUrlRef(localizeUrl(secondaryButton?.link), `${componentType}_${componentName}`)}\n target={secondaryButton?.target}\n rel={\n secondaryButton?.target === '_blank'\n ? (secondaryButton?.rel ?? 'noopener noreferrer')\n : secondaryButton?.rel\n }\n onClick={e => {\n if (secondaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(secondaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n secondaryButton?.isCustomSecondaryButton &&\n onSecondaryClick?.(data, e, secondaryButton?.customSecondaryEventId)\n }}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className={cn('hero-banner-primary-button', classNames.primaryButton)}\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={trackUrlRef(localizeUrl(primaryButton.link), `${componentType}_${componentName}`)}\n target={primaryButton?.target}\n rel={\n primaryButton?.target === '_blank'\n ? (primaryButton?.rel ?? 'noopener noreferrer')\n : primaryButton?.rel\n }\n onClick={e => {\n if (primaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(primaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e, primaryButton?.customPrimaryEventId)\n }}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className={iconGroupVariants({ align })}>\n {iconArray?.map(icon => (\n <div key={icon?.pcImage?.url || icon?.pcImage?.alt} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div\n className={cn(\n 'hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]',\n classNames.captionGroup\n )}\n >\n {caption.map((c, index) => (\n <React.Fragment key={c.title}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.isYoutubeVideo ? undefined : secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.isYoutubeVideo ? secondaryButton?.youtubeId : undefined}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_jump", "import_react_responsive", "import_react_intersection_observer", "import_ScrollLoadVideo", "import_components", "import_helpers", "import_class_variance_authority", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_utils", "import_AiuiProvider", "import_button", "import_VideoModal", "import_HeroBannerCarousel", "componentType", "componentName", "contentVariants", "textVariants", "buttonGroupVariants", "iconGroupVariants", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "React", "data", "className", "classNames", "onSecondaryClick", "onPrimaryClick", "jumpOptions", "rest", "ref", "locale", "mergedJumpOptions", "localizeUrl", "url", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "isVideoLoop", "primaryButton", "secondaryButton", "theme", "titleSize", "caption", "blockLink", "iconArray", "align", "enableParallax", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "blockLinkLabel", "resolvedComponentTitle", "resolvedComponentDescription", "gsap", "gsapResize", "clientHeight", "self", "value", "HeroBannerCarousel", "ScrollLoadVideo", "e", "element", "jump", "icon", "c", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var A=Object.create;var B=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var D=(t,
|
|
1
|
+
"use strict";"use client";var A=Object.create;var B=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var D=(t,r)=>{for(var l in r)B(t,l,{get:r[l],enumerable:!0})},P=(t,r,l,f)=>{if(r&&typeof r=="object"||typeof r=="function")for(let p of I(r))!V.call(t,p)&&p!==l&&B(t,p,{get:()=>r[p],enumerable:!(f=E(r,p))||f.enumerable});return t};var T=(t,r,l)=>(l=t!=null?A(M(t)):{},P(r||!t||!t.__esModule?B(l,"default",{value:t,enumerable:!0}):l,t)),O=t=>P(B({},"__esModule",{value:!0}),t);var q={};D(q,{default:()=>$});module.exports=O(q);var e=require("react/jsx-runtime"),s=T(require("react")),N=require("swiper/react"),d=require("swiper/modules"),R=T(require("../../helpers/ScrollLoadVideo.js")),g=require("../../helpers/index.js"),m=require("../../components/index.js"),J=require("swiper/css"),K=require("swiper/css/navigation"),Q=require("swiper/css/pagination");const W=()=>(0,e.jsxs)("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M23 13L16 20L23 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),F=()=>(0,e.jsxs)("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M17 13L24 20L17 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),U=({data:t,isActive:r,videoRef:l,onPrimaryClick:f,onSecondaryClick:p})=>{const{pcVideo:_,padVideo:H,mobileVideo:x,pcImage:b,mobileImage:y,isVideoLoop:L=!0,title:k,subtitle:u,primaryButton:a,secondaryButton:n,theme:v="light",align:w="left",titleSize:h,size:S="default"}=t,o=_?.url||H?.url||x?.url||"",i=b?.url||y?.url||"";return(0,e.jsxs)("div",{className:(0,g.cn)("text-info-primary relative w-full overflow-hidden",v==="dark"?"aiui-dark":"",S==="default"?"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]":"lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]"),children:[(0,e.jsx)(R.default,{videoRef:l,src:o,poster:i,className:"absolute inset-0 size-full",videoClassName:"size-full object-cover",muted:!0,loop:L,playsInline:!0}),(0,e.jsxs)("div",{className:(0,g.cn)("laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]",w==="center"?"left-1/2 -translate-x-1/2 items-center text-center":"tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]"),children:[(0,e.jsxs)("div",{className:(0,g.cn)("tablet:max-w-[704px] laptop:max-w-[440px] desktop:max-w-[648px] lg-desktop:max-w-[824px] max-w-[358px]",w==="center"?"text-center":"laptop:text-left"),children:[k&&(0,e.jsx)(m.Heading,{as:h==="4"?"h1":"h2",html:k,size:h?Number(h||"5"):S==="sm"?4:5}),u&&(0,e.jsx)(m.Text,{as:"p",size:2,className:"font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm",html:u})]}),(a?.text||n?.text)&&(0,e.jsxs)("div",{className:(0,g.cn)("lg-desktop:gap-3 flex items-center gap-2",w==="center"?"justify-center":"laptop:justify-start"),children:[n?.text&&(0,e.jsx)(m.Button,{size:"lg",variant:"secondary",as:n?.isCustomSecondaryButton?"button":"a",href:n.link,target:n?.target,rel:n?.target==="_blank"?n?.rel??"noopener noreferrer":n?.rel,onClick:c=>n?.isCustomSecondaryButton&&p?.(t,c,n?.customSecondaryEventId),children:n.text}),a?.text&&(0,e.jsx)(m.Button,{size:"lg",variant:"primary",as:a?.isCustomPrimaryButton?"button":"a",href:a.link,target:a?.target,rel:a?.target==="_blank"?a?.rel??"noopener noreferrer":a?.rel,onClick:c=>a?.isCustomPrimaryButton&&f?.(t,c,a?.customPrimaryEventId),children:a.text})]})]})]})},z=s.default.forwardRef(({data:t,className:r,classNames:l={},onPrimaryClick:f,onSecondaryClick:p,..._},H)=>{const x=t.items||[],b=t.carousel,y=(0,s.useRef)(null),[L,k]=(0,s.useState)(0),u=(0,s.useRef)(x.map(()=>s.default.createRef())),a=(b?.showArrows??!0)&&x.length>1,n=b?.showDots??!0,v=b?.autoplaySeconds,w=v!==void 0?[d.Navigation,d.Pagination,d.Autoplay]:[d.Navigation,d.Pagination],h=v!==void 0?{delay:v*1e3,disableOnInteraction:!1}:!1;(0,s.useEffect)(()=>{u.current.forEach((o,i)=>{i!==0&&o.current&&(o.current.pause(),o.current.currentTime=0)})},[]);const S=(0,s.useCallback)(o=>{const i=o.realIndex;u.current.forEach((C,j)=>{j!==i&&C.current&&(C.current.pause(),C.current.currentTime=0)});const c=u.current[i];c?.current&&c.current.paused&&c.current.play()?.catch(()=>{}),k(i)},[]);return(0,e.jsxs)("div",{ref:H,className:(0,g.cn)("hero-banner-carousel relative w-full overflow-hidden",r),..._,children:[(0,e.jsx)(N.Swiper,{onSwiper:o=>y.current=o,onSlideChange:S,modules:w,slidesPerView:1,loop:b?.loop??!0,initialSlide:0,allowTouchMove:!0,autoplay:h,pagination:n?{clickable:!0,el:".hero-banner-pagination",renderBullet:(o,i)=>`<span class="${i} banner-dot"></span>`}:!1,children:x.map((o,i)=>(0,e.jsx)(N.SwiperSlide,{children:({isActive:c})=>(0,e.jsx)(U,{data:o,isActive:c,videoRef:u.current[i],onPrimaryClick:f,onSecondaryClick:p})},i))}),a&&(0,e.jsxs)("div",{className:"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4",children:[(0,e.jsx)("button",{type:"button",className:"tablet:flex pointer-events-auto hidden items-center justify-center",onClick:()=>y.current?.slidePrev(),"aria-label":"Previous banner",children:(0,e.jsx)(W,{})}),(0,e.jsx)("button",{type:"button",className:"tablet:flex pointer-events-auto hidden items-center justify-center",onClick:()=>y.current?.slideNext(),"aria-label":"Next banner",children:(0,e.jsx)(F,{})})]}),n&&(0,e.jsx)("div",{className:"hero-banner-pagination swiper-pagination tablet:bottom-6 absolute bottom-5 left-1/2 z-20 flex -translate-x-1/2 items-center justify-center gap-2 [&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8 [&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot.swiper-pagination-bullet-active]:bg-[#080A0F] [&_.banner-dot]:size-2 [&_.banner-dot]:rounded-full [&_.banner-dot]:bg-[#767880] [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out [&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100"})]})});z.displayName="HeroBannerCarousel";var $=z;
|
|
2
2
|
//# sourceMappingURL=HeroBannerCarousel.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBannerCarousel.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef, useEffect, useCallback, useState } from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, Pagination, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { cn } from '../../helpers/index.js'\nimport type { HeroBannerProps, HeroBannerSlideData } from './types.js'\nimport { Button, Heading, Text } from '../../components/index.js'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\n\n// \u2500\u2500 Arrow icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst ChevronLeft = () => (\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M23 13L16 20L23 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ChevronRight = () => (\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M17 13L24 20L17 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\n// \u2500\u2500 HeroBannerSlide \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Minimal per-slide content unit. No GSAP, no withLayout, no useExposure.\n// videoRef is the imperative pause/play channel (DECISION-A003).\n\ninterface HeroBannerSlideProps {\n data: HeroBannerSlideData\n isActive: boolean\n videoRef: React.RefObject<HTMLVideoElement>\n onPrimaryClick?: (data: any, e: any, id?: string) => void\n onSecondaryClick?: (data: any, e: any, id?: string) => void\n}\n\nconst HeroBannerSlide = ({\n data,\n isActive: _isActive,\n videoRef,\n onPrimaryClick,\n onSecondaryClick,\n}: HeroBannerSlideProps) => {\n const {\n pcVideo,\n padVideo,\n mobileVideo,\n pcImage,\n mobileImage,\n isVideoLoop = true,\n title,\n subtitle,\n primaryButton,\n secondaryButton,\n theme = 'light',\n align = 'left',\n titleSize,\n size = 'default',\n } = data\n\n // Resolve video src (pc preferred; fallback to mobile)\n const videoSrc = pcVideo?.url || padVideo?.url || mobileVideo?.url || ''\n // Poster from image (shown while video loads or for image-only slides)\n const posterUrl = pcImage?.url || mobileImage?.url || ''\n\n return (\n <div\n className={cn(\n 'text-info-primary relative w-full overflow-hidden',\n theme === 'dark' ? 'aiui-dark' : '',\n size === 'default'\n ? 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]'\n : 'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]'\n )}\n >\n {/* Background media \u2014 always ScrollLoadVideo so videoRef is always attached.\n For image-only slides src='', IO won't load a video, but ref is live for control. */}\n <ScrollLoadVideo\n videoRef={videoRef}\n src={videoSrc}\n poster={posterUrl}\n className=\"absolute inset-0 size-full\"\n videoClassName=\"size-full object-cover\"\n muted\n loop={isVideoLoop}\n playsInline\n />\n\n {/* Content Overlay */}\n <div\n className={cn(\n 'laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]',\n align === 'center'\n ? 'left-1/2 -translate-x-1/2 items-center text-center'\n : 'tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]'\n )}\n >\n <div\n className={cn(\n 'tablet:max-w-[704px] laptop:max-w-[440px] desktop:max-w-[648px] lg-desktop:max-w-[824px] max-w-[358px]',\n align === 'center' ? 'text-center' : 'laptop:text-left'\n )}\n >\n {title && (\n <Heading\n as={titleSize === '4' ? 'h1' : 'h2'}\n html={title}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Text\n as=\"p\"\n size={2}\n className=\"font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm\"\n html={subtitle}\n />\n )}\n </div>\n\n {(primaryButton?.text || secondaryButton?.text) && (\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n align === 'center' ? 'justify-center' : 'laptop:justify-start'\n )}\n >\n {secondaryButton?.text && (\n <Button\n size=\"lg\"\n variant=\"secondary\"\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={secondaryButton.link}\n onClick={e =>\n secondaryButton?.isCustomSecondaryButton &&\n onSecondaryClick?.(data, e, secondaryButton?.customSecondaryEventId)\n }\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\n size=\"lg\"\n variant=\"primary\"\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={primaryButton.link}\n onClick={e =>\n primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e, primaryButton?.customPrimaryEventId)\n }\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )\n}\n\n// \u2500\u2500 HeroBannerCarousel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface HeroBannerCarouselProps extends React.HTMLAttributes<HTMLDivElement> {\n data: HeroBannerProps['data']\n classNames?: Record<string, string>\n onPrimaryClick?: (data: any, e: any, id?: string) => void\n onSecondaryClick?: (data: any, e: any, id?: string) => void\n}\n\n/**\n * HeroBannerCarousel \u2014 arrows-only Navigation Swiper wrapping HeroBannerSlide units.\n *\n * Architecture:\n * - DECISION-A007: Navigation only, loop=false, slidesPerView=1\n * - DECISION-A003: ScrollLoadVideo videoRef as imperative pause channel\n * - DECISION-A010: initial activeIndex=0; useEffect pauses slides 1..N on mount\n * - DECISION-A006: arrow buttons at z-[20], above blockLink overlay z-10\n * - ISSUE-017: post-mount pause wins over IO rootMargin='200px' race\n */\nconst HeroBannerCarousel = React.forwardRef<HTMLDivElement, HeroBannerCarouselProps>(\n (\n {\n data,\n className,\n classNames: _classNames = {},\n onPrimaryClick: _onPrimaryClick,\n onSecondaryClick: _onSecondaryClick,\n ...rest\n },\n ref\n ) => {\n const items = data.items || []\n const carousel = data.carousel\n\n const swiperRef = useRef<SwiperType | null>(null)\n const [_activeIndex, setActiveIndex] = useState(0)\n\n // One RefObject<HTMLVideoElement> per slide.\n // Created once at mount; ref count is fixed (ISSUE-022 \u2014 stable data assumed).\n // DECISION-A003: passed to HeroBannerSlide \u2192 ScrollLoadVideo as imperative channel.\n const videoRefs = useRef<React.RefObject<HTMLVideoElement>[]>(items.map(() => React.createRef<HTMLVideoElement>()))\n\n // Arrow visibility formula \u2014 DECISION-011\n const showArrowControls = (carousel?.showArrows ?? true) && items.length > 1\n\n // Pagination dots visibility formula \u2014 DECISION-006\n const showDots = carousel?.showDots ?? true\n\n // Autoplay module configuration \u2014 DECISION-006\n const autoplaySeconds = carousel?.autoplaySeconds\n const swiperModules = autoplaySeconds !== undefined ? [Navigation, Pagination, Autoplay] : [Navigation, Pagination]\n const autoplayConfig =\n autoplaySeconds !== undefined ? { delay: autoplaySeconds * 1000, disableOnInteraction: false } : false\n\n // Post-mount effect: pause all non-active (index !== 0) slide videos.\n // Wins the race against ScrollLoadVideo's IO rootMargin='200px' auto-play (ISSUE-017).\n useEffect(() => {\n videoRefs.current.forEach((vRef, i) => {\n if (i !== 0 && vRef.current) {\n vRef.current.pause()\n vRef.current.currentTime = 0\n }\n })\n }, [])\n\n // Slide transition handler \u2014 pause outgoing, play incoming (DECISION-A003 / DECISION-009)\n const handleSlideChange = useCallback((swiper: SwiperType) => {\n const newIndex = swiper.realIndex\n // Pause and reset all non-active slide videos\n videoRefs.current.forEach((vRef, i) => {\n if (i !== newIndex && vRef.current) {\n vRef.current.pause()\n vRef.current.currentTime = 0\n }\n })\n // Play incoming slide video \u2014 guard against AbortError from rapid swipe (ISSUE-005)\n const incoming = videoRefs.current[newIndex]\n if (incoming?.current && incoming.current.paused) {\n const p = incoming.current.play()\n p?.catch(() => {}) // Absorb AbortError silently\n }\n setActiveIndex(newIndex)\n }, [])\n\n return (\n <div ref={ref} className={cn('hero-banner-carousel relative w-full overflow-hidden', className)} {...rest}>\n <Swiper\n onSwiper={s => (swiperRef.current = s)}\n onSlideChange={handleSlideChange}\n modules={swiperModules}\n slidesPerView={1}\n loop={carousel?.loop ?? true}\n initialSlide={0}\n allowTouchMove={true}\n autoplay={autoplayConfig}\n pagination={\n showDots\n ? {\n clickable: true,\n el: '.hero-banner-pagination',\n renderBullet: (_index: number, className: string) => `<span class=\"${className} banner-dot\"></span>`,\n }\n : false\n }\n >\n {items.map((slideData, index) => (\n <SwiperSlide key={index}>\n {({ isActive }) => (\n <HeroBannerSlide\n data={slideData}\n isActive={isActive}\n videoRef={videoRefs.current[index]}\n onPrimaryClick={_onPrimaryClick}\n onSecondaryClick={_onSecondaryClick}\n />\n )}\n </SwiperSlide>\n ))}\n </Swiper>\n\n {/* Arrow navigation \u2014 z-[20] to stay above blockLink overlay (z-10) \u2014 DECISION-A006 */}\n {showArrowControls && (\n <div className=\"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4\">\n <button\n type=\"button\"\n className=\"tablet:flex pointer-events-auto hidden items-center justify-center\"\n onClick={() => swiperRef.current?.slidePrev()}\n aria-label=\"Previous banner\"\n >\n <ChevronLeft />\n </button>\n <button\n type=\"button\"\n className=\"tablet:flex pointer-events-auto hidden items-center justify-center\"\n onClick={() => swiperRef.current?.slideNext()}\n aria-label=\"Next banner\"\n >\n <ChevronRight />\n </button>\n </div>\n )}\n\n {/* Pagination dots \u2014 visible on all devices */}\n {showDots && (\n <div className=\"hero-banner-pagination swiper-pagination tablet:bottom-6 absolute bottom-5 left-1/2 z-20 flex -translate-x-1/2 items-center justify-center gap-2 [&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8 [&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot.swiper-pagination-bullet-active]:bg-[#080A0F] [&_.banner-dot]:size-2 [&_.banner-dot]:rounded-full [&_.banner-dot]:bg-[#767880] [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out [&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100\" />\n )}\n </div>\n )\n }\n)\n\nHeroBannerCarousel.displayName = 'HeroBannerCarousel'\n\nexport default HeroBannerCarousel\n"],
|
|
5
|
-
"mappings": "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
|
|
6
|
-
"names": ["HeroBannerCarousel_exports", "__export", "HeroBannerCarousel_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_modules", "import_ScrollLoadVideo", "import_helpers", "import_components", "import_css", "import_navigation", "import_pagination", "ChevronLeft", "ChevronRight", "HeroBannerSlide", "data", "_isActive", "videoRef", "onPrimaryClick", "onSecondaryClick", "pcVideo", "padVideo", "mobileVideo", "pcImage", "mobileImage", "isVideoLoop", "title", "subtitle", "primaryButton", "secondaryButton", "theme", "align", "titleSize", "size", "videoSrc", "posterUrl", "ScrollLoadVideo", "e", "HeroBannerCarousel", "React", "className", "_classNames", "_onPrimaryClick", "_onSecondaryClick", "rest", "ref", "items", "carousel", "swiperRef", "_activeIndex", "setActiveIndex", "videoRefs", "showArrowControls", "showDots", "autoplaySeconds", "swiperModules", "autoplayConfig", "vRef", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef, useEffect, useCallback, useState } from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, Pagination, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { cn } from '../../helpers/index.js'\nimport type { HeroBannerProps, HeroBannerSlideData } from './types.js'\nimport { Button, Heading, Text } from '../../components/index.js'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\n\n// \u2500\u2500 Arrow icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst ChevronLeft = () => (\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M23 13L16 20L23 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ChevronRight = () => (\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M17 13L24 20L17 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\n// \u2500\u2500 HeroBannerSlide \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Minimal per-slide content unit. No GSAP, no withLayout, no useExposure.\n// videoRef is the imperative pause/play channel (DECISION-A003).\n\ninterface HeroBannerSlideProps {\n data: HeroBannerSlideData\n isActive: boolean\n videoRef: React.RefObject<HTMLVideoElement>\n onPrimaryClick?: (data: any, e: any, id?: string) => void\n onSecondaryClick?: (data: any, e: any, id?: string) => void\n}\n\nconst HeroBannerSlide = ({\n data,\n isActive: _isActive,\n videoRef,\n onPrimaryClick,\n onSecondaryClick,\n}: HeroBannerSlideProps) => {\n const {\n pcVideo,\n padVideo,\n mobileVideo,\n pcImage,\n mobileImage,\n isVideoLoop = true,\n title,\n subtitle,\n primaryButton,\n secondaryButton,\n theme = 'light',\n align = 'left',\n titleSize,\n size = 'default',\n } = data\n\n // Resolve video src (pc preferred; fallback to mobile)\n const videoSrc = pcVideo?.url || padVideo?.url || mobileVideo?.url || ''\n // Poster from image (shown while video loads or for image-only slides)\n const posterUrl = pcImage?.url || mobileImage?.url || ''\n\n return (\n <div\n className={cn(\n 'text-info-primary relative w-full overflow-hidden',\n theme === 'dark' ? 'aiui-dark' : '',\n size === 'default'\n ? 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]'\n : 'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]'\n )}\n >\n {/* Background media \u2014 always ScrollLoadVideo so videoRef is always attached.\n For image-only slides src='', IO won't load a video, but ref is live for control. */}\n <ScrollLoadVideo\n videoRef={videoRef}\n src={videoSrc}\n poster={posterUrl}\n className=\"absolute inset-0 size-full\"\n videoClassName=\"size-full object-cover\"\n muted\n loop={isVideoLoop}\n playsInline\n />\n\n {/* Content Overlay */}\n <div\n className={cn(\n 'laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]',\n align === 'center'\n ? 'left-1/2 -translate-x-1/2 items-center text-center'\n : 'tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]'\n )}\n >\n <div\n className={cn(\n 'tablet:max-w-[704px] laptop:max-w-[440px] desktop:max-w-[648px] lg-desktop:max-w-[824px] max-w-[358px]',\n align === 'center' ? 'text-center' : 'laptop:text-left'\n )}\n >\n {title && (\n <Heading\n as={titleSize === '4' ? 'h1' : 'h2'}\n html={title}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Text\n as=\"p\"\n size={2}\n className=\"font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm\"\n html={subtitle}\n />\n )}\n </div>\n\n {(primaryButton?.text || secondaryButton?.text) && (\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n align === 'center' ? 'justify-center' : 'laptop:justify-start'\n )}\n >\n {secondaryButton?.text && (\n <Button\n size=\"lg\"\n variant=\"secondary\"\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={secondaryButton.link}\n target={secondaryButton?.target}\n rel={\n secondaryButton?.target === '_blank'\n ? (secondaryButton?.rel ?? 'noopener noreferrer')\n : secondaryButton?.rel\n }\n onClick={e =>\n secondaryButton?.isCustomSecondaryButton &&\n onSecondaryClick?.(data, e, secondaryButton?.customSecondaryEventId)\n }\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\n size=\"lg\"\n variant=\"primary\"\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={primaryButton.link}\n target={primaryButton?.target}\n rel={\n primaryButton?.target === '_blank'\n ? (primaryButton?.rel ?? 'noopener noreferrer')\n : primaryButton?.rel\n }\n onClick={e =>\n primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e, primaryButton?.customPrimaryEventId)\n }\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )\n}\n\n// \u2500\u2500 HeroBannerCarousel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface HeroBannerCarouselProps extends React.HTMLAttributes<HTMLDivElement> {\n data: HeroBannerProps['data']\n classNames?: Record<string, string>\n onPrimaryClick?: (data: any, e: any, id?: string) => void\n onSecondaryClick?: (data: any, e: any, id?: string) => void\n}\n\n/**\n * HeroBannerCarousel \u2014 arrows-only Navigation Swiper wrapping HeroBannerSlide units.\n *\n * Architecture:\n * - DECISION-A007: Navigation only, loop=false, slidesPerView=1\n * - DECISION-A003: ScrollLoadVideo videoRef as imperative pause channel\n * - DECISION-A010: initial activeIndex=0; useEffect pauses slides 1..N on mount\n * - DECISION-A006: arrow buttons at z-[20], above blockLink overlay z-10\n * - ISSUE-017: post-mount pause wins over IO rootMargin='200px' race\n */\nconst HeroBannerCarousel = React.forwardRef<HTMLDivElement, HeroBannerCarouselProps>(\n (\n {\n data,\n className,\n classNames: _classNames = {},\n onPrimaryClick: _onPrimaryClick,\n onSecondaryClick: _onSecondaryClick,\n ...rest\n },\n ref\n ) => {\n const items = data.items || []\n const carousel = data.carousel\n\n const swiperRef = useRef<SwiperType | null>(null)\n const [_activeIndex, setActiveIndex] = useState(0)\n\n // One RefObject<HTMLVideoElement> per slide.\n // Created once at mount; ref count is fixed (ISSUE-022 \u2014 stable data assumed).\n // DECISION-A003: passed to HeroBannerSlide \u2192 ScrollLoadVideo as imperative channel.\n const videoRefs = useRef<React.RefObject<HTMLVideoElement>[]>(items.map(() => React.createRef<HTMLVideoElement>()))\n\n // Arrow visibility formula \u2014 DECISION-011\n const showArrowControls = (carousel?.showArrows ?? true) && items.length > 1\n\n // Pagination dots visibility formula \u2014 DECISION-006\n const showDots = carousel?.showDots ?? true\n\n // Autoplay module configuration \u2014 DECISION-006\n const autoplaySeconds = carousel?.autoplaySeconds\n const swiperModules = autoplaySeconds !== undefined ? [Navigation, Pagination, Autoplay] : [Navigation, Pagination]\n const autoplayConfig =\n autoplaySeconds !== undefined ? { delay: autoplaySeconds * 1000, disableOnInteraction: false } : false\n\n // Post-mount effect: pause all non-active (index !== 0) slide videos.\n // Wins the race against ScrollLoadVideo's IO rootMargin='200px' auto-play (ISSUE-017).\n useEffect(() => {\n videoRefs.current.forEach((vRef, i) => {\n if (i !== 0 && vRef.current) {\n vRef.current.pause()\n vRef.current.currentTime = 0\n }\n })\n }, [])\n\n // Slide transition handler \u2014 pause outgoing, play incoming (DECISION-A003 / DECISION-009)\n const handleSlideChange = useCallback((swiper: SwiperType) => {\n const newIndex = swiper.realIndex\n // Pause and reset all non-active slide videos\n videoRefs.current.forEach((vRef, i) => {\n if (i !== newIndex && vRef.current) {\n vRef.current.pause()\n vRef.current.currentTime = 0\n }\n })\n // Play incoming slide video \u2014 guard against AbortError from rapid swipe (ISSUE-005)\n const incoming = videoRefs.current[newIndex]\n if (incoming?.current && incoming.current.paused) {\n const p = incoming.current.play()\n p?.catch(() => {}) // Absorb AbortError silently\n }\n setActiveIndex(newIndex)\n }, [])\n\n return (\n <div ref={ref} className={cn('hero-banner-carousel relative w-full overflow-hidden', className)} {...rest}>\n <Swiper\n onSwiper={s => (swiperRef.current = s)}\n onSlideChange={handleSlideChange}\n modules={swiperModules}\n slidesPerView={1}\n loop={carousel?.loop ?? true}\n initialSlide={0}\n allowTouchMove={true}\n autoplay={autoplayConfig}\n pagination={\n showDots\n ? {\n clickable: true,\n el: '.hero-banner-pagination',\n renderBullet: (_index: number, className: string) => `<span class=\"${className} banner-dot\"></span>`,\n }\n : false\n }\n >\n {items.map((slideData, index) => (\n <SwiperSlide key={index}>\n {({ isActive }) => (\n <HeroBannerSlide\n data={slideData}\n isActive={isActive}\n videoRef={videoRefs.current[index]}\n onPrimaryClick={_onPrimaryClick}\n onSecondaryClick={_onSecondaryClick}\n />\n )}\n </SwiperSlide>\n ))}\n </Swiper>\n\n {/* Arrow navigation \u2014 z-[20] to stay above blockLink overlay (z-10) \u2014 DECISION-A006 */}\n {showArrowControls && (\n <div className=\"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4\">\n <button\n type=\"button\"\n className=\"tablet:flex pointer-events-auto hidden items-center justify-center\"\n onClick={() => swiperRef.current?.slidePrev()}\n aria-label=\"Previous banner\"\n >\n <ChevronLeft />\n </button>\n <button\n type=\"button\"\n className=\"tablet:flex pointer-events-auto hidden items-center justify-center\"\n onClick={() => swiperRef.current?.slideNext()}\n aria-label=\"Next banner\"\n >\n <ChevronRight />\n </button>\n </div>\n )}\n\n {/* Pagination dots \u2014 visible on all devices */}\n {showDots && (\n <div className=\"hero-banner-pagination swiper-pagination tablet:bottom-6 absolute bottom-5 left-1/2 z-20 flex -translate-x-1/2 items-center justify-center gap-2 [&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8 [&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot.swiper-pagination-bullet-active]:bg-[#080A0F] [&_.banner-dot]:size-2 [&_.banner-dot]:rounded-full [&_.banner-dot]:bg-[#767880] [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out [&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100\" />\n )}\n </div>\n )\n }\n)\n\nHeroBannerCarousel.displayName = 'HeroBannerCarousel'\n\nexport default HeroBannerCarousel\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["HeroBannerCarousel_exports", "__export", "HeroBannerCarousel_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_modules", "import_ScrollLoadVideo", "import_helpers", "import_components", "import_css", "import_navigation", "import_pagination", "ChevronLeft", "ChevronRight", "HeroBannerSlide", "data", "_isActive", "videoRef", "onPrimaryClick", "onSecondaryClick", "pcVideo", "padVideo", "mobileVideo", "pcImage", "mobileImage", "isVideoLoop", "title", "subtitle", "primaryButton", "secondaryButton", "theme", "align", "titleSize", "size", "videoSrc", "posterUrl", "ScrollLoadVideo", "e", "HeroBannerCarousel", "React", "className", "_classNames", "_onPrimaryClick", "_onSecondaryClick", "rest", "ref", "items", "carousel", "swiperRef", "_activeIndex", "setActiveIndex", "videoRefs", "showArrowControls", "showDots", "autoplaySeconds", "swiperModules", "autoplayConfig", "vRef", "handleSlideChange", "swiper", "newIndex", "i", "incoming", "s", "_index", "slideData", "index", "isActive"]
|
|
7
7
|
}
|
|
@@ -33,6 +33,10 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
|
|
|
33
33
|
/** 定义自组件作为父组件的类型， 详细使用方式请参考radix-ui */
|
|
34
34
|
as?: 'button' | 'a';
|
|
35
35
|
href?: string;
|
|
36
|
+
/** 链接目标，仅在 as="a" 时生效，如 "_blank" 可在新窗口打开 */
|
|
37
|
+
target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
|
|
38
|
+
/** 链接 rel 属性，仅在 as="a" 时生效 */
|
|
39
|
+
rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
|
|
36
40
|
iconClassName?: string;
|
|
37
41
|
/** 自定义loading */
|
|
38
42
|
spinner?: React.ReactNode;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var H=Object.create;var s=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var z=(e,t)=>{for(var a in t)s(e,a,{get:t[a],enumerable:!0})},u=(e,t,a,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of A(t))!N.call(e,n)&&n!==a&&s(e,n,{get:()=>t[n],enumerable:!(o=M(t,n))||o.enumerable});return e};var g=(e,t,a)=>(a=e!=null?H(E(e)):{},u(t||!e||!e.__esModule?s(a,"default",{value:e,enumerable:!0}):a,e)),C=e=>u(s({},"__esModule",{value:!0}),e);var j={};z(j,{default:()=>S,sizeMap:()=>x});module.exports=C(j);var r=require("react/jsx-runtime"),R=g(require("react")),m=require("@radix-ui/react-visually-hidden"),p=require("class-variance-authority"),v=g(require("../icons/spinner.js")),h=require("../helpers/index.js");const x={sm:{width:"16",height:"16"},base:{width:"18",height:"18"},lg:{width:"20",height:"20"}},T=({size:e="base",...t})=>{const{width:a,height:o}=x[e];return(0,r.jsx)("svg",{width:a,height:o,viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:(0,r.jsx)("path",{d:"M7.5 5L12.5 10L7.5 15",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})})},P=(0,p.cva)("rounded-btn inline-flex cursor-pointer items-center justify-center text-sm font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none",{variants:{variant:{primary:"bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active hover:text-btn-primary-active-foreground hover:bg-gradient-brand border-none ",secondary:"bg-btn-secondary outline-btn-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border-solid outline outline-[1.6px] outline-offset-[-1.6px]",link:"text-info-primary hover:text-btn-primary-active border-none",ghost:"text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground"},size:{sm:"px-3 py-2 text-[12px] leading-tight",base:"px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",lg:"lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",icon:"size-10 rounded-full leading-tight"},hoverEffect:{none:"",slide:""},state:{default:"",disabled:"",loading:""}},compoundVariants:[{variant:"primary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"secondary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"primary",state:"loading",class:"bg-btn-primary-active disabled:border-btn-primary-disabled-border"},{variant:"secondary",state:"loading",class:"bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled"},{variant:"primary",state:"disabled",class:"disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled"},{variant:"secondary",state:"disabled",class:"disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border disabled:outline-btn-secondary-disabled-border"},{variant:"link",state:"disabled",class:"disabled:text-info-quaternary"}],defaultVariants:{variant:"primary",size:"lg",hoverEffect:"none",state:"default"}}),I=(0,p.cva)("",{variants:{variant:{primary:"stroke-btn-primary-foreground",secondary:"stroke-btn-secondary-foreground",link:"stroke-primary",ghost:"stroke-primary"}},defaultVariants:{variant:"primary"}}),y=R.forwardRef(({asChild:e=!1,as:t="button",href:a,target:o,rel:n,size:i="lg",children:d,variant:b,hoverEffect:k="none",className:w,disabled:f=!1,loading:l=!1,spinner:c,iconClassName:L,...B},V)=>(0,r.jsx)(t,{disabled:f||l,className:(0,h.cn)(P({variant:b,size:i,hoverEffect:k,state:l?"loading":f?"disabled":"default"}),w),ref:V,...t==="a"?{href:a,target:o,rel:n}:{},...B,children:l?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:d}),(0,r.jsx)("span",{className:"absolute",children:c||(0,r.jsx)(v.default,{className:I({variant:b})})}),(0,r.jsx)(m.VisuallyHidden,{children:d})]}):(0,r.jsxs)(r.Fragment,{children:[d,b==="link"&&i&&i!=="icon"&&(0,r.jsx)(T,{className:L,size:i})]})}));y.displayName="Button";var S=y;
|
|
2
2
|
//# sourceMappingURL=button.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/button.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\nexport const sizeMap = {\n sm: {\n width: '16',\n height: '16',\n },\n base: {\n width: '18',\n height: '18',\n },\n lg: {\n width: '20',\n height: '20',\n },\n}\nconst LinkButtonAppendIcon = ({ size = 'base', ...rest }: { size: 'base' | 'lg' | 'sm'; className?: string }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...rest}>\n <path\n d=\"M7.5 5L12.5 10L7.5 15\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\n/**\n * Button Variants\n */\n// eslint-disable-next-line tailwindcss/enforces-negative-arbitrary-values\nconst buttonVariants = cva(\n 'rounded-btn inline-flex cursor-pointer items-center justify-center text-sm font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none',\n {\n variants: {\n variant: {\n primary:\n 'bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active hover:text-btn-primary-active-foreground hover:bg-gradient-brand border-none ',\n secondary:\n 'bg-btn-secondary outline-btn-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border-solid outline outline-[1.6px] outline-offset-[-1.6px]',\n link: 'text-info-primary hover:text-btn-primary-active border-none',\n ghost: 'text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground',\n },\n size: {\n sm: 'px-3 py-2 text-[12px] leading-tight',\n base: 'px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n lg: 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n icon: 'size-10 rounded-full leading-tight',\n },\n /** hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C,\u9700\u8981\u6CE8\u610F\u4E0D\u540Cvariant \u4E0B\u7684\u6548\u679C */\n hoverEffect: {\n none: '',\n slide: '',\n },\n state: {\n default: '',\n disabled: '',\n loading: '',\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'secondary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'primary',\n state: 'loading',\n class: 'bg-btn-primary-active disabled:border-btn-primary-disabled-border',\n },\n {\n variant: 'secondary',\n state: 'loading',\n class:\n 'bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'primary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'secondary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border disabled:outline-btn-secondary-disabled-border',\n },\n {\n variant: 'link',\n state: 'disabled',\n class: 'disabled:text-info-quaternary',\n },\n ],\n defaultVariants: {\n variant: 'primary',\n size: 'lg',\n hoverEffect: 'none',\n state: 'default',\n },\n }\n)\n\nconst loadingSvgVariants = cva('', {\n variants: {\n variant: {\n primary: 'stroke-btn-primary-foreground',\n secondary: 'stroke-btn-secondary-foreground',\n link: 'stroke-primary',\n ghost: 'stroke-primary',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n})\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001 */\n loading?: boolean\n /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001 */\n disabled?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui (\u5DF2\u4F5C\u5E9F\u8BF7\u52FF\u4F7F\u7528) */\n asChild?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n as?: 'button' | 'a'\n href?: string\n iconClassName?: string\n /** \u81EA\u5B9A\u4E49loading */\n spinner?: React.ReactNode\n}\n\n/**\n * Button - \u6309\u94AE\n *\n * @description \u53EF\u70B9\u51FB\u7684\u4EA4\u4E92\u5F0F\u6309\u94AE\u7EC4\u4EF6\uFF0C\u652F\u6301\u591A\u79CD\u6837\u5F0F\u3001\u5927\u5C0F\u3001\u72B6\u6001\u548C\u52A0\u8F7D\u6548\u679C\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n // eslint-disable-next-line\n asChild = false,\n as = 'button',\n href,\n size = 'lg',\n children,\n variant,\n hoverEffect = 'none',\n className,\n disabled = false,\n loading = false,\n spinner,\n iconClassName,\n ...props\n }: ButtonProps,\n ref\n ) => {\n const Comp = as\n const isInactive = disabled || loading\n const state = loading ? 'loading' : disabled ? 'disabled' : 'default'\n\n return (\n <Comp\n disabled={isInactive}\n className={cn(buttonVariants({ variant, size, hoverEffect, state }), className)}\n ref={ref as any}\n {...(as === 'a' ? { href } : {})}\n {...(props as any)}\n >\n {loading ? (\n <>\n <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n {children}\n </span>\n <span className=\"absolute\">\n {spinner ? (\n spinner\n ) : (\n <Spinner\n className={loadingSvgVariants({\n variant,\n })}\n />\n )}\n </span>\n <VisuallyHidden>{children}</VisuallyHidden>\n </>\n ) : (\n <>\n {children}\n {variant === 'link' && size && size !== 'icon' && (\n <LinkButtonAppendIcon className={iconClassName} size={size} />\n )}\n </>\n )}\n </Comp>\n )\n }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GA0BM,IAAAK,EAAA,6BAxBNC,EAAuB,oBACvBC,EAA+B,2CAC/BC,EAAuC,oCACvCC,EAAoB,kCACpBC,EAAmB,+BAEZ,MAAMP,EAAU,CACrB,GAAI,CACF,MAAO,KACP,OAAQ,IACV,EACA,KAAM,CACJ,MAAO,KACP,OAAQ,IACV,EACA,GAAI,CACF,MAAO,KACP,OAAQ,IACV,CACF,EACMQ,EAAuB,CAAC,CAAE,KAAAC,EAAO,OAAQ,GAAGC,CAAK,IAA0D,CAC/G,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIZ,EAAQS,CAAI,EACtC,SACE,OAAC,OAAI,MAAOE,EAAO,OAAQC,EAAQ,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAA8B,GAAGF,EACxG,mBAAC,QACC,EAAE,wBACF,OAAO,eACP,YAAY,UACZ,cAAc,QACd,eAAe,QACjB,EACF,CAEJ,EAMMG,KAAiB,OACrB,gMACA,CACE,SAAU,CACR,QAAS,CACP,QACE,uJACF,UACE,2MACF,KAAM,8DACN,MAAO,0EACT,EACA,KAAM,CACJ,GAAI,sCACJ,KAAM,qDACN,GAAI,sIACJ,KAAM,oCACR,EAEA,YAAa,CACX,KAAM,GACN,MAAO,EACT,EACA,MAAO,CACL,QAAS,GACT,SAAU,GACV,QAAS,EACX,CACF,EACA,iBAAkB,CAChB,CACE,QAAS,UACT,YAAa,QACb,MACE,8SACJ,EACA,CACE,QAAS,YACT,YAAa,QACb,MACE,mTACJ,EACA,CACE,QAAS,UACT,MAAO,UACP,MAAO,mEACT,EACA,CACE,QAAS,YACT,MAAO,UACP,MACE,0IACJ,EACA,CACE,QAAS,UACT,MAAO,WACP,MACE,qHACJ,EACA,CACE,QAAS,YACT,MAAO,WACP,MACE,iLACJ,EACA,CACE,QAAS,OACT,MAAO,WACP,MAAO,+BACT,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,KACN,YAAa,OACb,MAAO,SACT,CACF,CACF,EAEMC,KAAqB,OAAI,GAAI,CACjC,SAAU,CACR,QAAS,CACP,QAAS,gCACT,UAAW,kCACX,KAAM,iBACN,MAAO,gBACT,CACF,EACA,gBAAiB,CACf,QAAS,SACX,CACF,CAAC,
|
|
6
|
-
"names": ["button_exports", "__export", "button_default", "sizeMap", "__toCommonJS", "import_jsx_runtime", "React", "import_react_visually_hidden", "import_class_variance_authority", "import_spinner", "import_helpers", "LinkButtonAppendIcon", "size", "rest", "width", "height", "buttonVariants", "loadingSvgVariants", "Button", "asChild", "as", "href", "children", "variant", "hoverEffect", "className", "disabled", "loading", "spinner", "iconClassName", "props", "ref", "Spinner"]
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\nexport const sizeMap = {\n sm: {\n width: '16',\n height: '16',\n },\n base: {\n width: '18',\n height: '18',\n },\n lg: {\n width: '20',\n height: '20',\n },\n}\nconst LinkButtonAppendIcon = ({ size = 'base', ...rest }: { size: 'base' | 'lg' | 'sm'; className?: string }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...rest}>\n <path\n d=\"M7.5 5L12.5 10L7.5 15\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\n/**\n * Button Variants\n */\n// eslint-disable-next-line tailwindcss/enforces-negative-arbitrary-values\nconst buttonVariants = cva(\n 'rounded-btn inline-flex cursor-pointer items-center justify-center text-sm font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none',\n {\n variants: {\n variant: {\n primary:\n 'bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active hover:text-btn-primary-active-foreground hover:bg-gradient-brand border-none ',\n secondary:\n 'bg-btn-secondary outline-btn-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border-solid outline outline-[1.6px] outline-offset-[-1.6px]',\n link: 'text-info-primary hover:text-btn-primary-active border-none',\n ghost: 'text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground',\n },\n size: {\n sm: 'px-3 py-2 text-[12px] leading-tight',\n base: 'px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n lg: 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n icon: 'size-10 rounded-full leading-tight',\n },\n /** hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C,\u9700\u8981\u6CE8\u610F\u4E0D\u540Cvariant \u4E0B\u7684\u6548\u679C */\n hoverEffect: {\n none: '',\n slide: '',\n },\n state: {\n default: '',\n disabled: '',\n loading: '',\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'secondary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'primary',\n state: 'loading',\n class: 'bg-btn-primary-active disabled:border-btn-primary-disabled-border',\n },\n {\n variant: 'secondary',\n state: 'loading',\n class:\n 'bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'primary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'secondary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border disabled:outline-btn-secondary-disabled-border',\n },\n {\n variant: 'link',\n state: 'disabled',\n class: 'disabled:text-info-quaternary',\n },\n ],\n defaultVariants: {\n variant: 'primary',\n size: 'lg',\n hoverEffect: 'none',\n state: 'default',\n },\n }\n)\n\nconst loadingSvgVariants = cva('', {\n variants: {\n variant: {\n primary: 'stroke-btn-primary-foreground',\n secondary: 'stroke-btn-secondary-foreground',\n link: 'stroke-primary',\n ghost: 'stroke-primary',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n})\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001 */\n loading?: boolean\n /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001 */\n disabled?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui (\u5DF2\u4F5C\u5E9F\u8BF7\u52FF\u4F7F\u7528) */\n asChild?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n as?: 'button' | 'a'\n href?: string\n /** \u94FE\u63A5\u76EE\u6807\uFF0C\u4EC5\u5728 as=\"a\" \u65F6\u751F\u6548\uFF0C\u5982 \"_blank\" \u53EF\u5728\u65B0\u7A97\u53E3\u6253\u5F00 */\n target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target']\n /** \u94FE\u63A5 rel \u5C5E\u6027\uFF0C\u4EC5\u5728 as=\"a\" \u65F6\u751F\u6548 */\n rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel']\n iconClassName?: string\n /** \u81EA\u5B9A\u4E49loading */\n spinner?: React.ReactNode\n}\n\n/**\n * Button - \u6309\u94AE\n *\n * @description \u53EF\u70B9\u51FB\u7684\u4EA4\u4E92\u5F0F\u6309\u94AE\u7EC4\u4EF6\uFF0C\u652F\u6301\u591A\u79CD\u6837\u5F0F\u3001\u5927\u5C0F\u3001\u72B6\u6001\u548C\u52A0\u8F7D\u6548\u679C\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n // eslint-disable-next-line\n asChild = false,\n as = 'button',\n href,\n target,\n rel,\n size = 'lg',\n children,\n variant,\n hoverEffect = 'none',\n className,\n disabled = false,\n loading = false,\n spinner,\n iconClassName,\n ...props\n }: ButtonProps,\n ref\n ) => {\n const Comp = as\n const isInactive = disabled || loading\n const state = loading ? 'loading' : disabled ? 'disabled' : 'default'\n\n return (\n <Comp\n disabled={isInactive}\n className={cn(buttonVariants({ variant, size, hoverEffect, state }), className)}\n ref={ref as any}\n {...(as === 'a' ? { href, target, rel } : {})}\n {...(props as any)}\n >\n {loading ? (\n <>\n <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n {children}\n </span>\n <span className=\"absolute\">\n {spinner ? (\n spinner\n ) : (\n <Spinner\n className={loadingSvgVariants({\n variant,\n })}\n />\n )}\n </span>\n <VisuallyHidden>{children}</VisuallyHidden>\n </>\n ) : (\n <>\n {children}\n {variant === 'link' && size && size !== 'icon' && (\n <LinkButtonAppendIcon className={iconClassName} size={size} />\n )}\n </>\n )}\n </Comp>\n )\n }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["button_exports", "__export", "button_default", "sizeMap", "__toCommonJS", "import_jsx_runtime", "React", "import_react_visually_hidden", "import_class_variance_authority", "import_spinner", "import_helpers", "LinkButtonAppendIcon", "size", "rest", "width", "height", "buttonVariants", "loadingSvgVariants", "Button", "asChild", "as", "href", "target", "rel", "children", "variant", "hoverEffect", "className", "disabled", "loading", "spinner", "iconClassName", "props", "ref", "Spinner"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as d}from"react/jsx-runtime";import X,{useImperativeHandle as xe,useRef as y,useState as he,useEffect as ye}from"react";import w from"gsap";import{ScrollTrigger as B}from"gsap/dist/ScrollTrigger";import ee from"jump.js";import{useMediaQuery as te}from"react-responsive";import{useInView as ve}from"react-intersection-observer";import ke from"../../helpers/ScrollLoadVideo.js";import{Button as P,Heading as we,Picture as
|
|
1
|
+
"use client";import{jsx as e,jsxs as d}from"react/jsx-runtime";import X,{useImperativeHandle as xe,useRef as y,useState as he,useEffect as ye}from"react";import w from"gsap";import{ScrollTrigger as B}from"gsap/dist/ScrollTrigger";import ee from"jump.js";import{useMediaQuery as te}from"react-responsive";import{useInView as ve}from"react-intersection-observer";import ke from"../../helpers/ScrollLoadVideo.js";import{Button as P,Heading as we,Picture as re,Text as L,Countdown as Be}from"../../components/index.js";import{cn as s}from"../../helpers/index.js";import{cva as $}from"class-variance-authority";import{withLayout as $e}from"../../shared/Styles.js";import{useExposure as Ne}from"../../hooks/useExposure.js";import{trackUrlRef as S}from"../../shared/trackUrlRef.js";import{getLocalizedPath as Ve}from"../../helpers/utils.js";import{useAiuiContext as He}from"../AiuiProvider/index.js";import{sizeMap as Te}from"../../components/button.js";import{VideoModal as ze}from"../VideoModal/index.js";import Ce from"./HeroBannerCarousel.js";const u="image",c="hero_banner",Ie=$("hero-banner-content lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]",{variants:{align:{left:"tablet:px-[32px] laptop:top-1/2 laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] laptop:-translate-y-1/2 left-0 px-[16px]",center:"tablet:top-[84px] laptop:top-[76px] desktop:top-[176px] lg-desktop:top-[192px] left-1/2 top-[84px] -translate-x-1/2 translate-y-0 items-center text-center"}},defaultVariants:{align:"left"}}),Pe=$("hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",{variants:{align:{left:"laptop:text-left",center:"text-center"}},defaultVariants:{align:"left"}}),Le=$("hero-banner-button-group lg-desktop:gap-3 flex items-center gap-2",{variants:{align:{left:"laptop:justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),Se=$("hero-banner-icon-group flex items-center gap-2",{variants:{align:{left:"justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),Re=({size:l="base"})=>{const{width:v,height:i}=Te[l];return e("svg",{width:v,height:i,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},ae=X.forwardRef(({data:l,className:v,classNames:i={},onSecondaryClick:R,onPrimaryClick:M,jumpOptions:oe={},...D},E)=>{const{locale:j}=He(),_={...{duration:500,offset:0},...oe},N=r=>!r||!j?r:Ve(r,j),{label:O,title:n,subtitle:a,endDate:U,endDate_tz:ne,dateFormat:le,pcImage:f,padImage:G,mobileImage:k,pcVideo:se,padVideo:ie,mobileVideo:J,isShowVideo:pe,isVideoLoop:ue=!0,primaryButton:o,secondaryButton:t,theme:ce="light",size:V="default",titleSize:H,caption:T=[],blockLink:q,iconArray:me,align:g="left",enableParallax:F=!0}=l,A=te({query:"(max-width: 768px)"}),W=te({query:"(max-width: 1024px)"}),[Y,Q]=he(!1),{ref:de,inView:Z}=ve(),z=y(null),C=y(null),I=y(null),b=y(null),m=y(null),fe=n?.trim()||a?.trim()||f?.alt?.trim()||void 0,ge=n!==void 0?n?.trim()||a?.trim()||f?.alt?.trim()||void 0:a&&a.trim()||"",be=a&&a.trim()||"";return Ne(m,{componentType:u,componentName:c,componentTitle:ge,componentDescription:be}),xe(E,()=>m.current),ye(()=>{if(l.items&&l.items.length>0||!F)return;w.registerPlugin(B);function r(){if(!b.current)return;const p=m.current?.clientHeight||100;window.innerHeight<=p?z.current=B.create({trigger:m.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:x=>{const h=x.progress*40-20;w.set(b.current,{yPercent:h})}}):(I.current=B.create({trigger:m.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:x=>{const h=x.progress*20-20;w.set(b.current,{yPercent:h})}}),C.current=B.create({trigger:m.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:x=>{const h=x.progress*20;w.set(b.current,{yPercent:h})}}))}return Z&&r(),()=>{z.current&&z.current.kill(),I.current&&I.current.kill(),C.current&&C.current.kill()}},[Z,l.items,F]),l.items&&l.items.length>0?e(Ce,{data:l,className:v,classNames:i,onPrimaryClick:M,onSecondaryClick:R,ref:E,...D}):e("div",{...D,ref:de,"data-ui-component-id":"HeroBanner",children:d("div",{ref:m,className:s(ce==="dark"?"aiui-dark":"","text-info-primary relative w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]":V==="default","lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]":V==="sm"},v),children:[q&&e("a",{className:"absolute inset-0 z-10",href:S(N(q),`${u}_${c}`),"data-headless-type-name":`${u}#${c}`,"data-headless-title-desc-button":`${n}#${a}`,tabIndex:-1,"aria-hidden":"true","aria-label":fe}),e("div",{ref:b,className:s("absolute left-0 top-0 size-full"),children:pe?e(ke,{poster:A?k?.url:W?G?.url||k?.url:f?.url,src:A?J?.url:W?ie?.url||J?.url:se?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:ue,playsInline:!0}):e(re,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:f?.alt||"",source:`${f?.url||""} , ${G?.url??(k?.url||"")} 1024, ${k?.url||""} 767`})}),d("div",{className:Ie({align:g}),children:[d("div",{className:Pe({align:g}),children:[O&&e(L,{size:2,as:"p",className:s("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:O}),n&&e(we,{as:H==="4"?"h1":"h2",html:n,className:s("hero-banner-title",i.title),size:H?Number(H||"5"):V==="sm"?4:5}),a&&e(L,{as:"p",size:2,className:s("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm",i.subtitle),html:a}),U&&e("div",{className:"mt-3",children:e(Be,{endDate:U,endDate_tz:ne,dateFormat:le,variant:"spacious",align:g})})]}),d("div",{className:s(Le({align:g}),i.buttonGroup),children:[t?.isShowPlayVideoButton&&t?.playVideoButtonText?d(P,{onClick:()=>Q(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${u}#${c}`,"data-headless-title-desc-button":`${n}#${a}#${t?.playVideoButtonText}`,children:[t?.playVideoButtonText," ",e(Re,{size:"lg"})]}):t?.text?d(P,{"aria-label":n??a,size:"lg",variant:"secondary",className:s("hero-banner-secondary-button",i.secondaryButton),as:t?.isCustomSecondaryButton?"button":"a",href:S(N(t?.link),`${u}_${c}`),target:t?.target,rel:t?.target==="_blank"?t?.rel??"noopener noreferrer":t?.rel,onClick:r=>{if(t.link?.startsWith("#")){r.preventDefault();const p=document.querySelector(t.link);p&&ee(p,_)}t?.isCustomSecondaryButton&&R?.(l,r,t?.customSecondaryEventId)},"data-headless-type-name":`${u}#${c}`,"data-headless-title-desc-button":`${n}#${a}#${t?.text}`,children:[t?.text,e("span",{className:"sr-only",children:n??a})]}):null,o&&o.text&&e(P,{"aria-label":n??a,size:"lg",variant:"primary",className:s("hero-banner-primary-button",i.primaryButton),as:o?.isCustomPrimaryButton?"button":"a",href:S(N(o.link),`${u}_${c}`),target:o?.target,rel:o?.target==="_blank"?o?.rel??"noopener noreferrer":o?.rel,onClick:r=>{if(o.link?.startsWith("#")){r.preventDefault();const p=document.querySelector(o.link);p&&ee(p,_)}o?.isCustomPrimaryButton&&M?.(l,r,o?.customPrimaryEventId)},"data-headless-type-name":`${u}#${c}`,"data-headless-title-desc-button":`${n}#${a}#${o?.text}`,children:o.text})]}),e("div",{className:Se({align:g}),children:me?.map(r=>e("div",{className:"h-12",children:e(re,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:r?.pcImage?.alt||"",source:r?.pcImage?.url})},r?.pcImage?.url||r?.pcImage?.alt))})]}),T.length>0&&e("div",{className:s("hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",i.captionGroup),children:T.map((r,p)=>d(X.Fragment,{children:[e(L,{size:2,className:s("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:r.title}),p<T.length-1&&e("div",{className:s("bg-info-primary w-px")})]},r.title))}),Y&&e(ze,{visible:Y,videoUrl:t?.isYoutubeVideo?void 0:t?.videoUrl?.url,youTubeId:t?.isYoutubeVideo?t?.youtubeId:void 0,onCloseModal:()=>Q(!1)})]})})});ae.displayName="HeroBanner";var rt=$e(ae);export{rt as default};
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport jump from 'jump.js'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text, Countdown } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { cva } from 'class-variance-authority'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n// Task 18: import carousel implementation for early-return delegation (DECISION-A002)\nimport HeroBannerCarousel from './HeroBannerCarousel.js'\n\n/**\n * jump.js \u914D\u7F6E\u9009\u9879\n */\nexport interface JumpOptions {\n /** \u52A8\u753B\u6301\u7EED\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09 @default 500 */\n duration?: number\n /** \u504F\u79FB\u91CF\uFF08\u50CF\u7D20\uFF09 @default 0 */\n offset?: number\n /** \u52A8\u753B\u5B8C\u6210\u56DE\u8C03 */\n callback?: () => void\n /** \u7F13\u52A8\u51FD\u6570 */\n easing?: (t: number, b: number, c: number, d: number) => number\n /** \u662F\u5426\u8003\u8651 a11y @default false */\n a11y?: boolean\n}\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\n// CVA variants for align\nconst contentVariants = cva(\n 'hero-banner-content lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]',\n {\n variants: {\n align: {\n left: 'tablet:px-[32px] laptop:top-1/2 laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] laptop:-translate-y-1/2 left-0 px-[16px]',\n center:\n 'tablet:top-[84px] laptop:top-[76px] desktop:top-[176px] lg-desktop:top-[192px] left-1/2 top-[84px] -translate-x-1/2 translate-y-0 items-center text-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n }\n)\n\nconst textVariants = cva(\n 'hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]',\n {\n variants: {\n align: {\n left: 'laptop:text-left',\n center: 'text-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n }\n)\n\nconst buttonGroupVariants = cva('hero-banner-button-group lg-desktop:gap-3 flex items-center gap-2', {\n variants: {\n align: {\n left: 'laptop:justify-start',\n center: 'justify-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n})\n\nconst iconGroupVariants = cva('hero-banner-icon-group flex items-center gap-2', {\n variants: {\n align: {\n left: 'justify-start',\n center: 'justify-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n})\n\nexport type HeroBannerSemanticName =\n | 'root'\n | 'title'\n | 'subtitle'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n | 'captionGroup'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<\n HTMLDivElement,\n HeroBannerProps & {\n classNames?: Partial<Record<HeroBannerSemanticName, string>>\n /**\n * \u951A\u70B9\u8DF3\u8F6C\u914D\u7F6E\uFF08\u7528\u4E8E # \u5F00\u5934\u7684\u94FE\u63A5\uFF09\n * @default { duration: 500, offset: 0 }\n */\n jumpOptions?: JumpOptions\n }\n>(({ data, className, classNames = {}, onSecondaryClick, onPrimaryClick, jumpOptions = {}, ...rest }, ref) => {\n const { locale } = useAiuiContext()\n\n // \u9ED8\u8BA4 jump \u914D\u7F6E\n const defaultJumpOptions: JumpOptions = { duration: 500, offset: 0 }\n const mergedJumpOptions = { ...defaultJumpOptions, ...jumpOptions }\n\n // \u5305\u88C5\u94FE\u63A5\uFF0C\u81EA\u52A8\u6DFB\u52A0 locale \u524D\u7F00\n const localizeUrl = (url?: string) => {\n if (!url || !locale) return url\n return getLocalizedPath(url, locale)\n }\n\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n isVideoLoop = true,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n titleSize,\n caption = [],\n blockLink,\n iconArray,\n align = 'left',\n enableParallax = true,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n // Task 7: Compute accessibility / tracking fallback values (Rule 2/3/4 \u2014 DECISION-T3)\n // blockLink aria-label: title \u2192 subtitle \u2192 pcImage.alt \u2192 undefined (absent attr)\n const blockLinkLabel = title?.trim() || subtitle?.trim() || pcImage?.alt?.trim() || undefined\n // componentTitle: title=undefined \u2192 coerce '' via subtitle only (no pcImage.alt for undefined title);\n // title='' (intentional) \u2192 cascade: subtitle \u2192 pcImage.alt \u2192 undefined\n const resolvedComponentTitle =\n title !== undefined\n ? title?.trim() || subtitle?.trim() || pcImage?.alt?.trim() || undefined\n : (subtitle && subtitle.trim()) || ''\n // componentDescription: subtitle with undefined guard\n const resolvedComponentDescription = (subtitle && subtitle.trim()) || ''\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: resolvedComponentTitle,\n componentDescription: resolvedComponentDescription,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n // Task 18: GSAP bypass \u2014 skip ALL GSAP setup in carousel mode (DECISION-A002/DECISION-009)\n if (data.items && data.items.length > 0) return\n if (!enableParallax) return\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView, data.items, enableParallax])\n\n // Task 18: Carousel mode early return (DECISION-A002 / DECISION-011)\n // All hooks above have already run. Delegate entirely to HeroBannerCarousel\n // when data.items is non-empty; GSAP was already bypassed in the useEffect above.\n if (data.items && data.items.length > 0) {\n return (\n <HeroBannerCarousel\n data={data}\n className={className}\n classNames={classNames}\n onPrimaryClick={onPrimaryClick}\n onSecondaryClick={onSecondaryClick}\n ref={ref as React.Ref<HTMLDivElement>}\n {...rest}\n />\n )\n }\n return (\n <div {...rest} ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'text-info-primary relative w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]':\n size === 'default',\n 'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]':\n size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(localizeUrl(blockLink), `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={blockLinkLabel}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop={isVideoLoop}\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className={contentVariants({ align })}>\n <div className={textVariants({ align })}>\n {label && (\n <Text\n size={2}\n as=\"p\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && (\n <Heading\n as={titleSize === '4' ? 'h1' : 'h2'}\n html={title}\n className={cn('hero-banner-title', classNames.title)}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Text\n as=\"p\"\n size={2}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm',\n classNames.subtitle\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n align={align}\n />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className={cn(buttonGroupVariants({ align }), classNames.buttonGroup)}>\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className={cn('hero-banner-secondary-button', classNames.secondaryButton)}\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={trackUrlRef(localizeUrl(secondaryButton?.link), `${componentType}_${componentName}`)}\n onClick={e => {\n if (secondaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(secondaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n secondaryButton?.isCustomSecondaryButton &&\n onSecondaryClick?.(data, e, secondaryButton?.customSecondaryEventId)\n }}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className={cn('hero-banner-primary-button', classNames.primaryButton)}\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={trackUrlRef(localizeUrl(primaryButton.link), `${componentType}_${componentName}`)}\n onClick={e => {\n if (primaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(primaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e, primaryButton?.customPrimaryEventId)\n }}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className={iconGroupVariants({ align })}>\n {iconArray?.map(icon => (\n <div key={icon?.pcImage?.url || icon?.pcImage?.alt} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div\n className={cn(\n 'hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]',\n classNames.captionGroup\n )}\n >\n {caption.map((c, index) => (\n <React.Fragment key={c.title}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.isYoutubeVideo ? undefined : secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.isYoutubeVideo ? secondaryButton?.youtubeId : undefined}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport jump from 'jump.js'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text, Countdown } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { cva } from 'class-variance-authority'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n// Task 18: import carousel implementation for early-return delegation (DECISION-A002)\nimport HeroBannerCarousel from './HeroBannerCarousel.js'\n\n/**\n * jump.js \u914D\u7F6E\u9009\u9879\n */\nexport interface JumpOptions {\n /** \u52A8\u753B\u6301\u7EED\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09 @default 500 */\n duration?: number\n /** \u504F\u79FB\u91CF\uFF08\u50CF\u7D20\uFF09 @default 0 */\n offset?: number\n /** \u52A8\u753B\u5B8C\u6210\u56DE\u8C03 */\n callback?: () => void\n /** \u7F13\u52A8\u51FD\u6570 */\n easing?: (t: number, b: number, c: number, d: number) => number\n /** \u662F\u5426\u8003\u8651 a11y @default false */\n a11y?: boolean\n}\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\n// CVA variants for align\nconst contentVariants = cva(\n 'hero-banner-content lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]',\n {\n variants: {\n align: {\n left: 'tablet:px-[32px] laptop:top-1/2 laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] laptop:-translate-y-1/2 left-0 px-[16px]',\n center:\n 'tablet:top-[84px] laptop:top-[76px] desktop:top-[176px] lg-desktop:top-[192px] left-1/2 top-[84px] -translate-x-1/2 translate-y-0 items-center text-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n }\n)\n\nconst textVariants = cva(\n 'hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]',\n {\n variants: {\n align: {\n left: 'laptop:text-left',\n center: 'text-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n }\n)\n\nconst buttonGroupVariants = cva('hero-banner-button-group lg-desktop:gap-3 flex items-center gap-2', {\n variants: {\n align: {\n left: 'laptop:justify-start',\n center: 'justify-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n})\n\nconst iconGroupVariants = cva('hero-banner-icon-group flex items-center gap-2', {\n variants: {\n align: {\n left: 'justify-start',\n center: 'justify-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n})\n\nexport type HeroBannerSemanticName =\n | 'root'\n | 'title'\n | 'subtitle'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n | 'captionGroup'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<\n HTMLDivElement,\n HeroBannerProps & {\n classNames?: Partial<Record<HeroBannerSemanticName, string>>\n /**\n * \u951A\u70B9\u8DF3\u8F6C\u914D\u7F6E\uFF08\u7528\u4E8E # \u5F00\u5934\u7684\u94FE\u63A5\uFF09\n * @default { duration: 500, offset: 0 }\n */\n jumpOptions?: JumpOptions\n }\n>(({ data, className, classNames = {}, onSecondaryClick, onPrimaryClick, jumpOptions = {}, ...rest }, ref) => {\n const { locale } = useAiuiContext()\n\n // \u9ED8\u8BA4 jump \u914D\u7F6E\n const defaultJumpOptions: JumpOptions = { duration: 500, offset: 0 }\n const mergedJumpOptions = { ...defaultJumpOptions, ...jumpOptions }\n\n // \u5305\u88C5\u94FE\u63A5\uFF0C\u81EA\u52A8\u6DFB\u52A0 locale \u524D\u7F00\n const localizeUrl = (url?: string) => {\n if (!url || !locale) return url\n return getLocalizedPath(url, locale)\n }\n\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n isVideoLoop = true,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n titleSize,\n caption = [],\n blockLink,\n iconArray,\n align = 'left',\n enableParallax = true,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n // Task 7: Compute accessibility / tracking fallback values (Rule 2/3/4 \u2014 DECISION-T3)\n // blockLink aria-label: title \u2192 subtitle \u2192 pcImage.alt \u2192 undefined (absent attr)\n const blockLinkLabel = title?.trim() || subtitle?.trim() || pcImage?.alt?.trim() || undefined\n // componentTitle: title=undefined \u2192 coerce '' via subtitle only (no pcImage.alt for undefined title);\n // title='' (intentional) \u2192 cascade: subtitle \u2192 pcImage.alt \u2192 undefined\n const resolvedComponentTitle =\n title !== undefined\n ? title?.trim() || subtitle?.trim() || pcImage?.alt?.trim() || undefined\n : (subtitle && subtitle.trim()) || ''\n // componentDescription: subtitle with undefined guard\n const resolvedComponentDescription = (subtitle && subtitle.trim()) || ''\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: resolvedComponentTitle,\n componentDescription: resolvedComponentDescription,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n // Task 18: GSAP bypass \u2014 skip ALL GSAP setup in carousel mode (DECISION-A002/DECISION-009)\n if (data.items && data.items.length > 0) return\n if (!enableParallax) return\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView, data.items, enableParallax])\n\n // Task 18: Carousel mode early return (DECISION-A002 / DECISION-011)\n // All hooks above have already run. Delegate entirely to HeroBannerCarousel\n // when data.items is non-empty; GSAP was already bypassed in the useEffect above.\n if (data.items && data.items.length > 0) {\n return (\n <HeroBannerCarousel\n data={data}\n className={className}\n classNames={classNames}\n onPrimaryClick={onPrimaryClick}\n onSecondaryClick={onSecondaryClick}\n ref={ref as React.Ref<HTMLDivElement>}\n {...rest}\n />\n )\n }\n return (\n <div {...rest} ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'text-info-primary relative w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]':\n size === 'default',\n 'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]':\n size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(localizeUrl(blockLink), `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={blockLinkLabel}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop={isVideoLoop}\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className={contentVariants({ align })}>\n <div className={textVariants({ align })}>\n {label && (\n <Text\n size={2}\n as=\"p\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && (\n <Heading\n as={titleSize === '4' ? 'h1' : 'h2'}\n html={title}\n className={cn('hero-banner-title', classNames.title)}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Text\n as=\"p\"\n size={2}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm',\n classNames.subtitle\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n align={align}\n />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className={cn(buttonGroupVariants({ align }), classNames.buttonGroup)}>\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className={cn('hero-banner-secondary-button', classNames.secondaryButton)}\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={trackUrlRef(localizeUrl(secondaryButton?.link), `${componentType}_${componentName}`)}\n target={secondaryButton?.target}\n rel={\n secondaryButton?.target === '_blank'\n ? (secondaryButton?.rel ?? 'noopener noreferrer')\n : secondaryButton?.rel\n }\n onClick={e => {\n if (secondaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(secondaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n secondaryButton?.isCustomSecondaryButton &&\n onSecondaryClick?.(data, e, secondaryButton?.customSecondaryEventId)\n }}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className={cn('hero-banner-primary-button', classNames.primaryButton)}\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={trackUrlRef(localizeUrl(primaryButton.link), `${componentType}_${componentName}`)}\n target={primaryButton?.target}\n rel={\n primaryButton?.target === '_blank'\n ? (primaryButton?.rel ?? 'noopener noreferrer')\n : primaryButton?.rel\n }\n onClick={e => {\n if (primaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(primaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e, primaryButton?.customPrimaryEventId)\n }}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className={iconGroupVariants({ align })}>\n {iconArray?.map(icon => (\n <div key={icon?.pcImage?.url || icon?.pcImage?.alt} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div\n className={cn(\n 'hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]',\n classNames.captionGroup\n )}\n >\n {caption.map((c, index) => (\n <React.Fragment key={c.title}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.isYoutubeVideo ? undefined : secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.isYoutubeVideo ? secondaryButton?.youtubeId : undefined}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "gsap", "ScrollTrigger", "jump", "useMediaQuery", "useInView", "ScrollLoadVideo", "Button", "Heading", "Picture", "Text", "Countdown", "cn", "cva", "withLayout", "useExposure", "trackUrlRef", "getLocalizedPath", "useAiuiContext", "sizeMap", "VideoModal", "HeroBannerCarousel", "componentType", "componentName", "contentVariants", "textVariants", "buttonGroupVariants", "iconGroupVariants", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "data", "className", "classNames", "onSecondaryClick", "onPrimaryClick", "jumpOptions", "rest", "ref", "locale", "mergedJumpOptions", "localizeUrl", "url", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "isVideoLoop", "primaryButton", "secondaryButton", "theme", "titleSize", "caption", "blockLink", "iconArray", "align", "enableParallax", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "blockLinkLabel", "resolvedComponentTitle", "resolvedComponentDescription", "gsapResize", "clientHeight", "self", "value", "e", "element", "icon", "c", "index", "HeroBanner_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import N,{useRef as
|
|
1
|
+
"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import N,{useRef as _,useEffect as R,useCallback as j,useState as A}from"react";import{Swiper as E,SwiperSlide as I}from"swiper/react";import{Navigation as H,Pagination as L,Autoplay as M}from"swiper/modules";import V from"../../helpers/ScrollLoadVideo.js";import{cn as b}from"../../helpers/index.js";import{Button as P,Heading as D,Text as O}from"../../components/index.js";import"swiper/css";import"swiper/css/navigation";import"swiper/css/pagination";const W=()=>i("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),e("path",{d:"M23 13L16 20L23 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),F=()=>i("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),e("path",{d:"M17 13L24 20L17 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),U=({data:l,isActive:S,videoRef:C,onPrimaryClick:v,onSecondaryClick:w})=>{const{pcVideo:h,padVideo:k,mobileVideo:c,pcImage:p,mobileImage:d,isVideoLoop:B=!0,title:g,subtitle:s,primaryButton:r,secondaryButton:t,theme:u="light",align:m="left",titleSize:f,size:x="default"}=l,n=h?.url||k?.url||c?.url||"",a=p?.url||d?.url||"";return i("div",{className:b("text-info-primary relative w-full overflow-hidden",u==="dark"?"aiui-dark":"",x==="default"?"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]":"lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]"),children:[e(V,{videoRef:C,src:n,poster:a,className:"absolute inset-0 size-full",videoClassName:"size-full object-cover",muted:!0,loop:B,playsInline:!0}),i("div",{className:b("laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]",m==="center"?"left-1/2 -translate-x-1/2 items-center text-center":"tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]"),children:[i("div",{className:b("tablet:max-w-[704px] laptop:max-w-[440px] desktop:max-w-[648px] lg-desktop:max-w-[824px] max-w-[358px]",m==="center"?"text-center":"laptop:text-left"),children:[g&&e(D,{as:f==="4"?"h1":"h2",html:g,size:f?Number(f||"5"):x==="sm"?4:5}),s&&e(O,{as:"p",size:2,className:"font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm",html:s})]}),(r?.text||t?.text)&&i("div",{className:b("lg-desktop:gap-3 flex items-center gap-2",m==="center"?"justify-center":"laptop:justify-start"),children:[t?.text&&e(P,{size:"lg",variant:"secondary",as:t?.isCustomSecondaryButton?"button":"a",href:t.link,target:t?.target,rel:t?.target==="_blank"?t?.rel??"noopener noreferrer":t?.rel,onClick:o=>t?.isCustomSecondaryButton&&w?.(l,o,t?.customSecondaryEventId),children:t.text}),r?.text&&e(P,{size:"lg",variant:"primary",as:r?.isCustomPrimaryButton?"button":"a",href:r.link,target:r?.target,rel:r?.target==="_blank"?r?.rel??"noopener noreferrer":r?.rel,onClick:o=>r?.isCustomPrimaryButton&&v?.(l,o,r?.customPrimaryEventId),children:r.text})]})]})]})},T=N.forwardRef(({data:l,className:S,classNames:C={},onPrimaryClick:v,onSecondaryClick:w,...h},k)=>{const c=l.items||[],p=l.carousel,d=_(null),[B,g]=A(0),s=_(c.map(()=>N.createRef())),r=(p?.showArrows??!0)&&c.length>1,t=p?.showDots??!0,u=p?.autoplaySeconds,m=u!==void 0?[H,L,M]:[H,L],f=u!==void 0?{delay:u*1e3,disableOnInteraction:!1}:!1;R(()=>{s.current.forEach((n,a)=>{a!==0&&n.current&&(n.current.pause(),n.current.currentTime=0)})},[]);const x=j(n=>{const a=n.realIndex;s.current.forEach((y,z)=>{z!==a&&y.current&&(y.current.pause(),y.current.currentTime=0)});const o=s.current[a];o?.current&&o.current.paused&&o.current.play()?.catch(()=>{}),g(a)},[]);return i("div",{ref:k,className:b("hero-banner-carousel relative w-full overflow-hidden",S),...h,children:[e(E,{onSwiper:n=>d.current=n,onSlideChange:x,modules:m,slidesPerView:1,loop:p?.loop??!0,initialSlide:0,allowTouchMove:!0,autoplay:f,pagination:t?{clickable:!0,el:".hero-banner-pagination",renderBullet:(n,a)=>`<span class="${a} banner-dot"></span>`}:!1,children:c.map((n,a)=>e(I,{children:({isActive:o})=>e(U,{data:n,isActive:o,videoRef:s.current[a],onPrimaryClick:v,onSecondaryClick:w})},a))}),r&&i("div",{className:"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4",children:[e("button",{type:"button",className:"tablet:flex pointer-events-auto hidden items-center justify-center",onClick:()=>d.current?.slidePrev(),"aria-label":"Previous banner",children:e(W,{})}),e("button",{type:"button",className:"tablet:flex pointer-events-auto hidden items-center justify-center",onClick:()=>d.current?.slideNext(),"aria-label":"Next banner",children:e(F,{})})]}),t&&e("div",{className:"hero-banner-pagination swiper-pagination tablet:bottom-6 absolute bottom-5 left-1/2 z-20 flex -translate-x-1/2 items-center justify-center gap-2 [&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8 [&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot.swiper-pagination-bullet-active]:bg-[#080A0F] [&_.banner-dot]:size-2 [&_.banner-dot]:rounded-full [&_.banner-dot]:bg-[#767880] [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out [&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100"})]})});T.displayName="HeroBannerCarousel";var ee=T;export{ee as default};
|
|
2
2
|
//# sourceMappingURL=HeroBannerCarousel.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBannerCarousel.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef, useEffect, useCallback, useState } from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, Pagination, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { cn } from '../../helpers/index.js'\nimport type { HeroBannerProps, HeroBannerSlideData } from './types.js'\nimport { Button, Heading, Text } from '../../components/index.js'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\n\n// \u2500\u2500 Arrow icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst ChevronLeft = () => (\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M23 13L16 20L23 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ChevronRight = () => (\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M17 13L24 20L17 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\n// \u2500\u2500 HeroBannerSlide \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Minimal per-slide content unit. No GSAP, no withLayout, no useExposure.\n// videoRef is the imperative pause/play channel (DECISION-A003).\n\ninterface HeroBannerSlideProps {\n data: HeroBannerSlideData\n isActive: boolean\n videoRef: React.RefObject<HTMLVideoElement>\n onPrimaryClick?: (data: any, e: any, id?: string) => void\n onSecondaryClick?: (data: any, e: any, id?: string) => void\n}\n\nconst HeroBannerSlide = ({\n data,\n isActive: _isActive,\n videoRef,\n onPrimaryClick,\n onSecondaryClick,\n}: HeroBannerSlideProps) => {\n const {\n pcVideo,\n padVideo,\n mobileVideo,\n pcImage,\n mobileImage,\n isVideoLoop = true,\n title,\n subtitle,\n primaryButton,\n secondaryButton,\n theme = 'light',\n align = 'left',\n titleSize,\n size = 'default',\n } = data\n\n // Resolve video src (pc preferred; fallback to mobile)\n const videoSrc = pcVideo?.url || padVideo?.url || mobileVideo?.url || ''\n // Poster from image (shown while video loads or for image-only slides)\n const posterUrl = pcImage?.url || mobileImage?.url || ''\n\n return (\n <div\n className={cn(\n 'text-info-primary relative w-full overflow-hidden',\n theme === 'dark' ? 'aiui-dark' : '',\n size === 'default'\n ? 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]'\n : 'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]'\n )}\n >\n {/* Background media \u2014 always ScrollLoadVideo so videoRef is always attached.\n For image-only slides src='', IO won't load a video, but ref is live for control. */}\n <ScrollLoadVideo\n videoRef={videoRef}\n src={videoSrc}\n poster={posterUrl}\n className=\"absolute inset-0 size-full\"\n videoClassName=\"size-full object-cover\"\n muted\n loop={isVideoLoop}\n playsInline\n />\n\n {/* Content Overlay */}\n <div\n className={cn(\n 'laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]',\n align === 'center'\n ? 'left-1/2 -translate-x-1/2 items-center text-center'\n : 'tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]'\n )}\n >\n <div\n className={cn(\n 'tablet:max-w-[704px] laptop:max-w-[440px] desktop:max-w-[648px] lg-desktop:max-w-[824px] max-w-[358px]',\n align === 'center' ? 'text-center' : 'laptop:text-left'\n )}\n >\n {title && (\n <Heading\n as={titleSize === '4' ? 'h1' : 'h2'}\n html={title}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Text\n as=\"p\"\n size={2}\n className=\"font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm\"\n html={subtitle}\n />\n )}\n </div>\n\n {(primaryButton?.text || secondaryButton?.text) && (\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n align === 'center' ? 'justify-center' : 'laptop:justify-start'\n )}\n >\n {secondaryButton?.text && (\n <Button\n size=\"lg\"\n variant=\"secondary\"\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={secondaryButton.link}\n onClick={e =>\n secondaryButton?.isCustomSecondaryButton &&\n onSecondaryClick?.(data, e, secondaryButton?.customSecondaryEventId)\n }\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\n size=\"lg\"\n variant=\"primary\"\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={primaryButton.link}\n onClick={e =>\n primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e, primaryButton?.customPrimaryEventId)\n }\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )\n}\n\n// \u2500\u2500 HeroBannerCarousel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface HeroBannerCarouselProps extends React.HTMLAttributes<HTMLDivElement> {\n data: HeroBannerProps['data']\n classNames?: Record<string, string>\n onPrimaryClick?: (data: any, e: any, id?: string) => void\n onSecondaryClick?: (data: any, e: any, id?: string) => void\n}\n\n/**\n * HeroBannerCarousel \u2014 arrows-only Navigation Swiper wrapping HeroBannerSlide units.\n *\n * Architecture:\n * - DECISION-A007: Navigation only, loop=false, slidesPerView=1\n * - DECISION-A003: ScrollLoadVideo videoRef as imperative pause channel\n * - DECISION-A010: initial activeIndex=0; useEffect pauses slides 1..N on mount\n * - DECISION-A006: arrow buttons at z-[20], above blockLink overlay z-10\n * - ISSUE-017: post-mount pause wins over IO rootMargin='200px' race\n */\nconst HeroBannerCarousel = React.forwardRef<HTMLDivElement, HeroBannerCarouselProps>(\n (\n {\n data,\n className,\n classNames: _classNames = {},\n onPrimaryClick: _onPrimaryClick,\n onSecondaryClick: _onSecondaryClick,\n ...rest\n },\n ref\n ) => {\n const items = data.items || []\n const carousel = data.carousel\n\n const swiperRef = useRef<SwiperType | null>(null)\n const [_activeIndex, setActiveIndex] = useState(0)\n\n // One RefObject<HTMLVideoElement> per slide.\n // Created once at mount; ref count is fixed (ISSUE-022 \u2014 stable data assumed).\n // DECISION-A003: passed to HeroBannerSlide \u2192 ScrollLoadVideo as imperative channel.\n const videoRefs = useRef<React.RefObject<HTMLVideoElement>[]>(items.map(() => React.createRef<HTMLVideoElement>()))\n\n // Arrow visibility formula \u2014 DECISION-011\n const showArrowControls = (carousel?.showArrows ?? true) && items.length > 1\n\n // Pagination dots visibility formula \u2014 DECISION-006\n const showDots = carousel?.showDots ?? true\n\n // Autoplay module configuration \u2014 DECISION-006\n const autoplaySeconds = carousel?.autoplaySeconds\n const swiperModules = autoplaySeconds !== undefined ? [Navigation, Pagination, Autoplay] : [Navigation, Pagination]\n const autoplayConfig =\n autoplaySeconds !== undefined ? { delay: autoplaySeconds * 1000, disableOnInteraction: false } : false\n\n // Post-mount effect: pause all non-active (index !== 0) slide videos.\n // Wins the race against ScrollLoadVideo's IO rootMargin='200px' auto-play (ISSUE-017).\n useEffect(() => {\n videoRefs.current.forEach((vRef, i) => {\n if (i !== 0 && vRef.current) {\n vRef.current.pause()\n vRef.current.currentTime = 0\n }\n })\n }, [])\n\n // Slide transition handler \u2014 pause outgoing, play incoming (DECISION-A003 / DECISION-009)\n const handleSlideChange = useCallback((swiper: SwiperType) => {\n const newIndex = swiper.realIndex\n // Pause and reset all non-active slide videos\n videoRefs.current.forEach((vRef, i) => {\n if (i !== newIndex && vRef.current) {\n vRef.current.pause()\n vRef.current.currentTime = 0\n }\n })\n // Play incoming slide video \u2014 guard against AbortError from rapid swipe (ISSUE-005)\n const incoming = videoRefs.current[newIndex]\n if (incoming?.current && incoming.current.paused) {\n const p = incoming.current.play()\n p?.catch(() => {}) // Absorb AbortError silently\n }\n setActiveIndex(newIndex)\n }, [])\n\n return (\n <div ref={ref} className={cn('hero-banner-carousel relative w-full overflow-hidden', className)} {...rest}>\n <Swiper\n onSwiper={s => (swiperRef.current = s)}\n onSlideChange={handleSlideChange}\n modules={swiperModules}\n slidesPerView={1}\n loop={carousel?.loop ?? true}\n initialSlide={0}\n allowTouchMove={true}\n autoplay={autoplayConfig}\n pagination={\n showDots\n ? {\n clickable: true,\n el: '.hero-banner-pagination',\n renderBullet: (_index: number, className: string) => `<span class=\"${className} banner-dot\"></span>`,\n }\n : false\n }\n >\n {items.map((slideData, index) => (\n <SwiperSlide key={index}>\n {({ isActive }) => (\n <HeroBannerSlide\n data={slideData}\n isActive={isActive}\n videoRef={videoRefs.current[index]}\n onPrimaryClick={_onPrimaryClick}\n onSecondaryClick={_onSecondaryClick}\n />\n )}\n </SwiperSlide>\n ))}\n </Swiper>\n\n {/* Arrow navigation \u2014 z-[20] to stay above blockLink overlay (z-10) \u2014 DECISION-A006 */}\n {showArrowControls && (\n <div className=\"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4\">\n <button\n type=\"button\"\n className=\"tablet:flex pointer-events-auto hidden items-center justify-center\"\n onClick={() => swiperRef.current?.slidePrev()}\n aria-label=\"Previous banner\"\n >\n <ChevronLeft />\n </button>\n <button\n type=\"button\"\n className=\"tablet:flex pointer-events-auto hidden items-center justify-center\"\n onClick={() => swiperRef.current?.slideNext()}\n aria-label=\"Next banner\"\n >\n <ChevronRight />\n </button>\n </div>\n )}\n\n {/* Pagination dots \u2014 visible on all devices */}\n {showDots && (\n <div className=\"hero-banner-pagination swiper-pagination tablet:bottom-6 absolute bottom-5 left-1/2 z-20 flex -translate-x-1/2 items-center justify-center gap-2 [&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8 [&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot.swiper-pagination-bullet-active]:bg-[#080A0F] [&_.banner-dot]:size-2 [&_.banner-dot]:rounded-full [&_.banner-dot]:bg-[#767880] [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out [&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100\" />\n )}\n </div>\n )\n }\n)\n\nHeroBannerCarousel.displayName = 'HeroBannerCarousel'\n\nexport default HeroBannerCarousel\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef, useEffect, useCallback, useState } from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, Pagination, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { cn } from '../../helpers/index.js'\nimport type { HeroBannerProps, HeroBannerSlideData } from './types.js'\nimport { Button, Heading, Text } from '../../components/index.js'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\n\n// \u2500\u2500 Arrow icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst ChevronLeft = () => (\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M23 13L16 20L23 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ChevronRight = () => (\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M17 13L24 20L17 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\n// \u2500\u2500 HeroBannerSlide \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Minimal per-slide content unit. No GSAP, no withLayout, no useExposure.\n// videoRef is the imperative pause/play channel (DECISION-A003).\n\ninterface HeroBannerSlideProps {\n data: HeroBannerSlideData\n isActive: boolean\n videoRef: React.RefObject<HTMLVideoElement>\n onPrimaryClick?: (data: any, e: any, id?: string) => void\n onSecondaryClick?: (data: any, e: any, id?: string) => void\n}\n\nconst HeroBannerSlide = ({\n data,\n isActive: _isActive,\n videoRef,\n onPrimaryClick,\n onSecondaryClick,\n}: HeroBannerSlideProps) => {\n const {\n pcVideo,\n padVideo,\n mobileVideo,\n pcImage,\n mobileImage,\n isVideoLoop = true,\n title,\n subtitle,\n primaryButton,\n secondaryButton,\n theme = 'light',\n align = 'left',\n titleSize,\n size = 'default',\n } = data\n\n // Resolve video src (pc preferred; fallback to mobile)\n const videoSrc = pcVideo?.url || padVideo?.url || mobileVideo?.url || ''\n // Poster from image (shown while video loads or for image-only slides)\n const posterUrl = pcImage?.url || mobileImage?.url || ''\n\n return (\n <div\n className={cn(\n 'text-info-primary relative w-full overflow-hidden',\n theme === 'dark' ? 'aiui-dark' : '',\n size === 'default'\n ? 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]'\n : 'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]'\n )}\n >\n {/* Background media \u2014 always ScrollLoadVideo so videoRef is always attached.\n For image-only slides src='', IO won't load a video, but ref is live for control. */}\n <ScrollLoadVideo\n videoRef={videoRef}\n src={videoSrc}\n poster={posterUrl}\n className=\"absolute inset-0 size-full\"\n videoClassName=\"size-full object-cover\"\n muted\n loop={isVideoLoop}\n playsInline\n />\n\n {/* Content Overlay */}\n <div\n className={cn(\n 'laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]',\n align === 'center'\n ? 'left-1/2 -translate-x-1/2 items-center text-center'\n : 'tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]'\n )}\n >\n <div\n className={cn(\n 'tablet:max-w-[704px] laptop:max-w-[440px] desktop:max-w-[648px] lg-desktop:max-w-[824px] max-w-[358px]',\n align === 'center' ? 'text-center' : 'laptop:text-left'\n )}\n >\n {title && (\n <Heading\n as={titleSize === '4' ? 'h1' : 'h2'}\n html={title}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Text\n as=\"p\"\n size={2}\n className=\"font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm\"\n html={subtitle}\n />\n )}\n </div>\n\n {(primaryButton?.text || secondaryButton?.text) && (\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n align === 'center' ? 'justify-center' : 'laptop:justify-start'\n )}\n >\n {secondaryButton?.text && (\n <Button\n size=\"lg\"\n variant=\"secondary\"\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={secondaryButton.link}\n target={secondaryButton?.target}\n rel={\n secondaryButton?.target === '_blank'\n ? (secondaryButton?.rel ?? 'noopener noreferrer')\n : secondaryButton?.rel\n }\n onClick={e =>\n secondaryButton?.isCustomSecondaryButton &&\n onSecondaryClick?.(data, e, secondaryButton?.customSecondaryEventId)\n }\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\n size=\"lg\"\n variant=\"primary\"\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={primaryButton.link}\n target={primaryButton?.target}\n rel={\n primaryButton?.target === '_blank'\n ? (primaryButton?.rel ?? 'noopener noreferrer')\n : primaryButton?.rel\n }\n onClick={e =>\n primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e, primaryButton?.customPrimaryEventId)\n }\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )\n}\n\n// \u2500\u2500 HeroBannerCarousel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface HeroBannerCarouselProps extends React.HTMLAttributes<HTMLDivElement> {\n data: HeroBannerProps['data']\n classNames?: Record<string, string>\n onPrimaryClick?: (data: any, e: any, id?: string) => void\n onSecondaryClick?: (data: any, e: any, id?: string) => void\n}\n\n/**\n * HeroBannerCarousel \u2014 arrows-only Navigation Swiper wrapping HeroBannerSlide units.\n *\n * Architecture:\n * - DECISION-A007: Navigation only, loop=false, slidesPerView=1\n * - DECISION-A003: ScrollLoadVideo videoRef as imperative pause channel\n * - DECISION-A010: initial activeIndex=0; useEffect pauses slides 1..N on mount\n * - DECISION-A006: arrow buttons at z-[20], above blockLink overlay z-10\n * - ISSUE-017: post-mount pause wins over IO rootMargin='200px' race\n */\nconst HeroBannerCarousel = React.forwardRef<HTMLDivElement, HeroBannerCarouselProps>(\n (\n {\n data,\n className,\n classNames: _classNames = {},\n onPrimaryClick: _onPrimaryClick,\n onSecondaryClick: _onSecondaryClick,\n ...rest\n },\n ref\n ) => {\n const items = data.items || []\n const carousel = data.carousel\n\n const swiperRef = useRef<SwiperType | null>(null)\n const [_activeIndex, setActiveIndex] = useState(0)\n\n // One RefObject<HTMLVideoElement> per slide.\n // Created once at mount; ref count is fixed (ISSUE-022 \u2014 stable data assumed).\n // DECISION-A003: passed to HeroBannerSlide \u2192 ScrollLoadVideo as imperative channel.\n const videoRefs = useRef<React.RefObject<HTMLVideoElement>[]>(items.map(() => React.createRef<HTMLVideoElement>()))\n\n // Arrow visibility formula \u2014 DECISION-011\n const showArrowControls = (carousel?.showArrows ?? true) && items.length > 1\n\n // Pagination dots visibility formula \u2014 DECISION-006\n const showDots = carousel?.showDots ?? true\n\n // Autoplay module configuration \u2014 DECISION-006\n const autoplaySeconds = carousel?.autoplaySeconds\n const swiperModules = autoplaySeconds !== undefined ? [Navigation, Pagination, Autoplay] : [Navigation, Pagination]\n const autoplayConfig =\n autoplaySeconds !== undefined ? { delay: autoplaySeconds * 1000, disableOnInteraction: false } : false\n\n // Post-mount effect: pause all non-active (index !== 0) slide videos.\n // Wins the race against ScrollLoadVideo's IO rootMargin='200px' auto-play (ISSUE-017).\n useEffect(() => {\n videoRefs.current.forEach((vRef, i) => {\n if (i !== 0 && vRef.current) {\n vRef.current.pause()\n vRef.current.currentTime = 0\n }\n })\n }, [])\n\n // Slide transition handler \u2014 pause outgoing, play incoming (DECISION-A003 / DECISION-009)\n const handleSlideChange = useCallback((swiper: SwiperType) => {\n const newIndex = swiper.realIndex\n // Pause and reset all non-active slide videos\n videoRefs.current.forEach((vRef, i) => {\n if (i !== newIndex && vRef.current) {\n vRef.current.pause()\n vRef.current.currentTime = 0\n }\n })\n // Play incoming slide video \u2014 guard against AbortError from rapid swipe (ISSUE-005)\n const incoming = videoRefs.current[newIndex]\n if (incoming?.current && incoming.current.paused) {\n const p = incoming.current.play()\n p?.catch(() => {}) // Absorb AbortError silently\n }\n setActiveIndex(newIndex)\n }, [])\n\n return (\n <div ref={ref} className={cn('hero-banner-carousel relative w-full overflow-hidden', className)} {...rest}>\n <Swiper\n onSwiper={s => (swiperRef.current = s)}\n onSlideChange={handleSlideChange}\n modules={swiperModules}\n slidesPerView={1}\n loop={carousel?.loop ?? true}\n initialSlide={0}\n allowTouchMove={true}\n autoplay={autoplayConfig}\n pagination={\n showDots\n ? {\n clickable: true,\n el: '.hero-banner-pagination',\n renderBullet: (_index: number, className: string) => `<span class=\"${className} banner-dot\"></span>`,\n }\n : false\n }\n >\n {items.map((slideData, index) => (\n <SwiperSlide key={index}>\n {({ isActive }) => (\n <HeroBannerSlide\n data={slideData}\n isActive={isActive}\n videoRef={videoRefs.current[index]}\n onPrimaryClick={_onPrimaryClick}\n onSecondaryClick={_onSecondaryClick}\n />\n )}\n </SwiperSlide>\n ))}\n </Swiper>\n\n {/* Arrow navigation \u2014 z-[20] to stay above blockLink overlay (z-10) \u2014 DECISION-A006 */}\n {showArrowControls && (\n <div className=\"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4\">\n <button\n type=\"button\"\n className=\"tablet:flex pointer-events-auto hidden items-center justify-center\"\n onClick={() => swiperRef.current?.slidePrev()}\n aria-label=\"Previous banner\"\n >\n <ChevronLeft />\n </button>\n <button\n type=\"button\"\n className=\"tablet:flex pointer-events-auto hidden items-center justify-center\"\n onClick={() => swiperRef.current?.slideNext()}\n aria-label=\"Next banner\"\n >\n <ChevronRight />\n </button>\n </div>\n )}\n\n {/* Pagination dots \u2014 visible on all devices */}\n {showDots && (\n <div className=\"hero-banner-pagination swiper-pagination tablet:bottom-6 absolute bottom-5 left-1/2 z-20 flex -translate-x-1/2 items-center justify-center gap-2 [&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8 [&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot.swiper-pagination-bullet-active]:bg-[#080A0F] [&_.banner-dot]:size-2 [&_.banner-dot]:rounded-full [&_.banner-dot]:bg-[#767880] [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out [&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100\" />\n )}\n </div>\n )\n }\n)\n\nHeroBannerCarousel.displayName = 'HeroBannerCarousel'\n\nexport default HeroBannerCarousel\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useRef", "useEffect", "useCallback", "useState", "Swiper", "SwiperSlide", "Navigation", "Pagination", "Autoplay", "ScrollLoadVideo", "cn", "Button", "Heading", "Text", "ChevronLeft", "ChevronRight", "HeroBannerSlide", "data", "_isActive", "videoRef", "onPrimaryClick", "onSecondaryClick", "pcVideo", "padVideo", "mobileVideo", "pcImage", "mobileImage", "isVideoLoop", "title", "subtitle", "primaryButton", "secondaryButton", "theme", "align", "titleSize", "size", "videoSrc", "posterUrl", "e", "HeroBannerCarousel", "className", "_classNames", "_onPrimaryClick", "_onSecondaryClick", "rest", "ref", "items", "carousel", "swiperRef", "_activeIndex", "setActiveIndex", "videoRefs", "showArrowControls", "showDots", "autoplaySeconds", "swiperModules", "autoplayConfig", "vRef", "i", "handleSlideChange", "swiper", "newIndex", "incoming", "s", "_index", "slideData", "index", "isActive", "HeroBannerCarousel_default"]
|
|
7
7
|
}
|
|
@@ -33,6 +33,10 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
|
|
|
33
33
|
/** 定义自组件作为父组件的类型， 详细使用方式请参考radix-ui */
|
|
34
34
|
as?: 'button' | 'a';
|
|
35
35
|
href?: string;
|
|
36
|
+
/** 链接目标，仅在 as="a" 时生效，如 "_blank" 可在新窗口打开 */
|
|
37
|
+
target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
|
|
38
|
+
/** 链接 rel 属性，仅在 as="a" 时生效 */
|
|
39
|
+
rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
|
|
36
40
|
iconClassName?: string;
|
|
37
41
|
/** 自定义loading */
|
|
38
42
|
spinner?: React.ReactNode;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as c,jsx as e,jsxs as u}from"react/jsx-runtime";import*as k from"react";import{VisuallyHidden as w}from"@radix-ui/react-visually-hidden";import{cva as p}from"class-variance-authority";import L from"../icons/spinner.js";import{cn as B}from"../helpers/index.js";const V={sm:{width:"16",height:"16"},base:{width:"18",height:"18"},lg:{width:"20",height:"20"}},H=({size:d="base",...t})=>{const{width:a,height:n}=V[d];return e("svg",{width:a,height:n,viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:e("path",{d:"M7.5 5L12.5 10L7.5 15",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})})},M=p("rounded-btn inline-flex cursor-pointer items-center justify-center text-sm font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none",{variants:{variant:{primary:"bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active hover:text-btn-primary-active-foreground hover:bg-gradient-brand border-none ",secondary:"bg-btn-secondary outline-btn-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border-solid outline outline-[1.6px] outline-offset-[-1.6px]",link:"text-info-primary hover:text-btn-primary-active border-none",ghost:"text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground"},size:{sm:"px-3 py-2 text-[12px] leading-tight",base:"px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",lg:"lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",icon:"size-10 rounded-full leading-tight"},hoverEffect:{none:"",slide:""},state:{default:"",disabled:"",loading:""}},compoundVariants:[{variant:"primary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"secondary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"primary",state:"loading",class:"bg-btn-primary-active disabled:border-btn-primary-disabled-border"},{variant:"secondary",state:"loading",class:"bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled"},{variant:"primary",state:"disabled",class:"disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled"},{variant:"secondary",state:"disabled",class:"disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border disabled:outline-btn-secondary-disabled-border"},{variant:"link",state:"disabled",class:"disabled:text-info-quaternary"}],defaultVariants:{variant:"primary",size:"lg",hoverEffect:"none",state:"default"}}),A=p("",{variants:{variant:{primary:"stroke-btn-primary-foreground",secondary:"stroke-btn-secondary-foreground",link:"stroke-primary",ghost:"stroke-primary"}},defaultVariants:{variant:"primary"}}),f=k.forwardRef(({asChild:d=!1,as:t="button",href:a,target:n,rel:g,size:r="lg",children:o,variant:i,hoverEffect:y="none",className:m,disabled:b=!1,loading:s=!1,spinner:l,iconClassName:v,...h},x)=>e(t,{disabled:b||s,className:B(M({variant:i,size:r,hoverEffect:y,state:s?"loading":b?"disabled":"default"}),m),ref:x,...t==="a"?{href:a,target:n,rel:g}:{},...h,children:s?u(c,{children:[e("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:o}),e("span",{className:"absolute",children:l||e(L,{className:A({variant:i})})}),e(w,{children:o})]}):u(c,{children:[o,i==="link"&&r&&r!=="icon"&&e(H,{className:v,size:r})]})}));f.displayName="Button";var I=f;export{I as default,V as sizeMap};
|
|
2
2
|
//# sourceMappingURL=button.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/button.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\nexport const sizeMap = {\n sm: {\n width: '16',\n height: '16',\n },\n base: {\n width: '18',\n height: '18',\n },\n lg: {\n width: '20',\n height: '20',\n },\n}\nconst LinkButtonAppendIcon = ({ size = 'base', ...rest }: { size: 'base' | 'lg' | 'sm'; className?: string }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...rest}>\n <path\n d=\"M7.5 5L12.5 10L7.5 15\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\n/**\n * Button Variants\n */\n// eslint-disable-next-line tailwindcss/enforces-negative-arbitrary-values\nconst buttonVariants = cva(\n 'rounded-btn inline-flex cursor-pointer items-center justify-center text-sm font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none',\n {\n variants: {\n variant: {\n primary:\n 'bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active hover:text-btn-primary-active-foreground hover:bg-gradient-brand border-none ',\n secondary:\n 'bg-btn-secondary outline-btn-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border-solid outline outline-[1.6px] outline-offset-[-1.6px]',\n link: 'text-info-primary hover:text-btn-primary-active border-none',\n ghost: 'text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground',\n },\n size: {\n sm: 'px-3 py-2 text-[12px] leading-tight',\n base: 'px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n lg: 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n icon: 'size-10 rounded-full leading-tight',\n },\n /** hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C,\u9700\u8981\u6CE8\u610F\u4E0D\u540Cvariant \u4E0B\u7684\u6548\u679C */\n hoverEffect: {\n none: '',\n slide: '',\n },\n state: {\n default: '',\n disabled: '',\n loading: '',\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'secondary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'primary',\n state: 'loading',\n class: 'bg-btn-primary-active disabled:border-btn-primary-disabled-border',\n },\n {\n variant: 'secondary',\n state: 'loading',\n class:\n 'bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'primary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'secondary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border disabled:outline-btn-secondary-disabled-border',\n },\n {\n variant: 'link',\n state: 'disabled',\n class: 'disabled:text-info-quaternary',\n },\n ],\n defaultVariants: {\n variant: 'primary',\n size: 'lg',\n hoverEffect: 'none',\n state: 'default',\n },\n }\n)\n\nconst loadingSvgVariants = cva('', {\n variants: {\n variant: {\n primary: 'stroke-btn-primary-foreground',\n secondary: 'stroke-btn-secondary-foreground',\n link: 'stroke-primary',\n ghost: 'stroke-primary',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n})\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001 */\n loading?: boolean\n /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001 */\n disabled?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui (\u5DF2\u4F5C\u5E9F\u8BF7\u52FF\u4F7F\u7528) */\n asChild?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n as?: 'button' | 'a'\n href?: string\n iconClassName?: string\n /** \u81EA\u5B9A\u4E49loading */\n spinner?: React.ReactNode\n}\n\n/**\n * Button - \u6309\u94AE\n *\n * @description \u53EF\u70B9\u51FB\u7684\u4EA4\u4E92\u5F0F\u6309\u94AE\u7EC4\u4EF6\uFF0C\u652F\u6301\u591A\u79CD\u6837\u5F0F\u3001\u5927\u5C0F\u3001\u72B6\u6001\u548C\u52A0\u8F7D\u6548\u679C\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n // eslint-disable-next-line\n asChild = false,\n as = 'button',\n href,\n size = 'lg',\n children,\n variant,\n hoverEffect = 'none',\n className,\n disabled = false,\n loading = false,\n spinner,\n iconClassName,\n ...props\n }: ButtonProps,\n ref\n ) => {\n const Comp = as\n const isInactive = disabled || loading\n const state = loading ? 'loading' : disabled ? 'disabled' : 'default'\n\n return (\n <Comp\n disabled={isInactive}\n className={cn(buttonVariants({ variant, size, hoverEffect, state }), className)}\n ref={ref as any}\n {...(as === 'a' ? { href } : {})}\n {...(props as any)}\n >\n {loading ? (\n <>\n <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n {children}\n </span>\n <span className=\"absolute\">\n {spinner ? (\n spinner\n ) : (\n <Spinner\n className={loadingSvgVariants({\n variant,\n })}\n />\n )}\n </span>\n <VisuallyHidden>{children}</VisuallyHidden>\n </>\n ) : (\n <>\n {children}\n {variant === 'link' && size && size !== 'icon' && (\n <LinkButtonAppendIcon className={iconClassName} size={size} />\n )}\n </>\n )}\n </Comp>\n )\n }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
|
|
5
|
-
"mappings": "aA0BM,
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "React", "VisuallyHidden", "cva", "Spinner", "cn", "sizeMap", "LinkButtonAppendIcon", "size", "rest", "width", "height", "buttonVariants", "loadingSvgVariants", "Button", "asChild", "as", "href", "children", "variant", "hoverEffect", "className", "disabled", "loading", "spinner", "iconClassName", "props", "ref", "button_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\nexport const sizeMap = {\n sm: {\n width: '16',\n height: '16',\n },\n base: {\n width: '18',\n height: '18',\n },\n lg: {\n width: '20',\n height: '20',\n },\n}\nconst LinkButtonAppendIcon = ({ size = 'base', ...rest }: { size: 'base' | 'lg' | 'sm'; className?: string }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...rest}>\n <path\n d=\"M7.5 5L12.5 10L7.5 15\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\n/**\n * Button Variants\n */\n// eslint-disable-next-line tailwindcss/enforces-negative-arbitrary-values\nconst buttonVariants = cva(\n 'rounded-btn inline-flex cursor-pointer items-center justify-center text-sm font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none',\n {\n variants: {\n variant: {\n primary:\n 'bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active hover:text-btn-primary-active-foreground hover:bg-gradient-brand border-none ',\n secondary:\n 'bg-btn-secondary outline-btn-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border-solid outline outline-[1.6px] outline-offset-[-1.6px]',\n link: 'text-info-primary hover:text-btn-primary-active border-none',\n ghost: 'text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground',\n },\n size: {\n sm: 'px-3 py-2 text-[12px] leading-tight',\n base: 'px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n lg: 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n icon: 'size-10 rounded-full leading-tight',\n },\n /** hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C,\u9700\u8981\u6CE8\u610F\u4E0D\u540Cvariant \u4E0B\u7684\u6548\u679C */\n hoverEffect: {\n none: '',\n slide: '',\n },\n state: {\n default: '',\n disabled: '',\n loading: '',\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'secondary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'primary',\n state: 'loading',\n class: 'bg-btn-primary-active disabled:border-btn-primary-disabled-border',\n },\n {\n variant: 'secondary',\n state: 'loading',\n class:\n 'bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'primary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'secondary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border disabled:outline-btn-secondary-disabled-border',\n },\n {\n variant: 'link',\n state: 'disabled',\n class: 'disabled:text-info-quaternary',\n },\n ],\n defaultVariants: {\n variant: 'primary',\n size: 'lg',\n hoverEffect: 'none',\n state: 'default',\n },\n }\n)\n\nconst loadingSvgVariants = cva('', {\n variants: {\n variant: {\n primary: 'stroke-btn-primary-foreground',\n secondary: 'stroke-btn-secondary-foreground',\n link: 'stroke-primary',\n ghost: 'stroke-primary',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n})\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001 */\n loading?: boolean\n /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001 */\n disabled?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui (\u5DF2\u4F5C\u5E9F\u8BF7\u52FF\u4F7F\u7528) */\n asChild?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n as?: 'button' | 'a'\n href?: string\n /** \u94FE\u63A5\u76EE\u6807\uFF0C\u4EC5\u5728 as=\"a\" \u65F6\u751F\u6548\uFF0C\u5982 \"_blank\" \u53EF\u5728\u65B0\u7A97\u53E3\u6253\u5F00 */\n target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target']\n /** \u94FE\u63A5 rel \u5C5E\u6027\uFF0C\u4EC5\u5728 as=\"a\" \u65F6\u751F\u6548 */\n rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel']\n iconClassName?: string\n /** \u81EA\u5B9A\u4E49loading */\n spinner?: React.ReactNode\n}\n\n/**\n * Button - \u6309\u94AE\n *\n * @description \u53EF\u70B9\u51FB\u7684\u4EA4\u4E92\u5F0F\u6309\u94AE\u7EC4\u4EF6\uFF0C\u652F\u6301\u591A\u79CD\u6837\u5F0F\u3001\u5927\u5C0F\u3001\u72B6\u6001\u548C\u52A0\u8F7D\u6548\u679C\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n // eslint-disable-next-line\n asChild = false,\n as = 'button',\n href,\n target,\n rel,\n size = 'lg',\n children,\n variant,\n hoverEffect = 'none',\n className,\n disabled = false,\n loading = false,\n spinner,\n iconClassName,\n ...props\n }: ButtonProps,\n ref\n ) => {\n const Comp = as\n const isInactive = disabled || loading\n const state = loading ? 'loading' : disabled ? 'disabled' : 'default'\n\n return (\n <Comp\n disabled={isInactive}\n className={cn(buttonVariants({ variant, size, hoverEffect, state }), className)}\n ref={ref as any}\n {...(as === 'a' ? { href, target, rel } : {})}\n {...(props as any)}\n >\n {loading ? (\n <>\n <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n {children}\n </span>\n <span className=\"absolute\">\n {spinner ? (\n spinner\n ) : (\n <Spinner\n className={loadingSvgVariants({\n variant,\n })}\n />\n )}\n </span>\n <VisuallyHidden>{children}</VisuallyHidden>\n </>\n ) : (\n <>\n {children}\n {variant === 'link' && size && size !== 'icon' && (\n <LinkButtonAppendIcon className={iconClassName} size={size} />\n )}\n </>\n )}\n </Comp>\n )\n }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "React", "VisuallyHidden", "cva", "Spinner", "cn", "sizeMap", "LinkButtonAppendIcon", "size", "rest", "width", "height", "buttonVariants", "loadingSvgVariants", "Button", "asChild", "as", "href", "target", "rel", "children", "variant", "hoverEffect", "className", "disabled", "loading", "spinner", "iconClassName", "props", "ref", "button_default"]
|
|
7
7
|
}
|