@anker-in/headless-ui 1.0.26-alpha.1762827586408 → 1.0.26-alpha.1762841026334

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 (23) hide show
  1. package/dist/cjs/biz-components/FeatureCards/FeatureCards.js +1 -1
  2. package/dist/cjs/biz-components/FeatureCards/FeatureCards.js.map +3 -3
  3. package/dist/cjs/biz-components/FeatureCards/types.d.ts +2 -0
  4. package/dist/cjs/biz-components/FeatureCards/types.js +1 -1
  5. package/dist/cjs/biz-components/FeatureCards/types.js.map +1 -1
  6. package/dist/cjs/shared/ErrorBoundary.d.ts +18 -0
  7. package/dist/cjs/shared/ErrorBoundary.js +2 -0
  8. package/dist/cjs/shared/ErrorBoundary.js.map +7 -0
  9. package/dist/cjs/shared/Styles.js +1 -1
  10. package/dist/cjs/shared/Styles.js.map +3 -3
  11. package/dist/cjs/stories/featureCards.stories.js +21 -1
  12. package/dist/cjs/stories/featureCards.stories.js.map +3 -3
  13. package/dist/esm/biz-components/FeatureCards/FeatureCards.js +1 -1
  14. package/dist/esm/biz-components/FeatureCards/FeatureCards.js.map +3 -3
  15. package/dist/esm/biz-components/FeatureCards/types.d.ts +2 -0
  16. package/dist/esm/shared/ErrorBoundary.d.ts +18 -0
  17. package/dist/esm/shared/ErrorBoundary.js +2 -0
  18. package/dist/esm/shared/ErrorBoundary.js.map +7 -0
  19. package/dist/esm/shared/Styles.js +1 -1
  20. package/dist/esm/shared/Styles.js.map +3 -3
  21. package/dist/esm/stories/featureCards.stories.js +22 -2
  22. package/dist/esm/stories/featureCards.stories.js.map +3 -3
  23. package/package.json +1 -1
package/dist/cjs/biz-components/FeatureCards/FeatureCards.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var b=Object.create;var o=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var H=(a,s)=>{for(var p in s)o(a,p,{get:s[p],enumerable:!0})},g=(a,s,p,i)=>{if(s&&typeof s=="object"||typeof s=="function")for(let l of F(s))!z.call(a,l)&&l!==p&&o(a,l,{get:()=>s[l],enumerable:!(i=C(s,l))||i.enumerable});return a};var $=(a,s,p)=>(p=a!=null?b(T(a)):{},g(s||!a||!a.__esModule?o(p,"default",{value:a,enumerable:!0}):p,a)),R=a=>g(o({},"__esModule",{value:!0}),a);var j={};H(j,{default:()=>S});module.exports=R(j);var e=require("react/jsx-runtime"),d=$(require("react")),r=require("../../components/index.js"),c=require("../../helpers/utils.js"),k=require("../../shared/Styles.js"),N=require("../../hooks/useExposure.js"),w=require("../../shared/trackUrlRef.js"),x=require("swiper/react");const n="image",f="feature_cards",v=d.default.forwardRef(({data:a,className:s},p)=>{const{title:i,subtitle:l,items:m=[]}=a,u=(0,d.useRef)(null);(0,N.useExposure)(u,{componentType:n,componentName:f,componentTitle:i,componentDescription:l}),(0,d.useImperativeHandle)(p,()=>u.current);const y=t=>{const _=(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(r.Picture,{source:t.image?.url,alt:t.image?.alt||t.title,className:"feature-cards__card-image absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),(0,e.jsxs)("div",{className:"feature-cards__card-content z-10",children:[(0,e.jsx)(r.Heading,{size:3,as:"h2",className:"feature-cards__card-title laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]",children:t.title}),(0,e.jsx)(r.Text,{size:4,as:"p",className:"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] text-[14px] laptop:h-[44px] lg-desktop:text-[18px]",children:t.subtitle})]})]}),h=(0,c.cn)("feature-cards__card relative flex h-[360px] max-h-[560px] flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary tablet:h-[336px] laptop:h-[336px] laptop:px-[16px] laptop:py-[16px] desktop:h-[448px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px] lg-desktop:h-[560px]",{"aiui-dark":t.theme==="dark","aiui-light":t.theme==="light"});return t.link?(0,e.jsx)("a",{href:(0,w.trackUrlRef)(t.link,`${n}_${f}`),className:h,"data-headless-type-name":`${n}#${f}`,"data-headless-title-desc-button":`${i}#${t.title}#${t.subtitle}`,children:_}):(0,e.jsx)("div",{className:h,children:_})};return(0,e.jsxs)("section",{ref:u,"data-ui-component-id":"FeatureCards",className:(0,c.cn)("feature-cards flex w-full flex-col justify-center",s),children:[(0,e.jsxs)("div",{className:"feature-cards__header",children:[(0,e.jsx)(r.Heading,{size:4,as:"h1",className:"feature-cards__title text-left laptop:text-center",children:i}),l&&(0,e.jsx)(r.Text,{size:2,as:"p",className:"feature-cards__subtitle mt-[4px] text-left text-[14px] laptop:text-center desktop:text-[16px] lg-desktop:text-[18px]",children:l})]}),(0,e.jsx)("div",{className:"feature-cards__grid mt-[24px] hidden w-full gap-[16px] laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px]",children:m.map(t=>(0,e.jsx)(d.default.Fragment,{children:y(t)},t.title))}),(0,e.jsx)("div",{className:"feature-cards__swiper-container mt-[24px] w-full laptop:hidden",children:(0,e.jsx)(x.Swiper,{spaceBetween:12,slidesPerView:"auto",grabCursor:!0,className:"feature-cards__swiper relative w-full !overflow-visible",children:m.map(t=>(0,e.jsx)(x.SwiperSlide,{className:"feature-cards__swiper-slide relative !h-[360px] !w-[296px]",children:(0,e.jsxs)("div",{className:(0,c.cn)("feature-cards__card feature-cards__card--mobile absolute inset-0 flex flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary laptop:px-[16px] laptop:py-[16px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px]",{"aiui-dark":t.theme==="dark","aiui-light":t.theme==="light"}),children:[(0,e.jsx)(r.Picture,{source:t.image?.url,alt:t.image?.alt||t.title,className:"feature-cards__card-image absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),(0,e.jsxs)("div",{className:"feature-cards__card-content z-10",children:[(0,e.jsx)(r.Heading,{size:3,as:"h2",className:"feature-cards__card-title",children:t.title}),(0,e.jsx)(r.Text,{size:4,as:"p",className:"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] overflow-visible text-[14px] laptop:h-[50px] lg-desktop:text-[18px]",children:t.subtitle})]})]},t.title)},t.title))})})]})});v.displayName="FeatureCards";var S=(0,k.withLayout)(v);
1
+ "use strict";"use client";var H=Object.create;var c=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var L=(e,r)=>{for(var s in r)c(e,s,{get:r[s],enumerable:!0})},b=(e,r,s,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let p of $(r))!j.call(e,p)&&p!==s&&c(e,p,{get:()=>r[p],enumerable:!(i=R(r,p))||i.enumerable});return e};var D=(e,r,s)=>(s=e!=null?H(S(e)):{},b(r||!e||!e.__esModule?c(s,"default",{value:e,enumerable:!0}):s,e)),E=e=>b(c({},"__esModule",{value:!0}),e);var B={};L(B,{default:()=>M});module.exports=E(B);var t=require("react/jsx-runtime"),o=D(require("react")),l=require("../../components/index.js"),n=require("../../helpers/utils.js"),k=require("../../shared/Styles.js"),w=require("../../hooks/useExposure.js"),y=require("../../shared/trackUrlRef.js"),f=require("swiper/react");const m="image",h="feature_cards",P=(e,r)=>r===2?e===0?"laptop:flex-[2]":"laptop:flex-[3]":r===3?"laptop:flex-[1]":r===4?e===0?"laptop:flex-[2]":e===1||e===2?"laptop:flex-[3]":"laptop:flex-[2]":r===5?e<3?"laptop:flex-[1]":e===3?"laptop:flex-[2]":"laptop:flex-[3]":"laptop:flex-[1]",I=(e,r)=>r===4&&e===1||r===5&&e===2,N=o.default.forwardRef(({data:e,className:r},s)=>{const{title:i,subtitle:p,items:u=[],rounded:C=!1}=e,x=(0,o.useRef)(null);(0,w.useExposure)(x,{componentType:m,componentName:h,componentTitle:i,componentDescription:p}),(0,o.useImperativeHandle)(s,()=>x.current);const _=C?"rounded-[12px] laptop:rounded-[16px]":"rounded-none",F=(a,d)=>{const g=(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(l.Picture,{source:a.image?.url,alt:a.image?.alt||a.title,className:"feature-cards__card-image absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),(0,t.jsxs)("div",{className:"feature-cards__card-content z-10",children:[(0,t.jsx)(l.Heading,{size:3,as:"h2",className:"feature-cards__card-title laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]",children:a.title}),(0,t.jsx)(l.Text,{size:4,as:"p",className:"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] text-[14px] laptop:h-[44px] lg-desktop:text-[18px]",children:a.subtitle})]})]}),T="feature-cards__card relative flex h-[360px] max-h-[560px] flex-col justify-end gap-[16px] overflow-hidden px-[16px] py-[12px] text-info-primary tablet:h-[336px] laptop:h-[336px] laptop:px-[16px] laptop:py-[16px] desktop:h-[448px] desktop:px-[32px] desktop:py-[24px] lg-desktop:h-[560px]",z=d!==void 0?P(d,u.length):"flex-1",v=(0,n.cn)(T,_,z,{"aiui-dark":a.theme==="dark","aiui-light":a.theme==="light"});return a.link?(0,t.jsx)("a",{href:(0,y.trackUrlRef)(a.link,`${m}_${h}`),className:v,"data-headless-type-name":`${m}#${h}`,"data-headless-title-desc-button":`${i}#${a.title}#${a.subtitle}`,children:g}):(0,t.jsx)("div",{className:v,children:g})};return(0,t.jsxs)("section",{ref:x,"data-ui-component-id":"FeatureCards",className:(0,n.cn)("feature-cards flex w-full flex-col justify-center",r),children:[(0,t.jsxs)("div",{className:"feature-cards__header",children:[(0,t.jsx)(l.Heading,{size:4,as:"h1",className:"feature-cards__title text-left laptop:text-center",children:i}),p&&(0,t.jsx)(l.Text,{size:2,as:"p",className:"feature-cards__subtitle mt-[4px] text-left text-[14px] laptop:text-center desktop:text-[16px] lg-desktop:text-[18px]",children:p})]}),(0,t.jsx)("div",{className:"feature-cards__grid mt-[24px] hidden w-full flex-wrap gap-[16px] laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px]",children:u.map((a,d)=>(0,t.jsxs)(o.default.Fragment,{children:[F(a,d),I(d,u.length)&&(0,t.jsx)("div",{className:"laptop:basis-full laptop:h-0"})]},a.title))}),(0,t.jsx)("div",{className:"feature-cards__swiper-container mt-[24px] w-full laptop:hidden",children:(0,t.jsx)(f.Swiper,{spaceBetween:12,slidesPerView:"auto",grabCursor:!0,className:"feature-cards__swiper relative w-full !overflow-visible",children:u.map(a=>(0,t.jsx)(f.SwiperSlide,{className:"feature-cards__swiper-slide relative !h-[360px] !w-[296px]",children:(0,t.jsxs)("div",{className:(0,n.cn)("feature-cards__card feature-cards__card--mobile absolute inset-0 flex flex-1 flex-col justify-end gap-[16px] overflow-hidden px-[16px] py-[12px] text-info-primary",_,{"aiui-dark":a.theme==="dark","aiui-light":a.theme==="light"}),children:[(0,t.jsx)(l.Picture,{source:a.image?.url,alt:a.image?.alt||a.title,className:"feature-cards__card-image absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),(0,t.jsxs)("div",{className:"feature-cards__card-content z-10",children:[(0,t.jsx)(l.Heading,{size:3,as:"h2",className:"feature-cards__card-title",children:a.title}),(0,t.jsx)(l.Text,{size:4,as:"p",className:"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] overflow-visible text-[14px] laptop:h-[50px] lg-desktop:text-[18px]",children:a.subtitle})]})]},a.title)},a.title))})})]})});N.displayName="FeatureCards";var M=(0,k.withLayout)(N);
2
2
  //# sourceMappingURL=FeatureCards.js.map
