npm - @anker-in/headless-ui - Versions diffs - 0.0.27-alpha.85 → 0.0.27-alpha.86 - Mend

@anker-in/headless-ui 0.0.27-alpha.85 → 0.0.27-alpha.86

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.

Files changed (19) hide show

package/README.md +12 -1
package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +3 -3
package/dist/cjs/components/picture.d.ts +1 -1
package/dist/cjs/components/picture.js +1 -1
package/dist/cjs/components/picture.js.map +3 -3
package/dist/cjs/components/tabs.js +1 -1
package/dist/cjs/components/tabs.js.map +3 -3
package/dist/cjs/stories/picture.stories.d.ts +1 -1
package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +3 -3
package/dist/esm/components/picture.d.ts +1 -1
package/dist/esm/components/picture.js +1 -1
package/dist/esm/components/picture.js.map +3 -3
package/dist/esm/components/tabs.js +1 -1
package/dist/esm/components/tabs.js.map +3 -3
package/dist/esm/stories/picture.stories.d.ts +1 -1
package/package.json +1 -1
package/style.css +3 -0

package/README.md CHANGED Viewed

@@ -25,6 +25,15 @@ export default {
 } satisfies Config
 ```
+因为headless-ui 使用纯 ESM 模块, 所以有些非标准第三方ESM模块比如gsap可能会在nextjs 中加载失败，
+需要修改无头项目的next.config.js ，显式声明需要 transpile 的包
+```
+// next.config.js
+module.exports = {
+  transpilePackages: ['@anker-in/headless-ui', 'gsap'],
+}
+```
 2. 添加 design token css 变量文件
 在入口文件 app.js 直接引入 design token css
@@ -61,7 +70,7 @@ import { HeroBanner } from '@anker-in/headless-ui/biz'
 ❗❗❗异常处理
-如果出现 `import { XXX } from '@anker-in/headless-ui/biz'`
+1. 如果出现 `import { XXX } from '@anker-in/headless-ui/biz'`
 typescript 报错的情况，可以把
@@ -71,5 +80,7 @@ typescript 报错的情况，可以把
       ],
 ```
 添加到tsconfig 配置文件的"paths" 属性。
 这可能是旧版本的`moduleResolution` 不支持

package/dist/cjs/biz-components/HeroBanner/HeroBanner.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var y=Object.create;var i=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var z=(t,a)=>{for(var p in a)i(t,p,{get:a[p],enumerable:!0})},g=(t,a,p,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of w(a))!H.call(t,o)&&o!==p&&i(t,o,{get:()=>a[o],enumerable:!(s=N(a,o))||s.enumerable});return t};var P=(t,a,p)=>(p=t!=null?y(B(t)):{},g(a||!t||!t.__esModule?i(p,"default",{value:t,enumerable:!0}):p,t)),R=t=>g(i({},"__esModule",{value:!0}),t);var F={};z(F,{default:()=>j});module.exports=R(F);var e=require("react/jsx-runtime"),c=P(require("react")),l=require("../../components/index.js"),r=require("../../helpers/index.js"),f=require("../../shared/Styles.js");const u=c.default.forwardRef(({data:t,className:a},p)=>{const{title:s,subtitle:o,pcImage:b,mobileImage:h,primaryButton:n,secondaryButton:x,theme:v="light",caption:m=[]}=t;return(0,e.jsxs)("div",{"data-ui-component-id":"HeroBanner",ref:p,className:(0,r.cn)(v==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",a),children:[(0,e.jsx)(l.Picture,{className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:`${b.url} , ${h.url} 767`}),(0,e.jsxs)("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]",children:[s&&(0,e.jsxs)("div",{className:"laptop:text-left max-w-[686px]",children:[(0,e.jsx)(l.Heading,{as:"h1",size:5,className:(0,r.cn)("hero-banner-title"),html:s}),(0,e.jsx)(l.Text,{as:"p",className:(0,r.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:o})]}),(0,e.jsxs)("div",{className:"laptop:justify-start laptop:gap-4 flex items-center gap-3",children:[x&&x.text&&(0,e.jsx)(l.Button,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:x.text}),n&&n.text&&(0,e.jsx)(l.Button,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:n.text})]})]}),m.length>0&&(0,e.jsx)("div",{className:"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]",children:m.map((k,d)=>(0,e.jsxs)(c.default.Fragment,{children:[(0,e.jsx)(l.Text,{className:(0,r.cn)("hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]"),html:k.title}),d<m.length-1&&(0,e.jsx)("div",{className:(0,r.cn)("bg-info-primary w-px")})]},d))})]})});u.displayName="HeroBanner";var j=(0,f.withStyles)(u);
+"use strict";"use client";var R=Object.create;var c=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var E=(t,a)=>{for(var p in a)c(t,p,{get:a[p],enumerable:!0})},f=(t,a,p,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of P(a))!I.call(t,r)&&r!==p&&c(t,r,{get:()=>a[r],enumerable:!(s=z(a,r))||s.enumerable});return t};var b=(t,a,p)=>(p=t!=null?R(T(t)):{},f(a||!t||!t.__esModule?c(p,"default",{value:t,enumerable:!0}):p,t)),S=t=>f(c({},"__esModule",{value:!0}),t);var A={};E(A,{default:()=>j});module.exports=S(A);var e=require("react/jsx-runtime"),i=b(require("react")),v=require("@gsap/react"),k=b(require("gsap")),y=require("gsap/ScrollTrigger"),o=require("../../components/index.js"),l=require("../../helpers/index.js"),N=require("../../shared/Styles.js");const h=i.default.forwardRef(({data:t,className:a},p)=>{const{title:s,subtitle:r,pcImage:w,mobileImage:B,primaryButton:x,secondaryButton:g,theme:H="light",caption:d=[]}=t,n=(0,i.useRef)(null);return(0,v.useGSAP)(()=>{const u=n.current?.clientHeight||0;return console.log("bgImageRef height",u),k.default.to(n.current,{scrollTrigger:{trigger:n.current,start:"40% top",end:"bottom top",scrub:!0},y:"50%",ease:"linear"}),()=>{y.ScrollTrigger.getAll().forEach(m=>m.kill())}}),(0,e.jsxs)("div",{"data-ui-component-id":"HeroBanner",ref:p,className:(0,l.cn)(H==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",a),children:[(0,e.jsx)(o.Picture,{ref:n,className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:`${w.url} , ${B.url} 767`}),(0,e.jsxs)("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]",children:[s&&(0,e.jsxs)("div",{className:"laptop:text-left max-w-[686px]",children:[(0,e.jsx)(o.Heading,{as:"h1",size:5,className:(0,l.cn)("hero-banner-title"),html:s}),(0,e.jsx)(o.Text,{as:"p",className:(0,l.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:r})]}),(0,e.jsxs)("div",{className:"laptop:justify-start laptop:gap-4 flex items-center gap-3",children:[g&&g.text&&(0,e.jsx)(o.Button,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:g.text}),x&&x.text&&(0,e.jsx)(o.Button,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:x.text})]})]}),d.length>0&&(0,e.jsx)("div",{className:"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]",children:d.map((u,m)=>(0,e.jsxs)(i.default.Fragment,{children:[(0,e.jsx)(o.Text,{className:(0,l.cn)("hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]"),html:u.title}),m<d.length-1&&(0,e.jsx)("div",{className:(0,l.cn)("bg-info-primary w-px")})]},m))})]})});h.displayName="HeroBanner";var j=(0,N.withStyles)(h);
 //# sourceMappingURL=HeroBanner.js.map

package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n  return (\n    <div\n      data-ui-component-id=\"HeroBanner\"\n      ref={ref}\n      className={cn(\n        theme === 'dark' ? 'aiui-dark' : '',\n        'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n        className\n      )}\n    >\n      <Picture\n        className=\"laptop:w-full absolute h-full\"\n        imgClassName=\"h-full object-cover\"\n        source={`${pcImage.url} , ${mobileImage.url} 767`}\n      />\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]\">\n        {title && (\n          <div className=\"laptop:text-left max-w-[686px]\">\n            <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />\n            <Text\n              as=\"p\"\n              className={cn(\n                'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n              )}\n              html={subtitle}\n            />\n          </div>\n        )}\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"laptop:justify-start laptop:gap-4 flex items-center gap-3\">\n          {secondaryButton && secondaryButton.text && (\n            <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n              {secondaryButton.text}\n            </Button>\n          )}\n          {primaryButton && primaryButton.text && (\n            <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n              {primaryButton.text}\n            </Button>\n          )}\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n      {caption.length > 0 && (\n        <div className=\"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          {caption.map((c, index) => (\n            <React.Fragment key={index}>\n              <Text\n                className={cn(\n                  'hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]'\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    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoBM,IAAAI,EAAA,6BAnBNC,EAAkB,oBAElBC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAa,EAAAC,QAAM,WAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,QAAAC,EAAU,CAAC,CAAE,EAAIV,EAEjH,SACE,QAAC,OACC,uBAAqB,aACrB,IAAKE,EACL,aAAW,MACTO,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,oBAAC,WACC,UAAU,gCACV,aAAa,sBACb,OAAQ,GAAGI,EAAQ,GAAG,MAAMC,EAAY,GAAG,OAC7C,KAGA,QAAC,OAAI,UAAU,6LACZ,UAAAH,MACC,QAAC,OAAI,UAAU,iCACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,aAAW,MAAG,mBAAmB,EAAG,KAAMA,EAAO,KAC3E,OAAC,QACC,GAAG,IACH,aAAW,MACT,oHACF,EACA,KAAMC,EACR,GACF,KAGF,QAAC,OAAI,UAAU,4DACZ,UAAAI,GAAmBA,EAAgB,SAClC,OAAC,UAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,+BAC7C,SAAAA,EAAgB,KACnB,EAEDD,GAAiBA,EAAc,SAC9B,OAAC,UAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAC3C,SAAAA,EAAc,KACjB,GAEJ,GACF,EAGCG,EAAQ,OAAS,MAChB,OAAC,OAAI,UAAU,uKACZ,SAAAA,EAAQ,IAAI,CAACC,EAAGC,OACf,QAAC,EAAAb,QAAM,SAAN,CACC,oBAAC,QACC,aAAW,MACT,8KACF,EACA,KAAMY,EAAE,MACV,EACCC,EAAQF,EAAQ,OAAS,MAAK,OAAC,OAAI,aAAW,MAAG,sBAAsB,EAAG,IAPxDE,CAQrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDd,EAAW,YAAc,aAEzB,IAAOP,KAAQ,cAAWO,CAAU",
-  "names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_helpers", "import_Styles", "HeroBanner", "React", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "caption", "c", "index"]
+  "sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n  const bgImageRef = useRef<HTMLPictureElement>(null)\n\n  useGSAP(() => {\n    const h = bgImageRef.current?.clientHeight || 0\n    console.log('bgImageRef height', h)\n    gsap.to(bgImageRef.current!, {\n      scrollTrigger: {\n        trigger: bgImageRef.current,\n        start: `40% top`,\n        end: 'bottom top',\n        scrub: true,\n      },\n      y: '50%',\n      ease: 'linear',\n    })\n\n    return () => {\n      ScrollTrigger.getAll().forEach(trigger => trigger.kill())\n    }\n  })\n  return (\n    <div\n      data-ui-component-id=\"HeroBanner\"\n      ref={ref}\n      className={cn(\n        theme === 'dark' ? 'aiui-dark' : '',\n        'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n        className\n      )}\n    >\n      <Picture\n        ref={bgImageRef}\n        className=\"laptop:w-full absolute h-full\"\n        imgClassName=\"h-full object-cover\"\n        source={`${pcImage.url} , ${mobileImage.url} 767`}\n      />\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]\">\n        {title && (\n          <div className=\"laptop:text-left max-w-[686px]\">\n            <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />\n            <Text\n              as=\"p\"\n              className={cn(\n                'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n              )}\n              html={subtitle}\n            />\n          </div>\n        )}\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"laptop:justify-start laptop:gap-4 flex items-center gap-3\">\n          {secondaryButton && secondaryButton.text && (\n            <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n              {secondaryButton.text}\n            </Button>\n          )}\n          {primaryButton && primaryButton.text && (\n            <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n              {primaryButton.text}\n            </Button>\n          )}\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n      {caption.length > 0 && (\n        <div className=\"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          {caption.map((c, index) => (\n            <React.Fragment key={index}>\n              <Text\n                className={cn(\n                  'hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]'\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    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2CM,IAAAI,EAAA,6BA1CNC,EAA8B,oBAC9BA,EAAwB,uBACxBC,EAAiB,mBACjBC,EAA8B,8BAE9BC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAa,EAAAC,QAAM,WAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,QAAAC,EAAU,CAAC,CAAE,EAAIV,EAE3GW,KAAa,UAA2B,IAAI,EAElD,oBAAQ,IAAM,CACZ,MAAMC,EAAID,EAAW,SAAS,cAAgB,EAC9C,eAAQ,IAAI,oBAAqBC,CAAC,EAClC,EAAAC,QAAK,GAAGF,EAAW,QAAU,CAC3B,cAAe,CACb,QAASA,EAAW,QACpB,MAAO,UACP,IAAK,aACL,MAAO,EACT,EACA,EAAG,MACH,KAAM,QACR,CAAC,EAEM,IAAM,CACX,gBAAc,OAAO,EAAE,QAAQG,GAAWA,EAAQ,KAAK,CAAC,CAC1D,CACF,CAAC,KAEC,QAAC,OACC,uBAAqB,aACrB,IAAKZ,EACL,aAAW,MACTO,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,oBAAC,WACC,IAAKU,EACL,UAAU,gCACV,aAAa,sBACb,OAAQ,GAAGN,EAAQ,GAAG,MAAMC,EAAY,GAAG,OAC7C,KAGA,QAAC,OAAI,UAAU,6LACZ,UAAAH,MACC,QAAC,OAAI,UAAU,iCACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,aAAW,MAAG,mBAAmB,EAAG,KAAMA,EAAO,KAC3E,OAAC,QACC,GAAG,IACH,aAAW,MACT,oHACF,EACA,KAAMC,EACR,GACF,KAGF,QAAC,OAAI,UAAU,4DACZ,UAAAI,GAAmBA,EAAgB,SAClC,OAAC,UAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,+BAC7C,SAAAA,EAAgB,KACnB,EAEDD,GAAiBA,EAAc,SAC9B,OAAC,UAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAC3C,SAAAA,EAAc,KACjB,GAEJ,GACF,EAGCG,EAAQ,OAAS,MAChB,OAAC,OAAI,UAAU,uKACZ,SAAAA,EAAQ,IAAI,CAACK,EAAGC,OACf,QAAC,EAAAjB,QAAM,SAAN,CACC,oBAAC,QACC,aAAW,MACT,8KACF,EACA,KAAMgB,EAAE,MACV,EACCC,EAAQN,EAAQ,OAAS,MAAK,OAAC,OAAI,aAAW,MAAG,sBAAsB,EAAG,IAPxDM,CAQrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDlB,EAAW,YAAc,aAEzB,IAAOT,KAAQ,cAAWS,CAAU",
+  "names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_components", "import_helpers", "import_Styles", "HeroBanner", "React", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "caption", "bgImageRef", "h", "gsap", "trigger", "c", "index"]
 }

package/dist/cjs/components/picture.d.ts CHANGED Viewed

@@ -9,5 +9,5 @@ export interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement>
     /** 响应式图片，对应picture 下source 的max-width */
     deviceSizes?: number[];
 }
