@anker-in/headless-ui 0.0.32 → 0.0.34
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/AccordionCards/index.d.ts +3 -6
- package/dist/cjs/biz-components/AccordionCards/index.js +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/cjs/biz-components/Category/SwiperCategory.js +1 -1
- package/dist/cjs/biz-components/Category/SwiperCategory.js.map +2 -2
- package/dist/cjs/biz-components/Category/index.d.ts +2 -1
- package/dist/cjs/biz-components/Category/index.js +1 -1
- package/dist/cjs/biz-components/Category/index.js.map +3 -3
- package/dist/cjs/biz-components/Evaluate/index.d.ts +2 -3
- package/dist/cjs/biz-components/Evaluate/index.js +1 -1
- package/dist/cjs/biz-components/Evaluate/index.js.map +2 -2
- package/dist/cjs/biz-components/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +2 -2
- package/dist/cjs/biz-components/GraphicAttractionBlock/index.js +1 -1
- package/dist/cjs/biz-components/GraphicAttractionBlock/index.js.map +2 -2
- 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/MediaPlayerMulti/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerMulti/types.d.ts +1 -0
- package/dist/cjs/biz-components/MediaPlayerMulti/types.js.map +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/index.d.ts +3 -0
- package/dist/cjs/biz-components/ShelfDisplay/index.js +5 -5
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/cjs/biz-components/Slogan/index.js +1 -1
- package/dist/cjs/biz-components/Slogan/index.js.map +2 -2
- package/dist/cjs/biz-components/Spacer/index.js +1 -1
- package/dist/cjs/biz-components/Spacer/index.js.map +2 -2
- package/dist/cjs/cpn-components/CpnCountDown/index.js +1 -1
- package/dist/cjs/cpn-components/CpnCountDown/index.js.map +2 -2
- package/dist/cjs/cpn-components/CpnProductCard/index.js +1 -1
- package/dist/cjs/cpn-components/CpnProductCard/index.js.map +2 -2
- package/dist/cjs/cpn-components/CpnTitle/index.js +1 -1
- package/dist/cjs/cpn-components/CpnTitle/index.js.map +2 -2
- package/dist/cjs/stories/accordionCards.stories.d.ts +3 -6
- package/dist/cjs/stories/accordionCards.stories.js +1 -1
- package/dist/cjs/stories/accordionCards.stories.js.map +3 -3
- package/dist/cjs/stories/category.stories.d.ts +1 -0
- package/dist/cjs/stories/category.stories.js +1 -1
- package/dist/cjs/stories/category.stories.js.map +3 -3
- package/dist/esm/biz-components/AccordionCards/index.d.ts +3 -6
- package/dist/esm/biz-components/AccordionCards/index.js +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/esm/biz-components/Category/SwiperCategory.js +1 -1
- package/dist/esm/biz-components/Category/SwiperCategory.js.map +2 -2
- package/dist/esm/biz-components/Category/index.d.ts +2 -1
- package/dist/esm/biz-components/Category/index.js +1 -1
- package/dist/esm/biz-components/Category/index.js.map +3 -3
- package/dist/esm/biz-components/Evaluate/index.d.ts +2 -3
- package/dist/esm/biz-components/Evaluate/index.js +1 -1
- package/dist/esm/biz-components/Evaluate/index.js.map +2 -2
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +2 -2
- package/dist/esm/biz-components/GraphicAttractionBlock/index.js +1 -1
- package/dist/esm/biz-components/GraphicAttractionBlock/index.js.map +2 -2
- 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/MediaPlayerMulti/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerMulti/types.d.ts +1 -0
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/index.d.ts +3 -0
- package/dist/esm/biz-components/ShelfDisplay/index.js +5 -5
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/esm/biz-components/Slogan/index.js +1 -1
- package/dist/esm/biz-components/Slogan/index.js.map +2 -2
- package/dist/esm/biz-components/Spacer/index.js +1 -1
- package/dist/esm/biz-components/Spacer/index.js.map +2 -2
- package/dist/esm/cpn-components/CpnCountDown/index.js +1 -1
- package/dist/esm/cpn-components/CpnCountDown/index.js.map +2 -2
- package/dist/esm/cpn-components/CpnProductCard/index.js +1 -1
- package/dist/esm/cpn-components/CpnProductCard/index.js.map +2 -2
- package/dist/esm/cpn-components/CpnTitle/index.js +1 -1
- package/dist/esm/cpn-components/CpnTitle/index.js.map +2 -2
- package/dist/esm/stories/accordionCards.stories.d.ts +3 -6
- package/dist/esm/stories/accordionCards.stories.js +1 -1
- package/dist/esm/stories/accordionCards.stories.js.map +3 -3
- package/dist/esm/stories/category.stories.d.ts +1 -0
- package/dist/esm/stories/category.stories.js +1 -1
- package/dist/esm/stories/category.stories.js.map +3 -3
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Slogan/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n const result = []\n for (let i = 0; i < array.length; i += size) {\n result.push(array.slice(i, i + size))\n }\n return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n const { title, features = [], featureChunkSize = 3 } = data\n const [groupIndex, setGroupIndex] = React.useState(0)\n const [isTransitioning, setIsTransitioning] = React.useState(true)\n const innerRef = useRef<HTMLDivElement>(null)\n const featuresGroups = chunkArray(features, featureChunkSize)\n const totalGroups = featuresGroups.length\n const needCarousel = features.length > featureChunkSize\n const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n const groupHeight = 40\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n })\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n React.useEffect(() => {\n if (!needCarousel) return\n const timer = setInterval(() => {\n setGroupIndex(i => i + 1)\n setIsTransitioning(true)\n }, 3000)\n return () => clearInterval(timer)\n }, [totalGroups, needCarousel])\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n React.useEffect(() => {\n if (!needCarousel) return\n if (groupIndex === totalGroups) {\n const handle = setTimeout(() => {\n setIsTransitioning(false)\n setGroupIndex(0)\n }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n return () => clearTimeout(handle)\n } else {\n setIsTransitioning(true)\n }\n }, [groupIndex, totalGroups, needCarousel])\n\n // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n const titleRef = useRef<HTMLHeadingElement>(null)\n const featuresRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger, SplitText)\n if (!titleRef.current) return\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const height = titleRef.current?.clientHeight || 100\n\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5}px bottom-=4%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n },\n })\n\n if (features && features.length > 0) {\n ScrollTrigger.create({\n trigger: featuresRef.current,\n start: `bottom+=${height * 2}px bottom-=6%`,\n end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n onUpdate: (self: any) => {\n gsap.set(featuresRef.current, { opacity: self.progress })\n },\n })\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={innerRef}\n className={cn(\n 'slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n className\n )}\n >\n <Heading\n ref={titleRef}\n as=\"h2\"\n size={2}\n weight={'bold'}\n align={'left'}\n className={cn(\n 'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none'\n )}\n html={title}\n />\n {features && features.length > 0 && (\n <div className={cn('relative w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n <div\n className={cn([\n 'flex flex-col',\n isTransitioning ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]' : '!transition-none',\n ])}\n style={{\n transform: `translateY(-${groupIndex * groupHeight}px)`,\n }}\n >\n {displayGroups.map((group, idx) => (\n <div\n className={cn(\n 'flex w-full flex-row items-stretch gap-3 overflow-hidden',\n `tablet:h-[${groupHeight}px]`\n )}\n key={idx}\n >\n {group.map((feature, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]\" />}\n <Text\n size={3}\n align=\"left\"\n as=\"p\"\n className=\"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\n html={feature.title}\n />\n </React.Fragment>\n ))}\n </div>\n ))}\n </div>\n </div>\n )}\n </div>\n )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n const result = []\n for (let i = 0; i < array.length; i += size) {\n result.push(array.slice(i, i + size))\n }\n return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n const { title, features = [], featureChunkSize = 3 } = data\n const [groupIndex, setGroupIndex] = React.useState(0)\n const [isTransitioning, setIsTransitioning] = React.useState(true)\n const innerRef = useRef<HTMLDivElement>(null)\n const featuresGroups = chunkArray(features, featureChunkSize)\n const totalGroups = featuresGroups.length\n const needCarousel = features.length > featureChunkSize\n const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n const groupHeight = 40\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n })\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n React.useEffect(() => {\n if (!needCarousel) return\n const timer = setInterval(() => {\n setGroupIndex(i => i + 1)\n setIsTransitioning(true)\n }, 3000)\n return () => clearInterval(timer)\n }, [totalGroups, needCarousel])\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n React.useEffect(() => {\n if (!needCarousel) return\n if (groupIndex === totalGroups) {\n const handle = setTimeout(() => {\n setIsTransitioning(false)\n setGroupIndex(0)\n }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n return () => clearTimeout(handle)\n } else {\n setIsTransitioning(true)\n }\n }, [groupIndex, totalGroups, needCarousel])\n\n // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n const titleRef = useRef<HTMLHeadingElement>(null)\n const featuresRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger, SplitText)\n if (!titleRef.current) return\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const height = titleRef.current?.clientHeight || 100\n\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5}px bottom-=4%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n },\n })\n\n if (features && features.length > 0) {\n ScrollTrigger.create({\n trigger: featuresRef.current,\n start: `bottom+=${height * 2}px bottom-=6%`,\n end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n onUpdate: (self: any) => {\n gsap.set(featuresRef.current, { opacity: self.progress })\n },\n })\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={innerRef}\n className={cn(\n 'slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n className\n )}\n >\n <Heading\n ref={titleRef}\n as=\"h2\"\n size={2}\n weight={'bold'}\n align={'left'}\n className={cn(\n 'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none'\n )}\n html={title}\n />\n {features && features.length > 0 && (\n <div className={cn('relative w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n <div\n className={cn([\n 'flex flex-col',\n isTransitioning ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]' : '!transition-none',\n ])}\n style={{\n transform: `translateY(-${groupIndex * groupHeight}px)`,\n }}\n >\n {displayGroups.map((group, idx) => (\n <div\n className={cn(\n 'laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden',\n `tablet:h-[${groupHeight}px]`\n )}\n key={idx}\n >\n {group.map((feature, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]\" />}\n <Text\n size={3}\n align=\"left\"\n as=\"p\"\n className=\"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\n html={feature.title}\n />\n </React.Fragment>\n ))}\n </div>\n ))}\n </div>\n </div>\n )}\n </div>\n )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Slogan_exports", "__export", "componentName", "componentType", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_useExposure", "chunkArray", "array", "size", "result", "i", "Slogan", "React", "data", "className", "ref", "title", "features", "featureChunkSize", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "innerRef", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "t", "group", "idx", "feature", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var m=Object.create;var o=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var y=(e,p)=>{for(var t in p)o(e,t,{get:p[t],enumerable:!0})},s=(e,p,t,a)=>{if(p&&typeof p=="object"||typeof p=="function")for(let r of n(p))!u.call(e,r)&&r!==t&&o(e,r,{get:()=>p[r],enumerable:!(a=h(p,r))||a.enumerable});return e};var v=(e,p,t)=>(t=e!=null?m(S(e)):{},s(p||!e||!e.__esModule?o(t,"default",{value:e,enumerable:!0}):t,e)),x=e=>s(o({},"__esModule",{value:!0}),e);var w={};y(w,{default:()=>k});module.exports=x(w);var f=require("react/jsx-runtime"),i=v(require("react")),l=require("../../helpers/utils.js"),d=require("../../shared/Styles.js");const c=i.default.forwardRef(({className:e,data:p})=>{const{space:t="default"}=p;return(0,f.jsx)("div",{className:(0,l.cn)("ipc_spacer",t==="default"&&"laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16",t==="fixed"&&"h-16",e)})});c.displayName="Spacer";var k=(0,d.withStyles)(c);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Spacer/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SpacerProps } from './types.js'\n\nconst Spacer = React.forwardRef<HTMLDivElement, SpacerProps>(({ className, data }) => {\n const { space = 'default' } = data\n return (\n <div\n className={cn(\n 'ipc_spacer',\n space === 'default' && 'laptop:h-16 lg-desktop:h-[128px] tablet:h-
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GASI,IAAAI,EAAA,6BARJC,EAAkB,oBAClBC,EAAmB,kCACnBC,EAA2B,kCAG3B,MAAMC,EAAS,EAAAC,QAAM,WAAwC,CAAC,CAAE,UAAAC,EAAW,KAAAC,CAAK,IAAM,CACpF,KAAM,CAAE,MAAAC,EAAQ,SAAU,EAAID,EAC9B,SACE,OAAC,OACC,aAAW,MACT,aACAC,IAAU,WAAa,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SpacerProps } from './types.js'\n\nconst Spacer = React.forwardRef<HTMLDivElement, SpacerProps>(({ className, data }) => {\n const { space = 'default' } = data\n return (\n <div\n className={cn(\n 'ipc_spacer',\n space === 'default' && 'laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16',\n space === 'fixed' && 'h-16',\n className\n )}\n ></div>\n )\n})\n\nSpacer.displayName = 'Spacer'\n\nexport default withStyles(Spacer)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GASI,IAAAI,EAAA,6BARJC,EAAkB,oBAClBC,EAAmB,kCACnBC,EAA2B,kCAG3B,MAAMC,EAAS,EAAAC,QAAM,WAAwC,CAAC,CAAE,UAAAC,EAAW,KAAAC,CAAK,IAAM,CACpF,KAAM,CAAE,MAAAC,EAAQ,SAAU,EAAID,EAC9B,SACE,OAAC,OACC,aAAW,MACT,aACAC,IAAU,WAAa,qEACvBA,IAAU,SAAW,OACrBF,CACF,EACD,CAEL,CAAC,EAEDF,EAAO,YAAc,SAErB,IAAON,KAAQ,cAAWM,CAAM",
|
|
6
6
|
"names": ["Spacer_exports", "__export", "Spacer_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "Spacer", "React", "className", "data", "space"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var v=Object.create;var l=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var N=(t,c)=>{for(var n in c)l(t,n,{get:c[n],enumerable:!0})},u=(t,c,n,e)=>{if(c&&typeof c=="object"||typeof c=="function")for(let p of w(c))!g.call(t,p)&&p!==n&&l(t,p,{get:()=>c[p],enumerable:!(e=b(c,p))||e.enumerable});return t};var h=(t,c,n)=>(n=t!=null?v(y(t)):{},u(c||!t||!t.__esModule?l(n,"default",{value:t,enumerable:!0}):n,t)),z=t=>u(l({},"__esModule",{value:!0}),t);var D={};N(D,{default:()=>P});module.exports=z(D);var o=require("react/jsx-runtime"),s=require("../../helpers/utils.js"),x=require("../../components/index.js"),f=h(require("../../hooks/useCountDown.js"));const
|
|
1
|
+
"use strict";var v=Object.create;var l=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var N=(t,c)=>{for(var n in c)l(t,n,{get:c[n],enumerable:!0})},u=(t,c,n,e)=>{if(c&&typeof c=="object"||typeof c=="function")for(let p of w(c))!g.call(t,p)&&p!==n&&l(t,p,{get:()=>c[p],enumerable:!(e=b(c,p))||e.enumerable});return t};var h=(t,c,n)=>(n=t!=null?v(y(t)):{},u(c||!t||!t.__esModule?l(n,"default",{value:t,enumerable:!0}):n,t)),z=t=>u(l({},"__esModule",{value:!0}),t);var D={};N(D,{default:()=>P});module.exports=z(D);var o=require("react/jsx-runtime"),s=require("../../helpers/utils.js"),x=require("../../components/index.js"),f=h(require("../../hooks/useCountDown.js"));const a=({time:t,copy:c,image:n,cns:e})=>(0,o.jsx)(o.Fragment,{children:t?(0,o.jsxs)("div",{className:(0,s.cn)("cpn-countdown-item laptop:size-[54px] tablet:size-[3.2vw] relative size-[34px] rounded bg-black",e?.item),children:[n&&(0,o.jsx)(x.Picture,{className:(0,s.cn)("cpn-countdown-picture absolute left-0 top-0 size-full",e?.picture),imgClassName:(0,s.cn)("cpn-countdown-image h-full object-cover",e?.image),source:`${n}`,alt:""}),(0,o.jsx)("div",{className:(0,s.cn)("cpn-countdown-time tablet:text-[1.25vw] laptop:text-[24px] absolute left-0 top-0 flex size-full items-center justify-center text-[16px] font-[600] text-white",e?.time),children:t}),c&&(0,o.jsx)("div",{className:(0,s.cn)("cpn-countdown-copy tablet:text-[12px] laptop:text-[14px] tablet:-bottom-6 absolute -bottom-4 left-1/2 -translate-x-1/2 text-[9px] font-medium",e?.copy),children:c})]}):(0,o.jsx)("div",{className:(0,s.cn)("cpn-countdown-colonBox relative flex flex-col gap-1",e?.colonBox),children:Array.from({length:2}).map((p,i)=>(0,o.jsx)("span",{className:(0,s.cn)("cpn-countdown-colon size-1 rounded-full bg-black",e?.colon)},i))})}),C=t=>{const{endTime:c,copy:n,cns:e,expiredHidden:p}=t,{days:i,hours:m,minutes:r,seconds:d}=(0,f.default)({endTime:c});return(0,o.jsxs)("div",{className:(0,s.cn)("cpn-countdown-container laptop:gap-4 relative flex items-center justify-center gap-2",{"mb-5":n?.days,"!hidden":p&&i==="00"&&m==="00"&&r==="00"&&d==="00"},e?.container),children:[(0,o.jsx)(a,{time:i,copy:n?.days,cns:e}),(0,o.jsx)(a,{cns:e}),(0,o.jsx)(a,{time:m,copy:n?.hours,cns:e}),(0,o.jsx)(a,{cns:e}),(0,o.jsx)(a,{time:r,copy:n?.minutes,cns:e}),(0,o.jsx)(a,{cns:e}),(0,o.jsx)(a,{time:d,copy:n?.seconds,cns:e})]})};var P=C;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/cpn-components/CpnCountDown/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { CountDownProps, ItemProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Picture } from '../../components/index.js'\nimport useCountDown from '../../hooks/useCountDown.js'\n\nconst Item = ({ time, copy, image, cns }: ItemProps) => (\n <>\n {time ? (\n <div\n className={cn(\n 'cpn-countdown-item laptop:size-[54px] tablet:size-[3.2vw] relative size-[34px] rounded bg-black',\n cns?.item\n )}\n >\n {image && (\n <Picture\n className={cn('cpn-countdown-picture absolute left-0 top-0 size-full', cns?.picture)}\n imgClassName={cn('cpn-countdown-image h-full object-cover', cns?.image)}\n source={`${image}`}\n />\n )}\n <div\n className={cn(\n 'cpn-countdown-time tablet:text-[1.25vw] laptop:text-[24px] absolute left-0 top-0 flex size-full items-center justify-center text-[16px] font-[600] text-white',\n cns?.time\n )}\n >\n {time}\n </div>\n {copy && (\n <div\n className={cn(\n 'cpn-countdown-copy tablet:text-[12px] laptop:text-[14px] tablet:-bottom-6 absolute -bottom-4 left-1/2 -translate-x-1/2 text-[9px] font-medium',\n cns?.copy\n )}\n >\n {copy}\n </div>\n )}\n </div>\n ) : (\n <div className={cn('cpn-countdown-colonBox relative flex flex-col gap-1', cns?.colonBox)}>\n {Array.from({ length: 2 }).map((_, index) => (\n <span key={index} className={cn('cpn-countdown-colon size-1 rounded-full bg-black', cns?.colon)}></span>\n ))}\n </div>\n )}\n </>\n)\n\nconst CpnCountDown = (props: CountDownProps) => {\n const { endTime, copy, cns, expiredHidden } = props\n\n const { days, hours, minutes, seconds } = useCountDown({ endTime })\n\n return (\n <div\n className={cn(\n 'cpn-countdown-container laptop:gap-4 relative flex items-center justify-center gap-2',\n {\n 'mb-5': copy?.days,\n '!hidden': expiredHidden && days === '00' && hours === '00' && minutes === '00' && seconds === '00',\n },\n cns?.container\n )}\n >\n <Item time={days} copy={copy?.days} cns={cns} />\n <Item cns={cns} />\n <Item time={hours} copy={copy?.hours} cns={cns} />\n <Item cns={cns} />\n <Item time={minutes} copy={copy?.minutes} cns={cns} />\n <Item cns={cns} />\n <Item time={seconds} copy={copy?.seconds} cns={cns} />\n </div>\n )\n}\n\nexport default CpnCountDown\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAME,IAAAI,EAAA,6BALFC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAAyB,0CAEzB,MAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,KAAAC,EAAM,MAAAC,EAAO,IAAAC,CAAI,OACrC,mBACG,SAAAH,KACC,QAAC,OACC,aAAW,MACT,kGACAG,GAAK,IACP,EAEC,UAAAD,MACC,OAAC,WACC,aAAW,MAAG,wDAAyDC,GAAK,OAAO,EACnF,gBAAc,MAAG,0CAA2CA,GAAK,KAAK,EACtE,OAAQ,GAAGD,CAAK,
|
|
4
|
+
"sourcesContent": ["import type { CountDownProps, ItemProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Picture } from '../../components/index.js'\nimport useCountDown from '../../hooks/useCountDown.js'\n\nconst Item = ({ time, copy, image, cns }: ItemProps) => (\n <>\n {time ? (\n <div\n className={cn(\n 'cpn-countdown-item laptop:size-[54px] tablet:size-[3.2vw] relative size-[34px] rounded bg-black',\n cns?.item\n )}\n >\n {image && (\n <Picture\n className={cn('cpn-countdown-picture absolute left-0 top-0 size-full', cns?.picture)}\n imgClassName={cn('cpn-countdown-image h-full object-cover', cns?.image)}\n source={`${image}`}\n alt=\"\"\n />\n )}\n <div\n className={cn(\n 'cpn-countdown-time tablet:text-[1.25vw] laptop:text-[24px] absolute left-0 top-0 flex size-full items-center justify-center text-[16px] font-[600] text-white',\n cns?.time\n )}\n >\n {time}\n </div>\n {copy && (\n <div\n className={cn(\n 'cpn-countdown-copy tablet:text-[12px] laptop:text-[14px] tablet:-bottom-6 absolute -bottom-4 left-1/2 -translate-x-1/2 text-[9px] font-medium',\n cns?.copy\n )}\n >\n {copy}\n </div>\n )}\n </div>\n ) : (\n <div className={cn('cpn-countdown-colonBox relative flex flex-col gap-1', cns?.colonBox)}>\n {Array.from({ length: 2 }).map((_, index) => (\n <span key={index} className={cn('cpn-countdown-colon size-1 rounded-full bg-black', cns?.colon)}></span>\n ))}\n </div>\n )}\n </>\n)\n\nconst CpnCountDown = (props: CountDownProps) => {\n const { endTime, copy, cns, expiredHidden } = props\n\n const { days, hours, minutes, seconds } = useCountDown({ endTime })\n\n return (\n <div\n className={cn(\n 'cpn-countdown-container laptop:gap-4 relative flex items-center justify-center gap-2',\n {\n 'mb-5': copy?.days,\n '!hidden': expiredHidden && days === '00' && hours === '00' && minutes === '00' && seconds === '00',\n },\n cns?.container\n )}\n >\n <Item time={days} copy={copy?.days} cns={cns} />\n <Item cns={cns} />\n <Item time={hours} copy={copy?.hours} cns={cns} />\n <Item cns={cns} />\n <Item time={minutes} copy={copy?.minutes} cns={cns} />\n <Item cns={cns} />\n <Item time={seconds} copy={copy?.seconds} cns={cns} />\n </div>\n )\n}\n\nexport default CpnCountDown\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAME,IAAAI,EAAA,6BALFC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAAyB,0CAEzB,MAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,KAAAC,EAAM,MAAAC,EAAO,IAAAC,CAAI,OACrC,mBACG,SAAAH,KACC,QAAC,OACC,aAAW,MACT,kGACAG,GAAK,IACP,EAEC,UAAAD,MACC,OAAC,WACC,aAAW,MAAG,wDAAyDC,GAAK,OAAO,EACnF,gBAAc,MAAG,0CAA2CA,GAAK,KAAK,EACtE,OAAQ,GAAGD,CAAK,GAChB,IAAI,GACN,KAEF,OAAC,OACC,aAAW,MACT,gKACAC,GAAK,IACP,EAEC,SAAAH,EACH,EACCC,MACC,OAAC,OACC,aAAW,MACT,gJACAE,GAAK,IACP,EAEC,SAAAF,EACH,GAEJ,KAEA,OAAC,OAAI,aAAW,MAAG,sDAAuDE,GAAK,QAAQ,EACpF,eAAM,KAAK,CAAE,OAAQ,CAAE,CAAC,EAAE,IAAI,CAACC,EAAGC,OACjC,OAAC,QAAiB,aAAW,MAAG,mDAAoDF,GAAK,KAAK,GAAnFE,CAAsF,CAClG,EACH,EAEJ,EAGIC,EAAgBC,GAA0B,CAC9C,KAAM,CAAE,QAAAC,EAAS,KAAAP,EAAM,IAAAE,EAAK,cAAAM,CAAc,EAAIF,EAExC,CAAE,KAAAG,EAAM,MAAAC,EAAO,QAAAC,EAAS,QAAAC,CAAQ,KAAI,EAAAC,SAAa,CAAE,QAAAN,CAAQ,CAAC,EAElE,SACE,QAAC,OACC,aAAW,MACT,uFACA,CACE,OAAQP,GAAM,KACd,UAAWQ,GAAiBC,IAAS,MAAQC,IAAU,MAAQC,IAAY,MAAQC,IAAY,IACjG,EACAV,GAAK,SACP,EAEA,oBAACJ,EAAA,CAAK,KAAMW,EAAM,KAAMT,GAAM,KAAM,IAAKE,EAAK,KAC9C,OAACJ,EAAA,CAAK,IAAKI,EAAK,KAChB,OAACJ,EAAA,CAAK,KAAMY,EAAO,KAAMV,GAAM,MAAO,IAAKE,EAAK,KAChD,OAACJ,EAAA,CAAK,IAAKI,EAAK,KAChB,OAACJ,EAAA,CAAK,KAAMa,EAAS,KAAMX,GAAM,QAAS,IAAKE,EAAK,KACpD,OAACJ,EAAA,CAAK,IAAKI,EAAK,KAChB,OAACJ,EAAA,CAAK,KAAMc,EAAS,KAAMZ,GAAM,QAAS,IAAKE,EAAK,GACtD,CAEJ,EAEA,IAAOV,EAAQa",
|
|
6
6
|
"names": ["CpnCountDown_exports", "__export", "CpnCountDown_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_components", "import_useCountDown", "Item", "time", "copy", "image", "cns", "_", "index", "CpnCountDown", "props", "endTime", "expiredHidden", "days", "hours", "minutes", "seconds", "useCountDown"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var p=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var u=(a,t)=>{for(var o in t)p(a,o,{get:t[o],enumerable:!0})},v=(a,t,o,e)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of d(t))!x.call(a,r)&&r!==o&&p(a,r,{get:()=>t[r],enumerable:!(e=i(t,r))||e.enumerable});return a};var f=a=>v(p({},"__esModule",{value:!0}),a);var g={};u(g,{default:()=>b});module.exports=f(g);var s=require("react/jsx-runtime"),l=require("../../helpers/utils.js"),c=require("../../components/index.js");const N=a=>{const{content:t,cns:o}=a;return(0,s.jsx)("div",{className:(0,l.cn)("cpn-card-container relative box-border w-[177px] px-2 pb-3 pt-4 text-center",o?.container),children:t?.map((e,r)=>{switch(e.type){case"tag":return(0,s.jsx)(c.Text,{as:"div",html:e.text},r);case"image":return(0,s.jsx)(c.Picture,{source:`${e.image}, ${e.imageMob||e.image} 768`,className:(0,l.cn)("mx-auto h-[100px]"),imgClassName:(0,l.cn)("h-full object-cover")},r);case"title":return(0,s.jsx)(c.Text,{as:"div",html:e.text,className:(0,l.cn)("text-[14px] font-semibold text-[#333]")},r);case"price":return(0,s.jsx)("div",{className:"mt-3",children:(0,s.jsx)(c.Text,{html:`${e.text}`,className:(0,l.cn)("text-[14px] font-semibold text-[#333]")})});case"buttons":return(0,s.jsx)("div",{className:"mt-2 flex flex-col gap-2",children:e.buttons?.map((n,m)=>(0,s.jsx)(c.Button,{variant:n.variant,className:"w-full",onClick:n.onClick,children:n.text},m))})}})})};var b=N;
|
|
1
|
+
"use strict";var p=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var u=(a,t)=>{for(var o in t)p(a,o,{get:t[o],enumerable:!0})},v=(a,t,o,e)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of d(t))!x.call(a,r)&&r!==o&&p(a,r,{get:()=>t[r],enumerable:!(e=i(t,r))||e.enumerable});return a};var f=a=>v(p({},"__esModule",{value:!0}),a);var g={};u(g,{default:()=>b});module.exports=f(g);var s=require("react/jsx-runtime"),l=require("../../helpers/utils.js"),c=require("../../components/index.js");const N=a=>{const{content:t,cns:o}=a;return(0,s.jsx)("div",{className:(0,l.cn)("cpn-card-container relative box-border w-[177px] px-2 pb-3 pt-4 text-center",o?.container),children:t?.map((e,r)=>{switch(e.type){case"tag":return(0,s.jsx)(c.Text,{as:"div",html:e.text},r);case"image":return(0,s.jsx)(c.Picture,{source:`${e.image}, ${e.imageMob||e.image} 768`,className:(0,l.cn)("mx-auto h-[100px]"),alt:"",imgClassName:(0,l.cn)("h-full object-cover")},r);case"title":return(0,s.jsx)(c.Text,{as:"div",html:e.text,className:(0,l.cn)("text-[14px] font-semibold text-[#333]")},r);case"price":return(0,s.jsx)("div",{className:"mt-3",children:(0,s.jsx)(c.Text,{html:`${e.text}`,className:(0,l.cn)("text-[14px] font-semibold text-[#333]")})});case"buttons":return(0,s.jsx)("div",{className:"mt-2 flex flex-col gap-2",children:e.buttons?.map((n,m)=>(0,s.jsx)(c.Button,{variant:n.variant,className:"w-full",onClick:n.onClick,children:n.text},m))})}})})};var b=N;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/cpn-components/CpnProductCard/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { cn } from '../../helpers/utils.js'\nimport type { ProductCardProps } from './types.js'\nimport { Button, Picture, Text } from '../../components/index.js'\n\nconst CpnProductCard = (props: ProductCardProps) => {\n const { content, cns } = props\n\n return (\n <div className={cn('cpn-card-container relative box-border w-[177px] px-2 pb-3 pt-4 text-center', cns?.container)}>\n {content?.map((item, index) => {\n switch (item.type) {\n case 'tag':\n return <Text key={index} as=\"div\" html={item.text} />\n case 'image':\n return (\n <Picture\n key={index}\n source={`${item.image}, ${item.imageMob || item.image} 768`}\n className={cn('mx-auto h-[100px]')}\n imgClassName={cn('h-full object-cover')}\n />\n )\n case 'title':\n return (\n <Text key={index} as=\"div\" html={item.text} className={cn('text-[14px] font-semibold text-[#333]')} />\n )\n case 'price':\n return (\n <div className=\"mt-3\">\n <Text html={`${item.text}`} className={cn('text-[14px] font-semibold text-[#333]')} />\n </div>\n )\n case 'buttons':\n return (\n <div className=\"mt-2 flex flex-col gap-2\">\n {item.buttons?.map((button, index) => (\n <Button key={index} variant={button.variant} className=\"w-full\" onClick={button.onClick}>\n {button.text}\n </Button>\n ))}\n </div>\n )\n }\n })}\n </div>\n )\n}\n\nexport default CpnProductCard\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAYmB,IAAAI,EAAA,6BAZnBC,EAAmB,kCAEnBC,EAAsC,qCAEtC,MAAMC,EAAkBC,GAA4B,CAClD,KAAM,CAAE,QAAAC,EAAS,IAAAC,CAAI,EAAIF,EAEzB,SACE,OAAC,OAAI,aAAW,MAAG,8EAA+EE,GAAK,SAAS,EAC7G,SAAAD,GAAS,IAAI,CAACE,EAAMC,IAAU,CAC7B,OAAQD,EAAK,KAAM,CACjB,IAAK,MACH,SAAO,OAAC,QAAiB,GAAG,MAAM,KAAMA,EAAK,MAA3BC,CAAiC,EACrD,IAAK,QACH,SACE,OAAC,WAEC,OAAQ,GAAGD,EAAK,KAAK,KAAKA,EAAK,UAAYA,EAAK,KAAK,OACrD,aAAW,MAAG,mBAAmB,EACjC,gBAAc,MAAG,qBAAqB,
|
|
4
|
+
"sourcesContent": ["import { cn } from '../../helpers/utils.js'\nimport type { ProductCardProps } from './types.js'\nimport { Button, Picture, Text } from '../../components/index.js'\n\nconst CpnProductCard = (props: ProductCardProps) => {\n const { content, cns } = props\n\n return (\n <div className={cn('cpn-card-container relative box-border w-[177px] px-2 pb-3 pt-4 text-center', cns?.container)}>\n {content?.map((item, index) => {\n switch (item.type) {\n case 'tag':\n return <Text key={index} as=\"div\" html={item.text} />\n case 'image':\n return (\n <Picture\n key={index}\n source={`${item.image}, ${item.imageMob || item.image} 768`}\n className={cn('mx-auto h-[100px]')}\n alt={''}\n imgClassName={cn('h-full object-cover')}\n />\n )\n case 'title':\n return (\n <Text key={index} as=\"div\" html={item.text} className={cn('text-[14px] font-semibold text-[#333]')} />\n )\n case 'price':\n return (\n <div className=\"mt-3\">\n <Text html={`${item.text}`} className={cn('text-[14px] font-semibold text-[#333]')} />\n </div>\n )\n case 'buttons':\n return (\n <div className=\"mt-2 flex flex-col gap-2\">\n {item.buttons?.map((button, index) => (\n <Button key={index} variant={button.variant} className=\"w-full\" onClick={button.onClick}>\n {button.text}\n </Button>\n ))}\n </div>\n )\n }\n })}\n </div>\n )\n}\n\nexport default CpnProductCard\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAYmB,IAAAI,EAAA,6BAZnBC,EAAmB,kCAEnBC,EAAsC,qCAEtC,MAAMC,EAAkBC,GAA4B,CAClD,KAAM,CAAE,QAAAC,EAAS,IAAAC,CAAI,EAAIF,EAEzB,SACE,OAAC,OAAI,aAAW,MAAG,8EAA+EE,GAAK,SAAS,EAC7G,SAAAD,GAAS,IAAI,CAACE,EAAMC,IAAU,CAC7B,OAAQD,EAAK,KAAM,CACjB,IAAK,MACH,SAAO,OAAC,QAAiB,GAAG,MAAM,KAAMA,EAAK,MAA3BC,CAAiC,EACrD,IAAK,QACH,SACE,OAAC,WAEC,OAAQ,GAAGD,EAAK,KAAK,KAAKA,EAAK,UAAYA,EAAK,KAAK,OACrD,aAAW,MAAG,mBAAmB,EACjC,IAAK,GACL,gBAAc,MAAG,qBAAqB,GAJjCC,CAKP,EAEJ,IAAK,QACH,SACE,OAAC,QAAiB,GAAG,MAAM,KAAMD,EAAK,KAAM,aAAW,MAAG,uCAAuC,GAAtFC,CAAyF,EAExG,IAAK,QACH,SACE,OAAC,OAAI,UAAU,OACb,mBAAC,QAAK,KAAM,GAAGD,EAAK,IAAI,GAAI,aAAW,MAAG,uCAAuC,EAAG,EACtF,EAEJ,IAAK,UACH,SACE,OAAC,OAAI,UAAU,2BACZ,SAAAA,EAAK,SAAS,IAAI,CAACE,EAAQD,OAC1B,OAAC,UAAmB,QAASC,EAAO,QAAS,UAAU,SAAS,QAASA,EAAO,QAC7E,SAAAA,EAAO,MADGD,CAEb,CACD,EACH,CAEN,CACF,CAAC,EACH,CAEJ,EAEA,IAAOV,EAAQK",
|
|
6
6
|
"names": ["CpnProductCard_exports", "__export", "CpnProductCard_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_components", "CpnProductCard", "props", "content", "cns", "item", "index", "button"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var x=(e,t)=>{for(var o in t)s(e,o,{get:t[o],enumerable:!0})},f=(e,t,o,
|
|
1
|
+
"use strict";var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var x=(e,t)=>{for(var o in t)s(e,o,{get:t[o],enumerable:!0})},f=(e,t,o,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of a(t))!m.call(e,c)&&c!==o&&s(e,c,{get:()=>t[c],enumerable:!(l=p(t,c))||l.enumerable});return e};var u=e=>f(s({},"__esModule",{value:!0}),e);var T={};x(T,{default:()=>N});module.exports=u(T);var i=require("react/jsx-runtime"),r=require("../../helpers/utils.js"),n=require("../../components/index.js");const d=e=>{const{html:t,icon_l:o,icon_r:l,cns:c}=e;return(0,i.jsxs)("div",{className:(0,r.cn)("cpn-title-container flex items-start justify-center gap-5 text-center",c?.container),children:[o&&(0,i.jsx)(n.Picture,{source:o,alt:"",className:(0,r.cn)("cpn-title-icon-l",c?.icon_l)}),(0,i.jsx)(n.Text,{html:t,className:"cpn-title-text laptop:text-[40px] text-[24px] font-bold"}),l&&(0,i.jsx)(n.Picture,{source:l,alt:"",className:(0,r.cn)("cpn-title-icon-r",c?.icon_r)})]})};var N=d;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/cpn-components/CpnTitle/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { TitleProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Picture, Text } from '../../components/index.js'\n\nconst CpnTitle = (props: TitleProps) => {\n const { html, icon_l, icon_r, cns } = props\n\n return (\n <div className={cn('cpn-title-container flex items-start justify-center gap-5 text-center', cns?.container)}>\n {icon_l && <Picture source={icon_l} className={cn('cpn-title-icon-l', cns?.icon_l)} />}\n <Text html={html} className=\"cpn-title-text laptop:text-[40px] text-[24px] font-bold\" />\n {icon_r && <Picture source={icon_r} className={cn('cpn-title-icon-r', cns?.icon_r)} />}\n </div>\n )\n}\n\nexport default CpnTitle\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAQI,IAAAI,EAAA,6BAPJC,EAAmB,kCACnBC,EAA8B,qCAE9B,MAAMC,EAAYC,GAAsB,CACtC,KAAM,CAAE,KAAAC,EAAM,OAAAC,EAAQ,OAAAC,EAAQ,IAAAC,CAAI,EAAIJ,EAEtC,SACE,QAAC,OAAI,aAAW,MAAG,wEAAyEI,GAAK,SAAS,EACvG,UAAAF,MAAU,OAAC,WAAQ,OAAQA,EAAQ,aAAW,MAAG,mBAAoBE,GAAK,MAAM,EAAG,
|
|
4
|
+
"sourcesContent": ["import type { TitleProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Picture, Text } from '../../components/index.js'\n\nconst CpnTitle = (props: TitleProps) => {\n const { html, icon_l, icon_r, cns } = props\n\n return (\n <div className={cn('cpn-title-container flex items-start justify-center gap-5 text-center', cns?.container)}>\n {icon_l && <Picture source={icon_l} alt={''} className={cn('cpn-title-icon-l', cns?.icon_l)} />}\n <Text html={html} className=\"cpn-title-text laptop:text-[40px] text-[24px] font-bold\" />\n {icon_r && <Picture source={icon_r} alt={''} className={cn('cpn-title-icon-r', cns?.icon_r)} />}\n </div>\n )\n}\n\nexport default CpnTitle\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAQI,IAAAI,EAAA,6BAPJC,EAAmB,kCACnBC,EAA8B,qCAE9B,MAAMC,EAAYC,GAAsB,CACtC,KAAM,CAAE,KAAAC,EAAM,OAAAC,EAAQ,OAAAC,EAAQ,IAAAC,CAAI,EAAIJ,EAEtC,SACE,QAAC,OAAI,aAAW,MAAG,wEAAyEI,GAAK,SAAS,EACvG,UAAAF,MAAU,OAAC,WAAQ,OAAQA,EAAQ,IAAK,GAAI,aAAW,MAAG,mBAAoBE,GAAK,MAAM,EAAG,KAC7F,OAAC,QAAK,KAAMH,EAAM,UAAU,0DAA0D,EACrFE,MAAU,OAAC,WAAQ,OAAQA,EAAQ,IAAK,GAAI,aAAW,MAAG,mBAAoBC,GAAK,MAAM,EAAG,GAC/F,CAEJ,EAEA,IAAOV,EAAQK",
|
|
6
6
|
"names": ["CpnTitle_exports", "__export", "CpnTitle_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_components", "CpnTitle", "props", "html", "icon_l", "icon_r", "cns"]
|
|
7
7
|
}
|
|
@@ -8,12 +8,8 @@ declare const meta: {
|
|
|
8
8
|
title?: string;
|
|
9
9
|
products: Array<{
|
|
10
10
|
title: string;
|
|
11
|
-
img:
|
|
12
|
-
|
|
13
|
-
};
|
|
14
|
-
mobileImg?: {
|
|
15
|
-
url: string;
|
|
16
|
-
};
|
|
11
|
+
img: import("../types/props.js").Img;
|
|
12
|
+
mobileImg?: import("../types/props.js").Img;
|
|
17
13
|
subTitle: string;
|
|
18
14
|
link?: string;
|
|
19
15
|
}>;
|
|
@@ -38,3 +34,4 @@ export default meta;
|
|
|
38
34
|
type Story = StoryObj<typeof meta>;
|
|
39
35
|
export declare const Default: Story;
|
|
40
36
|
export declare const Round: Story;
|
|
37
|
+
export declare const CustomLayout: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var l=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var h=(e,o)=>{for(var t in o)r(e,t,{get:o[t],enumerable:!0})},d=(e,o,t,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of u(o))!g.call(e,s)&&s!==t&&r(e,s,{get:()=>o[s],enumerable:!(n=f(o,s))||n.enumerable});return e};var y=(e,o,t)=>(t=e!=null?l(m(e)):{},d(o||!e||!e.__esModule?r(t,"default",{value:e,enumerable:!0}):t,e)),b=e=>d(r({},"__esModule",{value:!0}),e);var M={};h(M,{CustomLayout:()=>v,Default:()=>S,Round:()=>A,default:()=>C});module.exports=b(M);var a=require("react/jsx-runtime"),i=y(require("../biz-components/AccordionCards/index.js")),c=require("../components/container.js");const _={title:"Biz-Components/AccordionCards",component:i.default,parameters:{layout:"fullscreen"},tags:["autodocs"]};var C=_;const p=[{title:"Apple Charging Solutions",img:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768"},subTitle:"Dependable Charging for Your Entire Apple Ecosystem."},{title:"Apple Charging Solutions",img:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768"},subTitle:"Dependable Charging for Your Entire Apple Ecosystem."},{title:"Apple Charging Solutions",img:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768"},subTitle:"Dependable Charging for Your Entire Apple Ecosystem."},{title:"Apple Charging Solutions",img:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768"},subTitle:"Dependable Charging for Your Entire Apple Ecosystem."}],S={args:{data:{products:p,primaryButton:"Learn More",theme:"dark",shape:"round",itemShape:"round"}}},A={args:{data:{products:p,shape:"round",itemShape:"round",primaryButton:"Learn More"}}},v=()=>(0,a.jsx)("div",{className:"py-10",children:(0,a.jsx)(c.Container,{children:(0,a.jsx)(i.default,{data:{products:p,shape:"round",itemShape:"round",primaryButton:"Learn More",theme:"dark"}})})});
|
|
2
2
|
//# sourceMappingURL=accordionCards.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/accordionCards.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport AccordionCards from '../biz-components/AccordionCards/index.js'\n\nconst meta = {\n title: 'Biz-Components/AccordionCards',\n component: AccordionCards,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof AccordionCards>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mock = [\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n]\n\nexport const Default: Story = {\n args: {\n data: {\n products: mock,\n primaryButton: 'Learn More',\n theme: 'dark',\n shape: 'round',\n itemShape: 'round',\n },\n },\n}\n\nexport const Round: Story = {\n args: {\n data: {\n products: mock,\n shape: 'round',\n itemShape: 'round',\n primaryButton: 'Learn More',\n },\n },\n}\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,
|
|
6
|
-
"names": ["accordionCards_stories_exports", "__export", "Default", "Round", "accordionCards_stories_default", "__toCommonJS", "import_AccordionCards", "meta", "AccordionCards", "mock"]
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport AccordionCards from '../biz-components/AccordionCards/index.js'\nimport { Container } from '../components/container.js'\n\nconst meta = {\n title: 'Biz-Components/AccordionCards',\n component: AccordionCards,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof AccordionCards>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mock = [\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n]\n\nexport const Default: Story = {\n args: {\n data: {\n products: mock,\n primaryButton: 'Learn More',\n theme: 'dark',\n shape: 'round',\n itemShape: 'round',\n },\n },\n}\n\nexport const Round: Story = {\n args: {\n data: {\n products: mock,\n shape: 'round',\n itemShape: 'round',\n primaryButton: 'Learn More',\n },\n },\n}\n\nexport const CustomLayout = () => {\n return (\n <div className=\"py-10\">\n <Container>\n <AccordionCards\n data={{ products: mock, shape: 'round', itemShape: 'round', primaryButton: 'Learn More', theme: 'dark' }}\n />\n </Container>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,EAAA,YAAAC,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GA0EQ,IAAAO,EAAA,6BAzERC,EAA2B,wDAC3BC,EAA0B,sCAE1B,MAAMC,EAAO,CACX,MAAO,gCACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAON,EAAQK,EAGf,MAAME,EAAO,CACX,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,EACA,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,EACA,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,EACA,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,CACF,EAEaT,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,SAAUS,EACV,cAAe,aACf,MAAO,OACP,MAAO,QACP,UAAW,OACb,CACF,CACF,EAEaR,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,SAAUQ,EACV,MAAO,QACP,UAAW,QACX,cAAe,YACjB,CACF,CACF,EAEaV,EAAe,OAExB,OAAC,OAAI,UAAU,QACb,mBAAC,aACC,mBAAC,EAAAS,QAAA,CACC,KAAM,CAAE,SAAUC,EAAM,MAAO,QAAS,UAAW,QAAS,cAAe,aAAc,MAAO,MAAO,EACzG,EACF,EACF",
|
|
6
|
+
"names": ["accordionCards_stories_exports", "__export", "CustomLayout", "Default", "Round", "accordionCards_stories_default", "__toCommonJS", "import_jsx_runtime", "import_AccordionCards", "import_container", "meta", "AccordionCards", "mock"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var i=Object.create;var
|
|
1
|
+
"use strict";var i=Object.create;var c=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var y=(t,e)=>{for(var a in e)c(t,a,{get:e[a],enumerable:!0})},n=(t,e,a,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of f(e))!u.call(t,s)&&s!==a&&c(t,s,{get:()=>e[s],enumerable:!(m=l(e,s))||m.enumerable});return t};var g=(t,e,a)=>(a=t!=null?i(d(t)):{},n(e||!t||!t.__esModule?c(a,"default",{value:t,enumerable:!0}):a,t)),b=t=>n(c({},"__esModule",{value:!0}),t);var k={};y(k,{Default:()=>x,MoreThanFive:()=>_,Round:()=>P,default:()=>h});module.exports=b(k);var r=require("react/jsx-runtime"),p=g(require("../biz-components/Category/index.js")),v=require("gsap"),I=require("@gsap/react"),w=require("gsap/dist/ScrollTrigger"),M=require("gsap/dist/SplitText");const S={title:"Biz-Components/Category",component:p.default,parameters:{layout:"fullscreen"},tags:["autodocs"]};var h=S;const o=[{name:"Anker Prime 27",image:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554",alt:"Anker Prime 27"}},{name:"Anker Prime 27",image:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554",alt:"Anker Prime 27"}},{name:"Anker Prime 27",image:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554",alt:"Anker Prime 27"}}],x={args:{data:{isShowSelect:!0,productData:[],products:o},className:"p-4"}},P={args:{data:{isShowSelect:!0,productData:[],shape:"round",products:o},className:"p-4"}},_=()=>(0,r.jsxs)("div",{className:"flex size-full flex-col gap-6 p-4",children:[(0,r.jsx)("span",{className:"text-info-primary text-center text-sm font-bold",children:" 5 Items"}),(0,r.jsx)(p.default,{data:{shape:"round",isShowSelect:!0,productData:[],products:[...o,...o.slice(0,2)]}}),(0,r.jsx)("span",{className:"text-info-primary text-center text-sm font-bold",children:" 6 Items"}),(0,r.jsx)(p.default,{data:{shape:"round",isShowSelect:!0,productData:[],products:[...o,...o]}}),(0,r.jsx)("span",{className:"text-info-primary text-center text-sm font-bold",children:" 9 Items"}),(0,r.jsx)(p.default,{data:{shape:"round",isShowSelect:!0,productData:[],products:[...o,...o,...o]}})]});
|
|
2
2
|
//# sourceMappingURL=category.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/category.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Category from '../biz-components/Category/index.js'\nimport { gsap } from 'gsap'\nimport { useGSAP } from '@gsap/react'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { SplitText } from 'gsap/dist/SplitText'\n\nconst meta = {\n title: 'Biz-Components/Category',\n component: Category,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Category>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mock = [\n {\n name: 'Anker Prime 27',\n image
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,
|
|
6
|
-
"names": ["category_stories_exports", "__export", "Default", "Round", "category_stories_default", "__toCommonJS", "import_Category", "import_gsap", "import_react", "import_ScrollTrigger", "import_SplitText", "meta", "Category", "mock"]
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Category from '../biz-components/Category/index.js'\nimport { gsap } from 'gsap'\nimport { useGSAP } from '@gsap/react'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { SplitText } from 'gsap/dist/SplitText'\n\nconst meta = {\n title: 'Biz-Components/Category',\n component: Category,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Category>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mock = [\n {\n name: 'Anker Prime 27',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n alt: 'Anker Prime 27',\n },\n },\n {\n name: 'Anker Prime 27',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n alt: 'Anker Prime 27',\n },\n },\n {\n name: 'Anker Prime 27',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n alt: 'Anker Prime 27',\n },\n },\n]\n\nexport const Default: Story = {\n args: {\n data: {\n isShowSelect: true,\n productData: [],\n products: mock,\n },\n className: 'p-4',\n },\n}\n\nexport const Round: Story = {\n args: {\n data: {\n isShowSelect: true,\n productData: [],\n shape: 'round',\n products: mock,\n },\n className: 'p-4',\n },\n}\n\nexport const MoreThanFive = () => {\n return (\n <div className=\"flex size-full flex-col gap-6 p-4\">\n <span className=\"text-info-primary text-center text-sm font-bold\"> 5 Items</span>\n <Category\n data={{\n shape: 'round',\n isShowSelect: true,\n productData: [],\n products: [...mock, ...mock.slice(0, 2)],\n }}\n />\n <span className=\"text-info-primary text-center text-sm font-bold\"> 6 Items</span>\n <Category\n data={{\n shape: 'round',\n isShowSelect: true,\n productData: [],\n products: [...mock, ...mock],\n }}\n />\n <span className=\"text-info-primary text-center text-sm font-bold\"> 9 Items</span>\n <Category\n data={{\n shape: 'round',\n isShowSelect: true,\n productData: [],\n products: [...mock, ...mock, ...mock],\n }}\n />\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,iBAAAC,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GAoEI,IAAAO,EAAA,6BAnEJC,EAAqB,kDACrBC,EAAqB,gBACrBC,EAAwB,uBACxBC,EAA8B,mCAC9BC,EAA0B,+BAE1B,MAAMC,EAAO,CACX,MAAO,0BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOT,EAAQQ,EAGf,MAAME,EAAO,CACX,CACE,KAAM,iBACN,MAAO,CACL,IAAK,+HACL,IAAK,gBACP,CACF,EACA,CACE,KAAM,iBACN,MAAO,CACL,IAAK,+HACL,IAAK,gBACP,CACF,EACA,CACE,KAAM,iBACN,MAAO,CACL,IAAK,+HACL,IAAK,gBACP,CACF,CACF,EAEab,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,aAAc,GACd,YAAa,CAAC,EACd,SAAUa,CACZ,EACA,UAAW,KACb,CACF,EAEaX,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,aAAc,GACd,YAAa,CAAC,EACd,MAAO,QACP,SAAUW,CACZ,EACA,UAAW,KACb,CACF,EAEaZ,EAAe,OAExB,QAAC,OAAI,UAAU,oCACb,oBAAC,QAAK,UAAU,kDAAkD,oBAAQ,KAC1E,OAAC,EAAAW,QAAA,CACC,KAAM,CACJ,MAAO,QACP,aAAc,GACd,YAAa,CAAC,EACd,SAAU,CAAC,GAAGC,EAAM,GAAGA,EAAK,MAAM,EAAG,CAAC,CAAC,CACzC,EACF,KACA,OAAC,QAAK,UAAU,kDAAkD,oBAAQ,KAC1E,OAAC,EAAAD,QAAA,CACC,KAAM,CACJ,MAAO,QACP,aAAc,GACd,YAAa,CAAC,EACd,SAAU,CAAC,GAAGC,EAAM,GAAGA,CAAI,CAC7B,EACF,KACA,OAAC,QAAK,UAAU,kDAAkD,oBAAQ,KAC1E,OAAC,EAAAD,QAAA,CACC,KAAM,CACJ,MAAO,QACP,aAAc,GACd,YAAa,CAAC,EACd,SAAU,CAAC,GAAGC,EAAM,GAAGA,EAAM,GAAGA,CAAI,CACtC,EACF,GACF",
|
|
6
|
+
"names": ["category_stories_exports", "__export", "Default", "MoreThanFive", "Round", "category_stories_default", "__toCommonJS", "import_jsx_runtime", "import_Category", "import_gsap", "import_react", "import_ScrollTrigger", "import_SplitText", "meta", "Category", "mock"]
|
|
7
7
|
}
|
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import type { Img } from '../../types/props.js';
|
|
2
3
|
/** Hook:监听窗口宽度 */
|
|
3
4
|
type ItemType = {
|
|
4
5
|
/** 标题文本 */
|
|
5
6
|
title: string;
|
|
6
7
|
/** 图片*/
|
|
7
|
-
img:
|
|
8
|
-
|
|
9
|
-
};
|
|
10
|
-
mobileImg?: {
|
|
11
|
-
url: string;
|
|
12
|
-
};
|
|
8
|
+
img: Img;
|
|
9
|
+
mobileImg?: Img;
|
|
13
10
|
/** 内容节点 */
|
|
14
11
|
subTitle: string;
|
|
15
12
|
link?: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as z,jsx as o,jsxs as
|
|
1
|
+
"use client";import{Fragment as z,jsx as o,jsxs as n}from"react/jsx-runtime";import E from"../Title/index.js";import{cn as i}from"../../helpers/utils.js";import x from"../../components/picture.js";import g from"../../components/button.js";import M from"../SwiperBox/index.js";import{withStyles as C}from"../../shared/Styles.js";import S,{useState as w,useRef as d,useCallback as H,useImperativeHandle as L,useEffect as R}from"react";import{useExposure as A}from"../../hooks/useExposure.js";import{trackUrlRef as k}from"../../shared/trackUrlRef.js";import{gaTrack as D}from"../../shared/track.js";const l="image",s="scene_banner",j=S.forwardRef(({data:t,className:u="",event:f},_)=>{const[m,N]=w(0),a=d([]),p=d(!1),[v,T]=w(0),c=d(null);L(_,()=>c.current),A(c,{componentType:l,componentName:s,componentTitle:t?.title});const B=(e,r)=>{r&&(a.current[e]=r)};R(()=>{const e=()=>{a.current[0]&&T(a.current[0].offsetWidth)};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[]);const I=({data:e,configuration:r})=>n("div",{className:i("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",r?.itemShape==="round"?"rounded-2xl":""),children:[o(x,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""}),n("div",{className:i("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[n("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[o("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:e?.title}),o("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:e?.subTitle})]}),o("a",{href:k(e.link,`${l}_${s}`),onClick:()=>r?.event?.primaryButton(e,r),children:o(g,{variant:"secondary",className:i("text-info-primary text-sm font-bold"),children:r?.primaryButton})})]})]}),b=H(e=>{m===e||p.current||(p.current=!0,N(e),D({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:l,component_name:s,component_title:t?.products[e]?.title,component_description:t?.products[e]?.subTitle,position:e+1}}))},[t?.products,m]);return n(z,{children:[t?.title&&o(E,{data:{title:t?.title}}),o("div",{ref:c,className:i("laptop:block hidden",{"aiui-dark":t?.theme==="dark"}),children:o("div",{className:i("lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden",u),children:t?.products?.map((e,r)=>{const h=m===r;return n("div",{style:{flex:`${h?8:1} 1 0%`,transition:"all 0.6s"},ref:y=>{y&&B(r,y)},className:i("relative cursor-pointer overflow-hidden",t?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>b(r),onMouseLeave:()=>{p.current=!1},onClick:()=>b(r),children:[o(x,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""}),n("div",{style:{width:v},className:i("absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in",h&&v?"opacity-100":"opacity-0"),children:[n("div",{className:"mr-16 flex-1 overflow-hidden",children:[o("p",{className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:e?.title}),o("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:e?.subTitle})]}),o("a",{href:k(e?.link,`${l}_${s}`),onClick:()=>f?.primaryButton?.(t,r),children:o(g,{className:i("desktop:text-base mb-1.5 text-sm font-bold"),children:t?.primaryButton})})]})]},r)})})}),o("div",{className:i("laptop:hidden block",{"aiui-dark":t?.theme==="dark"}),children:o(M,{className:i("h-[400px] !overflow-visible",u),id:"AccordionCards"+t?.key,data:{list:t?.products,configuration:{shape:t?.shape,itemShape:t?.itemShape,primaryButton:t?.primaryButton,event:f}},Slide:I,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});var Q=C(j);export{Q as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport React, { useState,
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "withStyles", "React", "useState", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n}\n\ntype AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n theme?: 'light' | 'dark'\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const accordionRef = useRef<HTMLDivElement[]>([])\n const isAnimation = useRef<boolean>(false)\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[0]) {\n setContentWidth(accordionRef.current[0].offsetWidth)\n }\n }\n handleResize()\n window.addEventListener('resize', handleResize)\n return () => {\n window.removeEventListener('resize', handleResize)\n }\n }, [])\n\n const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n </div>\n <a\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration)}\n >\n <Button variant=\"secondary\" className={cn('text-info-primary text-sm font-bold')}>\n {configuration?.primaryButton}\n </Button>\n </a>\n </div>\n </div>\n )\n }\n\n const handleSwiperItemClick = useCallback(\n (idx: number) => {\n if (hoverIndex === idx || isAnimation.current) return\n isAnimation.current = true\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.products[idx]?.title,\n component_description: data?.products[idx]?.subTitle,\n position: idx + 1,\n },\n })\n },\n [data?.products, hoverIndex]\n )\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn(\n 'relative cursor-pointer overflow-hidden',\n data?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onMouseLeave={() => {\n isAnimation.current = false\n }}\n onClick={() => handleSwiperItemClick(idx)}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n />\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <p className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n {item?.title}\n </p>\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\">\n {item?.subTitle}\n </h3>\n </div>\n <a\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n <Button className={cn('desktop:text-base mb-1.5 text-sm font-bold')}>{data?.primaryButton}</Button>\n </a>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n itemShape: data?.itemShape,\n primaryButton: data?.primaryButton,\n event: event,\n },\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n})\nexport default withStyles(AccordionCards)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "withStyles", "React", "useState", "useRef", "useCallback", "useImperativeHandle", "useEffect", "useExposure", "trackUrlRef", "gaTrack", "componentType", "componentName", "AccordionCards", "data", "className", "event", "ref", "hoverIndex", "setHoverIndex", "accordionRef", "isAnimation", "contentWidth", "setContentWidth", "innerRef", "getRef", "index", "el", "handleResize", "MobileItem", "configuration", "handleSwiperItemClick", "idx", "item", "isExpanded", "AccordionCards_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as i}from"react/jsx-runtime";import s from"react";import{Swiper as l,SwiperSlide as p}from"swiper/react";import{Pagination as d,FreeMode as f,Mousewheel as c}from"swiper/modules";import"swiper/css";import"swiper/css/pagination";const r=s.forwardRef(({data:e,Slide:o,id:a,pagination:w})=>i(l,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!0},className:"!overflow-visible",modules:[f,c,d],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:Math.min(6,e?.list?.length)}},children:e?.list?.map((t,n)=>i(p,{className:"!h-[unset]",children:i(o,{data:t,configuration:e?.configuration})},a+"SwiperSlide"+n))}));r.displayName="SwiperBox";var B=r;export{B as default};
|
|
2
2
|
//# sourceMappingURL=SwiperCategory.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Category/SwiperCategory.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n pagination?: any\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, pagination }) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: true,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n },\n 767: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n 1441: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 6,\n },\n }}\n >\n {data?.list?.map((item, jIndex) => (\n <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n <Slide data={item} configuration={data?.configuration} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
|
|
5
|
-
"mappings": "aAyDU,cAAAA,MAAA,oBAxDV,OAAOC,MAAW,QAClB,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,cAAAC,EAAY,YAAAC,EAAU,cAAAC,MAAkB,iBACjD,MAAO,aACP,MAAO,wBAcP,MAAMC,EAAYN,EAAM,WAA2C,CAAC,CAAE,KAAAO,EAAM,MAAAC,EAAO,GAAAC,EAAI,WAAAC,CAAW,IAE9FX,EAACE,EAAA,CACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,eAAgB,EAClB,EACA,UAAU,oBACV,QAAS,CAACG,EAAUC,EAAYF,CAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n pagination?: any\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, pagination }) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: true,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n },\n 767: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n 1441: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: Math.min(6, data?.list?.length),\n },\n }}\n >\n {data?.list?.map((item, jIndex) => (\n <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n <Slide data={item} configuration={data?.configuration} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
|
|
5
|
+
"mappings": "aAyDU,cAAAA,MAAA,oBAxDV,OAAOC,MAAW,QAClB,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,cAAAC,EAAY,YAAAC,EAAU,cAAAC,MAAkB,iBACjD,MAAO,aACP,MAAO,wBAcP,MAAMC,EAAYN,EAAM,WAA2C,CAAC,CAAE,KAAAO,EAAM,MAAAC,EAAO,GAAAC,EAAI,WAAAC,CAAW,IAE9FX,EAACE,EAAA,CACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,eAAgB,EAClB,EACA,UAAU,oBACV,QAAS,CAACG,EAAUC,EAAYF,CAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,KAAK,IAAI,EAAGI,GAAM,MAAM,MAAM,CAC/C,CACF,EAEC,SAAAA,GAAM,MAAM,IAAI,CAACI,EAAMC,IACtBb,EAACG,EAAA,CAA8C,UAAU,aACvD,SAAAH,EAACS,EAAA,CAAM,KAAMG,EAAM,cAAeJ,GAAM,cAAe,GADvCE,EAAK,cAAgBG,CAEvC,CACD,EACH,CAEH,EAEDN,EAAU,YAAc,YAExB,IAAOO,EAAQP",
|
|
6
6
|
"names": ["jsx", "React", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "SwiperBox", "data", "Slide", "id", "pagination", "item", "jIndex", "SwiperCategory_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{
|
|
1
|
+
"use client";import{jsx as o,jsxs as i}from"react/jsx-runtime";import x,{useImperativeHandle as h,useRef as y}from"react";import{cn as n}from"../../helpers/utils.js";import s from"../../components/picture.js";import{withStyles as v}from"../../shared/Styles.js";import b from"../Title/index.js";import g from"./SwiperCategory.js";import{useExposure as k}from"../../hooks/useExposure.js";import{trackUrlRef as f}from"../../shared/trackUrlRef.js";const m="image",c="category_banner",w=(e,t)=>{const r=[];for(let a=0;a<e.length;a+=t)r.push(e.slice(a,a+t));return r},N=({data:e,configuration:t})=>i("div",{className:n("tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]","tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8","bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("div",{className:"transition-all duration-300 group-hover:scale-110",children:o("a",{href:f(e?.link,`${m}_${c}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(s,{alt:e?.image?.alt||"",source:e?.image?.url||"",className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),o("p",{className:"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold",children:e?.name})]}),C=({data:e,configuration:t})=>i("div",{className:n("bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden","hover:bg-info-white cursor-pointer px-3 py-4 duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("a",{href:f(e?.link,`${m}_${c}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(s,{alt:e?.image?.alt||"",className:"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||""})}),o("p",{className:"text-info-primary flex-1 truncate text-center text-sm font-bold",children:e?.name})]},`${e?.name}`),I=({data:e,configuration:t,index:r})=>i("div",{className:n("bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer p-4",r===0?"aspect-h-[252] row-span-2":"aspect-h-[120]",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("a",{href:e?.link||"",onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(s,{source:e?.image?.url||"",alt:e?.image?.alt||"",className:n("mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",r===0?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]")})}),o("p",{className:"text-info-primary line-clamp-2 text-center text-sm font-bold",children:e?.name})]}),_=({data:e,configuration:t})=>o("div",{className:"grid grid-cols-2 gap-3",children:e?.map((r,a)=>e?.length>5?o(C,{data:r,configuration:t},a):o(I,{index:a,data:r,configuration:t},a))}),j=x.forwardRef((e,t)=>{const{data:r,className:a="",key:p,event:d}=e,u=r?.isShowSelect?r?.products:r?.productData,l=y(null);return h(t,()=>l.current),k(l,{componentType:m,componentName:c,componentTitle:r?.title}),i("div",{ref:l,className:n("w-full overflow-hidden",a,{"aiui-dark":r?.theme==="dark"}),children:[r?.title&&o(b,{data:{title:r?.title},className:"text-4xl"}),o("div",{className:"tablet:block hidden",children:o(g,{id:`Category${p}`,Slide:N,data:{list:u,configuration:{shape:r?.shape,event:d}}})}),o("div",{className:"tablet:hidden block",children:o(g,{id:`Category1${p}`,Slide:_,data:{list:w(u,6),configuration:{shape:r?.shape,event:d}}})}),o("div",{className:"h-7"})]})});var E=v(j);export{E as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|