package/dist/cjs/biz-components/FeatureCards/FeatureCards.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/FeatureCards/FeatureCards.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { FeatureCardsProps, FeatureCardItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\nconst componentType = 'image'\nconst componentName = 'feature_cards'\n\nconst FeatureCards = React.forwardRef<HTMLDivElement, FeatureCardsProps>(({ data, className }, ref) => {\n const { title, subtitle, items = [] } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n const renderCard = (item: FeatureCardItem) => {\n const cardContent = (\n <>\n <Picture\n source={item.image?.url}\n alt={item.image?.alt || item.title}\n className=\"feature-cards__card-image absolute inset-0 !h-full\"\n imgClassName=\"!h-full object-cover\"\n />\n <div className=\"feature-cards__card-content z-10\">\n <Heading size={3} as=\"h2\" className=\"feature-cards__card-title laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]\">\n {item.title}\n </Heading>\n <Text\n size={4}\n as=\"p\"\n className=\"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] text-[14px] laptop:h-[44px] lg-desktop:text-[18px]\"\n >\n {item.subtitle}\n </Text>\n </div>\n </>\n )\n\n const cardClasses = cn(\n 'feature-cards__card relative flex h-[360px] max-h-[560px] flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary tablet:h-[336px] laptop:h-[336px] laptop:px-[16px] laptop:py-[16px] desktop:h-[448px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px] lg-desktop:h-[560px]',\n {\n 'aiui-dark': item.theme === 'dark',\n 'aiui-light': item.theme === 'light',\n }\n )\n\n if (item.link) {\n return (\n <a\n href={trackUrlRef(item.link, `${componentType}_${componentName}`)}\n className={cardClasses}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${item.title}#${item.subtitle}`}\n >\n {cardContent}\n </a>\n )\n }\n\n return <div className={cardClasses}>{cardContent}</div>\n }\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"FeatureCards\"\n className={cn('feature-cards flex w-full flex-col justify-center', className)}\n >\n {/* \u6807\u9898\u533A\u57DF */}\n <div className=\"feature-cards__header\">\n <Heading size={4} as=\"h1\" className=\"feature-cards__title text-left laptop:text-center\">\n {title}\n </Heading>\n {subtitle && (\n <Text\n size={2}\n as=\"p\"\n className=\"feature-cards__subtitle mt-[4px] text-left text-[14px] laptop:text-center desktop:text-[16px] lg-desktop:text-[18px]\"\n >\n {subtitle}\n </Text>\n )}\n </div>\n\n {/* \u684C\u9762\u7AEF\u7F51\u683C\u5E03\u5C40 */}\n <div className=\"feature-cards__grid mt-[24px] hidden w-full gap-[16px] laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px]\">\n {items.map(item => (\n <React.Fragment key={item.title}>{renderCard(item)}</React.Fragment>\n ))}\n </div>\n\n {/* \u79FB\u52A8\u7AEF Swiper \u5E03\u5C40 */}\n <div className=\"feature-cards__swiper-container mt-[24px] w-full laptop:hidden\">\n <Swiper spaceBetween={12} slidesPerView=\"auto\" grabCursor className=\"feature-cards__swiper relative w-full !overflow-visible\">\n {items.map(item => (\n <SwiperSlide key={item.title} className=\"feature-cards__swiper-slide relative !h-[360px] !w-[296px]\">\n <div\n key={item.title}\n className={cn(\n 'feature-cards__card feature-cards__card--mobile absolute inset-0 flex flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary laptop:px-[16px] laptop:py-[16px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px]',\n {\n 'aiui-dark': item.theme === 'dark',\n 'aiui-light': item.theme === 'light',\n }\n )}\n >\n <Picture\n source={item.image?.url}\n alt={item.image?.alt || item.title}\n className=\"feature-cards__card-image absolute inset-0 !h-full\"\n imgClassName=\"!h-full object-cover\"\n />\n <div className=\"feature-cards__card-content z-10\">\n <Heading size={3} as=\"h2\" className=\"feature-cards__card-title\">\n {item.title}\n </Heading>\n <Text\n size={4}\n as=\"p\"\n className=\"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] overflow-visible text-[14px] laptop:h-[50px] lg-desktop:text-[18px]\"\n >\n {item.subtitle}\n </Text>\n </div>\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </section>\n )\n})\n\nFeatureCards.displayName = 'FeatureCards'\n\nexport default withLayout(FeatureCards)\n"],
5
- "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6BM,IAAAI,EAAA,6BA5BNC,EAAmD,oBACnDC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAC5BC,EAA4B,uCAE5BL,EAAoC,wBAEpC,MAAMM,EAAgB,QAChBC,EAAgB,gBAEhBC,EAAe,EAAAC,QAAM,WAA8C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACrG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAQ,CAAC,CAAE,EAAIL,EAElCM,KAAS,UAAuB,IAAI,KAE1C,eAAYA,EAAQ,CAClB,cAAAV,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMI,EAAO,OAAyB,EAE/D,MAAMC,EAAcC,GAA0B,CAC5C,MAAMC,KACJ,oBACE,oBAAC,WACC,OAAQD,EAAK,OAAO,IACpB,IAAKA,EAAK,OAAO,KAAOA,EAAK,MAC7B,UAAU,qDACV,aAAa,uBACf,KACA,QAAC,OAAI,UAAU,mCACb,oBAAC,WAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,0FACjC,SAAAA,EAAK,MACR,KACA,OAAC,QACC,KAAM,EACN,GAAG,IACH,UAAU,iHAET,SAAAA,EAAK,SACR,GACF,GACF,EAGIE,KAAc,MAClB,8UACA,CACE,YAAaF,EAAK,QAAU,OAC5B,aAAcA,EAAK,QAAU,OAC/B,CACF,EAEA,OAAIA,EAAK,QAEL,OAAC,KACC,QAAM,eAAYA,EAAK,KAAM,GAAGZ,CAAa,IAAIC,CAAa,EAAE,EAChE,UAAWa,EACX,0BAAyB,GAAGd,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGM,CAAK,IAAIK,EAAK,KAAK,IAAIA,EAAK,QAAQ,GAEvE,SAAAC,EACH,KAIG,OAAC,OAAI,UAAWC,EAAc,SAAAD,EAAY,CACnD,EAEA,SACE,QAAC,WACC,IAAKH,EACL,uBAAqB,eACrB,aAAW,MAAG,oDAAqDL,CAAS,EAG5E,qBAAC,OAAI,UAAU,wBACb,oBAAC,WAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,oDACjC,SAAAE,EACH,EACCC,MACC,OAAC,QACC,KAAM,EACN,GAAG,IACH,UAAU,uHAET,SAAAA,EACH,GAEJ,KAGA,OAAC,OAAI,UAAU,6HACZ,SAAAC,EAAM,IAAIG,MACT,OAAC,EAAAT,QAAM,SAAN,CAAiC,SAAAQ,EAAWC,CAAI,GAA5BA,EAAK,KAAyB,CACpD,EACH,KAGA,OAAC,OAAI,UAAU,iEACb,mBAAC,UAAO,aAAc,GAAI,cAAc,OAAO,WAAU,GAAC,UAAU,0DACjE,SAAAH,EAAM,IAAIG,MACT,OAAC,eAA6B,UAAU,6DACtC,oBAAC,OAEC,aAAW,MACT,iRACA,CACE,YAAaA,EAAK,QAAU,OAC5B,aAAcA,EAAK,QAAU,OAC/B,CACF,EAEA,oBAAC,WACC,OAAQA,EAAK,OAAO,IACpB,IAAKA,EAAK,OAAO,KAAOA,EAAK,MAC7B,UAAU,qDACV,aAAa,uBACf,KACA,QAAC,OAAI,UAAU,mCACb,oBAAC,WAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,4BACjC,SAAAA,EAAK,MACR,KACA,OAAC,QACC,KAAM,EACN,GAAG,IACH,UAAU,kIAET,SAAAA,EAAK,SACR,GACF,IA1BKA,EAAK,KA2BZ,GA7BgBA,EAAK,KA8BvB,CACD,EACH,EACF,GACF,CAEJ,CAAC,EAEDV,EAAa,YAAc,eAE3B,IAAOX,KAAQ,cAAWW,CAAY",
6
- "names": ["FeatureCards_exports", "__export", "FeatureCards_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "FeatureCards", "React", "data", "className", "ref", "title", "subtitle", "items", "boxRef", "renderCard", "item", "cardContent", "cardClasses"]
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { FeatureCardsProps, FeatureCardItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\nconst componentType = 'image'\nconst componentName = 'feature_cards'\n\n/**\n * \u6839\u636E\u5361\u7247\u6570\u91CF\u83B7\u53D6\u684C\u9762\u7AEF\uFF08laptop+\uFF09\u7684\u7F51\u683C\u5E03\u5C40\u7C7B\u540D\n * - 2\u5F20\u5361\u7247: 2:3\n * - 3\u5F20\u5361\u7247: 1:1:1\n * - 4\u5F20\u5361\u7247: \u7B2C\u4E00\u884C 2:3\uFF0C\u7B2C\u4E8C\u884C 3:2\n * - 5\u5F20\u5361\u7247: \u7B2C\u4E00\u884C 1:1:1\uFF0C\u7B2C\u4E8C\u884C 2:3\n */\nconst getCardLayoutClasses = (index: number, totalCards: number): string => {\n if (totalCards === 2) {\n // 2:3 \u6BD4\u4F8B\n return index === 0 ? 'laptop:flex-[2]' : 'laptop:flex-[3]'\n }\n\n if (totalCards === 3) {\n // 1:1:1 \u6BD4\u4F8B\n return 'laptop:flex-[1]'\n }\n\n if (totalCards === 4) {\n // \u7B2C\u4E00\u884C 2:3\uFF0C\u7B2C\u4E8C\u884C 3:2\n if (index === 0) return 'laptop:flex-[2]'\n if (index === 1) return 'laptop:flex-[3]'\n if (index === 2) return 'laptop:flex-[3]'\n return 'laptop:flex-[2]'\n }\n\n if (totalCards === 5) {\n // \u7B2C\u4E00\u884C 1:1:1\uFF0C\u7B2C\u4E8C\u884C 2:3\n if (index < 3) return 'laptop:flex-[1]'\n if (index === 3) return 'laptop:flex-[2]'\n return 'laptop:flex-[3]'\n }\n\n // \u9ED8\u8BA4\u7B49\u5BBD\n return 'laptop:flex-[1]'\n}\n\n/**\n * \u6839\u636E\u5361\u7247\u6570\u91CF\u786E\u5B9A\u662F\u5426\u9700\u8981\u6362\u884C\n * - 4\u5F20\u5361\u7247: \u7B2C\u4E00\u884C2\u5F20\uFF0C\u7B2C\u4E8C\u884C2\u5F20\n * - 5\u5F20\u5361\u7247: \u7B2C\u4E00\u884C3\u5F20\uFF0C\u7B2C\u4E8C\u884C2\u5F20\n */\nconst shouldBreakRow = (index: number, totalCards: number): boolean => {\n if (totalCards === 4 && index === 1) return true\n if (totalCards === 5 && index === 2) return true\n return false\n}\n\nconst FeatureCards = React.forwardRef<HTMLDivElement, FeatureCardsProps>(({ data, className }, ref) => {\n const { title, subtitle, items = [], rounded = false } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n // \u5706\u89D2\u7C7B\u540D\n const roundedClasses = rounded ? 'rounded-[12px] laptop:rounded-[16px]' : 'rounded-none'\n\n const renderCard = (item: FeatureCardItem, index?: number) => {\n const cardContent = (\n <>\n <Picture\n source={item.image?.url}\n alt={item.image?.alt || item.title}\n className=\"feature-cards__card-image absolute inset-0 !h-full\"\n imgClassName=\"!h-full object-cover\"\n />\n <div className=\"feature-cards__card-content z-10\">\n <Heading size={3} as=\"h2\" className=\"feature-cards__card-title laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]\">\n {item.title}\n </Heading>\n <Text\n size={4}\n as=\"p\"\n className=\"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] text-[14px] laptop:h-[44px] lg-desktop:text-[18px]\"\n >\n {item.subtitle}\n </Text>\n </div>\n </>\n )\n\n // \u57FA\u7840\u6837\u5F0F\uFF08\u79FB\u9664\u539F\u6709\u7684 rounded \u7C7B\uFF09\n const baseClasses = 'feature-cards__card relative flex h-[360px] max-h-[560px] flex-col justify-end gap-[16px] overflow-hidden px-[16px] py-[12px] text-info-primary tablet:h-[336px] laptop:h-[336px] laptop:px-[16px] laptop:py-[16px] desktop:h-[448px] desktop:px-[32px] desktop:py-[24px] lg-desktop:h-[560px]'\n\n // \u83B7\u53D6\u54CD\u5E94\u5F0F\u5E03\u5C40\u7C7B\u540D\uFF08\u4EC5\u7528\u4E8E\u684C\u9762\u7AEF\uFF09\n const layoutClasses = index !== undefined ? getCardLayoutClasses(index, items.length) : 'flex-1'\n\n const cardClasses = cn(\n baseClasses,\n roundedClasses,\n layoutClasses,\n {\n 'aiui-dark': item.theme === 'dark',\n 'aiui-light': item.theme === 'light',\n }\n )\n\n if (item.link) {\n return (\n <a\n href={trackUrlRef(item.link, `${componentType}_${componentName}`)}\n className={cardClasses}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${item.title}#${item.subtitle}`}\n >\n {cardContent}\n </a>\n )\n }\n\n return <div className={cardClasses}>{cardContent}</div>\n }\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"FeatureCards\"\n className={cn('feature-cards flex w-full flex-col justify-center', className)}\n >\n {/* \u6807\u9898\u533A\u57DF */}\n <div className=\"feature-cards__header\">\n <Heading size={4} as=\"h1\" className=\"feature-cards__title text-left laptop:text-center\">\n {title}\n </Heading>\n {subtitle && (\n <Text\n size={2}\n as=\"p\"\n className=\"feature-cards__subtitle mt-[4px] text-left text-[14px] laptop:text-center desktop:text-[16px] lg-desktop:text-[18px]\"\n >\n {subtitle}\n </Text>\n )}\n </div>\n\n {/* \u684C\u9762\u7AEF\u7F51\u683C\u5E03\u5C40 */}\n <div className=\"feature-cards__grid mt-[24px] hidden w-full flex-wrap gap-[16px] laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px]\">\n {items.map((item, index) => (\n <React.Fragment key={item.title}>\n {renderCard(item, index)}\n {/* \u5728\u7279\u5B9A\u4F4D\u7F6E\u63D2\u5165\u6362\u884C */}\n {shouldBreakRow(index, items.length) && <div className=\"laptop:basis-full laptop:h-0\" />}\n </React.Fragment>\n ))}\n </div>\n\n {/* \u79FB\u52A8\u7AEF Swiper \u5E03\u5C40 */}\n <div className=\"feature-cards__swiper-container mt-[24px] w-full laptop:hidden\">\n <Swiper spaceBetween={12} slidesPerView=\"auto\" grabCursor className=\"feature-cards__swiper relative w-full !overflow-visible\">\n {items.map(item => (\n <SwiperSlide key={item.title} className=\"feature-cards__swiper-slide relative !h-[360px] !w-[296px]\">\n <div\n key={item.title}\n className={cn(\n 'feature-cards__card feature-cards__card--mobile absolute inset-0 flex flex-1 flex-col justify-end gap-[16px] overflow-hidden px-[16px] py-[12px] text-info-primary',\n roundedClasses,\n {\n 'aiui-dark': item.theme === 'dark',\n 'aiui-light': item.theme === 'light',\n }\n )}\n >\n <Picture\n source={item.image?.url}\n alt={item.image?.alt || item.title}\n className=\"feature-cards__card-image absolute inset-0 !h-full\"\n imgClassName=\"!h-full object-cover\"\n />\n <div className=\"feature-cards__card-content z-10\">\n <Heading size={3} as=\"h2\" className=\"feature-cards__card-title\">\n {item.title}\n </Heading>\n <Text\n size={4}\n as=\"p\"\n className=\"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] overflow-visible text-[14px] laptop:h-[50px] lg-desktop:text-[18px]\"\n >\n {item.subtitle}\n </Text>\n </div>\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </section>\n )\n})\n\nFeatureCards.displayName = 'FeatureCards'\n\nexport default withLayout(FeatureCards)\n"],
5
+ "mappings": "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",
6
+ "names": ["FeatureCards_exports", "__export", "FeatureCards_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "getCardLayoutClasses", "index", "totalCards", "shouldBreakRow", "FeatureCards", "React", "data", "className", "ref", "title", "subtitle", "items", "rounded", "boxRef", "roundedClasses", "renderCard", "item", "cardContent", "baseClasses", "layoutClasses", "cardClasses"]
7
7
  }
package/dist/cjs/biz-components/FeatureCards/types.d.ts CHANGED
@@ -19,6 +19,8 @@ export interface FeatureCardsProps {
19
19
  subtitle?: string;
20
20
  /** 卡片列表 */
21
21
  items: FeatureCardItem[];
22
+ /** 是否显示圆角，默认为 false（直角）。laptop 以下 12px，laptop 以上 16px */
23
+ rounded?: boolean;
22
24
  };
23
25
  /** 自定义类名 */
24
26
  className?: string;
package/dist/cjs/biz-components/FeatureCards/types.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var g=(t,e,a,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of n(e))!p.call(t,r)&&r!==a&&s(t,r,{get:()=>e[r],enumerable:!(i=m(e,r))||i.enumerable});return t};var d=t=>g(s({},"__esModule",{value:!0}),t);var l={};module.exports=d(l);
1
+ "use strict";var a=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var o=Object.prototype.hasOwnProperty;var d=(t,e,s,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of m(e))!o.call(t,r)&&r!==s&&a(t,r,{get:()=>e[r],enumerable:!(i=n(e,r))||i.enumerable});return t};var p=t=>d(a({},"__esModule",{value:!0}),t);var g={};module.exports=p(g);
2
2
  //# sourceMappingURL=types.js.map
package/dist/cjs/biz-components/FeatureCards/types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/FeatureCards/types.ts"],
4
- "sourcesContent": ["import type { Media, Theme } from '../../types/props.js'\n\nexport interface FeatureCardItem {\n /** \u5361\u7247\u6807\u9898 */\n title: string\n /** \u5361\u7247\u526F\u6807\u9898/\u63CF\u8FF0 */\n subtitle: string\n /** \u80CC\u666F\u56FE\u7247 URL */\n image: Media\n /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n theme?: Theme\n /** \u94FE\u63A5\u5730\u5740 */\n link?: string\n}\n\nexport interface FeatureCardsProps {\n data: {\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898/\u63CF\u8FF0 */\n subtitle?: string\n /** \u5361\u7247\u5217\u8868 */\n items: FeatureCardItem[]\n }\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n"],
4
+ "sourcesContent": ["import type { Media, Theme } from '../../types/props.js'\n\nexport interface FeatureCardItem {\n /** \u5361\u7247\u6807\u9898 */\n title: string\n /** \u5361\u7247\u526F\u6807\u9898/\u63CF\u8FF0 */\n subtitle: string\n /** \u80CC\u666F\u56FE\u7247 URL */\n image: Media\n /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n theme?: Theme\n /** \u94FE\u63A5\u5730\u5740 */\n link?: string\n}\n\nexport interface FeatureCardsProps {\n data: {\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898/\u63CF\u8FF0 */\n subtitle?: string\n /** \u5361\u7247\u5217\u8868 */\n items: FeatureCardItem[]\n /** \u662F\u5426\u663E\u793A\u5706\u89D2\uFF0C\u9ED8\u8BA4\u4E3A false\uFF08\u76F4\u89D2\uFF09\u3002laptop \u4EE5\u4E0B 12px\uFF0Claptop \u4EE5\u4E0A 16px */\n rounded?: boolean\n }\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n"],
5
5
  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
6
6
  "names": ["types_exports", "__toCommonJS"]
7
7
  }
package/dist/cjs/shared/ErrorBoundary.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import type { ReactNode } from 'react';
3
+ interface ErrorBoundaryProps {
4
+ children: ReactNode;
5
+ fallback?: ReactNode;
6
+ }
7
+ interface ErrorBoundaryState {
8
+ hasError: boolean;
9
+ error: Error | null;
10
+ errorInfo: React.ErrorInfo | null;
11
+ }
12
+ declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
13
+ constructor(props: ErrorBoundaryProps);
14
+ static getDerivedStateFromError(error: Error): ErrorBoundaryState;
15
+ componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
16
+ render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<React.AwaitedReactNode> | null | undefined;
17
+ }
18
+ export default ErrorBoundary;
package/dist/cjs/shared/ErrorBoundary.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";var c=Object.create;var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var E=(e,r)=>{for(var o in r)a(e,o,{get:r[o],enumerable:!0})},s=(e,r,o,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of p(r))!h.call(e,t)&&t!==o&&a(e,t,{get:()=>r[t],enumerable:!(n=d(r,t))||n.enumerable});return e};var f=(e,r,o)=>(o=e!=null?c(u(e)):{},s(r||!e||!e.__esModule?a(o,"default",{value:e,enumerable:!0}):o,e)),m=e=>s(a({},"__esModule",{value:!0}),e);var g={};E(g,{default:()=>B});module.exports=m(g);var i=require("react/jsx-runtime"),l=f(require("react"));class y extends l.default.Component{constructor(r){super(r),this.state={hasError:!1,error:null,errorInfo:null}}static getDerivedStateFromError(r){return{hasError:!0,error:r,errorInfo:null}}componentDidCatch(r,o){console.error("@anker-in/headless-ui biz component ErrorBoundary caught an error:",r,o),this.setState({errorInfo:o})}render(){return this.state.hasError?this.props.fallback?this.props.fallback:null:this.props.children}}var B=y;
2
+ //# sourceMappingURL=ErrorBoundary.js.map
package/dist/cjs/shared/ErrorBoundary.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/shared/ErrorBoundary.tsx"],
4
+ "sourcesContent": ["import React from 'react'\nimport type { ReactNode } from 'react'\n\ninterface ErrorBoundaryProps {\n children: ReactNode\n fallback?: ReactNode // \u53EF\u81EA\u5B9A\u4E49\u9519\u8BEFUI\n}\n\ninterface ErrorBoundaryState {\n hasError: boolean\n error: Error | null\n errorInfo: React.ErrorInfo | null\n}\n\nclass ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n constructor(props: ErrorBoundaryProps) {\n super(props)\n this.state = { hasError: false, error: null, errorInfo: null }\n }\n\n static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n return { hasError: true, error, errorInfo: null }\n }\n\n componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n console.error('@anker-in/headless-ui biz component ErrorBoundary caught an error:', error, errorInfo)\n this.setState({ errorInfo })\n // \u53EF\u4EE5\u5728\u8FD9\u91CC\u4E0A\u62A5\u9519\u8BEF\u65E5\u5FD7\n }\n\n render() {\n if (this.state.hasError) {\n // \u4F7F\u7528\u81EA\u5B9A\u4E49 fallback UI \u6216\u9ED8\u8BA4 UI\n if (this.props.fallback) return this.props.fallback\n // \u53EA\u5728\u5F00\u53D1\u6A21\u5F0F\u663E\u793A\u9519\u8BEF\n return process.env.NODE_ENV === 'development' ? (\n <div style={{ padding: 20, textAlign: 'center' }}>\n <h1>something went wrong \uD83D\uDE22</h1>\n <p>{this.state.error?.message}</p>\n <details style={{ whiteSpace: 'pre-wrap' }}>{this.state.errorInfo?.componentStack}</details>\n </div>\n ) : null\n }\n\n return this.props.children\n }\n}\n\nexport default ErrorBoundary\n"],
5
+ "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoCQ,IAAAI,EAAA,6BApCRC,EAAkB,oBAclB,MAAMC,UAAsB,EAAAC,QAAM,SAAkD,CAClF,YAAYC,EAA2B,CACrC,MAAMA,CAAK,EACX,KAAK,MAAQ,CAAE,SAAU,GAAO,MAAO,KAAM,UAAW,IAAK,CAC/D,CAEA,OAAO,yBAAyBC,EAAkC,CAChE,MAAO,CAAE,SAAU,GAAM,MAAAA,EAAO,UAAW,IAAK,CAClD,CAEA,kBAAkBA,EAAcC,EAA4B,CAC1D,QAAQ,MAAM,qEAAsED,EAAOC,CAAS,EACpG,KAAK,SAAS,CAAE,UAAAA,CAAU,CAAC,CAE7B,CAEA,QAAS,CACP,OAAI,KAAK,MAAM,SAET,KAAK,MAAM,SAAiB,KAAK,MAAM,SAQvC,KAGC,KAAK,MAAM,QACpB,CACF,CAEA,IAAOR,EAAQI",
6
+ "names": ["ErrorBoundary_exports", "__export", "ErrorBoundary_default", "__toCommonJS", "import_jsx_runtime", "import_react", "ErrorBoundary", "React", "props", "error", "errorInfo"]
7
+ }
package/dist/cjs/shared/Styles.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var k=Object.create;var c=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var G=(t,e)=>{for(var n in e)c(t,n,{get:e[n],enumerable:!0})},m=(t,e,n,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of w(e))!x.call(t,o)&&o!==n&&c(t,o,{get:()=>e[o],enumerable:!(s=$(e,o))||s.enumerable});return t};var y=(t,e,n)=>(n=t!=null?k(h(t)):{},m(e||!t||!t.__esModule?c(n,"default",{value:t,enumerable:!0}):n,t)),T=t=>m(c({},"__esModule",{value:!0}),t);var _={};G(_,{getStylesProps:()=>p,useStyles:()=>g,withLayout:()=>W});module.exports=T(_);var a=require("react/jsx-runtime"),l=y(require("react")),b=require("./simpleHash.js"),P=y(require("./getKeyPropsString.js")),i=require("../components/gird.js"),S=require("../components/container.js");const I={12:"col-start-1 col-end-13",10:"col-start-2 col-end-12",8:"col-start-3 col-end-11",6:"col-start-4 col-end-10",4:"col-start-5 col-end-9"},H={12:"tablet:col-start-1 tablet:col-end-13",10:"tablet:col-start-2 tablet:col-end-12",8:"tablet:col-start-3 tablet:col-end-11",6:"tablet:col-start-4 tablet:col-end-10",4:"tablet:col-start-5 tablet:col-end-9"},u=t=>{const e=(0,P.default)(t);return`style_${(0,b.simpleHash)(e)}`},p=t=>{const{style:e,uid:n,disabled:s}=t;return{style:e,uid:n,disabled:s}},K=({style:t,uid:e=u({}),disabled:n=!1})=>!t||n?null:(0,a.jsx)("style",{suppressHydrationWarning:!0,"data-style-id":e,children:`.block-${e} { ${t} }`}),g=(t,e)=>{const n=(0,l.useMemo)(()=>t?.uid||u({...t,data:e}),[e,t]),s=(0,l.useMemo)(()=>(0,a.jsx)(K,{...t,uid:n}),[t,n]);return{className:`block-${n} `,StyleComponent:s,uid:n}},L=t=>{const{desktopSpan:e,mobileSpan:n}=t?.container||{},s=n?I[n]:"",o=e?H[e]:"";return`${s} ${o}`.trim()};function W(t,e){const n=l.default.forwardRef((s,o)=>{const C={...e,...p(s)},{className:d,StyleComponent:f}=g(C,s?.data),N=r=>(0,a.jsx)(S.Container,{className:`${d} ${r?.className}`,children:(0,a.jsx)(i.Grid,{className:"container_grid",children:(0,a.jsx)(i.GridItem,{className:L(r),children:(0,a.jsx)(t,{...r,ref:o})})})}),R=r=>(0,a.jsx)(t,{...r,className:`${d} ${r?.className}`,ref:o});return(0,a.jsxs)(a.Fragment,{children:[f,Reflect.ownKeys(s?.container||{})?.length>0?N(s):R(s)]})});return n.displayName=t.displayName||t.name||"Component",n}
1
+ "use strict";var $=Object.create;var c=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var T=(t,e)=>{for(var n in e)c(t,n,{get:e[n],enumerable:!0})},y=(t,e,n,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of h(e))!G.call(t,o)&&o!==n&&c(t,o,{get:()=>e[o],enumerable:!(s=w(e,o))||s.enumerable});return t};var d=(t,e,n)=>(n=t!=null?$(x(t)):{},y(e||!t||!t.__esModule?c(n,"default",{value:t,enumerable:!0}):n,t)),I=t=>y(c({},"__esModule",{value:!0}),t);var W={};T(W,{getStylesProps:()=>g,useStyles:()=>C,withLayout:()=>L});module.exports=I(W);var a=require("react/jsx-runtime"),l=d(require("react")),b=require("./simpleHash.js"),p=d(require("./getKeyPropsString.js")),i=require("../components/gird.js"),P=require("../components/container.js"),S=d(require("./ErrorBoundary.js"));const B={12:"col-start-1 col-end-13",10:"col-start-2 col-end-12",8:"col-start-3 col-end-11",6:"col-start-4 col-end-10",4:"col-start-5 col-end-9"},E={12:"tablet:col-start-1 tablet:col-end-13",10:"tablet:col-start-2 tablet:col-end-12",8:"tablet:col-start-3 tablet:col-end-11",6:"tablet:col-start-4 tablet:col-end-10",4:"tablet:col-start-5 tablet:col-end-9"},u=t=>{const e=(0,p.default)(t);return`style_${(0,b.simpleHash)(e)}`},g=t=>{const{style:e,uid:n,disabled:s}=t;return{style:e,uid:n,disabled:s}},H=({style:t,uid:e=u({}),disabled:n=!1})=>!t||n?null:(0,a.jsx)("style",{suppressHydrationWarning:!0,"data-style-id":e,children:`.block-${e} { ${t} }`}),C=(t,e)=>{const n=(0,l.useMemo)(()=>t?.uid||u({...t,data:e}),[e,t]),s=(0,l.useMemo)(()=>(0,a.jsx)(H,{...t,uid:n}),[t,n]);return{className:`block-${n} `,StyleComponent:s,uid:n}},K=t=>{const{desktopSpan:e,mobileSpan:n}=t?.container||{},s=n?B[n]:"",o=e?E[e]:"";return`${s} ${o}`.trim()};function L(t,e){const n=l.default.forwardRef((s,o)=>{const f={...e,...g(s)},{className:m,StyleComponent:N}=C(f,s?.data),R=r=>(0,a.jsx)(P.Container,{className:`${m} ${r?.className}`,children:(0,a.jsx)(i.Grid,{className:"container_grid",children:(0,a.jsx)(i.GridItem,{className:K(r),children:(0,a.jsx)(t,{...r,ref:o})})})}),k=r=>(0,a.jsx)(t,{...r,className:`${m} ${r?.className}`,ref:o});return(0,a.jsx)(a.Fragment,{children:(0,a.jsxs)(S.default,{children:[N,Reflect.ownKeys(s?.container||{})?.length>0?R(s):k(s)]})})});return n.displayName=t.displayName||t.name||"Component",n}
2
2
  //# sourceMappingURL=Styles.js.map
package/dist/cjs/shared/Styles.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/shared/Styles.tsx"],
4
- "sourcesContent": ["import React, { useMemo } from 'react'\nimport { simpleHash } from './simpleHash.js'\nimport getKeyPropsString from './getKeyPropsString.js'\nimport { Grid, GridItem } from '../components/gird.js'\nimport { Container } from '../components/container.js'\n\nconst colContentClasses: Record<number, string> = {\n 12: 'col-start-1 col-end-13',\n 10: 'col-start-2 col-end-12',\n 8: 'col-start-3 col-end-11',\n 6: 'col-start-4 col-end-10',\n 4: 'col-start-5 col-end-9',\n} as const\n\n// \u9884\u5B9A\u4E49\u5E26 tablet \u524D\u7F00\u7684\u7C7B\u540D\uFF0C\u786E\u4FDD Tailwind \u53EF\u4EE5\u8BC6\u522B\nconst colContentClassesTablet: Record<number, string> = {\n 12: 'tablet:col-start-1 tablet:col-end-13',\n 10: 'tablet:col-start-2 tablet:col-end-12',\n 8: 'tablet:col-start-3 tablet:col-end-11',\n 6: 'tablet:col-start-4 tablet:col-end-10',\n 4: 'tablet:col-start-5 tablet:col-end-9',\n} as const\n\nexport interface ContainerProps {\n container?: {\n /** \u684C\u9762\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n desktopSpan: number\n /** \u79FB\u52A8\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n mobileSpan: number\n }\n}\n\nexport interface StylesProps {\n /** \u81EA\u5B9A\u4E49\u6837\u5F0F\u5B57\u7B26\u4E32 */\n style?: string\n /** \u552F\u4E00\u6807\u8BC6\u7B26 */\n uid?: string\n /** \u662F\u5426\u7981\u7528 */\n disabled?: boolean\n}\n\n/**\n * \u6839\u636E props \u751F\u6210\u786E\u5B9A\u6027 uid\n */\nconst generateUID = (props: Record<string, any>) => {\n const keyString = getKeyPropsString(props)\n return `style_${simpleHash(keyString)}`\n}\n\n/**\n * \u4ECE\u7EC4\u4EF6 props \u4E2D\u63D0\u53D6\u6837\u5F0F\u76F8\u5173\u5C5E\u6027\n */\nexport const getStylesProps = <T extends Record<string, unknown>>(props: T & StylesProps): StylesProps => {\n const { style, uid, disabled } = props\n return { style, uid, disabled }\n}\n\n/**\n * \u6837\u5F0F\u6CE8\u5165\u7EC4\u4EF6\n */\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID({}), disabled = false }) => {\n if (!style || disabled) {\n return null\n }\n\n return <style suppressHydrationWarning data-style-id={uid}>{`.block-${uid} { ${style} }`}</style>\n}\n\n/**\n * \u6837\u5F0F Hook\uFF0C\u8FD4\u56DE\u6837\u5F0F\u7C7B\u540D\u548C\u6837\u5F0F\u7EC4\u4EF6\n * @param styleProps - \u6837\u5F0F\u5C5E\u6027\n */\nexport const useStyles = (styleProps: Partial<StylesProps>, data?: Record<string, any>) => {\n const uid = useMemo(() => styleProps?.uid || generateUID({ ...styleProps, data }), [data, styleProps])\n\n const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n return {\n className: `block-${uid} `,\n StyleComponent,\n uid,\n } as const\n}\n\nconst getContainerClassName = (props?: Partial<StylesProps & ContainerProps>) => {\n const { desktopSpan, mobileSpan } = props?.container || {}\n const mobileClasses = mobileSpan ? colContentClasses[mobileSpan] : ''\n const desktopClasses = desktopSpan ? colContentClassesTablet[desktopSpan] : ''\n return `${mobileClasses} ${desktopClasses}`.trim()\n}\n\n/**\n * \u9AD8\u9636\u7EC4\u4EF6\uFF0C \u7528\u4E8E\u7ED9\u7EC4\u4EF6\u7528style \u6807\u7B7E\u7684\u5F62\u5F0F\u8FFD\u52A0\u6837\u5F0F\n * @param WrappedComponent - \u9700\u8981\u5305\u88C5\u7684\u7EC4\u4EF6\n * @param defaultLayoutProps - \u9ED8\u8BA4\u6837\u5F0F\u5C5E\u6027\n */\nexport function withLayout<P extends object>(\n WrappedComponent: React.ComponentType<P>,\n defaultLayoutProps?: Partial<StylesProps & ContainerProps>\n) {\n const withLayout = React.forwardRef<\n any,\n Omit<P, keyof StylesProps> &\n Partial<StylesProps & ContainerProps> & { className?: string; data?: Record<string, any> }\n >((props, ref) => {\n const finalStyleProps = {\n ...defaultLayoutProps,\n ...getStylesProps(props),\n }\n\n const { className, StyleComponent } = useStyles(finalStyleProps, (props as any)?.data)\n\n const WithContainerWrapper = (props: any) => {\n return (\n <Container className={`${className} ${(props as any)?.className}`}>\n <Grid className=\"container_grid\">\n <GridItem className={getContainerClassName(props)}>\n <WrappedComponent {...(props as unknown as P)} ref={ref} />\n </GridItem>\n </Grid>\n </Container>\n )\n }\n\n const WithoutContainerWrapper = (props: any) => {\n return (\n <WrappedComponent\n {...(props as unknown as P)}\n className={`${className} ${(props as any)?.className}`}\n ref={ref}\n />\n )\n }\n\n return (\n <>\n {StyleComponent}\n {Reflect.ownKeys((props as any)?.container || {})?.length > 0\n ? WithContainerWrapper(props)\n : WithoutContainerWrapper(props)}\n </>\n )\n })\n\n // \u76F4\u63A5\u4F7F\u7528\u539F\u59CB\u7EC4\u4EF6\u7684\u540D\u79F0\n withLayout.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'\n return withLayout\n}\n"],
5
- "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,oBAAAE,EAAA,cAAAC,EAAA,eAAAC,IAAA,eAAAC,EAAAL,GAiES,IAAAM,EAAA,6BAjETC,EAA+B,oBAC/BC,EAA2B,2BAC3BC,EAA8B,qCAC9BC,EAA+B,iCAC/BC,EAA0B,sCAE1B,MAAMC,EAA4C,CAChD,GAAI,yBACJ,GAAI,yBACJ,EAAG,yBACH,EAAG,yBACH,EAAG,uBACL,EAGMC,EAAkD,CACtD,GAAI,uCACJ,GAAI,uCACJ,EAAG,uCACH,EAAG,uCACH,EAAG,qCACL,EAuBMC,EAAeC,GAA+B,CAClD,MAAMC,KAAY,EAAAC,SAAkBF,CAAK,EACzC,MAAO,YAAS,cAAWC,CAAS,CAAC,EACvC,EAKad,EAAqDa,GAAwC,CACxG,KAAM,CAAE,MAAAG,EAAO,IAAAC,EAAK,SAAAC,CAAS,EAAIL,EACjC,MAAO,CAAE,MAAAG,EAAO,IAAAC,EAAK,SAAAC,CAAS,CAChC,EAKMC,EAAgC,CAAC,CAAE,MAAAH,EAAO,IAAAC,EAAML,EAAY,CAAC,CAAC,EAAG,SAAAM,EAAW,EAAM,IAClF,CAACF,GAASE,EACL,QAGF,OAAC,SAAM,yBAAwB,GAAC,gBAAeD,EAAM,mBAAUA,CAAG,MAAMD,CAAK,KAAK,EAO9Ef,EAAY,CAACmB,EAAkCC,IAA+B,CACzF,MAAMJ,KAAM,WAAQ,IAAMG,GAAY,KAAOR,EAAY,CAAE,GAAGQ,EAAY,KAAAC,CAAK,CAAC,EAAG,CAACA,EAAMD,CAAU,CAAC,EAE/FE,KAAiB,WAAQ,OAAM,OAACH,EAAA,CAAQ,GAAGC,EAAY,IAAKH,EAAK,EAAI,CAACG,EAAYH,CAAG,CAAC,EAE5F,MAAO,CACL,UAAW,SAASA,CAAG,IACvB,eAAAK,EACA,IAAAL,CACF,CACF,EAEMM,EAAyBV,GAAkD,CAC/E,KAAM,CAAE,YAAAW,EAAa,WAAAC,CAAW,EAAIZ,GAAO,WAAa,CAAC,EACnDa,EAAgBD,EAAaf,EAAkBe,CAAU,EAAI,GAC7DE,EAAiBH,EAAcb,EAAwBa,CAAW,EAAI,GAC5E,MAAO,GAAGE,CAAa,IAAIC,CAAc,GAAG,KAAK,CACnD,EAOO,SAASzB,EACd0B,EACAC,EACA,CACA,MAAM3B,EAAa,EAAA4B,QAAM,WAIvB,CAACjB,EAAOkB,IAAQ,CAChB,MAAMC,EAAkB,CACtB,GAAGH,EACH,GAAG7B,EAAea,CAAK,CACzB,EAEM,CAAE,UAAAoB,EAAW,eAAAX,CAAe,EAAIrB,EAAU+B,EAAkBnB,GAAe,IAAI,EAE/EqB,EAAwBrB,MAE1B,OAAC,aAAU,UAAW,GAAGoB,CAAS,IAAKpB,GAAe,SAAS,GAC7D,mBAAC,QAAK,UAAU,iBACd,mBAAC,YAAS,UAAWU,EAAsBV,CAAK,EAC9C,mBAACe,EAAA,CAAkB,GAAIf,EAAwB,IAAKkB,EAAK,EAC3D,EACF,EACF,EAIEI,EAA2BtB,MAE7B,OAACe,EAAA,CACE,GAAIf,EACL,UAAW,GAAGoB,CAAS,IAAKpB,GAAe,SAAS,GACpD,IAAKkB,EACP,EAIJ,SACE,oBACG,UAAAT,EACA,QAAQ,QAAST,GAAe,WAAa,CAAC,CAAC,GAAG,OAAS,EACxDqB,EAAqBrB,CAAK,EAC1BsB,EAAwBtB,CAAK,GACnC,CAEJ,CAAC,EAGD,OAAAX,EAAW,YAAc0B,EAAiB,aAAeA,EAAiB,MAAQ,YAC3E1B,CACT",
6
- "names": ["Styles_exports", "__export", "getStylesProps", "useStyles", "withLayout", "__toCommonJS", "import_jsx_runtime", "import_react", "import_simpleHash", "import_getKeyPropsString", "import_gird", "import_container", "colContentClasses", "colContentClassesTablet", "generateUID", "props", "keyString", "getKeyPropsString", "style", "uid", "disabled", "Styles", "styleProps", "data", "StyleComponent", "getContainerClassName", "desktopSpan", "mobileSpan", "mobileClasses", "desktopClasses", "WrappedComponent", "defaultLayoutProps", "React", "ref", "finalStyleProps", "className", "WithContainerWrapper", "WithoutContainerWrapper"]
4
+ "sourcesContent": ["import React, { useMemo } from 'react'\nimport { simpleHash } from './simpleHash.js'\nimport getKeyPropsString from './getKeyPropsString.js'\nimport { Grid, GridItem } from '../components/gird.js'\nimport { Container } from '../components/container.js'\nimport ErrorBoundary from './ErrorBoundary.js'\n\nconst colContentClasses: Record<number, string> = {\n 12: 'col-start-1 col-end-13',\n 10: 'col-start-2 col-end-12',\n 8: 'col-start-3 col-end-11',\n 6: 'col-start-4 col-end-10',\n 4: 'col-start-5 col-end-9',\n} as const\n\n// \u9884\u5B9A\u4E49\u5E26 tablet \u524D\u7F00\u7684\u7C7B\u540D\uFF0C\u786E\u4FDD Tailwind \u53EF\u4EE5\u8BC6\u522B\nconst colContentClassesTablet: Record<number, string> = {\n 12: 'tablet:col-start-1 tablet:col-end-13',\n 10: 'tablet:col-start-2 tablet:col-end-12',\n 8: 'tablet:col-start-3 tablet:col-end-11',\n 6: 'tablet:col-start-4 tablet:col-end-10',\n 4: 'tablet:col-start-5 tablet:col-end-9',\n} as const\n\nexport interface ContainerProps {\n container?: {\n /** \u684C\u9762\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n desktopSpan: number\n /** \u79FB\u52A8\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n mobileSpan: number\n }\n}\n\nexport interface StylesProps {\n /** \u81EA\u5B9A\u4E49\u6837\u5F0F\u5B57\u7B26\u4E32 */\n style?: string\n /** \u552F\u4E00\u6807\u8BC6\u7B26 */\n uid?: string\n /** \u662F\u5426\u7981\u7528 */\n disabled?: boolean\n}\n\n/**\n * \u6839\u636E props \u751F\u6210\u786E\u5B9A\u6027 uid\n */\nconst generateUID = (props: Record<string, any>) => {\n const keyString = getKeyPropsString(props)\n return `style_${simpleHash(keyString)}`\n}\n\n/**\n * \u4ECE\u7EC4\u4EF6 props \u4E2D\u63D0\u53D6\u6837\u5F0F\u76F8\u5173\u5C5E\u6027\n */\nexport const getStylesProps = <T extends Record<string, unknown>>(props: T & StylesProps): StylesProps => {\n const { style, uid, disabled } = props\n return { style, uid, disabled }\n}\n\n/**\n * \u6837\u5F0F\u6CE8\u5165\u7EC4\u4EF6\n */\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID({}), disabled = false }) => {\n if (!style || disabled) {\n return null\n }\n\n return <style suppressHydrationWarning data-style-id={uid}>{`.block-${uid} { ${style} }`}</style>\n}\n\n/**\n * \u6837\u5F0F Hook\uFF0C\u8FD4\u56DE\u6837\u5F0F\u7C7B\u540D\u548C\u6837\u5F0F\u7EC4\u4EF6\n * @param styleProps - \u6837\u5F0F\u5C5E\u6027\n */\nexport const useStyles = (styleProps: Partial<StylesProps>, data?: Record<string, any>) => {\n const uid = useMemo(() => styleProps?.uid || generateUID({ ...styleProps, data }), [data, styleProps])\n\n const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n return {\n className: `block-${uid} `,\n StyleComponent,\n uid,\n } as const\n}\n\nconst getContainerClassName = (props?: Partial<StylesProps & ContainerProps>) => {\n const { desktopSpan, mobileSpan } = props?.container || {}\n const mobileClasses = mobileSpan ? colContentClasses[mobileSpan] : ''\n const desktopClasses = desktopSpan ? colContentClassesTablet[desktopSpan] : ''\n return `${mobileClasses} ${desktopClasses}`.trim()\n}\n\n/**\n * \u9AD8\u9636\u7EC4\u4EF6\uFF0C \u7528\u4E8E\u7ED9\u7EC4\u4EF6\u7528style \u6807\u7B7E\u7684\u5F62\u5F0F\u8FFD\u52A0\u6837\u5F0F\n * @param WrappedComponent - \u9700\u8981\u5305\u88C5\u7684\u7EC4\u4EF6\n * @param defaultLayoutProps - \u9ED8\u8BA4\u6837\u5F0F\u5C5E\u6027\n */\nexport function withLayout<P extends object>(\n WrappedComponent: React.ComponentType<P>,\n defaultLayoutProps?: Partial<StylesProps & ContainerProps>\n) {\n const withLayout = React.forwardRef<\n any,\n Omit<P, keyof StylesProps> &\n Partial<StylesProps & ContainerProps> & { className?: string; data?: Record<string, any> }\n >((props, ref) => {\n const finalStyleProps = {\n ...defaultLayoutProps,\n ...getStylesProps(props),\n }\n\n const { className, StyleComponent } = useStyles(finalStyleProps, (props as any)?.data)\n\n const WithContainerWrapper = (props: any) => {\n return (\n <Container className={`${className} ${(props as any)?.className}`}>\n <Grid className=\"container_grid\">\n <GridItem className={getContainerClassName(props)}>\n <WrappedComponent {...(props as unknown as P)} ref={ref} />\n </GridItem>\n </Grid>\n </Container>\n )\n }\n\n const WithoutContainerWrapper = (props: any) => {\n return (\n <WrappedComponent\n {...(props as unknown as P)}\n className={`${className} ${(props as any)?.className}`}\n ref={ref}\n />\n )\n }\n\n return (\n <>\n <ErrorBoundary>\n {StyleComponent}\n {Reflect.ownKeys((props as any)?.container || {})?.length > 0\n ? WithContainerWrapper(props)\n : WithoutContainerWrapper(props)}\n </ErrorBoundary>\n </>\n )\n })\n\n // \u76F4\u63A5\u4F7F\u7528\u539F\u59CB\u7EC4\u4EF6\u7684\u540D\u79F0\n withLayout.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'\n return withLayout\n}\n"],
5
+ "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,oBAAAE,EAAA,cAAAC,EAAA,eAAAC,IAAA,eAAAC,EAAAL,GAkES,IAAAM,EAAA,6BAlETC,EAA+B,oBAC/BC,EAA2B,2BAC3BC,EAA8B,qCAC9BC,EAA+B,iCAC/BC,EAA0B,sCAC1BC,EAA0B,iCAE1B,MAAMC,EAA4C,CAChD,GAAI,yBACJ,GAAI,yBACJ,EAAG,yBACH,EAAG,yBACH,EAAG,uBACL,EAGMC,EAAkD,CACtD,GAAI,uCACJ,GAAI,uCACJ,EAAG,uCACH,EAAG,uCACH,EAAG,qCACL,EAuBMC,EAAeC,GAA+B,CAClD,MAAMC,KAAY,EAAAC,SAAkBF,CAAK,EACzC,MAAO,YAAS,cAAWC,CAAS,CAAC,EACvC,EAKaf,EAAqDc,GAAwC,CACxG,KAAM,CAAE,MAAAG,EAAO,IAAAC,EAAK,SAAAC,CAAS,EAAIL,EACjC,MAAO,CAAE,MAAAG,EAAO,IAAAC,EAAK,SAAAC,CAAS,CAChC,EAKMC,EAAgC,CAAC,CAAE,MAAAH,EAAO,IAAAC,EAAML,EAAY,CAAC,CAAC,EAAG,SAAAM,EAAW,EAAM,IAClF,CAACF,GAASE,EACL,QAGF,OAAC,SAAM,yBAAwB,GAAC,gBAAeD,EAAM,mBAAUA,CAAG,MAAMD,CAAK,KAAK,EAO9EhB,EAAY,CAACoB,EAAkCC,IAA+B,CACzF,MAAMJ,KAAM,WAAQ,IAAMG,GAAY,KAAOR,EAAY,CAAE,GAAGQ,EAAY,KAAAC,CAAK,CAAC,EAAG,CAACA,EAAMD,CAAU,CAAC,EAE/FE,KAAiB,WAAQ,OAAM,OAACH,EAAA,CAAQ,GAAGC,EAAY,IAAKH,EAAK,EAAI,CAACG,EAAYH,CAAG,CAAC,EAE5F,MAAO,CACL,UAAW,SAASA,CAAG,IACvB,eAAAK,EACA,IAAAL,CACF,CACF,EAEMM,EAAyBV,GAAkD,CAC/E,KAAM,CAAE,YAAAW,EAAa,WAAAC,CAAW,EAAIZ,GAAO,WAAa,CAAC,EACnDa,EAAgBD,EAAaf,EAAkBe,CAAU,EAAI,GAC7DE,EAAiBH,EAAcb,EAAwBa,CAAW,EAAI,GAC5E,MAAO,GAAGE,CAAa,IAAIC,CAAc,GAAG,KAAK,CACnD,EAOO,SAAS1B,EACd2B,EACAC,EACA,CACA,MAAM5B,EAAa,EAAA6B,QAAM,WAIvB,CAACjB,EAAOkB,IAAQ,CAChB,MAAMC,EAAkB,CACtB,GAAGH,EACH,GAAG9B,EAAec,CAAK,CACzB,EAEM,CAAE,UAAAoB,EAAW,eAAAX,CAAe,EAAItB,EAAUgC,EAAkBnB,GAAe,IAAI,EAE/EqB,EAAwBrB,MAE1B,OAAC,aAAU,UAAW,GAAGoB,CAAS,IAAKpB,GAAe,SAAS,GAC7D,mBAAC,QAAK,UAAU,iBACd,mBAAC,YAAS,UAAWU,EAAsBV,CAAK,EAC9C,mBAACe,EAAA,CAAkB,GAAIf,EAAwB,IAAKkB,EAAK,EAC3D,EACF,EACF,EAIEI,EAA2BtB,MAE7B,OAACe,EAAA,CACE,GAAIf,EACL,UAAW,GAAGoB,CAAS,IAAKpB,GAAe,SAAS,GACpD,IAAKkB,EACP,EAIJ,SACE,mBACE,oBAAC,EAAAK,QAAA,CACA,UAAAd,EACA,QAAQ,QAAST,GAAe,WAAa,CAAC,CAAC,GAAG,OAAS,EACxDqB,EAAqBrB,CAAK,EAC1BsB,EAAwBtB,CAAK,GAC/B,EACJ,CAEJ,CAAC,EAGD,OAAAZ,EAAW,YAAc2B,EAAiB,aAAeA,EAAiB,MAAQ,YAC3E3B,CACT",
6
+ "names": ["Styles_exports", "__export", "getStylesProps", "useStyles", "withLayout", "__toCommonJS", "import_jsx_runtime", "import_react", "import_simpleHash", "import_getKeyPropsString", "import_gird", "import_container", "import_ErrorBoundary", "colContentClasses", "colContentClassesTablet", "generateUID", "props", "keyString", "getKeyPropsString", "style", "uid", "disabled", "Styles", "styleProps", "data", "StyleComponent", "getContainerClassName", "desktopSpan", "mobileSpan", "mobileClasses", "desktopClasses", "WrappedComponent", "defaultLayoutProps", "React", "ref", "finalStyleProps", "className", "WithContainerWrapper", "WithoutContainerWrapper", "ErrorBoundary"]
7
7
  }