-declare const Picture: ({ imgClassName, source, quality, deviceSizes, className, ...rest }: PictureProps) => import("react/jsx-runtime").JSX.Element;
+declare const Picture: React.ForwardRefExoticComponent<PictureProps & React.RefAttributes<HTMLPictureElement>>;
 export default Picture;

package/dist/cjs/components/picture.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var d=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var E=(e,t)=>{for(var n in t)d(e,n,{get:t[n],enumerable:!0})},S=(e,t,n,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of _(t))!x.call(e,o)&&o!==n&&d(e,o,{get:()=>t[o],enumerable:!(p=M(t,o))||p.enumerable});return e};var $=e=>S(d({},"__esModule",{value:!0}),e);var D={};E(D,{default:()=>N});module.exports=$(D);var g=require("react/jsx-runtime"),l=require("react");const A=["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],P=3960,L=3980,k=e=>A.some(t=>e==t),y=(e="")=>/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(e),F=({imgClassName:e="",source:t="",quality:n=2,deviceSizes:p=[375,767,1023,1279,1439,1539,1919],className:o,...f})=>{const m=(0,l.useCallback)(({src:s,width:c})=>{const i=c;try{const r=new URL(s);if(!k(r.hostname))return s;const a=r.pathname.split("/").pop()||"";if(y(a)&&!/_[0-9]{2,4}x/.test(s)){const[w,u]=a.split(".");return`${r.origin}${r.pathname.replace(a,`${w}_${i<P?i:L}x.${u}`)}`}}catch{return s}},[]),h=(0,l.useCallback)(({srcArr:s,width:c})=>{const i=c*n,r=m({src:s[0][0],width:i});let a;return s.forEach(u=>{var I=u[0];u.length>1&&parseInt(u[1],10)>=c&&(a=m({src:I,width:i}))}),(0,g.jsx)("source",{srcSet:a||r,media:`(max-width: ${c}px)`},c)},[m,n]),b=(0,l.useMemo)(()=>{if(typeof t!="string"||!t)return[];let s;try{s=t.replace(/[\r\n]/g,"").replace(/\s\s+/g," ").split(",").map(r=>r.split(" ").filter(Boolean))}catch(r){return console.log(r),[]}const c=p.map(r=>h({srcArr:s,width:r})),i=m({src:s[0][0],width:1920*n});return c.push((0,g.jsx)("img",{src:i,className:`w-full ${e}`,...f},"default")),c},[p,e,m,n,f,t,h]);return(0,g.jsxs)("picture",{className:`block overflow-hidden ${o}`,children:[b,f.children]})};var N=F;
+"use strict";"use client";var I=Object.create;var f=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var A=(e,t)=>{for(var r in t)f(e,r,{get:t[r],enumerable:!0})},M=(e,t,r,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of x(t))!$.call(e,o)&&o!==r&&f(e,o,{get:()=>t[o],enumerable:!(m=_(t,o))||m.enumerable});return e};var L=(e,t,r)=>(r=e!=null?I(S(e)):{},M(t||!e||!e.__esModule?f(r,"default",{value:e,enumerable:!0}):r,e)),k=e=>M(f({},"__esModule",{value:!0}),e);var X={};A(X,{default:()=>T});module.exports=k(X);var g=require("react/jsx-runtime"),a=L(require("react"));const y=["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],F=3960,N=3980,D=e=>y.some(t=>e==t),H=(e="")=>/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(e),R=a.default.forwardRef(({imgClassName:e="",source:t="",quality:r=2,deviceSizes:m=[375,767,1023,1279,1439,1539,1919],className:o,...d},P)=>{const u=(0,a.useCallback)(({src:n,width:c})=>{const i=c;try{const s=new URL(n);if(!D(s.hostname))return n;const p=s.pathname.split("/").pop()||"";if(H(p)&&!/_[0-9]{2,4}x/.test(n)){const[w,l]=p.split(".");return`${s.origin}${s.pathname.replace(p,`${w}_${i<F?i:N}x.${l}`)}`}}catch{return n}},[]),h=(0,a.useCallback)(({srcArr:n,width:c})=>{const i=c*r,s=u({src:n[0][0],width:i});let p;return n.forEach(l=>{var E=l[0];l.length>1&&parseInt(l[1],10)>=c&&(p=u({src:E,width:i}))}),(0,g.jsx)("source",{srcSet:p||s,media:`(max-width: ${c}px)`},c)},[u,r]),b=(0,a.useMemo)(()=>{if(typeof t!="string"||!t)return[];let n;try{n=t.replace(/[\r\n]/g,"").replace(/\s\s+/g," ").split(",").map(s=>s.split(" ").filter(Boolean))}catch(s){return console.log(s),[]}const c=m.map(s=>h({srcArr:n,width:s})),i=u({src:n[0][0],width:1920*r});return c.push((0,g.jsx)("img",{src:i,className:`w-full ${e}`,...d},"default")),c},[m,e,u,r,d,t,h]);return(0,g.jsxs)("picture",{ref:P,className:`block overflow-hidden ${o}`,children:[b,d.children]})});var T=R;
 //# sourceMappingURL=picture.js.map

package/dist/cjs/components/picture.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/picture.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n  imgClassName?: string\n  /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n  source?: string\n  /** \u56FE\u7247\u8D28\u91CF */\n  quality?: number\n  /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n  deviceSizes?: number[]\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n  return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\nconst Picture = ({\n  imgClassName = '',\n  source = '',\n  quality = 2,\n  deviceSizes = [375, 767, 1023, 1279, 1439, 1539, 1919],\n  className,\n  ...rest\n}: PictureProps) => {\n  const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n    const size = width\n    try {\n      const parsedUrl = new URL(src)\n      if (!isMatchDomain(parsedUrl.hostname)) {\n        return src\n      }\n      const fileName = parsedUrl.pathname.split('/').pop() || ''\n      if (idMatchFileExtensions(fileName) && !/_[0-9]{2,4}x/.test(src)) {\n        const [name, extension] = fileName.split('.')\n        return `${parsedUrl.origin}${parsedUrl.pathname.replace(\n          fileName,\n          `${name}_${size < MAX_SIZE ? size : FIXED_MAX_SIZE}x.${extension}`\n        )}`\n      }\n    } catch (error) {\n      return src\n    }\n  }, [])\n\n  const sourceSrcSet = useCallback(\n    ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n      const computedWidth = width * quality\n      const def = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n      let result\n      srcArr.forEach(ele => {\n        var img = ele[0]\n        if (ele.length > 1 && parseInt(ele[1], 10) >= width) {\n          result = imgSrcSetsize({ src: img, width: computedWidth })\n        }\n      })\n      const srcset = result || def\n      return <source key={width} srcSet={srcset} media={`(max-width: ${width}px)`} />\n    },\n    [imgSrcSetsize, quality]\n  )\n\n  const sourceList = useMemo(() => {\n    if (typeof source !== 'string' || !source) return []\n    let srcArr\n    try {\n      srcArr = source\n        .replace(/[\\r\\n]/g, '')\n        .replace(/\\s\\s+/g, ' ')\n        .split(',')\n        .map(item => item.split(' ').filter(Boolean))\n    } catch (error) {\n      console.log(error)\n      return []\n    }\n    const sourceList = deviceSizes.map(width => {\n      return sourceSrcSet({ srcArr, width })\n    })\n\n    const img = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n    sourceList.push(<img key=\"default\" src={img} className={`w-full ${imgClassName}`} {...rest} />)\n    return sourceList\n  }, [deviceSizes, imgClassName, imgSrcSetsize, quality, rest, source, sourceSrcSet])\n\n  return (\n    <picture className={`block overflow-hidden ${className}`}>\n      {sourceList}\n      {rest.children}\n    </picture>\n  )\n}\nexport default Picture\n"],
-  "mappings": "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",
-  "names": ["picture_exports", "__export", "picture_default", "__toCommonJS", "import_jsx_runtime", "import_react", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "Picture", "imgClassName", "source", "quality", "deviceSizes", "className", "rest", "imgSrcSetsize", "src", "width", "size", "parsedUrl", "name", "extension", "sourceSrcSet", "srcArr", "computedWidth", "def", "result", "ele", "img", "sourceList", "item", "error"]
+  "sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n  imgClassName?: string\n  /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n  source?: string\n  /** \u56FE\u7247\u8D28\u91CF */\n  quality?: number\n  /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n  deviceSizes?: number[]\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n  return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n  (\n    {\n      imgClassName = '',\n      source = '',\n      quality = 2,\n      deviceSizes = [375, 767, 1023, 1279, 1439, 1539, 1919],\n      className,\n      ...rest\n    }: PictureProps,\n    ref\n  ) => {\n    const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n      const size = width\n      try {\n        const parsedUrl = new URL(src)\n        if (!isMatchDomain(parsedUrl.hostname)) {\n          return src\n        }\n        const fileName = parsedUrl.pathname.split('/').pop() || ''\n        if (idMatchFileExtensions(fileName) && !/_[0-9]{2,4}x/.test(src)) {\n          const [name, extension] = fileName.split('.')\n          return `${parsedUrl.origin}${parsedUrl.pathname.replace(\n            fileName,\n            `${name}_${size < MAX_SIZE ? size : FIXED_MAX_SIZE}x.${extension}`\n          )}`\n        }\n      } catch (error) {\n        return src\n      }\n    }, [])\n\n    const sourceSrcSet = useCallback(\n      ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n        const computedWidth = width * quality\n        const def = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n        let result\n        srcArr.forEach(ele => {\n          var img = ele[0]\n          if (ele.length > 1 && parseInt(ele[1], 10) >= width) {\n            result = imgSrcSetsize({ src: img, width: computedWidth })\n          }\n        })\n        const srcset = result || def\n        return <source key={width} srcSet={srcset} media={`(max-width: ${width}px)`} />\n      },\n      [imgSrcSetsize, quality]\n    )\n\n    const sourceList = useMemo(() => {\n      if (typeof source !== 'string' || !source) return []\n      let srcArr\n      try {\n        srcArr = source\n          .replace(/[\\r\\n]/g, '')\n          .replace(/\\s\\s+/g, ' ')\n          .split(',')\n          .map(item => item.split(' ').filter(Boolean))\n      } catch (error) {\n        console.log(error)\n        return []\n      }\n      const sourceList = deviceSizes.map(width => {\n        return sourceSrcSet({ srcArr, width })\n      })\n\n      const img = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n      sourceList.push(<img key=\"default\" src={img} className={`w-full ${imgClassName}`} {...rest} />)\n      return sourceList\n    }, [deviceSizes, imgClassName, imgSrcSetsize, quality, rest, source, sourceSrcSet])\n\n    return (\n      <picture ref={ref} className={`block overflow-hidden ${className}`}>\n        {sourceList}\n        {rest.children}\n      </picture>\n    )\n  }\n)\nexport default Picture\n"],
+  "mappings": "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",
+  "names": ["picture_exports", "__export", "picture_default", "__toCommonJS", "import_jsx_runtime", "import_react", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "Picture", "React", "imgClassName", "source", "quality", "deviceSizes", "className", "rest", "ref", "imgSrcSetsize", "src", "width", "size", "parsedUrl", "name", "extension", "sourceSrcSet", "srcArr", "computedWidth", "def", "result", "ele", "img", "sourceList", "item", "error"]
 }