package/dist/cjs/stories/featureCards.stories.js CHANGED
@@ -1,4 +1,24 @@
1
- "use strict";var n=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var u=(e,a)=>{for(var s in a)i(e,s,{get:a[s],enumerable:!0})},c=(e,a,s,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of l(a))!f.call(e,r)&&r!==s&&i(e,r,{get:()=>a[r],enumerable:!(o=p(a,r))||o.enumerable});return e};var g=(e,a,s)=>(s=e!=null?n(m(e)):{},c(a||!e||!e.__esModule?i(s,"default",{value:e,enumerable:!0}):s,e)),_=e=>c(i({},"__esModule",{value:!0}),e);var L={};u(L,{Default:()=>b,FourCards:()=>k,LightTheme:()=>S,SingleCard:()=>v,TwoCards:()=>w,WithCustomStyles:()=>D,WithLinks:()=>C,WithoutSubtitle:()=>x,default:()=>y});module.exports=_(L);var z=require("react"),d=g(require("../biz-components/FeatureCards/index.js"));const h={title:"Biz Components/FeatureCards",component:d.default,parameters:{layout:"padded",docs:{description:{component:"\u7279\u6027\u5361\u7247\u5C55\u793A\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u4EA7\u54C1\u529F\u80FD\u6216\u7279\u6027\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\u548C Swiper \u6ED1\u52A8"}}},tags:["autodocs"]};var y=h;const t={title:"Personalized Carpet Cleaning Mode",subtitle:"You can customize the carpet cleaning mode to suit your needs.",items:[{link:"",theme:"dark",title:"Carpet Avoidance",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",alt:"Carpet Avoidance",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",mimeType:"image/png"},subtitle:"Automatically avoids carpets based on personalized settings."},{link:"",theme:"dark",title:"Mop Lifting",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",alt:"Mop Lifting",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",mimeType:"image/png"},subtitle:"Lifts the mop to prevent wetting carpets"},{link:"",theme:"dark",title:"Carpet Detection",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429",alt:"Carpet Detection",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429",mimeType:"image/png"},subtitle:"Increases suction power when carpets are detected."}]},b={args:{data:t}},S={args:{data:{...t,items:t.items.map(e=>({...e,theme:"light"}))}}},C={args:{data:{...t,items:t.items.map(e=>({...e,link:"https://www.example.com"}))}}},w={args:{data:{...t,items:t.items.slice(0,2)}}},v={args:{data:{...t,items:[t.items[0]]}}},x={args:{data:{title:"Personalized Carpet Cleaning Mode",items:t.items}}},k={args:{data:{...t,items:[...t.items,{link:"",theme:"dark",title:"Smart Scheduling",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",mimeType:"image/png"},subtitle:"Schedule cleaning tasks automatically based on your preferences."}]}}},D={args:{data:t,className:"custom-feature-cards"},parameters:{docs:{description:{story:`
1
+ "use strict";var c=Object.create;var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var u=(t,s)=>{for(var a in s)r(t,a,{get:s[a],enumerable:!0})},n=(t,s,a,o)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of p(s))!f.call(t,i)&&i!==a&&r(t,i,{get:()=>s[i],enumerable:!(o=l(s,i))||o.enumerable});return t};var g=(t,s,a)=>(a=t!=null?c(m(t)):{},n(s||!t||!t.__esModule?r(a,"default",{value:t,enumerable:!0}):a,t)),h=t=>n(r({},"__esModule",{value:!0}),t);var W={};u(W,{Default:()=>_,FiveCards:()=>w,FiveCardsWithRounded:()=>F,FourCards:()=>x,FourCardsWithRounded:()=>T,LightTheme:()=>S,SingleCard:()=>k,TwoCards:()=>v,TwoCardsWithRounded:()=>R,WithCustomStyles:()=>U,WithLinks:()=>C,WithRounded:()=>L,WithoutSubtitle:()=>D,default:()=>b});module.exports=h(W);var M=require("react"),d=g(require("../biz-components/FeatureCards/index.js"));const y={title:"Biz Components/FeatureCards",component:d.default,parameters:{layout:"padded",docs:{description:{component:`\u7279\u6027\u5361\u7247\u5C55\u793A\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u4EA7\u54C1\u529F\u80FD\u6216\u7279\u6027
2
+
3
+ ## \u54CD\u5E94\u5F0F\u5E03\u5C40
4
+
5
+ ### \u79FB\u52A8\u7AEF\u548C\u5E73\u677F
6
+ - \u6240\u6709\u5361\u7247\u5BBD\u5EA6\u76F8\u7B49\uFF0C\u4F7F\u7528 Swiper \u8F6E\u64AD\u5C55\u793A
7
+
8
+ ### \u684C\u9762\u7AEF\uFF08laptop+\uFF09
9
+ \u6839\u636E\u5361\u7247\u6570\u91CF\u81EA\u52A8\u8C03\u6574\u5E03\u5C40\u6BD4\u4F8B\uFF1A
10
+ - **2\u5F20\u5361\u7247**\uFF1A2:3 \u6BD4\u4F8B
11
+ - **3\u5F20\u5361\u7247**\uFF1A1:1:1 \u7B49\u5BBD
12
+ - **4\u5F20\u5361\u7247**\uFF1A\u7B2C\u4E00\u884C 2:3\uFF0C\u7B2C\u4E8C\u884C 3:2\uFF08\u81EA\u52A8\u6362\u884C\uFF09
13
+ - **5\u5F20\u5361\u7247**\uFF1A\u7B2C\u4E00\u884C 1:1:1\uFF0C\u7B2C\u4E8C\u884C 2:3\uFF08\u81EA\u52A8\u6362\u884C\uFF09
14
+
15
+ ## \u5706\u89D2\u914D\u7F6E
16
+
17
+ \u901A\u8FC7 \`rounded\` \u5C5E\u6027\u63A7\u5236\u5361\u7247\u5706\u89D2\uFF1A
18
+ - **\u9ED8\u8BA4**\uFF1A\`rounded: false\`\uFF08\u76F4\u89D2\uFF09
19
+ - **\u5F00\u542F\u5706\u89D2**\uFF1A\`rounded: true\`
20
+ - laptop \u4EE5\u4E0B\uFF1A12px \u5706\u89D2
21
+ - laptop \u4EE5\u4E0A\uFF1A16px \u5706\u89D2`}}},tags:["autodocs"]};var b=y;const e={title:"Personalized Carpet Cleaning Mode",subtitle:"You can customize the carpet cleaning mode to suit your needs.",items:[{link:"",theme:"dark",title:"Carpet Avoidance",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",alt:"Carpet Avoidance",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",mimeType:"image/png"},subtitle:"Automatically avoids carpets based on personalized settings."},{link:"",theme:"dark",title:"Mop Lifting",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",alt:"Mop Lifting",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",mimeType:"image/png"},subtitle:"Lifts the mop to prevent wetting carpets"},{link:"",theme:"dark",title:"Carpet Detection",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429",alt:"Carpet Detection",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429",mimeType:"image/png"},subtitle:"Increases suction power when carpets are detected."}]},_={args:{data:e}},S={args:{data:{...e,items:e.items.map(t=>({...t,theme:"light"}))}}},C={args:{data:{...e,items:e.items.map(t=>({...t,link:"https://www.example.com"}))}}},v={args:{data:{...e,items:e.items.slice(0,2)}}},k={args:{data:{...e,items:[e.items[0]]}}},D={args:{data:{title:"Personalized Carpet Cleaning Mode",items:e.items}}},x={args:{data:{...e,items:[...e.items,{link:"",theme:"dark",title:"Smart Scheduling",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",mimeType:"image/png"},subtitle:"Schedule cleaning tasks automatically based on your preferences."}]}},parameters:{docs:{description:{story:"4\u5F20\u5361\u7247\u5E03\u5C40\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 2:3 \u6BD4\u4F8B\uFF0C\u7B2C\u4E8C\u884C 3:2 \u6BD4\u4F8B\uFF08\u81EA\u52A8\u6362\u884C\uFF09"}}}},w={args:{data:{...e,items:[...e.items,{link:"",theme:"dark",title:"Smart Scheduling",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",mimeType:"image/png"},subtitle:"Schedule cleaning tasks automatically based on your preferences."},{link:"",theme:"dark",title:"Voice Control",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",alt:"Voice Control",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",mimeType:"image/png"},subtitle:"Control your robot vacuum with voice commands."}]}},parameters:{docs:{description:{story:"5\u5F20\u5361\u7247\u5E03\u5C40\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 1:1:1 \u7B49\u5BBD\uFF0C\u7B2C\u4E8C\u884C 2:3 \u6BD4\u4F8B\uFF08\u81EA\u52A8\u6362\u884C\uFF09"}}}},L={args:{data:{...e,rounded:!0}},parameters:{docs:{description:{story:"\u5E26\u5706\u89D2\u7684\u5361\u7247\uFF1Alaptop \u4EE5\u4E0B 12px \u5706\u89D2\uFF0Claptop \u4EE5\u4E0A 16px \u5706\u89D2"}}}},R={args:{data:{...e,items:e.items.slice(0,2),rounded:!0}},parameters:{docs:{description:{story:"2\u5F20\u5361\u7247\u5E26\u5706\u89D2\uFF1A\u684C\u9762\u7AEF 2:3 \u6BD4\u4F8B\u5E03\u5C40"}}}},T={args:{data:{...e,items:[...e.items,{link:"",theme:"dark",title:"Smart Scheduling",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",mimeType:"image/png"},subtitle:"Schedule cleaning tasks automatically based on your preferences."}],rounded:!0}},parameters:{docs:{description:{story:"4\u5F20\u5361\u7247\u5E26\u5706\u89D2\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 2:3\uFF0C\u7B2C\u4E8C\u884C 3:2\uFF08\u81EA\u52A8\u6362\u884C\uFF09"}}}},F={args:{data:{...e,items:[...e.items,{link:"",theme:"dark",title:"Smart Scheduling",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",mimeType:"image/png"},subtitle:"Schedule cleaning tasks automatically based on your preferences."},{link:"",theme:"dark",title:"Voice Control",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",alt:"Voice Control",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",mimeType:"image/png"},subtitle:"Control your robot vacuum with voice commands."}],rounded:!0}},parameters:{docs:{description:{story:"5\u5F20\u5361\u7247\u5E26\u5706\u89D2\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 1:1:1\uFF0C\u7B2C\u4E8C\u884C 2:3\uFF08\u81EA\u52A8\u6362\u884C\uFF09"}}}},U={args:{data:e,className:"custom-feature-cards"},parameters:{docs:{description:{story:`
2
22
  \u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236\uFF1A
3
23
 
4
24
  **\u6839\u5143\u7D20\uFF1A**
package/dist/cjs/stories/featureCards.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/stories/featureCards.stories.tsx"],
4
- "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport FeatureCards from '../biz-components/FeatureCards/index.js'\nimport type { FeatureCardsProps } from '../biz-components/FeatureCards/types.js'\n\nconst meta = {\n title: 'Biz Components/FeatureCards',\n component: FeatureCards,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: '\u7279\u6027\u5361\u7247\u5C55\u793A\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u4EA7\u54C1\u529F\u80FD\u6216\u7279\u6027\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\u548C Swiper \u6ED1\u52A8',\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof FeatureCards>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData: FeatureCardsProps['data'] = {\n title: 'Personalized Carpet Cleaning Mode',\n subtitle: 'You can customize the carpet cleaning mode to suit your needs.',\n items: [\n {\n link: '',\n theme: 'dark',\n title: 'Carpet Avoidance',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n alt: 'Carpet Avoidance',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n mimeType: 'image/png',\n },\n subtitle: 'Automatically avoids carpets based on personalized settings.',\n },\n {\n link: '',\n theme: 'dark',\n title: 'Mop Lifting',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n alt: 'Mop Lifting',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n mimeType: 'image/png',\n },\n subtitle: 'Lifts the mop to prevent wetting carpets',\n },\n {\n link: '',\n theme: 'dark',\n title: 'Carpet Detection',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429',\n alt: 'Carpet Detection',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429',\n mimeType: 'image/png',\n },\n subtitle: 'Increases suction power when carpets are detected.',\n },\n ],\n}\n\nexport const Default: Story = {\n args: {\n data: defaultData,\n },\n}\n\nexport const LightTheme: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.map((item) => ({\n ...item,\n theme: 'light',\n })),\n },\n },\n}\n\nexport const WithLinks: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.map((item) => ({\n ...item,\n link: 'https://www.example.com',\n })),\n },\n },\n}\n\nexport const TwoCards: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.slice(0, 2),\n },\n },\n}\n\nexport const SingleCard: Story = {\n args: {\n data: {\n ...defaultData,\n items: [defaultData.items[0]],\n },\n },\n}\n\nexport const WithoutSubtitle: Story = {\n args: {\n data: {\n title: 'Personalized Carpet Cleaning Mode',\n items: defaultData.items,\n },\n },\n}\n\nexport const FourCards: Story = {\n args: {\n data: {\n ...defaultData,\n items: [\n ...defaultData.items,\n {\n link: '',\n theme: 'dark',\n title: 'Smart Scheduling',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n alt: 'Smart Scheduling',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n mimeType: 'image/png',\n },\n subtitle: 'Schedule cleaning tasks automatically based on your preferences.',\n },\n ],\n },\n },\n}\n\nexport const WithCustomStyles: Story = {\n args: {\n data: defaultData,\n className: 'custom-feature-cards',\n },\n parameters: {\n docs: {\n description: {\n story: `\n\u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236\uFF1A\n\n**\u6839\u5143\u7D20\uFF1A**\n- \\`.feature-cards\\` - \u7EC4\u4EF6\u6839\u5BB9\u5668\n\n**\u5934\u90E8\u533A\u57DF\uFF1A**\n- \\`.feature-cards__header\\` - \u5934\u90E8\u5BB9\u5668\n- \\`.feature-cards__title\\` - \u4E3B\u6807\u9898\n- \\`.feature-cards__subtitle\\` - \u526F\u6807\u9898\n\n**\u684C\u9762\u7AEF\u5E03\u5C40\uFF1A**\n- \\`.feature-cards__grid\\` - \u684C\u9762\u7AEF\u7F51\u683C\u5BB9\u5668\n\n**\u79FB\u52A8\u7AEF\u5E03\u5C40\uFF1A**\n- \\`.feature-cards__swiper-container\\` - Swiper \u5916\u5C42\u5BB9\u5668\n- \\`.feature-cards__swiper\\` - Swiper \u5B9E\u4F8B\n- \\`.feature-cards__swiper-slide\\` - Swiper \u5355\u4E2A\u6ED1\u5757\n\n**\u5361\u7247\u5143\u7D20\uFF1A**\n- \\`.feature-cards__card\\` - \u5361\u7247\u5BB9\u5668\n- \\`.feature-cards__card--mobile\\` - \u79FB\u52A8\u7AEF\u5361\u7247\u4FEE\u9970\u7B26\n- \\`.feature-cards__card-image\\` - \u5361\u7247\u80CC\u666F\u56FE\u7247\n- \\`.feature-cards__card-content\\` - \u5361\u7247\u5185\u5BB9\u5BB9\u5668\n- \\`.feature-cards__card-title\\` - \u5361\u7247\u6807\u9898\n- \\`.feature-cards__card-subtitle\\` - \u5361\u7247\u526F\u6807\u9898\n\n**\u793A\u4F8B CSS \u7528\u6CD5\uFF1A**\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u5361\u7247\u5706\u89D2 */\n.feature-cards__card {\n border-radius: 20px;\n}\n\n/* \u81EA\u5B9A\u4E49\u6807\u9898\u989C\u8272 */\n.feature-cards__card-title {\n color: #ff6b6b;\n}\n\n/* \u81EA\u5B9A\u4E49\u5361\u7247\u60AC\u505C\u6548\u679C */\n.feature-cards__card:hover {\n transform: translateY(-5px);\n transition: transform 0.3s ease;\n}\n\n/* \u81EA\u5B9A\u4E49\u7F51\u683C\u95F4\u8DDD */\n.feature-cards__grid {\n gap: 24px;\n}\n\\`\\`\\`\n `,\n },\n },\n },\n}\n"],
5
- "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,cAAAC,EAAA,eAAAC,EAAA,eAAAC,EAAA,aAAAC,EAAA,qBAAAC,EAAA,cAAAC,EAAA,oBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAX,GAAA,IAAAY,EAAkB,iBAElBC,EAAyB,sDAGzB,MAAMC,EAAO,CACX,MAAO,8BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW,gNACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQI,EAIf,MAAME,EAAyC,CAC7C,MAAO,oCACP,SAAU,iEACV,MAAO,CACL,CACE,KAAM,GACN,MAAO,OACP,MAAO,mBACP,MAAO,CACL,IAAK,wFACL,IAAK,mBACL,aAAc,wFACd,SAAU,WACZ,EACA,SAAU,8DACZ,EACA,CACE,KAAM,GACN,MAAO,OACP,MAAO,cACP,MAAO,CACL,IAAK,iHACL,IAAK,cACL,aACE,iHACF,SAAU,WACZ,EACA,SAAU,0CACZ,EACA,CACE,KAAM,GACN,MAAO,OACP,MAAO,mBACP,MAAO,CACL,IAAK,iHACL,IAAK,mBACL,aACE,iHACF,SAAU,WACZ,EACA,SAAU,oDACZ,CACF,CACF,EAEad,EAAiB,CAC5B,KAAM,CACJ,KAAMc,CACR,CACF,EAEaZ,EAAoB,CAC/B,KAAM,CACJ,KAAM,CACJ,GAAGY,EACH,MAAOA,EAAY,MAAM,IAAKC,IAAU,CACtC,GAAGA,EACH,MAAO,OACT,EAAE,CACJ,CACF,CACF,EAEaT,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,GAAGQ,EACH,MAAOA,EAAY,MAAM,IAAKC,IAAU,CACtC,GAAGA,EACH,KAAM,yBACR,EAAE,CACJ,CACF,CACF,EAEaX,EAAkB,CAC7B,KAAM,CACJ,KAAM,CACJ,GAAGU,EACH,MAAOA,EAAY,MAAM,MAAM,EAAG,CAAC,CACrC,CACF,CACF,EAEaX,EAAoB,CAC/B,KAAM,CACJ,KAAM,CACJ,GAAGW,EACH,MAAO,CAACA,EAAY,MAAM,CAAC,CAAC,CAC9B,CACF,CACF,EAEaP,EAAyB,CACpC,KAAM,CACJ,KAAM,CACJ,MAAO,oCACP,MAAOO,EAAY,KACrB,CACF,CACF,EAEab,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,GAAGa,EACH,MAAO,CACL,GAAGA,EAAY,MACf,CACE,KAAM,GACN,MAAO,OACP,MAAO,mBACP,MAAO,CACL,IAAK,wFACL,IAAK,mBACL,aAAc,wFACd,SAAU,WACZ,EACA,SAAU,kEACZ,CACF,CACF,CACF,CACF,EAEaT,EAA0B,CACrC,KAAM,CACJ,KAAMS,EACN,UAAW,sBACb,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAmDT,CACF,CACF,CACF",
6
- "names": ["featureCards_stories_exports", "__export", "Default", "FourCards", "LightTheme", "SingleCard", "TwoCards", "WithCustomStyles", "WithLinks", "WithoutSubtitle", "featureCards_stories_default", "__toCommonJS", "import_react", "import_FeatureCards", "meta", "FeatureCards", "defaultData", "item"]
4
+ "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport FeatureCards from '../biz-components/FeatureCards/index.js'\nimport type { FeatureCardsProps } from '../biz-components/FeatureCards/types.js'\n\nconst meta = {\n title: 'Biz Components/FeatureCards',\n component: FeatureCards,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: `\u7279\u6027\u5361\u7247\u5C55\u793A\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u4EA7\u54C1\u529F\u80FD\u6216\u7279\u6027\n\n## \u54CD\u5E94\u5F0F\u5E03\u5C40\n\n### \u79FB\u52A8\u7AEF\u548C\u5E73\u677F\n- \u6240\u6709\u5361\u7247\u5BBD\u5EA6\u76F8\u7B49\uFF0C\u4F7F\u7528 Swiper \u8F6E\u64AD\u5C55\u793A\n\n### \u684C\u9762\u7AEF\uFF08laptop+\uFF09\n\u6839\u636E\u5361\u7247\u6570\u91CF\u81EA\u52A8\u8C03\u6574\u5E03\u5C40\u6BD4\u4F8B\uFF1A\n- **2\u5F20\u5361\u7247**\uFF1A2:3 \u6BD4\u4F8B\n- **3\u5F20\u5361\u7247**\uFF1A1:1:1 \u7B49\u5BBD\n- **4\u5F20\u5361\u7247**\uFF1A\u7B2C\u4E00\u884C 2:3\uFF0C\u7B2C\u4E8C\u884C 3:2\uFF08\u81EA\u52A8\u6362\u884C\uFF09\n- **5\u5F20\u5361\u7247**\uFF1A\u7B2C\u4E00\u884C 1:1:1\uFF0C\u7B2C\u4E8C\u884C 2:3\uFF08\u81EA\u52A8\u6362\u884C\uFF09\n\n## \u5706\u89D2\u914D\u7F6E\n\n\u901A\u8FC7 \\`rounded\\` \u5C5E\u6027\u63A7\u5236\u5361\u7247\u5706\u89D2\uFF1A\n- **\u9ED8\u8BA4**\uFF1A\\`rounded: false\\`\uFF08\u76F4\u89D2\uFF09\n- **\u5F00\u542F\u5706\u89D2**\uFF1A\\`rounded: true\\`\n - laptop \u4EE5\u4E0B\uFF1A12px \u5706\u89D2\n - laptop \u4EE5\u4E0A\uFF1A16px \u5706\u89D2`,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof FeatureCards>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData: FeatureCardsProps['data'] = {\n title: 'Personalized Carpet Cleaning Mode',\n subtitle: 'You can customize the carpet cleaning mode to suit your needs.',\n items: [\n {\n link: '',\n theme: 'dark',\n title: 'Carpet Avoidance',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n alt: 'Carpet Avoidance',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n mimeType: 'image/png',\n },\n subtitle: 'Automatically avoids carpets based on personalized settings.',\n },\n {\n link: '',\n theme: 'dark',\n title: 'Mop Lifting',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n alt: 'Mop Lifting',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n mimeType: 'image/png',\n },\n subtitle: 'Lifts the mop to prevent wetting carpets',\n },\n {\n link: '',\n theme: 'dark',\n title: 'Carpet Detection',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429',\n alt: 'Carpet Detection',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429',\n mimeType: 'image/png',\n },\n subtitle: 'Increases suction power when carpets are detected.',\n },\n ],\n}\n\nexport const Default: Story = {\n args: {\n data: defaultData,\n },\n}\n\nexport const LightTheme: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.map((item) => ({\n ...item,\n theme: 'light',\n })),\n },\n },\n}\n\nexport const WithLinks: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.map((item) => ({\n ...item,\n link: 'https://www.example.com',\n })),\n },\n },\n}\n\nexport const TwoCards: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.slice(0, 2),\n },\n },\n}\n\nexport const SingleCard: Story = {\n args: {\n data: {\n ...defaultData,\n items: [defaultData.items[0]],\n },\n },\n}\n\nexport const WithoutSubtitle: Story = {\n args: {\n data: {\n title: 'Personalized Carpet Cleaning Mode',\n items: defaultData.items,\n },\n },\n}\n\nexport const FourCards: Story = {\n args: {\n data: {\n ...defaultData,\n items: [\n ...defaultData.items,\n {\n link: '',\n theme: 'dark',\n title: 'Smart Scheduling',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n alt: 'Smart Scheduling',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n mimeType: 'image/png',\n },\n subtitle: 'Schedule cleaning tasks automatically based on your preferences.',\n },\n ],\n },\n },\n parameters: {\n docs: {\n description: {\n story: '4\u5F20\u5361\u7247\u5E03\u5C40\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 2:3 \u6BD4\u4F8B\uFF0C\u7B2C\u4E8C\u884C 3:2 \u6BD4\u4F8B\uFF08\u81EA\u52A8\u6362\u884C\uFF09',\n },\n },\n },\n}\n\nexport const FiveCards: Story = {\n args: {\n data: {\n ...defaultData,\n items: [\n ...defaultData.items,\n {\n link: '',\n theme: 'dark',\n title: 'Smart Scheduling',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n alt: 'Smart Scheduling',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n mimeType: 'image/png',\n },\n subtitle: 'Schedule cleaning tasks automatically based on your preferences.',\n },\n {\n link: '',\n theme: 'dark',\n title: 'Voice Control',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n alt: 'Voice Control',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n mimeType: 'image/png',\n },\n subtitle: 'Control your robot vacuum with voice commands.',\n },\n ],\n },\n },\n parameters: {\n docs: {\n description: {\n story: '5\u5F20\u5361\u7247\u5E03\u5C40\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 1:1:1 \u7B49\u5BBD\uFF0C\u7B2C\u4E8C\u884C 2:3 \u6BD4\u4F8B\uFF08\u81EA\u52A8\u6362\u884C\uFF09',\n },\n },\n },\n}\n\nexport const WithRounded: Story = {\n args: {\n data: {\n ...defaultData,\n rounded: true,\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u5E26\u5706\u89D2\u7684\u5361\u7247\uFF1Alaptop \u4EE5\u4E0B 12px \u5706\u89D2\uFF0Claptop \u4EE5\u4E0A 16px \u5706\u89D2',\n },\n },\n },\n}\n\nexport const TwoCardsWithRounded: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.slice(0, 2),\n rounded: true,\n },\n },\n parameters: {\n docs: {\n description: {\n story: '2\u5F20\u5361\u7247\u5E26\u5706\u89D2\uFF1A\u684C\u9762\u7AEF 2:3 \u6BD4\u4F8B\u5E03\u5C40',\n },\n },\n },\n}\n\nexport const FourCardsWithRounded: Story = {\n args: {\n data: {\n ...defaultData,\n items: [\n ...defaultData.items,\n {\n link: '',\n theme: 'dark',\n title: 'Smart Scheduling',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n alt: 'Smart Scheduling',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n mimeType: 'image/png',\n },\n subtitle: 'Schedule cleaning tasks automatically based on your preferences.',\n },\n ],\n rounded: true,\n },\n },\n parameters: {\n docs: {\n description: {\n story: '4\u5F20\u5361\u7247\u5E26\u5706\u89D2\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 2:3\uFF0C\u7B2C\u4E8C\u884C 3:2\uFF08\u81EA\u52A8\u6362\u884C\uFF09',\n },\n },\n },\n}\n\nexport const FiveCardsWithRounded: Story = {\n args: {\n data: {\n ...defaultData,\n items: [\n ...defaultData.items,\n {\n link: '',\n theme: 'dark',\n title: 'Smart Scheduling',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n alt: 'Smart Scheduling',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n mimeType: 'image/png',\n },\n subtitle: 'Schedule cleaning tasks automatically based on your preferences.',\n },\n {\n link: '',\n theme: 'dark',\n title: 'Voice Control',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n alt: 'Voice Control',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n mimeType: 'image/png',\n },\n subtitle: 'Control your robot vacuum with voice commands.',\n },\n ],\n rounded: true,\n },\n },\n parameters: {\n docs: {\n description: {\n story: '5\u5F20\u5361\u7247\u5E26\u5706\u89D2\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 1:1:1\uFF0C\u7B2C\u4E8C\u884C 2:3\uFF08\u81EA\u52A8\u6362\u884C\uFF09',\n },\n },\n },\n}\n\nexport const WithCustomStyles: Story = {\n args: {\n data: defaultData,\n className: 'custom-feature-cards',\n },\n parameters: {\n docs: {\n description: {\n story: `\n\u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236\uFF1A\n\n**\u6839\u5143\u7D20\uFF1A**\n- \\`.feature-cards\\` - \u7EC4\u4EF6\u6839\u5BB9\u5668\n\n**\u5934\u90E8\u533A\u57DF\uFF1A**\n- \\`.feature-cards__header\\` - \u5934\u90E8\u5BB9\u5668\n- \\`.feature-cards__title\\` - \u4E3B\u6807\u9898\n- \\`.feature-cards__subtitle\\` - \u526F\u6807\u9898\n\n**\u684C\u9762\u7AEF\u5E03\u5C40\uFF1A**\n- \\`.feature-cards__grid\\` - \u684C\u9762\u7AEF\u7F51\u683C\u5BB9\u5668\n\n**\u79FB\u52A8\u7AEF\u5E03\u5C40\uFF1A**\n- \\`.feature-cards__swiper-container\\` - Swiper \u5916\u5C42\u5BB9\u5668\n- \\`.feature-cards__swiper\\` - Swiper \u5B9E\u4F8B\n- \\`.feature-cards__swiper-slide\\` - Swiper \u5355\u4E2A\u6ED1\u5757\n\n**\u5361\u7247\u5143\u7D20\uFF1A**\n- \\`.feature-cards__card\\` - \u5361\u7247\u5BB9\u5668\n- \\`.feature-cards__card--mobile\\` - \u79FB\u52A8\u7AEF\u5361\u7247\u4FEE\u9970\u7B26\n- \\`.feature-cards__card-image\\` - \u5361\u7247\u80CC\u666F\u56FE\u7247\n- \\`.feature-cards__card-content\\` - \u5361\u7247\u5185\u5BB9\u5BB9\u5668\n- \\`.feature-cards__card-title\\` - \u5361\u7247\u6807\u9898\n- \\`.feature-cards__card-subtitle\\` - \u5361\u7247\u526F\u6807\u9898\n\n**\u793A\u4F8B CSS \u7528\u6CD5\uFF1A**\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u5361\u7247\u5706\u89D2 */\n.feature-cards__card {\n border-radius: 20px;\n}\n\n/* \u81EA\u5B9A\u4E49\u6807\u9898\u989C\u8272 */\n.feature-cards__card-title {\n color: #ff6b6b;\n}\n\n/* \u81EA\u5B9A\u4E49\u5361\u7247\u60AC\u505C\u6548\u679C */\n.feature-cards__card:hover {\n transform: translateY(-5px);\n transition: transform 0.3s ease;\n}\n\n/* \u81EA\u5B9A\u4E49\u7F51\u683C\u95F4\u8DDD */\n.feature-cards__grid {\n gap: 24px;\n}\n\\`\\`\\`\n `,\n },\n },\n },\n}\n"],
5
+ "mappings": "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",
6
+ "names": ["featureCards_stories_exports", "__export", "Default", "FiveCards", "FiveCardsWithRounded", "FourCards", "FourCardsWithRounded", "LightTheme", "SingleCard", "TwoCards", "TwoCardsWithRounded", "WithCustomStyles", "WithLinks", "WithRounded", "WithoutSubtitle", "featureCards_stories_default", "__toCommonJS", "import_react", "import_FeatureCards", "meta", "FeatureCards", "defaultData", "item"]
7
7
  }
package/dist/esm/biz-components/FeatureCards/FeatureCards.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{Fragment as z,jsx as t,jsxs as a}from"react/jsx-runtime";import f,{useImperativeHandle as N,useRef as w}from"react";import{Heading as l,Picture as m,Text as d}from"../../components/index.js";import{cn as i}from"../../helpers/utils.js";import{withLayout as y}from"../../shared/Styles.js";import{useExposure as b}from"../../hooks/useExposure.js";import{trackUrlRef as C}from"../../shared/trackUrlRef.js";import{Swiper as F,SwiperSlide as T}from"swiper/react";const o="image",c="feature_cards",_=f.forwardRef(({data:h,className:g},v)=>{const{title:s,subtitle:r,items:x=[]}=h,p=w(null);b(p,{componentType:o,componentName:c,componentTitle:s,componentDescription:r}),N(v,()=>p.current);const k=e=>{const u=a(z,{children:[t(m,{source:e.image?.url,alt:e.image?.alt||e.title,className:"feature-cards__card-image absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),a("div",{className:"feature-cards__card-content z-10",children:[t(l,{size:3,as:"h2",className:"feature-cards__card-title laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]",children:e.title}),t(d,{size:4,as:"p",className:"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] text-[14px] laptop:h-[44px] lg-desktop:text-[18px]",children:e.subtitle})]})]}),n=i("feature-cards__card relative flex h-[360px] max-h-[560px] flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary tablet:h-[336px] laptop:h-[336px] laptop:px-[16px] laptop:py-[16px] desktop:h-[448px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px] lg-desktop:h-[560px]",{"aiui-dark":e.theme==="dark","aiui-light":e.theme==="light"});return e.link?t("a",{href:C(e.link,`${o}_${c}`),className:n,"data-headless-type-name":`${o}#${c}`,"data-headless-title-desc-button":`${s}#${e.title}#${e.subtitle}`,children:u}):t("div",{className:n,children:u})};return a("section",{ref:p,"data-ui-component-id":"FeatureCards",className:i("feature-cards flex w-full flex-col justify-center",g),children:[a("div",{className:"feature-cards__header",children:[t(l,{size:4,as:"h1",className:"feature-cards__title text-left laptop:text-center",children:s}),r&&t(d,{size:2,as:"p",className:"feature-cards__subtitle mt-[4px] text-left text-[14px] laptop:text-center desktop:text-[16px] lg-desktop:text-[18px]",children:r})]}),t("div",{className:"feature-cards__grid mt-[24px] hidden w-full gap-[16px] laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px]",children:x.map(e=>t(f.Fragment,{children:k(e)},e.title))}),t("div",{className:"feature-cards__swiper-container mt-[24px] w-full laptop:hidden",children:t(F,{spaceBetween:12,slidesPerView:"auto",grabCursor:!0,className:"feature-cards__swiper relative w-full !overflow-visible",children:x.map(e=>t(T,{className:"feature-cards__swiper-slide relative !h-[360px] !w-[296px]",children:a("div",{className:i("feature-cards__card feature-cards__card--mobile absolute inset-0 flex flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary laptop:px-[16px] laptop:py-[16px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px]",{"aiui-dark":e.theme==="dark","aiui-light":e.theme==="light"}),children:[t(m,{source:e.image?.url,alt:e.image?.alt||e.title,className:"feature-cards__card-image absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),a("div",{className:"feature-cards__card-content z-10",children:[t(l,{size:3,as:"h2",className:"feature-cards__card-title",children:e.title}),t(d,{size:4,as:"p",className:"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] overflow-visible text-[14px] laptop:h-[50px] lg-desktop:text-[18px]",children:e.subtitle})]})]},e.title)},e.title))})})]})});_.displayName="FeatureCards";var L=y(_);export{L as default};
1
+ "use client";import{Fragment as D,jsx as t,jsxs as l}from"react/jsx-runtime";import g,{useImperativeHandle as F,useRef as T}from"react";import{Heading as u,Picture as v,Text as c}from"../../components/index.js";import{cn as n}from"../../helpers/utils.js";import{withLayout as z}from"../../shared/Styles.js";import{useExposure as H}from"../../hooks/useExposure.js";import{trackUrlRef as R}from"../../shared/trackUrlRef.js";import{Swiper as $,SwiperSlide as S}from"swiper/react";const f="image",x="feature_cards",j=(a,r)=>r===2?a===0?"laptop:flex-[2]":"laptop:flex-[3]":r===3?"laptop:flex-[1]":r===4?a===0?"laptop:flex-[2]":a===1||a===2?"laptop:flex-[3]":"laptop:flex-[2]":r===5?a<3?"laptop:flex-[1]":a===3?"laptop:flex-[2]":"laptop:flex-[3]":"laptop:flex-[1]",L=(a,r)=>r===4&&a===1||r===5&&a===2,b=g.forwardRef(({data:a,className:r},N)=>{const{title:o,subtitle:i,items:p=[],rounded:k=!1}=a,d=T(null);H(d,{componentType:f,componentName:x,componentTitle:o,componentDescription:i}),F(N,()=>d.current);const m=k?"rounded-[12px] laptop:rounded-[16px]":"rounded-none",w=(e,s)=>{const h=l(D,{children:[t(v,{source:e.image?.url,alt:e.image?.alt||e.title,className:"feature-cards__card-image absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),l("div",{className:"feature-cards__card-content z-10",children:[t(u,{size:3,as:"h2",className:"feature-cards__card-title laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]",children:e.title}),t(c,{size:4,as:"p",className:"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] text-[14px] laptop:h-[44px] lg-desktop:text-[18px]",children:e.subtitle})]})]}),y="feature-cards__card relative flex h-[360px] max-h-[560px] flex-col justify-end gap-[16px] overflow-hidden px-[16px] py-[12px] text-info-primary tablet:h-[336px] laptop:h-[336px] laptop:px-[16px] laptop:py-[16px] desktop:h-[448px] desktop:px-[32px] desktop:py-[24px] lg-desktop:h-[560px]",C=s!==void 0?j(s,p.length):"flex-1",_=n(y,m,C,{"aiui-dark":e.theme==="dark","aiui-light":e.theme==="light"});return e.link?t("a",{href:R(e.link,`${f}_${x}`),className:_,"data-headless-type-name":`${f}#${x}`,"data-headless-title-desc-button":`${o}#${e.title}#${e.subtitle}`,children:h}):t("div",{className:_,children:h})};return l("section",{ref:d,"data-ui-component-id":"FeatureCards",className:n("feature-cards flex w-full flex-col justify-center",r),children:[l("div",{className:"feature-cards__header",children:[t(u,{size:4,as:"h1",className:"feature-cards__title text-left laptop:text-center",children:o}),i&&t(c,{size:2,as:"p",className:"feature-cards__subtitle mt-[4px] text-left text-[14px] laptop:text-center desktop:text-[16px] lg-desktop:text-[18px]",children:i})]}),t("div",{className:"feature-cards__grid mt-[24px] hidden w-full flex-wrap gap-[16px] laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px]",children:p.map((e,s)=>l(g.Fragment,{children:[w(e,s),L(s,p.length)&&t("div",{className:"laptop:basis-full laptop:h-0"})]},e.title))}),t("div",{className:"feature-cards__swiper-container mt-[24px] w-full laptop:hidden",children:t($,{spaceBetween:12,slidesPerView:"auto",grabCursor:!0,className:"feature-cards__swiper relative w-full !overflow-visible",children:p.map(e=>t(S,{className:"feature-cards__swiper-slide relative !h-[360px] !w-[296px]",children:l("div",{className:n("feature-cards__card feature-cards__card--mobile absolute inset-0 flex flex-1 flex-col justify-end gap-[16px] overflow-hidden px-[16px] py-[12px] text-info-primary",m,{"aiui-dark":e.theme==="dark","aiui-light":e.theme==="light"}),children:[t(v,{source:e.image?.url,alt:e.image?.alt||e.title,className:"feature-cards__card-image absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),l("div",{className:"feature-cards__card-content z-10",children:[t(u,{size:3,as:"h2",className:"feature-cards__card-title",children:e.title}),t(c,{size:4,as:"p",className:"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] overflow-visible text-[14px] laptop:h-[50px] lg-desktop:text-[18px]",children:e.subtitle})]})]},e.title)},e.title))})})]})});b.displayName="FeatureCards";var q=z(b);export{q as default};
2
2
  //# sourceMappingURL=FeatureCards.js.map