package/dist/cjs/components/tabs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var x=Object.create;var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var P=(e,t)=>{for(var a in t)p(e,a,{get:t[a],enumerable:!0})},u=(e,t,a,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of T(t))!v.call(e,s)&&s!==a&&p(e,s,{get:()=>t[s],enumerable:!(i=h(t,s))||i.enumerable});return e};var R=(e,t,a)=>(a=e!=null?x(y(e)):{},u(t||!e||!e.__esModule?p(a,"default",{value:e,enumerable:!0}):a,e)),C=e=>u(p({},"__esModule",{value:!0}),e);var w={};P(w,{Tabs:()=>m,TabsContent:()=>c,TabsList:()=>g,TabsTrigger:()=>b});module.exports=C(w);var n=require("react/jsx-runtime"),o=R(require("react")),f=require("../helpers/index.js"),r=R(require("@radix-ui/react-tabs")),d=require("class-variance-authority");const l=o.createContext({align:"left",shape:"square"}),m=o.forwardRef(({children:e,align:t="left",shape:a="square",...i},s)=>(0,n.jsx)(r.Root,{ref:s,...i,children:(0,n.jsx)(l.Provider,{value:{align:t,shape:a},children:e})}));m.displayName="Tabs";const N=(0,d.cva)("",{variants:{align:{left:"justify-left",center:"justify-center",right:"justify-end"},shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{align:"left",shape:"square"}}),L=(0,d.cva)("",{variants:{shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"square"}}),g=o.forwardRef(({className:e,...t},a)=>{const{align:i,shape:s}=o.useContext(l);return(0,n.jsx)(r.List,{ref:a,className:(0,f.cn)("bg-tabs-list-bg flex w-fit overflow-x-auto p-1",N({align:i,shape:s}),e),...t})});g.displayName=r.List.displayName;const b=o.forwardRef(({className:e,...t},a)=>{const{shape:i}=o.useContext(l);return(0,n.jsx)(r.Trigger,{ref:a,className:(0,f.cn)("text-info-primary lg-desktop:text-[16px] disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-[20px] pb-[10px] pt-[11px] text-[14px] font-bold data-[state=active]:bg-white data-[state=active]:text-[#1d1d1d]",e,L({shape:i})),...t})});b.displayName=r.Trigger.displayName;const c=o.forwardRef(({className:e,...t},a)=>(0,n.jsx)(r.Content,{ref:a,className:(0,f.cn)(e),...t}));c.displayName=r.Content.displayName;
+"use strict";"use client";var x=Object.create;var p=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var N=(e,t)=>{for(var a in t)p(e,a,{get:t[a],enumerable:!0})},h=(e,t,a,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of v(t))!C.call(e,s)&&s!==a&&p(e,s,{get:()=>t[s],enumerable:!(o=y(t,s))||o.enumerable});return e};var R=(e,t,a)=>(a=e!=null?x(P(e)):{},h(t||!e||!e.__esModule?p(a,"default",{value:e,enumerable:!0}):a,e)),w=e=>h(p({},"__esModule",{value:!0}),e);var q={};N(q,{Tabs:()=>m,TabsContent:()=>b,TabsList:()=>c,TabsTrigger:()=>g});module.exports=w(q);var n=require("react/jsx-runtime"),i=R(require("react")),l=require("../helpers/index.js"),r=R(require("@radix-ui/react-tabs")),d=require("class-variance-authority");const f=i.createContext({align:"left",shape:"square"}),m=i.forwardRef(({children:e,align:t="left",shape:a="square",...o},s)=>(0,n.jsx)(r.Root,{ref:s,...o,children:(0,n.jsx)(f.Provider,{value:{align:t,shape:a},children:e})}));m.displayName="Tabs";const L=(0,d.cva)("",{variants:{align:{left:"justify-left",center:"justify-center",right:"justify-end"},shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{align:"left",shape:"square"}}),k=(0,d.cva)("",{variants:{shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"square"}}),c=i.forwardRef(({className:e,...t},a)=>{const{align:o,shape:s}=i.useContext(f);return(0,n.jsx)(r.List,{ref:a,className:(0,l.cn)("bg-tabs-list-bg flex w-fit overflow-x-auto p-1",L({align:o,shape:s}),e),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...t})});c.displayName=r.List.displayName;const g=i.forwardRef(({className:e,onClick:t,...a},o)=>{const{shape:s}=i.useContext(f),T=u=>{t?.(u),u.currentTarget.scrollIntoView({behavior:"smooth",inline:"center"})};return(0,n.jsx)(r.Trigger,{ref:o,className:(0,l.cn)("text-info-primary lg-desktop:text-[16px] disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-[20px] pb-[10px] pt-[11px] text-[14px] font-bold data-[state=active]:bg-white data-[state=active]:text-[#1d1d1d]",e,k({shape:s})),onClick:T,...a})});g.displayName=r.Trigger.displayName;const b=i.forwardRef(({className:e,...t},a)=>(0,n.jsx)(r.Content,{ref:a,className:(0,l.cn)(e),...t}));b.displayName=r.Content.displayName;
 //# sourceMappingURL=tabs.js.map

package/dist/cjs/components/tabs.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/tabs.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\nconst TabListContext = React.createContext<{\n  align?: Align\n  shape: Shape\n}>({\n  align: 'left',\n  shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n    align?: Align\n    shape?: Shape\n  }\n>(({ children, align = 'left', shape = 'square', ...props }, ref) => (\n  <TabsPrimitive.Root ref={ref} {...props}>\n    <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n  </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('', {\n  variants: {\n    align: {\n      left: 'justify-left',\n      center: 'justify-center',\n      right: 'justify-end',\n    },\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n    shape: 'square',\n  },\n})\n\nconst tabsTriggerVariants = cva('', {\n  variants: {\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    shape: 'square',\n  },\n})\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n  const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      className={cn(\n        'bg-tabs-list-bg flex w-fit overflow-x-auto p-1',\n        tabsListVariants({\n          align: alignFromParent,\n          shape: shapeFromParent,\n        }),\n        className\n      )}\n      {...props}\n    />\n  )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => {\n  const { shape: shapeFromParent } = React.useContext(TabListContext)\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'text-info-primary lg-desktop:text-[16px] disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-[20px] pb-[10px] pt-[11px] text-[14px] font-bold data-[state=active]:bg-white data-[state=active]:text-[#1d1d1d]',\n        className,\n        tabsTriggerVariants({\n          shape: shapeFromParent,\n        })\n      )}\n      {...props}\n    />\n  )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => <TabsPrimitive.Content ref={ref} className={cn(className)} {...props} />)\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,EAAA,gBAAAC,EAAA,aAAAC,EAAA,gBAAAC,IAAA,eAAAC,EAAAN,GAyBI,IAAAO,EAAA,6BAvBJC,EAAuB,oBACvBC,EAAmB,+BAEnBC,EAA+B,mCAC/BC,EAAoB,oCAGpB,MAAMC,EAAiBJ,EAAM,cAG1B,CACD,MAAO,OACP,MAAO,QACT,CAAC,EAEKN,EAAOM,EAAM,WAMjB,CAAC,CAAE,SAAAK,EAAU,MAAAC,EAAQ,OAAQ,MAAAC,EAAQ,SAAU,GAAGC,CAAM,EAAGC,OAC3D,OAACP,EAAc,KAAd,CAAmB,IAAKO,EAAM,GAAGD,EAChC,mBAACJ,EAAe,SAAf,CAAwB,MAAO,CAAE,MAAAE,EAAO,MAAAC,CAAM,EAAI,SAAAF,EAAS,EAC9D,CACD,EACDX,EAAK,YAAc,OAEnB,MAAMgB,KAAmB,OAAI,GAAI,CAC/B,SAAU,CACR,MAAO,CACL,KAAM,eACN,OAAQ,iBACR,MAAO,aACT,EACA,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,OACP,MAAO,QACT,CACF,CAAC,EAEKC,KAAsB,OAAI,GAAI,CAClC,SAAU,CACR,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,QACT,CACF,CAAC,EACKf,EAAWI,EAAM,WAGrB,CAAC,CAAE,UAAAY,EAAW,GAAGJ,CAAM,EAAGC,IAAQ,CAClC,KAAM,CAAE,MAAOI,EAAiB,MAAOC,CAAgB,EAAId,EAAM,WAAWI,CAAc,EAC1F,SACE,OAACF,EAAc,KAAd,CACC,IAAKO,EACL,aAAW,MACT,iDACAC,EAAiB,CACf,MAAOG,EACP,MAAOC,CACT,CAAC,EACDF,CACF,EACC,GAAGJ,EACN,CAEJ,CAAC,EACDZ,EAAS,YAAcM,EAAc,KAAK,YAE1C,MAAML,EAAcG,EAAM,WAGxB,CAAC,CAAE,UAAAY,EAAW,GAAGJ,CAAM,EAAGC,IAAQ,CAClC,KAAM,CAAE,MAAOK,CAAgB,EAAId,EAAM,WAAWI,CAAc,EAClE,SACE,OAACF,EAAc,QAAd,CACC,IAAKO,EACL,aAAW,MACT,4QACAG,EACAD,EAAoB,CAClB,MAAOG,CACT,CAAC,CACH,EACC,GAAGN,EACN,CAEJ,CAAC,EACDX,EAAY,YAAcK,EAAc,QAAQ,YAEhD,MAAMP,EAAcK,EAAM,WAGxB,CAAC,CAAE,UAAAY,EAAW,GAAGJ,CAAM,EAAGC,OAAQ,OAACP,EAAc,QAAd,CAAsB,IAAKO,EAAK,aAAW,MAAGG,CAAS,EAAI,GAAGJ,EAAO,CAAE,EAC5Gb,EAAY,YAAcO,EAAc,QAAQ",
-  "names": ["tabs_exports", "__export", "Tabs", "TabsContent", "TabsList", "TabsTrigger", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "TabsPrimitive", "import_class_variance_authority", "TabListContext", "children", "align", "shape", "props", "ref", "tabsListVariants", "tabsTriggerVariants", "className", "alignFromParent", "shapeFromParent"]
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\nconst TabListContext = React.createContext<{\n  align?: Align\n  shape: Shape\n}>({\n  align: 'left',\n  shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n    align?: Align\n    shape?: Shape\n  }\n>(({ children, align = 'left', shape = 'square', ...props }, ref) => (\n  <TabsPrimitive.Root ref={ref} {...props}>\n    <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n  </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('', {\n  variants: {\n    align: {\n      left: 'justify-left',\n      center: 'justify-center',\n      right: 'justify-end',\n    },\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n    shape: 'square',\n  },\n})\n\nconst tabsTriggerVariants = cva('', {\n  variants: {\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    shape: 'square',\n  },\n})\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n  const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      className={cn(\n        'bg-tabs-list-bg flex w-fit overflow-x-auto p-1',\n        tabsListVariants({\n          align: alignFromParent,\n          shape: shapeFromParent,\n        }),\n        className\n      )}\n      style={{\n        scrollbarWidth: 'none',\n        msOverflowStyle: 'none',\n      }}\n      {...props}\n    />\n  )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, onClick, ...props }, ref) => {\n  const { shape: shapeFromParent } = React.useContext(TabListContext)\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e)\n    e.currentTarget.scrollIntoView({ behavior: 'smooth', inline: 'center' })\n  }\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'text-info-primary lg-desktop:text-[16px] disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-[20px] pb-[10px] pt-[11px] text-[14px] font-bold data-[state=active]:bg-white data-[state=active]:text-[#1d1d1d]',\n        className,\n        tabsTriggerVariants({\n          shape: shapeFromParent,\n        })\n      )}\n      onClick={handleClick}\n      {...props}\n    />\n  )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => <TabsPrimitive.Content ref={ref} className={cn(className)} {...props} />)\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,EAAA,gBAAAC,EAAA,aAAAC,EAAA,gBAAAC,IAAA,eAAAC,EAAAN,GAyBI,IAAAO,EAAA,6BAvBJC,EAAuB,oBACvBC,EAAmB,+BAEnBC,EAA+B,mCAC/BC,EAAoB,oCAGpB,MAAMC,EAAiBJ,EAAM,cAG1B,CACD,MAAO,OACP,MAAO,QACT,CAAC,EAEKN,EAAOM,EAAM,WAMjB,CAAC,CAAE,SAAAK,EAAU,MAAAC,EAAQ,OAAQ,MAAAC,EAAQ,SAAU,GAAGC,CAAM,EAAGC,OAC3D,OAACP,EAAc,KAAd,CAAmB,IAAKO,EAAM,GAAGD,EAChC,mBAACJ,EAAe,SAAf,CAAwB,MAAO,CAAE,MAAAE,EAAO,MAAAC,CAAM,EAAI,SAAAF,EAAS,EAC9D,CACD,EACDX,EAAK,YAAc,OAEnB,MAAMgB,KAAmB,OAAI,GAAI,CAC/B,SAAU,CACR,MAAO,CACL,KAAM,eACN,OAAQ,iBACR,MAAO,aACT,EACA,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,OACP,MAAO,QACT,CACF,CAAC,EAEKC,KAAsB,OAAI,GAAI,CAClC,SAAU,CACR,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,QACT,CACF,CAAC,EACKf,EAAWI,EAAM,WAGrB,CAAC,CAAE,UAAAY,EAAW,GAAGJ,CAAM,EAAGC,IAAQ,CAClC,KAAM,CAAE,MAAOI,EAAiB,MAAOC,CAAgB,EAAId,EAAM,WAAWI,CAAc,EAC1F,SACE,OAACF,EAAc,KAAd,CACC,IAAKO,EACL,aAAW,MACT,iDACAC,EAAiB,CACf,MAAOG,EACP,MAAOC,CACT,CAAC,EACDF,CACF,EACA,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACC,GAAGJ,EACN,CAEJ,CAAC,EACDZ,EAAS,YAAcM,EAAc,KAAK,YAE1C,MAAML,EAAcG,EAAM,WAGxB,CAAC,CAAE,UAAAY,EAAW,QAAAG,EAAS,GAAGP,CAAM,EAAGC,IAAQ,CAC3C,KAAM,CAAE,MAAOK,CAAgB,EAAId,EAAM,WAAWI,CAAc,EAC5DY,EAAeC,GAA2C,CAC9DF,IAAUE,CAAC,EACXA,EAAE,cAAc,eAAe,CAAE,SAAU,SAAU,OAAQ,QAAS,CAAC,CACzE,EACA,SACE,OAACf,EAAc,QAAd,CACC,IAAKO,EACL,aAAW,MACT,4QACAG,EACAD,EAAoB,CAClB,MAAOG,CACT,CAAC,CACH,EACA,QAASE,EACR,GAAGR,EACN,CAEJ,CAAC,EACDX,EAAY,YAAcK,EAAc,QAAQ,YAEhD,MAAMP,EAAcK,EAAM,WAGxB,CAAC,CAAE,UAAAY,EAAW,GAAGJ,CAAM,EAAGC,OAAQ,OAACP,EAAc,QAAd,CAAsB,IAAKO,EAAK,aAAW,MAAGG,CAAS,EAAI,GAAGJ,EAAO,CAAE,EAC5Gb,EAAY,YAAcO,EAAc,QAAQ",
+  "names": ["tabs_exports", "__export", "Tabs", "TabsContent", "TabsList", "TabsTrigger", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "TabsPrimitive", "import_class_variance_authority", "TabListContext", "children", "align", "shape", "props", "ref", "tabsListVariants", "tabsTriggerVariants", "className", "alignFromParent", "shapeFromParent", "onClick", "handleClick", "e"]
 }