package/dist/esm/biz-components/FeatureCards/FeatureCards.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/FeatureCards/FeatureCards.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { FeatureCardsProps, FeatureCardItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\nconst componentType = 'image'\nconst componentName = 'feature_cards'\n\nconst FeatureCards = React.forwardRef<HTMLDivElement, FeatureCardsProps>(({ data, className }, ref) => {\n const { title, subtitle, items = [] } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n const renderCard = (item: FeatureCardItem) => {\n const cardContent = (\n <>\n <Picture\n source={item.image?.url}\n alt={item.image?.alt || item.title}\n className=\"feature-cards__card-image absolute inset-0 !h-full\"\n imgClassName=\"!h-full object-cover\"\n />\n <div className=\"feature-cards__card-content z-10\">\n <Heading size={3} as=\"h2\" className=\"feature-cards__card-title laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]\">\n {item.title}\n </Heading>\n <Text\n size={4}\n as=\"p\"\n className=\"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] text-[14px] laptop:h-[44px] lg-desktop:text-[18px]\"\n >\n {item.subtitle}\n </Text>\n </div>\n </>\n )\n\n const cardClasses = cn(\n 'feature-cards__card relative flex h-[360px] max-h-[560px] flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary tablet:h-[336px] laptop:h-[336px] laptop:px-[16px] laptop:py-[16px] desktop:h-[448px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px] lg-desktop:h-[560px]',\n {\n 'aiui-dark': item.theme === 'dark',\n 'aiui-light': item.theme === 'light',\n }\n )\n\n if (item.link) {\n return (\n <a\n href={trackUrlRef(item.link, `${componentType}_${componentName}`)}\n className={cardClasses}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${item.title}#${item.subtitle}`}\n >\n {cardContent}\n </a>\n )\n }\n\n return <div className={cardClasses}>{cardContent}</div>\n }\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"FeatureCards\"\n className={cn('feature-cards flex w-full flex-col justify-center', className)}\n >\n {/* \u6807\u9898\u533A\u57DF */}\n <div className=\"feature-cards__header\">\n <Heading size={4} as=\"h1\" className=\"feature-cards__title text-left laptop:text-center\">\n {title}\n </Heading>\n {subtitle && (\n <Text\n size={2}\n as=\"p\"\n className=\"feature-cards__subtitle mt-[4px] text-left text-[14px] laptop:text-center desktop:text-[16px] lg-desktop:text-[18px]\"\n >\n {subtitle}\n </Text>\n )}\n </div>\n\n {/* \u684C\u9762\u7AEF\u7F51\u683C\u5E03\u5C40 */}\n <div className=\"feature-cards__grid mt-[24px] hidden w-full gap-[16px] laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px]\">\n {items.map(item => (\n <React.Fragment key={item.title}>{renderCard(item)}</React.Fragment>\n ))}\n </div>\n\n {/* \u79FB\u52A8\u7AEF Swiper \u5E03\u5C40 */}\n <div className=\"feature-cards__swiper-container mt-[24px] w-full laptop:hidden\">\n <Swiper spaceBetween={12} slidesPerView=\"auto\" grabCursor className=\"feature-cards__swiper relative w-full !overflow-visible\">\n {items.map(item => (\n <SwiperSlide key={item.title} className=\"feature-cards__swiper-slide relative !h-[360px] !w-[296px]\">\n <div\n key={item.title}\n className={cn(\n 'feature-cards__card feature-cards__card--mobile absolute inset-0 flex flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary laptop:px-[16px] laptop:py-[16px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px]',\n {\n 'aiui-dark': item.theme === 'dark',\n 'aiui-light': item.theme === 'light',\n }\n )}\n >\n <Picture\n source={item.image?.url}\n alt={item.image?.alt || item.title}\n className=\"feature-cards__card-image absolute inset-0 !h-full\"\n imgClassName=\"!h-full object-cover\"\n />\n <div className=\"feature-cards__card-content z-10\">\n <Heading size={3} as=\"h2\" className=\"feature-cards__card-title\">\n {item.title}\n </Heading>\n <Text\n size={4}\n as=\"p\"\n className=\"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] overflow-visible text-[14px] laptop:h-[50px] lg-desktop:text-[18px]\"\n >\n {item.subtitle}\n </Text>\n </div>\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </section>\n )\n})\n\nFeatureCards.displayName = 'FeatureCards'\n\nexport default withLayout(FeatureCards)\n"],
5
- "mappings": "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",
6
- "names": ["Fragment", "jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "trackUrlRef", "Swiper", "SwiperSlide", "componentType", "componentName", "FeatureCards", "data", "className", "ref", "title", "subtitle", "items", "boxRef", "renderCard", "item", "cardContent", "cardClasses", "FeatureCards_default"]
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { FeatureCardsProps, FeatureCardItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\nconst componentType = 'image'\nconst componentName = 'feature_cards'\n\n/**\n * \u6839\u636E\u5361\u7247\u6570\u91CF\u83B7\u53D6\u684C\u9762\u7AEF\uFF08laptop+\uFF09\u7684\u7F51\u683C\u5E03\u5C40\u7C7B\u540D\n * - 2\u5F20\u5361\u7247: 2:3\n * - 3\u5F20\u5361\u7247: 1:1:1\n * - 4\u5F20\u5361\u7247: \u7B2C\u4E00\u884C 2:3\uFF0C\u7B2C\u4E8C\u884C 3:2\n * - 5\u5F20\u5361\u7247: \u7B2C\u4E00\u884C 1:1:1\uFF0C\u7B2C\u4E8C\u884C 2:3\n */\nconst getCardLayoutClasses = (index: number, totalCards: number): string => {\n if (totalCards === 2) {\n // 2:3 \u6BD4\u4F8B\n return index === 0 ? 'laptop:flex-[2]' : 'laptop:flex-[3]'\n }\n\n if (totalCards === 3) {\n // 1:1:1 \u6BD4\u4F8B\n return 'laptop:flex-[1]'\n }\n\n if (totalCards === 4) {\n // \u7B2C\u4E00\u884C 2:3\uFF0C\u7B2C\u4E8C\u884C 3:2\n if (index === 0) return 'laptop:flex-[2]'\n if (index === 1) return 'laptop:flex-[3]'\n if (index === 2) return 'laptop:flex-[3]'\n return 'laptop:flex-[2]'\n }\n\n if (totalCards === 5) {\n // \u7B2C\u4E00\u884C 1:1:1\uFF0C\u7B2C\u4E8C\u884C 2:3\n if (index < 3) return 'laptop:flex-[1]'\n if (index === 3) return 'laptop:flex-[2]'\n return 'laptop:flex-[3]'\n }\n\n // \u9ED8\u8BA4\u7B49\u5BBD\n return 'laptop:flex-[1]'\n}\n\n/**\n * \u6839\u636E\u5361\u7247\u6570\u91CF\u786E\u5B9A\u662F\u5426\u9700\u8981\u6362\u884C\n * - 4\u5F20\u5361\u7247: \u7B2C\u4E00\u884C2\u5F20\uFF0C\u7B2C\u4E8C\u884C2\u5F20\n * - 5\u5F20\u5361\u7247: \u7B2C\u4E00\u884C3\u5F20\uFF0C\u7B2C\u4E8C\u884C2\u5F20\n */\nconst shouldBreakRow = (index: number, totalCards: number): boolean => {\n if (totalCards === 4 && index === 1) return true\n if (totalCards === 5 && index === 2) return true\n return false\n}\n\nconst FeatureCards = React.forwardRef<HTMLDivElement, FeatureCardsProps>(({ data, className }, ref) => {\n const { title, subtitle, items = [], rounded = false } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n // \u5706\u89D2\u7C7B\u540D\n const roundedClasses = rounded ? 'rounded-[12px] laptop:rounded-[16px]' : 'rounded-none'\n\n const renderCard = (item: FeatureCardItem, index?: number) => {\n const cardContent = (\n <>\n <Picture\n source={item.image?.url}\n alt={item.image?.alt || item.title}\n className=\"feature-cards__card-image absolute inset-0 !h-full\"\n imgClassName=\"!h-full object-cover\"\n />\n <div className=\"feature-cards__card-content z-10\">\n <Heading size={3} as=\"h2\" className=\"feature-cards__card-title laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]\">\n {item.title}\n </Heading>\n <Text\n size={4}\n as=\"p\"\n className=\"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] text-[14px] laptop:h-[44px] lg-desktop:text-[18px]\"\n >\n {item.subtitle}\n </Text>\n </div>\n </>\n )\n\n // \u57FA\u7840\u6837\u5F0F\uFF08\u79FB\u9664\u539F\u6709\u7684 rounded \u7C7B\uFF09\n const baseClasses = 'feature-cards__card relative flex h-[360px] max-h-[560px] flex-col justify-end gap-[16px] overflow-hidden px-[16px] py-[12px] text-info-primary tablet:h-[336px] laptop:h-[336px] laptop:px-[16px] laptop:py-[16px] desktop:h-[448px] desktop:px-[32px] desktop:py-[24px] lg-desktop:h-[560px]'\n\n // \u83B7\u53D6\u54CD\u5E94\u5F0F\u5E03\u5C40\u7C7B\u540D\uFF08\u4EC5\u7528\u4E8E\u684C\u9762\u7AEF\uFF09\n const layoutClasses = index !== undefined ? getCardLayoutClasses(index, items.length) : 'flex-1'\n\n const cardClasses = cn(\n baseClasses,\n roundedClasses,\n layoutClasses,\n {\n 'aiui-dark': item.theme === 'dark',\n 'aiui-light': item.theme === 'light',\n }\n )\n\n if (item.link) {\n return (\n <a\n href={trackUrlRef(item.link, `${componentType}_${componentName}`)}\n className={cardClasses}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${item.title}#${item.subtitle}`}\n >\n {cardContent}\n </a>\n )\n }\n\n return <div className={cardClasses}>{cardContent}</div>\n }\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"FeatureCards\"\n className={cn('feature-cards flex w-full flex-col justify-center', className)}\n >\n {/* \u6807\u9898\u533A\u57DF */}\n <div className=\"feature-cards__header\">\n <Heading size={4} as=\"h1\" className=\"feature-cards__title text-left laptop:text-center\">\n {title}\n </Heading>\n {subtitle && (\n <Text\n size={2}\n as=\"p\"\n className=\"feature-cards__subtitle mt-[4px] text-left text-[14px] laptop:text-center desktop:text-[16px] lg-desktop:text-[18px]\"\n >\n {subtitle}\n </Text>\n )}\n </div>\n\n {/* \u684C\u9762\u7AEF\u7F51\u683C\u5E03\u5C40 */}\n <div className=\"feature-cards__grid mt-[24px] hidden w-full flex-wrap gap-[16px] laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px]\">\n {items.map((item, index) => (\n <React.Fragment key={item.title}>\n {renderCard(item, index)}\n {/* \u5728\u7279\u5B9A\u4F4D\u7F6E\u63D2\u5165\u6362\u884C */}\n {shouldBreakRow(index, items.length) && <div className=\"laptop:basis-full laptop:h-0\" />}\n </React.Fragment>\n ))}\n </div>\n\n {/* \u79FB\u52A8\u7AEF Swiper \u5E03\u5C40 */}\n <div className=\"feature-cards__swiper-container mt-[24px] w-full laptop:hidden\">\n <Swiper spaceBetween={12} slidesPerView=\"auto\" grabCursor className=\"feature-cards__swiper relative w-full !overflow-visible\">\n {items.map(item => (\n <SwiperSlide key={item.title} className=\"feature-cards__swiper-slide relative !h-[360px] !w-[296px]\">\n <div\n key={item.title}\n className={cn(\n 'feature-cards__card feature-cards__card--mobile absolute inset-0 flex flex-1 flex-col justify-end gap-[16px] overflow-hidden px-[16px] py-[12px] text-info-primary',\n roundedClasses,\n {\n 'aiui-dark': item.theme === 'dark',\n 'aiui-light': item.theme === 'light',\n }\n )}\n >\n <Picture\n source={item.image?.url}\n alt={item.image?.alt || item.title}\n className=\"feature-cards__card-image absolute inset-0 !h-full\"\n imgClassName=\"!h-full object-cover\"\n />\n <div className=\"feature-cards__card-content z-10\">\n <Heading size={3} as=\"h2\" className=\"feature-cards__card-title\">\n {item.title}\n </Heading>\n <Text\n size={4}\n as=\"p\"\n className=\"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] overflow-visible text-[14px] laptop:h-[50px] lg-desktop:text-[18px]\"\n >\n {item.subtitle}\n </Text>\n </div>\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </section>\n )\n})\n\nFeatureCards.displayName = 'FeatureCards'\n\nexport default withLayout(FeatureCards)\n"],
5
+ "mappings": "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",
6
+ "names": ["Fragment", "jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "trackUrlRef", "Swiper", "SwiperSlide", "componentType", "componentName", "getCardLayoutClasses", "index", "totalCards", "shouldBreakRow", "FeatureCards", "data", "className", "ref", "title", "subtitle", "items", "rounded", "boxRef", "roundedClasses", "renderCard", "item", "cardContent", "baseClasses", "layoutClasses", "cardClasses", "FeatureCards_default"]
7
7
  }
package/dist/esm/biz-components/FeatureCards/types.d.ts CHANGED
@@ -19,6 +19,8 @@ export interface FeatureCardsProps {
19
19
  subtitle?: string;
20
20
  /** 卡片列表 */
21
21
  items: FeatureCardItem[];
22
+ /** 是否显示圆角，默认为 false（直角）。laptop 以下 12px，laptop 以上 16px */
23
+ rounded?: boolean;
22
24
  };
23
25
  /** 自定义类名 */
24
26
  className?: string;
package/dist/esm/shared/ErrorBoundary.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import type { ReactNode } from 'react';
3
+ interface ErrorBoundaryProps {
4
+ children: ReactNode;
5
+ fallback?: ReactNode;
6
+ }
7
+ interface ErrorBoundaryState {
8
+ hasError: boolean;
9
+ error: Error | null;
10
+ errorInfo: React.ErrorInfo | null;
11
+ }
12
+ declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
13
+ constructor(props: ErrorBoundaryProps);
14
+ static getDerivedStateFromError(error: Error): ErrorBoundaryState;
15
+ componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
16
+ render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<React.AwaitedReactNode> | null | undefined;
17
+ }
18
+ export default ErrorBoundary;
package/dist/esm/shared/ErrorBoundary.js ADDED
@@ -0,0 +1,2 @@
1
+ import"react/jsx-runtime";import o from"react";class t extends o.Component{constructor(r){super(r),this.state={hasError:!1,error:null,errorInfo:null}}static getDerivedStateFromError(r){return{hasError:!0,error:r,errorInfo:null}}componentDidCatch(r,e){console.error("@anker-in/headless-ui biz component ErrorBoundary caught an error:",r,e),this.setState({errorInfo:e})}render(){return this.state.hasError?this.props.fallback?this.props.fallback:null:this.props.children}}var s=t;export{s as default};
2
+ //# sourceMappingURL=ErrorBoundary.js.map
package/dist/esm/shared/ErrorBoundary.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/shared/ErrorBoundary.tsx"],
4
+ "sourcesContent": ["import React from 'react'\nimport type { ReactNode } from 'react'\n\ninterface ErrorBoundaryProps {\n children: ReactNode\n fallback?: ReactNode // \u53EF\u81EA\u5B9A\u4E49\u9519\u8BEFUI\n}\n\ninterface ErrorBoundaryState {\n hasError: boolean\n error: Error | null\n errorInfo: React.ErrorInfo | null\n}\n\nclass ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n constructor(props: ErrorBoundaryProps) {\n super(props)\n this.state = { hasError: false, error: null, errorInfo: null }\n }\n\n static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n return { hasError: true, error, errorInfo: null }\n }\n\n componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n console.error('@anker-in/headless-ui biz component ErrorBoundary caught an error:', error, errorInfo)\n this.setState({ errorInfo })\n // \u53EF\u4EE5\u5728\u8FD9\u91CC\u4E0A\u62A5\u9519\u8BEF\u65E5\u5FD7\n }\n\n render() {\n if (this.state.hasError) {\n // \u4F7F\u7528\u81EA\u5B9A\u4E49 fallback UI \u6216\u9ED8\u8BA4 UI\n if (this.props.fallback) return this.props.fallback\n // \u53EA\u5728\u5F00\u53D1\u6A21\u5F0F\u663E\u793A\u9519\u8BEF\n return process.env.NODE_ENV === 'development' ? (\n <div style={{ padding: 20, textAlign: 'center' }}>\n <h1>something went wrong \uD83D\uDE22</h1>\n <p>{this.state.error?.message}</p>\n <details style={{ whiteSpace: 'pre-wrap' }}>{this.state.errorInfo?.componentStack}</details>\n </div>\n ) : null\n }\n\n return this.props.children\n }\n}\n\nexport default ErrorBoundary\n"],
5
+ "mappings": "AAoCQ,0BApCR,OAAOA,MAAW,QAclB,MAAMC,UAAsBD,EAAM,SAAkD,CAClF,YAAYE,EAA2B,CACrC,MAAMA,CAAK,EACX,KAAK,MAAQ,CAAE,SAAU,GAAO,MAAO,KAAM,UAAW,IAAK,CAC/D,CAEA,OAAO,yBAAyBC,EAAkC,CAChE,MAAO,CAAE,SAAU,GAAM,MAAAA,EAAO,UAAW,IAAK,CAClD,CAEA,kBAAkBA,EAAcC,EAA4B,CAC1D,QAAQ,MAAM,qEAAsED,EAAOC,CAAS,EACpG,KAAK,SAAS,CAAE,UAAAA,CAAU,CAAC,CAE7B,CAEA,QAAS,CACP,OAAI,KAAK,MAAM,SAET,KAAK,MAAM,SAAiB,KAAK,MAAM,SAQvC,KAGC,KAAK,MAAM,QACpB,CACF,CAEA,IAAOC,EAAQJ",
6
+ "names": ["React", "ErrorBoundary", "props", "error", "errorInfo", "ErrorBoundary_default"]
7
+ }
package/dist/esm/shared/Styles.js CHANGED
@@ -1,2 +1,2 @@
1
- import{Fragment as h,jsx as a,jsxs as x}from"react/jsx-runtime";import b,{useMemo as c}from"react";import{simpleHash as P}from"./simpleHash.js";import S from"./getKeyPropsString.js";import{Grid as p,GridItem as g}from"../components/gird.js";import{Container as C}from"../components/container.js";const f={12:"col-start-1 col-end-13",10:"col-start-2 col-end-12",8:"col-start-3 col-end-11",6:"col-start-4 col-end-10",4:"col-start-5 col-end-9"},N={12:"tablet:col-start-1 tablet:col-end-13",10:"tablet:col-start-2 tablet:col-end-12",8:"tablet:col-start-3 tablet:col-end-11",6:"tablet:col-start-4 tablet:col-end-10",4:"tablet:col-start-5 tablet:col-end-9"},i=t=>{const e=S(t);return`style_${P(e)}`},R=t=>{const{style:e,uid:n,disabled:s}=t;return{style:e,uid:n,disabled:s}},k=({style:t,uid:e=i({}),disabled:n=!1})=>!t||n?null:a("style",{suppressHydrationWarning:!0,"data-style-id":e,children:`.block-${e} { ${t} }`}),$=(t,e)=>{const n=c(()=>t?.uid||i({...t,data:e}),[e,t]),s=c(()=>a(k,{...t,uid:n}),[t,n]);return{className:`block-${n} `,StyleComponent:s,uid:n}},w=t=>{const{desktopSpan:e,mobileSpan:n}=t?.container||{},s=n?f[n]:"",r=e?N[e]:"";return`${s} ${r}`.trim()};function L(t,e){const n=b.forwardRef((s,r)=>{const d={...e,...R(s)},{className:l,StyleComponent:m}=$(d,s?.data),y=o=>a(C,{className:`${l} ${o?.className}`,children:a(p,{className:"container_grid",children:a(g,{className:w(o),children:a(t,{...o,ref:r})})})}),u=o=>a(t,{...o,className:`${l} ${o?.className}`,ref:r});return x(h,{children:[m,Reflect.ownKeys(s?.container||{})?.length>0?y(s):u(s)]})});return n.displayName=t.displayName||t.name||"Component",n}export{R as getStylesProps,$ as useStyles,L as withLayout};
1
+ import{Fragment as G,jsx as a,jsxs as x}from"react/jsx-runtime";import b,{useMemo as c}from"react";import{simpleHash as p}from"./simpleHash.js";import P from"./getKeyPropsString.js";import{Grid as S,GridItem as g}from"../components/gird.js";import{Container as C}from"../components/container.js";import f from"./ErrorBoundary.js";const N={12:"col-start-1 col-end-13",10:"col-start-2 col-end-12",8:"col-start-3 col-end-11",6:"col-start-4 col-end-10",4:"col-start-5 col-end-9"},R={12:"tablet:col-start-1 tablet:col-end-13",10:"tablet:col-start-2 tablet:col-end-12",8:"tablet:col-start-3 tablet:col-end-11",6:"tablet:col-start-4 tablet:col-end-10",4:"tablet:col-start-5 tablet:col-end-9"},i=t=>{const e=P(t);return`style_${p(e)}`},k=t=>{const{style:e,uid:n,disabled:s}=t;return{style:e,uid:n,disabled:s}},$=({style:t,uid:e=i({}),disabled:n=!1})=>!t||n?null:a("style",{suppressHydrationWarning:!0,"data-style-id":e,children:`.block-${e} { ${t} }`}),w=(t,e)=>{const n=c(()=>t?.uid||i({...t,data:e}),[e,t]),s=c(()=>a($,{...t,uid:n}),[t,n]);return{className:`block-${n} `,StyleComponent:s,uid:n}},h=t=>{const{desktopSpan:e,mobileSpan:n}=t?.container||{},s=n?N[n]:"",r=e?R[e]:"";return`${s} ${r}`.trim()};function L(t,e){const n=b.forwardRef((s,r)=>{const d={...e,...k(s)},{className:l,StyleComponent:m}=w(d,s?.data),y=o=>a(C,{className:`${l} ${o?.className}`,children:a(S,{className:"container_grid",children:a(g,{className:h(o),children:a(t,{...o,ref:r})})})}),u=o=>a(t,{...o,className:`${l} ${o?.className}`,ref:r});return a(G,{children:x(f,{children:[m,Reflect.ownKeys(s?.container||{})?.length>0?y(s):u(s)]})})});return n.displayName=t.displayName||t.name||"Component",n}export{k as getStylesProps,w as useStyles,L as withLayout};
2
2
  //# sourceMappingURL=Styles.js.map
package/dist/esm/shared/Styles.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/shared/Styles.tsx"],
4
- "sourcesContent": ["import React, { useMemo } from 'react'\nimport { simpleHash } from './simpleHash.js'\nimport getKeyPropsString from './getKeyPropsString.js'\nimport { Grid, GridItem } from '../components/gird.js'\nimport { Container } from '../components/container.js'\n\nconst colContentClasses: Record<number, string> = {\n 12: 'col-start-1 col-end-13',\n 10: 'col-start-2 col-end-12',\n 8: 'col-start-3 col-end-11',\n 6: 'col-start-4 col-end-10',\n 4: 'col-start-5 col-end-9',\n} as const\n\n// \u9884\u5B9A\u4E49\u5E26 tablet \u524D\u7F00\u7684\u7C7B\u540D\uFF0C\u786E\u4FDD Tailwind \u53EF\u4EE5\u8BC6\u522B\nconst colContentClassesTablet: Record<number, string> = {\n 12: 'tablet:col-start-1 tablet:col-end-13',\n 10: 'tablet:col-start-2 tablet:col-end-12',\n 8: 'tablet:col-start-3 tablet:col-end-11',\n 6: 'tablet:col-start-4 tablet:col-end-10',\n 4: 'tablet:col-start-5 tablet:col-end-9',\n} as const\n\nexport interface ContainerProps {\n container?: {\n /** \u684C\u9762\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n desktopSpan: number\n /** \u79FB\u52A8\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n mobileSpan: number\n }\n}\n\nexport interface StylesProps {\n /** \u81EA\u5B9A\u4E49\u6837\u5F0F\u5B57\u7B26\u4E32 */\n style?: string\n /** \u552F\u4E00\u6807\u8BC6\u7B26 */\n uid?: string\n /** \u662F\u5426\u7981\u7528 */\n disabled?: boolean\n}\n\n/**\n * \u6839\u636E props \u751F\u6210\u786E\u5B9A\u6027 uid\n */\nconst generateUID = (props: Record<string, any>) => {\n const keyString = getKeyPropsString(props)\n return `style_${simpleHash(keyString)}`\n}\n\n/**\n * \u4ECE\u7EC4\u4EF6 props \u4E2D\u63D0\u53D6\u6837\u5F0F\u76F8\u5173\u5C5E\u6027\n */\nexport const getStylesProps = <T extends Record<string, unknown>>(props: T & StylesProps): StylesProps => {\n const { style, uid, disabled } = props\n return { style, uid, disabled }\n}\n\n/**\n * \u6837\u5F0F\u6CE8\u5165\u7EC4\u4EF6\n */\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID({}), disabled = false }) => {\n if (!style || disabled) {\n return null\n }\n\n return <style suppressHydrationWarning data-style-id={uid}>{`.block-${uid} { ${style} }`}</style>\n}\n\n/**\n * \u6837\u5F0F Hook\uFF0C\u8FD4\u56DE\u6837\u5F0F\u7C7B\u540D\u548C\u6837\u5F0F\u7EC4\u4EF6\n * @param styleProps - \u6837\u5F0F\u5C5E\u6027\n */\nexport const useStyles = (styleProps: Partial<StylesProps>, data?: Record<string, any>) => {\n const uid = useMemo(() => styleProps?.uid || generateUID({ ...styleProps, data }), [data, styleProps])\n\n const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n return {\n className: `block-${uid} `,\n StyleComponent,\n uid,\n } as const\n}\n\nconst getContainerClassName = (props?: Partial<StylesProps & ContainerProps>) => {\n const { desktopSpan, mobileSpan } = props?.container || {}\n const mobileClasses = mobileSpan ? colContentClasses[mobileSpan] : ''\n const desktopClasses = desktopSpan ? colContentClassesTablet[desktopSpan] : ''\n return `${mobileClasses} ${desktopClasses}`.trim()\n}\n\n/**\n * \u9AD8\u9636\u7EC4\u4EF6\uFF0C \u7528\u4E8E\u7ED9\u7EC4\u4EF6\u7528style \u6807\u7B7E\u7684\u5F62\u5F0F\u8FFD\u52A0\u6837\u5F0F\n * @param WrappedComponent - \u9700\u8981\u5305\u88C5\u7684\u7EC4\u4EF6\n * @param defaultLayoutProps - \u9ED8\u8BA4\u6837\u5F0F\u5C5E\u6027\n */\nexport function withLayout<P extends object>(\n WrappedComponent: React.ComponentType<P>,\n defaultLayoutProps?: Partial<StylesProps & ContainerProps>\n) {\n const withLayout = React.forwardRef<\n any,\n Omit<P, keyof StylesProps> &\n Partial<StylesProps & ContainerProps> & { className?: string; data?: Record<string, any> }\n >((props, ref) => {\n const finalStyleProps = {\n ...defaultLayoutProps,\n ...getStylesProps(props),\n }\n\n const { className, StyleComponent } = useStyles(finalStyleProps, (props as any)?.data)\n\n const WithContainerWrapper = (props: any) => {\n return (\n <Container className={`${className} ${(props as any)?.className}`}>\n <Grid className=\"container_grid\">\n <GridItem className={getContainerClassName(props)}>\n <WrappedComponent {...(props as unknown as P)} ref={ref} />\n </GridItem>\n </Grid>\n </Container>\n )\n }\n\n const WithoutContainerWrapper = (props: any) => {\n return (\n <WrappedComponent\n {...(props as unknown as P)}\n className={`${className} ${(props as any)?.className}`}\n ref={ref}\n />\n )\n }\n\n return (\n <>\n {StyleComponent}\n {Reflect.ownKeys((props as any)?.container || {})?.length > 0\n ? WithContainerWrapper(props)\n : WithoutContainerWrapper(props)}\n </>\n )\n })\n\n // \u76F4\u63A5\u4F7F\u7528\u539F\u59CB\u7EC4\u4EF6\u7684\u540D\u79F0\n withLayout.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'\n return withLayout\n}\n"],
5
- "mappings": "AAiES,OAsEH,YAAAA,EAtEG,OAAAC,EAsEH,QAAAC,MAtEG,oBAjET,OAAOC,GAAS,WAAAC,MAAe,QAC/B,OAAS,cAAAC,MAAkB,kBAC3B,OAAOC,MAAuB,yBAC9B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,wBAC/B,OAAS,aAAAC,MAAiB,6BAE1B,MAAMC,EAA4C,CAChD,GAAI,yBACJ,GAAI,yBACJ,EAAG,yBACH,EAAG,yBACH,EAAG,uBACL,EAGMC,EAAkD,CACtD,GAAI,uCACJ,GAAI,uCACJ,EAAG,uCACH,EAAG,uCACH,EAAG,qCACL,EAuBMC,EAAeC,GAA+B,CAClD,MAAMC,EAAYR,EAAkBO,CAAK,EACzC,MAAO,SAASR,EAAWS,CAAS,CAAC,EACvC,EAKaC,EAAqDF,GAAwC,CACxG,KAAM,CAAE,MAAAG,EAAO,IAAAC,EAAK,SAAAC,CAAS,EAAIL,EACjC,MAAO,CAAE,MAAAG,EAAO,IAAAC,EAAK,SAAAC,CAAS,CAChC,EAKMC,EAAgC,CAAC,CAAE,MAAAH,EAAO,IAAAC,EAAML,EAAY,CAAC,CAAC,EAAG,SAAAM,EAAW,EAAM,IAClF,CAACF,GAASE,EACL,KAGFjB,EAAC,SAAM,yBAAwB,GAAC,gBAAegB,EAAM,mBAAUA,CAAG,MAAMD,CAAK,KAAK,EAO9EI,EAAY,CAACC,EAAkCC,IAA+B,CACzF,MAAML,EAAMb,EAAQ,IAAMiB,GAAY,KAAOT,EAAY,CAAE,GAAGS,EAAY,KAAAC,CAAK,CAAC,EAAG,CAACA,EAAMD,CAAU,CAAC,EAE/FE,EAAiBnB,EAAQ,IAAMH,EAACkB,EAAA,CAAQ,GAAGE,EAAY,IAAKJ,EAAK,EAAI,CAACI,EAAYJ,CAAG,CAAC,EAE5F,MAAO,CACL,UAAW,SAASA,CAAG,IACvB,eAAAM,EACA,IAAAN,CACF,CACF,EAEMO,EAAyBX,GAAkD,CAC/E,KAAM,CAAE,YAAAY,EAAa,WAAAC,CAAW,EAAIb,GAAO,WAAa,CAAC,EACnDc,EAAgBD,EAAahB,EAAkBgB,CAAU,EAAI,GAC7DE,EAAiBH,EAAcd,EAAwBc,CAAW,EAAI,GAC5E,MAAO,GAAGE,CAAa,IAAIC,CAAc,GAAG,KAAK,CACnD,EAOO,SAASC,EACdC,EACAC,EACA,CACA,MAAMF,EAAa1B,EAAM,WAIvB,CAACU,EAAOmB,IAAQ,CAChB,MAAMC,EAAkB,CACtB,GAAGF,EACH,GAAGhB,EAAeF,CAAK,CACzB,EAEM,CAAE,UAAAqB,EAAW,eAAAX,CAAe,EAAIH,EAAUa,EAAkBpB,GAAe,IAAI,EAE/EsB,EAAwBtB,GAE1BZ,EAACQ,EAAA,CAAU,UAAW,GAAGyB,CAAS,IAAKrB,GAAe,SAAS,GAC7D,SAAAZ,EAACM,EAAA,CAAK,UAAU,iBACd,SAAAN,EAACO,EAAA,CAAS,UAAWgB,EAAsBX,CAAK,EAC9C,SAAAZ,EAAC6B,EAAA,CAAkB,GAAIjB,EAAwB,IAAKmB,EAAK,EAC3D,EACF,EACF,EAIEI,EAA2BvB,GAE7BZ,EAAC6B,EAAA,CACE,GAAIjB,EACL,UAAW,GAAGqB,CAAS,IAAKrB,GAAe,SAAS,GACpD,IAAKmB,EACP,EAIJ,OACE9B,EAAAF,EAAA,CACG,UAAAuB,EACA,QAAQ,QAASV,GAAe,WAAa,CAAC,CAAC,GAAG,OAAS,EACxDsB,EAAqBtB,CAAK,EAC1BuB,EAAwBvB,CAAK,GACnC,CAEJ,CAAC,EAGD,OAAAgB,EAAW,YAAcC,EAAiB,aAAeA,EAAiB,MAAQ,YAC3ED,CACT",
6
- "names": ["Fragment", "jsx", "jsxs", "React", "useMemo", "simpleHash", "getKeyPropsString", "Grid", "GridItem", "Container", "colContentClasses", "colContentClassesTablet", "generateUID", "props", "keyString", "getStylesProps", "style", "uid", "disabled", "Styles", "useStyles", "styleProps", "data", "StyleComponent", "getContainerClassName", "desktopSpan", "mobileSpan", "mobileClasses", "desktopClasses", "withLayout", "WrappedComponent", "defaultLayoutProps", "ref", "finalStyleProps", "className", "WithContainerWrapper", "WithoutContainerWrapper"]
4
+ "sourcesContent": ["import React, { useMemo } from 'react'\nimport { simpleHash } from './simpleHash.js'\nimport getKeyPropsString from './getKeyPropsString.js'\nimport { Grid, GridItem } from '../components/gird.js'\nimport { Container } from '../components/container.js'\nimport ErrorBoundary from './ErrorBoundary.js'\n\nconst colContentClasses: Record<number, string> = {\n 12: 'col-start-1 col-end-13',\n 10: 'col-start-2 col-end-12',\n 8: 'col-start-3 col-end-11',\n 6: 'col-start-4 col-end-10',\n 4: 'col-start-5 col-end-9',\n} as const\n\n// \u9884\u5B9A\u4E49\u5E26 tablet \u524D\u7F00\u7684\u7C7B\u540D\uFF0C\u786E\u4FDD Tailwind \u53EF\u4EE5\u8BC6\u522B\nconst colContentClassesTablet: Record<number, string> = {\n 12: 'tablet:col-start-1 tablet:col-end-13',\n 10: 'tablet:col-start-2 tablet:col-end-12',\n 8: 'tablet:col-start-3 tablet:col-end-11',\n 6: 'tablet:col-start-4 tablet:col-end-10',\n 4: 'tablet:col-start-5 tablet:col-end-9',\n} as const\n\nexport interface ContainerProps {\n container?: {\n /** \u684C\u9762\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n desktopSpan: number\n /** \u79FB\u52A8\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n mobileSpan: number\n }\n}\n\nexport interface StylesProps {\n /** \u81EA\u5B9A\u4E49\u6837\u5F0F\u5B57\u7B26\u4E32 */\n style?: string\n /** \u552F\u4E00\u6807\u8BC6\u7B26 */\n uid?: string\n /** \u662F\u5426\u7981\u7528 */\n disabled?: boolean\n}\n\n/**\n * \u6839\u636E props \u751F\u6210\u786E\u5B9A\u6027 uid\n */\nconst generateUID = (props: Record<string, any>) => {\n const keyString = getKeyPropsString(props)\n return `style_${simpleHash(keyString)}`\n}\n\n/**\n * \u4ECE\u7EC4\u4EF6 props \u4E2D\u63D0\u53D6\u6837\u5F0F\u76F8\u5173\u5C5E\u6027\n */\nexport const getStylesProps = <T extends Record<string, unknown>>(props: T & StylesProps): StylesProps => {\n const { style, uid, disabled } = props\n return { style, uid, disabled }\n}\n\n/**\n * \u6837\u5F0F\u6CE8\u5165\u7EC4\u4EF6\n */\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID({}), disabled = false }) => {\n if (!style || disabled) {\n return null\n }\n\n return <style suppressHydrationWarning data-style-id={uid}>{`.block-${uid} { ${style} }`}</style>\n}\n\n/**\n * \u6837\u5F0F Hook\uFF0C\u8FD4\u56DE\u6837\u5F0F\u7C7B\u540D\u548C\u6837\u5F0F\u7EC4\u4EF6\n * @param styleProps - \u6837\u5F0F\u5C5E\u6027\n */\nexport const useStyles = (styleProps: Partial<StylesProps>, data?: Record<string, any>) => {\n const uid = useMemo(() => styleProps?.uid || generateUID({ ...styleProps, data }), [data, styleProps])\n\n const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n return {\n className: `block-${uid} `,\n StyleComponent,\n uid,\n } as const\n}\n\nconst getContainerClassName = (props?: Partial<StylesProps & ContainerProps>) => {\n const { desktopSpan, mobileSpan } = props?.container || {}\n const mobileClasses = mobileSpan ? colContentClasses[mobileSpan] : ''\n const desktopClasses = desktopSpan ? colContentClassesTablet[desktopSpan] : ''\n return `${mobileClasses} ${desktopClasses}`.trim()\n}\n\n/**\n * \u9AD8\u9636\u7EC4\u4EF6\uFF0C \u7528\u4E8E\u7ED9\u7EC4\u4EF6\u7528style \u6807\u7B7E\u7684\u5F62\u5F0F\u8FFD\u52A0\u6837\u5F0F\n * @param WrappedComponent - \u9700\u8981\u5305\u88C5\u7684\u7EC4\u4EF6\n * @param defaultLayoutProps - \u9ED8\u8BA4\u6837\u5F0F\u5C5E\u6027\n */\nexport function withLayout<P extends object>(\n WrappedComponent: React.ComponentType<P>,\n defaultLayoutProps?: Partial<StylesProps & ContainerProps>\n) {\n const withLayout = React.forwardRef<\n any,\n Omit<P, keyof StylesProps> &\n Partial<StylesProps & ContainerProps> & { className?: string; data?: Record<string, any> }\n >((props, ref) => {\n const finalStyleProps = {\n ...defaultLayoutProps,\n ...getStylesProps(props),\n }\n\n const { className, StyleComponent } = useStyles(finalStyleProps, (props as any)?.data)\n\n const WithContainerWrapper = (props: any) => {\n return (\n <Container className={`${className} ${(props as any)?.className}`}>\n <Grid className=\"container_grid\">\n <GridItem className={getContainerClassName(props)}>\n <WrappedComponent {...(props as unknown as P)} ref={ref} />\n </GridItem>\n </Grid>\n </Container>\n )\n }\n\n const WithoutContainerWrapper = (props: any) => {\n return (\n <WrappedComponent\n {...(props as unknown as P)}\n className={`${className} ${(props as any)?.className}`}\n ref={ref}\n />\n )\n }\n\n return (\n <>\n <ErrorBoundary>\n {StyleComponent}\n {Reflect.ownKeys((props as any)?.container || {})?.length > 0\n ? WithContainerWrapper(props)\n : WithoutContainerWrapper(props)}\n </ErrorBoundary>\n </>\n )\n })\n\n // \u76F4\u63A5\u4F7F\u7528\u539F\u59CB\u7EC4\u4EF6\u7684\u540D\u79F0\n withLayout.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'\n return withLayout\n}\n"],
5
+ "mappings": "AAkES,OAsEH,YAAAA,EAtEG,OAAAC,EAuED,QAAAC,MAvEC,oBAlET,OAAOC,GAAS,WAAAC,MAAe,QAC/B,OAAS,cAAAC,MAAkB,kBAC3B,OAAOC,MAAuB,yBAC9B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,wBAC/B,OAAS,aAAAC,MAAiB,6BAC1B,OAAOC,MAAmB,qBAE1B,MAAMC,EAA4C,CAChD,GAAI,yBACJ,GAAI,yBACJ,EAAG,yBACH,EAAG,yBACH,EAAG,uBACL,EAGMC,EAAkD,CACtD,GAAI,uCACJ,GAAI,uCACJ,EAAG,uCACH,EAAG,uCACH,EAAG,qCACL,EAuBMC,EAAeC,GAA+B,CAClD,MAAMC,EAAYT,EAAkBQ,CAAK,EACzC,MAAO,SAAST,EAAWU,CAAS,CAAC,EACvC,EAKaC,EAAqDF,GAAwC,CACxG,KAAM,CAAE,MAAAG,EAAO,IAAAC,EAAK,SAAAC,CAAS,EAAIL,EACjC,MAAO,CAAE,MAAAG,EAAO,IAAAC,EAAK,SAAAC,CAAS,CAChC,EAKMC,EAAgC,CAAC,CAAE,MAAAH,EAAO,IAAAC,EAAML,EAAY,CAAC,CAAC,EAAG,SAAAM,EAAW,EAAM,IAClF,CAACF,GAASE,EACL,KAGFlB,EAAC,SAAM,yBAAwB,GAAC,gBAAeiB,EAAM,mBAAUA,CAAG,MAAMD,CAAK,KAAK,EAO9EI,EAAY,CAACC,EAAkCC,IAA+B,CACzF,MAAML,EAAMd,EAAQ,IAAMkB,GAAY,KAAOT,EAAY,CAAE,GAAGS,EAAY,KAAAC,CAAK,CAAC,EAAG,CAACA,EAAMD,CAAU,CAAC,EAE/FE,EAAiBpB,EAAQ,IAAMH,EAACmB,EAAA,CAAQ,GAAGE,EAAY,IAAKJ,EAAK,EAAI,CAACI,EAAYJ,CAAG,CAAC,EAE5F,MAAO,CACL,UAAW,SAASA,CAAG,IACvB,eAAAM,EACA,IAAAN,CACF,CACF,EAEMO,EAAyBX,GAAkD,CAC/E,KAAM,CAAE,YAAAY,EAAa,WAAAC,CAAW,EAAIb,GAAO,WAAa,CAAC,EACnDc,EAAgBD,EAAahB,EAAkBgB,CAAU,EAAI,GAC7DE,EAAiBH,EAAcd,EAAwBc,CAAW,EAAI,GAC5E,MAAO,GAAGE,CAAa,IAAIC,CAAc,GAAG,KAAK,CACnD,EAOO,SAASC,EACdC,EACAC,EACA,CACA,MAAMF,EAAa3B,EAAM,WAIvB,CAACW,EAAOmB,IAAQ,CAChB,MAAMC,EAAkB,CACtB,GAAGF,EACH,GAAGhB,EAAeF,CAAK,CACzB,EAEM,CAAE,UAAAqB,EAAW,eAAAX,CAAe,EAAIH,EAAUa,EAAkBpB,GAAe,IAAI,EAE/EsB,EAAwBtB,GAE1Bb,EAACQ,EAAA,CAAU,UAAW,GAAG0B,CAAS,IAAKrB,GAAe,SAAS,GAC7D,SAAAb,EAACM,EAAA,CAAK,UAAU,iBACd,SAAAN,EAACO,EAAA,CAAS,UAAWiB,EAAsBX,CAAK,EAC9C,SAAAb,EAAC8B,EAAA,CAAkB,GAAIjB,EAAwB,IAAKmB,EAAK,EAC3D,EACF,EACF,EAIEI,EAA2BvB,GAE7Bb,EAAC8B,EAAA,CACE,GAAIjB,EACL,UAAW,GAAGqB,CAAS,IAAKrB,GAAe,SAAS,GACpD,IAAKmB,EACP,EAIJ,OACEhC,EAAAD,EAAA,CACE,SAAAE,EAACQ,EAAA,CACA,UAAAc,EACA,QAAQ,QAASV,GAAe,WAAa,CAAC,CAAC,GAAG,OAAS,EACxDsB,EAAqBtB,CAAK,EAC1BuB,EAAwBvB,CAAK,GAC/B,EACJ,CAEJ,CAAC,EAGD,OAAAgB,EAAW,YAAcC,EAAiB,aAAeA,EAAiB,MAAQ,YAC3ED,CACT",
6
+ "names": ["Fragment", "jsx", "jsxs", "React", "useMemo", "simpleHash", "getKeyPropsString", "Grid", "GridItem", "Container", "ErrorBoundary", "colContentClasses", "colContentClassesTablet", "generateUID", "props", "keyString", "getStylesProps", "style", "uid", "disabled", "Styles", "useStyles", "styleProps", "data", "StyleComponent", "getContainerClassName", "desktopSpan", "mobileSpan", "mobileClasses", "desktopClasses", "withLayout", "WrappedComponent", "defaultLayoutProps", "ref", "finalStyleProps", "className", "WithContainerWrapper", "WithoutContainerWrapper"]
7
7
  }
package/dist/esm/stories/featureCards.stories.js CHANGED
@@ -1,4 +1,24 @@
1
- import"react";import a from"../biz-components/FeatureCards/index.js";const s={title:"Biz Components/FeatureCards",component:a,parameters:{layout:"padded",docs:{description:{component:"\u7279\u6027\u5361\u7247\u5C55\u793A\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u4EA7\u54C1\u529F\u80FD\u6216\u7279\u6027\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\u548C Swiper \u6ED1\u52A8"}}},tags:["autodocs"]};var c=s;const e={title:"Personalized Carpet Cleaning Mode",subtitle:"You can customize the carpet cleaning mode to suit your needs.",items:[{link:"",theme:"dark",title:"Carpet Avoidance",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",alt:"Carpet Avoidance",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",mimeType:"image/png"},subtitle:"Automatically avoids carpets based on personalized settings."},{link:"",theme:"dark",title:"Mop Lifting",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",alt:"Mop Lifting",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",mimeType:"image/png"},subtitle:"Lifts the mop to prevent wetting carpets"},{link:"",theme:"dark",title:"Carpet Detection",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429",alt:"Carpet Detection",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429",mimeType:"image/png"},subtitle:"Increases suction power when carpets are detected."}]},d={args:{data:e}},n={args:{data:{...e,items:e.items.map(t=>({...t,theme:"light"}))}}},p={args:{data:{...e,items:e.items.map(t=>({...t,link:"https://www.example.com"}))}}},l={args:{data:{...e,items:e.items.slice(0,2)}}},m={args:{data:{...e,items:[e.items[0]]}}},f={args:{data:{title:"Personalized Carpet Cleaning Mode",items:e.items}}},u={args:{data:{...e,items:[...e.items,{link:"",theme:"dark",title:"Smart Scheduling",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",mimeType:"image/png"},subtitle:"Schedule cleaning tasks automatically based on your preferences."}]}}},g={args:{data:e,className:"custom-feature-cards"},parameters:{docs:{description:{story:`
1
+ import"react";import s from"../biz-components/FeatureCards/index.js";const a={title:"Biz Components/FeatureCards",component:s,parameters:{layout:"padded",docs:{description:{component:`\u7279\u6027\u5361\u7247\u5C55\u793A\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u4EA7\u54C1\u529F\u80FD\u6216\u7279\u6027
2
+
3
+ ## \u54CD\u5E94\u5F0F\u5E03\u5C40
4
+
5
+ ### \u79FB\u52A8\u7AEF\u548C\u5E73\u677F
6
+ - \u6240\u6709\u5361\u7247\u5BBD\u5EA6\u76F8\u7B49\uFF0C\u4F7F\u7528 Swiper \u8F6E\u64AD\u5C55\u793A
7
+
8
+ ### \u684C\u9762\u7AEF\uFF08laptop+\uFF09
9
+ \u6839\u636E\u5361\u7247\u6570\u91CF\u81EA\u52A8\u8C03\u6574\u5E03\u5C40\u6BD4\u4F8B\uFF1A
10
+ - **2\u5F20\u5361\u7247**\uFF1A2:3 \u6BD4\u4F8B
11
+ - **3\u5F20\u5361\u7247**\uFF1A1:1:1 \u7B49\u5BBD
12
+ - **4\u5F20\u5361\u7247**\uFF1A\u7B2C\u4E00\u884C 2:3\uFF0C\u7B2C\u4E8C\u884C 3:2\uFF08\u81EA\u52A8\u6362\u884C\uFF09
13
+ - **5\u5F20\u5361\u7247**\uFF1A\u7B2C\u4E00\u884C 1:1:1\uFF0C\u7B2C\u4E8C\u884C 2:3\uFF08\u81EA\u52A8\u6362\u884C\uFF09
14
+
15
+ ## \u5706\u89D2\u914D\u7F6E
16
+
17
+ \u901A\u8FC7 \`rounded\` \u5C5E\u6027\u63A7\u5236\u5361\u7247\u5706\u89D2\uFF1A
18
+ - **\u9ED8\u8BA4**\uFF1A\`rounded: false\`\uFF08\u76F4\u89D2\uFF09
19
+ - **\u5F00\u542F\u5706\u89D2**\uFF1A\`rounded: true\`
20
+ - laptop \u4EE5\u4E0B\uFF1A12px \u5706\u89D2
21
+ - laptop \u4EE5\u4E0A\uFF1A16px \u5706\u89D2`}}},tags:["autodocs"]};var n=a;const e={title:"Personalized Carpet Cleaning Mode",subtitle:"You can customize the carpet cleaning mode to suit your needs.",items:[{link:"",theme:"dark",title:"Carpet Avoidance",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",alt:"Carpet Avoidance",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",mimeType:"image/png"},subtitle:"Automatically avoids carpets based on personalized settings."},{link:"",theme:"dark",title:"Mop Lifting",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",alt:"Mop Lifting",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",mimeType:"image/png"},subtitle:"Lifts the mop to prevent wetting carpets"},{link:"",theme:"dark",title:"Carpet Detection",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429",alt:"Carpet Detection",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429",mimeType:"image/png"},subtitle:"Increases suction power when carpets are detected."}]},d={args:{data:e}},c={args:{data:{...e,items:e.items.map(t=>({...t,theme:"light"}))}}},l={args:{data:{...e,items:e.items.map(t=>({...t,link:"https://www.example.com"}))}}},p={args:{data:{...e,items:e.items.slice(0,2)}}},m={args:{data:{...e,items:[e.items[0]]}}},f={args:{data:{title:"Personalized Carpet Cleaning Mode",items:e.items}}},u={args:{data:{...e,items:[...e.items,{link:"",theme:"dark",title:"Smart Scheduling",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",mimeType:"image/png"},subtitle:"Schedule cleaning tasks automatically based on your preferences."}]}},parameters:{docs:{description:{story:"4\u5F20\u5361\u7247\u5E03\u5C40\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 2:3 \u6BD4\u4F8B\uFF0C\u7B2C\u4E8C\u884C 3:2 \u6BD4\u4F8B\uFF08\u81EA\u52A8\u6362\u884C\uFF09"}}}},g={args:{data:{...e,items:[...e.items,{link:"",theme:"dark",title:"Smart Scheduling",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",mimeType:"image/png"},subtitle:"Schedule cleaning tasks automatically based on your preferences."},{link:"",theme:"dark",title:"Voice Control",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",alt:"Voice Control",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",mimeType:"image/png"},subtitle:"Control your robot vacuum with voice commands."}]}},parameters:{docs:{description:{story:"5\u5F20\u5361\u7247\u5E03\u5C40\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 1:1:1 \u7B49\u5BBD\uFF0C\u7B2C\u4E8C\u884C 2:3 \u6BD4\u4F8B\uFF08\u81EA\u52A8\u6362\u884C\uFF09"}}}},h={args:{data:{...e,rounded:!0}},parameters:{docs:{description:{story:"\u5E26\u5706\u89D2\u7684\u5361\u7247\uFF1Alaptop \u4EE5\u4E0B 12px \u5706\u89D2\uFF0Claptop \u4EE5\u4E0A 16px \u5706\u89D2"}}}},y={args:{data:{...e,items:e.items.slice(0,2),rounded:!0}},parameters:{docs:{description:{story:"2\u5F20\u5361\u7247\u5E26\u5706\u89D2\uFF1A\u684C\u9762\u7AEF 2:3 \u6BD4\u4F8B\u5E03\u5C40"}}}},b={args:{data:{...e,items:[...e.items,{link:"",theme:"dark",title:"Smart Scheduling",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",mimeType:"image/png"},subtitle:"Schedule cleaning tasks automatically based on your preferences."}],rounded:!0}},parameters:{docs:{description:{story:"4\u5F20\u5361\u7247\u5E26\u5706\u89D2\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 2:3\uFF0C\u7B2C\u4E8C\u884C 3:2\uFF08\u81EA\u52A8\u6362\u884C\uFF09"}}}},_={args:{data:{...e,items:[...e.items,{link:"",theme:"dark",title:"Smart Scheduling",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",mimeType:"image/png"},subtitle:"Schedule cleaning tasks automatically based on your preferences."},{link:"",theme:"dark",title:"Voice Control",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",alt:"Voice Control",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",mimeType:"image/png"},subtitle:"Control your robot vacuum with voice commands."}],rounded:!0}},parameters:{docs:{description:{story:"5\u5F20\u5361\u7247\u5E26\u5706\u89D2\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 1:1:1\uFF0C\u7B2C\u4E8C\u884C 2:3\uFF08\u81EA\u52A8\u6362\u884C\uFF09"}}}},S={args:{data:e,className:"custom-feature-cards"},parameters:{docs:{description:{story:`
2
22
  \u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236\uFF1A
3
23
 
4
24
  **\u6839\u5143\u7D20\uFF1A**
@@ -48,5 +68,5 @@ import"react";import a from"../biz-components/FeatureCards/index.js";const s={ti
48
68
  gap: 24px;
49
69
  }
50
70
  \`\`\`
51
- `}}}};export{d as Default,u as FourCards,n as LightTheme,m as SingleCard,l as TwoCards,g as WithCustomStyles,p as WithLinks,f as WithoutSubtitle,c as default};
71
+ `}}}};export{d as Default,g as FiveCards,_ as FiveCardsWithRounded,u as FourCards,b as FourCardsWithRounded,c as LightTheme,m as SingleCard,p as TwoCards,y as TwoCardsWithRounded,S as WithCustomStyles,l as WithLinks,h as WithRounded,f as WithoutSubtitle,n as default};
52
72
  //# sourceMappingURL=featureCards.stories.js.map
package/dist/esm/stories/featureCards.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/stories/featureCards.stories.tsx"],
4
- "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport FeatureCards from '../biz-components/FeatureCards/index.js'\nimport type { FeatureCardsProps } from '../biz-components/FeatureCards/types.js'\n\nconst meta = {\n title: 'Biz Components/FeatureCards',\n component: FeatureCards,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: '\u7279\u6027\u5361\u7247\u5C55\u793A\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u4EA7\u54C1\u529F\u80FD\u6216\u7279\u6027\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\u548C Swiper \u6ED1\u52A8',\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof FeatureCards>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData: FeatureCardsProps['data'] = {\n title: 'Personalized Carpet Cleaning Mode',\n subtitle: 'You can customize the carpet cleaning mode to suit your needs.',\n items: [\n {\n link: '',\n theme: 'dark',\n title: 'Carpet Avoidance',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n alt: 'Carpet Avoidance',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n mimeType: 'image/png',\n },\n subtitle: 'Automatically avoids carpets based on personalized settings.',\n },\n {\n link: '',\n theme: 'dark',\n title: 'Mop Lifting',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n alt: 'Mop Lifting',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n mimeType: 'image/png',\n },\n subtitle: 'Lifts the mop to prevent wetting carpets',\n },\n {\n link: '',\n theme: 'dark',\n title: 'Carpet Detection',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429',\n alt: 'Carpet Detection',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429',\n mimeType: 'image/png',\n },\n subtitle: 'Increases suction power when carpets are detected.',\n },\n ],\n}\n\nexport const Default: Story = {\n args: {\n data: defaultData,\n },\n}\n\nexport const LightTheme: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.map((item) => ({\n ...item,\n theme: 'light',\n })),\n },\n },\n}\n\nexport const WithLinks: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.map((item) => ({\n ...item,\n link: 'https://www.example.com',\n })),\n },\n },\n}\n\nexport const TwoCards: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.slice(0, 2),\n },\n },\n}\n\nexport const SingleCard: Story = {\n args: {\n data: {\n ...defaultData,\n items: [defaultData.items[0]],\n },\n },\n}\n\nexport const WithoutSubtitle: Story = {\n args: {\n data: {\n title: 'Personalized Carpet Cleaning Mode',\n items: defaultData.items,\n },\n },\n}\n\nexport const FourCards: Story = {\n args: {\n data: {\n ...defaultData,\n items: [\n ...defaultData.items,\n {\n link: '',\n theme: 'dark',\n title: 'Smart Scheduling',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n alt: 'Smart Scheduling',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n mimeType: 'image/png',\n },\n subtitle: 'Schedule cleaning tasks automatically based on your preferences.',\n },\n ],\n },\n },\n}\n\nexport const WithCustomStyles: Story = {\n args: {\n data: defaultData,\n className: 'custom-feature-cards',\n },\n parameters: {\n docs: {\n description: {\n story: `\n\u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236\uFF1A\n\n**\u6839\u5143\u7D20\uFF1A**\n- \\`.feature-cards\\` - \u7EC4\u4EF6\u6839\u5BB9\u5668\n\n**\u5934\u90E8\u533A\u57DF\uFF1A**\n- \\`.feature-cards__header\\` - \u5934\u90E8\u5BB9\u5668\n- \\`.feature-cards__title\\` - \u4E3B\u6807\u9898\n- \\`.feature-cards__subtitle\\` - \u526F\u6807\u9898\n\n**\u684C\u9762\u7AEF\u5E03\u5C40\uFF1A**\n- \\`.feature-cards__grid\\` - \u684C\u9762\u7AEF\u7F51\u683C\u5BB9\u5668\n\n**\u79FB\u52A8\u7AEF\u5E03\u5C40\uFF1A**\n- \\`.feature-cards__swiper-container\\` - Swiper \u5916\u5C42\u5BB9\u5668\n- \\`.feature-cards__swiper\\` - Swiper \u5B9E\u4F8B\n- \\`.feature-cards__swiper-slide\\` - Swiper \u5355\u4E2A\u6ED1\u5757\n\n**\u5361\u7247\u5143\u7D20\uFF1A**\n- \\`.feature-cards__card\\` - \u5361\u7247\u5BB9\u5668\n- \\`.feature-cards__card--mobile\\` - \u79FB\u52A8\u7AEF\u5361\u7247\u4FEE\u9970\u7B26\n- \\`.feature-cards__card-image\\` - \u5361\u7247\u80CC\u666F\u56FE\u7247\n- \\`.feature-cards__card-content\\` - \u5361\u7247\u5185\u5BB9\u5BB9\u5668\n- \\`.feature-cards__card-title\\` - \u5361\u7247\u6807\u9898\n- \\`.feature-cards__card-subtitle\\` - \u5361\u7247\u526F\u6807\u9898\n\n**\u793A\u4F8B CSS \u7528\u6CD5\uFF1A**\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u5361\u7247\u5706\u89D2 */\n.feature-cards__card {\n border-radius: 20px;\n}\n\n/* \u81EA\u5B9A\u4E49\u6807\u9898\u989C\u8272 */\n.feature-cards__card-title {\n color: #ff6b6b;\n}\n\n/* \u81EA\u5B9A\u4E49\u5361\u7247\u60AC\u505C\u6548\u679C */\n.feature-cards__card:hover {\n transform: translateY(-5px);\n transition: transform 0.3s ease;\n}\n\n/* \u81EA\u5B9A\u4E49\u7F51\u683C\u95F4\u8DDD */\n.feature-cards__grid {\n gap: 24px;\n}\n\\`\\`\\`\n `,\n },\n },\n },\n}\n"],
5
- "mappings": "AAAA,MAAkB,QAElB,OAAOA,MAAkB,0CAGzB,MAAMC,EAAO,CACX,MAAO,8BACP,UAAWD,EACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW,gNACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIf,MAAME,EAAyC,CAC7C,MAAO,oCACP,SAAU,iEACV,MAAO,CACL,CACE,KAAM,GACN,MAAO,OACP,MAAO,mBACP,MAAO,CACL,IAAK,wFACL,IAAK,mBACL,aAAc,wFACd,SAAU,WACZ,EACA,SAAU,8DACZ,EACA,CACE,KAAM,GACN,MAAO,OACP,MAAO,cACP,MAAO,CACL,IAAK,iHACL,IAAK,cACL,aACE,iHACF,SAAU,WACZ,EACA,SAAU,0CACZ,EACA,CACE,KAAM,GACN,MAAO,OACP,MAAO,mBACP,MAAO,CACL,IAAK,iHACL,IAAK,mBACL,aACE,iHACF,SAAU,WACZ,EACA,SAAU,oDACZ,CACF,CACF,EAEaC,EAAiB,CAC5B,KAAM,CACJ,KAAMD,CACR,CACF,EAEaE,EAAoB,CAC/B,KAAM,CACJ,KAAM,CACJ,GAAGF,EACH,MAAOA,EAAY,MAAM,IAAKG,IAAU,CACtC,GAAGA,EACH,MAAO,OACT,EAAE,CACJ,CACF,CACF,EAEaC,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,GAAGJ,EACH,MAAOA,EAAY,MAAM,IAAKG,IAAU,CACtC,GAAGA,EACH,KAAM,yBACR,EAAE,CACJ,CACF,CACF,EAEaE,EAAkB,CAC7B,KAAM,CACJ,KAAM,CACJ,GAAGL,EACH,MAAOA,EAAY,MAAM,MAAM,EAAG,CAAC,CACrC,CACF,CACF,EAEaM,EAAoB,CAC/B,KAAM,CACJ,KAAM,CACJ,GAAGN,EACH,MAAO,CAACA,EAAY,MAAM,CAAC,CAAC,CAC9B,CACF,CACF,EAEaO,EAAyB,CACpC,KAAM,CACJ,KAAM,CACJ,MAAO,oCACP,MAAOP,EAAY,KACrB,CACF,CACF,EAEaQ,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,GAAGR,EACH,MAAO,CACL,GAAGA,EAAY,MACf,CACE,KAAM,GACN,MAAO,OACP,MAAO,mBACP,MAAO,CACL,IAAK,wFACL,IAAK,mBACL,aAAc,wFACd,SAAU,WACZ,EACA,SAAU,kEACZ,CACF,CACF,CACF,CACF,EAEaS,EAA0B,CACrC,KAAM,CACJ,KAAMT,EACN,UAAW,sBACb,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAmDT,CACF,CACF,CACF",
6
- "names": ["FeatureCards", "meta", "featureCards_stories_default", "defaultData", "Default", "LightTheme", "item", "WithLinks", "TwoCards", "SingleCard", "WithoutSubtitle", "FourCards", "WithCustomStyles"]
4
+ "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport FeatureCards from '../biz-components/FeatureCards/index.js'\nimport type { FeatureCardsProps } from '../biz-components/FeatureCards/types.js'\n\nconst meta = {\n title: 'Biz Components/FeatureCards',\n component: FeatureCards,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: `\u7279\u6027\u5361\u7247\u5C55\u793A\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u4EA7\u54C1\u529F\u80FD\u6216\u7279\u6027\n\n## \u54CD\u5E94\u5F0F\u5E03\u5C40\n\n### \u79FB\u52A8\u7AEF\u548C\u5E73\u677F\n- \u6240\u6709\u5361\u7247\u5BBD\u5EA6\u76F8\u7B49\uFF0C\u4F7F\u7528 Swiper \u8F6E\u64AD\u5C55\u793A\n\n### \u684C\u9762\u7AEF\uFF08laptop+\uFF09\n\u6839\u636E\u5361\u7247\u6570\u91CF\u81EA\u52A8\u8C03\u6574\u5E03\u5C40\u6BD4\u4F8B\uFF1A\n- **2\u5F20\u5361\u7247**\uFF1A2:3 \u6BD4\u4F8B\n- **3\u5F20\u5361\u7247**\uFF1A1:1:1 \u7B49\u5BBD\n- **4\u5F20\u5361\u7247**\uFF1A\u7B2C\u4E00\u884C 2:3\uFF0C\u7B2C\u4E8C\u884C 3:2\uFF08\u81EA\u52A8\u6362\u884C\uFF09\n- **5\u5F20\u5361\u7247**\uFF1A\u7B2C\u4E00\u884C 1:1:1\uFF0C\u7B2C\u4E8C\u884C 2:3\uFF08\u81EA\u52A8\u6362\u884C\uFF09\n\n## \u5706\u89D2\u914D\u7F6E\n\n\u901A\u8FC7 \\`rounded\\` \u5C5E\u6027\u63A7\u5236\u5361\u7247\u5706\u89D2\uFF1A\n- **\u9ED8\u8BA4**\uFF1A\\`rounded: false\\`\uFF08\u76F4\u89D2\uFF09\n- **\u5F00\u542F\u5706\u89D2**\uFF1A\\`rounded: true\\`\n - laptop \u4EE5\u4E0B\uFF1A12px \u5706\u89D2\n - laptop \u4EE5\u4E0A\uFF1A16px \u5706\u89D2`,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof FeatureCards>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData: FeatureCardsProps['data'] = {\n title: 'Personalized Carpet Cleaning Mode',\n subtitle: 'You can customize the carpet cleaning mode to suit your needs.',\n items: [\n {\n link: '',\n theme: 'dark',\n title: 'Carpet Avoidance',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n alt: 'Carpet Avoidance',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n mimeType: 'image/png',\n },\n subtitle: 'Automatically avoids carpets based on personalized settings.',\n },\n {\n link: '',\n theme: 'dark',\n title: 'Mop Lifting',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n alt: 'Mop Lifting',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n mimeType: 'image/png',\n },\n subtitle: 'Lifts the mop to prevent wetting carpets',\n },\n {\n link: '',\n theme: 'dark',\n title: 'Carpet Detection',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429',\n alt: 'Carpet Detection',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429',\n mimeType: 'image/png',\n },\n subtitle: 'Increases suction power when carpets are detected.',\n },\n ],\n}\n\nexport const Default: Story = {\n args: {\n data: defaultData,\n },\n}\n\nexport const LightTheme: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.map((item) => ({\n ...item,\n theme: 'light',\n })),\n },\n },\n}\n\nexport const WithLinks: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.map((item) => ({\n ...item,\n link: 'https://www.example.com',\n })),\n },\n },\n}\n\nexport const TwoCards: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.slice(0, 2),\n },\n },\n}\n\nexport const SingleCard: Story = {\n args: {\n data: {\n ...defaultData,\n items: [defaultData.items[0]],\n },\n },\n}\n\nexport const WithoutSubtitle: Story = {\n args: {\n data: {\n title: 'Personalized Carpet Cleaning Mode',\n items: defaultData.items,\n },\n },\n}\n\nexport const FourCards: Story = {\n args: {\n data: {\n ...defaultData,\n items: [\n ...defaultData.items,\n {\n link: '',\n theme: 'dark',\n title: 'Smart Scheduling',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n alt: 'Smart Scheduling',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n mimeType: 'image/png',\n },\n subtitle: 'Schedule cleaning tasks automatically based on your preferences.',\n },\n ],\n },\n },\n parameters: {\n docs: {\n description: {\n story: '4\u5F20\u5361\u7247\u5E03\u5C40\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 2:3 \u6BD4\u4F8B\uFF0C\u7B2C\u4E8C\u884C 3:2 \u6BD4\u4F8B\uFF08\u81EA\u52A8\u6362\u884C\uFF09',\n },\n },\n },\n}\n\nexport const FiveCards: Story = {\n args: {\n data: {\n ...defaultData,\n items: [\n ...defaultData.items,\n {\n link: '',\n theme: 'dark',\n title: 'Smart Scheduling',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n alt: 'Smart Scheduling',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n mimeType: 'image/png',\n },\n subtitle: 'Schedule cleaning tasks automatically based on your preferences.',\n },\n {\n link: '',\n theme: 'dark',\n title: 'Voice Control',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n alt: 'Voice Control',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n mimeType: 'image/png',\n },\n subtitle: 'Control your robot vacuum with voice commands.',\n },\n ],\n },\n },\n parameters: {\n docs: {\n description: {\n story: '5\u5F20\u5361\u7247\u5E03\u5C40\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 1:1:1 \u7B49\u5BBD\uFF0C\u7B2C\u4E8C\u884C 2:3 \u6BD4\u4F8B\uFF08\u81EA\u52A8\u6362\u884C\uFF09',\n },\n },\n },\n}\n\nexport const WithRounded: Story = {\n args: {\n data: {\n ...defaultData,\n rounded: true,\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u5E26\u5706\u89D2\u7684\u5361\u7247\uFF1Alaptop \u4EE5\u4E0B 12px \u5706\u89D2\uFF0Claptop \u4EE5\u4E0A 16px \u5706\u89D2',\n },\n },\n },\n}\n\nexport const TwoCardsWithRounded: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.slice(0, 2),\n rounded: true,\n },\n },\n parameters: {\n docs: {\n description: {\n story: '2\u5F20\u5361\u7247\u5E26\u5706\u89D2\uFF1A\u684C\u9762\u7AEF 2:3 \u6BD4\u4F8B\u5E03\u5C40',\n },\n },\n },\n}\n\nexport const FourCardsWithRounded: Story = {\n args: {\n data: {\n ...defaultData,\n items: [\n ...defaultData.items,\n {\n link: '',\n theme: 'dark',\n title: 'Smart Scheduling',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n alt: 'Smart Scheduling',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n mimeType: 'image/png',\n },\n subtitle: 'Schedule cleaning tasks automatically based on your preferences.',\n },\n ],\n rounded: true,\n },\n },\n parameters: {\n docs: {\n description: {\n story: '4\u5F20\u5361\u7247\u5E26\u5706\u89D2\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 2:3\uFF0C\u7B2C\u4E8C\u884C 3:2\uFF08\u81EA\u52A8\u6362\u884C\uFF09',\n },\n },\n },\n}\n\nexport const FiveCardsWithRounded: Story = {\n args: {\n data: {\n ...defaultData,\n items: [\n ...defaultData.items,\n {\n link: '',\n theme: 'dark',\n title: 'Smart Scheduling',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n alt: 'Smart Scheduling',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n mimeType: 'image/png',\n },\n subtitle: 'Schedule cleaning tasks automatically based on your preferences.',\n },\n {\n link: '',\n theme: 'dark',\n title: 'Voice Control',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n alt: 'Voice Control',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n mimeType: 'image/png',\n },\n subtitle: 'Control your robot vacuum with voice commands.',\n },\n ],\n rounded: true,\n },\n },\n parameters: {\n docs: {\n description: {\n story: '5\u5F20\u5361\u7247\u5E26\u5706\u89D2\uFF1A\u684C\u9762\u7AEF\u7B2C\u4E00\u884C 1:1:1\uFF0C\u7B2C\u4E8C\u884C 2:3\uFF08\u81EA\u52A8\u6362\u884C\uFF09',\n },\n },\n },\n}\n\nexport const WithCustomStyles: Story = {\n args: {\n data: defaultData,\n className: 'custom-feature-cards',\n },\n parameters: {\n docs: {\n description: {\n story: `\n\u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236\uFF1A\n\n**\u6839\u5143\u7D20\uFF1A**\n- \\`.feature-cards\\` - \u7EC4\u4EF6\u6839\u5BB9\u5668\n\n**\u5934\u90E8\u533A\u57DF\uFF1A**\n- \\`.feature-cards__header\\` - \u5934\u90E8\u5BB9\u5668\n- \\`.feature-cards__title\\` - \u4E3B\u6807\u9898\n- \\`.feature-cards__subtitle\\` - \u526F\u6807\u9898\n\n**\u684C\u9762\u7AEF\u5E03\u5C40\uFF1A**\n- \\`.feature-cards__grid\\` - \u684C\u9762\u7AEF\u7F51\u683C\u5BB9\u5668\n\n**\u79FB\u52A8\u7AEF\u5E03\u5C40\uFF1A**\n- \\`.feature-cards__swiper-container\\` - Swiper \u5916\u5C42\u5BB9\u5668\n- \\`.feature-cards__swiper\\` - Swiper \u5B9E\u4F8B\n- \\`.feature-cards__swiper-slide\\` - Swiper \u5355\u4E2A\u6ED1\u5757\n\n**\u5361\u7247\u5143\u7D20\uFF1A**\n- \\`.feature-cards__card\\` - \u5361\u7247\u5BB9\u5668\n- \\`.feature-cards__card--mobile\\` - \u79FB\u52A8\u7AEF\u5361\u7247\u4FEE\u9970\u7B26\n- \\`.feature-cards__card-image\\` - \u5361\u7247\u80CC\u666F\u56FE\u7247\n- \\`.feature-cards__card-content\\` - \u5361\u7247\u5185\u5BB9\u5BB9\u5668\n- \\`.feature-cards__card-title\\` - \u5361\u7247\u6807\u9898\n- \\`.feature-cards__card-subtitle\\` - \u5361\u7247\u526F\u6807\u9898\n\n**\u793A\u4F8B CSS \u7528\u6CD5\uFF1A**\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u5361\u7247\u5706\u89D2 */\n.feature-cards__card {\n border-radius: 20px;\n}\n\n/* \u81EA\u5B9A\u4E49\u6807\u9898\u989C\u8272 */\n.feature-cards__card-title {\n color: #ff6b6b;\n}\n\n/* \u81EA\u5B9A\u4E49\u5361\u7247\u60AC\u505C\u6548\u679C */\n.feature-cards__card:hover {\n transform: translateY(-5px);\n transition: transform 0.3s ease;\n}\n\n/* \u81EA\u5B9A\u4E49\u7F51\u683C\u95F4\u8DDD */\n.feature-cards__grid {\n gap: 24px;\n}\n\\`\\`\\`\n `,\n },\n },\n },\n}\n"],
5
+ "mappings": "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",
6
+ "names": ["FeatureCards", "meta", "featureCards_stories_default", "defaultData", "Default", "LightTheme", "item", "WithLinks", "TwoCards", "SingleCard", "WithoutSubtitle", "FourCards", "FiveCards", "WithRounded", "TwoCardsWithRounded", "FourCardsWithRounded", "FiveCardsWithRounded", "WithCustomStyles"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.0.26-alpha.1762827586408",
3
+ "version": "1.0.26-alpha.1762841026334",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",