package/dist/cjs/stories/picture.stories.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ imgClassName, source, quality, deviceSizes, className, ...rest }: import("../components/picture.js").PictureProps) => import("react/jsx-runtime").JSX.Element;
+    component: import("react").ForwardRefExoticComponent<import("../components/picture.js").PictureProps & import("react").RefAttributes<HTMLPictureElement>>;
     parameters: {
         layout: string;
         docs: {

package/dist/esm/biz-components/HeroBanner/HeroBanner.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import i from"react";import{Button as n,Heading as k,Picture as y,Text as x}from"../../components/index.js";import{cn as e}from"../../helpers/index.js";import{withStyles as N}from"../../shared/Styles.js";const m=i.forwardRef(({data:c,className:d},g)=>{const{title:r,subtitle:u,pcImage:f,mobileImage:b,primaryButton:p,secondaryButton:l,theme:h="light",caption:o=[]}=c;return a("div",{"data-ui-component-id":"HeroBanner",ref:g,className:e(h==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",d),children:[t(y,{className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:`${f.url} , ${b.url} 767`}),a("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]",children:[r&&a("div",{className:"laptop:text-left max-w-[686px]",children:[t(k,{as:"h1",size:5,className:e("hero-banner-title"),html:r}),t(x,{as:"p",className:e("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:u})]}),a("div",{className:"laptop:justify-start laptop:gap-4 flex items-center gap-3",children:[l&&l.text&&t(n,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:l.text}),p&&p.text&&t(n,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:p.text})]})]}),o.length>0&&t("div",{className:"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]",children:o.map((v,s)=>a(i.Fragment,{children:[t(x,{className:e("hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]"),html:v.title}),s<o.length-1&&t("div",{className:e("bg-info-primary w-px")})]},s))})]})});m.displayName="HeroBanner";var P=N(m);export{P as default};
+"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import m,{useRef as y}from"react";import{useGSAP as N}from"@gsap/react";import w from"gsap";import{ScrollTrigger as B}from"gsap/ScrollTrigger";import{Button as c,Heading as H,Picture as R,Text as x}from"../../components/index.js";import{cn as e}from"../../helpers/index.js";import{withStyles as z}from"../../shared/Styles.js";const g=m.forwardRef(({data:d,className:u},f)=>{const{title:n,subtitle:b,pcImage:h,mobileImage:v,primaryButton:r,secondaryButton:l,theme:k="light",caption:s=[]}=d,p=y(null);return N(()=>{const i=p.current?.clientHeight||0;return console.log("bgImageRef height",i),w.to(p.current,{scrollTrigger:{trigger:p.current,start:"40% top",end:"bottom top",scrub:!0},y:"50%",ease:"linear"}),()=>{B.getAll().forEach(o=>o.kill())}}),a("div",{"data-ui-component-id":"HeroBanner",ref:f,className:e(k==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",u),children:[t(R,{ref:p,className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:`${h.url} , ${v.url} 767`}),a("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]",children:[n&&a("div",{className:"laptop:text-left max-w-[686px]",children:[t(H,{as:"h1",size:5,className:e("hero-banner-title"),html:n}),t(x,{as:"p",className:e("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:b})]}),a("div",{className:"laptop:justify-start laptop:gap-4 flex items-center gap-3",children:[l&&l.text&&t(c,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:l.text}),r&&r.text&&t(c,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:r.text})]})]}),s.length>0&&t("div",{className:"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]",children:s.map((i,o)=>a(m.Fragment,{children:[t(x,{className:e("hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]"),html:i.title}),o<s.length-1&&t("div",{className:e("bg-info-primary w-px")})]},o))})]})});g.displayName="HeroBanner";var F=z(g);export{F as default};
 //# sourceMappingURL=HeroBanner.js.map

package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n  return (\n    <div\n      data-ui-component-id=\"HeroBanner\"\n      ref={ref}\n      className={cn(\n        theme === 'dark' ? 'aiui-dark' : '',\n        'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n        className\n      )}\n    >\n      <Picture\n        className=\"laptop:w-full absolute h-full\"\n        imgClassName=\"h-full object-cover\"\n        source={`${pcImage.url} , ${mobileImage.url} 767`}\n      />\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]\">\n        {title && (\n          <div className=\"laptop:text-left max-w-[686px]\">\n            <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />\n            <Text\n              as=\"p\"\n              className={cn(\n                'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n              )}\n              html={subtitle}\n            />\n          </div>\n        )}\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"laptop:justify-start laptop:gap-4 flex items-center gap-3\">\n          {secondaryButton && secondaryButton.text && (\n            <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n              {secondaryButton.text}\n            </Button>\n          )}\n          {primaryButton && primaryButton.text && (\n            <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n              {primaryButton.text}\n            </Button>\n          )}\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n      {caption.length > 0 && (\n        <div className=\"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          {caption.map((c, index) => (\n            <React.Fragment key={index}>\n              <Text\n                className={cn(\n                  'hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]'\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    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
-  "mappings": "aAoBM,cAAAA,EASI,QAAAC,MATJ,oBAnBN,OAAOC,MAAW,QAElB,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAaP,EAAM,WAA4C,CAAC,CAAE,KAAAQ,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,QAAAC,EAAU,CAAC,CAAE,EAAIV,EAEjH,OACET,EAAC,OACC,uBAAqB,aACrB,IAAKW,EACL,UAAWL,EACTY,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,UAAAX,EAACK,EAAA,CACC,UAAU,gCACV,aAAa,sBACb,OAAQ,GAAGU,EAAQ,GAAG,MAAMC,EAAY,GAAG,OAC7C,EAGAf,EAAC,OAAI,UAAU,6LACZ,UAAAY,GACCZ,EAAC,OAAI,UAAU,iCACb,UAAAD,EAACI,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAWG,EAAG,mBAAmB,EAAG,KAAMM,EAAO,EAC3Eb,EAACM,EAAA,CACC,GAAG,IACH,UAAWC,EACT,oHACF,EACA,KAAMO,EACR,GACF,EAGFb,EAAC,OAAI,UAAU,4DACZ,UAAAiB,GAAmBA,EAAgB,MAClClB,EAACG,EAAA,CAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,+BAC7C,SAAAe,EAAgB,KACnB,EAEDD,GAAiBA,EAAc,MAC9BjB,EAACG,EAAA,CAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAC3C,SAAAc,EAAc,KACjB,GAEJ,GACF,EAGCG,EAAQ,OAAS,GAChBpB,EAAC,OAAI,UAAU,uKACZ,SAAAoB,EAAQ,IAAI,CAACC,EAAGC,IACfrB,EAACC,EAAM,SAAN,CACC,UAAAF,EAACM,EAAA,CACC,UAAWC,EACT,8KACF,EACA,KAAMc,EAAE,MACV,EACCC,EAAQF,EAAQ,OAAS,GAAKpB,EAAC,OAAI,UAAWO,EAAG,sBAAsB,EAAG,IAPxDe,CAQrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDb,EAAW,YAAc,aAEzB,IAAOc,EAAQf,EAAWC,CAAU",
-  "names": ["jsx", "jsxs", "React", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "caption", "c", "index", "HeroBanner_default"]
+  "sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n  const bgImageRef = useRef<HTMLPictureElement>(null)\n\n  useGSAP(() => {\n    const h = bgImageRef.current?.clientHeight || 0\n    console.log('bgImageRef height', h)\n    gsap.to(bgImageRef.current!, {\n      scrollTrigger: {\n        trigger: bgImageRef.current,\n        start: `40% top`,\n        end: 'bottom top',\n        scrub: true,\n      },\n      y: '50%',\n      ease: 'linear',\n    })\n\n    return () => {\n      ScrollTrigger.getAll().forEach(trigger => trigger.kill())\n    }\n  })\n  return (\n    <div\n      data-ui-component-id=\"HeroBanner\"\n      ref={ref}\n      className={cn(\n        theme === 'dark' ? 'aiui-dark' : '',\n        'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n        className\n      )}\n    >\n      <Picture\n        ref={bgImageRef}\n        className=\"laptop:w-full absolute h-full\"\n        imgClassName=\"h-full object-cover\"\n        source={`${pcImage.url} , ${mobileImage.url} 767`}\n      />\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]\">\n        {title && (\n          <div className=\"laptop:text-left max-w-[686px]\">\n            <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />\n            <Text\n              as=\"p\"\n              className={cn(\n                'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n              )}\n              html={subtitle}\n            />\n          </div>\n        )}\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"laptop:justify-start laptop:gap-4 flex items-center gap-3\">\n          {secondaryButton && secondaryButton.text && (\n            <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n              {secondaryButton.text}\n            </Button>\n          )}\n          {primaryButton && primaryButton.text && (\n            <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n              {primaryButton.text}\n            </Button>\n          )}\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n      {caption.length > 0 && (\n        <div className=\"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          {caption.map((c, index) => (\n            <React.Fragment key={index}>\n              <Text\n                className={cn(\n                  'hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]'\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    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
+  "mappings": "aA2CM,cAAAA,EAUI,QAAAC,MAVJ,oBA1CN,OAAOC,GAAS,UAAAC,MAAc,QAC9B,OAAS,WAAAC,MAAe,cACxB,OAAOC,MAAU,OACjB,OAAS,iBAAAC,MAAqB,qBAE9B,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAaX,EAAM,WAA4C,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,QAAAC,EAAU,CAAC,CAAE,EAAIV,EAE3GW,EAAatB,EAA2B,IAAI,EAElD,OAAAC,EAAQ,IAAM,CACZ,MAAMsB,EAAID,EAAW,SAAS,cAAgB,EAC9C,eAAQ,IAAI,oBAAqBC,CAAC,EAClCrB,EAAK,GAAGoB,EAAW,QAAU,CAC3B,cAAe,CACb,QAASA,EAAW,QACpB,MAAO,UACP,IAAK,aACL,MAAO,EACT,EACA,EAAG,MACH,KAAM,QACR,CAAC,EAEM,IAAM,CACXnB,EAAc,OAAO,EAAE,QAAQqB,GAAWA,EAAQ,KAAK,CAAC,CAC1D,CACF,CAAC,EAEC1B,EAAC,OACC,uBAAqB,aACrB,IAAKe,EACL,UAAWL,EACTY,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,UAAAf,EAACS,EAAA,CACC,IAAKgB,EACL,UAAU,gCACV,aAAa,sBACb,OAAQ,GAAGN,EAAQ,GAAG,MAAMC,EAAY,GAAG,OAC7C,EAGAnB,EAAC,OAAI,UAAU,6LACZ,UAAAgB,GACChB,EAAC,OAAI,UAAU,iCACb,UAAAD,EAACQ,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAWG,EAAG,mBAAmB,EAAG,KAAMM,EAAO,EAC3EjB,EAACU,EAAA,CACC,GAAG,IACH,UAAWC,EACT,oHACF,EACA,KAAMO,EACR,GACF,EAGFjB,EAAC,OAAI,UAAU,4DACZ,UAAAqB,GAAmBA,EAAgB,MAClCtB,EAACO,EAAA,CAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,+BAC7C,SAAAe,EAAgB,KACnB,EAEDD,GAAiBA,EAAc,MAC9BrB,EAACO,EAAA,CAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAC3C,SAAAc,EAAc,KACjB,GAEJ,GACF,EAGCG,EAAQ,OAAS,GAChBxB,EAAC,OAAI,UAAU,uKACZ,SAAAwB,EAAQ,IAAI,CAACI,EAAGC,IACf5B,EAACC,EAAM,SAAN,CACC,UAAAF,EAACU,EAAA,CACC,UAAWC,EACT,8KACF,EACA,KAAMiB,EAAE,MACV,EACCC,EAAQL,EAAQ,OAAS,GAAKxB,EAAC,OAAI,UAAWW,EAAG,sBAAsB,EAAG,IAPxDkB,CAQrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDhB,EAAW,YAAc,aAEzB,IAAOiB,EAAQlB,EAAWC,CAAU",
+  "names": ["jsx", "jsxs", "React", "useRef", "useGSAP", "gsap", "ScrollTrigger", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "caption", "bgImageRef", "h", "trigger", "c", "index", "HeroBanner_default"]
 }

package/dist/esm/components/picture.d.ts CHANGED Viewed

@@ -9,5 +9,5 @@ export interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement>
     /** 响应式图片，对应picture 下source 的max-width */
     deviceSizes?: number[];
 }
-declare const Picture: ({ imgClassName, source, quality, deviceSizes, className, ...rest }: PictureProps) => import("react/jsx-runtime").JSX.Element;
+declare const Picture: React.ForwardRefExoticComponent<PictureProps & React.RefAttributes<HTMLPictureElement>>;
 export default Picture;

package/dist/esm/components/picture.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as d,jsxs as A}from"react/jsx-runtime";import{useCallback as f,useMemo as I}from"react";const M=["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],_=3960,x=3980,E=n=>M.some(c=>n==c),S=(n="")=>/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(n),$=({imgClassName:n="",source:c="",quality:p=2,deviceSizes:u=[375,767,1023,1279,1439,1539,1919],className:h,...m})=>{const i=f(({src:e,width:r})=>{const s=r;try{const t=new URL(e);if(!E(t.hostname))return e;const o=t.pathname.split("/").pop()||"";if(S(o)&&!/_[0-9]{2,4}x/.test(e)){const[g,a]=o.split(".");return`${t.origin}${t.pathname.replace(o,`${g}_${s<_?s:x}x.${a}`)}`}}catch{return e}},[]),l=f(({srcArr:e,width:r})=>{const s=r*p,t=i({src:e[0][0],width:s});let o;return e.forEach(a=>{var b=a[0];a.length>1&&parseInt(a[1],10)>=r&&(o=i({src:b,width:s}))}),d("source",{srcSet:o||t,media:`(max-width: ${r}px)`},r)},[i,p]),w=I(()=>{if(typeof c!="string"||!c)return[];let e;try{e=c.replace(/[\r\n]/g,"").replace(/\s\s+/g," ").split(",").map(t=>t.split(" ").filter(Boolean))}catch(t){return console.log(t),[]}const r=u.map(t=>l({srcArr:e,width:t})),s=i({src:e[0][0],width:1920*p});return r.push(d("img",{src:s,className:`w-full ${n}`,...m},"default")),r},[u,n,i,p,m,c,l]);return A("picture",{className:`block overflow-hidden ${h}`,children:[w,m.children]})};var k=$;export{k as default};
+"use client";import{jsx as d,jsxs as L}from"react/jsx-runtime";import b,{useCallback as f,useMemo as E}from"react";const I=["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],_=3960,x=3980,S=n=>I.some(c=>n==c),$=(n="")=>/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(n),A=b.forwardRef(({imgClassName:n="",source:c="",quality:p=2,deviceSizes:u=[375,767,1023,1279,1439,1539,1919],className:h,...m},w)=>{const i=f(({src:t,width:r})=>{const s=r;try{const e=new URL(t);if(!S(e.hostname))return t;const o=e.pathname.split("/").pop()||"";if($(o)&&!/_[0-9]{2,4}x/.test(t)){const[g,a]=o.split(".");return`${e.origin}${e.pathname.replace(o,`${g}_${s<_?s:x}x.${a}`)}`}}catch{return t}},[]),l=f(({srcArr:t,width:r})=>{const s=r*p,e=i({src:t[0][0],width:s});let o;return t.forEach(a=>{var P=a[0];a.length>1&&parseInt(a[1],10)>=r&&(o=i({src:P,width:s}))}),d("source",{srcSet:o||e,media:`(max-width: ${r}px)`},r)},[i,p]),M=E(()=>{if(typeof c!="string"||!c)return[];let t;try{t=c.replace(/[\r\n]/g,"").replace(/\s\s+/g," ").split(",").map(e=>e.split(" ").filter(Boolean))}catch(e){return console.log(e),[]}const r=u.map(e=>l({srcArr:t,width:e})),s=i({src:t[0][0],width:1920*p});return r.push(d("img",{src:s,className:`w-full ${n}`,...m},"default")),r},[u,n,i,p,m,c,l]);return L("picture",{ref:w,className:`block overflow-hidden ${h}`,children:[M,m.children]})});var y=A;export{y as default};
 //# sourceMappingURL=picture.js.map

package/dist/esm/components/picture.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/picture.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n  imgClassName?: string\n  /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n  source?: string\n  /** \u56FE\u7247\u8D28\u91CF */\n  quality?: number\n  /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n  deviceSizes?: number[]\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n  return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\nconst Picture = ({\n  imgClassName = '',\n  source = '',\n  quality = 2,\n  deviceSizes = [375, 767, 1023, 1279, 1439, 1539, 1919],\n  className,\n  ...rest\n}: PictureProps) => {\n  const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n    const size = width\n    try {\n      const parsedUrl = new URL(src)\n      if (!isMatchDomain(parsedUrl.hostname)) {\n        return src\n      }\n      const fileName = parsedUrl.pathname.split('/').pop() || ''\n      if (idMatchFileExtensions(fileName) && !/_[0-9]{2,4}x/.test(src)) {\n        const [name, extension] = fileName.split('.')\n        return `${parsedUrl.origin}${parsedUrl.pathname.replace(\n          fileName,\n          `${name}_${size < MAX_SIZE ? size : FIXED_MAX_SIZE}x.${extension}`\n        )}`\n      }\n    } catch (error) {\n      return src\n    }\n  }, [])\n\n  const sourceSrcSet = useCallback(\n    ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n      const computedWidth = width * quality\n      const def = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n      let result\n      srcArr.forEach(ele => {\n        var img = ele[0]\n        if (ele.length > 1 && parseInt(ele[1], 10) >= width) {\n          result = imgSrcSetsize({ src: img, width: computedWidth })\n        }\n      })\n      const srcset = result || def\n      return <source key={width} srcSet={srcset} media={`(max-width: ${width}px)`} />\n    },\n    [imgSrcSetsize, quality]\n  )\n\n  const sourceList = useMemo(() => {\n    if (typeof source !== 'string' || !source) return []\n    let srcArr\n    try {\n      srcArr = source\n        .replace(/[\\r\\n]/g, '')\n        .replace(/\\s\\s+/g, ' ')\n        .split(',')\n        .map(item => item.split(' ').filter(Boolean))\n    } catch (error) {\n      console.log(error)\n      return []\n    }\n    const sourceList = deviceSizes.map(width => {\n      return sourceSrcSet({ srcArr, width })\n    })\n\n    const img = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n    sourceList.push(<img key=\"default\" src={img} className={`w-full ${imgClassName}`} {...rest} />)\n    return sourceList\n  }, [deviceSizes, imgClassName, imgSrcSetsize, quality, rest, source, sourceSrcSet])\n\n  return (\n    <picture className={`block overflow-hidden ${className}`}>\n      {sourceList}\n      {rest.children}\n    </picture>\n  )\n}\nexport default Picture\n"],
-  "mappings": "aAgEa,cAAAA,EA6BT,QAAAC,MA7BS,oBA/Db,OAAgB,eAAAC,EAAa,WAAAC,MAAe,QAE5C,MAAMC,EAAkC,CAAC,kBAAmB,qBAAsB,kBAAkB,EAE9FC,EAAW,KACXC,EAAiB,KAajBC,EAAiBC,GACdJ,EAAgC,KAAKK,GAAUD,GAAaC,CAAM,EAErEC,EAAwB,CAACC,EAAmB,KAAO,yCAAyC,KAAKA,CAAQ,EAEzGC,EAAU,CAAC,CACf,aAAAC,EAAe,GACf,OAAAC,EAAS,GACT,QAAAC,EAAU,EACV,YAAAC,EAAc,CAAC,IAAK,IAAK,KAAM,KAAM,KAAM,KAAM,IAAI,EACrD,UAAAC,EACA,GAAGC,CACL,IAAoB,CAClB,MAAMC,EAAgBjB,EAAY,CAAC,CAAE,IAAAkB,EAAK,MAAAC,CAAM,IAAsC,CACpF,MAAMC,EAAOD,EACb,GAAI,CACF,MAAME,EAAY,IAAI,IAAIH,CAAG,EAC7B,GAAI,CAACb,EAAcgB,EAAU,QAAQ,EACnC,OAAOH,EAET,MAAMT,EAAWY,EAAU,SAAS,MAAM,GAAG,EAAE,IAAI,GAAK,GACxD,GAAIb,EAAsBC,CAAQ,GAAK,CAAC,eAAe,KAAKS,CAAG,EAAG,CAChE,KAAM,CAACI,EAAMC,CAAS,EAAId,EAAS,MAAM,GAAG,EAC5C,MAAO,GAAGY,EAAU,MAAM,GAAGA,EAAU,SAAS,QAC9CZ,EACA,GAAGa,CAAI,IAAIF,EAAOjB,EAAWiB,EAAOhB,CAAc,KAAKmB,CAAS,EAClE,CAAC,EACH,CACF,MAAgB,CACd,OAAOL,CACT,CACF,EAAG,CAAC,CAAC,EAECM,EAAexB,EACnB,CAAC,CAAE,OAAAyB,EAAQ,MAAAN,CAAM,IAA6C,CAC5D,MAAMO,EAAgBP,EAAQN,EACxBc,EAAMV,EAAc,CAAE,IAAKQ,EAAO,CAAC,EAAE,CAAC,EAAG,MAAOC,CAAc,CAAC,EACrE,IAAIE,EACJ,OAAAH,EAAO,QAAQI,GAAO,CACpB,IAAIC,EAAMD,EAAI,CAAC,EACXA,EAAI,OAAS,GAAK,SAASA,EAAI,CAAC,EAAG,EAAE,GAAKV,IAC5CS,EAASX,EAAc,CAAE,IAAKa,EAAK,MAAOJ,CAAc,CAAC,EAE7D,CAAC,EAEM5B,EAAC,UAAmB,OADZ8B,GAAUD,EACkB,MAAO,eAAeR,CAAK,OAAlDA,CAAyD,CAC/E,EACA,CAACF,EAAeJ,CAAO,CACzB,EAEMkB,EAAa9B,EAAQ,IAAM,CAC/B,GAAI,OAAOW,GAAW,UAAY,CAACA,EAAQ,MAAO,CAAC,EACnD,IAAIa,EACJ,GAAI,CACFA,EAASb,EACN,QAAQ,UAAW,EAAE,EACrB,QAAQ,SAAU,GAAG,EACrB,MAAM,GAAG,EACT,IAAIoB,GAAQA,EAAK,MAAM,GAAG,EAAE,OAAO,OAAO,CAAC,CAChD,OAASC,EAAO,CACd,eAAQ,IAAIA,CAAK,EACV,CAAC,CACV,CACA,MAAMF,EAAajB,EAAY,IAAIK,GAC1BK,EAAa,CAAE,OAAAC,EAAQ,MAAAN,CAAM,CAAC,CACtC,EAEKW,EAAMb,EAAc,CAAE,IAAKQ,EAAO,CAAC,EAAE,CAAC,EAAG,MAAO,KAAOZ,CAAQ,CAAC,EAEtE,OAAAkB,EAAW,KAAKjC,EAAC,OAAkB,IAAKgC,EAAK,UAAW,UAAUnB,CAAY,GAAK,GAAGK,GAA7D,SAAmE,CAAE,EACvFe,CACT,EAAG,CAACjB,EAAaH,EAAcM,EAAeJ,EAASG,EAAMJ,EAAQY,CAAY,CAAC,EAElF,OACEzB,EAAC,WAAQ,UAAW,yBAAyBgB,CAAS,GACnD,UAAAgB,EACAf,EAAK,UACR,CAEJ,EACA,IAAOkB,EAAQxB",
-  "names": ["jsx", "jsxs", "useCallback", "useMemo", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "Picture", "imgClassName", "source", "quality", "deviceSizes", "className", "rest", "imgSrcSetsize", "src", "width", "size", "parsedUrl", "name", "extension", "sourceSrcSet", "srcArr", "computedWidth", "def", "result", "ele", "img", "sourceList", "item", "error", "picture_default"]
+  "sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n  imgClassName?: string\n  /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n  source?: string\n  /** \u56FE\u7247\u8D28\u91CF */\n  quality?: number\n  /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n  deviceSizes?: number[]\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n  return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n  (\n    {\n      imgClassName = '',\n      source = '',\n      quality = 2,\n      deviceSizes = [375, 767, 1023, 1279, 1439, 1539, 1919],\n      className,\n      ...rest\n    }: PictureProps,\n    ref\n  ) => {\n    const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n      const size = width\n      try {\n        const parsedUrl = new URL(src)\n        if (!isMatchDomain(parsedUrl.hostname)) {\n          return src\n        }\n        const fileName = parsedUrl.pathname.split('/').pop() || ''\n        if (idMatchFileExtensions(fileName) && !/_[0-9]{2,4}x/.test(src)) {\n          const [name, extension] = fileName.split('.')\n          return `${parsedUrl.origin}${parsedUrl.pathname.replace(\n            fileName,\n            `${name}_${size < MAX_SIZE ? size : FIXED_MAX_SIZE}x.${extension}`\n          )}`\n        }\n      } catch (error) {\n        return src\n      }\n    }, [])\n\n    const sourceSrcSet = useCallback(\n      ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n        const computedWidth = width * quality\n        const def = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n        let result\n        srcArr.forEach(ele => {\n          var img = ele[0]\n          if (ele.length > 1 && parseInt(ele[1], 10) >= width) {\n            result = imgSrcSetsize({ src: img, width: computedWidth })\n          }\n        })\n        const srcset = result || def\n        return <source key={width} srcSet={srcset} media={`(max-width: ${width}px)`} />\n      },\n      [imgSrcSetsize, quality]\n    )\n\n    const sourceList = useMemo(() => {\n      if (typeof source !== 'string' || !source) return []\n      let srcArr\n      try {\n        srcArr = source\n          .replace(/[\\r\\n]/g, '')\n          .replace(/\\s\\s+/g, ' ')\n          .split(',')\n          .map(item => item.split(' ').filter(Boolean))\n      } catch (error) {\n        console.log(error)\n        return []\n      }\n      const sourceList = deviceSizes.map(width => {\n        return sourceSrcSet({ srcArr, width })\n      })\n\n      const img = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n      sourceList.push(<img key=\"default\" src={img} className={`w-full ${imgClassName}`} {...rest} />)\n      return sourceList\n    }, [deviceSizes, imgClassName, imgSrcSetsize, quality, rest, source, sourceSrcSet])\n\n    return (\n      <picture ref={ref} className={`block overflow-hidden ${className}`}>\n        {sourceList}\n        {rest.children}\n      </picture>\n    )\n  }\n)\nexport default Picture\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useCallback", "useMemo", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "Picture", "imgClassName", "source", "quality", "deviceSizes", "className", "rest", "ref", "imgSrcSetsize", "src", "width", "size", "parsedUrl", "name", "extension", "sourceSrcSet", "srcArr", "computedWidth", "def", "result", "ele", "img", "sourceList", "item", "error", "picture_default"]
 }

package/dist/esm/components/tabs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as r}from"react/jsx-runtime";import*as s from"react";import{cn as p}from"../helpers/index.js";import*as i from"@radix-ui/react-tabs";import{cva as l}from"class-variance-authority";const f=s.createContext({align:"left",shape:"square"}),d=s.forwardRef(({children:e,align:t="left",shape:a="square",...o},n)=>r(i.Root,{ref:n,...o,children:r(f.Provider,{value:{align:t,shape:a},children:e})}));d.displayName="Tabs";const c=l("",{variants:{align:{left:"justify-left",center:"justify-center",right:"justify-end"},shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{align:"left",shape:"square"}}),u=l("",{variants:{shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"square"}}),m=s.forwardRef(({className:e,...t},a)=>{const{align:o,shape:n}=s.useContext(f);return r(i.List,{ref:a,className:p("bg-tabs-list-bg flex w-fit overflow-x-auto p-1",c({align:o,shape:n}),e),...t})});m.displayName=i.List.displayName;const g=s.forwardRef(({className:e,...t},a)=>{const{shape:o}=s.useContext(f);return r(i.Trigger,{ref:a,className:p("text-info-primary lg-desktop:text-[16px] disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-[20px] pb-[10px] pt-[11px] text-[14px] font-bold data-[state=active]:bg-white data-[state=active]:text-[#1d1d1d]",e,u({shape:o})),...t})});g.displayName=i.Trigger.displayName;const b=s.forwardRef(({className:e,...t},a)=>r(i.Content,{ref:a,className:p(e),...t}));b.displayName=i.Content.displayName;export{d as Tabs,b as TabsContent,m as TabsList,g as TabsTrigger};
+"use client";import{jsx as n}from"react/jsx-runtime";import*as s from"react";import{cn as p}from"../helpers/index.js";import*as o from"@radix-ui/react-tabs";import{cva as d}from"class-variance-authority";const l=s.createContext({align:"left",shape:"square"}),m=s.forwardRef(({children:e,align:t="left",shape:a="square",...i},r)=>n(o.Root,{ref:r,...i,children:n(l.Provider,{value:{align:t,shape:a},children:e})}));m.displayName="Tabs";const h=d("",{variants:{align:{left:"justify-left",center:"justify-center",right:"justify-end"},shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{align:"left",shape:"square"}}),R=d("",{variants:{shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"square"}}),c=s.forwardRef(({className:e,...t},a)=>{const{align:i,shape:r}=s.useContext(l);return n(o.List,{ref:a,className:p("bg-tabs-list-bg flex w-fit overflow-x-auto p-1",h({align:i,shape:r}),e),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...t})});c.displayName=o.List.displayName;const g=s.forwardRef(({className:e,onClick:t,...a},i)=>{const{shape:r}=s.useContext(l),u=f=>{t?.(f),f.currentTarget.scrollIntoView({behavior:"smooth",inline:"center"})};return n(o.Trigger,{ref:i,className:p("text-info-primary lg-desktop:text-[16px] disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-[20px] pb-[10px] pt-[11px] text-[14px] font-bold data-[state=active]:bg-white data-[state=active]:text-[#1d1d1d]",e,R({shape:r})),onClick:u,...a})});g.displayName=o.Trigger.displayName;const b=s.forwardRef(({className:e,...t},a)=>n(o.Content,{ref:a,className:p(e),...t}));b.displayName=o.Content.displayName;export{m as Tabs,b as TabsContent,c as TabsList,g as TabsTrigger};
 //# sourceMappingURL=tabs.js.map

package/dist/esm/components/tabs.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/tabs.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\nconst TabListContext = React.createContext<{\n  align?: Align\n  shape: Shape\n}>({\n  align: 'left',\n  shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n    align?: Align\n    shape?: Shape\n  }\n>(({ children, align = 'left', shape = 'square', ...props }, ref) => (\n  <TabsPrimitive.Root ref={ref} {...props}>\n    <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n  </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('', {\n  variants: {\n    align: {\n      left: 'justify-left',\n      center: 'justify-center',\n      right: 'justify-end',\n    },\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n    shape: 'square',\n  },\n})\n\nconst tabsTriggerVariants = cva('', {\n  variants: {\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    shape: 'square',\n  },\n})\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n  const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      className={cn(\n        'bg-tabs-list-bg flex w-fit overflow-x-auto p-1',\n        tabsListVariants({\n          align: alignFromParent,\n          shape: shapeFromParent,\n        }),\n        className\n      )}\n      {...props}\n    />\n  )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => {\n  const { shape: shapeFromParent } = React.useContext(TabListContext)\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'text-info-primary lg-desktop:text-[16px] disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-[20px] pb-[10px] pt-[11px] text-[14px] font-bold data-[state=active]:bg-white data-[state=active]:text-[#1d1d1d]',\n        className,\n        tabsTriggerVariants({\n          shape: shapeFromParent,\n        })\n      )}\n      {...props}\n    />\n  )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => <TabsPrimitive.Content ref={ref} className={cn(className)} {...props} />)\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
-  "mappings": "aAyBI,cAAAA,MAAA,oBAvBJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,sBAEnB,UAAYC,MAAmB,uBAC/B,OAAS,OAAAC,MAAW,2BAGpB,MAAMC,EAAiBJ,EAAM,cAG1B,CACD,MAAO,OACP,MAAO,QACT,CAAC,EAEKK,EAAOL,EAAM,WAMjB,CAAC,CAAE,SAAAM,EAAU,MAAAC,EAAQ,OAAQ,MAAAC,EAAQ,SAAU,GAAGC,CAAM,EAAGC,IAC3DX,EAACG,EAAc,KAAd,CAAmB,IAAKQ,EAAM,GAAGD,EAChC,SAAAV,EAACK,EAAe,SAAf,CAAwB,MAAO,CAAE,MAAAG,EAAO,MAAAC,CAAM,EAAI,SAAAF,EAAS,EAC9D,CACD,EACDD,EAAK,YAAc,OAEnB,MAAMM,EAAmBR,EAAI,GAAI,CAC/B,SAAU,CACR,MAAO,CACL,KAAM,eACN,OAAQ,iBACR,MAAO,aACT,EACA,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,OACP,MAAO,QACT,CACF,CAAC,EAEKS,EAAsBT,EAAI,GAAI,CAClC,SAAU,CACR,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,QACT,CACF,CAAC,EACKU,EAAWb,EAAM,WAGrB,CAAC,CAAE,UAAAc,EAAW,GAAGL,CAAM,EAAGC,IAAQ,CAClC,KAAM,CAAE,MAAOK,EAAiB,MAAOC,CAAgB,EAAIhB,EAAM,WAAWI,CAAc,EAC1F,OACEL,EAACG,EAAc,KAAd,CACC,IAAKQ,EACL,UAAWT,EACT,iDACAU,EAAiB,CACf,MAAOI,EACP,MAAOC,CACT,CAAC,EACDF,CACF,EACC,GAAGL,EACN,CAEJ,CAAC,EACDI,EAAS,YAAcX,EAAc,KAAK,YAE1C,MAAMe,EAAcjB,EAAM,WAGxB,CAAC,CAAE,UAAAc,EAAW,GAAGL,CAAM,EAAGC,IAAQ,CAClC,KAAM,CAAE,MAAOM,CAAgB,EAAIhB,EAAM,WAAWI,CAAc,EAClE,OACEL,EAACG,EAAc,QAAd,CACC,IAAKQ,EACL,UAAWT,EACT,4QACAa,EACAF,EAAoB,CAClB,MAAOI,CACT,CAAC,CACH,EACC,GAAGP,EACN,CAEJ,CAAC,EACDQ,EAAY,YAAcf,EAAc,QAAQ,YAEhD,MAAMgB,EAAclB,EAAM,WAGxB,CAAC,CAAE,UAAAc,EAAW,GAAGL,CAAM,EAAGC,IAAQX,EAACG,EAAc,QAAd,CAAsB,IAAKQ,EAAK,UAAWT,EAAGa,CAAS,EAAI,GAAGL,EAAO,CAAE,EAC5GS,EAAY,YAAchB,EAAc,QAAQ",
-  "names": ["jsx", "React", "cn", "TabsPrimitive", "cva", "TabListContext", "Tabs", "children", "align", "shape", "props", "ref", "tabsListVariants", "tabsTriggerVariants", "TabsList", "className", "alignFromParent", "shapeFromParent", "TabsTrigger", "TabsContent"]
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\nconst TabListContext = React.createContext<{\n  align?: Align\n  shape: Shape\n}>({\n  align: 'left',\n  shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n    align?: Align\n    shape?: Shape\n  }\n>(({ children, align = 'left', shape = 'square', ...props }, ref) => (\n  <TabsPrimitive.Root ref={ref} {...props}>\n    <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n  </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('', {\n  variants: {\n    align: {\n      left: 'justify-left',\n      center: 'justify-center',\n      right: 'justify-end',\n    },\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n    shape: 'square',\n  },\n})\n\nconst tabsTriggerVariants = cva('', {\n  variants: {\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    shape: 'square',\n  },\n})\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n  const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      className={cn(\n        'bg-tabs-list-bg flex w-fit overflow-x-auto p-1',\n        tabsListVariants({\n          align: alignFromParent,\n          shape: shapeFromParent,\n        }),\n        className\n      )}\n      style={{\n        scrollbarWidth: 'none',\n        msOverflowStyle: 'none',\n      }}\n      {...props}\n    />\n  )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, onClick, ...props }, ref) => {\n  const { shape: shapeFromParent } = React.useContext(TabListContext)\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e)\n    e.currentTarget.scrollIntoView({ behavior: 'smooth', inline: 'center' })\n  }\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'text-info-primary lg-desktop:text-[16px] disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-[20px] pb-[10px] pt-[11px] text-[14px] font-bold data-[state=active]:bg-white data-[state=active]:text-[#1d1d1d]',\n        className,\n        tabsTriggerVariants({\n          shape: shapeFromParent,\n        })\n      )}\n      onClick={handleClick}\n      {...props}\n    />\n  )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => <TabsPrimitive.Content ref={ref} className={cn(className)} {...props} />)\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
+  "mappings": "aAyBI,cAAAA,MAAA,oBAvBJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,sBAEnB,UAAYC,MAAmB,uBAC/B,OAAS,OAAAC,MAAW,2BAGpB,MAAMC,EAAiBJ,EAAM,cAG1B,CACD,MAAO,OACP,MAAO,QACT,CAAC,EAEKK,EAAOL,EAAM,WAMjB,CAAC,CAAE,SAAAM,EAAU,MAAAC,EAAQ,OAAQ,MAAAC,EAAQ,SAAU,GAAGC,CAAM,EAAGC,IAC3DX,EAACG,EAAc,KAAd,CAAmB,IAAKQ,EAAM,GAAGD,EAChC,SAAAV,EAACK,EAAe,SAAf,CAAwB,MAAO,CAAE,MAAAG,EAAO,MAAAC,CAAM,EAAI,SAAAF,EAAS,EAC9D,CACD,EACDD,EAAK,YAAc,OAEnB,MAAMM,EAAmBR,EAAI,GAAI,CAC/B,SAAU,CACR,MAAO,CACL,KAAM,eACN,OAAQ,iBACR,MAAO,aACT,EACA,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,OACP,MAAO,QACT,CACF,CAAC,EAEKS,EAAsBT,EAAI,GAAI,CAClC,SAAU,CACR,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,QACT,CACF,CAAC,EACKU,EAAWb,EAAM,WAGrB,CAAC,CAAE,UAAAc,EAAW,GAAGL,CAAM,EAAGC,IAAQ,CAClC,KAAM,CAAE,MAAOK,EAAiB,MAAOC,CAAgB,EAAIhB,EAAM,WAAWI,CAAc,EAC1F,OACEL,EAACG,EAAc,KAAd,CACC,IAAKQ,EACL,UAAWT,EACT,iDACAU,EAAiB,CACf,MAAOI,EACP,MAAOC,CACT,CAAC,EACDF,CACF,EACA,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACC,GAAGL,EACN,CAEJ,CAAC,EACDI,EAAS,YAAcX,EAAc,KAAK,YAE1C,MAAMe,EAAcjB,EAAM,WAGxB,CAAC,CAAE,UAAAc,EAAW,QAAAI,EAAS,GAAGT,CAAM,EAAGC,IAAQ,CAC3C,KAAM,CAAE,MAAOM,CAAgB,EAAIhB,EAAM,WAAWI,CAAc,EAC5De,EAAeC,GAA2C,CAC9DF,IAAUE,CAAC,EACXA,EAAE,cAAc,eAAe,CAAE,SAAU,SAAU,OAAQ,QAAS,CAAC,CACzE,EACA,OACErB,EAACG,EAAc,QAAd,CACC,IAAKQ,EACL,UAAWT,EACT,4QACAa,EACAF,EAAoB,CAClB,MAAOI,CACT,CAAC,CACH,EACA,QAASG,EACR,GAAGV,EACN,CAEJ,CAAC,EACDQ,EAAY,YAAcf,EAAc,QAAQ,YAEhD,MAAMmB,EAAcrB,EAAM,WAGxB,CAAC,CAAE,UAAAc,EAAW,GAAGL,CAAM,EAAGC,IAAQX,EAACG,EAAc,QAAd,CAAsB,IAAKQ,EAAK,UAAWT,EAAGa,CAAS,EAAI,GAAGL,EAAO,CAAE,EAC5GY,EAAY,YAAcnB,EAAc,QAAQ",
+  "names": ["jsx", "React", "cn", "TabsPrimitive", "cva", "TabListContext", "Tabs", "children", "align", "shape", "props", "ref", "tabsListVariants", "tabsTriggerVariants", "TabsList", "className", "alignFromParent", "shapeFromParent", "TabsTrigger", "onClick", "handleClick", "e", "TabsContent"]
 }

package/dist/esm/stories/picture.stories.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ imgClassName, source, quality, deviceSizes, className, ...rest }: import("../components/picture.js").PictureProps) => import("react/jsx-runtime").JSX.Element;
+    component: import("react").ForwardRefExoticComponent<import("../components/picture.js").PictureProps & import("react").RefAttributes<HTMLPictureElement>>;
     parameters: {
         layout: string;
         docs: {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "0.0.27-alpha.85",
+  "version": "0.0.27-alpha.86",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",

package/style.css CHANGED Viewed

@@ -675,6 +675,9 @@ video {
 .block {
   display: block;
 }
+.inline {
+  display: inline;
+}
 .flex {
   display: flex;
 }